add voice chat

app/constants.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export default {
+    SAMPLING_RATE: 16000,
+    DEFAULT_MODEL: "Xenova/whisper-tiny",
+    DEFAULT_SUBTASK: "transcribe",
+    DEFAULT_LANGUAGE: "english",
+    DEFAULT_QUANTIZED: false,
+    DEFAULT_MULTILINGUAL: false,
+};

app/hooks/useAudioManager.ts

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState, useCallback } from 'react';
+import constants from '../constants';
+
+const useAudioManager = () => {
+    const [progress, setProgress] = useState<number | undefined>(undefined);
+    const [audioData, setAudioData] = useState<{
+        buffer: AudioBuffer;
+        url: string;
+        source: any;
+        mimeType: string;
+    } | undefined>(undefined);
+
+    // Reset the audio data
+    const resetAudio = useCallback(() => {
+        setAudioData(undefined);
+    }, []);
+
+    // Set audio from a Blob (e.g., from recording)
+    const setAudioFromRecording = useCallback(async (data: Blob) => {
+        resetAudio();
+        setProgress(0);
+        const blobUrl = URL.createObjectURL(data);
+        const audioCTX = new AudioContext({sampleRate: constants.SAMPLING_RATE, });
+        const arrayBuffer = await data.arrayBuffer();
+        const decoded = await audioCTX.decodeAudioData(arrayBuffer);
+        setProgress(undefined);
+        setAudioData({
+            buffer: decoded,
+            url: blobUrl,
+            source: "RECORDING",
+            mimeType: data.type,
+        });
+    }, [resetAudio]);
+
+    // Other functionalities (e.g., setAudioFromDownload, downloadAudioFromUrl)
+    // can be added similarly based on your requirements
+
+    return {
+        audioData,
+        progress,
+        setAudioFromRecording,
+        // Export other functions as needed
+    };
+};
+
+export default useAudioManager;

app/hooks/useSpeechRecognition.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useTranscriber } from "./useTranscriber";
+
+const useSpeechRecognition = () => {
+    const [recognizedText, setRecognizedText] = useState('');
+    const transcriber = useTranscriber();
+
+    const startListening = useCallback((audioData: any) => {
+        if (!transcriber.isBusy && !transcriber.isModelLoading) {
+            transcriber.start(audioData);
+        }
+    }, [transcriber]);
+
+    const stopListening = useCallback(() => {
+        console.log("Stopped listening...", recognizedText);
+    }, [recognizedText]); // Updated dependency array
+
+    useEffect(() => {
+        if (transcriber.output && !transcriber.isBusy) {
+            setRecognizedText(transcriber.output.text);
+        }
+    }, [transcriber.output, transcriber.isBusy]);
+
+    return { startListening, stopListening, recognizedText };
+};
+
+export default useSpeechRecognition;

app/hooks/useTranscriber.ts

@@ -0,0 +1,217 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { useWorker } from "./useWorker";
+import Constants from "../constants";
+
+interface ProgressItem {
+    file: string;
+    loaded: number;
+    progress: number;
+    total: number;
+    name: string;
+    status: string;
+}
+
+interface TranscriberUpdateData {
+    data: [
+        string,
+        { chunks: { text: string; timestamp: [number, number | null] }[] },
+    ];
+    text: string;
+}
+
+interface TranscriberCompleteData {
+    data: {
+        text: string;
+        chunks: { text: string; timestamp: [number, number | null] }[];
+    };
+}
+
+export interface TranscriberData {
+    isBusy: boolean;
+    text: string;
+    chunks: { text: string; timestamp: [number, number | null] }[];
+}
+
+export interface Transcriber {
+    onInputChange: () => void;
+    isBusy: boolean;
+    isModelLoading: boolean;
+    progressItems: ProgressItem[];
+    start: (audioData: AudioBuffer | undefined) => void;
+    output?: TranscriberData;
+    model: string;
+    setModel: (model: string) => void;
+    multilingual: boolean;
+    setMultilingual: (model: boolean) => void;
+    quantized: boolean;
+    setQuantized: (model: boolean) => void;
+    subtask: string;
+    setSubtask: (subtask: string) => void;
+    language?: string;
+    setLanguage: (language: string) => void;
+}
+
+export function useTranscriber(): Transcriber {
+    const [transcript, setTranscript] = useState<TranscriberData | undefined>(
+        undefined,
+    );
+    const [isBusy, setIsBusy] = useState(false);
+    const [isModelLoading, setIsModelLoading] = useState(false);
+
+    const [progressItems, setProgressItems] = useState<ProgressItem[]>([]);
+
+    const webWorker = useWorker((event) => {
+        const message = event.data;
+        // Update the state with the result
+        switch (message.status) {
+            case "progress":
+                // Model file progress: update one of the progress items.
+                setProgressItems((prev) =>
+                    prev.map((item) => {
+                        if (item.file === message.file) {
+                            return { ...item, progress: message.progress };
+                        }
+                        return item;
+                    }),
+                );
+                break;
+            case "update":
+                // Received partial update
+                // console.log("update", message);
+                // eslint-disable-next-line no-case-declarations
+                const updateMessage = message as TranscriberUpdateData;
+                setTranscript({
+                    isBusy: true,
+                    text: updateMessage.data[0],
+                    chunks: updateMessage.data[1].chunks,
+                });
+                break;
+            case "complete":
+                // Received complete transcript
+                // console.log("complete", message);
+                // eslint-disable-next-line no-case-declarations
+                const completeMessage = message as TranscriberCompleteData;
+                setTranscript({
+                    isBusy: false,
+                    text: completeMessage.data.text,
+                    chunks: completeMessage.data.chunks,
+                });
+                setIsBusy(false);
+                break;
+
+            case "initiate":
+                // Model file start load: add a new progress item to the list.
+                setIsModelLoading(true);
+                setProgressItems((prev) => [...prev, message]);
+                break;
+            case "ready":
+                setIsModelLoading(false);
+                break;
+            case "error":
+                setIsBusy(false);
+                alert(
+                    `${message.data.message} This is most likely because you are using Safari on an M1/M2 Mac. Please try again from Chrome, Firefox, or Edge.\n\nIf this is not the case, please file a bug report.`,
+                );
+                break;
+            case "done":
+                // Model file loaded: remove the progress item from the list.
+                setProgressItems((prev) =>
+                    prev.filter((item) => item.file !== message.file),
+                );
+                break;
+
+            default:
+                // initiate/download/done
+                break;
+        }
+    });
+
+    const [model, setModel] = useState<string>(Constants.DEFAULT_MODEL);
+    const [subtask, setSubtask] = useState<string>(Constants.DEFAULT_SUBTASK);
+    const [quantized, setQuantized] = useState<boolean>(
+        Constants.DEFAULT_QUANTIZED,
+    );
+    const [multilingual, setMultilingual] = useState<boolean>(
+        Constants.DEFAULT_MULTILINGUAL,
+    );
+    const [language, setLanguage] = useState<string>(
+        Constants.DEFAULT_LANGUAGE,
+    );
+
+    const onInputChange = useCallback(() => {
+        setTranscript(undefined);
+    }, []);
+
+    const postRequest = useCallback(
+        async (audioData: AudioBuffer | undefined) => {
+            if (audioData) {
+                setTranscript(undefined);
+                setIsBusy(true);
+
+                let audio;
+                if (audioData.numberOfChannels === 2) {
+                    const SCALING_FACTOR = Math.sqrt(2);
+
+                    let left = audioData.getChannelData(0);
+                    let right = audioData.getChannelData(1);
+
+                    audio = new Float32Array(left.length);
+                    for (let i = 0; i < audioData.length; ++i) {
+                        audio[i] = SCALING_FACTOR * (left[i] + right[i]) / 2;
+                    }
+                } else {
+                    // If the audio is not stereo, we can just use the first channel:
+                    audio = audioData.getChannelData(0);
+                }
+
+                webWorker.postMessage({
+                    audio,
+                    model,
+                    multilingual,
+                    quantized,
+                    subtask: multilingual ? subtask : null,
+                    language:
+                        multilingual && language !== "auto" ? language : null,
+                });
+            }
+        },
+        [webWorker, model, multilingual, quantized, subtask, language],
+    );
+
+    const transcriber = useMemo(() => {
+        return {
+            onInputChange,
+            isBusy,
+            isModelLoading,
+            progressItems,
+            start: postRequest,
+            output: transcript,
+            model,
+            setModel,
+            multilingual,
+            setMultilingual,
+            quantized,
+            setQuantized,
+            subtask,
+            setSubtask,
+            language,
+            setLanguage,
+        };
+    }, [
+        onInputChange,
+        isBusy,
+        isModelLoading,
+        progressItems,
+        postRequest,
+        transcript,
+        model,
+        multilingual,
+        quantized,
+        subtask,
+        language,
+    ]);
+
+    return transcriber;
+}

