Port over VR performance fixes and cleanup

streaming-react-app/src/StreamingInterface.tsx

@@ -64,19 +64,19 @@ const AUDIO_STREAM_DEFAULTS: {
   [key in SupportedInputSource]: BrowserAudioStreamConfig;
 } = {
   userMedia: {
-    noiseSuppression: true,
     echoCancellation: false,
+    noiseSuppression: true,
   },
   displayMedia: {
-    noiseSuppression: false,
     echoCancellation: false,
+    noiseSuppression: false,
   },
 };
 
 async function requestUserMediaAudioStream(
   config: BrowserAudioStreamConfig = {
-    noiseSuppression: true,
     echoCancellation: false,
+    noiseSuppression: true,
   },
 ) {
   const stream = await navigator.mediaDevices.getUserMedia({
@@ -91,8 +91,8 @@ async function requestUserMediaAudioStream(
 
 async function requestDisplayMediaAudioStream(
   config: BrowserAudioStreamConfig = {
-    noiseSuppression: false,
     echoCancellation: false,
+    noiseSuppression: false,
   },
 ) {
   const stream = await navigator.mediaDevices.getDisplayMedia({
@@ -130,7 +130,9 @@ export const TYPING_ANIMATION_DELAY_MS = 6;
 export default function StreamingInterface() {
   const urlParams = getURLParams();
   const debugParam = urlParams.debug;
-  const animateTextDisplay = urlParams.animateTextDisplay;
+  const [animateTextDisplay, setAnimateTextDisplay] = useState<boolean>(
+    urlParams.animateTextDisplay,
+  );
 
   const socketObject = useSocket();
   const {socket, clientID} = socketObject;
@@ -165,6 +167,9 @@ export default function StreamingInterface() {
   const [enableNoiseSuppression, setEnableNoiseSuppression] = useState<
     boolean | null
   >(null);
+  const [enableEchoCancellation, setEnableEchoCancellation] = useState<
+    boolean | null
+  >(null);
 
   // Dynamic Params:
   const [targetLang, setTargetLang] = useState<string | null>(null);
@@ -358,14 +363,18 @@ export default function StreamingInterface() {
           noiseSuppression:
             enableNoiseSuppression ??
             AUDIO_STREAM_DEFAULTS['userMedia'].noiseSuppression,
-          echoCancellation: false,
+          echoCancellation:
+            enableEchoCancellation ??
+            AUDIO_STREAM_DEFAULTS['userMedia'].echoCancellation,
         });
       } else if (inputSource === 'displayMedia') {
         stream = await requestDisplayMediaAudioStream({
           noiseSuppression:
             enableNoiseSuppression ??
             AUDIO_STREAM_DEFAULTS['displayMedia'].noiseSuppression,
-          echoCancellation: false,
+          echoCancellation:
+            enableEchoCancellation ??
+            AUDIO_STREAM_DEFAULTS['displayMedia'].echoCancellation,
         });
       } else {
         throw new Error(`Unsupported input source requested: ${inputSource}`);
@@ -733,6 +742,10 @@ export default function StreamingInterface() {
       startStreaming={startStreaming}
       stopStreaming={stopStreaming}
       debugParam={debugParam}
+      onARHidden={() => {
+        setAnimateTextDisplay(urlParams.animateTextDisplay);
+      }}
+      onARVisible={() => setAnimateTextDisplay(false)}
     />
   );
 
@@ -980,6 +993,23 @@ export default function StreamingInterface() {
                           }
                           label="Noise Suppression (Browser)"
                         />
+                        <FormControlLabel
+                          control={
+                            <Checkbox
+                              checked={
+                                enableEchoCancellation ??
+                                AUDIO_STREAM_DEFAULTS[inputSource]
+                                  .echoCancellation
+                              }
+                              onChange={(
+                                event: React.ChangeEvent<HTMLInputElement>,
+                              ) =>
+                                setEnableEchoCancellation(event.target.checked)
+                              }
+                            />
+                          }
+                          label="Echo Cancellation (Browser)"
+                        />
                         <FormControlLabel
                           control={
                             <Checkbox

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/ARButton.tsx

@@ -0,0 +1,89 @@
+import * as THREE from 'three';
+import {Button} from '@mui/material';
+import {useCallback, useEffect, useState} from 'react';
+import {BufferedSpeechPlayer} from '../createBufferedSpeechPlayer';
+
+type Props = {
+  bufferedSpeechPlayer: BufferedSpeechPlayer;
+  renderer: THREE.WebGLRenderer | null;
+  onARVisible?: () => void;
+  onARHidden?: () => void;
+};
+
+export default function ARButton({
+  bufferedSpeechPlayer,
+  renderer,
+  onARVisible,
+  onARHidden,
+}: Props) {
+  const [session, setSession] = useState<XRSession | null>(null);
+  const [supported, setSupported] = useState<boolean>(true);
+
+  useEffect(() => {
+    if (!navigator.xr) {
+      setSupported(false);
+      return;
+    }
+    navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
+      setSupported(supported);
+    });
+  }, []);
+
+  const resetBuffers = useCallback(
+    (event: XRSessionEvent) => {
+      const session = event.target;
+      if (!(session instanceof XRSession)) {
+        return;
+      }
+      switch (session.visibilityState) {
+        case 'visible':
+          console.log('Restarting speech player, device is visible');
+          bufferedSpeechPlayer.stop();
+          bufferedSpeechPlayer.start();
+          onARVisible?.();
+          break;
+        case 'hidden':
+          console.log('Stopping speech player, device is hidden');
+          bufferedSpeechPlayer.stop();
+          bufferedSpeechPlayer.start();
+          onARHidden?.();
+          break;
+      }
+    },
+    [bufferedSpeechPlayer],
+  );
+
+  async function onSessionStarted(session: XRSession) {
+    setSession(session);
+
+    session.onvisibilitychange = resetBuffers;
+    session.onend = onSessionEnded;
+
+    await renderer.xr.setSession(session);
+  }
+
+  function onSessionEnded() {
+    setSession(null);
+  }
+
+  const onClick = () => {
+    if (session === null) {
+      navigator.xr!.requestSession('immersive-ar').then(onSessionStarted);
+    } else {
+      session.end();
+    }
+  };
+  return (
+    <Button
+      variant="contained"
+      onClick={onClick}
+      disabled={!supported || renderer == null}
+      sx={{mt: 1}}>
+      {supported
+        ? renderer != null
+          ? 'Enter AR'
+          : 'Initializing AR...'
+        : 'AR Not Supported'}
+    </Button>
+  );
+}

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

@@ -11,3 +11,9 @@
 .xr-dialog-text-center {
   text-align: center;
 }
+
+.xr-dialog-canvas-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -1,3 +1,4 @@
+import * as THREE from 'three';
 import {
   Button,
   Dialog,
@@ -7,43 +8,99 @@ import {
   Typography,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import XRConfig, {XRConfigProps} from './XRConfig';
-import {useState} from 'react';
+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;
+  const {translationSentences} = props;
+  useEffect(() => {
+    updatetranslationText(translationSentences);
+  }, [translationSentences]);
+
+  const [renderer, setRenderer] = useState<THREE.WebGLRenderer | null>(null);
+  const canvasRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (canvasRef.current != null || debugParam === false) {
+      const existingRenderer = getRenderer();
+      if (existingRenderer) {
+        setRenderer(existingRenderer);
+      } else {
+        const newRenderer = init(
+          400,
+          300,
+          debugParam ? canvasRef.current : null,
+        );
+        setRenderer(newRenderer);
+      }
+    }
+  }, [canvasRef.current]);
+
+  return (
+    <DialogContent
+      dividers
+      className="xr-dialog-container xr-dialog-text-center">
+      <Typography gutterBottom>
+        Welcome to the Seamless team streaming demo experience! In this demo you
+        will experience AI powered text and audio translation in real time.
+      </Typography>
+      <div ref={canvasRef} className="xr-dialog-canvas-container" />
+      <ARButton
+        bufferedSpeechPlayer={props.bufferedSpeechPlayer}
+        renderer={renderer}
+        onARHidden={props.onARHidden}
+        onARVisible={props.onARVisible}
+      />
+    </DialogContent>
+  );
+}
 
 export default function XRDialog(props: XRConfigProps) {
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+
   return (
     <>
       <Button variant="contained" onClick={() => setIsDialogOpen(true)}>
         Enter AR Experience
       </Button>
-      <Dialog onClose={() => setIsDialogOpen(false)} open={isDialogOpen}>
-        <DialogTitle sx={{m: 0, p: 2}} className="xr-dialog-text-center">
-          FAIR Seamless Streaming Demo
-        </DialogTitle>
-        <IconButton
-          aria-label="close"
-          onClick={() => setIsDialogOpen(false)}
-          sx={{
-            position: 'absolute',
-            right: 8,
-            top: 8,
-            color: (theme) => theme.palette.grey[500],
-          }}>
-          <CloseIcon />
-        </IconButton>
-        <DialogContent
-          dividers
-          className="xr-dialog-container xr-dialog-text-center">
-          <Typography gutterBottom>
-            Welcome to the Seamless team streaming demo experience! In this demo
-            you will experience AI powered text and audio translation in real
-            time.
-          </Typography>
-          <XRConfig {...props} />
-        </DialogContent>
-      </Dialog>
+      {isDialogOpen && (
+        <Dialog onClose={() => setIsDialogOpen(false)} open={true}>
+          <DialogTitle sx={{m: 0, p: 2}} className="xr-dialog-text-center">
+            FAIR Seamless Streaming Demo
+          </DialogTitle>
+          <IconButton
+            aria-label="close"
+            onClick={() => setIsDialogOpen(false)}
+            sx={{
+              position: 'absolute',
+              right: 8,
+              top: 8,
+              color: (theme) => theme.palette.grey[500],
+            }}>
+            <CloseIcon />
+          </IconButton>
+          <XRContent {...props} />
+        </Dialog>
+      )}
     </>
   );
 }

streaming-react-app/src/react-xr/XRRendering.ts

@@ -0,0 +1,402 @@
+import * as THREE from 'three';
+import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
+
+import ThreeMeshUI, {Block, Text} from 'three-mesh-ui';
+
+import FontJSON from '../assets/RobotoMono-Regular-msdf.json?url';
+import FontImage from '../assets/RobotoMono-Regular.png';
+import {TranslationSentences} from '../types/StreamingTypes';
+import supportedCharSet from './supportedCharSet';
+
+// Augment three-mesh-ui types which aren't implemented
+declare module 'three-mesh-ui' {
+  interface Block {
+    add(any: any);
+    set(props: BlockOptions);
+    position: {
+      x: number;
+      y: number;
+      z: number;
+      set: (x: number, y: number, z: number) => void;
+    };
+  }
+  interface Text {
+    set(props: {content: string});
+  }
+}
+
+// Various configuration parameters
+const INITIAL_PROMPT = 'Listening...\n';
+const NUM_LINES = 3;
+const CHARS_PER_LINE = 37;
+const CHARS_PER_SECOND = 15;
+
+const MAX_WIDTH = 0.89;
+const CHAR_WIDTH = 0.0233;
+const Y_COORD_START = -0.38;
+const Z_COORD = -1.3;
+const LINE_HEIGHT = 0.062;
+const BLOCK_SPACING = 0.02;
+const FONT_SIZE = 0.038;
+
+// Speed of scrolling of text lines
+const SCROLL_Y_DELTA = 0.01;
+
+// Overlay an extra block for padding due to inflexibilities of native padding
+const OFFSET = 0.01;
+const OFFSET_WIDTH = OFFSET * 3;
+
+// The tick interval
+const CURSOR_BLINK_INTERVAL_MS = 500;
+
+type TranscriptState = {
+  translationText: string;
+  textBlocksProps: TextBlockProps[];
+  lastTranslationStringIndex: number;
+  lastTranslationLineStartIndex: number;
+  transcriptLines: string[];
+  lastUpdateTime: number;
+};
+
+type TextBlockProps = {
+  content: string;
+  // The end position when animating
+  targetY: number;
+  // Current scroll position that caps at targetY
+  currentY: number;
+  textOpacity: number;
+  backgroundOpacity: number;
+  index: number;
+  isBottomLine: boolean;
+};
+
+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 {
+      // key: textBlocksProps.length,
+      targetY: Y_COORD_START,
+      currentY: Y_COORD_START,
+      index: 0,
+      textOpacity: 0,
+      backgroundOpacity: 0,
+      width: MAX_WIDTH,
+      height: LINE_HEIGHT,
+      content: '',
+      isBottomLine: true,
+    };
+  });
+}
+
+function initialState(): TranscriptState {
+  return {
+    translationText: '',
+    textBlocksProps: initialTextBlockProps(NUM_LINES),
+    lastTranslationStringIndex: 0,
+    lastTranslationLineStartIndex: 0,
+    transcriptLines: [],
+    lastUpdateTime: new Date().getTime(),
+  };
+}
+
+let transcriptState: TranscriptState = initialState();
+
+let scene: THREE.Scene | null;
+let camera: THREE.PerspectiveCamera | null;
+let renderer: THREE.WebGLRenderer | null;
+let controls: THREE.OrbitControls | null;
+
+let cursorBlinkOn: boolean = false;
+
+setInterval(() => {
+  cursorBlinkOn = !cursorBlinkOn;
+}, CURSOR_BLINK_INTERVAL_MS);
+
+type TextBlock = {
+  textBlockOuterContainer: Block;
+  textBlockInnerContainer: Block;
+  text: Text;
+};
+const textBlocks: TextBlock[] = [];
+
+export function getRenderer(): THREE.WebGLRenderer | null {
+  return renderer;
+}
+
+export function init(
+  width: number,
+  height: number,
+  parentElement: HTMLDivElement | null,
+): THREE.WebGLRenderer {
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color(0x505050);
+
+  camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000);
+  camera.position.z = 1;
+
+  renderer = new THREE.WebGLRenderer({
+    antialias: true,
+  });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, height);
+  renderer.xr.enabled = true;
+
+  renderer.xr.setReferenceSpaceType('local');
+
+  parentElement?.appendChild(renderer.domElement);
+
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.update();
+
+  scene.add(camera);
+
+  textBlocks.push(
+    ...initialTextBlockProps(NUM_LINES).map((props) => makeTextBlock(props)),
+  );
+
+  renderer.setAnimationLoop(loop);
+  return renderer;
+}
+
+export function updatetranslationText(
+  translationSentences: TranslationSentences,
+): void {
+  const newText = INITIAL_PROMPT + translationSentences.join('\n');
+  if (transcriptState.translationText === newText) {
+    return;
+  }
+  transcriptState.translationText = newText;
+}
+
+export function resetState(): void {
+  transcriptState = initialState();
+}
+
+function makeTextBlock({
+  content,
+  backgroundOpacity,
+}: TextBlockProps): TextBlock {
+  const width = MAX_WIDTH;
+  const height = LINE_HEIGHT;
+
+  const fontProps = {
+    fontSize: FONT_SIZE,
+    textAlign: 'left',
+    // TODO: support more language charsets
+    // This renders using MSDF format supported in WebGL. Renderable characters are defined in the "charset" json
+    // Currently supports most default keyboard inputs but this would exclude many non latin charset based languages.
+    // You can use https://msdf-bmfont.donmccurdy.com/ for easily generating these files
+    fontFamily: FontJSON,
+    fontTexture: FontImage,
+  };
+
+  const textBlockOuterContainer = new Block({
+    backgroundOpacity,
+    width: width + OFFSET_WIDTH,
+    height: height,
+    borderRadius: 0,
+    ...fontProps,
+  });
+
+  const text = new Text({content});
+  const textBlockInnerContainer = new Block({
+    padding: 0,
+    backgroundOpacity: 0,
+    width,
+    height,
+  });
+
+  // Adding it to the camera makes the UI follow it.
+  camera.add(textBlockOuterContainer);
+  textBlockOuterContainer.add(textBlockInnerContainer);
+  textBlockInnerContainer.add(text);
+
+  return {
+    textBlockOuterContainer,
+    textBlockInnerContainer,
+    text,
+  };
+}
+
+// Updates the position and text of a text block from its props
+function updateTextBlock(
+  id: number,
+  {content, targetY, currentY, backgroundOpacity, isBottomLine}: TextBlockProps,
+): void {
+  const {textBlockOuterContainer, textBlockInnerContainer, text} =
+    textBlocks[id];
+
+  const {lastTranslationStringIndex, translationText} = transcriptState;
+
+  // Add blinking cursor if we don't have any new input to render
+  const numChars = content.length;
+
+  if (
+    isBottomLine &&
+    cursorBlinkOn &&
+    lastTranslationStringIndex >= translationText.length
+  ) {
+    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;
+
+  // Width starts from 0 and goes 1/2 in each direction so offset x
+  const xPosition = width / 2 - MAX_WIDTH / 2 + OFFSET_WIDTH;
+  textBlockOuterContainer?.set({
+    backgroundOpacity,
+    width: width + 2 * OFFSET_WIDTH,
+    height: height + OFFSET / 3,
+    borderRadius: 0,
+  });
+
+  // Scroll up line toward target
+  const y = isBottomLine
+    ? targetY
+    : Math.min(currentY + SCROLL_Y_DELTA, targetY);
+  transcriptState.textBlocksProps[id].currentY = y;
+
+  textBlockOuterContainer.position.set(-OFFSET_WIDTH + xPosition, y, Z_COORD);
+  textBlockInnerContainer.set({
+    padding: 0,
+    backgroundOpacity: 0,
+    width,
+    height,
+  });
+  text.set({content});
+}
+
+// We split the text so it fits line by line into the UI
+function chunkTranslationTextIntoLines(
+  translationText: string,
+  nextTranslationStringIndex: number,
+): string[] {
+  // Ideally we continue where we left off but this is complicated when we have mid-words. Recalculating for now
+  const newSentences = translationText
+    .substring(0, nextTranslationStringIndex)
+    .split('\n');
+  const 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('')
+        // Filter out unknown symbol
+        .replace('<unk>', '');
+
+      const lastLineSoFar = transcriptLines[0];
+      const charCount = lastLineSoFar.length + filteredWord.length + 1;
+
+      if (charCount <= CHARS_PER_LINE) {
+        transcriptLines[0] = lastLineSoFar + ' ' + filteredWord;
+      } else {
+        transcriptLines.unshift(filteredWord);
+      }
+    });
+
+    if (sentenceIdx < newSentences.length - 1) {
+      transcriptLines.unshift('\n');
+      transcriptLines.unshift('');
+    }
+  });
+  return transcriptLines;
+}
+
+// The main loop,
+function updateTextBlocksProps(): void {
+  const {translationText, lastTranslationStringIndex, lastUpdateTime} =
+    transcriptState;
+
+  const currentTime = new Date().getTime();
+  const charsToRender = Math.round(
+    ((currentTime - lastUpdateTime) * CHARS_PER_SECOND) / 1000,
+  );
+
+  if (charsToRender < 1) {
+    // Wait some more until we render more characters
+    return;
+  }
+
+  const nextTranslationStringIndex = Math.min(
+    lastTranslationStringIndex + charsToRender,
+    translationText.length,
+  );
+  if (nextTranslationStringIndex === lastTranslationStringIndex) {
+    // No new characters to render
+    transcriptState.lastUpdateTime = currentTime;
+    return;
+  }
+
+  // Ideally we continue where we left off but this is complicated when we have mid-words. Recalculating for now
+  const transcriptLines = chunkTranslationTextIntoLines(
+    translationText,
+    nextTranslationStringIndex,
+  );
+  transcriptState.transcriptLines = transcriptLines;
+  transcriptState.lastTranslationStringIndex = nextTranslationStringIndex;
+
+  // Compute the new props for each text block
+  const newTextBlocksProps: TextBlockProps[] = [];
+  // We start with the most recent line and increment the y coordinate for older lines.
+  // If it is a new sentence we increment the y coordinate a little more to leave a visible space
+  let y = Y_COORD_START;
+  transcriptLines.forEach((line, i) => {
+    if (newTextBlocksProps.length == NUM_LINES) {
+      return;
+    }
+
+    if (line === '\n') {
+      y += BLOCK_SPACING;
+      return;
+    }
+
+    const isBottomLine = newTextBlocksProps.length === 0;
+
+    const textOpacity = 1 - 0.1 * newTextBlocksProps.length;
+
+    const previousProps = transcriptState.textBlocksProps.find(
+      (props) => props.index === i,
+    );
+    const props = {
+      targetY: y + LINE_HEIGHT / 2,
+      currentY: isBottomLine ? y : previousProps?.currentY || y,
+      index: i,
+      textOpacity,
+      backgroundOpacity: 1,
+      content: line,
+      isBottomLine,
+    };
+    newTextBlocksProps.push(props);
+
+    y += LINE_HEIGHT;
+  });
+
+  transcriptState.textBlocksProps = newTextBlocksProps;
+  transcriptState.lastUpdateTime = currentTime;
+}
+
+// The main render loop, everything gets rendered here.
+function loop() {
+  updateTextBlocksProps();
+
+  transcriptState.textBlocksProps.map((props, i) => updateTextBlock(i, props));
+
+  ThreeMeshUI.update();
+
+  controls.update();
+  renderer.render(scene, camera);
+}

