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.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 ( ); - case "image": + case TaskInputTypes.Image: return ( - + {input.description ); - case "audio": // Currently not being used + case TaskInputTypes.Audio: default: return ( -

Unable to display input

+

Unable to display input

); } }; return (
-

- Inputs -

-
- { - props.inputs.length > 2 ? ( -
-
- {getInputs(props.inputs[0])} -
-
- { - props.inputs.slice(1).map((input, index) => { - return ( -
- {getInputs(input)} -
- ) - }) - } -
- +

+ Inputs +

+
+ { + props.inputs.length > 2 ? ( +
+
+ {getInputs(props.inputs[0])}
- ) : ( -
+
{ - props.inputs.map((input, index) => ( -
- {getInputs(input)} -
+ props.inputs.slice(1).map((input, index) => { + return ( +
+ {getInputs(input)} +
+ ); + }) + } +
- ) +
+ ) : ( +
+ { + props.inputs.map((input, index) => ( +
+ {getInputs(input)} +
+ + ) )} -
- ) - } -
+
+ ) + } +
- +
); } 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) {
- The uploaded audio file: + The input audio file:
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 return
-
+
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) {

Input Text

diff --git a/src/components/Experiment/QuickOutput/Outputs/Text/useTextOutput.js b/src/components/Experiment/QuickOutput/Outputs/Text/useTextOutput.js index 6b59152d..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] ?? ""; + 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 = () => { 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 (
@@ -88,70 +89,67 @@ export default function TextConversationOutput(props) {

- {task.outputText} + {task.outputText}

-
- { - conversation.map((message, index) => { - return ( -
- { message.role === ROLE.ASSISTANT && ( -
- ML -
- )} -
- {message.content} -
- { message.role === ROLE.USER && ( -
- U -
- )} -
- ) - }) - } -
-
- +
+ { + conversation.map((message, index) => { + return ( +
+ {message.role === ROLE.ASSISTANT && ( +
+ ML +
+ )} +
+ {message.content} +
+ {message.role === ROLE.USER && ( +
+ U +
+ )} +
+ ) + }) + } +
+
- - -
- -
-
- + +
+ +
+
diff --git a/src/components/Experiment/QuickOutput/QuickOutput.js b/src/components/Experiment/QuickOutput/QuickOutput.js index 9fe7c946..e8271a33 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 { @@ -50,6 +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"; const defaultProps = { className: "quick-output", @@ -64,7 +66,7 @@ export default function QuickOutput(givenProps) { const props = { ...defaultProps, ...givenProps }; const { getElement, getBlock } = useBEMNaming(props.className); - const preview = ( + const preview = props?.trialOutput?.inputs.length > 1 ? : ( ; - + return ; } 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
- +
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) {

Output:

- { 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 ; 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/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 (
diff --git a/src/helpers/sampleImages.js b/src/helpers/sampleImages.js index 60df26a0..509ff7d0 100644 --- a/src/helpers/sampleImages.js +++ b/src/helpers/sampleImages.js @@ -251,3 +251,8 @@ export const SampleAudioClassificationInputs = [ }, ]; +export const SampleTextToAudio = [ + "Waves at a beach", + "Traffic noise", + "Roar of a tiger" +];