Copy over my latest oss cleanup changes

streaming-react-app/.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+build
 *.local
 
 # Editor directories and files

streaming-react-app/src/SocketWrapper.tsx

@@ -11,9 +11,8 @@ import {getURLParams} from './URLParams';
 
 // The time to wait before showing a "disconnected" screen upon initial app load
 const INITIAL_DISCONNECT_SCREEN_DELAY = 2000;
-const SERVER_URL_DEFAULT = `${window.location.protocol === "https:" ? "wss" : "ws"
-                    }://${window.location.host}`;
-                    
+const SERVER_URL_DEFAULT = 'localhost:8000';
+
 export default function SocketWrapper({children}) {
   const [socket, setSocket] = useState<Socket | null>(null);
   const [connected, setConnected] = useState<boolean | null>(null);
@@ -63,7 +62,6 @@ export default function SocketWrapper({children}) {
       // want that because that'd mean awful performance. It'd be better for the app
       // to simply break in that case and not connect.
       transports: ['websocket'],
-      path: '/ws/socket.io'
     });
 
     const onServerID = (serverID: string) => {

streaming-react-app/src/StreamingInterface.tsx

@@ -58,6 +58,7 @@ import {CURSOR_BLINK_INTERVAL_MS} from './cursorBlinkInterval';
 import {getURLParams} from './URLParams';
 import debug from './debug';
 import DebugSection from './DebugSection';
+import Switch from '@mui/material/Switch';
 import {Grid} from '@mui/material';
 
 const AUDIO_STREAM_DEFAULTS: {
@@ -171,6 +172,9 @@ export default function StreamingInterface() {
 
   // Dynamic Params:
   const [targetLang, setTargetLang] = useState<string | null>(null);
+  const [enableExpressive, setEnableExpressive] = useState<boolean | null>(
+    null,
+  );
 
   const [serverDebugFlag, setServerDebugFlag] = useState<boolean>(
     debugParam ?? false,
@@ -252,6 +256,7 @@ export default function StreamingInterface() {
       setAgent((prevAgent) => {
         if (prevAgent?.name !== newAgent?.name) {
           setTargetLang(newAgent?.targetLangs[0] ?? null);
+          setEnableExpressive(null);
         }
         return newAgent;
       });
@@ -427,6 +432,7 @@ export default function StreamingInterface() {
       // available before actually configuring and starting the stream
       const fullDynamicConfig: DynamicConfig = {
         targetLanguage: targetLang,
+        expressive: enableExpressive,
       };
 
       await onSetDynamicConfig(fullDynamicConfig);
@@ -752,11 +758,6 @@ export default function StreamingInterface() {
                   Seamless Translation
                 </Typography>
               </div>
-              <div>
-                <Typography variant="body2" sx={{color: '#65676B'}}>
-                  Welcome! Join a room as speaker or listener (or both), and share the room code to invite listeners.
-                </Typography>
-              </div>
             </div>
 
             <Stack spacing="22px" direction="column">
@@ -830,6 +831,11 @@ export default function StreamingInterface() {
                       </Select>
                     </FormControl>
 
+                    <Typography variant="body2">
+                      {`Supported Source Languages: ${
+                        currentAgent?.sourceLangs.join(', ') ?? 'None'
+                      }`}
+                    </Typography>
                   </Stack>
 
                   <Stack spacing={0.5}>
@@ -895,6 +901,28 @@ export default function StreamingInterface() {
                           spacing={1}
                           alignItems="flex-start"
                           sx={{flexGrow: 1}}>
+                          {currentAgent?.dynamicParams?.includes(
+                            'expressive',
+                          ) && (
+                            <FormControlLabel
+                              control={
+                                <Switch
+                                  checked={enableExpressive ?? false}
+                                  onChange={(
+                                    event: React.ChangeEvent<HTMLInputElement>,
+                                  ) => {
+                                    const newValue = event.target.checked;
+                                    setEnableExpressive(newValue);
+                                    onSetDynamicConfig({
+                                      expressive: newValue,
+                                    });
+                                  }}
+                                />
+                              }
+                              label="Expressive"
+                            />
+                          )}
+
                           {isListener && (
                             <Box
                               sx={{
@@ -911,13 +939,6 @@ export default function StreamingInterface() {
                     </Grid>
                   </Stack>
 
-                  <Typography variant="body2">
-                    Note: we don't recommend echo cancellation, as it may distort 
-                    the input audio (dropping words/sentences) if there is output 
-                    audio playing. Instead, you should use headphones if you'd like 
-                    to listen to the output audio while speaking.
-                  </Typography>
-
                   <Stack
                     direction="row"
                     spacing={2}
@@ -967,7 +988,7 @@ export default function StreamingInterface() {
                           }
                           label="Noise Suppression (Browser)"
                         />
-                                                <FormControlLabel
+                        <FormControlLabel
                           control={
                             <Checkbox
                               checked={

streaming-react-app/src/URLParams.ts

@@ -1,5 +1,5 @@
-import { getBooleanParamFlag, getStringParamFlag } from './getParamFlag';
-import { URLParamsObject } from './types/URLParamsTypes';
+import {getBooleanParamFlag, getStringParamFlag} from './getParamFlag';
+import {URLParamsObject} from './types/URLParamsTypes';
 
 /**
  * These are the URL parameters you can provide to the app to change its behavior.

streaming-react-app/src/react-xr/TextBlocks.tsx

@@ -1,9 +1,8 @@
-import {JSX, useEffect, useRef, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import robotoFontFamilyJson from '../assets/RobotoMono-Regular-msdf.json?url';
 import robotoFontTexture from '../assets/RobotoMono-Regular.png';
 import ThreeMeshUIText, {ThreeMeshUITextType} from './ThreeMeshUIText';
-import {getURLParams} from '../URLParams';
-import {CURSOR_BLINK_INTERVAL_MS} from '../cursorBlinkInterval';
+import supportedCharSet from './supportedCharSet';
 
 const NUM_LINES = 3;
 
@@ -22,44 +21,80 @@ const SCROLL_Y_DELTA = 0.001;
 const OFFSET = 0.01;
 const OFFSET_WIDTH = OFFSET * 3;
 
-type Props = {
+const CHARS_PER_SECOND = 10;
+
+// The tick interval
+const RENDER_INTERVAL = 300;
+
+const CURSOR_BLINK_INTERVAL_MS = 1000;
+
+type TextBlockProps = {
   content: string;
   // The actual position or end position when animating
   y: number;
   // The start position when animating
   startY: number;
-  width: number;
-  height: number;
   textOpacity: number;
   backgroundOpacity: number;
-  // Use this to keep track of sentence + line position for animation
-  index: string;
-  enableAnimation: boolean;
+  index: number;
+  isBottomLine: boolean;
+  // key: number;
+};
+
+type TranscriptState = {
+  textBlocksProps: TextBlockProps[];
+  lastTranslationStringIndex: number;
+  lastTranslationLineStartIndex: number;
+  transcriptLines: string[];
+  lastRenderTime: number;
 };
 
 function TextBlock({
   content,
   y,
   startY,
-  width,
-  height,
   textOpacity,
   backgroundOpacity,
   index,
-  enableAnimation,
-}: Props) {
+  isBottomLine,
+}: TextBlockProps) {
   const [scrollY, setScrollY] = useState<number>(y);
-
   // We are reusing text blocks so this keeps track of when we changed rows so we can restart animation
-  const lastIndex = useRef<string>(index);
+  const lastIndex = useRef<number>(index);
   useEffect(() => {
     if (index != lastIndex.current) {
       lastIndex.current = index;
-      enableAnimation && setScrollY(startY);
+      !isBottomLine && setScrollY(startY);
     } else if (scrollY < y) {
       setScrollY((prev) => prev + SCROLL_Y_DELTA);
     }
-  }, [enableAnimation, index, scrollY, setScrollY, startY, y]);
+  }, [isBottomLine, index, scrollY, setScrollY, startY, y]);
+
+  const [cursorBlinkOn, setCursorBlinkOn] = useState(false);
+  useEffect(() => {
+    if (isBottomLine) {
+      const interval = setInterval(() => {
+        setCursorBlinkOn((prev) => !prev);
+      }, CURSOR_BLINK_INTERVAL_MS);
+
+      return () => clearInterval(interval);
+    } else {
+      setCursorBlinkOn(false);
+    }
+  }, [isBottomLine]);
+
+  const numChars = content.length;
+
+  if (cursorBlinkOn) {
+    content = content + '|';
+  }
+
+  // Accounting for potential cursor for block width (the +1)
+  const width =
+    (numChars + (isBottomLine ? 1.1 : 0) + (numChars < 10 ? 1 : 0)) *
+    CHAR_WIDTH;
+
+  const height = LINE_HEIGHT;
 
   // This is needed to update text content (doesn't work if we just update the content prop)
   const textRef = useRef<ThreeMeshUITextType>();
@@ -111,125 +146,162 @@ function TextBlock({
   );
 }
 
-// Background behind the text so it covers any missing spaces
-function TranscriptionPanel() {
-  const panelHeight = LINE_HEIGHT * NUM_LINES + 2 * BLOCK_SPACING + 2 * OFFSET;
-  const xPosition = OFFSET_WIDTH;
-  return (
-    <block
-      args={[
-        {
-          backgroundOpacity: 1,
-          width:
-            MAX_WIDTH * ((CHARS_PER_LINE + 2) / CHARS_PER_LINE) +
-            2 * OFFSET_WIDTH,
-          height: panelHeight,
-          borderRadius: 0,
-        },
-      ]}
-      position={[
-        -OFFSET + xPosition,
-        Y_COORD_START + panelHeight / 2 - 2 * OFFSET,
-        Z_COORD,
-      ]}></block>
-  );
+function initialTextBlockProps(count: number): TextBlockProps[] {
+  return Array.from({length: count}).map(() => {
+    // Push in non display blocks because mesh UI crashes if elements are add / removed from screen.
+    return {
+      y: Y_COORD_START,
+      startY: 0,
+      index: 0,
+      textOpacity: 0,
+      backgroundOpacity: 0,
+      width: MAX_WIDTH,
+      height: LINE_HEIGHT,
+      content: '',
+      isBottomLine: true,
+    };
+  });
 }
 
 export default function TextBlocks({
-  sentences,
-  blinkCursor,
+  translationText,
 }: {
-  sentences: string[][];
-  blinkCursor: boolean;
+  translationText: string;
 }) {
-  const showTranscriptionPanel =
-    getURLParams().ARTranscriptionType === 'lines_with_background';
-  const textBlocks: JSX.Element[] = [];
+  const transcriptStateRef = useRef<TranscriptState>({
+    textBlocksProps: initialTextBlockProps(NUM_LINES),
+    lastTranslationStringIndex: 0,
+    lastTranslationLineStartIndex: 0,
+    transcriptLines: [],
+    lastRenderTime: new Date().getTime(),
+  });
+
+  const transcriptState = transcriptStateRef.current;
+  const {textBlocksProps, lastTranslationStringIndex, lastRenderTime} =
+    transcriptState;
+
+  const [charsToRender, setCharsToRender] = useState<number>(0);
 
-  const [cursorBlinkOn, setCursorBlinkOn] = useState(false);
   useEffect(() => {
-    if (blinkCursor) {
-      const interval = setInterval(() => {
-        setCursorBlinkOn((prev) => !prev);
-      }, CURSOR_BLINK_INTERVAL_MS);
+    const interval = setInterval(() => {
+      const currentTime = new Date().getTime();
+      const charsToRender = Math.round(
+        ((currentTime - lastRenderTime) * CHARS_PER_SECOND) / 1000,
+      );
+      setCharsToRender(charsToRender);
+    }, RENDER_INTERVAL);
 
-      return () => clearInterval(interval);
-    } else {
-      setCursorBlinkOn(false);
-    }
-  }, [blinkCursor]);
+    return () => clearInterval(interval);
+  }, [lastRenderTime]);
 
-  // Start from bottom and populate most recent sentences by line until we fill max lines.
-  let currentY = Y_COORD_START;
-  for (let i = sentences.length - 1; i >= 0; i--) {
-    const sentenceLines = sentences[i];
-    for (let j = sentenceLines.length - 1; j >= 0; j--) {
-      if (textBlocks.length == NUM_LINES) {
-        if (showTranscriptionPanel) {
-          textBlocks.push(<TranscriptionPanel key={textBlocks.length} />);
-        }
-        return textBlocks;
-      }
+  const currentTime = new Date().getTime();
+  if (charsToRender < 1) {
+    return textBlocksProps.map((props, idx) => (
+      <TextBlock {...props} key={idx} />
+    ));
+  }
+
+  const nextTranslationStringIndex = Math.min(
+    lastTranslationStringIndex + charsToRender,
+    translationText.length,
+  );
+  const newString = translationText.substring(
+    lastTranslationStringIndex,
+    nextTranslationStringIndex,
+  );
+  if (nextTranslationStringIndex === lastTranslationStringIndex) {
+    transcriptState.lastRenderTime = currentTime;
+    return textBlocksProps.map((props, idx) => (
+      <TextBlock {...props} key={idx} />
+    ));
+  }
+
+  // Wait until more characters are accumulated if its just blankspace
+  if (/^\s*$/.test(newString)) {
+    transcriptState.lastRenderTime = currentTime;
+    return textBlocksProps.map((props, idx) => (
+      <TextBlock {...props} key={idx} />
+    ));
+  }
+
+  // Ideally we continue where we left off but this is complicated when we have mid-words. Recalculating for now
+  const runAll = true;
+  const newSentences = runAll
+    ? translationText.substring(0, nextTranslationStringIndex).split('\n')
+    : newString.split('\n');
+  const transcriptLines = runAll ? [''] : transcriptState.transcriptLines;
+  newSentences.forEach((newSentence, sentenceIdx) => {
+    const words = newSentence.split(/\s+/);
+    words.forEach((word) => {
+      const filteredWord = [...word]
+        .filter((c) => {
+          if (supportedCharSet().has(c)) {
+            return true;
+          }
+          console.error(
+            `Unsupported char ${c} - make sure this is supported in the font family msdf file`,
+          );
+          return false;
+        })
+        .join('');
 
-      const isBottomSentence = i === sentences.length - 1;
-      const isBottomLine = isBottomSentence && textBlocks.length === 0;
-      const y = currentY + LINE_HEIGHT / 2;
-      let textBlockLine = sentenceLines[j];
-      const numChars = textBlockLine.length;
+      const lastLineSoFar = transcriptLines[0];
+      const charCount = lastLineSoFar.length + filteredWord.length + 1;
 
-      if (cursorBlinkOn && isBottomLine) {
-        textBlockLine = textBlockLine + '|';
+      if (charCount <= CHARS_PER_LINE) {
+        transcriptLines[0] = lastLineSoFar + ' ' + filteredWord;
+      } else {
+        transcriptLines.unshift(filteredWord);
       }
+    });
 
-      // Accounting for potential cursor for block width (the +1)
-      const blockWidth =
-        (numChars + (isBottomLine ? 1.1 : 0) + (numChars < 10 ? 1 : 0)) *
-        CHAR_WIDTH;
-      const textOpacity = 1 - 0.1 * textBlocks.length;
-      textBlocks.push(
-        <TextBlock
-          key={textBlocks.length}
-          y={y}
-          startY={currentY}
-          index={`${sentences.length - i},${j}`}
-          textOpacity={textOpacity}
-          backgroundOpacity={0.98}
-          height={LINE_HEIGHT}
-          width={blockWidth}
-          // content={"BLOCK " + textBlocks.length + ": " + content}
-          content={textBlockLine}
-          enableAnimation={!isBottomLine}
-        />,
-      );
+    if (sentenceIdx < newSentences.length - 1) {
+      transcriptLines.unshift('\n');
+      transcriptLines.unshift('');
+    }
+  });
+
+  transcriptState.transcriptLines = transcriptLines;
+  transcriptState.lastTranslationStringIndex = nextTranslationStringIndex;
 
-      currentY = y + LINE_HEIGHT / 2;
+  const newTextBlocksProps: TextBlockProps[] = [];
+  let currentY = Y_COORD_START;
+
+  transcriptLines.forEach((line, i) => {
+    if (newTextBlocksProps.length == NUM_LINES) {
+      return;
     }
-    currentY += showTranscriptionPanel ? BLOCK_SPACING / 3 : BLOCK_SPACING;
-  }
 
-  const numRemainingBlocks = textBlocks.length - NUM_LINES;
-  if (numRemainingBlocks > 0) {
-    Array.from({length: numRemainingBlocks}).forEach(() => {
-      // Push in non display blocks because mesh UI crashes if elements are add / removed from screen.
-      textBlocks.push(
-        <TextBlock
-          key={textBlocks.length}
-          y={Y_COORD_START}
-          startY={0}
-          index="0,0"
-          textOpacity={0}
-          backgroundOpacity={0}
-          enableAnimation={false}
-          width={MAX_WIDTH}
-          height={LINE_HEIGHT}
-          content=""
-        />,
-      );
+    // const line = transcriptLines[i];
+    if (line === '\n') {
+      currentY += BLOCK_SPACING;
+      return;
+    }
+    const y = currentY + LINE_HEIGHT / 2;
+    const isBottomLine = newTextBlocksProps.length === 0;
+
+    const textOpacity = 1 - 0.1 * newTextBlocksProps.length;
+    newTextBlocksProps.push({
+      y,
+      startY: currentY,
+      index: i,
+      textOpacity,
+      backgroundOpacity: 0.98,
+      content: line,
+      isBottomLine,
     });
-  }
 
-  if (showTranscriptionPanel) {
-    textBlocks.push(<TranscriptionPanel key={textBlocks.length} />);
+    currentY = y + LINE_HEIGHT / 2;
+  });
+
+  const numRemainingBlocks = NUM_LINES - newTextBlocksProps.length;
+  if (numRemainingBlocks > 0) {
+    newTextBlocksProps.push(...initialTextBlockProps(numRemainingBlocks));
   }
-  return textBlocks;
+
+  transcriptState.textBlocksProps = newTextBlocksProps;
+  transcriptState.lastRenderTime = currentTime;
+  return newTextBlocksProps.map((props, idx) => (
+    <TextBlock {...props} key={idx} />
+  ));
 }

streaming-react-app/src/react-xr/XRConfig.tsx

@@ -25,29 +25,15 @@ import {BLACK, WHITE} from './Colors';
 import robotoFontFamilyJson from '../assets/RobotoMono-Regular-msdf.json?url';
 import robotoFontTexture from '../assets/RobotoMono-Regular.png';
 import {getURLParams} from '../URLParams';
-import TextBlocks, {CHARS_PER_LINE} from './TextBlocks';
+import TextBlocks from './TextBlocks';
 import {BufferedSpeechPlayer} from '../createBufferedSpeechPlayer';
 import {CURSOR_BLINK_INTERVAL_MS} from '../cursorBlinkInterval';
+import supportedCharSet from './supportedCharSet';
 
 // Adds on react JSX for add-on libraries to react-three-fiber
 extend(ThreeMeshUI);
 extend({TextGeometry});
 
-async function fetchSupportedCharSet(): Promise<Set<string>> {
-  try {
-    const response = await fetch(robotoFontFamilyJson);
-    const fontFamily = await response.json();
-
-    return new Set(fontFamily.info.charset);
-  } catch (e) {
-    console.error('Failed to fetch supported XR charset', e);
-    return new Set();
-  }
-}
-
-let supportedCharSet = new Set();
-fetchSupportedCharSet().then((result) => (supportedCharSet = result));
-
 // This component wraps any children so it is positioned relative to the camera, rather than from the origin
 function CameraLinkedObject({children}) {
   const camera = useThree((state) => state.camera);
@@ -76,10 +62,7 @@ function ThreeMeshUIComponents({
             translationSentences={translationSentences}
           />
         ) : (
-          <TranscriptPanelBlocks
-            animateTextDisplay={animateTextDisplay}
-            translationSentences={translationSentences}
-          />
+          <TranscriptPanelBlocks translationSentences={translationSentences} />
         )}
         {skipARIntro ? null : (
           <IntroPanel started={started} setStarted={setStarted} />
@@ -153,7 +136,7 @@ function TranscriptPanelSingleBlock({
           (wordChunks, currentWord) => {
             const filteredWord = [...currentWord]
               .filter((c) => {
-                if (supportedCharSet.has(c)) {
+                if (supportedCharSet().has(c)) {
                   return true;
                 }
                 console.error(
@@ -223,59 +206,14 @@ function TranscriptPanelSingleBlock({
 // Splits up the lines into separate blocks to treat each one separately.
 // This allows changing of opacity, animating per line, changing height / width per line etc
 function TranscriptPanelBlocks({
-  animateTextDisplay,
   translationSentences,
 }: {
-  animateTextDisplay: boolean;
   translationSentences: TranslationSentences;
 }) {
-  const [didReceiveTranslationSentences, setDidReceiveTranslationSentences] =
-    // Currently causing issues with displaying dummy text, skip over
-    useState(false);
-
-  // Normally we don't setState in render, but here we need to for computed state, and this if statement assures it won't loop infinitely
-  if (!didReceiveTranslationSentences && translationSentences.length > 0) {
-    setDidReceiveTranslationSentences(true);
-  }
-
-  const initialPrompt = 'Listening...';
-  const transcriptSentences: string[] = didReceiveTranslationSentences
-    ? translationSentences
-    : [initialPrompt];
-
-  // The transcript is an array of sentences. For each sentence we break this down into an array of words per line.
-  // This is needed so we can "scroll" through without changing the order of words in the transcript
-  const sentenceLines = transcriptSentences.map((sentence) => {
-    const words = sentence.split(/\s+/);
-    // Here we break each sentence up with newlines so all words per line fit within the panel
-    return words.reduce(
-      (wordChunks, currentWord) => {
-        const filteredWord = [...currentWord]
-          .filter((c) => {
-            if (supportedCharSet.has(c)) {
-              return true;
-            }
-            console.error(
-              `Unsupported char ${c} - make sure this is supported in the font family msdf file`,
-            );
-            return false;
-          })
-          .join('');
-        const lastLineSoFar = wordChunks[wordChunks.length - 1];
-        const charCount = lastLineSoFar.length + filteredWord.length + 1;
-        if (charCount <= CHARS_PER_LINE) {
-          wordChunks[wordChunks.length - 1] =
-            lastLineSoFar + ' ' + filteredWord;
-        } else {
-          wordChunks.push(filteredWord);
-        }
-        return wordChunks;
-      },
-      [''],
-    );
-  });
   return (
-    <TextBlocks sentences={sentenceLines} blinkCursor={animateTextDisplay} />
+    <TextBlocks
+      translationText={'Listening...\n' + translationSentences.join('\n')}
+    />
   );
 }
 
@@ -361,6 +299,8 @@ export type XRConfigProps = {
   startStreaming: () => Promise<void>;
   stopStreaming: () => Promise<void>;
   debugParam: boolean | null;
+  onARVisible?: () => void;
+  onARHidden?: () => void;
 };
 
 export default function XRConfig(props: XRConfigProps) {

streaming-react-app/src/react-xr/XRDialog.tsx

@@ -8,27 +8,12 @@ import {
   Typography,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
+import {XRConfigProps} from './XRConfig';
 import {useEffect, useRef, useState} from 'react';
 import './XRDialog.css';
 import {getRenderer, init, updatetranslationText} from './XRRendering';
 import ARButton from './ARButton';
 import {getURLParams} from '../URLParams';
-import { BufferedSpeechPlayer } from '../createBufferedSpeechPlayer';
-import { TranslationSentences } from '../types/StreamingTypes';
-import { RoomState } from '../types/RoomState';
-
-type XRConfigProps = {
-  animateTextDisplay: boolean;
-  bufferedSpeechPlayer: BufferedSpeechPlayer;
-  translationSentences: TranslationSentences;
-  roomState: RoomState | null;
-  roomID: string | null;
-  startStreaming: () => Promise<void>;
-  stopStreaming: () => Promise<void>;
-  debugParam: boolean | null;
-  onARVisible?: () => void;
-  onARHidden?: () => void;
-};
 
 function XRContent(props: XRConfigProps) {
   const debugParam = getURLParams().debug;

streaming-react-app/src/types/StreamingTypes.ts

@@ -1,3 +1,13 @@
+export const SUPPORTED_LANGUAGE_CODES = ['en-US', 'es-ES'] as const;
+
+export type SupportedLanguageCode = (typeof SUPPORTED_LANGUAGE_CODES)[number];
+
+export type StartStreamingData = {
+  inputLang: SupportedLanguageCode;
+  outputLang: SupportedLanguageCode;
+  outputMode: SupportedOutputMode;
+};
+
 interface ServerTranslationDataBase {
   eos: boolean;
   event: string;
@@ -26,6 +36,7 @@ export type AgentCapabilities = {
   name: string;
   description: string;
   modalities: Array<OutputModalitiesBase>;
+  sourceLangs: Array<string>;
   targetLangs: Array<string>;
   dynamicParams: Array<DynamicParams>;
 };
@@ -38,10 +49,10 @@ export const SUPPORTED_OUTPUT_MODES: Array<{
   value: (typeof SUPPORTED_OUTPUT_MODE_VALUES)[number];
   label: string;
 }> = [
-    { value: 's2s&t', label: 'Text & Speech' },
-    { value: 's2t', label: 'Text' },
-    { value: 's2s', label: 'Speech' },
-  ];
+  {value: 's2s&t', label: 'Text & Speech'},
+  {value: 's2t', label: 'Text'},
+  {value: 's2s', label: 'Speech'},
+];
 
 export const SUPPORTED_INPUT_SOURCE_VALUES = [
   'userMedia',
@@ -55,14 +66,15 @@ export const SUPPORTED_INPUT_SOURCES: Array<{
   value: SupportedInputSource;
   label: string;
 }> = [
-    { value: 'userMedia', label: 'Microphone' },
-    { value: 'displayMedia', label: 'Browser Tab' },
-  ];
+  {value: 'userMedia', label: 'Microphone'},
+  {value: 'displayMedia', label: 'Browser Tab'},
+];
 
 export type StartStreamEventConfig = {
   event: 'config';
   rate: number;
   model_name: string;
+  // source_language: SupportedLanguageCode;
   debug: boolean;
   async_processing: boolean;
   model_type: SupportedOutputMode;
@@ -70,8 +82,8 @@ export type StartStreamEventConfig = {
 };
 
 export interface BrowserAudioStreamConfig {
-  noiseSuppression: boolean;
   echoCancellation: boolean;
+  noiseSuppression: boolean;
 }
 
 export interface ServerStateItem {
@@ -88,7 +100,7 @@ export type ServerLockObject = {
 export type ServerState = ServerStateItem & {
   agentsCapabilities: Array<AgentCapabilities>;
   statusByRoom: {
-    [key: string]: { activeConnections: number; activeTranscoders: number };
+    [key: string]: {activeConnections: number; activeTranscoders: number};
   };
   totalActiveConnections: number;
   totalActiveTranscoders: number;
@@ -111,7 +123,10 @@ export type TranslationSentences = Array<string>;
 
 export type DynamicConfig = {
   // targetLanguage: a 3-letter string representing the desired output language.
+  // Supported languages are provided by the agent capabilities config
   targetLanguage: string;
+
+  expressive: boolean | null;
 };
 
 export type PartialDynamicConfig = Partial<DynamicConfig>;

streaming-react-app/src/types/URLParamsTypes.ts

@@ -7,10 +7,10 @@ export type URLParamsObject = {
   serverURL: string | null;
   skipARIntro: boolean;
   ARTranscriptionType:
-  | 'single_block'
-  | 'lines'
-  | 'lines_with_background'
-  | string;
+    | 'single_block'
+    | 'lines'
+    | 'lines_with_background'
+    | string;
 };
 
 export type URLParamNames = keyof URLParamsObject;

streaming-react-app/vite.config.ts

@@ -1,13 +1,8 @@
-import { defineConfig } from 'vite';
+import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
-// import {resolve} from 'path';
-
-// const rootDir = resolve(__dirname, 'src');
-// const assetsDir = resolve(rootDir, 'assets');
-// const typesDir = resolve(__dirname, 'types');
 
 // https://vitejs.dev/config/
-export default defineConfig(({ command }) => {
+export default defineConfig(({command}) => {
   let define = {};
   if (command === 'serve') {
     define = {
@@ -17,13 +12,5 @@ export default defineConfig(({ command }) => {
   return {
     plugins: [react()],
     define: define,
-    server: {
-      proxy: {
-        '/ws': {
-          target: 'ws://localhost:7860',
-          ws: true
-        }
-      },
-    },
-  }
+  };
 });

streaming-react-app/yarn.lock

@@ -61,7 +61,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz"
   integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==
 
-"@babel/core@^7.22.9":
+"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.22.9":
   version "7.22.10"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.22.10.tgz"
   integrity sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==
@@ -298,7 +298,7 @@
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/react@11.11.1":
+"@emotion/react@^11.0.0-rc.0", "@emotion/react@^11.4.1", "@emotion/react@^11.5.0", "@emotion/react@11.11.1":
   version "11.11.1"
   resolved "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz"
   integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
@@ -328,7 +328,7 @@
   resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz"
   integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
 
-"@emotion/styled@11.11.0":
+"@emotion/styled@^11.3.0", "@emotion/styled@11.11.0":
   version "11.11.0"
   resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz"
   integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
@@ -360,116 +360,11 @@
   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
-"@esbuild/android-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
-  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
-
-"@esbuild/android-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
-  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
-
-"@esbuild/android-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
-  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
-
-"@esbuild/darwin-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
-  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
-
-"@esbuild/darwin-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
-  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
-
-"@esbuild/freebsd-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
-  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
-
-"@esbuild/freebsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
-  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
-
-"@esbuild/linux-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
-  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
-
-"@esbuild/linux-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
-  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
-
-"@esbuild/linux-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
-  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
-
-"@esbuild/linux-loong64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
-  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
-
-"@esbuild/linux-mips64el@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
-  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
-
-"@esbuild/linux-ppc64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
-  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
-
-"@esbuild/linux-riscv64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
-  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
-
-"@esbuild/linux-s390x@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
-  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
-
 "@esbuild/linux-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz"
   integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
 
-"@esbuild/netbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
-  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
-
-"@esbuild/openbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
-  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
-
-"@esbuild/sunos-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
-  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
-
-"@esbuild/win32-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
-  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
-
-"@esbuild/win32-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
-  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
-
-"@esbuild/win32-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
-  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
-
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@@ -584,7 +479,7 @@
   dependencies:
     "@babel/runtime" "^7.22.6"
 
-"@mui/material@5.14.5":
+"@mui/material@^5.0.0", "@mui/material@5.14.5":
   version "5.14.5"
   resolved "https://registry.npmjs.org/@mui/material/-/material-5.14.5.tgz"
   integrity sha512-4qa4GMfuZH0Ai3mttk5ccXP8a3sf7aPlAJwyMrUSz6h9hPri6BPou94zeu3rENhhmKLby9S/W1y+pmficy8JKA==
@@ -659,7 +554,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -752,7 +647,7 @@
     utility-types "^3.10.0"
     zustand "^3.5.13"
 
-"@react-three/fiber@^8.14.1":
+"@react-three/fiber@^8.14.1", "@react-three/fiber@>=6.0", "@react-three/fiber@>=8.0", "@react-three/fiber@>=8.0.0":
   version "8.14.1"
   resolved "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.14.1.tgz"
   integrity sha512-Ky/FiCyJiyaI8bd+vckzgkHgKDSQDOcSSUVFOHCuCO9XOLb7Ebs6lof2hPpFa1HkaeE5ZIbTWIprvN0QqdPF0w==
@@ -798,7 +693,7 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz"
   integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
 
-"@types/node@^20.5.3":
+"@types/node@^20.5.3", "@types/node@>= 14":
   version "20.5.3"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz"
   integrity sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==
@@ -853,7 +748,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.15":
+"@types/react@*", "@types/react@^17.0.0 || ^18.0.0", "@types/react@^18.2.15", "@types/react@>=16.8":
   version "18.2.20"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.2.20.tgz"
   integrity sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==
@@ -872,6 +767,21 @@
   resolved "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz"
   integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
 
+"@types/stats.js@*":
+  version "0.17.3"
+  resolved "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz"
+  integrity sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==
+
+"@types/three@>=0.144.0":
+  version "0.158.3"
+  resolved "https://registry.npmjs.org/@types/three/-/three-0.158.3.tgz"
+  integrity sha512-6Qs1rUvLSbkJ4hlIe6/rdwIf61j1x2UKvGJg7s8KjswYsz1C1qDTs6voVXXB8kYaI0hgklgZgbZUupfL1l9xdA==
+  dependencies:
+    "@types/stats.js" "*"
+    "@types/webxr" "*"
+    fflate "~0.6.10"
+    meshoptimizer "~0.18.1"
+
 "@types/uuid@^9.0.2":
   version "9.0.2"
   resolved "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.2.tgz"
@@ -899,7 +809,7 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/parser@^6.0.0":
+"@typescript-eslint/parser@^6.0.0", "@typescript-eslint/parser@^6.0.0 || ^6.0.0-alpha":
   version "6.4.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.4.0.tgz"
   integrity sha512-I1Ah1irl033uxjxO9Xql7+biL3YD7w9IU8zF+xlzD/YxY6a4b7DYA08PXUUCbm2sEljwJF6ERFy2kTGAGcNilg==
@@ -994,7 +904,7 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.9.0:
+"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.9.0:
   version "8.10.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
@@ -1032,7 +942,14 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+ansi-styles@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^4.1.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
@@ -1116,7 +1033,7 @@ braces@^3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.21.9:
+browserslist@^4.21.9, "browserslist@>= 4.21.0":
   version "4.21.10"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz"
   integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==
@@ -1167,7 +1084,15 @@ chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.2:
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -1203,16 +1128,16 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
 color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -1427,7 +1352,7 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@^8.45.0:
+"eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^7.0.0 || ^8.0.0", eslint@^8.45.0, eslint@>=7:
   version "8.47.0"
   resolved "https://registry.npmjs.org/eslint/-/eslint-8.47.0.tgz"
   integrity sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==
@@ -1546,7 +1471,7 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fflate@^0.6.9:
+fflate@^0.6.9, fflate@~0.6.10:
   version "0.6.10"
   resolved "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz"
   integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==
@@ -1603,11 +1528,6 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -1741,7 +1661,7 @@ hoist-non-react-statics@^3.3.1:
   dependencies:
     react-is "^16.7.0"
 
-ieee754@1.1.13, ieee754@^1.1.4:
+ieee754@^1.1.4, ieee754@1.1.13:
   version "1.1.13"
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz"
   integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
@@ -1772,7 +1692,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.3:
+inherits@^2.0.3, inherits@2:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -1970,7 +1890,7 @@ lodash.pick@^4.4.0:
   resolved "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz"
   integrity sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==
 
-lodash@4.17.21, lodash@^4.17.21:
+lodash@^4.17.21, lodash@4.17.21:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -2011,6 +1931,11 @@ meshline@^3.1.6:
   resolved "https://registry.npmjs.org/meshline/-/meshline-3.1.6.tgz"
   integrity sha512-8JZJOdaL5oz3PI/upG8JvP/5FfzYUOhrkJ8np/WKvXzl0/PZ2V9pqTvCIjSKv+w9ccg2xb+yyBhXAwt6ier3ug==
 
+meshoptimizer@~0.18.1:
+  version "0.18.1"
+  resolved "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz"
+  integrity sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==
+
 micromatch@^4.0.4:
   version "4.0.5"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
@@ -2184,16 +2109,16 @@ prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-punycode@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz"
-  integrity sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==
-
 punycode@^2.1.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz"
+  integrity sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==
+
 querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz"
@@ -2211,7 +2136,7 @@ react-composer@^5.0.3:
   dependencies:
     prop-types "^15.6.0"
 
-react-dom@^18.2.0:
+"react-dom@^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@>=16.13, react-dom@>=16.3.0, react-dom@>=16.6.0, react-dom@>=18.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -2224,7 +2149,12 @@ react-google-charts@^4.0.1:
   resolved "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.1.tgz"
   integrity sha512-V/hcMcNuBgD5w49BYTUDye+bUKaPmsU5vy/9W/Nj2xEeGn+6/AuH9IvBkbDcNBsY00cV9OeexdmgfI5RFHgsXQ==
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -2269,7 +2199,7 @@ react-use-measure@^2.1.1:
   dependencies:
     debounce "^1.2.1"
 
-react@^18.2.0:
+"react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16.8.0", react@>=16.13, react@>=16.3.0, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=17.0, react@>=18.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -2338,7 +2268,7 @@ rxjs@^7.8.1:
   dependencies:
     tslib "^2.1.0"
 
-sax@1.2.1, sax@>=0.6.0:
+sax@>=0.6.0, sax@1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz"
   integrity sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==
@@ -2527,7 +2457,7 @@ three-stdlib@^2.21.1, three-stdlib@^2.25.1:
     potpack "^1.0.1"
     zstddec "^0.0.2"
 
-three@^0.156.1:
+three@^0.156.1, "three@>= 0.151.0", three@>=0.125.0, three@>=0.126, three@>=0.126.1, three@>=0.128.0, three@>=0.133, three@>=0.137, three@>=0.141, three@>=0.144.0:
   version "0.156.1"
   resolved "https://registry.npmjs.org/three/-/three-0.156.1.tgz"
   integrity sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ==
@@ -2589,7 +2519,17 @@ tslib@^1.11.1:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.1.0, tslib@^2.3.1, tslib@^2.5.0:
+tslib@^2.1.0:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
+tslib@^2.3.1:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
+tslib@^2.5.0:
   version "2.6.2"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -2606,7 +2546,7 @@ type-fest@^0.20.2:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-typescript@5.1.6:
+typescript@>=4.2.0, typescript@5.1.6:
   version "5.1.6"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz"
   integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
@@ -2660,17 +2600,17 @@ utility-types@^3.10.0:
   resolved "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz"
   integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
 
-uuid@8.0.0:
-  version "8.0.0"
-  resolved "https://registry.npmjs.org/uuid/-/uuid-8.0.0.tgz"
-  integrity sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==
-
 uuid@^9.0.0:
   version "9.0.0"
   resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz"
   integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
 
-vite@^4.4.5:
+uuid@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-8.0.0.tgz"
+  integrity sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==
+
+vite@^4.2.0, vite@^4.4.5:
   version "4.4.9"
   resolved "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz"
   integrity sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==
@@ -2807,7 +2747,12 @@ zstddec@^0.0.2:
   resolved "https://registry.npmjs.org/zstddec/-/zstddec-0.0.2.tgz"
   integrity sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA==
 
-zustand@^3.5.13, zustand@^3.7.1:
+zustand@^3.5.13:
+  version "3.7.2"
+  resolved "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz"
+  integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==
+
+zustand@^3.7.1:
   version "3.7.2"
   resolved "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz"
   integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==