Fixed ModelDetailPage import error and refactores sampleInput names f…

…or consistency (#33)
c3sr · Jul 17, 2024 · cadfc06 · cadfc06
1 parent c3c4775
commit cadfc06
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 27 deletions.
diff --git a/src/components/Experiment/QuickInput/QuickInput.stories.js b/src/components/Experiment/QuickInput/QuickInput.stories.js
@@ -33,11 +33,11 @@ import {
   SampleVisualQuestionAnsweringInputs,
   SampleTextGuidedImageToImageInputs,
   SampleDocumentQuestionAnsweringInputs,
-  SampleTextToImage,
-  SampleTextToVideo,
-  SampleImageToText,
+  SampleTextToImageInputs,
+  SampleTextToVideoInputs,
+  SampleImageToTextInputs,
   SampleTextTo3DInputs,
-  SampleTextClassification,
+  SampleTextClassificationInputs,
   SampleAudioToAudioInputs,
   SampleAudioClassificationInputs,
 } from "../../../helpers/sampleImages";
@@ -108,7 +108,7 @@ ImageTo3D.args = {
     },
   },
   onRunModelClicked: (inputs) => {
-    console.log('inputs: ', inputs)
+    console.log('inputs: ', inputs);
   }
 };
 
@@ -222,7 +222,7 @@ DocumentQuestionAnswering.args = {
 
 export const TextToImage = Template.bind({});
 TextToImage.args = {
-  sampleInputs: SampleTextToImage,
+  sampleInputs: SampleTextToImageInputs,
   model: {
     output: {
       type: textToImage,
@@ -232,7 +232,7 @@ TextToImage.args = {
 
 export const TextToVideo = Template.bind({});
 TextToVideo.args = {
-  sampleInputs: SampleTextToVideo,
+  sampleInputs: SampleTextToVideoInputs,
   model: {
     output: {
       type: textToVideo,
@@ -242,7 +242,7 @@ TextToVideo.args = {
 
 export const ImageToText = Template.bind({});
 ImageToText.args = {
-  sampleInputs: SampleImageToText,
+  sampleInputs: SampleImageToTextInputs,
   model: {
     output: {
       type: imageToText,
@@ -262,7 +262,7 @@ TextTo3D.args = {
 
 export const TextClassification = Template.bind({});
 TextClassification.args = {
-  sampleInputs: SampleTextClassification,
+  sampleInputs: SampleTextClassificationInputs,
   model: {
     output: {
       type: textClassification,

diff --git a/src/components/ModelDetailPage/ModelDetailPage.jsx b/src/components/ModelDetailPage/ModelDetailPage.jsx
@@ -22,6 +22,10 @@ import {
   textToImage,
   textToVideo,
   textTo3D,
+  audioClassification,
+  imageToText,
+  textClassification,
+  audioToAudio,
 } from "../../helpers/TaskIDs";
 import {
   SampleImageClassificationInputs,
@@ -36,10 +40,13 @@ import {
   SampleVisualQuestionAnsweringInputs,
   SampleTextGuidedImageToImageInputs,
   SampleDocumentQuestionAnsweringInputs,
-  SampleTextToImage,
-  SampleTextToVideo,
+  SampleTextToImageInputs,
+  SampleTextToVideoInputs,
   SampleImageTo3DInputs,
-  SampleTextTo3DInputs
+  SampleTextTo3DInputs,
+  SampleImageToTextInputs,
+  SampleTextClassificationInputs,
+  SampleAudioToAudioInputs
 } from "../../helpers/sampleImages";  // This file should be renamed
 
 const ModelDetailPage = (props) => {
@@ -75,11 +82,19 @@ const ModelDetailPage = (props) => {
       case documentQuestionAnswering:
         return SampleDocumentQuestionAnsweringInputs;
       case textToImage:
-        return SampleTextToImage;
+        return SampleTextToImageInputs;
       case textToVideo:
-        return SampleTextToVideo;
+        return SampleTextToVideoInputs;
       case textTo3D:
         return SampleTextTo3DInputs;
+      case imageToText:
+        return SampleImageToTextInputs;
+      case textClassification:
+        return SampleTextClassificationInputs;
+      case audioToAudio:
+        return SampleAudioToAudioInputs;
+      case audioClassification:
+        return SampleAudioToAudioInputs;
       case image_classification:
       default:
         return SampleImageClassificationInputs;
@@ -89,12 +104,14 @@ const ModelDetailPage = (props) => {
   const getInputType = () => {
     switch (outputType) {
       case audioToText:
+      case audioToAudio:
       case audioClassification:
         return "audio";
       case textToText:
       case textToCode:
       case textConversation:
-      case textTo3D:  
+      case textTo3D:
+      case textClassification:
         return "text";
       case object_detection:
       case image_enhancement:
@@ -103,6 +120,7 @@ const ModelDetailPage = (props) => {
       case instance_segmentation:
       case styleTransfer:
       case imageTo3D:
+      case imageToText:
       default:
         return "image";
     }

diff --git a/src/helpers/Task.js b/src/helpers/Task.js
@@ -78,11 +78,11 @@ import {
   SampleTextGuidedImageToImageInputs,
   SampleVisualQuestionAnsweringInputs,
   SampleDocumentQuestionAnsweringInputs,
-  SampleTextToImage,
-  SampleTextToVideo,
-  SampleImageToText,
+  SampleTextToImageInputs,
+  SampleTextToVideoInputs,
+  SampleImageToTextInputs,
   SampleTextTo3DInputs,
-  SampleTextClassification,
+  SampleTextClassificationInputs,
   SampleAudioToAudioInputs,
   SampleAudioClassificationInputs,
 } from "./sampleImages";
@@ -387,7 +387,7 @@ export default class Task {
     inputText: "Input prompt to generate an image",
     outputText: "Image output",
     icon: (props) => <TextToImage {...props} />,
-    sampleInputs: SampleTextToImage,
+    sampleInputs: SampleTextToImageInputs,
     hideUpload: true,
     tutorialDescription:
       "Text to Image model generates images based on a textual prompt.",
@@ -400,7 +400,7 @@ export default class Task {
     inputText: "Input prompt to generate a video",
     outputText: "Video output",
     icon: (props) => <TextToVideo {...props} />,
-    sampleInputs: SampleTextToVideo,
+    sampleInputs: SampleTextToVideoInputs,
     hideUpload: true,
     tutorialDescription:
       "Text to Video model generates a video based on a textual prompt.",
@@ -426,7 +426,7 @@ export default class Task {
     inputText: "Generate a caption for the image.",
     outputText: "Caption:",
     icon: (props) => <ImageToText {...props} />,
-    sampleInputs: SampleImageToText,
+    sampleInputs: SampleImageToTextInputs,
     tutorialDescription:
       "Image to Text model generates a caption for an image.",
     inputType: TaskInputTypes.Image,
@@ -440,7 +440,7 @@ export default class Task {
     inputText: "See how well this model can classify the text.",
     outputText: "How this model classified the text:",
     icon: (props) => <TextClassification {...props} />,
-    sampleInputs: SampleTextClassification,
+    sampleInputs: SampleTextClassificationInputs,
     tutorialDescription:
       "Image classification models can recognize a single object in an image.",
     inputType: TaskInputTypes.Text,

diff --git a/src/helpers/sampleImages.js b/src/helpers/sampleImages.js
@@ -191,18 +191,18 @@ export const SampleDocumentQuestionAnsweringInputs = [
   ]
 ];
 
-export const SampleTextToImage = [
+export const SampleTextToImageInputs = [
   "Cat and dog playing",
   "Flower in a garden",
   "Sunset on a beach"
 ];
-export const SampleTextToVideo = [
+export const SampleTextToVideoInputs = [
   "Cat and dog playing",
   "Flower in a garden",
   "Sunset on a beach"
 ];
 
-export const SampleImageToText = [
+export const SampleImageToTextInputs = [
   {
     src: "https://s3.amazonaws.com/uploads.staging.mlmodelscope.org/birdy.png",
     alt: "bird"
@@ -221,7 +221,7 @@ export const SampleTextTo3DInputs = [
   "a cool drum set"
 ];
 
-export const SampleTextClassification = [
+export const SampleTextClassificationInputs = [
   "The weather is very pleasant today.",
   "The ending of the movie was sad.",
   "There is a car parked there."