diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/ImagesField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/ImagesField.tsx index e32c57f3d..a89f13408 100644 --- a/packages/toolkit/src/lib/use-instill-form/components/regular/ImagesField.tsx +++ b/packages/toolkit/src/lib/use-instill-form/components/regular/ImagesField.tsx @@ -2,7 +2,11 @@ import * as React from "react"; import { Form, ScrollArea } from "@instill-ai/design-system"; -import { AutoFormFieldBaseProps, fillArrayWithZeros } from "../../.."; +import { + AutoFormFieldBaseProps, + GeneralRecord, + fillArrayWithZeros, +} from "../../.."; import { readFileToBinary } from "../../../../view"; import { UploadFileInput } from "../trigger-request-form-fields/UploadFileInput"; import { FileListItem } from "../trigger-request-form-fields/FileListItem"; @@ -19,8 +23,10 @@ export const ImagesField = ({ isRequired, size, shortDescription, + instillModelPromptImageBase64ObjectFormat, }: AutoFormFieldBaseProps & { shortDescription?: string; + instillModelPromptImageBase64ObjectFormat?: boolean; }) => { const [imageFiles, setImageFiles] = React.useState([]); const inputRef = React.useRef(null); @@ -78,13 +84,27 @@ export const ImagesField = ({ onChange={async (e) => { if (e.target.files && e.target.files.length > 0) { const files: File[] = []; - const binaries: string[] = []; - for (const file of e.target.files) { - const binary = await readFileToBinary(file); - files.push(file); - binaries.push(binary); + + if (instillModelPromptImageBase64ObjectFormat) { + const binaries: GeneralRecord[] = []; + for (const file of e.target.files) { + const binary = await readFileToBinary(file); + files.push(file); + binaries.push({ + prompt_image_base64: binary, + }); + } + field.onChange(binaries); + } else { + const binaries: string[] = []; + for (const file of e.target.files) { + const binary = await readFileToBinary(file); + files.push(file); + binaries.push(binary); + } + field.onChange(binaries); } - field.onChange(binaries); + setImageFiles((prev) => [...prev, ...files]); } }} diff --git a/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx b/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx index e0c550972..0d75dc5e5 100644 --- a/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx +++ b/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx @@ -288,6 +288,9 @@ export function pickRegularFieldsFromInstillFormTree( size={size} isHidden={tree.isHidden} isRequired={tree.isRequired} + instillModelPromptImageBase64ObjectFormat={ + tree.instillModelPromptImageBase64ObjectFormat + } /> ); } diff --git a/packages/toolkit/src/lib/use-instill-form/transform/transformInstillJSONSchemaToFormTree.ts b/packages/toolkit/src/lib/use-instill-form/transform/transformInstillJSONSchemaToFormTree.ts index 7c58b8bd8..b9ccbb2e0 100644 --- a/packages/toolkit/src/lib/use-instill-form/transform/transformInstillJSONSchemaToFormTree.ts +++ b/packages/toolkit/src/lib/use-instill-form/transform/transformInstillJSONSchemaToFormTree.ts @@ -368,6 +368,7 @@ const baseFields: Array = [ "patternProperties", "instillCredentialMap", "instillCredential", + "instillModelPromptImageBase64ObjectFormat", ]; function pickBaseFields( diff --git a/packages/toolkit/src/lib/use-instill-form/transform/transformInstillJSONSchemaToZod.ts b/packages/toolkit/src/lib/use-instill-form/transform/transformInstillJSONSchemaToZod.ts index 23199a5d1..c537cf193 100644 --- a/packages/toolkit/src/lib/use-instill-form/transform/transformInstillJSONSchemaToZod.ts +++ b/packages/toolkit/src/lib/use-instill-form/transform/transformInstillJSONSchemaToZod.ts @@ -467,10 +467,24 @@ export function transformInstillJSONSchemaToZod({ targetSchema.instillAcceptFormats.length > 0 ) { if (targetSchema.instillAcceptFormats[0].includes("array:image")) { - instillZodSchema = instillZodSchema = z - .array(z.string().nullable().optional()) - .nullable() - .optional(); + // model trigger have a special format for images field. We need to + // adapt it. + + if (targetSchema.instillModelPromptImageBase64ObjectFormat) { + instillZodSchema = instillZodSchema = z + .array( + z.object({ + prompt_image_base64: z.string(), + }) + ) + .nullable() + .optional(); + } else { + instillZodSchema = instillZodSchema = z + .array(z.string().nullable().optional()) + .nullable() + .optional(); + } if (isHidden) { instillZodSchema = z.any(); diff --git a/packages/toolkit/src/lib/use-instill-form/types.ts b/packages/toolkit/src/lib/use-instill-form/types.ts index f7a7f51d3..4f26a4371 100644 --- a/packages/toolkit/src/lib/use-instill-form/types.ts +++ b/packages/toolkit/src/lib/use-instill-form/types.ts @@ -21,6 +21,7 @@ export type InstillCustomProps = { instillPatternErrorMessage?: string; instillCredentialMap?: InstillCredentialMap; instillCredential?: boolean; + instillModelPromptImageBase64ObjectFormat?: boolean; }; export type InstillCredentialMap = {