From 1f492574d015601ef4bd21bb50e75cff9663fd3f Mon Sep 17 00:00:00 2001
From: amirnd51 <amirnass@buffalo.edu>
Date: Tue, 23 Jul 2024 19:10:31 +0000
Subject: [PATCH 1/9] [WIP}Refactor input handling to use src property
 consistently

---
 .../Experiment/QuickOutput/InputPreview.js    |   8 +-
 .../QuickOutput/MultiInputPreview.js          | 111 ++++----
 .../ObjectDetection/ObjectDetection.js        |   2 +-
 .../StyleTransfer/StyleTransferOutput.js      |   1 +
 .../QuickOutput/Outputs/Text/useTextOutput.js |   2 +-
 .../TextConversationOutput.js                 | 252 +++++++++---------
 .../Experiment/QuickOutput/QuickOutput.js     |   1 +
 .../ExperimentDetails/Inputs/InputPreview.js  |   4 +-
 .../Summaries/ImageEnhancementSummary.js      |   2 +-
 .../Summaries/ObjectDetectionSummary.js       |   2 +-
 .../ExperimentDetails/TrialOutputWrapper.jsx  |   2 +-
 11 files changed, 201 insertions(+), 186 deletions(-)

diff --git a/src/components/Experiment/QuickOutput/InputPreview.js b/src/components/Experiment/QuickOutput/InputPreview.js
index 36b807fc..cb0ba482 100644
--- a/src/components/Experiment/QuickOutput/InputPreview.js
+++ b/src/components/Experiment/QuickOutput/InputPreview.js
@@ -17,17 +17,19 @@ export default function InputPreview(givenProps) {
     image: "Image",
     audio: "Audio",
     text: "Text",
+    document: "Document",
   };
 
 
   const getInput = () => {
     switch (props.inputType) {
       case "text":
-        return <p className={getElement("text")}>{props.input}</p>;
+        return <p className={getElement("text")}>{props.input.src}</p>;
       case "audio":
-        return <audio className={getElement("audio")} controls src={props.input} />;
+        return <audio className={getElement("audio")} controls src={props.input.src} />;
       case "image":
-        return <img className={getElement("image")} src={props.input} />;
+        return <img className={getElement("image")} src={props.input.src} />;
+      
       default:
         return <p>Not currently supported</p>;
     }
diff --git a/src/components/Experiment/QuickOutput/MultiInputPreview.js b/src/components/Experiment/QuickOutput/MultiInputPreview.js
index 5cceafab..bfb734c0 100644
--- a/src/components/Experiment/QuickOutput/MultiInputPreview.js
+++ b/src/components/Experiment/QuickOutput/MultiInputPreview.js
@@ -8,86 +8,99 @@ import "./MultiInput.scss";
 const defaultProps = {
   className: "multi-input-preview",
   inputs: [],
-  onBackClicked: () => {},
+  onBackClicked: () => { },
 };
 
+const inputTypes = {
+  image: "Image",
+  audio: "Audio",
+  text: "Text",
+};
 export default function MultiInputPreview(givenProps) {
   const props = { ...defaultProps, ...givenProps };
   const { getBlock, getElement } = useBEMNaming(props.className);
-
+  const getInput = () => {
+    switch (props.inputType) {
+      case "text":
+        return <p className={getElement("text")}>{props.input.src}</p>;
+      case "audio":
+        return <audio className={getElement("audio")} controls src={props.input.src} />;
+      case "image":
+        return <img className={getElement("image")} src={props.input.src} />;
+      default:
+        return <p>Not currently supported</p>;
+    }
+  };
   const getInputs = (input) => {
     switch (input.inputType) {
-      case "text":
+      case "TEXT":
         return (
-          <p className={getElement("text")}>{input.description}</p>
+          <p className={getElement("text")}>{input.src}</p>
         );
-      case "document":
+      case "DOCUMENT":
         return (
           <button className={getElement("document")}>
-            <DocumentIcon className='icon'/>
+            <DocumentIcon className='icon' />
             <a href={input.src} target='_blank' >
-                <span>{input.description ?? "Document"}</span>
+              <span>{input.description ?? "Document"}</span>
             </a>
           </button>
         );
-      case "image":
+      case "IMAGE":
         return (
           <img className={getElement("image")} src={input.src} />
         );
-      case "audio":  // Currently not being used
+      case "AUDIO":  // Currently not being used
       default:
         return (
-            <p className={getElement("error")}>Unable to display input</p>
+          <p className={getElement("error")}>Unable to display input</p>
         );
     }
   };
 
   return (
     <div className={getBlock()}>
-        <h3 className={getElement("title")}>
-            Inputs
-        </h3>
-        <div className={getElement("container")}>
-          {
-            props.inputs.length > 2 ? (
-              <div className={getElement("multi-input-grid-display")}>
-                <div className={getElement("multi-input-grid-primary-row")}>
-                  {getInputs(props.inputs[0])}
-                </div>
-                <div className={getElement("multi-input-grid-secondary-row")}>
-                  {
-                    props.inputs.slice(1).map((input, index) => {
-                        return (
-                          <div className={getElement("multi-input-grid-item")} key={index}>
-                            {getInputs(input)}
-                          </div>
-                        )
-                    })
-                  }
-                </div>
-
+      console.log(props.inputs)
+      {
+        props.inputs.length > 1 ? (
+          <div className={getElement("container")}>
+            <h3 className={getElement("title")}>
+              Inputs
+            </h3>
+            <div className={getElement("multi-input-grid-display")}>
+              <div className={getElement("multi-input-grid-primary-row")}>
+                {getInputs(props.inputs[0])}
               </div>
-            ) : (
-              <div>
+              <div className={getElement("multi-input-grid-secondary-row")}>
                 {
-                    props.inputs.map((input, index) => (
-                        <div className={getElement("single-input")} key={index}>
-                            {getInputs(input)}
-                        </div>
-
+                  props.inputs.slice(1).map((input, index) => {
+                    return (
+                      <div className={getElement("multi-input-grid-item")} key={index}>
+                        {getInputs(input)}
+                      </div>
                     )
-                )}
+                  })
+                }
               </div>
-            )
-          }
-        </div>
 
-        <button
-            className={getElement("back-button")}
-            onClick={props.onBackClicked}
-        >
-            Try different inputs
-        </button>
+            </div>
+          </div>
+        ) : (
+          <div>
+            <h3 className={getElement("title")}>
+              Input {inputTypes[props.inputType]}
+            </h3>
+            {getInput()}
+          </div>
+        )
+      }
+
+      <button
+        className={getElement("back-button")}
+        onClick={props.onBackClicked}
+      >
+        Try different inputs
+      </button>
     </div>
   );
 }
diff --git a/src/components/Experiment/QuickOutput/Outputs/ObjectDetection/ObjectDetection.js b/src/components/Experiment/QuickOutput/Outputs/ObjectDetection/ObjectDetection.js
index d32f0232..9787214a 100644
--- a/src/components/Experiment/QuickOutput/Outputs/ObjectDetection/ObjectDetection.js
+++ b/src/components/Experiment/QuickOutput/Outputs/ObjectDetection/ObjectDetection.js
@@ -20,7 +20,7 @@ export default function ObjectDetection(props) {
     if (sections.length === 0) return <NoPredictions modelId={props.trial.model.id}/>
 
     return <div className={getElement("top-row")}>
-      <ObjectDetectionImage img={props.trial.inputs[0]}
+      <ObjectDetectionImage img={props.trial.inputs[0]["src"]}
                             filteredSections={filteredSections}
                             sections={sections}
                             hover={hover}
diff --git a/src/components/Experiment/QuickOutput/Outputs/StyleTransfer/StyleTransferOutput.js b/src/components/Experiment/QuickOutput/Outputs/StyleTransfer/StyleTransferOutput.js
index b56489bc..7ee7c818 100644
--- a/src/components/Experiment/QuickOutput/Outputs/StyleTransfer/StyleTransferOutput.js
+++ b/src/components/Experiment/QuickOutput/Outputs/StyleTransfer/StyleTransferOutput.js
@@ -30,6 +30,7 @@ export default function StyleTransferOutput(props) {
             </div>
 
             <div className={getElement("content")}>
+           
                 <MultiInputPreview inputs={inputs} onBackClicked={props.onBackClicked} />
 
                 <div className={getElement("output")}>
diff --git a/src/components/Experiment/QuickOutput/Outputs/Text/useTextOutput.js b/src/components/Experiment/QuickOutput/Outputs/Text/useTextOutput.js
index 6b59152d..4213e1c1 100644
--- a/src/components/Experiment/QuickOutput/Outputs/Text/useTextOutput.js
+++ b/src/components/Experiment/QuickOutput/Outputs/Text/useTextOutput.js
@@ -4,7 +4,7 @@ export default function useTextOutput(trial) {
   const getInputText = () => {
     if (!trial?.inputs) return "";
 
-    return trial?.inputs[0] ?? "";
+    return trial?.inputs[0]["src"] ?? "";
   };
 
   const getInferenceDuration = () => {
diff --git a/src/components/Experiment/QuickOutput/Outputs/TextConversation/TextConversationOutput.js b/src/components/Experiment/QuickOutput/Outputs/TextConversation/TextConversationOutput.js
index 1c4d3c55..32687dd4 100644
--- a/src/components/Experiment/QuickOutput/Outputs/TextConversation/TextConversationOutput.js
+++ b/src/components/Experiment/QuickOutput/Outputs/TextConversation/TextConversationOutput.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, useCallback } from "react";
 import "../Text/TextOutput.scss";
 import "./TextConversationOutputChatContainer.scss";
 import useBEMNaming from "../../../../../common/useBEMNaming";
@@ -9,76 +9,77 @@ import Task from "../../../../../helpers/Task";
 import Rating from "../Classification/Rating";
 
 const ROLE = {
-    USER: 'user',
-    ASSISTANT: 'assistant'
+  USER: 'user',
+  ASSISTANT: 'assistant'
 }
 
 export default function TextConversationOutput(props) {
-    const { getBlock, getElement } = useBEMNaming("text-conversation-output");
-    const { inferenceDuration, output, input, setInput, setInferenceDuration } = useTextOutput(
-        props.trial
-    );
-
-    const task = Task.getStaticTask(textConversation);
-
-    const [conversation, setConversation] = useState([
-        { role: ROLE.USER, content: input },
-        { role: ROLE.ASSISTANT, content: output }
-    ]);
-    const [message, setMessage] = useState(null);
-    const [isSending, setIsSending] = useState(false);
-    const [newInput, setNewInput] = useState('');
-
-    const inputField = useRef(null);  // Not working
-    const chatBottomPosition = useRef(null);
-
-    useEffect(() => {
-        if (message) {
-            setConversation([...conversation, message]);
-        }
-    }, [message])
-
-    useEffect(() => {
-        if (conversation) {
-            chatBottomPosition.current.scrollIntoView({ behavior: "smooth" });
-            
-            if (conversation[conversation.length - 1].role === ROLE.USER) {
-                // Send to API
-                sendToAPI();
-            }
-        }
-    }, [conversation]);
-
-    useEffect(() => {
-        if (!isSending) {
-            setNewInput('');
-
-            // NOTE: Currently not working
-            if (inputField.current) {
-                console.log('focus on input field')
-                inputField.current.focus();
-            }
-        }
-    }, [isSending]);  
-
-    const sendToAPI = async () => {
-        // Submit to API
-        const trialResponse = await props.onSubmit(newInput, conversation);
-        const newOutput = trialResponse?.results?.responses[0]?.features[0]?.text ?? "Something went wrong.";
-
-        setMessage({ role: ROLE.ASSISTANT, content: newOutput });
-
-        const newInferenceDuration = trialResponse?.results?.duration_for_inference ?? "0s";
-        setInferenceDuration(newInferenceDuration);
-
-        setIsSending(false);
-    };
-
-    const sendMessage = () => {
-        setMessage({ role: ROLE.USER, content: newInput });
-        setIsSending(true);
-    }    
+  const { getBlock, getElement } = useBEMNaming("text-conversation-output");
+  const { inferenceDuration, output, input, setInput, setInferenceDuration } = useTextOutput(
+    props.trial
+  );
 
+  const task = Task.getStaticTask(textConversation);
+
+  const [conversation, setConversation] = useState([
+    { role: ROLE.USER, content: input },
+    { role: ROLE.ASSISTANT, content: output }
+  ]);
+  const [message, setMessage] = useState(null);
+  const [isSending, setIsSending] = useState(false);
+  const [newInput, setNewInput] = useState('');
+
+  const inputField = useRef(null);
+  const chatBottomPosition = useRef(null);
+
+  useEffect(() => {
+    if (message) {
+      setConversation([...conversation, message]);
+    }
+  }, [message]);
+
+  useEffect(() => {
+    if (conversation) {
+      chatBottomPosition.current.scrollIntoView({ behavior: "smooth" });
+
+      if (conversation[conversation.length - 1].role === ROLE.USER) {
+        // Send to API
+        sendToAPI();
+      }
+    }
+  }, [conversation]);
+
+  useEffect(() => {
+    if (!isSending) {
+      setNewInput('');
+      if (inputField.current) {
+        inputField.current.focus();
+      }
+    }
+  }, [isSending]);
+
+  const sendToAPI = useCallback(async () => {
+    // Submit to API
+    if (typeof props.onSubmit === 'function') {
+      const trialResponse = await props.onSubmit(newInput, conversation);
+      const newOutput = trialResponse?.results?.responses[0]?.features[0]?.text ?? "Something went wrong.";
+
+      setMessage({ role: ROLE.ASSISTANT, content: newOutput });
+
+      const newInferenceDuration = trialResponse?.results?.duration_for_inference ?? "0s";
+      setInferenceDuration(newInferenceDuration);
+
+      setIsSending(false);
+    } else {
+      console.error('props.onSubmit is not a function');
+      setIsSending(false);
+    }
+  }, [newInput, conversation, props]);
+
+  const sendMessage = () => {
+    setMessage({ role: ROLE.USER, content: newInput });
+    setIsSending(true);
+  }
 
   return (
     <div className={getBlock()}>
@@ -88,70 +89,67 @@ export default function TextConversationOutput(props) {
           <OutputDuration duration={inferenceDuration} />
         </div>
         <p className={getElement("subtitle")}>
-            {task.outputText}
+          {task.outputText}
         </p>
         <div className={getElement("output-container")}>
-            <div className={getElement("chat-container")}>  
-                {
-                    conversation.map((message, index) => {
-                        return (
-                            <div 
-                                key={index}
-                                className={getElement(`chat-${message.role}-message`)}
-                            >
-                                { message.role === ROLE.ASSISTANT && (
-                                    <div className="chat-profile-icon assistant-icon">
-                                        ML
-                                    </div>
-                                )}
-                                <div className="speech-bubble">
-                                    {message.content}
-                                </div>
-                                { message.role === ROLE.USER && (
-                                    <div className="chat-profile-icon user-icon">
-                                        U
-                                    </div>
-                                )}
-                            </div>
-                        )
-                    })
-                }
-                <div ref={chatBottomPosition} />         
-            </div>  
-            
+          <div className={getElement("chat-container")}>
+            {
+              conversation.map((message, index) => {
+                return (
+                  <div
+                    key={index}
+                    className={getElement(`chat-${message.role}-message`)}
+                  >
+                    {message.role === ROLE.ASSISTANT && (
+                      <div className="chat-profile-icon assistant-icon">
+                        ML
+                      </div>
+                    )}
+                    <div className="speech-bubble">
+                      {message.content}
+                    </div>
+                    {message.role === ROLE.USER && (
+                      <div className="chat-profile-icon user-icon">
+                        U
+                      </div>
+                    )}
+                  </div>
+                )
+              })
+            }
+            <div ref={chatBottomPosition} />
+          </div>
         </div>
         <div className={getElement("chat-input-container")}>
-            <textarea
-                useref={inputField}
-                value={newInput}
-                onChange={(e) => setNewInput(e.target.value)}
-                className={getElement("input-container-text")}
-                autoFocus
-            ></textarea>
-
-            <div className={getElement("input-submit-row")}>
-                <button
-                    onClick={sendMessage}
-                    className={getElement("input-submit-button")}
-                    disabled={isSending}
-                >
-                    { (!isSending) ?
-                        (
-                            <span className={getElement("input-submit-button-content")}>
-                                Send
-                            </span>
-                        ) : (
-                            <span className={getElement("input-submit-button-content")}>
-                                <div className={getElement('spinner-container')}>
-                                    <div className={getElement('spinner')}></div>
-                                </div>    
-                            </span>
-                        )
-                    }
-                </button>
-            </div>
-        </div>        
-
+          <textarea
+            ref={inputField}
+            value={newInput}
+            onChange={(e) => setNewInput(e.target.value)}
+            className={getElement("input-container-text")}
+            autoFocus
+          ></textarea>
+          <div className={getElement("input-submit-row")}>
+            <button
+              onClick={sendMessage}
+              className={getElement("input-submit-button")}
+              disabled={isSending}
+            >
+              {(!isSending) ?
+                (
+                  <span className={getElement("input-submit-button-content")}>
+                    Send
+                  </span>
+                ) : (
+                  <span className={getElement("input-submit-button-content")}>
+                    <div className={getElement('spinner-container')}>
+                      <div className={getElement('spinner')}></div>
+                    </div>
+                  </span>
+                )
+              }
+            </button>
+          </div>
+        </div>
         <Rating />
       </div>
     </div>
diff --git a/src/components/Experiment/QuickOutput/QuickOutput.js b/src/components/Experiment/QuickOutput/QuickOutput.js
index 9fe7c946..dbffd4f9 100644
--- a/src/components/Experiment/QuickOutput/QuickOutput.js
+++ b/src/components/Experiment/QuickOutput/QuickOutput.js
@@ -1,5 +1,6 @@
 import React from "react";
 import InputPreview from "./InputPreview";
+import MultiInputPreview from "./MultiInputPreview";
 import ClassificationOutput from "./Outputs/Classification/ClassificationOutput";
 import PendingOutput from "./Outputs/Classification/PendingOutput";
 import {
diff --git a/src/components/ExperimentDetails/Inputs/InputPreview.js b/src/components/ExperimentDetails/Inputs/InputPreview.js
index 7cd0134f..62ee5f90 100644
--- a/src/components/ExperimentDetails/Inputs/InputPreview.js
+++ b/src/components/ExperimentDetails/Inputs/InputPreview.js
@@ -7,9 +7,9 @@ import { InputPreviewText } from "./InputPreviewText";
 
 export default function InputPreview(props) {
   const task = props.task ?? Task.image_classification;
-
+console.log("task.inputType", task.inputType)
   if (task.inputType === TaskInputTypes.Text)
     return <InputPreviewText {...props} />;
-
+  
   return <InputPreviewImage {...props} />;
 }
diff --git a/src/components/ExperimentDetails/Summaries/ImageEnhancementSummary.js b/src/components/ExperimentDetails/Summaries/ImageEnhancementSummary.js
index a5f2e9c4..fa39dd87 100644
--- a/src/components/ExperimentDetails/Summaries/ImageEnhancementSummary.js
+++ b/src/components/ExperimentDetails/Summaries/ImageEnhancementSummary.js
@@ -9,7 +9,7 @@ export default function ImageEnhancementSummary(props) {
   return <div className={getBlock()}>
     <div className={getElement("summary")}>
       <div className={getElement("summary__content")}>
-        <ImageEnhancementImage input={props.trial.inputs[0]} feature={props.trial.results.responses[0].features[0]}/>
+        <ImageEnhancementImage input={props.trial.inputs[0]["src"]} feature={props.trial.results.responses[0].features[0]}/>
       </div>
     </div>
   </div>
diff --git a/src/components/ExperimentDetails/Summaries/ObjectDetectionSummary.js b/src/components/ExperimentDetails/Summaries/ObjectDetectionSummary.js
index fc001404..8a7da76d 100644
--- a/src/components/ExperimentDetails/Summaries/ObjectDetectionSummary.js
+++ b/src/components/ExperimentDetails/Summaries/ObjectDetectionSummary.js
@@ -16,7 +16,7 @@ export default function ObjectDetectionSummary(props) {
     <p className={getElement("header")}>Output:</p>
 
     <div className={getElement("results")}>
-      <ObjectDetectionImage img={props.trial.inputs[0]}
+      <ObjectDetectionImage img={props.trial.inputs[0]["src"]}
                             filteredSections={filteredSections}
                             hover={hover}
                             confidence={filter.confidence}
diff --git a/src/components/ExperimentDetails/TrialOutputWrapper.jsx b/src/components/ExperimentDetails/TrialOutputWrapper.jsx
index e684d4bd..dc8f3f5e 100644
--- a/src/components/ExperimentDetails/TrialOutputWrapper.jsx
+++ b/src/components/ExperimentDetails/TrialOutputWrapper.jsx
@@ -31,7 +31,7 @@ export default function TrialOutputWrapper(props) {
 
   const getContent = () => {
     const hasNoInputs =
-      props.trial.inputs.length === 0 || props.trial.inputs[0] === "";
+      props.trial.inputs.length === 0 || props.trial.inputs[0]["src"] === "";
 
     if (props.processFailed) {
       return <TrialFailed />;

From 437fb514e0140e916e662a6c37b822f65fa94097 Mon Sep 17 00:00:00 2001
From: Shivansh Shalabh <shalabhshivansh@gmail.com>
Date: Tue, 23 Jul 2024 18:12:11 -0400
Subject: [PATCH 2/9] chore: Debugged MultiInputPreview component's switch case
  and fixed preview in QuickOutput for multiInput

---
 .../QuickOutput/MultiInputPreview.js          | 103 +++++++++---------
 .../Experiment/QuickOutput/QuickOutput.js     |   4 +-
 2 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/src/components/Experiment/QuickOutput/MultiInputPreview.js b/src/components/Experiment/QuickOutput/MultiInputPreview.js
index 5cceafab..baf1b59b 100644
--- a/src/components/Experiment/QuickOutput/MultiInputPreview.js
+++ b/src/components/Experiment/QuickOutput/MultiInputPreview.js
@@ -4,11 +4,12 @@ import useBEMNaming from "../../../common/useBEMNaming";
 import { ReactComponent as DocumentIcon } from "../../../resources/icons/icon-document.svg";
 
 import "./MultiInput.scss";
+import { TaskInputTypes } from "../../../helpers/TaskInputTypes";
 
 const defaultProps = {
   className: "multi-input-preview",
   inputs: [],
-  onBackClicked: () => {},
+  onBackClicked: () => { },
 };
 
 export default function MultiInputPreview(givenProps) {
@@ -17,77 +18,81 @@ export default function MultiInputPreview(givenProps) {
 
   const getInputs = (input) => {
     switch (input.inputType) {
-      case "text":
+      case TaskInputTypes.Text:
         return (
-          <p className={getElement("text")}>{input.description}</p>
+          <p className={getElement("text")}>{input.src}</p>
         );
-      case "document":
+      case TaskInputTypes.Document:
         return (
           <button className={getElement("document")}>
-            <DocumentIcon className='icon'/>
+            <DocumentIcon className='icon' />
             <a href={input.src} target='_blank' >
-                <span>{input.description ?? "Document"}</span>
+              <span>{input.description ?? "Document"}</span>
             </a>
           </button>
         );
-      case "image":
+      case TaskInputTypes.Image:
         return (
-          <img className={getElement("image")} src={input.src} />
+          <img
+            className={getElement("image")}
+            src={input.src}
+            alt={input.description ?? "Input Image"}
+          />
         );
-      case "audio":  // Currently not being used
+      case TaskInputTypes.Audio:
       default:
         return (
-            <p className={getElement("error")}>Unable to display input</p>
+          <p className={getElement("error")}>Unable to display input</p>
         );
     }
   };
 
   return (
     <div className={getBlock()}>
-        <h3 className={getElement("title")}>
-            Inputs
-        </h3>
-        <div className={getElement("container")}>
-          {
-            props.inputs.length > 2 ? (
-              <div className={getElement("multi-input-grid-display")}>
-                <div className={getElement("multi-input-grid-primary-row")}>
-                  {getInputs(props.inputs[0])}
-                </div>
-                <div className={getElement("multi-input-grid-secondary-row")}>
-                  {
-                    props.inputs.slice(1).map((input, index) => {
-                        return (
-                          <div className={getElement("multi-input-grid-item")} key={index}>
-                            {getInputs(input)}
-                          </div>
-                        )
-                    })
-                  }
-                </div>
-
+      <h3 className={getElement("title")}>
+        Inputs
+      </h3>
+      <div className={getElement("container")}>
+        {
+          props.inputs.length > 2 ? (
+            <div className={getElement("multi-input-grid-display")}>
+              <div className={getElement("multi-input-grid-primary-row")}>
+                {getInputs(props.inputs[0])}
               </div>
-            ) : (
-              <div>
+              <div className={getElement("multi-input-grid-secondary-row")}>
                 {
-                    props.inputs.map((input, index) => (
-                        <div className={getElement("single-input")} key={index}>
-                            {getInputs(input)}
-                        </div>
+                  props.inputs.slice(1).map((input, index) => {
+                    return (
+                      <div className={getElement("multi-input-grid-item")} key={index}>
+                        {getInputs(input)}
+                      </div>
+                    );
+                  })
+                }
+              </div>
 
-                    )
+            </div>
+          ) : (
+            <div>
+              {
+                props.inputs.map((input, index) => (
+                  <div className={getElement("single-input")} key={index}>
+                    {getInputs(input)}
+                  </div>
+
+                )
                 )}
-              </div>
-            )
-          }
-        </div>
+            </div>
+          )
+        }
+      </div>
 
-        <button
-            className={getElement("back-button")}
-            onClick={props.onBackClicked}
-        >
-            Try different inputs
-        </button>
+      <button
+        className={getElement("back-button")}
+        onClick={props.onBackClicked}
+      >
+        Try different inputs
+      </button>
     </div>
   );
 }
diff --git a/src/components/Experiment/QuickOutput/QuickOutput.js b/src/components/Experiment/QuickOutput/QuickOutput.js
index 9fe7c946..60c8456a 100644
--- a/src/components/Experiment/QuickOutput/QuickOutput.js
+++ b/src/components/Experiment/QuickOutput/QuickOutput.js
@@ -50,6 +50,7 @@ import AudioToTextOutput from "./Outputs/AudioToText/AudioToTextOutput";
 import TextToAudioOutput from "./Outputs/TextToAudio/TextToAudioOutput";
 import AudioClassificationOutput from "./Outputs/AudioClassification/AudioClassificationOutput";
 import AudioToAudioOutput from "./Outputs/AudioToAudio/AudioToAudioOutput";
+import MultiInputPreview from "./MultiInputPreview";
 
 const defaultProps = {
   className: "quick-output",
@@ -64,7 +65,8 @@ export default function QuickOutput(givenProps) {
   const props = { ...defaultProps, ...givenProps };
   const { getElement, getBlock } = useBEMNaming(props.className);
 
-  const preview = (
+
+  const preview = props?.trialOutput?.inputs ? <MultiInputPreview inputs={props.trialOutput.inputs} onBackClicked={props.onBackClicked} /> : (
     <InputPreview
       input={props.input}
       onBackClicked={props.onBackClicked}

From 11169b2521851e234b37e53dbdb91cdbbc8daaae Mon Sep 17 00:00:00 2001
From: Shivansh Shalabh <shalabhshivansh@gmail.com>
Date: Tue, 23 Jul 2024 18:48:16 -0400
Subject: [PATCH 3/9] chore: Refactor input preview in QuickOutput for new
 input format and fix audio alignment in SampleInputsTab.scss

---
 src/abstracts/_type.scss                      |  7 +++---
 .../Tabs/SampleInput/SampleInputsTab.scss     | 25 ++++++++++---------
 .../Experiment/QuickOutput/InputPreview.js    |  6 ++---
 .../Experiment/QuickOutput/QuickOutput.js     |  3 +--
 src/helpers/sampleImages.js                   |  2 +-
 5 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/abstracts/_type.scss b/src/abstracts/_type.scss
index 8f8d3ea4..d64dd6f2 100644
--- a/src/abstracts/_type.scss
+++ b/src/abstracts/_type.scss
@@ -1,7 +1,7 @@
 //@import './fluid-type';
 
-$sans-serif: "Lato", "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
-
+$sans-serif: "Lato", "IBM Plex Sans Condensed", "Helvetica Neue", Arial,
+  sans-serif;
 
 @mixin billboard {
   font-size: clamp(48px, 4vw, 80px);
@@ -158,5 +158,4 @@ h3 {
 audio {
   filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(11%);
   height: 42px;
-  margin-right: 20px;   
-}
\ No newline at end of file
+}
diff --git a/src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.scss b/src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.scss
index a0cee216..1a23a8d4 100644
--- a/src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.scss
+++ b/src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.scss
@@ -11,10 +11,12 @@
 
     @include tabletWidth {
       flex-direction: column;
-      align-items: center;  // TODO: Update this so that text/audio aren't centered
-     
+      align-items: center; // TODO: Update this so that text/audio aren't centered
+
       .sample-inputs {
-        &__input-image, &__input-text, &__input-audio {
+        &__input-image,
+        &__input-text,
+        &__input-audio {
           &:not(:first-child) {
             margin-left: 0px;
             margin-top: 10px;
@@ -74,15 +76,14 @@
     }
   }
 
-  &__input-document{
-
+  &__input-document {
     display: flex;
     align-items: end;
     justify-content: left;
     flex-grow: 1;
     gap: 10px;
     border: 1px solid $gray;
-    
+
     padding: 7.5px 8px;
     text-align: start;
 
@@ -99,12 +100,11 @@
       opacity: 0.5;
     }
 
-    .icon{
-     
+    .icon {
+    }
+    & a {
+      color: $azul;
     }
-    & a{
-    color: $azul;
-  }
   }
 
   &__input-audio {
@@ -112,6 +112,7 @@
     flex: 1 1;
     padding: 10px 15px;
     text-align: start;
+    max-width: fit-content;
 
     audio {
       filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
@@ -130,5 +131,5 @@
     &--unselected {
       opacity: 0.5;
     }
-  }  
+  }
 }
diff --git a/src/components/Experiment/QuickOutput/InputPreview.js b/src/components/Experiment/QuickOutput/InputPreview.js
index 36b807fc..d0bfd718 100644
--- a/src/components/Experiment/QuickOutput/InputPreview.js
+++ b/src/components/Experiment/QuickOutput/InputPreview.js
@@ -23,11 +23,11 @@ export default function InputPreview(givenProps) {
   const getInput = () => {
     switch (props.inputType) {
       case "text":
-        return <p className={getElement("text")}>{props.input}</p>;
+        return <p className={getElement("text")}>{props.input.src}</p>;
       case "audio":
-        return <audio className={getElement("audio")} controls src={props.input} />;
+        return <audio className={getElement("audio")} controls src={props.input.src} />;
       case "image":
-        return <img className={getElement("image")} src={props.input} />;
+        return <img className={getElement("image")} src={props.input.src} />;
       default:
         return <p>Not currently supported</p>;
     }
diff --git a/src/components/Experiment/QuickOutput/QuickOutput.js b/src/components/Experiment/QuickOutput/QuickOutput.js
index 60c8456a..33e16190 100644
--- a/src/components/Experiment/QuickOutput/QuickOutput.js
+++ b/src/components/Experiment/QuickOutput/QuickOutput.js
@@ -65,8 +65,7 @@ export default function QuickOutput(givenProps) {
   const props = { ...defaultProps, ...givenProps };
   const { getElement, getBlock } = useBEMNaming(props.className);
 
-
-  const preview = props?.trialOutput?.inputs ? <MultiInputPreview inputs={props.trialOutput.inputs} onBackClicked={props.onBackClicked} /> : (
+  const preview = props?.trialOutput?.inputs.length > 1 ? <MultiInputPreview inputs={props.trialOutput.inputs} onBackClicked={props.onBackClicked} /> : (
     <InputPreview
       input={props.input}
       onBackClicked={props.onBackClicked}
diff --git a/src/helpers/sampleImages.js b/src/helpers/sampleImages.js
index 60df26a0..5717848e 100644
--- a/src/helpers/sampleImages.js
+++ b/src/helpers/sampleImages.js
@@ -122,7 +122,7 @@ export const SampleAudioToTextInputs = [
   {
     title: "automatic-speech-recognition-input.flac",
     src: "https://xlab1.netlify.app/automatic-speech-recognition-input.flac"
-  }
+  },
 ];
 
 export const SampleTextConversationInputs = [

From 3d0356b88e21d8116a4773d8964109728e71c0a4 Mon Sep 17 00:00:00 2001
From: Shivansh Shalabh <shalabhshivansh@gmail.com>
Date: Tue, 23 Jul 2024 18:52:59 -0400
Subject: [PATCH 4/9] refactor: Update TextOutputInputSection to use
 props.input.src for value

---
 .../QuickOutput/Outputs/Text/TextOutputInputSection.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Experiment/QuickOutput/Outputs/Text/TextOutputInputSection.js b/src/components/Experiment/QuickOutput/Outputs/Text/TextOutputInputSection.js
index cc0cc184..0bbad205 100644
--- a/src/components/Experiment/QuickOutput/Outputs/Text/TextOutputInputSection.js
+++ b/src/components/Experiment/QuickOutput/Outputs/Text/TextOutputInputSection.js
@@ -9,7 +9,7 @@ export default function TextOutputInputSection(props) {
       <h3 className={getElement("input-title")}>Input Text</h3>
 
       <textarea
-        value={props.input}
+        value={props.input.src}
         onChange={(e) => props.setInput(e.target.value)}
         className={getElement("input-container-text")}
       ></textarea>

From 34e4613c2fe2ef3befa303d1bddd43b80da99a8a Mon Sep 17 00:00:00 2001
From: Shivansh Shalabh <shalabhshivansh@gmail.com>
Date: Tue, 23 Jul 2024 19:09:45 -0400
Subject: [PATCH 5/9] Fixed TextToAudio Crashing

---
 .../QuickInput/Tabs/SampleInput/SampleInputsTab.js         | 4 ++--
 src/components/ModelDetailPage/ModelDetailPage.jsx         | 7 ++++++-
 src/helpers/sampleImages.js                                | 7 ++++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.js b/src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.js
index 0e5abdd5..d2a099cb 100644
--- a/src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.js
+++ b/src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.js
@@ -11,7 +11,7 @@ import { imageTo3D } from '../../../../../helpers/TaskIDs';
 export default function SampleInputsTab(props) {
     // Note: This is the content for the Sample Input Tab, below the header
     const { getBlock, getElement } = useBEMNaming("sample-inputs");
-    const { isUnselected, isSelected, selectInput, type,sampleInputType } = useSampleInputControl(props);
+    const { isUnselected, isSelected, selectInput, type, sampleInputType } = useSampleInputControl(props);
     const task = Task.getStaticTask(props.task);
 
     const getInputClassName = (url) => {
@@ -68,7 +68,7 @@ export default function SampleInputsTab(props) {
     function makeSampleDocumentInput(url, index) {
         return (
             <button onClick={() => selectInput(index)} key={index} className={getElement(getInputClassName(url))}>
-                <DocumentIcon className='icon'/>
+                <DocumentIcon className='icon' />
                 <a href={url.src} target='_blank' >
                     <span>{url.description ?? "Document"}</span>
                 </a>
diff --git a/src/components/ModelDetailPage/ModelDetailPage.jsx b/src/components/ModelDetailPage/ModelDetailPage.jsx
index cc07ece6..05b9ba68 100644
--- a/src/components/ModelDetailPage/ModelDetailPage.jsx
+++ b/src/components/ModelDetailPage/ModelDetailPage.jsx
@@ -26,6 +26,7 @@ import {
   imageToText,
   textClassification,
   audioToAudio,
+  textToAudio,
 } from "../../helpers/TaskIDs";
 import {
   SampleImageClassificationInputs,
@@ -46,7 +47,8 @@ import {
   SampleTextTo3DInputs,
   SampleImageToTextInputs,
   SampleTextClassificationInputs,
-  SampleAudioToAudioInputs
+  SampleAudioToAudioInputs,
+  SampleTextToAudio
 } from "../../helpers/sampleImages";  // This file should be renamed
 
 const ModelDetailPage = (props) => {
@@ -95,6 +97,8 @@ const ModelDetailPage = (props) => {
         return SampleAudioToAudioInputs;
       case audioClassification:
         return SampleAudioToAudioInputs;
+      case textToAudio:
+        return SampleTextToAudio;
       case image_classification:
       default:
         return SampleImageClassificationInputs;
@@ -112,6 +116,7 @@ const ModelDetailPage = (props) => {
       case textConversation:
       case textTo3D:
       case textClassification:
+      case textToAudio:
         return "text";
       case object_detection:
       case image_enhancement:
diff --git a/src/helpers/sampleImages.js b/src/helpers/sampleImages.js
index 5717848e..509ff7d0 100644
--- a/src/helpers/sampleImages.js
+++ b/src/helpers/sampleImages.js
@@ -122,7 +122,7 @@ export const SampleAudioToTextInputs = [
   {
     title: "automatic-speech-recognition-input.flac",
     src: "https://xlab1.netlify.app/automatic-speech-recognition-input.flac"
-  },
+  }
 ];
 
 export const SampleTextConversationInputs = [
@@ -251,3 +251,8 @@ export const SampleAudioClassificationInputs = [
 
   },
 ];
+export const SampleTextToAudio = [
+  "Waves at a beach",
+  "Traffic noise",
+  "Roar of a tiger"
+];

From dba84be3eaa10aacb24f3b6703d015649e7ecc46 Mon Sep 17 00:00:00 2001
From: amirnd51 <amirnass@buffalo.edu>
Date: Tue, 23 Jul 2024 23:40:18 +0000
Subject: [PATCH 6/9] chore: Comment out unused import of MultiInputPreview in
 QuickOutput.js

---
 src/components/Experiment/QuickOutput/QuickOutput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Experiment/QuickOutput/QuickOutput.js b/src/components/Experiment/QuickOutput/QuickOutput.js
index d3d7fc3a..e8271a33 100644
--- a/src/components/Experiment/QuickOutput/QuickOutput.js
+++ b/src/components/Experiment/QuickOutput/QuickOutput.js
@@ -51,7 +51,7 @@ import AudioToTextOutput from "./Outputs/AudioToText/AudioToTextOutput";
 import TextToAudioOutput from "./Outputs/TextToAudio/TextToAudioOutput";
 import AudioClassificationOutput from "./Outputs/AudioClassification/AudioClassificationOutput";
 import AudioToAudioOutput from "./Outputs/AudioToAudio/AudioToAudioOutput";
-import MultiInputPreview from "./MultiInputPreview";
+// import MultiInputPreview from "./MultiInputPreview";
 
 const defaultProps = {
   className: "quick-output",

From a2414fb3736875ffe122d3dc9a48e9c07488dfc3 Mon Sep 17 00:00:00 2001
From: Shivansh Shalabh <shalabhshivansh@gmail.com>
Date: Tue, 23 Jul 2024 20:29:19 -0400
Subject: [PATCH 7/9] chore: Update AudioToTextOutputInputSection component and
 useTextOutput hook

---
 .../AudioToText/AudioToTextOutputInputSection.js  |  4 ++--
 .../QuickOutput/Outputs/Text/useTextOutput.js     | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Experiment/QuickOutput/Outputs/AudioToText/AudioToTextOutputInputSection.js b/src/components/Experiment/QuickOutput/Outputs/AudioToText/AudioToTextOutputInputSection.js
index 3012cd99..090b3ee3 100644
--- a/src/components/Experiment/QuickOutput/Outputs/AudioToText/AudioToTextOutputInputSection.js
+++ b/src/components/Experiment/QuickOutput/Outputs/AudioToText/AudioToTextOutputInputSection.js
@@ -1,6 +1,6 @@
 import React from "react";
 import useBEMNaming from "../../../../../common/useBEMNaming";
-import "./AudioToText.scss"
+import "./AudioToText.scss";
 // Maybe rename the component since it's used not just in AudioToText
 export default function AudioToTextOutputInputSection(props) {
   const { getElement } = useBEMNaming("audio-to-text-output");
@@ -14,7 +14,7 @@ export default function AudioToTextOutputInputSection(props) {
 
       <div className={getElement("input-audio-content")}>
         <div>
-          The uploaded audio file:
+          The input audio file:
         </div>
         <audio controls src={input.src} />
       </div>
diff --git a/src/components/Experiment/QuickOutput/Outputs/Text/useTextOutput.js b/src/components/Experiment/QuickOutput/Outputs/Text/useTextOutput.js
index 4213e1c1..13f30fe6 100644
--- a/src/components/Experiment/QuickOutput/Outputs/Text/useTextOutput.js
+++ b/src/components/Experiment/QuickOutput/Outputs/Text/useTextOutput.js
@@ -1,17 +1,22 @@
 import { useState } from "react";
 
 export default function useTextOutput(trial) {
-  const getInputText = () => {
-    if (!trial?.inputs) return "";
 
-    return trial?.inputs[0]["src"] ?? "";
+  const getInput = () => {
+    let type = trial?.inputs[0]?.inputType;
+    switch (type) {
+      case "TEXT":
+        return trial?.inputs[0]["src"] ?? "";
+      default:
+        return trial?.inputs[0];
+    }
   };
 
   const getInferenceDuration = () => {
     return trial?.results?.duration_for_inference ?? "0s";
-  };  
+  };
 
-  const [input, setInput] = useState(getInputText());
+  const [input, setInput] = useState(getInput());
   const [inferenceDuration, setInferenceDuration] = useState(getInferenceDuration());
 
   const getOutput = () => {

From 9d836ab4ff5318fbd9d9f28b471e21fe6a97d1c7 Mon Sep 17 00:00:00 2001
From: amirnd51 <amirnass@buffalo.edu>
Date: Wed, 24 Jul 2024 05:04:29 +0000
Subject: [PATCH 8/9] chore: Remove console.log statements and unused imports

---
 src/components/ExperimentDetails/Inputs/InputPreview.js | 2 +-
 src/components/ModelList/ModelListWithFilters.jsx       | 2 +-
 src/components/ModelList/SelectedModelsBanner.jsx       | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ExperimentDetails/Inputs/InputPreview.js b/src/components/ExperimentDetails/Inputs/InputPreview.js
index 62ee5f90..c7864706 100644
--- a/src/components/ExperimentDetails/Inputs/InputPreview.js
+++ b/src/components/ExperimentDetails/Inputs/InputPreview.js
@@ -7,7 +7,7 @@ import { InputPreviewText } from "./InputPreviewText";
 
 export default function InputPreview(props) {
   const task = props.task ?? Task.image_classification;
-console.log("task.inputType", task.inputType)
+
   if (task.inputType === TaskInputTypes.Text)
     return <InputPreviewText {...props} />;
   
diff --git a/src/components/ModelList/ModelListWithFilters.jsx b/src/components/ModelList/ModelListWithFilters.jsx
index 7e8e7c78..d0307571 100644
--- a/src/components/ModelList/ModelListWithFilters.jsx
+++ b/src/components/ModelList/ModelListWithFilters.jsx
@@ -66,7 +66,7 @@ export default function ModelListWithFilters(givenProps) {
     const props = {...defaultProps, ...givenProps};
 
     const selection = useModelListSelection();
-    console.log(props.frameworkOptions)
+    // console.log(props.frameworkOptions)
     const filtering = useModelListWithFilters(props.frameworkOptions, props.models, props.machineOptions, selection.selectedModels);
 
     return (
diff --git a/src/components/ModelList/SelectedModelsBanner.jsx b/src/components/ModelList/SelectedModelsBanner.jsx
index 37c93905..2946e6fd 100644
--- a/src/components/ModelList/SelectedModelsBanner.jsx
+++ b/src/components/ModelList/SelectedModelsBanner.jsx
@@ -54,7 +54,6 @@ export default function SelectedModelsBanner(givenProps) {
         }}/>)
     }
 
-    console.log(props, defaultProps, givenProps);
 
     return (
         <div className={getBlock()}>

From 3c3aaa525ba9050d62d58ee4839653e298e2da50 Mon Sep 17 00:00:00 2001
From: amirnd51 <amirnass@buffalo.edu>
Date: Wed, 24 Jul 2024 05:10:18 +0000
Subject: [PATCH 9/9] chore: Remove unused code in MultiInputPreview.js and
 update input handling in QuickOutput

---
 .../Experiment/QuickOutput/MultiInputPreview.js     | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/components/Experiment/QuickOutput/MultiInputPreview.js b/src/components/Experiment/QuickOutput/MultiInputPreview.js
index 857a7bb4..4fb55e64 100644
--- a/src/components/Experiment/QuickOutput/MultiInputPreview.js
+++ b/src/components/Experiment/QuickOutput/MultiInputPreview.js
@@ -20,18 +20,7 @@ const inputTypes = {
 export default function MultiInputPreview(givenProps) {
   const props = { ...defaultProps, ...givenProps };
   const { getBlock, getElement } = useBEMNaming(props.className);
-  const getInput = () => {
-    switch (props.inputType) {
-      case "text":
-        return <p className={getElement("text")}>{props.input.src}</p>;
-      case "audio":
-        return <audio className={getElement("audio")} controls src={props.input.src} />;
-      case "image":
-        return <img className={getElement("image")} src={props.input.src} />;
-      default:
-        return <p>Not currently supported</p>;
-    }
-  };
+
   const getInputs = (input) => {
     switch (input.inputType) {
       case TaskInputTypes.Text: