Spaces:

LiquidAI
/

LFM2.5-1.2B-Thinking-WebGPU

Running

App Files Files Community

Xenova HF Staff commited on 3 days ago

Commit

19431b6

verified ·

1 Parent(s): 88d6a13

Upload 30 files

Browse files

Files changed (31) hide show

.gitattributes +5 -0
eslint.config.js +23 -0
index.html +14 -17
package.json +39 -0
public/fonts/JetBrains/JetBrainsMono-Italic-VariableFont_wght.ttf +3 -0
public/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf +3 -0
public/fonts/Söhne/Söhne-Buch.otf +3 -0
public/fonts/Söhne/Söhne-Kräftig.otf +3 -0
public/fonts/Söhne/Söhne-Leicht.otf +3 -0
public/liquid-dark.webp +0 -0
public/liquid.svg +11 -0
src/App.tsx +69 -0
src/components/ChatApp.tsx +272 -0
src/components/HfIcon.tsx +35 -0
src/components/LandingPage.tsx +190 -0
src/components/LiquidIntro.tsx +122 -0
src/components/MessageBubble.tsx +274 -0
src/components/ReasoningBlock.tsx +44 -0
src/components/StatusBar.tsx +41 -0
src/hooks/LLMContext.ts +39 -0
src/hooks/LLMProvider.tsx +235 -0
src/hooks/useLLM.ts +8 -0
src/index.css +272 -0
src/main.tsx +13 -0
src/utils/liquid1.min.d.ts +17 -0
src/utils/liquid1.min.js +0 -0
src/utils/think-parser.ts +136 -0
tsconfig.app.json +28 -0
tsconfig.json +7 -0
tsconfig.node.json +26 -0
vite.config.ts +8 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,8 @@ 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/fonts/JetBrains/JetBrainsMono-Italic-VariableFont_wght.ttf filter=lfs diff=lfs merge=lfs -text
+public/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf filter=lfs diff=lfs merge=lfs -text
+public/fonts/Söhne/Söhne-Buch.otf filter=lfs diff=lfs merge=lfs -text
+public/fonts/Söhne/Söhne-Kräftig.otf filter=lfs diff=lfs merge=lfs -text
+public/fonts/Söhne/Söhne-Leicht.otf 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 { 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 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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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>"
+    />
+    <title>LFM2.5 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,39 @@

+{
+  "name": "lfm2-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": "^4.0.0-next.3",
+    "@streamdown/math": "^1.0.2",
+    "@tailwindcss/vite": "^4.1.18",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "streamdown": "^2.2.0",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "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.48.0",
+    "vite": "^8.0.0-beta.13"
+  },
+  "overrides": {
+    "vite": "^8.0.0-beta.13"
+  }
+}

public/fonts/JetBrains/JetBrainsMono-Italic-VariableFont_wght.ttf ADDED Viewed

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

+version https://git-lfs.github.com/spec/v1
+oid sha256:d2a1563e89aa3c3816abfbca03e295abcdca11d9cbd689a7754cc1c5f454d18f
+size 191988

public/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf ADDED Viewed

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

+version https://git-lfs.github.com/spec/v1
+oid sha256:b6490e1a902e56fc84050bee9aad91509e6f45aa00f96f882dab53c9abaf83eb
+size 187860

public/fonts/Söhne/Söhne-Buch.otf ADDED Viewed

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

+version https://git-lfs.github.com/spec/v1
+oid sha256:d3e050e7df5a5695e1ba1691633f2a8767ea9c6ac747fccf7b23a38e4ca02cc2
+size 191552

public/fonts/Söhne/Söhne-Kräftig.otf ADDED Viewed

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

+version https://git-lfs.github.com/spec/v1
+oid sha256:7f17003124700a22684c3f83ac8252793f1e6e902842e385d4bd4220f94a79cb
+size 245976

public/fonts/Söhne/Söhne-Leicht.otf ADDED Viewed

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

+version https://git-lfs.github.com/spec/v1
+oid sha256:366970f59ef3332afd6d0a2a5bc84e71c002c2a351a93a8a66f315e5892be028
+size 191884

public/liquid-dark.webp ADDED Viewed

public/liquid.svg ADDED Viewed

src/App.tsx ADDED Viewed

	@@ -0,0 +1,69 @@