streaming-react-app/src/react-xr/supportedCharSet.ts

@@ -0,0 +1,20 @@
+import robotoFontFamilyJson from '../assets/RobotoMono-Regular-msdf.json?url';
+
+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 charSet = new Set<string>();
+fetchSupportedCharSet().then((result) => (charSet = result));
+
+export default function supportedCharSet(): Set<string> {
+  return charSet;
+}

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

@@ -49,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',
@@ -66,9 +66,9 @@ 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';
@@ -100,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;

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/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.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.22.9":
+"@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.0.0-rc.0", "@emotion/react@^11.4.1", "@emotion/react@^11.5.0", "@emotion/react@11.11.1":
+"@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.3.0", "@emotion/styled@11.11.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,11 +360,116 @@
   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"
@@ -479,7 +584,7 @@
   dependencies:
     "@babel/runtime" "^7.22.6"
 
-"@mui/material@^5.0.0", "@mui/material@5.14.5":
+"@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==
@@ -554,7 +659,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -647,7 +752,7 @@
     utility-types "^3.10.0"
     zustand "^3.5.13"
 
-"@react-three/fiber@^8.14.1", "@react-three/fiber@>=6.0", "@react-three/fiber@>=8.0", "@react-three/fiber@>=8.0.0":
+"@react-three/fiber@^8.14.1":
   version "8.14.1"
   resolved "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.14.1.tgz"
   integrity sha512-Ky/FiCyJiyaI8bd+vckzgkHgKDSQDOcSSUVFOHCuCO9XOLb7Ebs6lof2hPpFa1HkaeE5ZIbTWIprvN0QqdPF0w==
