Function Queue

web_demo/client/src/pages/Queue/Queue.tsx:19–142

()

}

export const Queue: FC = () => {
  const [searchParams] = useSearchParams();
  const overrideWorkerAddr = searchParams.get("worker_addr");
  const [hasMicrophoneAccess, setHasMicrophoneAccess] = useState<boolean>(false);
  const [showMicrophoneAccessMessage, setShowMicrophoneAccessMessage] = useState<boolean>(false);
  const [shouldConnect, setShouldConnect] = useState<boolean>(false);
  const [connectionMode, setConnectionMode] = useState<ConversationMode | null>(null);
  const [systemPrompt, setSystemPrompt] = useState<string>("");
  const modelParams = useModelParams({
    textTemperature: getFloatFromStorage(localStorage.getItem("textTemperature")),
    textTopk: getIntFromStorage(localStorage.getItem("textTopk")),
    audioTemperature: getFloatFromStorage(localStorage.getItem("audioTemperature")),
    audioTopk: getIntFromStorage(localStorage.getItem("audioTopk")),
    padMult: getFloatFromStorage(localStorage.getItem("padMult")),
    repetitionPenalty: getFloatFromStorage(localStorage.getItem("repetitionPenalty")),
    repetitionPenaltyContext: getIntFromStorage(localStorage.getItem("repetitionPenaltyContext")),
    imageResolution: getIntFromStorage(localStorage.getItem("imageResolution"))
  });

  const audioContext = useRef<AudioContext | null>(null);
  const worklet = useRef<AudioWorkletNode | null>(null);
  // enable eruda in development
  useEffect(() => {
    if (env.VITE_ENV === "development") {
      eruda.init();
    }
    () => {
      if (env.VITE_ENV === "development") {
        eruda.destroy();
      }
    };
  }, []);

  const getMicrophoneAccess = useCallback(async () => {
    try {
      await window.navigator.mediaDevices.getUserMedia({ audio: true });
      setHasMicrophoneAccess(true);
      return true;
    } catch (e) {
      console.error(e);
      setShowMicrophoneAccessMessage(true);
      setHasMicrophoneAccess(false);
    }
    return false;
  }, [setHasMicrophoneAccess, setShowMicrophoneAccessMessage]);

  const startProcessor = useCallback(async () => {
    if (!audioContext.current) {
      audioContext.current = new AudioContext();
    }
    if (worklet.current) {
      return;
    }
    let ctx = audioContext.current;
    ctx.resume();
    try {
      worklet.current = new AudioWorkletNode(ctx, 'moshi-processor');
    } catch (err) {