app/hooks/useWorker.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from "react";
+
+export interface MessageEventHandler {
+    (event: MessageEvent): void;
+}
+
+export function useWorker(messageEventHandler: MessageEventHandler): Worker | any {
+    // Create new worker once and never again
+    const [worker] = useState(() => createWorker(messageEventHandler));
+
+    return worker;
+}
+
+
+function createWorker(messageEventHandler: MessageEventHandler): Worker | null {
+    if (typeof window === 'undefined') {
+        // We're running in a non-browser environment (like the server side of Next.js)
+        return null;
+    }
+
+    const worker = new Worker(new URL("../worker.js", import.meta.url), {
+        type: "module",
+    });
+
+    worker.addEventListener("message", messageEventHandler);
+    return worker;
+}

app/input.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useRef } from 'react';
+import MicIcon from '@mui/icons-material/Mic';
+import StopIcon from '@mui/icons-material/Stop';
+import styles from './page.module.css';
+
+import useSpeechRecognition from './hooks/useSpeechRecognition';
+import useAudioManager from './hooks/useAudioManager';
+
+const getMimeType = (): string | null => {
+    const types = ["audio/webm", "audio/mp4", "audio/ogg", "audio/wav", "audio/aac"];
+    for (let type of types) {
+        if (MediaRecorder.isTypeSupported(type)) {
+            return type;
+        }
+    }
+    return null;
+};
+
+interface VoiceInputFormProps {
+    handleSubmit: any;
+    input: string;
+    setInput: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, setInput }) => {
+    const [isRecording, setIsRecording] = useState(false);
+    const { startListening, stopListening, recognizedText } = useSpeechRecognition();
+    const { setAudioFromRecording } = useAudioManager();
+
+    const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+    const audioChunksRef = useRef<BlobPart[]>([]);
+
+    useEffect(() => {
+        if (recognizedText) {
+            setInput(recognizedText);
+        }
+    }, [recognizedText, setInput]);
+
+    const startRecording = async () => {
+        try {
+            const mimeType = getMimeType();
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            mediaRecorderRef.current = new MediaRecorder(stream, { mimeType: mimeType ?? undefined });
+            audioChunksRef.current = [];
+
+            mediaRecorderRef.current.ondataavailable = (event: BlobEvent) => {
+                audioChunksRef.current.push(event.data);
+            };
+
+            mediaRecorderRef.current.start();
+        } catch (err) {
+            console.error("Error accessing media devices:", err);
+        }
+    };
+
+    const stopRecording = async (): Promise<Blob> => {
+        return new Promise((resolve, reject) => {
+            const recorder = mediaRecorderRef.current;
+            if (recorder && recorder.state === "recording") {
+                recorder.onstop = () => {
+                    const audioBlob = new Blob(audioChunksRef.current, { 'type': recorder.mimeType });
+                    audioChunksRef.current = [];
+                    resolve(audioBlob);
+                };
+                recorder.stop();
+            } else {
+                reject(new Error("MediaRecorder is not recording"));
+            }
+        });
+    };
+
+    const handleRecording = async () => {
+        if (isRecording) {
+            stopListening();
+            const recordedBlob = await stopRecording(); 
+            setAudioFromRecording(recordedBlob);
+            const audioBuffer = await convertBlobToAudioBuffer(recordedBlob);
+            startListening(audioBuffer);
+        } else {
+            startRecording();
+        }
+        setIsRecording(!isRecording);
+    };
+
+    return (
+        <div>
+            <form onSubmit={handleSubmit} className={styles.form}>
+                <input
+                    type="text"
+                    value={input}
+                    className={styles.input}
+                    onChange={(e) => setInput(e.target.value)}
+                    placeholder="Speak or type..."
+                />
+            </form>
+            <button onClick={handleRecording} className={styles.button}>
+                {isRecording ? <StopIcon /> : <MicIcon />}
+            </button>
+        </div>
+    );
+};
+
+const convertBlobToAudioBuffer = async (blob: Blob): Promise<AudioBuffer> => {
+    const audioContext = new AudioContext();
+    const arrayBuffer = await blob.arrayBuffer();
+    return await audioContext.decodeAudioData(arrayBuffer);
+};
+
+export default VoiceInputForm;