@@ -693,7 +798,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@>= 14":
+"@types/node@^20.5.3":
   version "20.5.3"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz"
   integrity sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==
@@ -748,7 +853,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^17.0.0 || ^18.0.0", "@types/react@^18.2.15", "@types/react@>=16.8":
+"@types/react@*", "@types/react@^18.2.15":
   version "18.2.20"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.2.20.tgz"
   integrity sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==
@@ -767,21 +872,6 @@
   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"
@@ -809,7 +899,7 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/parser@^6.0.0", "@typescript-eslint/parser@^6.0.0 || ^6.0.0-alpha":
+"@typescript-eslint/parser@^6.0.0":
   version "6.4.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.4.0.tgz"
   integrity sha512-I1Ah1irl033uxjxO9Xql7+biL3YD7w9IU8zF+xlzD/YxY6a4b7DYA08PXUUCbm2sEljwJF6ERFy2kTGAGcNilg==
@@ -904,7 +994,7 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.9.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==
@@ -942,14 +1032,7 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.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:
+ansi-styles@^4.0.0, 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==
@@ -1033,7 +1116,7 @@ braces@^3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.21.9, "browserslist@>= 4.21.0":
+browserslist@^4.21.9:
   version "4.21.10"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz"
   integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==
@@ -1084,15 +1167,7 @@ chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-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:
+chalk@^4.0.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==
@@ -1128,16 +1203,16 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-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==
 
+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==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -1352,7 +1427,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@^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:
+eslint@^8.45.0:
   version "8.47.0"
   resolved "https://registry.npmjs.org/eslint/-/eslint-8.47.0.tgz"
   integrity sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==
@@ -1471,7 +1546,7 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fflate@^0.6.9, fflate@~0.6.10:
+fflate@^0.6.9:
   version "0.6.10"
   resolved "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz"
   integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==
@@ -1528,6 +1603,11 @@ 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"
@@ -1661,7 +1741,7 @@ hoist-non-react-statics@^3.3.1:
   dependencies:
     react-is "^16.7.0"
 
-ieee754@^1.1.4, ieee754@1.1.13:
+ieee754@1.1.13, ieee754@^1.1.4:
   version "1.1.13"
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz"
   integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
@@ -1692,7 +1772,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@^2.0.3, inherits@2:
+inherits@2, inherits@^2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -1890,7 +1970,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==
@@ -1931,11 +2011,6 @@ 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"
@@ -2109,16 +2184,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@^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==
 
+punycode@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"
+  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+
 querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz"
@@ -2136,7 +2211,7 @@ react-composer@^5.0.3:
   dependencies:
     prop-types "^15.6.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:
+react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -2149,12 +2224,7 @@ 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:
-  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:
+react-is@^16.13.1, 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==
@@ -2199,7 +2269,7 @@ react-use-measure@^2.1.1:
   dependencies:
     debounce "^1.2.1"
 
