Bug/model comparison (#51)

* Fix bug in InputPreviewImage component to display the correct selected input image

* Debugged add models feature

* Added src to adapt to new input formatting style

* Removed boiler loading page for comparision

* Fixed just single model ouput for comparision, TODO: Fix InputSelector

* Fixed InputSelector for single input and multi-input

* Fixed switching between inputs

* Fixed mutiple inputs bug

* Refactor task retrieval in ExperimentDetailContainer and update navigation in NewExperimentContainer to include task query parameter

* Refactor input handling now supporting multiple inputs in model comparison

* Added support for input handling and UI for multiple inputs in Experiment components

* Add className prop to MultiInputPreview for styling in InputSelectors

* Fixed Add Model feature updating input handling and integrated task in URL

* Fixed duplicate inputs in the experiment

* Add Webpack configuration for handling .mjs files with source-map-loader

* Refactor runModels to run trial for each input when adding models

* Add title attribute to text previews for full input visibility

* Fix input reference in MultiInputPreview for accurate text display

* Remove unnecessary query string delimiter in experiment navigation links

* Update styles for input selector buttons and document previews

* Fixed Audio Input rendering
Refactor input handling and improve sample input structure in QuickInput
InputSelectors components

Author: ShivanshShalabh

src/components/Experiment/QuickInput/Tabs/SampleInput/useSampleInputControl.js

@@ -1,5 +1,5 @@
-import {useState} from "react";
-import {QuickInputType} from "../../quickInputType";
+import { useState } from "react";
+import { QuickInputType } from "../../quickInputType";
 import Task from "../../../../../helpers/Task";
 
 export default function useSampleInputControl(props) {
@@ -8,14 +8,12 @@ export default function useSampleInputControl(props) {
 
   const [selectedIndex, setSelectedIndex] = useState([]);
 
-  const isSelected = (input) => sampleInputType === QuickInputType.Image ? selectedIndex.indexOf(input.src) > -1 : selectedIndex.indexOf(input) > -1;
+  const isSelected = (input) => input.src ? selectedIndex.indexOf(input.src) > -1 : selectedIndex.indexOf(input) > -1;
   const isUnselected = (input) => selectedIndex.length >= 0 && sampleInputType === QuickInputType.Image ? selectedIndex.indexOf(input.src) === -1 : selectedIndex.indexOf(input) === -1;
-  
+
   const selectMultiInput = (selectedValueIndex) => {
     // Note: Currently using both new and old way of handling inputs but should refactor in the future
-    let input = sampleInputType === QuickInputType.Image ? 
-        props.sampleInputs[props.inputIndex][selectedValueIndex].src : 
-        props.sampleInputs[props.inputIndex][selectedValueIndex];
+    let input = sampleInputType === props.sampleInputs[props.inputIndex][selectedValueIndex].src ?? props.sampleInputs[props.inputIndex][selectedValueIndex];
 
     if (props.multiple) {
       // TODO: This block was directly copied from selectInput
@@ -31,18 +29,16 @@ export default function useSampleInputControl(props) {
       if (typeof (props.inputSelected) === 'function')
         props.inputSelected(selected, props.inputIndex);
     } else {
-       setSelectedIndex([input]);
-       if (typeof(props.inputSelected) === 'function')
-          // Note: props.inputSelected is useQuickInputControl.selectMultiInput
-          props.inputSelected(input, props.inputIndex);
+      setSelectedIndex([input]);
+      if (typeof (props.inputSelected) === 'function')
+        // Note: props.inputSelected is useQuickInputControl.selectMultiInput
+        props.inputSelected(input, props.inputIndex);
     }
-  }
+  };
+
+  const selectInput = (index) => {
+    const input = props.sampleInputs[index].src ?? props.sampleInputs[index];
 
-  const selectInput = (index) => {    
-    const input = sampleInputType === QuickInputType.Image ?
-        props.sampleInputs[index].src :
-      props.sampleInputs[index];
-    
     if (props.multiple) {
       const selected = Array.from(selectedIndex);
       let storedIndex = selected.indexOf(input);
@@ -55,18 +51,18 @@ export default function useSampleInputControl(props) {
       if (typeof (props.inputSelected) === 'function')
         props.inputSelected(selected);
     } else {
-       setSelectedIndex([input]);
-       if (typeof(props.inputSelected) === 'function')
-         props.inputSelected(input, 0);
+      setSelectedIndex([input]);
+      if (typeof (props.inputSelected) === 'function')
+        props.inputSelected(input, 0);
     }
-  }
+  };
 
-  const {type} = props;
+  const { type } = props;
   return {
-    selectedIndex, 
-    selectInput: !task.useMultiInput ? selectInput : selectMultiInput, 
-    isSelected, 
-    isUnselected, 
+    selectedIndex,
+    selectInput: !task.useMultiInput ? selectInput : selectMultiInput,
+    isSelected,
+    isUnselected,
     type,
     sampleInputType
   };

src/components/ExperimentDetails/Inputs/InputSelectors.js

@@ -20,7 +20,6 @@ export default function InputSelectors(props) {
             className={getElement("input-preview")}
           />
         }
-        Input {index + 1}
       </>
     );
   };
@@ -52,6 +51,8 @@ export default function InputSelectors(props) {
             >
               <DeleteIcon />
             </button>
+            <p className={getElement("input-selector-number")}>Input {idx + 1}</p>
+
           </div>
         ))}
       </div>

src/components/ExperimentDetails/Inputs/InputSelectors.scss

@@ -83,7 +83,8 @@
           background: $azulDarkest;
         }
 
-        .input-selector__input-selector-btn-content,
+        .input-selector__input-selector-number,
+        .input-selector__input-preview__text,
         .input-selector__input-preview__document a {
           color: $white;
         }

