Merge pull request #35 from c3sr/chore/integration_fixes

Refactor input handling to use src property consistently
c3sr · Jul 24, 2024 · 95199fc · 95199fc
2 parents b20822a + 3c3aaa5
commit 95199fc
Show file tree

Hide file tree

Showing 20 changed files with 241 additions and 214 deletions.
diff --git 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;   
-}
+}
diff --git 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/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,19 +100,19 @@
       opacity: 0.5;
     }
 
-    .icon{
-
+    .icon {
+    }
+    & a {
+      color: $azul;
     }
-    & a{
-    color: $azul;
-  }
   }
 
   &__input-audio {
     border: 1px solid $gray;
     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
@@ -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
@@ -4,90 +4,100 @@ 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: () => { },
 };
 
+const inputTypes = {
+  image: "Image",
+  audio: "Audio",
+  text: "Text",
+};
 export default function MultiInputPreview(givenProps) {
   const props = { ...defaultProps, ...givenProps };
   const { getBlock, getElement } = useBEMNaming(props.className);
 
   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/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/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
@@ -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/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>

diff --git 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] ?? "";
+  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 = () => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,7 @@ export default function StyleTransferOutput(props) { @@
                 </div>
                 <div className={getElement("content")}>
                     <MultiInputPreview inputs={inputs} onBackClicked={props.onBackClicked} />
                     <div className={getElement("output")}>
@@ Expand Down @@