Spaces:

webml-community
/

bedtime-story-generator

Running

App Files Files Community

Xenova HF Staff commited on 13 days ago

Commit

59c3ada

verified ·

1 Parent(s): 47e7114

Upload application

Browse files

Files changed (26) hide show

.gitattributes +1 -0
eslint.config.js +23 -0
index.html +14 -17
package.json +41 -0
public/bubble.mp3 +0 -0
public/hover.mp3 +0 -0
public/music.mp3 +3 -0
src/App.tsx +138 -0
src/components/ErrorScreen.tsx +37 -0
src/components/LandingScreen.tsx +49 -0
src/components/MainApplication.tsx +523 -0
src/components/NeoButton.tsx +47 -0
src/components/OptionCard.tsx +88 -0
src/components/ProgressScreen.tsx +25 -0
src/constants.ts +31 -0
src/hooks/useAudioPlayer.ts +86 -0
src/hooks/useLLM.ts +86 -0
src/hooks/useTTS.ts +75 -0
src/index.css +88 -0
src/main.tsx +10 -0
src/play-worklet.js +63 -0
src/vite-env.d.ts +1 -0
tsconfig.app.json +29 -0
tsconfig.json +4 -0
tsconfig.node.json +25 -0
vite.config.ts +14 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/music.mp3 filter=lfs diff=lfs merge=lfs -text

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 { globalIgnores } from "eslint/config";
+export default tseslint.config([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

index.html CHANGED Viewed

@@ -1,19 +1,16 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!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>Bedtime Story Generator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>

package.json ADDED Viewed

	@@ -0,0 +1,41 @@

+{
+  "name": "bedtime-story-generator",
+  "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.7.1",
+    "@tailwindcss/vite": "^4.1.11",
+    "kokoro-js": "^1.2.1",
+    "lucide-react": "^0.539.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@types/audioworklet": "^0.0.82",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@webgpu/types": "^0.1.64",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.0",
+    "vite": "^7.1.0"
+  },
+  "overrides": {
+    "kokoro-js": {
+      "@huggingface/transformers": "^3.7.1"
+    }
+  }
+}

public/bubble.mp3 ADDED Viewed

Binary file (34.6 kB). View file

public/hover.mp3 ADDED Viewed

Binary file (14.8 kB). View file

public/music.mp3 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:828258c0b3b023a926aeee0a83d67f546f719e63913c1781fe8eb436e43e9dc2
+size 4199653

src/App.tsx ADDED Viewed

	@@ -0,0 +1,138 @@

+import { useState, useEffect, useRef, useCallback } from "react";
+import { Volume2, VolumeX } from "lucide-react";
+import { useLLM } from "./hooks/useLLM";
+import { useTTS } from "./hooks/useTTS";
+import useAudioPlayer from "./hooks/useAudioPlayer";
+import LandingScreen from "./components/LandingScreen";
+import ProgressScreen from "./components/ProgressScreen";
+import ErrorScreen from "./components/ErrorScreen";
+import WORKLET from "./play-worklet.js?raw";
+import MainApplication from "./components/MainApplication";
+export default function App() {
+  const llm = useLLM();
+  const tts = useTTS();
+  const { initAudio, playPopSound, playHoverSound, toggleMusic, playMusic, isMusicPlaying, isAudioReady } =
+    useAudioPlayer();
+  const [appState, setAppState] = useState<"landing" | "loading" | "main" | "error">(
+    navigator.gpu ? "landing" : "error",
+  );
+  const [error, setError] = useState<string | null>(null);
+  const audioWorkletNodeRef = useRef<AudioWorkletNode | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const audioGlobal = (globalThis as any).__AUDIO__ || {
+    ctx: null as AudioContext | null,
+    node: null as AudioWorkletNode | null,
+    loaded: false as boolean,
+  };
+  (globalThis as any).__AUDIO__ = audioGlobal;
+  const allowAutoplayRef = useRef(true);
+  const handleToggleMusic = useCallback(() => {
+    if (isMusicPlaying) allowAutoplayRef.current = false;
+    toggleMusic();
+  }, [isMusicPlaying, toggleMusic]);
+  const handleLoadApp = async () => {
+    setAppState("loading");
+    initAudio();
+    if (audioGlobal.ctx && audioGlobal.node) {
+      audioContextRef.current = audioGlobal.ctx;
+      audioWorkletNodeRef.current = audioGlobal.node;
+      await audioContextRef.current?.resume();
+    } else {
+      try {
+        const audioContext = new AudioContext({ sampleRate: 24000 });
+        audioContextRef.current = audioContext;
+        await audioContext.resume();
+        if (!audioGlobal.loaded) {
+          const blob = new Blob([WORKLET], { type: "application/javascript" });
+          const url = URL.createObjectURL(blob);
+          await audioContext.audioWorklet.addModule(url);
+          URL.revokeObjectURL(url);
+          audioGlobal.loaded = true;
+        }
+        const workletNode = new AudioWorkletNode(audioContext, "buffered-audio-worklet-processor");
+        workletNode.connect(audioContext.destination);
+        audioWorkletNodeRef.current = workletNode;
+        audioGlobal.ctx = audioContext;
+        audioGlobal.node = workletNode;
+      } catch {}
+    }
+    await audioContextRef.current?.resume();
+    llm.load();
+    tts.load();
+  };
+  const handleLoadingComplete = useCallback(() => {
+    setAppState("main");
+    if (allowAutoplayRef.current && !isMusicPlaying) playMusic();
+  }, [playMusic, isMusicPlaying]);
+  const handleRetry = () => {
+    setError(null);
+    handleLoadApp();
+  };
+  useEffect(() => {
+    if (llm.error) {
+      setError(`LLM Error: ${llm.error}`);
+      setAppState("error");
+    } else if (tts.error) {
+      setError(`TTS Error: ${tts.error}`);
+      setAppState("error");
+    } else if (llm.isReady && tts.isReady) {
+      handleLoadingComplete();
+    }
+  }, [llm.isReady, tts.isReady, llm.error, tts.error, handleLoadingComplete]);
+  useEffect(() => {
+    if (!navigator.gpu) {
+      setError("WebGPU is not supported in this browser.");
+      setAppState("error");
+      return;
+    }
+    return () => {
+      audioWorkletNodeRef.current?.disconnect();
+    };
+  }, []);
+  return (
+    <>
+      <div className="bg-pattern h-screen text-black relative overflow-hidden">
+        {isAudioReady && (
+          <button
+            onClick={handleToggleMusic}
+            className="absolute top-4 right-4 z-20 p-2 bg-white/50 border-2 border-black rounded-full shadow-[2px_2px_0px_#000] hover:bg-white/80 transition-colors"
+          >
+            {isMusicPlaying ? <Volume2 /> : <VolumeX />}
+          </button>
+        )}
+        <LandingScreen isVisible={appState === "landing"} onLoad={handleLoadApp} playHoverSound={playHoverSound} />
+        <ProgressScreen isVisible={appState === "loading"} progress={(llm.progress + tts.progress) / 2} />
+        <ErrorScreen isVisible={appState === "error"} error={error} onRetry={handleRetry} />
+        <MainApplication
+          isVisible={appState === "main"}
+          playPopSound={playPopSound}
+          playHoverSound={playHoverSound}
+          generate={llm.generate}
+          streamTTS={tts.stream}
+          isTTSReady={tts.isReady}
+          audioWorkletNode={audioWorkletNodeRef.current}
+          toggleMusic={handleToggleMusic}
+          isMusicPlaying={isMusicPlaying}
+        />
+      </div>
+    </>
+  );
+}

src/components/ErrorScreen.tsx ADDED Viewed

	@@ -0,0 +1,37 @@

+import type React from "react";
+import { AlertTriangle } from "lucide-react";
+import NeoButton from "./NeoButton";
+interface ErrorScreenProps {
+  isVisible: boolean;
+  error: string | null;
+  onRetry: () => void;
+}
+const ErrorScreen: React.FC<ErrorScreenProps> = ({ isVisible, error, onRetry }) => {
+  const transitionClass = isVisible ? "opacity-100" : "opacity-0 -translate-y-10 pointer-events-none";
+  return (
+    <div
+      className={`absolute inset-0 flex flex-col items-center justify-center transition-all duration-700 ease-in-out ${transitionClass}`}
+    >
+      <div className="text-center p-4 max-w-2xl">
+        <h1 className="text-4xl md:text-6xl font-black tracking-tighter mb-6 animate-sway text-red-500">
+          <AlertTriangle className="inline-block h-16 w-16 md:h-24 md:w-24 mb-4" />
+          <br />
+          An Error Occurred
+        </h1>
+        {error && (
+          <div className="bg-red-100 border-2 border-red-400 text-red-700 px-4 py-3 rounded-lg relative mb-8 text-left">
+            <strong className="font-bold">Details:</strong>
+            <span className="block sm:inline ml-2">{error}</span>
+          </div>
+        )}
+        <NeoButton onClick={onRetry} className="text-2xl px-8 py-4" variant="secondary">
+          Try Again
+        </NeoButton>
+      </div>
+    </div>
+  );
+};
+export default ErrorScreen;

src/components/LandingScreen.tsx ADDED Viewed

	@@ -0,0 +1,49 @@

+import type React from "react";
+import { Sparkles } from "lucide-react";
+import NeoButton from "./NeoButton";
+interface LandingScreenProps {
+  isVisible: boolean;
+  onLoad: () => void;
+  playHoverSound?: () => void;
+}
+const LandingScreen: React.FC<LandingScreenProps> = ({ isVisible, onLoad, playHoverSound }) => {
+  const transitionClass = isVisible ? "opacity-100" : "opacity-0 -translate-y-10 pointer-events-none";
+  return (
+    <div
+      className={`absolute inset-0 flex flex-col items-center justify-center transition-all duration-700 ease-in-out ${transitionClass}`}
+    >
+      <div className="text-center p-4">
+        <h1 className="text-6xl md:text-8xl font-black tracking-tighter mb-6 animate-sway">
+          ✨ Bedtime Story ✨<br />
+          Generator
+        </h1>
+        <p className="text-2xl md:text-3xl mb-10">Craft magical tales in seconds.</p>
+        <NeoButton
+          onClick={onLoad}
+          className="text-2xl px-8 py-4 mb-4 animate-pulse-grow"
+          playHoverSound={playHoverSound}
+        >
+          <Sparkles className="mr-1" /> Start Creating
+        </NeoButton>
+      </div>
+      <footer className="absolute bottom-5 left-0 right-0">
+        <div className="flex items-center justify-center text-gray-500 text-sm">
+          <span>Built with </span>
+          <a
+            href="https://github.com/huggingface/transformers.js"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="ml-1 font-semibold text-gray-600 hover:text-black transition-colors flex items-center"
+          >
+            🤗 Transformers.js
+          </a>
+        </div>
+      </footer>
+    </div>
+  );
+};
+export default LandingScreen;

src/components/MainApplication.tsx ADDED Viewed

	@@ -0,0 +1,523 @@

+import { useReducer, useState, useRef, useEffect, useCallback } from "react";
+import type React from "react";
+import { Dices, RefreshCw } from "lucide-react";
+import type { generateFn } from "../hooks/useLLM";
+import NeoButton from "./NeoButton";
+import OptionCard from "./OptionCard";
+import { STORY_DATA } from "../constants";
+interface MainApplicationProps {
+  isVisible: boolean;
+  playPopSound: () => void;
+  playHoverSound: () => void;
+  generate: generateFn;
+  streamTTS: (onAudioChunk: (chunk: { audio: Float32Array; text?: string }) => void) => {
+    splitter: any;
+    ttsPromise: Promise<void>;
+  };
+  isTTSReady: boolean;
+  audioWorkletNode: AudioWorkletNode | null;
+  toggleMusic: (force?: boolean) => void;
+  isMusicPlaying: boolean;
+}
+type StoryState = {
+  character: string;
+  setting: string;
+  item: string;
+  theme: string;
+  length: string;
+  customCharacter: string;
+  customSetting: string;
+  customItem: string;
+};
+type StoryAction =
+  | { type: "SET_FIELD"; field: keyof StoryState; value: string }
+  | {
+      type: "SURPRISE_ME";
+      payload: Omit<StoryState, "customCharacter" | "customSetting" | "customItem">;
+    }
+  | { type: "RESET" };
+const initialState: StoryState = {
+  character: STORY_DATA.characters[0],
+  setting: STORY_DATA.settings[0],
+  item: STORY_DATA.items[0],
+  theme: STORY_DATA.themes[0],
+  length: STORY_DATA.length[0],
+  customCharacter: "",
+  customSetting: "",
+  customItem: "",
+};
+const storyReducer = (state: StoryState, action: StoryAction): StoryState => {
+  switch (action.type) {
+    case "SET_FIELD":
+      return { ...state, [action.field]: action.value };
+    case "SURPRISE_ME":
+      return { ...initialState, ...action.payload };
+    case "RESET":
+      return initialState;
+    default:
+      return state;
+  }
+};
+const MainApplication: React.FC<MainApplicationProps> = ({
+  isVisible,
+  playPopSound,
+  playHoverSound,
+  generate,
+  streamTTS,
+  isTTSReady,
+  audioWorkletNode,
+  toggleMusic,
+  isMusicPlaying,
+}) => {
+  const [storyState, dispatch] = useReducer(storyReducer, initialState);
+  const { character, setting, item, theme, length, customCharacter, customSetting, customItem } = storyState;
+  const [generatedStory, setGeneratedStory] = useState<string | null>(null);
+  const [isShuffling, setIsShuffling] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isSpeaking, setIsSpeaking] = useState<boolean>(false);
+  const [previewText, setPreviewText] = useState<string>("");
+  const storyPanelRef = useRef<HTMLDivElement | null>(null);
+  const [ranges, setRanges] = useState<Array<{ start: number; end: number }>>([]);
+  const rangesRef = useRef(ranges);
+  useEffect(() => {
+    rangesRef.current = ranges;
+  }, [ranges]);
+  const pendingRef = useRef<string[]>([]);
+  const rawSearchStartRef = useRef(0);
+  const normDataRef = useRef<{ norm: string; map: number[] } | null>(null);
+  const [currentChunkIdx, setCurrentChunkIdx] = useState<number>(-1);
+  const finishedIndexRef = useRef<number>(-1);
+  const textContainerRef = useRef<HTMLDivElement | null>(null);
+  const chunkRefs = useRef<(HTMLSpanElement | null)[]>([]);
+  const resumeMusicOnPlaybackEndRef = useRef<boolean>(false);
+  const activeSplitterRef = useRef<any>(null);
+  const displayedText = previewText || generatedStory || "";
+  const buildNorm = (text: string) => {
+    const map: number[] = [];
+    let norm = "";
+    for (let i = 0; i < text.length; i++) {
+      const ch = text[i];
+      if (/\s/.test(ch)) continue;
+      map.push(i);
+      norm += ch;
+    }
+    return { norm, map };
+  };
+  const tryResolve = useCallback(() => {
+    const normData = normDataRef.current;
+    if (!normData) return;
+    const { norm, map } = normData;
+    const nextRanges = rangesRef.current.slice();
+    const normStartFromRaw = () => {
+      let i = 0;
+      while (i < map.length && map[i] < rawSearchStartRef.current) i++;
+      return i;
+    };
+    let changed = false;
+    while (pendingRef.current.length) {
+      const nextText = pendingRef.current[0];
+      const needle = nextText.replace(/\s+/g, "");
+      if (!needle) {
+        pendingRef.current.shift();
+        continue;
+      }
+      const startNormIdx = normStartFromRaw();
+      const idx = norm.indexOf(needle, startNormIdx);
+      if (idx === -1) break;
+      const startRaw = map[idx];
+      const endRaw = map[idx + needle.length - 1] + 1;
+      nextRanges.push({ start: startRaw, end: endRaw });
+      rawSearchStartRef.current = endRaw;
+      pendingRef.current.shift();
+      changed = true;
+    }
+    if (changed) {
+      setRanges(nextRanges);
+      setCurrentChunkIdx((prev) =>
+        prev === -1 ? Math.min(finishedIndexRef.current + 1, nextRanges.length - 1) : prev,
+      );
+    }
+  }, []);
+  useEffect(() => {
+    normDataRef.current = buildNorm(displayedText);
+    tryResolve();
+  }, [displayedText, tryResolve]);
+  useEffect(() => {
+    if (!audioWorkletNode) return;
+    const handler = (event: MessageEvent) => {
+      const data = (event as any).data;
+      if (!data || typeof data !== "object") return;
+      if (data.type === "next_chunk") {
+        finishedIndexRef.current += 1;
+        const nextIdx = finishedIndexRef.current + 1;
+        setCurrentChunkIdx(nextIdx < rangesRef.current.length ? nextIdx : -1);
+      } else if (data.type === "playback_ended") {
+        setIsSpeaking(false);
+        setCurrentChunkIdx(-1);
+        if (resumeMusicOnPlaybackEndRef.current) {
+          toggleMusic();
+        }
+      }
+    };
+    (audioWorkletNode.port as any).onmessage = handler;
+    return () => {
+      if (audioWorkletNode?.port) (audioWorkletNode.port as any).onmessage = null;
+    };
+  }, [audioWorkletNode, toggleMusic]);
+  useEffect(() => {
+    if (currentChunkIdx < 0) return;
+    const container = textContainerRef.current;
+    const el = chunkRefs.current[currentChunkIdx];
+    if (!container || !el) return;
+    const containerRect = container.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const elTopInContainer = elRect.top - containerRect.top + container.scrollTop;
+    const targetTop = Math.max(0, elTopInContainer - container.clientHeight * 0.3);
+    container.scrollTo({ top: targetTop, behavior: "smooth" });
+  }, [currentChunkIdx]);
+  const getRandomItem = (arr: string[]): string => arr[Math.floor(Math.random() * arr.length)];
+  const handleSurpriseMe = () => {
+    playPopSound();
+    if (isShuffling) return;
+    setIsShuffling(true);
+    dispatch({ type: "SET_FIELD", field: "customCharacter", value: "" });
+    dispatch({ type: "SET_FIELD", field: "customSetting", value: "" });
+    dispatch({ type: "SET_FIELD", field: "customItem", value: "" });
+    let count = 0;
+    const max = 15;
+    const interval = setInterval(() => {
+      dispatch({
+        type: "SURPRISE_ME",
+        payload: {
+          character: getRandomItem(STORY_DATA.characters),
+          setting: getRandomItem(STORY_DATA.settings),
+          item: getRandomItem(STORY_DATA.items),
+          theme: getRandomItem(STORY_DATA.themes),
+          length: getRandomItem(STORY_DATA.length),
+        },
+      });
+      count++;
+      if (count >= max) {
+        clearInterval(interval);
+        setIsShuffling(false);
+      }
+    }, 60);
+  };
+  const generateStory = async () => {
+    if (!audioWorkletNode) return;
+    playPopSound();
+    setIsLoading(true);
+    setPreviewText("");
+    setGeneratedStory(null);
+    setRanges([]);
+    rangesRef.current = [];
+    pendingRef.current = [];
+    rawSearchStartRef.current = 0;
+    setCurrentChunkIdx(-1);
+    finishedIndexRef.current = -1;
+    chunkRefs.current = [];
+    const wasMusicPlaying = isMusicPlaying;
+    resumeMusicOnPlaybackEndRef.current = wasMusicPlaying;
+    storyPanelRef.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+    setIsSpeaking(true);
+    if (wasMusicPlaying) toggleMusic();
+    const { splitter, ttsPromise } = streamTTS(({ audio, text }) => {
+      audioWorkletNode.port.postMessage(audio);
+      if (text) {
+        pendingRef.current.push(text);
+        tryResolve();
+      }
+    });
+    activeSplitterRef.current = splitter;
+    const selectedCharacter = (customCharacter || character).trim();
+    const selectedSetting = (customSetting || setting).trim();
+    const selectedItem = (customItem || item).trim();
+    const lengthMap: Record<string, string> = {
+      Short: "100-200 word",
+      Medium: "200-300 word",
+      Long: "300-400 word",
+    };
+    const userMessage = `Write a ${lengthMap[length]} ${theme.toLowerCase()} story about ${selectedCharacter} ${selectedSetting} that ${selectedItem}.`;
+    try {
+      const llmPromise = generate(
+        [{ role: "user", content: userMessage }],
+        (token: string) => setPreviewText((prev) => prev + token),
+        splitter,
+      );
+      await Promise.all([llmPromise, ttsPromise]);
+    } catch {
+      setGeneratedStory(previewText || "Sorry, the story failed to generate.");
+    } finally {
+      activeSplitterRef.current = null;
+      setIsLoading(false);
+    }
+  };
+  const handleReset = () => {
+    playPopSound();
+    activeSplitterRef.current?.close?.();
+    activeSplitterRef.current = null;
+    audioWorkletNode?.port.postMessage("stop");
+    setIsSpeaking(false);
+    if (!isMusicPlaying && resumeMusicOnPlaybackEndRef.current) {
+      toggleMusic();
+    }
+    resumeMusicOnPlaybackEndRef.current = false;
+    setRanges([]);
+    rangesRef.current = [];
+    pendingRef.current = [];
+    rawSearchStartRef.current = 0;
+    setCurrentChunkIdx(-1);
+    finishedIndexRef.current = -1;
+    chunkRefs.current = [];
+    setGeneratedStory(null);
+    setPreviewText("");
+    dispatch({ type: "RESET" });
+  };
+  const transitionClass = isVisible ? "opacity-100" : "opacity-0 translate-y-10 pointer-events-none";
+  return (
+    <div
+      className={`h-screen py-16 px-8 overflow-y-scroll transition-all duration-700 ease-in-out ${isVisible ? "delay-300" : ""} ${transitionClass}`}
+    >
+      <header className="text-center mb-8">
+        <h1 className="text-5xl md:text-7xl font-black tracking-tighter">Let's Make a Story!</h1>
+        <p className="text-lg mt-2 bg-cyan-300 inline-block px-3 py-1 border-2 border-black rounded-md">
+          Runs completely on your device, powered by
+          <a
+            href="https://huggingface.co/onnx-community/gemma-3-270m-it-ONNX"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="ml-1 font-semibold text-gray-700 hover:text-black transition-colors"
+          >
+            Gemma 3 270M
+          </a>
+          !
+        </p>
+      </header>
+      <main className="w-full max-w-4xl mx-auto space-y-6">
+        <OptionCard
+          title="1. Choose a Character"
+          options={STORY_DATA.characters}
+          selected={character}
+          onSelect={(val) => dispatch({ type: "SET_FIELD", field: "character", value: val })}
+          customValue={customCharacter}
+          onCustomChange={(val) =>
+            dispatch({
+              type: "SET_FIELD",
+              field: "customCharacter",
+              value: val,
+            })
+          }
+          isShuffling={isShuffling}
+          isVisible={isVisible}
+          playPopSound={playPopSound}
+          playHoverSound={playHoverSound}
+        />
+        <OptionCard
+          title="2. Pick a Setting"
+          options={STORY_DATA.settings}
+          selected={setting}
+          onSelect={(val) => dispatch({ type: "SET_FIELD", field: "setting", value: val })}
+          customValue={customSetting}
+          onCustomChange={(val) => dispatch({ type: "SET_FIELD", field: "customSetting", value: val })}
+          isShuffling={isShuffling}
+          isVisible={isVisible}
+          playPopSound={playPopSound}
+          playHoverSound={playHoverSound}
+        />
+        <OptionCard
+          title="3. Add a Twist"
+          options={STORY_DATA.items}
+          selected={item}
+          onSelect={(val) => dispatch({ type: "SET_FIELD", field: "item", value: val })}
+          customValue={customItem}
+          onCustomChange={(val) => dispatch({ type: "SET_FIELD", field: "customItem", value: val })}
+          isShuffling={isShuffling}
+          isVisible={isVisible}
+          playPopSound={playPopSound}
+          playHoverSound={playHoverSound}
+        />
+        <div
+          className={`bg-white border-2 border-black rounded-xl p-6 shadow-[6px_6px_0px_rgba(0,0,0,0.1)] transition-opacity duration-500 ${isShuffling ? "animate-shake" : ""} ${isVisible ? "animate-slide-in" : "opacity-0"}`}
+        >
+          <h3 className="text-2xl font-bold mb-4">4. Select a Theme</h3>
+          <div className="flex flex-wrap gap-3">
+            {STORY_DATA.themes.map((t) => (
+              <button
+                key={t}
+                onClick={() => {
+                  playPopSound();
+                  dispatch({ type: "SET_FIELD", field: "theme", value: t });
+                }}
+                onMouseEnter={playHoverSound}
+                className={`font-bold py-3 px-6 border-2 rounded-lg transition-all duration-150 text-lg transform hover:-translate-y-0.5 active:translate-y-0 ${theme === t ? "bg-pink-400 border-black shadow-[2px_2px_0px_#000]" : "bg-gray-100 border-gray-300 hover:bg-gray-200"}`}
+              >
+                {t}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div
+          className={`bg-white border-2 border-black rounded-xl p-6 shadow-[6px_6px_0px_rgba(0,0,0,0.1)] transition-opacity duration-500 ${isShuffling ? "animate-shake" : ""} ${isVisible ? "animate-slide-in" : "opacity-0"}`}
+        >
+          <h3 className="text-2xl font-bold mb-4">5. Story Length</h3>
+          <div className="flex flex-wrap gap-3">
+            {STORY_DATA.length.map((l) => (
+              <button
+                key={l}
+                onClick={() => {
+                  playPopSound();
+                  dispatch({ type: "SET_FIELD", field: "length", value: l });
+                }}
+                onMouseEnter={playHoverSound}
+                className={`font-bold py-3 px-6 border-2 rounded-lg transition-all duration-150 text-lg transform hover:-translate-y-0.5 active:translate-y-0 ${length === l ? "bg-pink-400 border-black shadow-[2px_2px_0px_#000]" : "bg-gray-100 border-gray-300 hover:bg-gray-200"}`}
+              >
+                {l}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="pt-6 flex flex-col sm:flex-row items-center justify-center gap-4">
+          <NeoButton
+            onClick={generateStory}
+            {...{
+              className: "w-full sm:w-auto text-xl",
+              isLoading,
+              disabled: isShuffling || isLoading,
+              playHoverSound,
+            }}
+          >
+            Make My Story
+          </NeoButton>
+          <NeoButton
+            onClick={handleSurpriseMe}
+            {...{
+              variant: "accent",
+              className: "w-full sm:w-auto text-xl",
+              disabled: isShuffling || isLoading,
+              playHoverSound,
+            }}
+          >
+            <Dices size={24} />
+            Surprise Me!
+          </NeoButton>
+          <NeoButton
+            onClick={handleReset}
+            {...{
+              variant: "secondary",
+              className: "w-full sm:w-auto text-xl",
+              disabled: isLoading,
+              playHoverSound,
+            }}
+          >
+            <RefreshCw size={20} />
+            Reset
+          </NeoButton>
+        </div>
+        {/* Story Panel (covers screen height, no separate story page) */}
+        <div
+          ref={storyPanelRef}
+          className="mt-8 bg-white border-2 border-black rounded-xl p-8 shadow-[8px_8px_0px_#000] overflow-y-auto animate-slide-in"
+        >
+          <h3 className="text-3xl font-black mb-6 text-center">Your Story</h3>
+          <div
+            ref={textContainerRef}
+            className="text-2xl leading-relaxed font-serif whitespace-pre-wrap h-[400px] overflow-y-auto"
+          >
+            {(() => {
+              const displayed = displayedText;
+              if (!displayed) {
+                return "Click “Make My Story” to generate a bedtime story.";
+              }
+              const pieces: React.ReactNode[] = [];
+              let last = 0;
+              for (let i = 0; i < ranges.length; i++) {
+                const { start, end } = ranges[i];
+                if (start > last) {
+                  pieces.push(<span key={`n-${i}`}>{displayed.slice(last, start)}</span>);
+                }
+                pieces.push(
+                  <span
+                    key={`h-${i}`}
+                    ref={(el) => {
+                      chunkRefs.current[i] = el;
+                    }}
+                    className={i === currentChunkIdx ? "bg-yellow-200" : ""}
+                  >
+                    {displayed.slice(start, end)}
+                  </span>,
+                );
+                last = end;
+              }
+              if (last < displayed.length) {
+                pieces.push(<span key="tail">{displayed.slice(last)}</span>);
+              }
+              return pieces;
+            })()}
+          </div>
+          {isLoading && (
+            <div className="mt-4 text-center text-sm opacity-70">
+              {isSpeaking ? "Generating and speaking..." : "Generating..."}
+            </div>
+          )}
+          {generatedStory && !isLoading && isTTSReady && !isSpeaking && (
+            <div className="mt-4 flex justify-center">
+              <p className="text-sm opacity-70">Story finished.</p>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+};
+export default MainApplication;

src/components/NeoButton.tsx ADDED Viewed

	@@ -0,0 +1,47 @@

+import type React from "react";
+import { Loader } from "lucide-react";
+interface NeoButtonProps {
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  playPopSound?: () => void;
+  playHoverSound?: () => void;
+  className?: string;
+  variant?: "primary" | "secondary" | "accent";
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+const NeoButtonComponent: React.FC<NeoButtonProps> = ({
+  children,
+  onClick,
+  playHoverSound,
+  className = "",
+  variant = "primary",
+  isLoading = false,
+  disabled = false,
+}) => {
+  const colorClasses = {
+    primary: "bg-yellow-300 hover:bg-yellow-400 border-black",
+    secondary: "bg-pink-400 hover:bg-pink-500 border-black",
+    accent: "bg-cyan-400 hover:bg-cyan-500 border-black",
+  };
+  const primaryShine = variant === "primary" ? "animate-shine" : "";
+  return (
+    <button
+      onClick={onClick}
+      onMouseEnter={playHoverSound}
+      disabled={isLoading || disabled}
+      className={`relative font-bold py-3 px-6 border-2 rounded-lg shadow-[4px_4px_0px_#000] transition-all duration-150 transform hover:-translate-y-1 active:shadow-[1px_1px_0px_#000] active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-[4px_4px_0px_#000] overflow-hidden ${colorClasses[variant]} ${className}`}
+    >
+      <span className={`absolute top-0 left-0 w-full h-full ${primaryShine}`} />
+      <span className="relative z-10 flex items-center justify-center gap-3">
+        {isLoading && <Loader className="animate-spin" />}
+        {children}
+      </span>
+    </button>
+  );
+};
+export default NeoButtonComponent;

src/components/OptionCard.tsx ADDED Viewed

	@@ -0,0 +1,88 @@

+import { useState } from "react";
+import type React from "react";
+import { Pencil } from "lucide-react";
+interface OptionCardProps {
+  title: string;
+  options: string[];
+  selected: string;
+  onSelect: (value: string) => void;
+  customValue: string;
+  onCustomChange: (value: string) => void;
+  isShuffling: boolean;
+  isVisible: boolean;
+  playPopSound: () => void;
+  playHoverSound: () => void;
+}
+const OptionCard: React.FC<OptionCardProps> = ({
+  title,
+  options,
+  selected,
+  onSelect,
+  customValue,
+  onCustomChange,
+  isShuffling,
+  isVisible,
+  playPopSound,
+  playHoverSound,
+}) => {
+  const [isCustom, setIsCustom] = useState(false);
+  const handleSelect = (option: string) => {
+    playPopSound();
+    setIsCustom(false);
+    onSelect(option);
+    onCustomChange("");
+  };
+  const handleCustomClick = () => {
+    playPopSound();
+    setIsCustom(true);
+    onSelect("");
+  };
+  const shuffleClass = isShuffling ? "animate-shake" : "";
+  const visibilityClass = isVisible ? "animate-slide-in opacity-100" : "opacity-0 pointer-events-none";
+  return (
+    <div
+      className={`bg-white border-2 border-black rounded-xl p-6 shadow-[6px_6px_0px_rgba(0,0,0,0.1)] transition-opacity duration-500 ${shuffleClass} ${visibilityClass}`}
+    >
+      <h3 className="text-2xl font-bold mb-4">{title}</h3>
+      <div className="flex flex-wrap gap-3">
+        {options.map((option) => (
+          <button
+            key={option}
+            onClick={() => handleSelect(option)}
+            onMouseEnter={playHoverSound}
+            className={`font-semibold py-2 px-4 border-2 rounded-md transition-all duration-150 transform hover:-translate-y-0.5 active:translate-y-0 ${selected === option && !isCustom ? "bg-black text-white border-black" : "bg-gray-100 hover:bg-gray-200 border-gray-300"}`}
+          >
+            {option}
+          </button>
+        ))}
+        <button
+          onClick={handleCustomClick}
+          onMouseEnter={playHoverSound}
+          className={`font-semibold py-2 px-4 border-2 rounded-md transition-all duration-150 flex items-center gap-2 transform hover:-translate-y-0.5 active:translate-y-0 ${isCustom ? "bg-black text-white border-black" : "bg-gray-100 hover:bg-gray-200 border-gray-300"}`}
+        >
+          <Pencil size={16} />
+          Write your own
+        </button>
+      </div>
+      {isCustom && (
+        <input
+          type="text"
+          value={customValue}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            onCustomChange(e.target.value);
+            onSelect("");
+          }}
+          placeholder="Enter your own option..."
+          className="mt-4 w-full p-3 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+        />
+      )}
+    </div>
+  );
+};
+export default OptionCard;

src/components/ProgressScreen.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+import type React from "react";
+interface ProgressScreenProps {
+  progress: number;
+  isVisible: boolean;
+}
+const ProgressScreen: React.FC<ProgressScreenProps> = ({ progress, isVisible }) => {
+  const transitionClass = isVisible ? "opacity-100" : "opacity-0 pointer-events-none";
+  return (
+    <div
+      className={`absolute inset-0 flex flex-col items-center justify-center transition-opacity duration-500 ${transitionClass}`}
+    >
+      <div className="w-full max-w-md text-center">
+        <h2 className="text-3xl font-bold mb-4">Warming up the magic...</h2>
+        <div className="w-full bg-white border-2 border-black rounded-full p-1 shadow-[4px_4px_0px_#000]">
+          <div className="bg-pink-400 h-6 rounded-full" style={{ width: `${progress}%` }} />
+        </div>
+        <p className="mt-2 text-lg font-semibold">{progress.toFixed(2)}%</p>
+      </div>
+    </div>
+  );
+};
+export default ProgressScreen;

src/constants.ts ADDED Viewed

	@@ -0,0 +1,31 @@

+export const STORY_DATA = {
+  characters: [
+    "a brave squirrel",
+    "a shy dragon",
+    "a clever fox",
+    "a sleepy astronaut",
+    "a grumpy gnome",
+    "a cheerful princess",
+    "a tiny robot",
+    "a magical cat",
+  ],
+  settings: [
+    "on the moon",
+    "in an enchanted forest",
+    "under the sea",
+    "in a castle made of clouds",
+    "inside a giant's boot",
+    "at a wizard's school",
+    "on a floating island",
+  ],
+  items: [
+    "discovers a map to hidden treasure",
+    "finds a pair of flying shoes",
+    "stumbles upon an invisible cloak",
+    "befriends a friendly ghost",
+    "uncovers a secret door",
+    "meets a wise old man",
+  ],
+  themes: ["Fairy Tale", "Silly", "Adventurous", "Magical", "Bedtime", "Funny"],
+  length: ["Short", "Medium", "Long"],
+};

src/hooks/useAudioPlayer.ts ADDED Viewed

	@@ -0,0 +1,86 @@

+import { useState, useRef, useCallback } from "react";
+type AudioKeys = "pop" | "hover" | "music";
+interface AudioPlayer {
+  initAudio: () => boolean;
+  playPopSound: () => void;
+  playHoverSound: () => void;
+  toggleMusic: () => void;
+  playMusic: () => void;
+  isMusicPlaying: boolean;
+  isAudioReady: boolean;
+}
+const useAudioPlayer = (): AudioPlayer => {
+  const audioRefs = useRef<Record<AudioKeys, HTMLAudioElement | null>>({
+    pop: null,
+    hover: null,
+    music: null,
+  });
+  const [isReady, setIsReady] = useState<boolean>(false);
+  const [isMusicPlaying, setIsMusicPlaying] = useState<boolean>(false);
+  const initAudio = useCallback(() => {
+    if (isReady) return true;
+    try {
+      audioRefs.current.pop = new Audio("/bubble.mp3");
+      audioRefs.current.hover = new Audio("/hover.mp3");
+      audioRefs.current.music = new Audio("/music.mp3");
+      audioRefs.current.music.loop = true;
+      audioRefs.current.music.volume = 0.1;
+      setIsReady(true);
+      return true;
+    } catch {
+      return false;
+    }
+  }, [isReady]);
+  const playMusic = useCallback(() => {
+    if (isReady && !isMusicPlaying) {
+      audioRefs.current.music?.play().catch(() => {});
+      setIsMusicPlaying(true);
+    }
+  }, [isReady, isMusicPlaying]);
+  const toggleMusic = useCallback(
+    (force?: boolean) => {
+      if (!isReady || !audioRefs.current.music) return;
+      const shouldBePlaying = force === undefined ? !isMusicPlaying : force;
+      if (shouldBePlaying === isMusicPlaying) return;
+      if (shouldBePlaying) {
+        audioRefs.current.music?.play().catch(() => {});
+      } else {
+        audioRefs.current.music?.pause();
+      }
+      setIsMusicPlaying(shouldBePlaying);
+    },
+    [isReady, isMusicPlaying],
+  );
+  const playPopSound = useCallback(() => {
+    if (!isReady || !audioRefs.current.pop) return;
+    audioRefs.current.pop.currentTime = 0;
+    audioRefs.current.pop.play().catch(() => {});
+  }, [isReady]);
+  const playHoverSound = useCallback(() => {
+    if (!isReady || !audioRefs.current.hover) return;
+    audioRefs.current.hover.currentTime = 0;
+    audioRefs.current.hover.play().catch(() => {});
+  }, [isReady]);
+  return {
+    initAudio,
+    playPopSound,
+    playHoverSound,
+    toggleMusic,
+    playMusic,
+    isMusicPlaying,
+    isAudioReady: isReady,
+  };
+};
+export default useAudioPlayer;

src/hooks/useLLM.ts ADDED Viewed

	@@ -0,0 +1,86 @@

+import { useState, useCallback } from "react";
+import { pipeline, TextStreamer } from "@huggingface/transformers";
+import type { TextSplitterStream } from "kokoro-js";
+interface LLMState {
+  isLoading: boolean;
+  isReady: boolean;
+  error: string | null;
+  progress: number;
+}
+type LLMGlobal = { generator: any | null };
+const g = globalThis as any;
+let __LLM: LLMGlobal = g.__LLM || { generator: null };
+g.__LLM = __LLM;
+export type generateFn = (
+  messages: Array<{ role: string; content: string }>,
+  onToken?: (token: string) => void,
+  splitter?: TextSplitterStream,
+) => Promise<void>;
+export const useLLM = () => {
+  const [state, setState] = useState<LLMState>({
+    isLoading: false,
+    isReady: !!__LLM.generator,
+    error: null,
+    progress: __LLM.generator ? 100 : 0,
+  });
+  const load = async () => {
+    if (__LLM.generator) return __LLM.generator;
+    setState((p) => ({ ...p, isLoading: true, error: null, progress: 0 }));
+    try {
+      const generator = await pipeline("text-generation", "onnx-community/gemma-3-270m-it-ONNX", {
+        dtype: "fp32",
+        device: "webgpu",
+        progress_callback: (item) => {
+          if (item.status === "progress" && item.file?.endsWith?.("onnx_data")) {
+            setState((p) => ({ ...p, progress: item.progress || 0 }));
+          }
+        },
+      });
+      __LLM.generator = generator;
+      setState((p) => ({
+        ...p,
+        isLoading: false,
+        isReady: true,
+        progress: 100,
+      }));
+      return generator;
+    } catch (error) {
+      setState((p) => ({
+        ...p,
+        isLoading: false,
+        error: error instanceof Error ? error.message : "Failed to load model",
+      }));
+      throw error;
+    }
+  };
+  const generate: generateFn = useCallback(async (messages, onToken, splitter) => {
+    const generator = __LLM.generator;
+    if (!generator) throw new Error("Model not loaded. Call load() first.");
+    const streamer = new TextStreamer(generator.tokenizer, {
+      skip_prompt: true,
+      skip_special_tokens: true,
+      callback_function: (token: string) => {
+        onToken?.(token);
+        splitter?.push(token);
+      },
+    });
+    await generator(messages, {
+      max_new_tokens: 1024,
+      do_sample: false,
+      streamer,
+    });
+    splitter?.close();
+  }, []);
+  return {
+    ...state,
+    load,
+    generate,
+  };
+};

src/hooks/useTTS.ts ADDED Viewed

	@@ -0,0 +1,75 @@

+import { useState, useCallback } from "react";
+import { KokoroTTS, TextSplitterStream } from "kokoro-js";
+interface TTSState {
+  isLoading: boolean;
+  isReady: boolean;
+  error: string | null;
+  progress: number;
+}
+type TTSGlobal = { model: KokoroTTS | null };
+const g = globalThis as any;
+let __TTS: TTSGlobal = g.__TTS || { model: null };
+g.__TTS = __TTS;
+export const useTTS = () => {
+  const [state, setState] = useState<TTSState>({
+    isLoading: false,
+    isReady: !!__TTS.model,
+    error: null,
+    progress: __TTS.model ? 100 : 0,
+  });
+  const load = async () => {
+    if (__TTS.model) return __TTS.model;
+    setState((p) => ({ ...p, isLoading: true, error: null, progress: 0 }));
+    try {
+      const tts = await KokoroTTS.from_pretrained("onnx-community/Kokoro-82M-v1.0-ONNX", {
+        dtype: "fp32",
+        device: "webgpu",
+        progress_callback: (item) => {
+          if (item.status === "progress" && item.file?.endsWith?.("onnx")) {
+            setState((p) => ({ ...p, progress: item.progress || 0 }));
+          }
+        },
+      });
+      __TTS.model = tts;
+      setState((p) => ({
+        ...p,
+        isLoading: false,
+        isReady: true,
+        progress: 100,
+      }));
+      return tts;
+    } catch (error) {
+      setState((p) => ({
+        ...p,
+        isLoading: false,
+        error: error instanceof Error ? error.message : "Failed to load TTS model",
+      }));
+      throw error;
+    }
+  };
+  const stream = useCallback((onAudioChunk: (chunk: { audio: Float32Array; text?: string }) => void) => {
+    const tts = __TTS.model as KokoroTTS | null;
+    if (!tts) throw new Error("TTS model not loaded. Call load() first.");
+    const splitter = new TextSplitterStream();
+    const ttsStream = tts.stream(splitter);
+    const ttsPromise = (async () => {
+      for await (const chunk of ttsStream) {
+        if (chunk.audio) {
+          onAudioChunk({ audio: chunk.audio.audio, text: chunk.text });
+        }
+      }
+    })();
+    return { splitter, ttsPromise };
+  }, []);
+  return {
+    ...state,
+    load,
+    stream,
+  };
+};

src/index.css ADDED Viewed

	@@ -0,0 +1,88 @@

+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap");
+@import "tailwindcss";
+body {
+  font-family: "Nunito", sans-serif;
+}
+.bg-pattern {
+  background-color: #fef3c7;
+  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fbbf24' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+@keyframes shine {
+  0% {
+    transform: translateX(-100%) skewX(-20deg);
+  }
+  100% {
+    transform: translateX(200%) skewX(-20deg);
+  }
+}
+.animate-shine {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: shine 4s infinite;
+}
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-3px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(3px);
+  }
+}
+.animate-shake {
+  animation: shake 0.3s linear infinite;
+}
+@keyframes slide-in {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.animate-slide-in {
+  animation: slide-in 0.5s ease-out forwards;
+}
+@keyframes pulse-grow {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+.animate-pulse-grow {
+  animation: pulse-grow 3s infinite;
+}
+@keyframes sway {
+  0% {
+    transform: rotate(-1deg);
+  }
+  50% {
+    transform: rotate(1deg);
+  }
+  100% {
+    transform: rotate(-1deg);
+  }
+}
+.animate-sway {
+  animation: sway 8s ease-in-out infinite;
+}

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/play-worklet.js ADDED Viewed

	@@ -0,0 +1,63 @@

+class BufferedAudioWorkletProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.bufferQueue = [];
+    this.currentChunkOffset = 0;
+    this.hadData = false;
+    this.port.onmessage = (event) => {
+      const data = event.data;
+      if (data instanceof Float32Array) {
+        this.hadData = true;
+        this.bufferQueue.push(data);
+      } else if (data === "stop") {
+        this.bufferQueue = [];
+        this.currentChunkOffset = 0;
+      }
+    };
+  }
+  process(inputs, outputs) {
+    const channel = outputs[0][0];
+    if (!channel) return true;
+    const numSamples = channel.length;
+    let outputIndex = 0;
+    if (this.hadData && this.bufferQueue.length === 0) {
+      this.port.postMessage({ type: "playback_ended" });
+      this.hadData = false;
+    }
+    while (outputIndex < numSamples) {
+      if (this.bufferQueue.length > 0) {
+        const currentChunk = this.bufferQueue[0];
+        const remainingSamples = currentChunk.length - this.currentChunkOffset;
+        const samplesToCopy = Math.min(remainingSamples, numSamples - outputIndex);
+        channel.set(
+          currentChunk.subarray(this.currentChunkOffset, this.currentChunkOffset + samplesToCopy),
+          outputIndex,
+        );
+        this.currentChunkOffset += samplesToCopy;
+        outputIndex += samplesToCopy;
+        // Remove the chunk if fully consumed.
+        if (this.currentChunkOffset >= currentChunk.length) {
+          // current chunk finished; advance and signal UI to move highlight
+          this.bufferQueue.shift();
+          this.currentChunkOffset = 0;
+          this.port.postMessage({ type: "next_chunk" });
+        }
+      } else {
+        // If no data is available, fill the rest of the buffer with silence.
+        channel.fill(0, outputIndex);
+        outputIndex = numSamples;
+      }
+    }
+    return true;
+  }
+}
+registerProcessor("buffered-audio-worklet-processor", BufferedAudioWorkletProcessor);

src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="vite/client" />

tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,29 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "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,
+    "types": ["@webgpu/types"]
+  },
+  "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,25 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "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,14 @@

+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()],
+  resolve: {
+    // Only bundle a single instance of Transformers.js
+    // (shared by `@huggingface/transformers` and `kokoro-js`)
+    dedupe: ["@huggingface/transformers"],
+  },
+});