app/page.tsx

@@ -9,6 +9,7 @@ import { Bot, User } from "lucide-react";
 import { toast } from 'sonner';
 import { FunctionIcon } from './icons';
 import { updateBackground } from './util';
+import Input from './input';
 
 const Page: React.FC = () => {
   useEffect(() => {
@@ -164,18 +165,7 @@ const Page: React.FC = () => {
           })
         ) : null}
       </div>
-      <form onSubmit={handleSubmit} className={styles.form}>
-        <input
-          type="text"
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder="Chat with Internet"
-          className={styles.input}
-        />
-        <button type="submit" className={styles.button} disabled={isLoading}>
-          {isLoading ? 'Loading...' : 'Send'}
-        </button>
-      </form>
+      <Input handleSubmit={handleSubmit as any} setInput={setInput} input={input} />
     </main>
   );
 }

app/worker.js

@@ -0,0 +1,184 @@
+"use client"
+
+/* eslint-disable camelcase */
+import { pipeline, env } from "@xenova/transformers";
+
+// Disable local models
+env.allowLocalModels = false;
+
+// Define model factories
+// Ensures only one model is created of each type
+class PipelineFactory {
+    static task = null;
+    static model = null;
+    static quantized = null;
+    static instance = null;
+
+    constructor(tokenizer, model, quantized) {
+        this.tokenizer = tokenizer;
+        this.model = model;
+        this.quantized = quantized;
+    }
+
+    static async getInstance(progress_callback = null) {
+        if (this.instance === null) {
+            this.instance = pipeline(this.task, this.model, {
+                quantized: this.quantized,
+                progress_callback,
+
+                // For medium models, we need to load the `no_attentions` revision to avoid running out of memory
+                revision: this.model.includes("/whisper-medium") ? "no_attentions" : "main"
+            });
+        }
+
+        return this.instance;
+    }
+}
+
+self.addEventListener("message", async (event) => {
+    const message = event.data;
+
+    // Do some work...
+    // TODO use message data
+    let transcript = await transcribe(
+        message.audio,
+        message.model,
+        message.multilingual,
+        message.quantized,
+        message.subtask,
+        message.language,
+    );
+    if (transcript === null) return;
+
+    // Send the result back to the main thread
+    self.postMessage({
+        status: "complete",
+        task: "automatic-speech-recognition",
+        data: transcript,
+    });
+});
+
+class AutomaticSpeechRecognitionPipelineFactory extends PipelineFactory {
+    static task = "automatic-speech-recognition";
+    static model = null;
+    static quantized = null;
+}
+
+const transcribe = async (
+    audio,
+    model,
+    multilingual,
+    quantized,
+    subtask,
+    language,
+) => {
+
+    const isDistilWhisper = model.startsWith("distil-whisper/");
+
+    let modelName = model;
+    if (!isDistilWhisper && !multilingual) {
+        modelName += ".en"
+    }
+
+    const p = AutomaticSpeechRecognitionPipelineFactory;
+    if (p.model !== modelName || p.quantized !== quantized) {
+        // Invalidate model if different
+        p.model = modelName;
+        p.quantized = quantized;
+
+        if (p.instance !== null) {
+            (await p.getInstance()).dispose();
+            p.instance = null;
+        }
+    }
+
+    // Load transcriber model
+    let transcriber = await p.getInstance((data) => {
+        self.postMessage(data);
+    });
+
+    const time_precision =
+        transcriber.processor.feature_extractor.config.chunk_length /
+        transcriber.model.config.max_source_positions;
+
+    // Storage for chunks to be processed. Initialise with an empty chunk.
+    let chunks_to_process = [
+        {
+            tokens: [],
+            finalised: false,
+        },
+    ];
+
+    // TODO: Storage for fully-processed and merged chunks
+    // let decoded_chunks = [];
+
+    function chunk_callback(chunk) {
+        let last = chunks_to_process[chunks_to_process.length - 1];
+
+        // Overwrite last chunk with new info
+        Object.assign(last, chunk);
+        last.finalised = true;
+
+        // Create an empty chunk after, if it not the last chunk
+        if (!chunk.is_last) {
+            chunks_to_process.push({
+                tokens: [],
+                finalised: false,
+            });
+        }
+    }
+
+    // Inject custom callback function to handle merging of chunks
+    function callback_function(item) {
+        let last = chunks_to_process[chunks_to_process.length - 1];
+
+        // Update tokens of last chunk
+        last.tokens = [...item[0].output_token_ids];
+
+        // Merge text chunks
+        // TODO optimise so we don't have to decode all chunks every time
+        let data = transcriber.tokenizer._decode_asr(chunks_to_process, {
+            time_precision: time_precision,
+            return_timestamps: true,
+            force_full_sequences: false,
+        });
+
+        self.postMessage({
+            status: "update",
+            task: "automatic-speech-recognition",
+            data: data,
+        });
+    }
+
+    // Actually run transcription
+    let output = await transcriber(audio, {
+        // Greedy
+        top_k: 0,
+        do_sample: false,
+
+        // Sliding window
+        chunk_length_s: isDistilWhisper ? 20 : 30,
+        stride_length_s: isDistilWhisper ? 3 : 5,
+
+        // Language and task
+        language: language,
+        task: subtask,
+
+        // Return timestamps
+        return_timestamps: true,
+        force_full_sequences: false,
+
+        // Callback functions
+        callback_function: callback_function, // after each generation step
+        chunk_callback: chunk_callback, // after each chunk is processed
+    }).catch((error) => {
+        self.postMessage({
+            status: "error",
+            task: "automatic-speech-recognition",
+            data: error,
+        });
+        return null;
+    });
+
+    return output;
+};

