Created a speech bubble loading icon for Conversation task (#39)

* Created a speech bubble loading icon for Conversation task * Adding a bug fix for Conversation and some console logs to test
c3sr · Aug 7, 2024 · 0b6e56e · 0b6e56e
1 parent 576ce17
commit 0b6e56e
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 12 deletions.
diff --git a/src/components/Experiment/QuickOutput/Outputs/Classification/PendingOutput.js b/src/components/Experiment/QuickOutput/Outputs/Classification/PendingOutput.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './PendingOutput.scss';
 import useBEMNaming from "../../../../../common/useBEMNaming";
+import { textConversation } from '../../../../../helpers/TaskIDs';
 
 const defaultProps = {
     className: 'pending-output'
@@ -17,10 +18,25 @@ export default function PendingOutput(givenProps) {
             {props.unsupportedModel &&
                 <div className={getElement('subtitle')}>Warning: unsupported model</div>
             }
-            <div className={getElement('spinner-container')}>
-                <div className={getElement('spinner')}></div>
-                <p className={getElement("spinner-text")}>This could take a few minutes...</p>
-            </div>
+            { props.outputType !== textConversation ?
+                (
+                    <div className={getElement('spinner-container')}>
+                        <div className={getElement('spinner')} />
+                        <p className={getElement("spinner-text")}>
+                            This could take a few minutes...
+                        </p>
+                    </div>
+                ) : (
+                    <div className={getElement('ellipsis-container')}>
+                        <div className={getElement('ellipsis-speech-bubble')} >
+                            <div className={getElement('ellipsis')} />
+                        </div>
+                        <p className={getElement("ellipsis-text")}>
+                            This could take a few minutes...
+                        </p>
+                    </div>
+                )
+            }
         </div>
     );
 }
diff --git a/src/components/Experiment/QuickOutput/Outputs/Classification/PendingOutput.scss b/src/components/Experiment/QuickOutput/Outputs/Classification/PendingOutput.scss
@@ -46,10 +46,74 @@
     margin-bottom: 16px;
   }
 
-  &__spinner-text {
+  &__spinner-text, &__ellipsis-text {
     @include headline3;
     color: $charcoalLightest;
     text-align: center;
+  }
+
+  &__ellipsis-container {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    position: relative;
+    flex-direction: column;    
+  }
+
+  &__ellipsis-speech-bubble {
+    height: 65px;
+    width: 100px;
+    position: relative;
+    background: $smokeDarker;
+    border-radius: .4em;    
+  }
+
+  &__ellipsis-speech-bubble:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border: 20px solid transparent;
+    border-top-color: $smokeDarker;
+    border-bottom: 0;
+    border-left: 0;
+    margin-left: -10px;
+    margin-bottom: -20px;    
+  }
+
+  &__ellipsis {
+    height: 65px;
+    color: $grayDarkest;
+    margin-top: -30px;
+    margin-left: 25px;
+    font-size: 70px;
+  }
+
+  &__ellipsis:after {
+    overflow: hidden;
+    display: inline-block;
+    -webkit-animation: ellipsis steps(4,end) 1900ms infinite;      
+    animation: ellipsis steps(4,end) 1900ms infinite;
+    content: "\2026"; /* ascii code for the ellipsis character */
+    width: 0px;
+  }
+
+  @keyframes ellipsis {
+    to {
+      width: 1em;    
+    }
+  }
+
+  @-webkit-keyframes ellipsis {
+    to {
+      width: 1em;    
+    }
+  }
 
+  &__ellipsis-text {
+    margin-top: 20px;
   }
-}
+}
diff --git a/src/components/Experiment/QuickOutput/Outputs/TextConversation/TextConversationOutput.js b/src/components/Experiment/QuickOutput/Outputs/TextConversation/TextConversationOutput.js
@@ -19,6 +19,8 @@ export default function TextConversationOutput(props) {
     props.trial
   );
 
