feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/workflow/playground/src/node-registries/image-generate/components/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export { ModelSettingField } from './model-setting-field';
+export { ReferencesField } from './references-field';
+export { PromptField } from './prompt-field';

frontend/packages/workflow/playground/src/node-registries/image-generate/components/model-setting-field/create-model-options.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { I18n, type I18nKeysNoOptionsType } from '@coze-arch/i18n';
+
+import thumbnail8 from '../../assets/8.png';
+import thumbnail7 from '../../assets/7.jpg';
+import thumbnail6 from '../../assets/6.jpg';
+import thumbnail5 from '../../assets/5.jpg';
+import thumbnail4 from '../../assets/4.jpg';
+import thumbnail3 from '../../assets/3.jpg';
+import thumbnail2 from '../../assets/2.jpg';
+import thumbnail1 from '../../assets/1.jpg';
+
+const thumbnails = [
+  thumbnail1,
+  thumbnail2,
+  thumbnail3,
+  thumbnail4,
+  thumbnail5,
+  thumbnail6,
+  thumbnail7,
+  thumbnail8,
+];
+
+export function createModelOptions() {
+  let models = [1, 8, 2, 3, 4, 5, 6, 7];
+
+  if (IS_OVERSEA) {
+    models = models.filter(model => ![6].includes(model));
+  }
+
+  return models.map(model => ({
+    label: I18n.t(`Imageflow_model${model}` as I18nKeysNoOptionsType),
+    value: model,
+    thumbnail: thumbnails[model - 1],
+  }));
+}

frontend/packages/workflow/playground/src/node-registries/image-generate/components/model-setting-field/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export { ModelSettingField } from './model-setting-field';

frontend/packages/workflow/playground/src/node-registries/image-generate/components/model-setting-field/model-field.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { ImageModelSelectField } from '@/node-registries/common/components';
+import { type FieldProps } from '@/form';
+
+import { createModelOptions } from './create-model-options';
+
+export const ModelField = (props: Omit<FieldProps, 'children'>) => (
+  <ImageModelSelectField options={createModelOptions()} {...props} />
+);

frontend/packages/workflow/playground/src/node-registries/image-generate/components/model-setting-field/model-setting-field.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { I18n } from '@coze-arch/i18n';
+
+import { Section, SliderField, type FieldProps } from '@/form';
+
+import { RatioField } from './ratio-field';
+import { ModelField } from './model-field';
+
+export const ModelSettingField = ({ name }: Pick<FieldProps, 'name'>) => (
+  <Section title={I18n.t('Imageflow_model_deploy')}>
+    <div className="flex flex-col gap-[8px]">
+      <ModelField
+        name={`${name}.model`}
+        layout="vertical"
+        label={I18n.t('Imageflow_model')}
+      />
+      <RatioField
+        name={`${name}.custom_ratio`}
+        layout="vertical"
+        label={I18n.t('Imageflow_ratio')}
+        tooltip={I18n.t('Imageflow_size_range')}
+      />
+      <SliderField
+        name={`${name}.ddim_steps`}
+        layout="vertical"
+        label={I18n.t('Imageflow_generate_standard')}
+        tooltip={I18n.t('imageflow_generation_desc1')}
+        min={1}
+        max={40}
+        step={1}
+      />
+    </div>
+  </Section>
+);

frontend/packages/workflow/playground/src/node-registries/image-generate/components/model-setting-field/ratio-field.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { SizeSelect } from '@coze-workflow/components';
+
+import { withField, useField } from '@/form';
+
+const ratioOptions = [
+  {
+    label: '16:9 (1024*576)',
+    value: {
+      width: 1024,
+      height: 576,
+    },
+  },
+  {
+    label: '3:2 (1024*682)',
+    value: {
+      width: 1024,
+      height: 682,
+    },
+  },
+  {
+    label: '4:3 (1024*768)',
+    value: {
+      width: 1024,
+      height: 768,
+    },
+  },
+  {
+    label: '1:1 (1024*1024)',
+    value: {
+      width: 1024,
+      height: 1024,
+    },
+  },
+  {
+    label: '3:4 (768*1024)',
+    value: {
+      width: 768,
+      height: 1024,
+    },
+  },
+  {
+    label: '2:3 (682*1024)',
+    value: {
+      width: 682,
+      height: 1024,
+    },
+  },
+  {
+    label: '9:16 (576*1024)',
+    value: {
+      width: 576,
+      height: 1024,
+    },
+  },
+];
+
+export const RatioField = withField(() => {
+  const { value, readonly, onChange } = useField<{
+    width?: number;
+    height?: number;
+  }>();
+
+  return (
+    <SizeSelect
+      value={value}
+      onChange={onChange}
+      readonly={readonly}
+      minWidth={512}
+      maxWidth={1536}
+      minHeight={512}
+      maxHeight={1536}
+      options={ratioOptions}
+      layoutStyle="vertical"
+    />
+  );
+});