next.config.js

@@ -1,6 +1,17 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: "standalone"
+    output: "standalone",
+    // Custom Webpack configuration
+    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+        // Add the node-loader for handling .node files
+        config.module.rules.push({
+            test: /\.node$/,
+            loader: 'node-loader',
+        });
+
+        // Return the modified config
+        return config;
+    },
 }
 
 module.exports = nextConfig

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^5.14.19",
         "@mui/material": "^5.14.16",
         "@upstash/ratelimit": "^0.4.4",
         "@vercel/kv": "^0.2.4",
@@ -43,6 +44,7 @@
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "14.0.1",
+        "node-loader": "^2.0.0",
         "typescript": "^5"
       }
     },
@@ -323,9 +325,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
-      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -634,6 +636,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -690,6 +703,31 @@
         "url": "https://opencollective.com/mui"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.19.tgz",
+      "integrity": "sha512-yjP8nluXxZGe3Y7pS+yxBV+hWZSsSBampCxkZwaw+1l+feL+rfP74vbEFbMrX/Kil9I/Y1tWfy5bs/eNvwNpWw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.14.16",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.16.tgz",
@@ -1186,6 +1224,28 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/eslint": {
+      "version": "8.44.8",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.8.tgz",
+      "integrity": "sha512-4K8GavROwhrYl2QXDXm0Rv9epkA8GBFu0EI+XrrnnuCl7u8CWBRusX7fXJfanhZTDWSAL24gDI/UqXyUM0Injw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.4.tgz",
@@ -1211,6 +1271,13 @@
         "parse5": "^7.0.0"
       }
     },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1615,6 +1682,167 @@
       "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==",
       "peer": true
     },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