src/helpers/Task.js

@@ -98,6 +98,7 @@ import {
   SampleVideoClassificationInputs,
   SampleTableEditingInputs,
   SampleTextToAudio,
+  SampleTextConversationInputs,
 } from "./sampleImages";
 import { TestImageClassificationResult } from "../components/Experiment/QuickOutput/Outputs/Classification/Features";
 import { TestImageEnhancementData } from "../components/Experiment/QuickOutput/Outputs/ImageEnhancement/testData/TestFeatures";
@@ -110,7 +111,7 @@ import { TestTextToAudioOutput } from "../components/Experiment/QuickOutput/Outp
 import { TestTextConversationOutput } from "../components/Experiment/QuickOutput/Outputs/TextConversation/testData/testTextConversationOutput";
 import { TaskInputTypes } from "./TaskInputTypes";
 import { TestStyleTransferOutput } from "../components/Experiment/QuickOutput/Outputs/StyleTransfer/testData/testStyleTransferOutput";
-import { TestMaskGenerationOutput } from "../components/Experiment/QuickOutput/Outputs/MaskGeneration/testData/testMaskGenerationOutput"; 
+import { TestMaskGenerationOutput } from "../components/Experiment/QuickOutput/Outputs/MaskGeneration/testData/testMaskGenerationOutput";
 import TextInputTab from "../components/Experiment/QuickInput/Tabs/TextInput/TextInputTab";
 import { TestVisualQuestionAnswering } from "../components/Experiment/QuickOutput/Outputs/VisualQuestionAnswering/testData/testVisualQuestionAnsweringOutput";
 import { TestDocumentQuestionAnswering } from "../components/Experiment/QuickOutput/Outputs/DocumentQuestionAnswering/testData/testDocumentQuestionAnsweringOuput";
@@ -261,7 +262,7 @@ export default class Task {
     icon: (props) => <MaskGeneration {...props} />,
     sampleInputs: SampleMaskGenerationInputs,
     tutorialDescription: "blah blah.",
-  });  
+  });
   static text_to_text = new Task({
     name: "Text to Text",
     description: "[insert text description here]",
@@ -318,7 +319,7 @@ export default class Task {
     inputText: "begin a conversation.",
     outputText: "Conversational responses from the virtual assistant",
     icon: (props) => <TextConversation {...props} />,
-    sampleInputs: [],
+    sampleInputs: SampleTextConversationInputs,
     tutorialDescription:
       "Type a question and receive a response from a virtual assistant",
     inputType: TaskInputTypes.Text,
@@ -525,12 +526,12 @@ export default class Task {
         inputText: 'get a new version of the csv',
         inputType: TaskInputTypes.Csv,
       },
-    ], 
+    ],
     outputText: "Summarized CSV file",
     icon: (props) => <TableEditing {...props} />,
     sampleInputs: SampleTableEditingInputs,
     tutorialDescription: "blah blah.",
-  });    
+  });
 
   constructor(options) {
     this.name = options.name ?? "";
@@ -633,7 +634,7 @@ export default class Task {
       case imageTo3D:
         return DefaultImageTo3DModel;
       case maskGeneration:
-        return DefaultMaskGenerationModel; 
+        return DefaultMaskGenerationModel;
       case textToText:
         return DefaultTextModel;
       case textToCode:
@@ -668,7 +669,7 @@ export default class Task {
       case videoClassification:
         return DefaultVideoClassificationModel;
       case tableEditing:
-        return DefaultTableEditingModel
+        return DefaultTableEditingModel;
       default:
         return undefined;
     }

src/helpers/sampleImages.js

@@ -115,7 +115,7 @@ export const SampleMaskGenerationInputs = [
       alt: "cat and dog",
     },
   ]
-]
+];
 
 export const SampleTextInputs = [
   { src: "Lorem ipsum dolor sit amet" },
@@ -133,7 +133,16 @@ export const SampleAudioToTextInputs = [
   {
     title: "automatic-speech-recognition-input.flac",
     src: "https://xlab1.netlify.app/automatic-speech-recognition-input.flac"
-  }
+  },
+  {
+    title: "demo1.mp3",
+    src: "https://samplelib.com/lib/preview/mp3/sample-6s.mp3"
+  },
+  ,
+  {
+    title: "demo2.mp3",
+    src: "https://samplelib.com/lib/preview/mp3/sample-12s.mp3"
+  },
 ];
 
 export const SampleTextConversationInputs = [
@@ -245,14 +254,13 @@ export const SampleAudioToAudioInputs = [
 
   },
   {
-    title: "audio2.flac",
-    src: "https://xlab1.netlify.app/audio-to-audio-input.flac"
-
+    title: "demo1.mp3",
+    src: "https://samplelib.com/lib/preview/mp3/sample-6s.mp3"
   },
+  ,
   {
-    title: "audio3.flac",
-    src: "https://xlab1.netlify.app/audio-to-audio-input.flac"
-
+    title: "demo2.mp3",
+    src: "https://samplelib.com/lib/preview/mp3/sample-12s.mp3"
   },
 ];
 export const SampleAudioClassificationInputs = [
@@ -261,6 +269,15 @@ export const SampleAudioClassificationInputs = [
     src: "https://xlab1.netlify.app/audio-classification-input.flac"
 
   },
+  {
+    title: "demo1.mp3",
+    src: "https://samplelib.com/lib/preview/mp3/sample-6s.mp3"
+  },
+  ,
+  {
+    title: "demo2.mp3",
+    src: "https://samplelib.com/lib/preview/mp3/sample-12s.mp3"
+  },
 ];
 export const SampleTextToAudio = [
   { src: "a chill song with influences from lofi, chillstep and downtempo" },