frontend/packages/workflow/playground/src/node-registries/image-generate/components/prompt-field.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { I18n } from '@coze-arch/i18n';
+
+import { ExpressionEditorField } from '@/node-registries/common/components';
+import { withField, useField, Section } from '@/form';
+
+export const PromptField = withField(
+  () => {
+    const { name } = useField();
+    const promptName = `${name}.prompt`;
+    const negativePromptName = `${name}.negative_prompt`;
+    // 保障和之前节点testID不变
+    const promptTestIDSuffix = name.replace('inputs.', '');
+    const negativePromptTestIDSuffix = name.replace('inputs.', '');
+
+    return (
+      <Section
+        title={I18n.t('Imageflow_prompt')}
+        tooltip={I18n.t('imageflow_generation_desc4')}
+      >
+        <ExpressionEditorField
+          name={promptName}
+          testIDSuffix={promptTestIDSuffix}
+          label={I18n.t('Imageflow_positive')}
+          placeholder={I18n.t('Imageflow_positive_placeholder')}
+          required={true}
+          layout="vertical"
+        />
+        <ExpressionEditorField
+          name={negativePromptName}
+          testIDSuffix={negativePromptTestIDSuffix}
+          label={I18n.t('Imageflow_negative')}
+          placeholder={I18n.t('Imageflow_negative_placeholder')}
+          layout="vertical"
+        />
+      </Section>
+    );
+  },
+  {
+    hasFeedback: false,
+  },
+);

frontend/packages/workflow/playground/src/node-registries/image-generate/components/references-field/create-preprocessor-options.ts

@@ -0,0 +1,98 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { I18n, type I18nKeysNoOptionsType } from '@coze-arch/i18n';
+
+import thumbnail7 from '../../assets/reference-7.png';
+import thumbnail6 from '../../assets/reference-6.jpg';
+import thumbnail5 from '../../assets/reference-5.jpg';
+import thumbnail4 from '../../assets/reference-4.jpg';
+import thumbnail3 from '../../assets/reference-3.jpg';
+import thumbnail2 from '../../assets/reference-2.jpg';
+import thumbnail1 from '../../assets/reference-1.jpg';
+
+const thumbnails = [
+  thumbnail1,
+  thumbnail2,
+  thumbnail3,
+  thumbnail4,
+  thumbnail5,
+  thumbnail6,
+  thumbnail7,
+];
+
+export function createPreprocessorOptions({
+  currentPreprocessor,
+  allSelectedPreprocessor = [],
+}: {
+  currentPreprocessor?: number;
+  allSelectedPreprocessor: number[];
+}) {
+  const options = [1, 2, 3, 4, 5, 7, 6].map(index => ({
+    label: I18n.t(`Imageflow_reference${index}` as I18nKeysNoOptionsType),
+    value: index,
+    tooltip: I18n.t(
+      `imageflow_reference_desc${index}` as I18nKeysNoOptionsType,
+    ),
+    thumbnail: thumbnails[index - 1],
+    disabled: isPreprocessorDisabled({
+      currentItemPreprocessor: currentPreprocessor,
+      currentOptionPreprocessor: index,
+      allSelectedPreprocessor,
+    }),
+  }));
+
+  return options;
+}
+
+function isPreprocessorDisabled({
+  currentItemPreprocessor,
+  currentOptionPreprocessor,
+  allSelectedPreprocessor,
+}: {
+  currentItemPreprocessor?: number;
+  currentOptionPreprocessor: number;
+  allSelectedPreprocessor: number[];
+}) {
+  let disabled = false;
+
+  // 如果当前选项的预处理器已经被当前项选中 从allSelectedPreprocessor中移除
+  allSelectedPreprocessor = allSelectedPreprocessor.filter(
+    item =>
+      !(
+        item === currentItemPreprocessor &&
+        currentItemPreprocessor === currentOptionPreprocessor
+      ),
+  );
+
+  // 不能添加相同的模型
+  if (allSelectedPreprocessor.includes(currentOptionPreprocessor)) {
+    disabled = true;
+  }
+
+  // 1到4编号最多只能出现两个 4以上编号的模型不做限制
+  const group = [1, 2, 3, 4];
+  if (group.includes(currentOptionPreprocessor)) {
+    const isPreprocessorGroup =
+      allSelectedPreprocessor.filter(item => group.includes(item)).length === 2;
+
+    if (isPreprocessorGroup) {
+      disabled = true;
+    }
+  }
+
+  return disabled;
+}

