Spaces:

webml-community
/

Supertonic-TTS-WebGPU

Running

App Files Files Community

Xenova HF Staff commited on 18 days ago

Commit

2beb552

verified ·

1 Parent(s): bf785c9

Upload 18 files

Browse files

Files changed (18) hide show

eslint.config.js +23 -0
index.html +16 -0
package.json +34 -0
public/the-great-gatsby.txt +0 -0
src/App.tsx +416 -0
src/components/AudioResult.tsx +139 -0
src/components/Controls.tsx +139 -0
src/components/TTSContext.tsx +20 -0
src/components/TTSProvider.tsx +45 -0
src/constants.ts +22 -0
src/index.css +1 -0
src/main.tsx +10 -0
src/splitter.ts +417 -0
src/tts.ts +121 -0
tsconfig.app.json +28 -0
tsconfig.json +4 -0
tsconfig.node.json +26 -0
vite.config.ts +8 -0

eslint.config.js ADDED Viewed

	@@ -0,0 +1,23 @@

+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

index.html ADDED Viewed

	@@ -0,0 +1,16 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡️</text></svg>"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Supertonic WebGPU</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json ADDED Viewed

	@@ -0,0 +1,34 @@

+{
+  "name": "supertonic-webgpu",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "^3.8.0",
+    "@tailwindcss/vite": "^4.1.17",
+    "lucide-react": "^0.554.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.1.17"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.2.2"
+  }
+}

public/the-great-gatsby.txt ADDED Viewed

The diff for this file is too large to render. See raw diff

src/App.tsx ADDED Viewed

	@@ -0,0 +1,416 @@

