fix: some props of the model trigger payload had snake_case, fixed them to camelCase

apps/console/src/app/(providers)/root-provider.tsx

@@ -29,7 +29,7 @@ export const RootProvider = ({ children }: { children: React.ReactNode }) => {
   const { initPipelineBuilder } = useInstillStore(useShallow(selector));
 
   const initCreateResourceFormStore = useCreateResourceFormStore(
-    (store) => store.init
+    (store) => store.init,
   );
   const closeModal = useModalStore((store) => store.closeModal);
 

packages/toolkit/src/constant/model.ts

@@ -27,33 +27,33 @@ export const defaultCodeSnippetStyles = {
 
 const taskPayloads = {
   TASK_CLASSIFICATION: `"classification": {
-        "image_url": {your-input-image-url}
+        "imageUrl": {your-input-image-url}
       }`,
   TASK_DETECTION: `"detection": {
-        "image_url": {your-input-image-url}
+        "imageUrl": {your-input-image-url}
       }`,
   TASK_KEYPOINT: `"keypoint": {
-        "image_url": {your-input-image-url}
+        "imageUrl": {your-input-image-url}
       }`,
   TASK_OCR: `"ocr": {
-        "image_url": {your-input-image-url}
+        "imageUrl": {your-input-image-url}
       }`,
-  TASK_INSTANCE_SEGMENTATION: `"instance_segmentation": {
-        "image_url": {your-input-image-url}
+  TASK_INSTANCE_SEGMENTATION: `"instanceSegmentation": {
+        "imageUrl": {your-input-image-url}
       }`,
-  TASK_SEMANTIC_SEGMENTATION: `"semantic_segmentation": {
-        "image_url": {your-input-image-url}
+  TASK_SEMANTIC_SEGMENTATION: `"semanticSegmentation": {
+        "imageUrl": {your-input-image-url}
       }`,
-  TASK_TEXT_GENERATION: `"text_generation": {
+  TASK_TEXT_GENERATION: `"textGeneration": {
         "prompt": "In this beautiful day,",
-        "system_message": "you are a helpful assistant",
-        "max_new_tokens": 1024,
-        "top_k": 5,
+        "systemMessage": "you are a helpful assistant",
+        "maxNewTokens": 1024,
+        "topK": 5,
         "temperature": 0.7
       }`,
-  TASK_TEXT_GENERATION_CHAT: `"text_generation": {
+  TASK_TEXT_GENERATION_CHAT: `"textGeneration": {
         "prompt": "How is the weather today?",
-        "chat_history": [
+        "chatHistory": [
           {
             "role": "user",
             "content": [
@@ -64,36 +64,36 @@ const taskPayloads = {
             ]
           }
         ],
-        "system_message": "you are a helpful assistant",
-        "max_new_tokens": 1024,
-        "top_k": 5,
+        "systemMessage": "you are a helpful assistant",
+        "maxNewTokens": 1024,
+        "topK": 5,
         "temperature": 0.7
       }`,
-  TASK_TEXT_TO_IMAGE: `"text_to_image": {
+  TASK_TEXT_TO_IMAGE: `"textToImage": {
         "prompt": "award winning high resolution photo of a giant tortoise",
         "steps": 1,
-        "cfg_scale": 5.5,
+        "cfgScale": 5.5,
         "seed": 1,
         "samples": 1
       }`,
-  TASK_IMAGE_TO_IMAGE: `"image_to_image": {
+  TASK_IMAGE_TO_IMAGE: `"imageToImage": {
         "prompt": "spacedog",
-        "prompt_image_url": "https://artifacts.instill.tech/imgs/dog.jpg",
+        "promptImageUrl": "https://artifacts.instill.tech/imgs/dog.jpg",
         "steps": 1,
-        "cfg_scale": 5.5,
+        "cfgScale": 5.5,
         "seed": 1,
         "samples": 1
       }`,
-  TASK_VISUAL_QUESTION_ANSWERING: `"visual_question_answering": {
+  TASK_VISUAL_QUESTION_ANSWERING: `"visualQuestionAnswering": {
         "prompt": "what is in the image?",
-        "prompt_images": [
+        "promptImages": [
           {
-            "prompt_image_url": "https://artifacts.instill.tech/imgs/dog.jpg"
+            "promptImageUrl": "https://artifacts.instill.tech/imgs/dog.jpg"
           }
         ],
-        "system_message": "you are a helpful assistant",
-        "max_new_tokens": 1024,
-        "top_k": 5,
+        "systemMessage": "you are a helpful assistant",
+        "maxNewTokens": 1024,
+        "topK": 5,
         "temperature": 0.7
       }`,
 };

packages/toolkit/src/lib/convertSentenceToCamelCase.ts

@@ -0,0 +1,8 @@
+//https://stackoverflow.com/a/71426723/2205002
+export const convertSentenceToCamelCase = (str: string) =>
+  str
+    .split(" ")
+    .map((e, i) =>
+      i ? e.charAt(0).toUpperCase() + e.slice(1).toLowerCase() : e.toLowerCase()
+    )
+    .join("");

packages/toolkit/src/lib/index.ts

@@ -24,6 +24,7 @@ export * from "./getCaptializeTwoWordsFromName";
 export * from "./convertLongNumberToK";
 export * from "./formatNumberToLocale";
 export * from "./generateDateInPast";
+export * from "./convertSentenceToCamelCase";
 
 import debounce from "lodash.debounce";
 export { debounce };

packages/toolkit/src/view/model/view-model/ModelOverview.tsx

@@ -23,6 +23,7 @@ import {
   useLastModelTriggerResult,
   useShallow,
   useTriggerUserModelAsync,
+  convertSentenceToCamelCase,
 } from "../../../lib";
 import { ModelReadme } from "./ModelReadme";
 import { z } from "zod";
@@ -47,7 +48,11 @@ const selector = (store: InstillStore) => ({
 });
 
 const convertTaskNameToPayloadPropName = (taskName?: ModelTask) =>
-  taskName ? taskName.replace("TASK_", "").toLowerCase() : null;
+  taskName
+    ? convertSentenceToCamelCase(
+        taskName.replace(/TASK_|_/g, (d) => (d === "TASK_" ? "" : " "))
+      )
+    : null;
 
 const convertValuesToString = (props: Record<string, unknown>) => {
   const convertedProps: Record<string, unknown> = {};