+  console.log('TextConversationOutput props', props);
+
   const task = Task.getStaticTask(textConversation);
 
   const [conversation, setConversation] = useState([

diff --git a/src/components/Experiment/QuickOutput/QuickOutput.js b/src/components/Experiment/QuickOutput/QuickOutput.js
@@ -68,6 +68,8 @@ export default function QuickOutput(givenProps) {
   const props = { ...defaultProps, ...givenProps };
   const { getElement, getBlock } = useBEMNaming(props.className);
 
+  console.log('QuickOutput props', props);
+
   const preview = props?.trialOutput?.inputs.length > 1 ? <MultiInputPreview inputs={props.trialOutput.inputs} onBackClicked={props.onBackClicked} /> : (
     <InputPreview
       input={props.input}
@@ -266,7 +268,7 @@ export default function QuickOutput(givenProps) {
       return (
         <>
           {preview}
-          <PendingOutput />
+          <PendingOutput outputType={props.outputType} />
         </>
       );
     }

diff --git a/src/components/ModelDetailPage/ModelDetailPage.jsx b/src/components/ModelDetailPage/ModelDetailPage.jsx
@@ -56,6 +56,8 @@ import {
 const ModelDetailPage = (props) => {
   const jumpRef = useRef();
 
+  console.log('ModelDetailPage props', props);
+
   const outputType = props.model?.output?.type || "";
 
   const getSampleInputs = () => {
@@ -159,6 +161,8 @@ const ModelDetailPage = (props) => {
           compare={props.compare}
           trialOutput={props.trialOutput}
           inputType={getInputType()}
+          outputType={outputType}
+          runTrial={props.onRunModelClicked}
         />
       );
     }

diff --git a/src/components/ModelDetailPage/ModelDetailPage.stories.jsx b/src/components/ModelDetailPage/ModelDetailPage.stories.jsx
@@ -10,6 +10,7 @@ import {
   semantic_segmentation,
   textToText,
   textToCode,
+  textConversation,
 } from "../../helpers/TaskIDs";
 import { TestObjectDetectionResult } from "../Experiment/QuickOutput/Outputs/ObjectDetection/testData/TestFeatures";
 import { TestImageSegmentationResult } from "../Experiment/QuickOutput/Outputs/SemanticSegmentation/testData/TestFeatures";
@@ -21,16 +22,16 @@ import { TestImageClassificationResult } from "../Experiment/QuickOutput/Outputs
 import { TestInstanceSegmentationOutput } from "../Experiment/QuickOutput/Outputs/InstanceSegmentation/testData/TestFeatures";
 import { TestTextOutput } from "../Experiment/QuickOutput/Outputs/Text/testData/testTextOutput";
 import { TestTextToCodeOutput } from "../Experiment/QuickOutput/Outputs/TextToCode/testData/testTextToCodeOutput";
+import { TaskInputTypes } from "../../helpers/TaskInputTypes";
 
 export default {
   title: "Models/Model Detail Page",
   component: ModelDetailPage,
 };
 
-const Template = (args) => <ModelDetailPage {...args} />;
+const Template = (args) => <ModelDetailPage key="StandardModelDetailPage" {...args} />;
 
 const makeArgs = (type, output = undefined) => ({
-  key: "StandardModelDetailPage",
   trialOutput: output,
   model: {
     id: 13,
@@ -203,6 +204,12 @@ TextPendingOutput.args = makeArgs(textToText, {
   inputs: ["Translate into Spanish: Hello, how are you?"],
 });
 
+export const TextConversationPendingOutput = Template.bind({});
+TextConversationPendingOutput.args = makeArgs(textConversation, {
+  id: "7618d464-b5ed-432f-8f88-b33504c6bb0a",
+  inputs: [{src: "What is the meaning of life?", inputType: TaskInputTypes.Text}],
+});
+
 export const TextOutput = Template.bind({});
 TextOutput.args = makeArgs(textToText, TestTextOutput);
 

diff --git a/src/routes/ModelDetailContainer.js b/src/routes/ModelDetailContainer.js
@@ -86,9 +86,13 @@ export function ModelDetailContainer(props) {
     }, []);
 
     return (
-        <ModelDetailPage model={model} onBackToModelClicked={backToModel}
-                         onRunModelClicked={runModel} trialOutput={trialOutput}
-                         compare={compareModels}/>
+        <ModelDetailPage 
+            model={model} 
+            onBackToModelClicked={backToModel}
+            onRunModelClicked={runModel} 
+            trialOutput={trialOutput}
+            compare={compareModels}
+        />
     )
 }