+import { useState, useEffect, useRef } from "react";
+import { Zap, AlignLeft, Quote, Type, FileText, Check, X, Dices } from "lucide-react";
+import { useTTS } from "./components/TTSContext";
+import { TTSProvider } from "./components/TTSProvider";
+import { streamTTS, createAudioBlob } from "./tts";
+import { SAMPLE_RATE, EXAMPLE_SENTENCES } from "./constants";
+import { AudioResult } from "./components/AudioResult";
+import { Controls } from "./components/Controls";
+const AppContent = () => {
+  const [text, setText] = useState(
+    "Introducing Supertonic WebGPU: blazingly fast text-to-speech running 100% locally in your browser.",
+  );
+  const [activeTab, setActiveTab] = useState<string | null>("Freeform");
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+  const [quality, setQuality] = useState(5);
+  const [speed, setSpeed] = useState(1.0);
+  const [voice, setVoice] = useState("Female");
+  const { pipelineReady, tts, speakerEmbeddings, downloadProgress } = useTTS();
+  const [stats, setStats] = useState({
+    firstLatency: null as number | null,
+    processingTime: 0,
+    charsPerSec: 0,
+    rtf: 0,
+    totalDuration: 0,
+    currentDuration: 0,
+  });
+  const [generationProgress, setGenerationProgress] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const nextPlayTimeRef = useRef<number>(0);
+  const fullAudioBufferRef = useRef<Float32Array[]>([]);
+  const playbackStartTimeRef = useRef<number>(0);
+  const playbackAnimationFrameRef = useRef<number>(0);
+  const activeSourceNodesRef = useRef<AudioBufferSourceNode[]>([]);
+  const isPlaybackInterruptedRef = useRef(false);
+  const stopGenerationRef = useRef(false);
+  const [exampleTexts, setExampleTexts] = useState<Record<string, string | string[]>>(EXAMPLE_SENTENCES);
+  useEffect(() => {
+    fetch("/the-great-gatsby.txt")
+      .then((res) => res.text())
+      .then((text) => {
+        setExampleTexts((prev) => ({ ...prev, "Full story": text }));
+      })
+      .catch((e) => console.error("Failed to load story", e));
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (audioContextRef.current) {
+        audioContextRef.current.close();
+      }
+      cancelAnimationFrame(playbackAnimationFrameRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    const updatePlaybackUI = () => {
+      if (isPlaying && audioContextRef.current) {
+        const ctx = audioContextRef.current;
+        const elapsed = ctx.currentTime - playbackStartTimeRef.current;
+        // If reached end of current known duration
+        if (elapsed >= stats.totalDuration && !isGenerating && stats.totalDuration > 0) {
+          setIsPlaying(false);
+          setStats((prev) => ({
+            ...prev,
+            currentDuration: prev.totalDuration,
+          })); // Snap to end
+          return;
+        }
+        setStats((prev) => ({
+          ...prev,
+          currentDuration: Math.min(elapsed, prev.totalDuration),
+        }));
+        playbackAnimationFrameRef.current = requestAnimationFrame(updatePlaybackUI);
+      }
+    };
+    if (isPlaying) {
+      playbackAnimationFrameRef.current = requestAnimationFrame(updatePlaybackUI);
+    } else {
+      cancelAnimationFrame(playbackAnimationFrameRef.current);
+    }
+  }, [isPlaying, isGenerating, stats.totalDuration]);
+  const handleExampleClick = (type: string) => {
+    setActiveTab(type);
+    let selection = exampleTexts[type];
+    if (Array.isArray(selection)) {
+      setText(selection[Math.floor(Math.random() * selection.length)]);
+      return;
+    }
+    setText(selection);
+  };
+  const stopAllAudio = () => {
+    activeSourceNodesRef.current.forEach((node) => {
+      try {
+        node.stop();
+      } catch (e) {}
+    });
+    activeSourceNodesRef.current = [];
+  };
+  const handleStop = () => {
+    stopGenerationRef.current = true;
+  };
+  const handleGenerate = async () => {
+    if (isGenerating) return;
+    stopAllAudio();
+    setShowResults(true);
+    setIsGenerating(true);
+    setGenerationProgress(0);
+    stopGenerationRef.current = false;
+    setStats({
+      firstLatency: null,
+      processingTime: 0,
+      charsPerSec: 0,
+      rtf: 0,
+      totalDuration: 0,
+      currentDuration: 0,
+    });
+    fullAudioBufferRef.current = [];
+    isPlaybackInterruptedRef.current = false;
+    if (!audioContextRef.current) {
+      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
+    }
+    const ctx = audioContextRef.current;
+    if (ctx.state === "suspended") {
+      await ctx.resume();
+    }
+    nextPlayTimeRef.current = ctx.currentTime + 0.1;
+    playbackStartTimeRef.current = nextPlayTimeRef.current;
+    setIsPlaying(true);
+    const startTime = performance.now();
+    let processedChars = 0;
+    let generatedAudioSeconds = 0;
+    try {
+      if (!tts.current || !speakerEmbeddings.current) throw new Error("TTS pipeline not ready");
+      const selectedEmbedding = speakerEmbeddings.current[voice];
+      for await (const result of streamTTS(text, tts.current, selectedEmbedding, quality, speed)) {
+        if (stopGenerationRef.current) {
+          break;
+        }
+        const now = performance.now();
+        const elapsedSec = (now - startTime) / 1000;
+        setStats((prev) => ({
+          ...prev,
+          firstLatency: prev.firstLatency === null ? elapsedSec : prev.firstLatency,
+          processingTime: elapsedSec,
+        }));
+        const chunkDuration = result.audio.audio.length / result.audio.sampling_rate;
+        generatedAudioSeconds += chunkDuration;
+        fullAudioBufferRef.current.push(result.audio.audio);
+        // Only schedule streaming playback if user hasn't interrupted
+        if (!isPlaybackInterruptedRef.current) {
+          const buffer = ctx.createBuffer(1, result.audio.audio.length, result.audio.sampling_rate);
+          buffer.copyToChannel(result.audio.audio as any, 0);
+          const source = ctx.createBufferSource();
+          source.buffer = buffer;
+          source.connect(ctx.destination);
+          source.start(nextPlayTimeRef.current);
+          activeSourceNodesRef.current.push(source);
+          source.onended = () => {
+            const idx = activeSourceNodesRef.current.indexOf(source);
+            if (idx > -1) activeSourceNodesRef.current.splice(idx, 1);
+          };
+          nextPlayTimeRef.current += buffer.duration;
+        }
+        processedChars += result.text.length;
+        const currentRtf = elapsedSec / generatedAudioSeconds;
+        const currentCharsPerSec = processedChars / elapsedSec;
+        setStats((prev) => ({
+          ...prev,
+          charsPerSec: currentCharsPerSec,
+          rtf: currentRtf,
+          totalDuration: generatedAudioSeconds,
+        }));
+        setGenerationProgress((result.index / result.total) * 100);
+      }
+    } catch (e) {
+      console.error("Generation failed", e);
+    } finally {
+      setIsGenerating(false);
+      isPlaybackInterruptedRef.current = false; // Reset after completion
+    }
+  };
+  const handleSeek = (percentage: number) => {
+    if (!audioContextRef.current || fullAudioBufferRef.current.length === 0) return;
+    const ctx = audioContextRef.current;
+    isPlaybackInterruptedRef.current = true;
+    stopAllAudio();
+    const seekTime = stats.totalDuration * percentage;
+    let currentTimeInAudio = 0;
+    let nextPlayTime = ctx.currentTime;
+    // Reset startTime such that (currentTime - startTime) = seekTime
+    playbackStartTimeRef.current = ctx.currentTime - seekTime;
+    for (const chunk of fullAudioBufferRef.current) {
+      const chunkDuration = chunk.length / SAMPLE_RATE;
+      const chunkEndTime = currentTimeInAudio + chunkDuration;
+      if (chunkEndTime > seekTime) {
+        // This chunk needs to be played
+        const offsetInChunk = Math.max(0, seekTime - currentTimeInAudio);
+        const durationToPlay = chunkDuration - offsetInChunk;
+        const buffer = ctx.createBuffer(1, chunk.length, SAMPLE_RATE);
+        buffer.copyToChannel(chunk as any, 0);
+        const source = ctx.createBufferSource();
+        source.buffer = buffer;
+        source.connect(ctx.destination);
+        source.start(nextPlayTime, offsetInChunk);
+        activeSourceNodesRef.current.push(source);
+        source.onended = () => {
+          const idx = activeSourceNodesRef.current.indexOf(source);
+          if (idx > -1) activeSourceNodesRef.current.splice(idx, 1);
+        };
+        nextPlayTime += durationToPlay;
+      }
+      currentTimeInAudio += chunkDuration;
+    }
+    if (ctx.state === "suspended") ctx.resume();
+    setIsPlaying(true);
+  };
+  const handleDownload = () => {
+    if (fullAudioBufferRef.current.length === 0) return;
+    const blob = createAudioBlob(fullAudioBufferRef.current, SAMPLE_RATE);
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "audio.wav";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const togglePlay = async () => {
+    if (!audioContextRef.current) return;
+    if (isPlaying) {
+      setIsPlaying(false);
+      audioContextRef.current.suspend();
+    } else {
+      setIsPlaying(true);
+      audioContextRef.current.resume();
+      // If we finished playing and hit play again, replay from start
+      if (!isGenerating && stats.currentDuration >= stats.totalDuration) {
+        handleSeek(0);
+      } else if (!isGenerating && fullAudioBufferRef.current.length > 0 && activeSourceNodesRef.current.length === 0) {
+        // This handles the case where we paused/stopped but haven't technically reached "end" OR we are resuming replay
+        const currentProgress = stats.totalDuration > 0 ? stats.currentDuration / stats.totalDuration : 0;
+        handleSeek(currentProgress);
+      }
+    }
+  };
+  const canGenerate = text.length >= 10 && pipelineReady;
+  return (
+    <div className="min-h-screen bg-[#F2F2F2] font-sans text-gray-900 selection:bg-yellow-200 flex items-center justify-center py-10">
+      <div className="w-full max-w-7xl px-4 md:px-6">
+        <div className="text-center mb-10">
+          <h3 className="text-4xl md:text-6xl font-medium text-gray-900 tracking-tight">Supertonic WebGPU</h3>
+          <h4 className="text-gray-600 mt-3 text-2xl md:text-3xl font-light">
+            Generate speech directly in your browser
+          </h4>
+        </div>
+        <div className="bg-white rounded-2xl shadow-2xl overflow-hidden border border-gray-100 max-w-7xl mx-auto p-2">
+          <div className="hidden md:grid grid-cols-1 md:grid-cols-2 border-b border-gray-100 bg-white relative rounded-t-xl">
+            <div className="px-8 py-6 flex items-center justify-center">
+              <div className="text-3xl font-normal text-gray-800">Text</div>
+            </div>
+            <div className="px-8 py-6 flex flex-col items-center justify-center relative bg-gray-50/30 md:bg-white">
+              <div className="text-3xl font-normal text-gray-800 mb-2">Speech</div>
+            </div>
+            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-3 rounded-full z-10 shadow-sm border border-gray-50">
+              <Zap className="text-yellow-400 fill-yellow-400 drop-shadow-sm" size={32} />
+            </div>
+          </div>
+          <div className="flex flex-col md:flex-row min-h-[450px]">
+            <div className="w-full md:w-1/2 p-8 border-r border-gray-100 flex flex-col bg-white relative">
+              <textarea
+                className="w-full flex-grow text-xl md:text-2xl text-gray-800 placeholder-gray-300 outline-none resize-none font-light leading-relaxed bg-transparent"
+                placeholder="This text-to-speech system runs entirely in your browser, providing fast and private operation without sending any data to external servers."
+                value={text}
+                onChange={(e) => {
+                  setText(e.target.value);
+                  setActiveTab("Freeform");
+                }}
+                spellCheck={false}
+              />
+              <div className="mt-auto w-full">
+                <div className="flex justify-end mb-2">
+                  <div className="flex items-center gap-2 text-xs md:text-sm font-mono text-gray-400">
+                    {text.length > 0 ? text.length : 0} chars
+                    {text.length >= 10 ? (
+                      <Check size={14} className="text-green-500" />
+                    ) : (
+                      <X size={14} className="text-red-500" />
+                    )}
+                  </div>
+                </div>
+                <div className="pt-6 flex flex-wrap items-center border-t border-gray-100 text-gray-500">
+                  <div className="flex gap-3 md:gap-5 text-sm md:text-base overflow-x-auto pb-2 md:pb-0 w-full">
+                    {Object.keys(exampleTexts).map((key) => (
+                      <button
+                        key={key}
+                        onClick={() => handleExampleClick(key)}
+                        className={`flex items-center gap-1.5 transition whitespace-nowrap ${activeTab === key ? "text-blue-600 font-semibold border-b-2 border-blue-500 pb-0.5" : "hover:text-gray-900"}`}
+                      >
+                        {key === "Quote" && <Quote size={16} />}
+                        {key === "Paragraph" && <AlignLeft size={16} />}
+                        {key === "Full story" && <FileText size={16} />}
+                        {key === "Random" && <Dices size={16} />}
+                        {key === "Freeform" && <Type size={16} />}
+                        {key}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <Controls
+              quality={quality}
+              setQuality={setQuality}
+              speed={speed}
+              setSpeed={setSpeed}
+              voice={voice}
+              setVoice={setVoice}
+              onGenerate={handleGenerate}
+              onStop={handleStop}
+              isGenerating={isGenerating}
+              canGenerate={canGenerate}
+              pipelineReady={pipelineReady}
+              progress={generationProgress}
+              loadingProgress={downloadProgress}
+            />
+          </div>
+          {showResults && (
+            <div className="px-4 pb-4">
+              <AudioResult
+                stats={stats}
+                progressPercentage={generationProgress}
+                isGenerating={isGenerating}
+                isPlaying={isPlaying}
+                onTogglePlay={togglePlay}
+                onDownload={handleDownload}
+                onSeek={handleSeek}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+const App = () => {
+  return (
+    <TTSProvider>
+      <AppContent />
+    </TTSProvider>
+  );
+};
+export default App;

src/components/AudioResult.tsx ADDED Viewed

	@@ -0,0 +1,139 @@

+import React, { useRef } from "react";
+import { Play, Pause, Download } from "lucide-react";
+interface AudioResultProps {
+  stats: {
+    firstLatency: number | null;
+    processingTime: number;
+    charsPerSec: number;
+    rtf: number;
+    totalDuration: number;
+    currentDuration: number;
+  };
+  progressPercentage: number;
+  isGenerating: boolean;
+  isPlaying: boolean;
+  onTogglePlay: () => void;
+  onDownload: () => void;
+  onSeek: (percentage: number) => void;
+}
+export const AudioResult = ({
+  stats,
+  progressPercentage,
+  isGenerating,
+  isPlaying,
+  onTogglePlay,
+  onDownload,
+  onSeek,
+}: AudioResultProps) => {
+  const progressBarRef = useRef<HTMLDivElement>(null);
+  const formatTime = (secs: number) => {
+    const minutes = Math.floor(secs / 60);
+    const seconds = (secs % 60).toFixed(2);
+    return `${minutes}:${seconds.padStart(5, "0")}`;
+  };
+  const playbackProgress =
+    stats.totalDuration > 0 ? Math.min(100, (stats.currentDuration / stats.totalDuration) * 100) : 0;
+  const handleSeekClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (progressBarRef.current) {
+      const rect = progressBarRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const percentage = Math.max(0, Math.min(1, x / rect.width));
+      onSeek(percentage);
+    }
+  };
+  return (
+    <div className="mt-8 relative rounded-xl overflow-hidden animate-in fade-in slide-in-from-top-4 duration-500 border border-gray-200">
+      <div
+        className="absolute top-0 left-0 bottom-0 bg-[#E5E7EB] transition-all duration-500 ease-out -z-10"
+        style={{ width: `${progressPercentage}%` }}
+      />
+      <div className="absolute top-0 left-0 w-full h-full bg-gray-50 -z-20" />
+      <div className="p-4 flex flex-col md:flex-row items-center gap-6 relative z-10">
+        <div className="flex flex-col min-w-[80px]">
+          <span className="text-blue-600 font-semibold text-lg leading-tight">Supertonic</span>
+          <span className="text-gray-600 text-sm font-medium">On-Device</span>
+        </div>
+        <div className="flex-1 grid grid-cols-3 gap-x-8 gap-y-1 text-center border-l border-r border-gray-300 px-4 md:px-8">
+          <div className="flex flex-col items-center">
+            <div className="font-mono text-gray-900 text-lg tracking-tight">
+              {stats.firstLatency !== null ? (
+                <>
+                  <span className="text-[10px] text-gray-500 font-sans font-bold uppercase mr-1 align-middle">
+                    First
+                  </span>
+                  {stats.firstLatency.toFixed(2)}
+                  <span className="text-sm text-gray-500">s</span>
+                  <span className="mx-1 text-gray-400">/</span>
+                </>
+              ) : null}
+              {stats.processingTime.toFixed(2)}
+              <span className="text-sm text-gray-500">s</span>
+            </div>
+            <div className="text-[10px] text-gray-500 uppercase font-bold tracking-wider mt-1">Processing Time ↓</div>
+          </div>
+          <div className="flex flex-col items-center">
+            <div className="font-mono text-gray-900 text-lg tracking-tight">
+              {stats.charsPerSec > 0 ? stats.charsPerSec.toFixed(1) : "-"}
+            </div>
+            <div className="text-[10px] text-gray-500 uppercase font-bold tracking-wider mt-1">Chars/sec ↑</div>
+          </div>
+          <div className="flex flex-col items-center">
+            <div className="font-mono text-gray-900 text-lg tracking-tight">
+              {stats.rtf > 0 ? stats.rtf.toFixed(3) : "-"}
+              <span className="text-sm text-gray-500">x</span>
+            </div>
+            <div className="text-[10px] text-gray-500 uppercase font-bold tracking-wider mt-1">RTF ↓</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-4 min-w-[300px] w-full md:w-auto">
+          <button
+            onClick={onTogglePlay}
+            className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors flex-shrink-0 text-gray-800 bg-white hover:bg-gray-100 shadow-sm`}
+          >
+            {isPlaying ? (
+              <Pause size={18} fill="currentColor" />
+            ) : (
+              <Play size={18} fill="currentColor" className="ml-0.5" />
+            )}
+          </button>
+          <span className="font-mono text-xs text-gray-600 w-[50px] text-right">
+            {formatTime(stats.currentDuration)}
+          </span>
+          <div
+            ref={progressBarRef}
+            className="relative flex-1 h-1.5 bg-gray-300 rounded-full overflow-hidden min-w-[100px] cursor-pointer hover:h-2 transition-all group"
+            onClick={handleSeekClick}
+          >
+            <div
+              className="absolute top-0 left-0 h-full bg-blue-500 rounded-full group-hover:bg-blue-600"
+              style={{ width: `${playbackProgress}%` }}
+            />
+          </div>
+          <span className="font-mono text-xs text-gray-600 w-[50px]">{formatTime(stats.totalDuration)}</span>
+          <button
+            onClick={onDownload}
+            disabled={isGenerating}
+            className={`p-2 rounded-full text-gray-700 transition-colors ${isGenerating ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-200"}`}
+          >
+            <Download size={18} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Controls.tsx ADDED Viewed

	@@ -0,0 +1,139 @@

+import { Zap, Square } from "lucide-react";
+interface ControlsProps {
+  quality: number;
+  setQuality: (value: number) => void;
+  speed: number;
+  setSpeed: (value: number) => void;
+  voice: string;
+  setVoice: (value: string) => void;
+  onGenerate: () => void;
+  onStop: () => void;
+  isGenerating: boolean;
+  canGenerate: boolean;
+  pipelineReady: boolean;
+  progress?: number;
+  loadingProgress: number;
+}
+export const Controls = ({
+  quality,
+  setQuality,
+  speed,
+  setSpeed,
+  voice,
+  setVoice,
+  onGenerate,
+  onStop,
+  isGenerating,
+  canGenerate,
+  pipelineReady,
+  progress,
+  loadingProgress,
+}: ControlsProps) => {
+  return (
+    <div className="w-full md:w-1/2 p-8 bg-[#F9FAFB] flex flex-col gap-8 border-t md:border-t-0">
+      <div className="flex items-center gap-6">
+        <span className="font-semibold text-gray-900">Voice:</span>
+        <div className="flex gap-4 text-sm">
+          {["Female", "Male"].map((v) => (
+            <button
+              key={v}
+              onClick={() => setVoice(v)}
+              className={`pb-1 transition-all font-medium border-b-2 ${
+                voice === v ? "text-blue-600 border-blue-600" : "text-gray-400 hover:text-gray-600 border-transparent"
+              }`}
+            >
+              {v}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div>
+        <div className="flex justify-between mb-3 items-end">
+          <span className="font-semibold text-gray-900 text-sm">
+            Quality (Steps): <span className="text-base">{quality}</span>
+          </span>
+          <span className="text-gray-400 text-xs italic">Higher = Better quality but slower</span>
+        </div>
+        <input
+          type="range"
+          min="1"
+          max="50"
+          value={quality}
+          onChange={(e) => setQuality(parseInt(e.target.value))}
+          className="w-full h-1.5 bg-gray-300 rounded-lg appearance-none cursor-pointer accent-gray-900 hover:accent-blue-600"
+        />
+        <div className="w-full flex justify-center mt-1">
+          <div className="w-0.5 h-1 bg-gray-300"></div>
+        </div>
+      </div>
+      <div>
+        <div className="flex justify-between mb-3 items-end">
+          <span className="font-semibold text-gray-900 text-sm">
+            Speed: <span className="text-base">{speed.toFixed(2)}x</span>
+          </span>
+          <span className="text-gray-400 text-xs italic">Higher = faster speech</span>
+        </div>
+        <input
+          type="range"
+          min="0.8"
+          max="1.2"
+          step="0.01"
+          value={speed}
+          onChange={(e) => setSpeed(parseFloat(e.target.value))}
+          className="w-full h-1.5 bg-gray-300 rounded-lg appearance-none cursor-pointer accent-gray-900 hover:accent-blue-600"
+        />
+        <div className="w-full flex justify-center mt-1">
+          <div className="w-0.5 h-1 bg-gray-300"></div>
+        </div>
+      </div>
+      <div className="mt-auto pt-4 flex gap-2">
+        <button
+          onClick={onGenerate}
+          disabled={isGenerating || !canGenerate}
+          className={`
+            flex-1 py-4 rounded-lg font-bold text-lg flex items-center justify-center gap-3 shadow-sm transition-all
+            ${
+              isGenerating || !canGenerate
+                ? "bg-gray-200 text-gray-400 cursor-not-allowed"
+                : "bg-yellow-400 text-gray-900 hover:bg-yellow-300 active:scale-[0.99]"
+            }
+          `}
+        >
+          {isGenerating ? (
+            <>
+              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-gray-400"></div>
+              <span>
+                Generating... {progress !== undefined && <span className="font-mono">({Math.round(progress)}%)</span>}
+              </span>
+            </>
+          ) : (
+            <>
+              <Zap size={20} className={!canGenerate ? "fill-gray-400" : "fill-black"} />
+              {pipelineReady ? (
+                "Generate Speech"
+              ) : (
+                <span>
+                  Loading Model...
+                  {loadingProgress > 0 && <span className="font-mono"> ({Math.round(loadingProgress)}%)</span>}
+                </span>
+              )}
+            </>
+          )}
+        </button>
+        {isGenerating && (
+          <button
+            onClick={onStop}
+            className="px-6 rounded-lg font-bold text-lg flex items-center justify-center shadow-sm transition-all bg-red-100 text-red-600 hover:bg-red-200 active:scale-[0.99]"
+          >
+            <Square size={20} fill="currentColor" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/TTSContext.tsx ADDED Viewed

	@@ -0,0 +1,20 @@

+import { createContext, useContext } from "react";
+import type { RefObject } from "react";
+import type { TextToAudioPipeline } from "@huggingface/transformers";
+export interface TTSContextType {
+  pipelineReady: boolean;
+  downloadProgress: number;
+  tts: RefObject<TextToAudioPipeline | null>;
+  speakerEmbeddings: RefObject<Record<string, Float32Array> | null>;
+}
+export const TTSContext = createContext<TTSContextType | undefined>(undefined);
+export const useTTS = () => {
+  const context = useContext(TTSContext);
+  if (context === undefined) {
+    throw new Error("useTTS must be used within a TTSProvider");
+  }
+  return context;
+};

src/components/TTSProvider.tsx ADDED Viewed

	@@ -0,0 +1,45 @@

+import { useState, useEffect, useRef } from "react";
+import { loadPipeline, loadEmbeddings } from "../tts";
+import { TTSContext } from "./TTSContext";
+import type { ReactNode } from "react";
+import type { TextToAudioPipeline } from "@huggingface/transformers";
+export const TTSProvider = ({ children }: { children: ReactNode }) => {
+  const [pipelineReady, setPipelineReady] = useState(false);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const tts = useRef<TextToAudioPipeline | null>(null);
+  const speakerEmbeddings = useRef<Record<string, Float32Array> | null>(null);
+  useEffect(() => {
+    if (pipelineReady) return;
+    const progressMap = new Map<string, number>();
+    const onProgress = (info: any) => {
+      if (info.status === "progress" && info.file.endsWith(".onnx_data")) {
+        progressMap.set(info.file, info.loaded / info.total);
+        const total = Array.from(progressMap.values()).reduce((a, b) => a + b, 0);
+        setDownloadProgress((total / 3) * 100); // 3 model files to download
+      }
+    };
+    Promise.all([loadPipeline(onProgress), loadEmbeddings()]).then(([pipeline, embeddings]) => {
+      tts.current = pipeline;
+      speakerEmbeddings.current = embeddings;
+      setPipelineReady(true);
+    });
+  }, [pipelineReady]);
+  return (
+    <TTSContext.Provider
+      value={{
+        pipelineReady,
+        downloadProgress,
+        tts,
+        speakerEmbeddings,
+      }}
+    >
+      {children}
+    </TTSContext.Provider>
+  );
+};

src/constants.ts ADDED Viewed

	@@ -0,0 +1,22 @@

+export const SAMPLE_RATE = 44100;
+export const EXAMPLE_SENTENCES = {
+  Quote: '"It is not death that a man should fear, but he should fear never beginning to live."',
+  Paragraph:
+    "The concept of artificial intelligence has captivated human imagination for decades. From early science fiction to modern practical applications, AI has evolved from a dream into a tangible reality that shapes our daily lives.",
+  "Full story": "",
+  Random: [
+    "The startup secured $5.2M in venture capital, a huge leap from their initial $450K seed round.",
+    "The train delay was announced at 4:45 PM on Wed, Apr 3, 2024 due to track maintenance.",
+    "You can reach the hotel front desk at (212) 555-0142 ext. 402 anytime.",
+    "Our drone battery lasts 2.3h when flying at 30kph with full camera payload.",
+    "The recipe calls for 250g of flour, 150ml of milk, and 2 large eggs.",
+    "Her favorite painting is Starry Night by Vincent van Gogh, created in 1889.",
+    "The new smartphone model features a 6.5-inch OLED display and a 48MP camera.",
+    "The hiking trail to the summit is approximately 8.4 miles round trip with a 2,000 feet elevation gain.",
+    "The novel explores themes of identity, freedom, and the human condition in a dystopian future.",
+    "The symphony orchestra will perform Beethoven's 9th Symphony this Saturday at 7 PM.",
+    "Hugging Face was founded in 2016 and has become a leading platform for open-source machine learning.",
+  ],
+  Freeform: "",
+};

src/index.css ADDED Viewed

	@@ -0,0 +1 @@


1	+ @import "tailwindcss";

src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

src/splitter.ts ADDED Viewed

	@@ -0,0 +1,417 @@

+/**
+ * Returns true if the character is considered a sentence terminator.
+ * This includes ASCII (".", "!", "?") and common Unicode terminators.
+ * NOTE: We also include newlines here, as this is favourable for text-to-speech systems.
+ * @param c The character to test.
+ * @param includeNewlines Whether to treat newlines as terminators.
+ */
+function isSentenceTerminator(c: string, includeNewlines: boolean = true): boolean {
+  return ".!?…。？！".includes(c) || (includeNewlines && c === "\n");
+}
+/**
+ * Returns true if the character should be attached to the sentence terminator,
+ * such as closing quotes or brackets.
+ * @param c The character to test.
+ */
+function isTrailingChar(c: string): boolean {
+  return "\"')]}」』".includes(c);
+}
+/**
+ * Extracts a token (a contiguous sequence of non–whitespace characters)
+ * from the buffer starting at the given index.
+ * @param buffer The input text.
+ * @param start The starting index.
+ * @returns The extracted token.
+ */
+function getTokenFromBuffer(buffer: string, start: number): string {
+  let end = start;
+  while (end < buffer.length && !/\s/.test(buffer[end])) {
+    ++end;
+  }
+  return buffer.substring(start, end);
+}
+// List of common abbreviations. Note that strings with single letters joined by periods
+// (e.g., "i.e", "e.g", "u.s.a", "u.s") are handled separately.
+const ABBREVIATIONS: Set<string> = new Set([
+  "mr",
+  "mrs",
+  "ms",
+  "dr",
+  "prof",
+  "sr",
+  "jr",
+  "sgt",
+  "col",
+  "gen",
+  "rep",
+  "sen",
+  "gov",
+  "lt",
+  "maj",
+  "capt",
+  "st",
+  "mt",
+  "etc",
+  "co",
+  "inc",
+  "ltd",
+  "dept",
+  "vs",
+  "p",
+  "pg",
+  "jan",
+  "feb",
+  "mar",
+  "apr",
+  "jun",
+  "jul",
+  "aug",
+  "sep",
+  "sept",
+  "oct",
+  "nov",
+  "dec",
+  "sun",
+  "mon",
+  "tu",
+  "tue",
+  "tues",
+  "wed",
+  "th",
+  "thu",
+  "thur",
+  "thurs",
+  "fri",
+  "sat",
+]);
+/**
+ * Determines if the given token (or series of initials) is a known abbreviation.
+ * @param token The token to check.
+ */
+function isAbbreviation(token: string): boolean {
+  // Remove possessive endings and trailing periods.
+  token = token.replace(/['’]s$/i, "").replace(/\.+$/, "");
+  return ABBREVIATIONS.has(token.toLowerCase());
+}
+// Map of closing punctuation to their corresponding opening punctuation.
+const MATCHING: Map<string, string> = new Map([
+  [")", "("],
+  ["]", "["],
+  ["}", "{"],
+  ["》", "《"],
+  ["〉", "〈"],
+  ["›", "‹"],
+  ["»", "«"],
+  ["〉", "〈"],
+  ["」", "「"],
+  ["』", "『"],
+  ["〕", "〔"],
+  ["】", "【"],
+]);
+// Set of opening punctuation characters.
+const OPENING: Set<string> = new Set(MATCHING.values());
+/**
+ * Updates the nesting stack to track quotes and paired punctuation.
+ * This supports both standard (", ', (), [], {}) and Japanese quotes (「」「』『』).
+ * (An apostrophe between letters is ignored so that contractions remain intact.)
+ * @param c The current character.
+ * @param stack The current nesting stack.
+ * @param i The index of the character in the buffer.
+ * @param buffer The full text being processed.
+ */
+function updateStack(c: string, stack: string[], i: number, buffer: string): void {
+  // Handle standard quotes.
+  if (c === '"' || c === "'") {
+    // Ignore an apostrophe if it's between letters (e.g., in contractions).
+    if (
+      c === "'" &&
+      i > 0 &&
+      i < buffer.length - 1 &&
+      /[A-Za-z]/.test(buffer[i - 1]) &&
+      /[A-Za-z]/.test(buffer[i + 1])
+    ) {
+      return;
+    }
+    // Ignore an apostrophe if it's at the end of a word (e.g., possessive "wives'").
+    if (c === "'" && i > 0 && /[A-Za-z]/.test(buffer[i - 1]) && (!stack.length || stack.at(-1) !== "'")) {
+      return;
+    }
+    // If the quote is already in the stack, it means we are closing it.
+    // We search from the top of the stack down.
+    const stackIndex = stack.lastIndexOf(c);
+    if (stackIndex !== -1) {
+      // We found the matching opening quote.
+      // If it's not at the top (e.g. stack is ['"', "'"] and c is '"'),
+      // it means the intermediate quotes (like the single quote) were likely
+      // apostrophes/contractions that were misidentified as opening quotes.
+      // We "close" them all by unwinding the stack to this point.
+      stack.splice(stackIndex);
+    } else {
+      stack.push(c);
+    }
+    return;
+  }
+  // Handle opening punctuation.
+  if (OPENING.has(c)) {
+    stack.push(c);
+    return;
+  }
+  // Handle closing punctuation.
+  const expectedOpening = MATCHING.get(c);
+  if (expectedOpening && stack.length && stack.at(-1) === expectedOpening) {
+    stack.pop();
+  }
+}
+/**
+ * A simple stream-based text splitter that emits complete sentences.
+ */
+export class TextSplitterStream implements AsyncIterable<string>, Iterable<string> {
+  private _buffer: string;
+  private _sentences: string[];
+  private _resolver: (() => void) | null;
+  private _closed: boolean;
+  constructor() {
+    this._buffer = "";
+    this._sentences = [];
+    this._resolver = null;
+    this._closed = false;
+  }
+  /**
+   * Push one or more text chunks into the stream.
+   * @param texts Text fragments to process.
+   */
+  push(...texts: string[]): void {
+    for (const txt of texts) {
+      this._buffer += txt;
+      this._process();
+    }
+  }
+  /**
+   * Closes the stream, signaling that no more text will be pushed.
+   * This will flush any remaining text in the buffer as a sentence
+   * and allow the consuming process to finish processing the stream.
+   */
+  close(): void {
+    if (this._closed) {
+      throw new Error("Stream is already closed.");
+    }
+    this._closed = true;
+    this.flush();
+  }
+  /**
+   * Flushes any remaining text in the buffer as a sentence.
+   */
+  flush(): void {
+    const remainder = this._buffer.trim();
+    if (remainder.length > 0) {
+      this._sentences.push(remainder);
+    }
+    this._buffer = "";
+    this._resolve();
+  }
+  /**
+   * Resolve the pending promise to signal that sentences are available.
+   */
+  private _resolve(): void {
+    if (this._resolver) {
+      this._resolver();
+      this._resolver = null;
+    }
+  }
+  /**
+   * Processes the internal buffer to extract complete sentences.
+   * If the potential sentence boundary is at the end of the current buffer,
+   * it waits for more text before splitting.
+   */
+  private _process(): void {
+    let sentenceStart = 0;
+    const buffer = this._buffer;
+    const len = buffer.length;
+    let i = 0;
+    let stack: string[] = [];
+    // Helper to scan from the current index over trailing terminators and punctuation.
+    const scanBoundary = (idx: number): { end: number; nextNonSpace: number } => {
+      let end = idx;
+      // Consume contiguous sentence terminators (excluding newlines).
+      while (end + 1 < len && isSentenceTerminator(buffer[end + 1], false)) {
+        ++end;
+      }
+      // Consume trailing characters (e.g., closing quotes/brackets).
+      while (end + 1 < len && isTrailingChar(buffer[end + 1])) {
+        ++end;
+      }
+      let nextNonSpace = end + 1;
+      while (nextNonSpace < len && /\s/.test(buffer[nextNonSpace])) {
+        ++nextNonSpace;
+      }
+      return { end, nextNonSpace };
+    };
+    while (i < len) {
+      const c = buffer[i];
+      updateStack(c, stack, i, buffer);
+      // Only consider splitting if we're not inside any nested structure.
+      if (stack.length === 0 && isSentenceTerminator(c)) {
+        const currentSegment = buffer.slice(sentenceStart, i);
+        // Skip splitting for likely numbered lists (e.g., "1." or "\n2.").
+        if (/(^|\n)\d+$/.test(currentSegment)) {
+          ++i;
+          continue;
+        }
+        const { end: boundaryEnd, nextNonSpace } = scanBoundary(i);
+        // If the terminator is not a newline and there's no extra whitespace,
+        // we might be in the middle of a token (e.g., "$9.99"), so skip splitting.
+        if (i === nextNonSpace - 1 && c !== "\n") {
+          ++i;
+          continue;
+        }
+        // Wait for more text if there's no non-whitespace character yet.
+        if (nextNonSpace === len) {
+          break;
+        }
+        // Determine the token immediately preceding the terminator.
+        let tokenStart = i - 1;
+        while (tokenStart >= 0 && /\S/.test(buffer[tokenStart])) {
+          tokenStart--;
+        }
+        tokenStart = Math.max(sentenceStart, tokenStart + 1);
+        const token = getTokenFromBuffer(buffer, tokenStart);
+        if (!token) {
+          ++i;
+          continue;
+        }
+        // --- URL/email protection ---
+        // If the token appears to be a URL or email (contains "://" or "@")
+        // and does not already end with a terminator, skip splitting.
+        if (
+          (/https?[,:]\/\//.test(token) || token.includes("@")) &&
+          token.at(-1) &&
+          !isSentenceTerminator(token.at(-1)!)
+        ) {
+          i = tokenStart + token.length;
+          continue;
+        }
+        // --- Abbreviation protection ---
+        if (isAbbreviation(token)) {
+          ++i;
+          continue;
+        }
+        // --- Middle initials heuristic ---
+        // If the token is a series of single-letter initials (each ending in a period)
+        // and is followed by a capitalized word, assume it's part of a name.
+        if (/^([A-Za-z]\.)+$/.test(token) && nextNonSpace < len && /[A-Z]/.test(buffer[nextNonSpace])) {
+          ++i;
+          continue;
+        }
+        // --- Lookahead heuristic ---
+        // If the terminator is a period and the next non–whitespace character is lowercase,
+        // assume it is not the end of a sentence.
+        if (c === "." && nextNonSpace < len && /[a-z]/.test(buffer[nextNonSpace])) {
+          ++i;
+          continue;
+        }
+        // Special case: ellipsis that stands alone should be merged with the following sentence.
+        const sentence = buffer.substring(sentenceStart, boundaryEnd + 1).trim();
+        if (sentence === "..." || sentence === "��") {
+          ++i;
+          continue;
+        }
+        // Accept the sentence boundary.
+        if (sentence) {
+          this._sentences.push(sentence);
+        }
+        // Move to the next sentence.
+        i = sentenceStart = boundaryEnd + 1;
+        continue;
+      }
+      ++i;
+    }
+    // Remove the processed portion of the buffer.
+    this._buffer = buffer.substring(sentenceStart);
+    // Resolve any pending promise if sentences are available.
+    if (this._sentences.length > 0) {
+      this._resolve();
+    }
+  }
+  /**
+   * Async iterator to yield sentences as they become available.
+   */
+  async *[Symbol.asyncIterator](): AsyncGenerator<string, void, void> {
+    if (this._resolver) {
+      throw new Error("Another iterator is already active.");
+    }
+    while (true) {
+      if (this._sentences.length > 0) {
+        // We use shift()! because we checked length > 0, so it cannot be undefined
+        yield this._sentences.shift()!;
+      } else if (this._closed) {
+        // No more text will be pushed.
+        break;
+      } else {
+        // Wait for more text.
+        await new Promise<void>((resolve) => {
+          this._resolver = resolve;
+        });
+      }
+    }
+  }
+  /**
+   * Synchronous iterator that flushes the buffer and returns all sentences.
+   */
+  [Symbol.iterator](): Iterator<string> {
+    this.flush();
+    const iterator = this._sentences[Symbol.iterator]();
+    this._sentences = [];
+    return iterator;
+  }
+  /**
+   * Returns the array of sentences currently available.
+   */
+  get sentences(): string[] {
+    return this._sentences;
+  }
+}
+/**
+ * Splits the input text into an array of sentences.
+ * @param text The text to split.
+ * @returns An array of sentences.
+ */
+export function split(text: string): string[] {
+  const splitter = new TextSplitterStream();
+  splitter.push(text);
+  return [...splitter];
+}

src/tts.ts ADDED Viewed

	@@ -0,0 +1,121 @@

+import { pipeline, RawAudio, TextToAudioPipeline } from "@huggingface/transformers";
+import { split } from "./splitter";
+const MODEL_ID = "onnx-community/Supertonic-TTS-ONNX";
+const VOICES_URL = `https://huggingface.co/${MODEL_ID}/resolve/main/voices/`;
+let pipelinePromise: Promise<TextToAudioPipeline> | null = null;
+let embeddingsPromise: Promise<Record<string, Float32Array>> | null = null;
+export async function loadPipeline(progressCallback: (info: any) => void) {
+  // @ts-ignore
+  return (pipelinePromise ??= pipeline("text-to-speech", MODEL_ID, {
+    device: "webgpu",
+    progress_callback: progressCallback,
+  }) as Promise<TextToAudioPipeline>);
+}
+export async function loadEmbeddings() {
+  return (embeddingsPromise ??= (async () => {
+    const [female, male] = await Promise.all([
+      fetch(`${VOICES_URL}F1.bin`).then((r) => r.arrayBuffer()),
+      fetch(`${VOICES_URL}M1.bin`).then((r) => r.arrayBuffer()),
+    ]);
+    return {
+      Female: new Float32Array(female),
+      Male: new Float32Array(male),
+    };
+  })());
+}
+export interface StreamResult {
+  time: number;
+  audio: RawAudio;
+  text: string;
+  index: number;
+  total: number;
+}
+function splitWithConstraints(text: string, { minCharacters = 1, maxCharacters = Infinity } = {}): string[] {
+  if (!text) return [];
+  const rawLines = split(text);
+  const result: string[] = [];
+  let currentBuffer = "";
+  for (const rawLine of rawLines) {
+    const line = rawLine.trim();
+    if (!line) continue;
+    if (line.length > maxCharacters) {
+      throw new Error(`A single segment exceeds the maximum character limit of ${maxCharacters} characters.`);
+    }
+    if (currentBuffer) currentBuffer += " ";
+    currentBuffer += line;
+    while (currentBuffer.length > maxCharacters) {
+      result.push(currentBuffer.slice(0, maxCharacters));
+      currentBuffer = currentBuffer.slice(maxCharacters);
+    }
+    if (currentBuffer.length >= minCharacters) {
+      result.push(currentBuffer);
+      currentBuffer = "";
+    }
+  }
+  if (currentBuffer) result.push(currentBuffer);
+  return result;
+}
+export async function* streamTTS(
+  text: string,
+  tts: TextToAudioPipeline,
+  speaker_embeddings: Float32Array,
+  quality: number,
+  speed: number,
+): AsyncGenerator<StreamResult> {
+  const chunks = splitWithConstraints(text, {
+    minCharacters: 100,
+    maxCharacters: 1000,
+  });
+  if (chunks.length === 0) chunks.push(text);
+  for (let i = 0; i < chunks.length; ++i) {
+    const chunk = chunks[i];
+    if (!chunk.trim()) continue;
+    const output = (await tts(chunk, {
+      speaker_embeddings,
+      num_inference_steps: quality,
+      speed,
+    })) as RawAudio;
+    if (i < chunks.length - 1) {
+      // Add 0.5s silence between chunks for more natural flow
+      const silenceSamples = Math.floor(0.5 * output.sampling_rate);
+      const padded = new Float32Array(output.audio.length + silenceSamples);
+      padded.set(output.audio);
+      output.audio = padded;
+    }
+    yield {
+      time: performance.now(),
+      audio: output,
+      text: chunk,
+      index: i + 1,
+      total: chunks.length,
+    };
+  }
+}
+export function createAudioBlob(chunks: Float32Array[], sampling_rate: number): Blob {
+  const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
+  const result = new Float32Array(totalLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    result.set(chunk, offset);
+    offset += chunk.length;
+  }
+  const audio = new RawAudio(result, sampling_rate);
+  const blob = audio.toBlob();
+  return blob;
+}

tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,28 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,4 @@

+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});