frontend/packages/workflow/playground/src/node-registries/image-generate/components/references-field/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export { ReferencesField } from './references-field';

frontend/packages/workflow/playground/src/node-registries/image-generate/components/references-field/references-field.tsx

@@ -0,0 +1,126 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useMemo } from 'react';
+
+import { ViewVariableType } from '@coze-workflow/variable';
+import { I18n } from '@coze-arch/i18n';
+
+import { ValueExpressionInputField } from '@/node-registries/common/fields';
+import { ImageModelSelectField } from '@/node-registries/common/components';
+import {
+  withFieldArray,
+  Section,
+  FieldArrayList,
+  FieldArrayItem,
+  ColumnTitles,
+  useFieldArray,
+  InputNumberField,
+  AddButton,
+} from '@/form';
+
+import { type Reference } from '../../types';
+import { DEFAULT_REFERENCE } from '../../constants';
+import { createPreprocessorOptions } from './create-preprocessor-options';
+
+export const ReferencesField = withFieldArray(() => {
+  const { name, value, append, remove } = useFieldArray<Reference>();
+
+  const preprocessors = useMemo(
+    () =>
+      value
+        ?.map(item => item.preprocessor)
+        .filter(item => item !== undefined) || [],
+    [value],
+  );
+
+  return (
+    <Section
+      title={I18n.t('Imageflow_reference_image')}
+      actions={[
+        <AddButton
+          key="add"
+          onClick={() => append(DEFAULT_REFERENCE)}
+          disabled={value && value?.length >= 5}
+        />,
+      ]}
+    >
+      <ColumnTitles
+        columns={[
+          {
+            label: I18n.t('Imageflow_reference_info1'),
+            style: {
+              width: 120,
+            },
+          },
+          {
+            label: I18n.t('Imageflow_reference_info2'),
+            style: {
+              width: 150,
+            },
+          },
+          {
+            label: I18n.t('Imageflow_reference_info3'),
+          },
+        ]}
+      />
+      <FieldArrayList>
+        {value?.map((item, index) => {
+          const preprocessorName = `${name}.${index}.preprocessor`;
+          const urlName = `${name}.${index}.url`;
+          const weightName = `${name}.${index}.weight`;
+
+          const options = createPreprocessorOptions({
+            currentPreprocessor: item.preprocessor,
+            allSelectedPreprocessor: preprocessors,
+          });
+
+          return (
+            <FieldArrayItem onRemove={() => remove(index)}>
+              <div className="flex-[2_1_0%] min-w-[0px] max-w-[120px]">
+                <ImageModelSelectField
+                  name={preprocessorName}
+                  options={options}
+                  showClear={true}
+                  placeholder={I18n.t('Imageflow_mode_choose')}
+                />
+              </div>
+
+              <div className="w-[150px]">
+                <ValueExpressionInputField
+                  name={urlName}
+                  inputType={ViewVariableType.Image}
+                  selectStyle={{
+                    width: 80,
+                  }}
+                />
+              </div>
+
+              <div className="w-full">
+                <InputNumberField
+                  name={weightName}
+                  min={0}
+                  max={1}
+                  step={0.1}
+                />
+              </div>
+            </FieldArrayItem>
+          );
+        })}
+      </FieldArrayList>
+    </Section>
+  );
+});