-"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:
+react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -2268,7 +2338,7 @@ rxjs@^7.8.1:
   dependencies:
     tslib "^2.1.0"
 
-sax@>=0.6.0, sax@1.2.1:
+sax@1.2.1, sax@>=0.6.0:
   version "1.2.1"
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz"
   integrity sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==
@@ -2457,7 +2527,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.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:
+three@^0.156.1:
   version "0.156.1"
   resolved "https://registry.npmjs.org/three/-/three-0.156.1.tgz"
   integrity sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ==
@@ -2519,17 +2589,7 @@ tslib@^1.11.1:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-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:
+tslib@^2.1.0, tslib@^2.3.1, 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==
@@ -2546,7 +2606,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@>=4.2.0, typescript@5.1.6:
+typescript@5.1.6:
   version "5.1.6"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz"
   integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
@@ -2600,17 +2660,17 @@ utility-types@^3.10.0:
   resolved "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz"
   integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
 
-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==
-
 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:
+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:
   version "4.4.9"
   resolved "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz"
   integrity sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==
@@ -2747,12 +2807,7 @@ zstddec@^0.0.2:
   resolved "https://registry.npmjs.org/zstddec/-/zstddec-0.0.2.tgz"
   integrity sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA==
 
-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:
+zustand@^3.5.13, 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==