+import { useEffect, useState } from "react";
+import { LiquidIntro } from "./components/LiquidIntro";
+import { LandingPage } from "./components/LandingPage";
+import { ChatApp } from "./components/ChatApp";
+import { useLLM } from "./hooks/useLLM";
+import "katex/dist/katex.min.css";
+function App() {
+  const { status, loadModel } = useLLM();
+  const [stage, setStage] = useState<"intro" | "app">("intro");
+  const [hasStarted, setHasStarted] = useState(false);
+  const [showChat, setShowChat] = useState(false);
+  const isReady = status.state === "ready";
+  const isLoading = hasStarted && !isReady && status.state !== "error";
+  const handleStart = () => {
+    setHasStarted(true);
+    loadModel();
+  };
+  const handleGoHome = () => {
+    setShowChat(false);
+    setTimeout(() => setHasStarted(false), 700);
+  };
+  useEffect(() => {
+    if (isReady && hasStarted) {
+      setShowChat(true);
+    }
+  }, [isReady, hasStarted]);
+  return (
+    <div className="relative h-screen w-screen brand-surface">
+      {stage === "intro" && (
+        <LiquidIntro onEnter={() => setStage("app")} />
+      )}
+      {stage === "app" && (
+        <>
+          <div
+            className={`absolute inset-0 z-10 transition-all duration-700 ${
+              showChat ? "opacity-0 pointer-events-none" : "opacity-100"
+            }`}
+          >
+            <LandingPage
+              onStart={handleStart}
+              status={status}
+              isLoading={isLoading}
+              showChat={showChat}
+            />
+          </div>
+          <div
+            className={`absolute inset-0 transition-all duration-700 ${
+              showChat ? "opacity-100" : "opacity-0 pointer-events-none"
+            }`}
+          >
+            {hasStarted && <ChatApp onGoHome={handleGoHome} />}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+export default App;

src/components/ChatApp.tsx ADDED Viewed

	@@ -0,0 +1,272 @@

+import { useState, useRef, useEffect, useCallback } from "react";
+import { Send, Square, Plus } from "lucide-react";
+import { useLLM } from "../hooks/useLLM";
+import { MessageBubble } from "./MessageBubble";
+import { StatusBar } from "./StatusBar";
+const EXAMPLE_PROMPTS = [
+  {
+    label: "Solve x² + x - 12 = 0",
+    prompt: "Solve x^2 + x - 12 = 0",
+  },
+  {
+    label: "Explain quantum computing",
+    prompt:
+      "Explain quantum computing in simple terms. What makes it different from classical computing, and what are some real-world applications?",
+  },
+  {
+    label: "Write a Python quicksort",
+    prompt:
+      "Write a clean, well-commented Python implementation of the quicksort algorithm. Include an example of how to use it.",
+  },
+  {
+    label: "Solve a logic puzzle",
+    prompt: "Five people were eating apples, A finished before B, but behind C. D finished before E, but behind B. What was the finishing order?",
+  },
+] as const;
+interface ChatInputProps {
+  showDisclaimer: boolean;
+  animated?: boolean;
+}
+function ChatInput({ showDisclaimer, animated }: ChatInputProps) {
+  const { send, stop, status, isGenerating } = useLLM();
+  const isReady = status.state === "ready";
+  const [input, setInput] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const handleSubmit = useCallback(
+    (e?: React.FormEvent) => {
+      e?.preventDefault();
+      const text = input.trim();
+      if (!text || !isReady || isGenerating) return;
+      setInput("");
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "7.5rem";
+      }
+      send(text);
+    },
+    [input, isReady, isGenerating, send],
+  );
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+  return (
+    <div className={`w-full ${animated ? "animate-rise-in-delayed" : ""}`}>
+      <form onSubmit={handleSubmit} className="mx-auto max-w-3xl">
+        <div className="relative">
+          <textarea
+            ref={textareaRef}
+            className="w-full rounded-xl border border-[#0000001f] bg-white px-4 py-3 pb-11 text-[15px] text-black placeholder-[#6d6d6d] focus:border-[#5505af] focus:outline-none focus:ring-1 focus:ring-[#5505af] disabled:opacity-50 resize-none max-h-40 shadow-sm"
+            style={{ minHeight: "7.5rem", height: "7.5rem" }}
+            placeholder={isReady ? "Type a message…" : "Loading model…"}
+            value={input}
+            onChange={(e) => {
+              setInput(e.target.value);
+              e.target.style.height = "7.5rem";
+              e.target.style.height =
+                Math.max(e.target.scrollHeight, 120) + "px";
+            }}
+            onKeyDown={handleKeyDown}
+            disabled={!isReady}
+            autoFocus
+          />
+          <div className="absolute bottom-2 left-2 right-2 flex items-center justify-end pb-3 px-2">
+            {isGenerating ? (
+              <button
+                type="button"
+                onClick={stop}
+                className="flex items-center justify-center rounded-lg text-[#6d6d6d] hover:text-black transition-colors cursor-pointer"
+                title="Stop generating"
+              >
+                <Square className="h-4 w-4 fill-current" />
+              </button>
+            ) : (
+              <button
+                type="submit"
+                disabled={!isReady || !input.trim()}
+                className="flex items-center justify-center rounded-lg text-[#6d6d6d] hover:text-black disabled:opacity-30 transition-colors cursor-pointer"
+                title="Send message"
+              >
+                <Send className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+        </div>
+      </form>
+      {showDisclaimer && (
+        <p className="mx-auto max-w-3xl mt-1 text-center text-xs text-[#6d6d6d]">
+          No chats are sent to a server. Everything runs locally in your
+          browser. AI can make mistakes. Check important info.
+        </p>
+      )}
+    </div>
+  );
+}
+interface ChatAppProps {
+  onGoHome: () => void;
+}
+export function ChatApp({ onGoHome }: ChatAppProps) {
+  const { messages, isGenerating, send, status, clearChat } = useLLM();
+  const scrollRef = useRef<HTMLElement>(null);
+  const [thinkingSeconds, setThinkingSeconds] = useState(0);
+  const thinkingStartRef = useRef<number | null>(null);
+  const thinkingSecondsMapRef = useRef<Map<number, number>>(new Map());
+  const prevIsGeneratingRef = useRef(false);
+  const messagesRef = useRef(messages);
+  const thinkingSecondsRef = useRef(thinkingSeconds);
+  messagesRef.current = messages;
+  thinkingSecondsRef.current = thinkingSeconds;
+  const isReady = status.state === "ready";
+  const hasMessages = messages.length > 0;
+  const showNewChat = isReady && hasMessages && !isGenerating;
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) {
+      el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+    }
+  }, [messages]);
+  useEffect(() => {
+    if (prevIsGeneratingRef.current && !isGenerating) {
+      const lastMsg = messagesRef.current.at(-1);
+      if (lastMsg?.role === "assistant" && lastMsg.reasoning && thinkingSecondsRef.current > 0) {
+        thinkingSecondsMapRef.current.set(lastMsg.id, thinkingSecondsRef.current);
+      }
+    }
+    prevIsGeneratingRef.current = isGenerating;
+  }, [isGenerating]);
+  useEffect(() => {
+    if (!isGenerating) {
+      thinkingStartRef.current = null;
+      return;
+    }
+    thinkingStartRef.current = Date.now();
+    setThinkingSeconds(0);
+    const interval = setInterval(() => {
+      if (thinkingStartRef.current) {
+        setThinkingSeconds(
+          Math.round((Date.now() - thinkingStartRef.current) / 1000),
+        );
+      }
+    }, 500);
+    return () => clearInterval(interval);
+  }, [isGenerating]);
+  const lastAssistant = messages.at(-1);
+  useEffect(() => {
+    if (isGenerating && lastAssistant?.role === "assistant" && lastAssistant.content) {
+      thinkingStartRef.current = null;
+    }
+  }, [isGenerating, lastAssistant?.role, lastAssistant?.content]);
+  return (
+    <div className="flex h-full flex-col brand-surface text-black">
+      <header className="flex-none flex items-center justify-between border-b border-[#0000001f] px-6 py-3 h-14">
+        <button
+          onClick={onGoHome}
+          className="cursor-pointer transition-transform duration-300 hover:scale-[1.02]"
+          title="Back to home"
+        >
+          <img
+            src="/liquid.svg"
+            alt="Liquid AI"
+            className="h-6 w-auto"
+            draggable={false}
+          />
+        </button>
+        <button
+          onClick={clearChat}
+          className={`flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-[#6d6d6d] hover:text-black hover:bg-[#f5f5f5] transition-opacity duration-300 cursor-pointer ${
+            showNewChat ? "opacity-100" : "opacity-0 pointer-events-none"
+          }`}
+          title="New chat"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          New chat
+        </button>
+      </header>
+      {!hasMessages ? (
+        <div className="flex flex-1 flex-col items-center justify-center px-4">
+          <div className="mb-8 text-center animate-rise-in">
+            <p className="text-3xl font-medium text-black">
+              What can I help you with?
+            </p>
+          </div>
+          <ChatInput showDisclaimer={false} animated />
+          <div className="mt-6 flex flex-wrap justify-center gap-2 max-w-3xl animate-rise-in-delayed">
+            {EXAMPLE_PROMPTS.map(({ label, prompt }) => (
+              <button
+                key={label}
+                onClick={() => send(prompt)}
+                className="rounded-lg border border-[#0000001f] bg-white px-3 py-2 text-xs text-[#6d6d6d] hover:text-black hover:border-[#5505af] transition-colors cursor-pointer shadow-sm"
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <>
+          <main
+            ref={scrollRef}
+            className="min-h-0 flex-1 overflow-y-auto px-4 py-6 animate-fade-in"
+          >
+            <div className="mx-auto flex max-w-3xl flex-col gap-4">
+              {!isReady && <StatusBar />}
+              {messages.map((msg, i) => {
+                const isLast = i === messages.length - 1 && msg.role === "assistant";
+                return (
+                  <MessageBubble
+                    key={msg.id}
+                    msg={msg}
+                    index={i}
+                    isStreaming={isGenerating && isLast}
+                    thinkingSeconds={isLast ? thinkingSeconds : thinkingSecondsMapRef.current.get(msg.id)}
+                    isGenerating={isGenerating}
+                  />
+                );
+              })}
+            </div>
+          </main>
+          <footer className="flex-none px-4 py-3 animate-fade-in relative">
+            {isReady && (
+              <div className="absolute bottom-full left-0 right-0 flex justify-center pointer-events-none mb-[-8px]">
+                <div className="pointer-events-auto">
+                  <StatusBar />
+                </div>
+              </div>
+            )}
+            <ChatInput showDisclaimer animated />
+          </footer>
+        </>
+      )}
+    </div>
+  );
+}

src/components/HfIcon.tsx ADDED Viewed

	@@ -0,0 +1,35 @@

+import type React from "react";
+export default (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      d="M2.25 11.535c0-3.407 1.847-6.554 4.844-8.258a9.822 9.822 0 019.687 0c2.997 1.704 4.844 4.851 4.844 8.258 0 5.266-4.337 9.535-9.687 9.535S2.25 16.8 2.25 11.535z"
+      fill="#FF9D0B"
+    ></path>
+    <path
+      d="M11.938 20.086c4.797 0 8.687-3.829 8.687-8.551 0-4.722-3.89-8.55-8.687-8.55-4.798 0-8.688 3.828-8.688 8.55 0 4.722 3.89 8.55 8.688 8.55z"
+      fill="#FFD21E"
+    ></path>
+    <path
+      d="M11.875 15.113c2.457 0 3.25-2.156 3.25-3.263 0-.576-.393-.394-1.023-.089-.582.283-1.365.675-2.224.675-1.798 0-3.25-1.693-3.25-.586 0 1.107.79 3.263 3.25 3.263h-.003z"
+      fill="#FF323D"
+    ></path>
+    <path
+      d="M14.76 9.21c.32.108.445.753.767.585.447-.233.707-.708.659-1.204a1.235 1.235 0 00-.879-1.059 1.262 1.262 0 00-1.33.394c-.322.384-.377.92-.14 1.36.153.283.638-.177.925-.079l-.002.003zm-5.887 0c-.32.108-.448.753-.768.585a1.226 1.226 0 01-.658-1.204c.048-.495.395-.913.878-1.059a1.262 1.262 0 011.33.394c.322.384.377.92.14 1.36-.152.283-.64-.177-.925-.079l.003.003zm1.12 5.34a2.166 2.166 0 011.325-1.106c.07-.02.144.06.219.171l.192.306c.069.1.139.175.209.175.074 0 .15-.074.223-.172l.205-.302c.08-.11.157-.188.234-.165.537.168.986.536 1.25 1.026.932-.724 1.275-1.905 1.275-2.633 0-.508-.306-.426-.81-.19l-.616.296c-.52.24-1.148.48-1.824.48-.676 0-1.302-.24-1.823-.48l-.589-.283c-.52-.248-.838-.342-.838.177 0 .703.32 1.831 1.187 2.56l.18.14z"
+      fill="#3A3B45"
+    ></path>
+    <path
+      d="M17.812 10.366a.806.806 0 00.813-.8c0-.441-.364-.8-.813-.8a.806.806 0 00-.812.8c0 .442.364.8.812.8zm-11.624 0a.806.806 0 00.812-.8c0-.441-.364-.8-.812-.8a.806.806 0 00-.813.8c0 .442.364.8.813.8zM4.515 13.073c-.405 0-.765.162-1.017.46a1.455 1.455 0 00-.333.925 1.801 1.801 0 00-.485-.074c-.387 0-.737.146-.985.409a1.41 1.41 0 00-.2 1.722 1.302 1.302 0 00-.447.694c-.06.222-.12.69.2 1.166a1.267 1.267 0 00-.093 1.236c.238.533.81.958 1.89 1.405l.24.096c.768.3 1.473.492 1.478.494.89.243 1.808.375 2.732.394 1.465 0 2.513-.443 3.115-1.314.93-1.342.842-2.575-.274-3.763l-.151-.154c-.692-.684-1.155-1.69-1.25-1.912-.195-.655-.71-1.383-1.562-1.383-.46.007-.889.233-1.15.605-.25-.31-.495-.553-.715-.694a1.87 1.87 0 00-.993-.312zm14.97 0c.405 0 .767.162 1.017.46.216.262.333.588.333.925.158-.047.322-.071.487-.074.388 0 .738.146.985.409a1.41 1.41 0 01.2 1.722c.22.178.377.422.445.694.06.222.12.69-.2 1.166.244.37.279.836.093 1.236-.238.533-.81.958-1.889 1.405l-.239.096c-.77.3-1.475.492-1.48.494-.89.243-1.808.375-2.732.394-1.465 0-2.513-.443-3.115-1.314-.93-1.342-.842-2.575.274-3.763l.151-.154c.695-.684 1.157-1.69 1.252-1.912.195-.655.708-1.383 1.56-1.383.46.007.889.233 1.15.605.25-.31.495-.553.718-.694.244-.162.523-.265.814-.3l.176-.012z"
+      fill="#FF9D0B"
+    ></path>
+    <path
+      d="M9.785 20.132c.688-.994.638-1.74-.305-2.667-.945-.928-1.495-2.288-1.495-2.288s-.205-.788-.672-.714c-.468.074-.81 1.25.17 1.971.977.721-.195 1.21-.573.534-.375-.677-1.405-2.416-1.94-2.751-.532-.332-.907-.148-.782.541.125.687 2.357 2.35 2.14 2.707-.218.362-.983-.42-.983-.42S2.953 14.9 2.43 15.46c-.52.558.398 1.026 1.7 1.803 1.308.778 1.41.985 1.225 1.28-.187.295-3.07-2.1-3.34-1.083-.27 1.011 2.943 1.304 2.745 2.006-.2.7-2.265-1.324-2.685-.537-.425.79 2.913 1.718 2.94 1.725 1.075.276 3.813.859 4.77-.522zm4.432 0c-.687-.994-.64-1.74.305-2.667.943-.928 1.493-2.288 1.493-2.288s.205-.788.675-.714c.465.074.807 1.25-.17 1.971-.98.721.195 1.21.57.534.377-.677 1.407-2.416 1.94-2.751.532-.332.91-.148.782.541-.125.687-2.355 2.35-2.137 2.707.215.362.98-.42.98-.42S21.05 14.9 21.57 15.46c.52.558-.395 1.026-1.7 1.803-1.308.778-1.408.985-1.225 1.28.187.295 3.07-2.1 3.34-1.083.27 1.011-2.94 1.304-2.743 2.006.2.7 2.263-1.324 2.685-.537.423.79-2.912 1.718-2.94 1.725-1.077.276-3.815.859-4.77-.522z"
+      fill="#FFD21E"
+    ></path>
+  </svg>
+);

src/components/LandingPage.tsx ADDED Viewed

	@@ -0,0 +1,190 @@

+import { useState, useEffect } from "react";
+import {
+  Loader2,
+  Rocket,
+  ShieldCheck,
+  Brain,
+  ArrowUpRight,
+} from "lucide-react";
+import type { LoadingStatus } from "../hooks/LLMContext";
+import HfIcon from "./HfIcon";
+interface LandingPageProps {
+  onStart: () => void;
+  status: LoadingStatus;
+  isLoading: boolean;
+  showChat: boolean;
+}
+const cards = [
+  {
+    title: "Step-by-step reasoning",
+    eyebrow: "REASONING MODEL",
+    body: "LFM2.5-Thinking generates its reasoning process before producing final answers, improving accuracy on complex tasks like math, coding, and logic.",
+    Icon: Rocket,
+  },
+  {
+    title: "Private edge inference",
+    eyebrow: "LOCAL & PRIVATE",
+    body: "WebGPU-accelerated browser inference ensures high performance. No data is sent to a server, and the demo can even run offline after the initial download.",
+    Icon: ShieldCheck,
+  },
+  {
+    title: "Scaled reinforcement",
+    eyebrow: "TRAINING PIPELINE",
+    body: "The 1.2B parameter model benefits from extended pre-training on 28T tokens and large-scale multi-stage reinforcement learning for best-in-class performance.",
+    Icon: Brain,
+  },
+] as const;
+export function LandingPage({ onStart, status, isLoading, showChat }: LandingPageProps) {
+  const [introFade, setIntroFade] = useState(true);
+  useEffect(() => {
+    const t = setTimeout(() => setIntroFade(false), 50);
+    return () => clearTimeout(t);
+  }, []);
+  const hideMainContent = isLoading || showChat;
+  const readyToStart = status.state === "ready";
+  return (
+    <div className="brand-surface relative flex h-screen flex-col overflow-hidden text-black">
+      <div className="landing-brand-glow absolute inset-0" />
+      <div
+        className={`absolute inset-0 z-50 bg-white transition-opacity duration-1000 pointer-events-none ${
+          introFade ? "opacity-100" : "opacity-0"
+        }`}
+      />
+      <div
+        className={`relative z-10 mx-auto flex h-full w-full max-w-7xl flex-col px-6 pb-10 pt-8 sm:px-8 lg:px-14 transition-all duration-700 ${
+          hideMainContent
+            ? "opacity-0 translate-y-4 pointer-events-none"
+            : "opacity-100"
+        }`}
+      >
+        <header className="animate-rise-in flex items-start justify-between">
+          <img
+            src="/liquid.svg"
+            alt="Liquid AI"
+            className="h-10 w-auto sm:h-12"
+            draggable={false}
+          />
+          <p className="font-support text-[10px] uppercase tracking-[0.22em] text-[#000000b3] sm:text-xs">
+            LFM2.5 WebGPU Demo
+          </p>
+        </header>
+        <section className="mt-14 flex flex-col items-center text-center">
+          <div className="animate-rise-in-delayed space-y-5">
+            <p className="font-support text-xs uppercase tracking-[0.2em] text-[#5505afb3]">
+              Capable and efficient general-purpose AI systems at every scale
+            </p>
+            <h1 className="max-w-3xl text-4xl font-bold leading-[1.04] tracking-tight sm:text-6xl lg:text-7xl">
+              Capable reasoning.<br />Local inference.<br />WebGPU accelerated.
+            </h1>
+            <p className="max-w-2xl mx-auto text-base leading-relaxed text-[#000000b3] sm:text-lg">
+              Run
+              <a
+                href="https://huggingface.co/LiquidAI/LFM2.5-1.2B-Thinking-ONNX"
+                target="_blank"
+                rel="noreferrer"
+                className="mx-1 underline decoration-[#5505af4d] underline-offset-4 hover:text-[#5505af] transition-colors"
+              >
+                LFM2.5-1.2B-Thinking
+              </a>
+              directly in your browser, powered by
+              <HfIcon className="size-7 inline-block ml-1 mb-[1px]" />
+              <a
+                href="https://github.com/huggingface/transformers.js"
+                target="_blank"
+                rel="noreferrer"
+                className="ml-1 underline decoration-[#5505af4d] underline-offset-4 hover:text-[#5505af] transition-colors"
+              >
+                Transformers.js
+              </a>
+            </p>
+          </div>
+        </section>
+        <section className="mt-10 flex flex-col lg:flex-row gap-4">
+          {cards.map(({ eyebrow, title, body, Icon }, idx) => (
+            <article
+              key={title}
+              className="animate-rise-in flex-1 flex items-start gap-4 rounded-2xl border border-[#0000001a] bg-[#ffffffcc] px-4 py-4 backdrop-blur-sm sm:gap-5 sm:px-6 sm:py-5"
+              style={{ animationDelay: `${120 + idx * 90}ms` }}
+            >
+              <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-[#5505af4d] bg-[linear-gradient(135deg,#5505AF_0%,#CD82F0_55%,#FF5F1E_100%)] text-white">
+                <Icon className="h-5 w-5" />
+              </div>
+              <div className="min-w-0 text-left">
+                <p className="font-support text-[10px] uppercase tracking-[0.2em] text-[#00000080]">
+                  {eyebrow}
+                </p>
+                <h3 className="mt-1 text-xl font-medium leading-tight text-black">
+                  {title}
+                </h3>
+                <p className="mt-2 text-sm leading-relaxed text-[#000000b3] sm:text-[15px]">
+                  {body}
+                </p>
+              </div>
+            </article>
+          ))}
+        </section>
+        <section className="mt-10 flex flex-col items-center animate-rise-in" style={{ animationDelay: "400ms" }}>
+          <button
+            onClick={onStart}
+            className="inline-flex w-full max-w-sm items-center justify-center gap-2 rounded-xl bg-black px-6 py-3.5 text-base font-semibold text-white transition-transform duration-200 hover:-translate-y-0.5 hover:bg-[#5505af] cursor-pointer"
+          >
+            {readyToStart
+              ? "Start chatting"
+              : "Load model & start chatting"}
+            <ArrowUpRight className="h-4 w-4" />
+          </button>
+          {!readyToStart && (
+            <p className="mt-3 text-xs text-[#00000080]">
+              ~750 MB will be downloaded and cached locally for future sessions.
+            </p>
+          )}
+        </section>
+      </div>
+      <div
+        className={`brand-surface absolute inset-0 z-20 flex flex-col items-center justify-center transition-opacity duration-700 ${
+          isLoading ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+      >
+        <div className={`flex w-full max-w-md flex-col items-center px-6 transition-all duration-700 ${isLoading ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}>
+          <img
+            src="/liquid.svg"
+            alt="Liquid AI"
+            className="mb-8 h-9 w-auto"
+            draggable={false}
+          />
+          <Loader2 className="h-10 w-10 animate-spin text-[#5505af]" />
+          <p className="mt-4 text-sm tracking-wide text-[#000000b3]">
+            {status.state === "loading"
+              ? (status.message ?? "Loading model…")
+              : status.state === "error"
+                ? "Error"
+                : "Initializing…"}
+          </p>
+          <div className="mt-4 h-1.5 w-full rounded-full bg-[#0000001a] overflow-hidden">
+            <div
+              className="h-full rounded-full bg-[linear-gradient(90deg,#5505AF_0%,#CD82F0_60%,#FF5F1E_100%)] transition-[width] duration-300 ease-out"
+              style={{
+                width: `${status.state === "ready" ? 100 : status.state === "loading" && status.progress != null ? status.progress : 0}%`,
+              }}
+            />
+          </div>
+          {status.state === "error" && (
+            <p className="mt-3 text-sm text-red-600">{status.error}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/LiquidIntro.tsx ADDED Viewed

	@@ -0,0 +1,122 @@

+/**
+ * Liquid effect adapted from https://www.framer.com/@kevin-levron/
+ */
+import { useEffect, useRef, useCallback, useState } from "react";
+import LiquidBackground from "../utils/liquid1.min.js";
+type LiquidApp = ReturnType<typeof LiquidBackground>;
+interface LiquidIntroProps {
+  onEnter: () => void;
+}
+export function LiquidIntro({ onEnter }: LiquidIntroProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const appRef = useRef<LiquidApp | null>(null);
+  const [fading, setFading] = useState(false);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    let disposed = false;
+    async function init() {
+      if (disposed || !canvasRef.current) return;
+      const app = LiquidBackground(canvasRef.current);
+      appRef.current = app;
+      app.loadImage("/liquid-dark.webp");
+      app.liquidPlane.material.metalness = 0.75;
+      app.liquidPlane.material.roughness = 0.58;
+      app.liquidPlane.uniforms.displacementScale.value = 5;
+      app.setRain(false);
+      // Small delay to let the first frame render
+      setTimeout(() => {
+        if (!disposed) setReady(true);
+      }, 300);
+    }
+    init();
+    return () => {
+      disposed = true;
+      if (appRef.current) {
+        appRef.current.dispose();
+        appRef.current = null;
+      }
+    };
+  }, []);
+  const handleClick = useCallback(() => {
+    if (fading) return;
+    setFading(true);
+    setTimeout(() => {
+      if (appRef.current) {
+        appRef.current.dispose();
+        appRef.current = null;
+      }
+      onEnter();
+    }, 600);
+  }, [fading, onEnter]);
+  return (
+    <div
+      className="absolute inset-0 z-30 cursor-pointer"
+      onClick={handleClick}
+    >
+      <canvas
+        ref={canvasRef}
+        className={`absolute inset-0 w-full h-full transition-opacity duration-700 ${
+          ready ? "opacity-100" : "opacity-0"
+        }`}
+      />
+      <div
+        className={`absolute inset-0 flex flex-col items-center justify-end transition-opacity duration-500 pb-10 ${
+          fading ? "opacity-0" : ready ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        <h1 className="text-6xl sm:text-7xl font-bold tracking-tight select-none">
+          <span className="text-black">LFM2.5</span>{" "}
+          <span className="text-gray-900">WebGPU</span>
+        </h1>
+        <p className="mt-6 text-lg text-gray-800 select-none animate-pulse-gentle">
+          Click anywhere to start
+        </p>
+      </div>
+      <div
+        className={`absolute bottom-4 right-4 text-right text-gray-500/70 select-none transition-opacity duration-500 flex flex-col space-y-[4px] ${
+          fading ? "opacity-0" : ready ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        <a
+          href="https://codepen.io/soju22/pen/myVWBGa"
+          target="_blank"
+          rel="noreferrer"
+          className="hover:text-gray-800 transition-colors text-[14px]"
+          onClick={(e) => e.stopPropagation()}
+        >
+          Liquid effect by Kevin Levron
+        </a>
+        <a
+          href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
+          target="_blank"
+          rel="noreferrer"
+          className="hover:text-gray-800 transition-colors text-[12px]"
+          onClick={(e) => e.stopPropagation()}
+        >
+          Licensed under CC BY-NC-SA 4.0
+        </a>
+      </div>
+      <div
+        className={`absolute inset-0 bg-white transition-opacity duration-600 pointer-events-none ${
+          fading ? "opacity-100" : "opacity-0"
+        }`}
+      />
+    </div>
+  );
+}

src/components/MessageBubble.tsx ADDED Viewed

	@@ -0,0 +1,274 @@

+import { useState, useRef, useEffect, useCallback } from "react";
+import { Streamdown } from "streamdown";
+import { createMathPlugin } from "@streamdown/math";
+import {
+  Pencil,
+  X,
+  Check,
+  RotateCcw,
+  Copy,
+  ClipboardCheck,
+} from "lucide-react";
+import { useLLM } from "../hooks/useLLM";
+import { ReasoningBlock } from "./ReasoningBlock";
+import type { ChatMessage } from "../hooks/LLMContext";
+const math = createMathPlugin({singleDollarTextMath: true})
+interface MessageBubbleProps {
+  msg: ChatMessage;
+  index: number;
+  isStreaming?: boolean;
+  thinkingSeconds?: number;
+  isGenerating: boolean;
+}
+// LaTeX commands to auto-wrap with $…$ when found outside math context.
+// `args` is the number of consecutive {…} groups the command consumes.
+const MATH_COMMANDS: { prefix: string; args: number }[] = [
+  { prefix: "\\boxed{", args: 1 },
+  { prefix: "\\text{", args: 1 },
+  { prefix: "\\textbf{", args: 1 },
+  { prefix: "\\mathbf{", args: 1 },
+  { prefix: "\\mathrm{", args: 1 },
+  { prefix: "\\frac{", args: 2 },
+];
+/** Advance past a single `{…}` group (including nested braces). */
+function skipBraceGroup(content: string, start: number): number {
+  let depth = 1;
+  let j = start;
+  while (j < content.length && depth > 0) {
+    if (content[j] === "{") depth++;
+    else if (content[j] === "}") depth--;
+    j++;
+  }
+  return j;
+}
+function wrapLatexMath(content: string): string {
+  let result = "";
+  let i = 0;
+  // Track math context: null = not in math, "$" = inline, "$$" = display
+  let mathContext: null | "$" | "$$" = null;
+  while (i < content.length) {
+    const cmd = !mathContext
+      ? MATH_COMMANDS.find((c) => content.startsWith(c.prefix, i))
+      : undefined;
+    if (cmd) {
+      let j = skipBraceGroup(content, i + cmd.prefix.length);
+      for (let a = 1; a < cmd.args; a++) {
+        if (content[j] === "{") {
+          j = skipBraceGroup(content, j + 1);
+        }
+      }
+      const expr = content.slice(i, j);
+      result += "$" + expr + "$";
+      i = j;
+    } else if (content[i] === "$") {
+      // Check for $$ (display math) vs $ (inline math)
+      const isDouble = content[i + 1] === "$";
+      const token = isDouble ? "$$" : "$";
+      if (mathContext === token) {
+        mathContext = null; // closing delimiter
+      } else if (!mathContext) {
+        mathContext = token; // opening delimiter
+      }
+      result += token;
+      i += token.length;
+    } else {
+      result += content[i];
+      i++;
+    }
+  }
+  return result;
+}
+function prepareForMathDisplay(content: string): string {
+  return wrapLatexMath(
+    content
+      .replace(/(?<!\\)\\\[/g, "$$$$")
+      .replace(/\\\]/g, "$$$$")
+      .replace(/(?<!\\)\\\(/g, "$$$$")
+      .replace(/\\\)/g, "$$$$"),
+  );
+}
+export function MessageBubble({
+  msg,
+  index,
+  isStreaming,
+  thinkingSeconds,
+  isGenerating,
+}: MessageBubbleProps) {
+  const { editMessage, retryMessage } = useLLM();
+  const isUser = msg.role === "user";
+  const isThinking = !!isStreaming && !msg.content;
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(msg.content);
+  const [copied, setCopied] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(msg.content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [msg.content]);
+  useEffect(() => {
+    if (isEditing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height =
+        textareaRef.current.scrollHeight + "px";
+    }
+  }, [isEditing]);
+  const handleEdit = useCallback(() => {
+    setEditValue(msg.content);
+    setIsEditing(true);
+  }, [msg.content]);
+  const handleCancel = useCallback(() => {
+    setIsEditing(false);
+    setEditValue(msg.content);
+  }, [msg.content]);
+  const handleSave = useCallback(() => {
+    const trimmed = editValue.trim();
+    if (!trimmed) return;
+    setIsEditing(false);
+    editMessage(index, trimmed);
+  }, [editValue, editMessage, index]);
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") handleCancel();
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSave();
+      }
+    },
+    [handleCancel, handleSave],
+  );
+  if (isEditing) {
+    return (
+      <div className="flex justify-end">
+        <div className="w-full max-w-[80%] flex flex-col gap-2">
+          <textarea
+            ref={textareaRef}
+            value={editValue}
+            onChange={(e) => {
+              setEditValue(e.target.value);
+              e.target.style.height = "auto";
+              e.target.style.height = e.target.scrollHeight + "px";
+            }}
+            onKeyDown={handleKeyDown}
+            className="w-full rounded-xl border border-[#0000001f] bg-white px-4 py-3 text-sm text-black placeholder-[#6d6d6d] focus:border-[#5505af] focus:outline-none focus:ring-1 focus:ring-[#5505af] resize-none shadow-sm"
+            rows={1}
+          />
+          <div className="flex justify-end gap-2">
+            <button
+              onClick={handleCancel}
+              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-[#6d6d6d] hover:text-black border border-[#0000001f] hover:bg-[#f5f5f5] transition-colors cursor-pointer"
+            >
+              <X className="h-3 w-3" />
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={!editValue.trim()}
+              className="flex items-center gap-1.5 rounded-lg bg-black px-3 py-1.5 text-xs font-medium text-white hover:bg-[#1f1f1f] disabled:opacity-40 transition-colors cursor-pointer"
+            >
+              <Check className="h-3 w-3" />
+              Update
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div
+      className={`group flex items-start gap-2 ${isUser ? "justify-end" : "justify-start"}`}
+    >
+      {isUser && !isGenerating && (
+        <button
+          onClick={handleEdit}
+          className="mt-3 opacity-0 group-hover:opacity-100 transition-opacity text-[#6d6d6d] hover:text-black cursor-pointer"
+          title="Edit message"
+        >
+          <Pencil className="h-3.5 w-3.5" />
+        </button>
+      )}
+      <div
+        className={`max-w-[80%] rounded-2xl px-4 py-3 text-sm leading-relaxed ${
+          isUser
+            ? "bg-black text-white rounded-br-md whitespace-pre-wrap"
+            : "bg-white text-black rounded-bl-md border border-[#0000001f] shadow-sm"
+        }`}
+      >
+        {!isUser && msg.reasoning && (
+          <ReasoningBlock
+            reasoning={msg.reasoning}
+            isThinking={isThinking}
+            thinkingSeconds={thinkingSeconds ?? 0}
+          />
+        )}
+        {msg.content ? (
+          isUser ? (
+            msg.content
+          ) : (
+            <Streamdown
+              plugins={{ math }}
+              parseIncompleteMarkdown={false}
+              isAnimating={isStreaming}
+            >
+              {prepareForMathDisplay(msg.content)}
+            </Streamdown>
+          )
+        ) : !isUser && !isStreaming ? (
+          <p className="italic text-[#6d6d6d]">No response</p>
+        ) : null}
+      </div>
+      {!isUser && !isStreaming && !isGenerating && (
+        <div className="mt-3 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          {msg.content && (
+            <button
+              onClick={handleCopy}
+              className="rounded-md p-1 text-[#6d6d6d] hover:text-black hover:bg-[#f5f5f5] transition-colors cursor-pointer"
+              title="Copy response"
+            >
+              {copied ? (
+                <ClipboardCheck className="h-3.5 w-3.5" />
+              ) : (
+                <Copy className="h-3.5 w-3.5" />
+              )}
+            </button>
+          )}
+          <button
+            onClick={() => retryMessage(index)}
+            className="rounded-md p-1 text-[#6d6d6d] hover:text-black hover:bg-[#f5f5f5] transition-colors cursor-pointer"
+            title="Retry"
+          >
+            <RotateCcw className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/ReasoningBlock.tsx ADDED Viewed

	@@ -0,0 +1,44 @@

+import { useState, useEffect } from "react";
+import { Brain, ChevronDown } from "lucide-react";
+interface ReasoningBlockProps {
+  reasoning: string;
+  isThinking: boolean;
+  thinkingSeconds: number;
+}
+export function ReasoningBlock({
+  reasoning,
+  isThinking,
+  thinkingSeconds,
+}: ReasoningBlockProps) {
+  const [open, setOpen] = useState(isThinking);
+  useEffect(() => {
+    setOpen(isThinking);
+  }, [isThinking]);
+  return (
+    <div className="mb-3">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center gap-2 text-xs text-[#6d6d6d] hover:text-black transition-colors cursor-pointer"
+      >
+        <Brain className="h-3.5 w-3.5" />
+        {isThinking ? (
+          <span className="thinking-shimmer font-medium">Thinking…</span>
+        ) : (
+          <span>Thought for {thinkingSeconds}s</span>
+        )}
+        <ChevronDown
+          className={`h-3 w-3 transition-transform duration-200 ${open ? "" : "-rotate-90"}`}
+        />
+      </button>
+      {open && (
+        <div className="mt-2 rounded-lg border border-[#0000001f] bg-[#f5f5f5] px-3 py-2 text-xs text-[#6d6d6d] whitespace-pre-wrap">
+          {reasoning.trim()}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/StatusBar.tsx ADDED Viewed

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

+import { Loader2 } from "lucide-react";
+import { useLLM } from "../hooks/useLLM";
+export function StatusBar() {
+  const { status, tps, isGenerating } = useLLM();
+  if (status.state === "loading") {
+    return (
+      <div className="flex flex-col items-center gap-2 py-12 text-[#6d6d6d]">
+        <Loader2 className="h-8 w-8 animate-spin text-[#5505af]" />
+        <p className="text-sm">{status.message ?? "Loading model…"}</p>
+        {status.progress != null && (
+          <div className="w-64 h-2 bg-[#e5e5e5] rounded-full overflow-hidden">
+            <div
+              className="h-full bg-[#5505af]"
+              style={{ width: `${status.progress}%` }}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+  if (status.state === "error") {
+    return (
+      <div className="py-12 text-center text-sm text-red-600">
+        Error loading model: {status.error}
+      </div>
+    );
+  }
+  if (isGenerating && tps > 0) {
+    return (
+      <div className="text-center text-xs text-[#6d6d6d] py-1">
+        {tps} tokens/s
+      </div>
+    );
+  }
+  return null;
+}

src/hooks/LLMContext.ts ADDED Viewed

	@@ -0,0 +1,39 @@

+import { createContext } from "react";
+let nextMessageId = 0;
+export function createMessageId(): number {
+  return nextMessageId++;
+}
+export interface ChatMessage {
+  id: number;
+  role: "user" | "assistant" | "system";
+  content: string;
+  reasoning?: string;
+}
+export type LoadingStatus =
+  | { state: "idle" }
+  | { state: "loading"; progress?: number; message?: string }
+  | { state: "ready" }
+  | { state: "error"; error: string };
+export type ReasoningEffort = "low" | "medium" | "high";
+export interface LLMContextValue {
+  status: LoadingStatus;
+  messages: ChatMessage[];
+  isGenerating: boolean;
+  tps: number;
+  reasoningEffort: ReasoningEffort;
+  setReasoningEffort: (effort: ReasoningEffort) => void;
+  loadModel: () => void;
+  send: (text: string) => void;
+  stop: () => void;
+  clearChat: () => void;
+  editMessage: (index: number, newContent: string) => void;
+  retryMessage: (index: number) => void;
+}
+export const LLMContext = createContext<LLMContextValue | null>(null);

src/hooks/LLMProvider.tsx ADDED Viewed

	@@ -0,0 +1,235 @@

+import {
+  useRef,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react";
+import {
+  pipeline,
+  TextStreamer,
+  InterruptableStoppingCriteria,
+  type TextGenerationPipeline,
+} from "@huggingface/transformers";
+import { ThinkStreamParser, type ThinkDelta } from "../utils/think-parser";
+import {
+  LLMContext,
+  createMessageId,
+  type ChatMessage,
+  type LoadingStatus,
+  type ReasoningEffort,
+} from "./LLMContext";
+const MODEL_ID = "LiquidAI/LFM2.5-1.2B-Thinking-ONNX";
+const DTYPE = "q4";
+function applyDeltas(msg: ChatMessage, deltas: ThinkDelta[]): ChatMessage {
+  let { content, reasoning = "" } = msg;
+  for (const delta of deltas) {
+    if (delta.type === "reasoning") reasoning += delta.textDelta;
+    else content += delta.textDelta;
+  }
+  return { ...msg, content, reasoning };
+}
+export function LLMProvider({ children }: { children: ReactNode }) {
+  const generatorRef = useRef<Promise<TextGenerationPipeline> | null>(null);
+  const stoppingCriteria = useRef(new InterruptableStoppingCriteria());
+  const [status, setStatus] = useState<LoadingStatus>({ state: "idle" });
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const messagesRef = useRef<ChatMessage[]>([]);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const isGeneratingRef = useRef(false);
+  const [tps, setTps] = useState(0);
+  const [reasoningEffort, setReasoningEffort] =
+    useState<ReasoningEffort>("medium");
+  messagesRef.current = messages;
+  isGeneratingRef.current = isGenerating;
+  const loadModel = useCallback(() => {
+    if (generatorRef.current) return;
+    generatorRef.current = (async () => {
+      setStatus({ state: "loading", message: "Downloading model…" });
+      try {
+        const gen = await pipeline("text-generation", MODEL_ID, {
+          dtype: DTYPE,
+          device: "webgpu",
+          progress_callback: (p: any) => {
+            if (p.status !== "progress" || !p.file?.endsWith('.onnx_data')) return;
+            setStatus({
+              state: "loading",
+              progress: p.progress,
+              message: `Downloading model… ${Math.round(p.progress)}%`,
+            });
+          },
+        });
+        setStatus({ state: "ready" });
+        return gen;
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        setStatus({ state: "error", error: msg });
+        generatorRef.current = null;
+        throw err;
+      }
+    })();
+  }, []);
+  const runGeneration = useCallback(async (chatHistory: ChatMessage[]) => {
+    const generator = await generatorRef.current!;
+    setIsGenerating(true);
+    setTps(0);
+    stoppingCriteria.current.reset();
+    const parser = new ThinkStreamParser();
+    let tokenCount = 0;
+    let firstTokenTime = 0;
+    const assistantIdx = chatHistory.length;
+    setMessages((prev) => [
+      ...prev,
+      { id: createMessageId(), role: "assistant", content: "", reasoning: "" },
+    ]);
+    const streamer = new TextStreamer(generator.tokenizer, {
+      skip_prompt: true,
+      skip_special_tokens: false,
+      callback_function: (output: string) => {
+        if (output === "<|im_end|>") return;
+        const deltas = parser.push(output);
+        if (deltas.length === 0) return;
+        setMessages((prev) => {
+          const updated = [...prev];
+          updated[assistantIdx] = applyDeltas(updated[assistantIdx], deltas);
+          return updated;
+        });
+      },
+      token_callback_function: () => {
+        tokenCount++;
+        if (tokenCount === 1) {
+          firstTokenTime = performance.now();
+        } else {
+          const elapsed = (performance.now() - firstTokenTime) / 1000;
+          if (elapsed > 0) {
+            setTps(Math.round(((tokenCount - 1) / elapsed) * 10) / 10);
+          }
+        }
+      },
+    });
+    const apiMessages = chatHistory.map((m) => ({ role: m.role, content: m.content }));
+    try {
+      await generator(apiMessages, {
+        max_new_tokens: 8192,
+        streamer,
+        stopping_criteria: stoppingCriteria.current,
+        do_sample: false,
+      });
+    } catch (err) {
+      console.error("Generation error:", err);
+    }
+    const remaining = parser.flush();
+    if (remaining.length > 0) {
+      setMessages((prev) => {
+        const updated = [...prev];
+        updated[assistantIdx] = applyDeltas(updated[assistantIdx], remaining);
+        return updated;
+      });
+    }
+    setMessages((prev) => {
+      const updated = [...prev];
+      updated[assistantIdx] = {
+        ...updated[assistantIdx],
+        content: parser.content.trim() || prev[assistantIdx].content,
+        reasoning: parser.reasoning.trim() || prev[assistantIdx].reasoning,
+      };
+      return updated;
+    });
+    setIsGenerating(false);
+  }, []);
+  const send = useCallback(
+    (text: string) => {
+      if (!generatorRef.current || isGeneratingRef.current) return;
+      const userMsg: ChatMessage = {
+        id: createMessageId(),
+        role: "user",
+        content: text,
+      };
+      setMessages((prev) => [...prev, userMsg]);
+      runGeneration([...messagesRef.current, userMsg]);
+    },
+    [runGeneration],
+  );
+  const stop = useCallback(() => {
+    stoppingCriteria.current.interrupt();
+  }, []);
+  const clearChat = useCallback(() => {
+    if (isGeneratingRef.current) return;
+    setMessages([]);
+  }, []);
+  const editMessage = useCallback(
+    (index: number, newContent: string) => {
+      if (isGeneratingRef.current) return;
+      setMessages((prev) => {
+        const updated = prev.slice(0, index);
+        updated.push({ ...prev[index], content: newContent });
+        return updated;
+      });
+      const updatedHistory = messagesRef.current.slice(0, index);
+      updatedHistory.push({
+        ...messagesRef.current[index],
+        content: newContent,
+      });
+      if (messagesRef.current[index]?.role === "user") {
+        setTimeout(() => runGeneration(updatedHistory), 0);
+      }
+    },
+    [runGeneration],
+  );
+  const retryMessage = useCallback(
+    (index: number) => {
+      if (isGeneratingRef.current) return;
+      const history = messagesRef.current.slice(0, index);
+      setMessages(history);
+      setTimeout(() => runGeneration(history), 0);
+    },
+    [runGeneration],
+  );
+  return (
+    <LLMContext.Provider
+      value={{
+        status,
+        messages,
+        isGenerating,
+        tps,
+        reasoningEffort,
+        setReasoningEffort,
+        loadModel,
+        send,
+        stop,
+        clearChat,
+        editMessage,
+        retryMessage,
+      }}
+    >
+      {children}
+    </LLMContext.Provider>
+  );
+}

src/hooks/useLLM.ts ADDED Viewed

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

+import { useContext } from "react";
+import { LLMContext, type LLMContextValue } from "./LLMContext";
+export function useLLM(): LLMContextValue {
+  const ctx = useContext(LLMContext);
+  if (!ctx) throw new Error("useLLM must be used within <LLMProvider>");
+  return ctx;
+}

src/index.css ADDED Viewed

	@@ -0,0 +1,272 @@

+@import "tailwindcss";
+@source "../node_modules/streamdown/dist/*.js";
+@font-face {
+  font-family: "Sohne";
+  src: url("/fonts/Söhne/Söhne-Leicht.otf") format("opentype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Sohne";
+  src: url("/fonts/Söhne/Söhne-Buch.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Sohne";
+  src: url("/fonts/Söhne/Söhne-Kräftig.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf")
+    format("truetype");
+  font-weight: 100 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("/fonts/JetBrains/JetBrainsMono-Italic-VariableFont_wght.ttf")
+    format("truetype");
+  font-weight: 100 800;
+  font-style: italic;
+  font-display: swap;
+}
+@layer base {
+  html,
+  body {
+    font-family:
+      "Sohne",
+      Inter,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      sans-serif;
+    font-size: 17px;
+    height: 100%;
+    overflow: hidden;
+    background: #ffffff;
+    color: #000000;
+  }
+  #root {
+    height: 100%;
+  }
+  /* Sleek scrollbar */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+  *:hover {
+    scrollbar-color: #d4d4d8 transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 3px;
+  }
+  *:hover::-webkit-scrollbar-thumb {
+    background: #d4d4d8;
+  }
+  *:hover::-webkit-scrollbar-thumb:hover {
+    background: #a1a1aa;
+  }
+  :root {
+    --brand-white: #ffffff;
+    --brand-black: #000000;
+    --brand-purple-light: #cd82f0;
+    --brand-purple: #5505af;
+    --brand-orange: #ff5f1e;
+    --brand-white-70: #ffffffb3;
+    --brand-white-50: #ffffff80;
+    --brand-white-30: #ffffff4d;
+    --brand-white-10: #ffffff1a;
+    --brand-black-70: #000000b3;
+    --brand-black-50: #00000080;
+    --brand-black-30: #0000004d;
+    --brand-black-10: #0000001a;
+    --brand-purple-light-70: #cd82f0b3;
+    --brand-purple-light-50: #cd82f080;
+    --brand-purple-light-30: #cd82f04d;
+    --brand-purple-light-10: #cd82f01a;
+    --brand-purple-70: #5505afb3;
+    --brand-purple-50: #5505af80;
+    --brand-purple-30: #5505af4d;
+    --brand-purple-10: #5505af1a;
+    --brand-orange-70: #ff5f1eb3;
+    --brand-orange-50: #ff5f1e80;
+    --brand-orange-30: #ff5f1e4d;
+    --brand-orange-10: #ff5f1e1a;
+    --background: var(--brand-white);
+    --foreground: var(--brand-black);
+    --card: var(--brand-white);
+    --card-foreground: var(--brand-black);
+    --popover: var(--brand-white);
+    --popover-foreground: var(--brand-black);
+    --primary: var(--brand-black);
+    --primary-foreground: var(--brand-white);
+    --secondary: #f8f8fa;
+    --secondary-foreground: var(--brand-black);
+    --muted: #f8f8fa;
+    --muted-foreground: var(--brand-black-70);
+    --accent: var(--brand-purple-10);
+    --accent-foreground: var(--brand-black);
+    --destructive: #dc2626;
+    --destructive-foreground: var(--brand-white);
+    --border: var(--brand-black-10);
+    --input: var(--brand-black-10);
+    --ring: var(--brand-purple);
+    --radius: 0.5rem;
+  }
+}
+.brand-surface {
+  background:
+    radial-gradient(
+      ellipse 70% 50% at 86% 12%,
+      var(--brand-purple-light-30),
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 70% 50% at 12% 86%,
+      var(--brand-orange-30),
+      transparent 72%
+    ),
+    radial-gradient(
+      ellipse 65% 45% at 55% 52%,
+      var(--brand-purple-10),
+      transparent 72%
+    ),
+    var(--brand-white);
+}
+/* Landing page accent motion */
+.landing-brand-glow {
+  background:
+    radial-gradient(
+      ellipse 52% 38% at 12% 25%,
+      var(--brand-purple-light-30),
+      transparent
+    ),
+    radial-gradient(
+      ellipse 48% 38% at 88% 68%,
+      var(--brand-orange-30),
+      transparent
+    );
+  animation: brand-shift 10s ease-in-out infinite;
+}
+@keyframes brand-shift {
+  0%, 100% {
+    opacity: 0.5;
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    opacity: 1;
+    transform: translate3d(0, -6px, 0);
+  }
+}
+/* Gentle pulse for "click to continue" text */
+@keyframes pulse-gentle {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+.animate-pulse-gentle {
+  animation: pulse-gentle 2.5s ease-in-out infinite;
+}
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 32px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate-rise-in {
+  animation: rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.animate-rise-in-delayed {
+  animation: rise-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: 120ms;
+}
+.font-support {
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+/* Fade-in for chat transition */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.animate-fade-in {
+  animation: fade-in 0.5s ease-out both;
+}
+/* Thinking shimmer animation */
+@keyframes thinking-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.thinking-shimmer {
+  background: linear-gradient(
+    105deg,
+    #6d6d6d 0%,
+    #6d6d6d 40%,
+    #5505af 50%,
+    #6d6d6d 60%,
+    #6d6d6d 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: thinking-shimmer 2s ease-in-out infinite;
+}

src/main.tsx ADDED Viewed

	@@ -0,0 +1,13 @@

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

src/utils/liquid1.min.d.ts ADDED Viewed

	@@ -0,0 +1,17 @@

+interface LiquidApp {
+  liquidPlane: {
+    material: {
+      metalness: number;
+      roughness: number;
+    };
+    uniforms: {
+      displacementScale: { value: number };
+    };
+  };
+  loadImage(url: string): void;
+  setRain(enabled: boolean): void;
+  dispose(): void;
+}
+declare function LiquidBackground(canvas: HTMLCanvasElement): LiquidApp;
+export default LiquidBackground;

src/utils/liquid1.min.js ADDED Viewed

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

src/utils/think-parser.ts ADDED Viewed

	@@ -0,0 +1,136 @@

+/**
+ * Incremental streaming parser for <think>...</think> reasoning tags.
+ *
+ * Tokens are pushed one-by-one as they arrive from the streamer.
+ * The parser tracks whether we are currently inside a `<think>` block
+ * and emits deltas accordingly.
+ */
+export interface ThinkDelta {
+  type: "reasoning" | "content";
+  textDelta: string;
+}
+export class ThinkStreamParser {
+  /** Accumulated reasoning text (inside <think>…</think>). */
+  reasoning = "";
+  /** Accumulated content text (outside think tags). */
+  content = "";
+  /** Whether we are currently inside a <think> block. */
+  private _inThink = false;
+  /** Buffer for detecting partial opening/closing tags at chunk boundaries. */
+  private _buf = "";
+  private static readonly OPEN_TAG = "<think>";
+  private static readonly CLOSE_TAG = "</think>";
+  reset(): void {
+    this.reasoning = "";
+    this.content = "";
+    this._inThink = false;
+    this._buf = "";
+  }
+  /**
+   * Push a chunk of text (one or more tokens) and return an array of deltas.
+   * Most calls will return a single delta; the array handles the rare case
+   * where a chunk contains a full tag transition.
+   */
+  push(text: string): ThinkDelta[] {
+    const deltas: ThinkDelta[] = [];
+    this._buf += text;
+    while (this._buf.length > 0) {
+      if (this._inThink) {
+        const closeIdx = this._buf.indexOf(ThinkStreamParser.CLOSE_TAG);
+        if (closeIdx !== -1) {
+          const before = this._buf.slice(0, closeIdx);
+          if (before) {
+            this.reasoning += before;
+            deltas.push({ type: "reasoning", textDelta: before });
+          }
+          this._buf = this._buf.slice(
+            closeIdx + ThinkStreamParser.CLOSE_TAG.length,
+          );
+          this._inThink = false;
+          continue;
+        }
+        // No close tag yet — hold back any tail that could be a partial tag.
+        const safeLen = this._safeFlushLength(
+          this._buf,
+          ThinkStreamParser.CLOSE_TAG,
+        );
+        if (safeLen > 0) {
+          const chunk = this._buf.slice(0, safeLen);
+          this.reasoning += chunk;
+          deltas.push({ type: "reasoning", textDelta: chunk });
+          this._buf = this._buf.slice(safeLen);
+        }
+        break;
+      } else {
+        const openIdx = this._buf.indexOf(ThinkStreamParser.OPEN_TAG);
+        if (openIdx !== -1) {
+          const before = this._buf.slice(0, openIdx);
+          if (before) {
+            this.content += before;
+            deltas.push({ type: "content", textDelta: before });
+          }
+          this._buf = this._buf.slice(
+            openIdx + ThinkStreamParser.OPEN_TAG.length,
+          );
+          this._inThink = true;
+          continue;
+        }
+        // No open tag yet — hold back any tail that could be a partial tag.
+        const safeLen = this._safeFlushLength(
+          this._buf,
+          ThinkStreamParser.OPEN_TAG,
+        );
+        if (safeLen > 0) {
+          const chunk = this._buf.slice(0, safeLen);
+          this.content += chunk;
+          deltas.push({ type: "content", textDelta: chunk });
+          this._buf = this._buf.slice(safeLen);
+        }
+        break;
+      }
+    }
+    return deltas;
+  }
+  /**
+   * Flush any remaining buffered text. Call this when generation is complete
+   * to ensure no text is left in the partial-tag buffer.
+   */
+  flush(): ThinkDelta[] {
+    if (!this._buf) return [];
+    const deltas: ThinkDelta[] = [];
+    if (this._inThink) {
+      this.reasoning += this._buf;
+      deltas.push({ type: "reasoning", textDelta: this._buf });
+    } else {
+      this.content += this._buf;
+      deltas.push({ type: "content", textDelta: this._buf });
+    }
+    this._buf = "";
+    return deltas;
+  }
+  /**
+   * How many characters from the start of `buf` can be safely emitted
+   * without risking cutting a partial `tag` at the end.
+   */
+  private _safeFlushLength(buf: string, tag: string): number {
+    // Check if the tail of buf could be the start of the tag
+    for (let overlap = Math.min(buf.length, tag.length - 1); overlap > 0; overlap--) {
+      if (buf.endsWith(tag.slice(0, overlap))) {
+        return buf.length - overlap;
+      }
+    }
+    return buf.length;
+  }
+}

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,7 @@

+{
+  "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: [tailwindcss(), react()],
+});