+      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
+      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
+      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/helper-wasm-section": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-opt": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6",
+        "@webassemblyjs/wast-printer": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
+      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
+      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
+      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
+      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
     "node_modules/@xenova/transformers": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/@xenova/transformers/-/transformers-2.7.0.tgz",
@@ -1627,6 +1855,20 @@
         "onnxruntime-node": "1.14.0"
       }
     },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -1654,6 +1896,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-import-assertions": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
+      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+      "dev": true,
+      "peer": true,
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -1738,6 +1990,16 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peer": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2041,6 +2303,15 @@
         }
       ]
     },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -2091,6 +2362,39 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
+      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001541",
+        "electron-to-chromium": "^1.4.535",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.13"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -2122,6 +2426,13 @@
         "node": "*"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -2259,6 +2570,16 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
     },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
     "node_modules/chromium-bidi": {
       "version": "0.4.7",
       "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.4.7.tgz",
@@ -2802,12 +3123,28 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.601",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.601.tgz",
+      "integrity": "sha512-SpwUMDWe9tQu8JX5QCO1+p/hChAi9AE9UpoC3rcHVc+gdCGlbT3SGb5I1klgb952HRIyvt9wZhSz9bNBYz9swA==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -2923,6 +3260,13 @@
         "safe-array-concat": "^1.0.1"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+      "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
@@ -3426,6 +3770,16 @@
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/eventsource-parser": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-1.0.0.tgz",
@@ -4626,6 +4980,37 @@
         "set-function-name": "^2.0.1"
       }
     },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/js-tiktoken": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-tiktoken/-/js-tiktoken-1.0.7.tgz",
@@ -5313,6 +5698,42 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/loader-runner": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.11.5"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/loader-utils/node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/locate-character": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -5457,6 +5878,13 @@
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
       "peer": true
     },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6052,6 +6480,13 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/next": {
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/next/-/next-14.0.1.tgz",
@@ -6153,6 +6588,32 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/node-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/node-loader/-/node-loader-2.0.0.tgz",
+      "integrity": "sha512-I5VN34NO4/5UYJaUBtkrODPWxbobrE4hgDqPrjB25yPkonFhCmZ146vTH+Zg417E9Iwoh1l/MbRs1apc5J295Q==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -6865,6 +7326,16 @@
       "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
       "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
     },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -7224,6 +7695,25 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -7238,6 +7728,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
     "node_modules/seroval": {
       "version": "0.12.3",
       "resolved": "https://registry.npmjs.org/seroval/-/seroval-0.12.3.tgz",
@@ -7470,6 +7970,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/space-separated-tokens": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
@@ -7787,6 +8308,67 @@
         "node": ">=6"
       }
     },
+    "node_modules/terser": {
+      "version": "5.24.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz",
+      "integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.9",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz",
+      "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.1",
+        "terser": "^5.16.8"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -8167,6 +8749,37 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -8297,6 +8910,88 @@
         "node": ">=12"
       }
     },
+    "node_modules/webpack": {
+      "version": "5.89.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz",
+      "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^1.0.0",
+        "@webassemblyjs/ast": "^1.11.5",
+        "@webassemblyjs/wasm-edit": "^1.11.5",
+        "@webassemblyjs/wasm-parser": "^1.11.5",
+        "acorn": "^8.7.1",
+        "acorn-import-assertions": "^1.9.0",
+        "browserslist": "^4.14.5",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.15.0",
+        "es-module-lexer": "^1.2.1",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.2.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.3.7",
+        "watchpack": "^2.4.0",
+        "webpack-sources": "^3.2.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/webpack/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.16",
     "@upstash/ratelimit": "^0.4.4",
     "@vercel/kv": "^0.2.4",
@@ -44,6 +45,7 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.0.1",
+    "node-loader": "^2.0.0",
     "typescript": "^5"
   }
 }

tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/worker.js"],
   "exclude": ["node_modules"]
 }