Spaces:

LiquidAI
/

LFM2-WebGPU

Running

App Files Files Community

Add demo source code

by Xenova HF Staff - opened 8 days ago

base: refs/heads/main

←

from: refs/pr/1

Discussion Files changed

+2777

-5

Files changed (37) hide show

.gitignore +24 -0
README.md +9 -5
eslint.config.js +23 -0
index.html +13 -0
package.json +35 -0
public/liquidai-logo.svg +1 -0
src/App.tsx +826 -0
src/components/ExamplePrompts.tsx +40 -0
src/components/LoadingScreen.tsx +255 -0
src/components/ResultBlock.tsx +21 -0
src/components/ToolCallIndicator.tsx +98 -0
src/components/ToolItem.tsx +144 -0
src/components/ToolResultRenderer.tsx +42 -0
src/components/icons/HfLogo.tsx +35 -0
src/components/icons/LiquidAILogo.tsx +12 -0
src/constants/db.ts +3 -0
src/constants/examples.ts +39 -0
src/constants/models.ts +5 -0
src/constants/systemPrompt.ts +11 -0
src/hooks/useLLM.ts +234 -0
src/index.css +1 -0
src/main.tsx +10 -0
src/tools/get_location.js +84 -0
src/tools/get_time.js +51 -0
src/tools/index.ts +19 -0
src/tools/math_eval.js +54 -0
src/tools/open_webpage.js +49 -0
src/tools/random_number.js +51 -0
src/tools/sleep.js +45 -0
src/tools/speak.js +58 -0
src/tools/template.js +47 -0
src/utils.ts +370 -0
src/vite-env.d.ts +1 -0
tsconfig.app.json +27 -0
tsconfig.json +7 -0
tsconfig.node.json +25 -0
vite.config.ts +8 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: WebGPU
-emoji: 😻
-colorFrom: green
 colorTo: red
-sdk: docker
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: LFM2 WebGPU – In-browser tool calling
+emoji: 🛠️
+colorFrom: yellow
 colorTo: red
+sdk: static
 pinned: false
+license: apache-2.0
+short_description: In-browser tool calling, powered by Transformers.js
+app_build_command: npm run build
+app_file: dist/index.html
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

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 ADDED Viewed

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

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/liquidai-logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LFM2 WebGPU - In-Browser Tool Calling</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json ADDED Viewed

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

+{
+  "name": "lfm-tool-calling",
+  "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",
+    "@monaco-editor/react": "^4.7.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "idb": "^8.0.3",
+    "lucide-react": "^0.535.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.30.1",
+    "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.35.1",
+    "vite": "^7.0.4"
+  }
+}

public/liquidai-logo.svg ADDED Viewed

src/App.tsx ADDED Viewed

	@@ -0,0 +1,826 @@

+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useMemo,
+} from "react";
+import { openDB, type IDBPDatabase } from "idb";
+import { Play, Plus, Zap, RotateCcw, Settings, X } from "lucide-react";
+import { useLLM } from "./hooks/useLLM";
+import type { Tool } from "./components/ToolItem";
+import {
+  parsePythonicCalls,
+  extractPythonicCalls,
+  extractFunctionAndRenderer,
+  generateSchemaFromCode,
+  extractToolCallContent,
+  mapArgsToNamedParams,
+  getErrorMessage,
+  isMobileOrTablet,
+} from "./utils";
+import { DEFAULT_SYSTEM_PROMPT } from "./constants/systemPrompt";
+import { DB_NAME, STORE_NAME, SETTINGS_STORE_NAME } from "./constants/db";
+import { DEFAULT_TOOLS, TEMPLATE } from "./tools";
+import ToolResultRenderer from "./components/ToolResultRenderer";
+import ToolCallIndicator from "./components/ToolCallIndicator";
+import ToolItem from "./components/ToolItem";
+import ResultBlock from "./components/ResultBlock";
+import ExamplePrompts from "./components/ExamplePrompts";
+import { LoadingScreen } from "./components/LoadingScreen";
+interface RenderInfo {
+  call: string;
+  result?: any;
+  renderer?: string;
+  input?: Record<string, any>;
+  error?: string;
+}
+interface BaseMessage {
+  role: "system" | "user" | "assistant";
+  content: string;
+}
+interface ToolMessage {
+  role: "tool";
+  content: string;
+  renderInfo: RenderInfo[]; // Rich data for the UI
+}
+type Message = BaseMessage | ToolMessage;
+async function getDB(): Promise<IDBPDatabase> {
+  return openDB(DB_NAME, 1, {
+    upgrade(db) {
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, {
+          keyPath: "id",
+          autoIncrement: true,
+        });
+      }
+      if (!db.objectStoreNames.contains(SETTINGS_STORE_NAME)) {
+        db.createObjectStore(SETTINGS_STORE_NAME, { keyPath: "key" });
+      }
+    },
+  });
+}
+const App: React.FC = () => {
+  const [systemPrompt, setSystemPrompt] = useState<string>(
+    DEFAULT_SYSTEM_PROMPT,
+  );
+  const [isSystemPromptModalOpen, setIsSystemPromptModalOpen] =
+    useState<boolean>(false);
+  const [tempSystemPrompt, setTempSystemPrompt] = useState<string>("");
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [tools, setTools] = useState<Tool[]>([]);
+  const [input, setInput] = useState<string>("");
+  const [isGenerating, setIsGenerating] = useState<boolean>(false);
+  const isMobile = useMemo(isMobileOrTablet, []);
+  const [selectedModelId, setSelectedModelId] = useState<string>(
+    isMobile ? "350M" : "1.2B",
+  );
+  const [isModelDropdownOpen, setIsModelDropdownOpen] =
+    useState<boolean>(false);
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const debounceTimers = useRef<Record<number, NodeJS.Timeout>>({});
+  const toolsContainerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const {
+    isLoading,
+    isReady,
+    error,
+    progress,
+    loadModel,
+    generateResponse,
+    clearPastKeyValues,
+  } = useLLM(selectedModelId);
+  const loadTools = useCallback(async (): Promise<void> => {
+    const db = await getDB();
+    const allTools: Tool[] = await db.getAll(STORE_NAME);
+    if (allTools.length === 0) {
+      const defaultTools: Tool[] = Object.entries(DEFAULT_TOOLS).map(
+        ([name, code], id) => ({
+          id,
+          name,
+          code,
+          enabled: true,
+          isCollapsed: false,
+        }),
+      );
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      await Promise.all(defaultTools.map((tool) => tx.store.put(tool)));
+      await tx.done;
+      setTools(defaultTools);
+    } else {
+      setTools(allTools.map((t) => ({ ...t, isCollapsed: false })));
+    }
+  }, []);
+  useEffect(() => {
+    loadTools();
+  }, [loadTools]);
+  useEffect(() => {
+    if (chatContainerRef.current) {
+      chatContainerRef.current.scrollTop =
+        chatContainerRef.current.scrollHeight;
+    }
+  }, [messages]);
+  const updateToolInDB = async (tool: Tool): Promise<void> => {
+    const db = await getDB();
+    await db.put(STORE_NAME, tool);
+  };
+  const saveToolDebounced = (tool: Tool): void => {
+    if (tool.id !== undefined && debounceTimers.current[tool.id]) {
+      clearTimeout(debounceTimers.current[tool.id]);
+    }
+    if (tool.id !== undefined) {
+      debounceTimers.current[tool.id] = setTimeout(() => {
+        updateToolInDB(tool);
+      }, 300);
+    }
+  };
+  const clearChat = useCallback(() => {
+    setMessages([]);
+    clearPastKeyValues();
+  }, [clearPastKeyValues]);
+  const addTool = async (): Promise<void> => {
+    const newTool: Omit<Tool, "id"> = {
+      name: "new_tool",
+      code: TEMPLATE,
+      enabled: true,
+      isCollapsed: false,
+    };
+    const db = await getDB();
+    const id = await db.add(STORE_NAME, newTool);
+    setTools((prev) => {
+      const updated = [...prev, { ...newTool, id: id as number }];
+      setTimeout(() => {
+        if (toolsContainerRef.current) {
+          toolsContainerRef.current.scrollTop =
+            toolsContainerRef.current.scrollHeight;
+        }
+      }, 0);
+      return updated;
+    });
+    clearChat();
+  };
+  const deleteTool = async (id: number): Promise<void> => {
+    if (debounceTimers.current[id]) {
+      clearTimeout(debounceTimers.current[id]);
+    }
+    const db = await getDB();
+    await db.delete(STORE_NAME, id);
+    setTools(tools.filter((tool) => tool.id !== id));
+    clearChat();
+  };
+  const toggleToolEnabled = (id: number): void => {
+    let changedTool: Tool | undefined;
+    const newTools = tools.map((tool) => {
+      if (tool.id === id) {
+        changedTool = { ...tool, enabled: !tool.enabled };
+        return changedTool;
+      }
+      return tool;
+    });
+    setTools(newTools);
+    if (changedTool) saveToolDebounced(changedTool);
+  };
+  const toggleToolCollapsed = (id: number): void => {
+    setTools(
+      tools.map((tool) =>
+        tool.id === id ? { ...tool, isCollapsed: !tool.isCollapsed } : tool,
+      ),
+    );
+  };
+  const expandTool = (id: number): void => {
+    setTools(
+      tools.map((tool) =>
+        tool.id === id ? { ...tool, isCollapsed: false } : tool,
+      ),
+    );
+  };
+  const handleToolCodeChange = (id: number, newCode: string): void => {
+    let changedTool: Tool | undefined;
+    const newTools = tools.map((tool) => {
+      if (tool.id === id) {
+        const { functionCode } = extractFunctionAndRenderer(newCode);
+        const schema = generateSchemaFromCode(functionCode);
+        changedTool = { ...tool, code: newCode, name: schema.name };
+        return changedTool;
+      }
+      return tool;
+    });
+    setTools(newTools);
+    if (changedTool) saveToolDebounced(changedTool);
+  };
+  const executeToolCall = async (callString: string): Promise<string> => {
+    const parsedCall = parsePythonicCalls(callString);
+    if (!parsedCall) throw new Error(`Invalid tool call format: ${callString}`);
+    const { name, positionalArgs, keywordArgs } = parsedCall;
+    const toolToUse = tools.find((t) => t.name === name && t.enabled);
+    if (!toolToUse) throw new Error(`Tool '${name}' not found or is disabled.`);
+    const { functionCode } = extractFunctionAndRenderer(toolToUse.code);
+    const schema = generateSchemaFromCode(functionCode);
+    const paramNames = Object.keys(schema.parameters.properties);
+    const finalArgs: any[] = [];
+    const requiredParams = schema.parameters.required || [];
+    for (let i = 0; i < paramNames.length; ++i) {
+      const paramName = paramNames[i];
+      if (i < positionalArgs.length) {
+        finalArgs.push(positionalArgs[i]);
+      } else if (keywordArgs.hasOwnProperty(paramName)) {
+        finalArgs.push(keywordArgs[paramName]);
+      } else if (
+        schema.parameters.properties[paramName].hasOwnProperty("default")
+      ) {
+        finalArgs.push(schema.parameters.properties[paramName].default);
+      } else if (!requiredParams.includes(paramName)) {
+        finalArgs.push(undefined);
+      } else {
+        throw new Error(`Missing required argument: ${paramName}`);
+      }
+    }
+    const bodyMatch = functionCode.match(/function[^{]+\{([\s\S]*)\}/);
+    if (!bodyMatch) {
+      throw new Error(
+        "Could not parse function body. Ensure it's a standard `function` declaration.",
+      );
+    }
+    const body = bodyMatch[1];
+    const AsyncFunction = Object.getPrototypeOf(
+      async function () {},
+    ).constructor;
+    const func = new AsyncFunction(...paramNames, body);
+    const result = await func(...finalArgs);
+    return JSON.stringify(result);
+  };
+  const executeToolCalls = async (
+    toolCallContent: string,
+  ): Promise<RenderInfo[]> => {
+    const toolCalls = extractPythonicCalls(toolCallContent);
+    if (toolCalls.length === 0)
+      return [{ call: "", error: "No valid tool calls found." }];
+    const results: RenderInfo[] = [];
+    for (const call of toolCalls) {
+      try {
+        const result = await executeToolCall(call);
+        const parsedCall = parsePythonicCalls(call);
+        const toolUsed = parsedCall
+          ? tools.find((t) => t.name === parsedCall.name && t.enabled)
+          : null;
+        const { rendererCode } = toolUsed
+          ? extractFunctionAndRenderer(toolUsed.code)
+          : { rendererCode: undefined };
+        let parsedResult;
+        try {
+          parsedResult = JSON.parse(result);
+        } catch {
+          parsedResult = result;
+        }
+        let namedParams: Record<string, any> = Object.create(null);
+        if (parsedCall && toolUsed) {
+          const schema = generateSchemaFromCode(
+            extractFunctionAndRenderer(toolUsed.code).functionCode,
+          );
+          const paramNames = Object.keys(schema.parameters.properties);
+          namedParams = mapArgsToNamedParams(
+            paramNames,
+            parsedCall.positionalArgs,
+            parsedCall.keywordArgs,
+          );
+        }
+        results.push({
+          call,
+          result: parsedResult,
+          renderer: rendererCode,
+          input: namedParams,
+        });
+      } catch (error) {
+        const errorMessage = getErrorMessage(error);
+        results.push({ call, error: errorMessage });
+      }
+    }
+    return results;
+  };
+  const handleSendMessage = async (): Promise<void> => {
+    if (!input.trim() || !isReady) return;
+    const userMessage: Message = { role: "user", content: input };
+    let currentMessages: Message[] = [...messages, userMessage];
+    setMessages(currentMessages);
+    setInput("");
+    setIsGenerating(true);
+    try {
+      const toolSchemas = tools
+        .filter((tool) => tool.enabled)
+        .map((tool) => generateSchemaFromCode(tool.code));
+      while (true) {
+        const messagesForGeneration = [
+          { role: "system" as const, content: systemPrompt },
+          ...currentMessages,
+        ];
+        setMessages([...currentMessages, { role: "assistant", content: "" }]);
+        let accumulatedContent = "";
+        const response = await generateResponse(
+          messagesForGeneration,
+          toolSchemas,
+          (token: string) => {
+            accumulatedContent += token;
+            setMessages((current) => {
+              const updated = [...current];
+              updated[updated.length - 1] = {
+                role: "assistant",
+                content: accumulatedContent,
+              };
+              return updated;
+            });
+          },
+        );
+        currentMessages.push({ role: "assistant", content: response });
+        const toolCallContent = extractToolCallContent(response);
+        if (toolCallContent) {
+          const toolResults = await executeToolCalls(toolCallContent);
+          const toolMessage: ToolMessage = {
+            role: "tool",
+            content: JSON.stringify(toolResults.map((r) => r.result ?? null)),
+            renderInfo: toolResults,
+          };
+          currentMessages.push(toolMessage);
+          setMessages([...currentMessages]);
+          continue;
+        } else {
+          setMessages(currentMessages);
+          break;
+        }
+      }
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setMessages([
+        ...currentMessages,
+        {
+          role: "assistant",
+          content: `Error generating response: ${errorMessage}`,
+        },
+      ]);
+    } finally {
+      setIsGenerating(false);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  };
+  const loadSystemPrompt = useCallback(async (): Promise<void> => {
+    try {
+      const db = await getDB();
+      const stored = await db.get(SETTINGS_STORE_NAME, "systemPrompt");
+      if (stored && stored.value) setSystemPrompt(stored.value);
+    } catch (error) {
+      console.error("Failed to load system prompt:", error);
+    }
+  }, []);
+  const saveSystemPrompt = useCallback(
+    async (prompt: string): Promise<void> => {
+      try {
+        const db = await getDB();
+        await db.put(SETTINGS_STORE_NAME, {
+          key: "systemPrompt",
+          value: prompt,
+        });
+      } catch (error) {
+        console.error("Failed to save system prompt:", error);
+      }
+    },
+    [],
+  );
+  const loadSelectedModel = useCallback(async (): Promise<void> => {
+    try {
+      await loadModel();
+    } catch (error) {
+      console.error("Failed to load model:", error);
+    }
+  }, [selectedModelId, loadModel]);
+  const loadSelectedModelId = useCallback(async (): Promise<void> => {
+    try {
+      const db = await getDB();
+      const stored = await db.get(SETTINGS_STORE_NAME, "selectedModelId");
+      if (stored && stored.value) {
+        setSelectedModelId(stored.value);
+      }
+    } catch (error) {
+      console.error("Failed to load selected model ID:", error);
+    }
+  }, []);
+  useEffect(() => {
+    loadSystemPrompt();
+  }, [loadSystemPrompt]);
+  const handleOpenSystemPromptModal = (): void => {
+    setTempSystemPrompt(systemPrompt);
+    setIsSystemPromptModalOpen(true);
+  };
+  const handleSaveSystemPrompt = (): void => {
+    setSystemPrompt(tempSystemPrompt);
+    saveSystemPrompt(tempSystemPrompt);
+    setIsSystemPromptModalOpen(false);
+  };
+  const handleCancelSystemPrompt = (): void => {
+    setTempSystemPrompt("");
+    setIsSystemPromptModalOpen(false);
+  };
+  const handleResetSystemPrompt = (): void => {
+    setTempSystemPrompt(DEFAULT_SYSTEM_PROMPT);
+  };
+  const saveSelectedModel = useCallback(
+    async (modelId: string): Promise<void> => {
+      try {
+        const db = await getDB();
+        await db.put(SETTINGS_STORE_NAME, {
+          key: "selectedModelId",
+          value: modelId,
+        });
+      } catch (error) {
+        console.error("Failed to save selected model ID:", error);
+      }
+    },
+    [],
+  );
+  useEffect(() => {
+    loadSystemPrompt();
+    loadSelectedModelId();
+  }, [loadSystemPrompt, loadSelectedModelId]);
+  const handleModelSelect = async (modelId: string) => {
+    setSelectedModelId(modelId);
+    setIsModelDropdownOpen(false);
+    await saveSelectedModel(modelId);
+  };
+  const handleExampleClick = async (messageText: string): Promise<void> => {
+    if (!isReady || isGenerating) return;
+    setInput(messageText);
+    const userMessage: Message = { role: "user", content: messageText };
+    const currentMessages: Message[] = [...messages, userMessage];
+    setMessages(currentMessages);
+    setInput("");
+    setIsGenerating(true);
+    try {
+      const toolSchemas = tools
+        .filter((tool) => tool.enabled)
+        .map((tool) => generateSchemaFromCode(tool.code));
+      while (true) {
+        const messagesForGeneration = [
+          { role: "system" as const, content: systemPrompt },
+          ...currentMessages,
+        ];
+        setMessages([...currentMessages, { role: "assistant", content: "" }]);
+        let accumulatedContent = "";
+        const response = await generateResponse(
+          messagesForGeneration,
+          toolSchemas,
+          (token: string) => {
+            accumulatedContent += token;
+            setMessages((current) => {
+              const updated = [...current];
+              updated[updated.length - 1] = {
+                role: "assistant",
+                content: accumulatedContent,
+              };
+              return updated;
+            });
+          },
+        );
+        currentMessages.push({ role: "assistant", content: response });
+        const toolCallContent = extractToolCallContent(response);
+        if (toolCallContent) {
+          const toolResults = await executeToolCalls(toolCallContent);
+          const toolMessage: ToolMessage = {
+            role: "tool",
+            content: JSON.stringify(toolResults.map((r) => r.result ?? null)),
+            renderInfo: toolResults,
+          };
+          currentMessages.push(toolMessage);
+          setMessages([...currentMessages]);
+          continue;
+        } else {
+          setMessages(currentMessages);
+          break;
+        }
+      }
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setMessages([
+        ...currentMessages,
+        {
+          role: "assistant",
+          content: `Error generating response: ${errorMessage}`,
+        },
+      ]);
+    } finally {
+      setIsGenerating(false);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  };
+  return (
+    <div className="font-sans bg-gray-900">
+      {!isReady ? (
+        <LoadingScreen
+          isLoading={isLoading}
+          progress={progress}
+          error={error}
+          loadSelectedModel={loadSelectedModel}
+          selectedModelId={selectedModelId}
+          isModelDropdownOpen={isModelDropdownOpen}
+          setIsModelDropdownOpen={setIsModelDropdownOpen}
+          handleModelSelect={handleModelSelect}
+        />
+      ) : (
+        <div className="flex h-screen text-white">
+          <div className="w-1/2 flex flex-col p-4">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <h1 className="text-3xl font-bold text-gray-200">
+                  LFM2 WebGPU
+                </h1>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="flex items-center text-green-400">
+                  <Zap size={16} className="mr-2" />
+                  Ready
+                </div>
+                <button
+                  disabled={isGenerating}
+                  onClick={clearChat}
+                  className={`h-10 flex items-center px-3 py-2 rounded-lg font-bold transition-colors text-sm ${
+                    isGenerating
+                      ? "bg-gray-600 cursor-not-allowed opacity-50"
+                      : "bg-gray-600 hover:bg-gray-700"
+                  }`}
+                  title="Clear chat"
+                >
+                  <RotateCcw size={14} className="mr-2" /> Clear
+                </button>
+                <button
+                  onClick={handleOpenSystemPromptModal}
+                  className="h-10 flex items-center px-3 py-2 rounded-lg font-bold transition-colors bg-gray-600 hover:bg-gray-700 text-sm"
+                  title="Edit system prompt"
+                >
+                  <Settings size={16} />
+                </button>
+              </div>
+            </div>
+            <div
+              ref={chatContainerRef}
+              className="flex-grow bg-gray-800 rounded-lg p-4 overflow-y-auto mb-4 space-y-4"
+            >
+              {messages.length === 0 && isReady ? (
+                <ExamplePrompts onExampleClick={handleExampleClick} />
+              ) : (
+                messages.map((msg, index) => {
+                  const key = `${msg.role}-${index}`;
+                  if (msg.role === "user") {
+                    return (
+                      <div key={key} className="flex justify-end">
+                        <div className="p-3 rounded-lg max-w-md bg-indigo-600">
+                          <p className="text-sm whitespace-pre-wrap">
+                            {msg.content}
+                          </p>
+                        </div>
+                      </div>
+                    );
+                  } else if (msg.role === "assistant") {
+                    const isToolCall = msg.content.includes(
+                      "<|tool_call_start|>",
+                    );
+                    if (isToolCall) {
+                      const nextMessage = messages[index + 1];
+                      const isCompleted = nextMessage?.role === "tool";
+                      const hasError =
+                        isCompleted &&
+                        (nextMessage as ToolMessage).renderInfo.some(
+                          (info) => !!info.error,
+                        );
+                      return (
+                        <div key={key} className="flex justify-start">
+                          <div className="p-3 rounded-lg bg-gray-700">
+                            <ToolCallIndicator
+                              content={msg.content}
+                              isRunning={!isCompleted}
+                              hasError={hasError}
+                            />
+                          </div>
+                        </div>
+                      );
+                    }
+                    return (
+                      <div key={key} className="flex justify-start">
+                        <div className="p-3 rounded-lg max-w-md bg-gray-700">
+                          <p className="text-sm whitespace-pre-wrap">
+                            {msg.content}
+                          </p>
+                        </div>
+                      </div>
+                    );
+                  } else if (msg.role === "tool") {
+                    const visibleToolResults = msg.renderInfo.filter(
+                      (info) =>
+                        info.error || (info.result != null && info.renderer),
+                    );
+                    if (visibleToolResults.length === 0) return null;
+                    return (
+                      <div key={key} className="flex justify-start">
+                        <div className="p-3 rounded-lg bg-gray-700 max-w-lg">
+                          <div className="space-y-3">
+                            {visibleToolResults.map((info, idx) => (
+                              <div className="flex flex-col gap-2" key={idx}>
+                                <div className="text-xs text-gray-400 font-mono">
+                                  {info.call}
+                                </div>
+                                {info.error ? (
+                                  <ResultBlock error={info.error} />
+                                ) : (
+                                  <ToolResultRenderer
+                                    result={info.result}
+                                    rendererCode={info.renderer}
+                                    input={info.input}
+                                  />
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  return null;
+                })
+              )}
+            </div>
+            <div className="flex">
+              <input
+                ref={inputRef}
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) =>
+                  e.key === "Enter" &&
+                  !isGenerating &&
+                  isReady &&
+                  handleSendMessage()
+                }
+                disabled={isGenerating || !isReady}
+                className="flex-grow bg-gray-700 rounded-l-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
+                placeholder={
+                  isReady
+                    ? "Type your message here..."
+                    : "Load model first to enable chat"
+                }
+              />
+              <button
+                onClick={handleSendMessage}
+                disabled={isGenerating || !isReady}
+                className="bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-bold p-3 rounded-r-lg transition-colors"
+              >
+                <Play size={20} />
+              </button>
+            </div>
+          </div>
+          <div className="w-1/2 flex flex-col p-4 border-l border-gray-700">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-2xl font-bold text-teal-400">Tools</h2>
+              <button
+                onClick={addTool}
+                className="flex items-center bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-lg transition-colors"
+              >
+                <Plus size={16} className="mr-2" /> Add Tool
+              </button>
+            </div>
+            <div
+              ref={toolsContainerRef}
+              className="flex-grow bg-gray-800 rounded-lg p-4 overflow-y-auto space-y-3"
+            >
+              {tools.map((tool) => (
+                <ToolItem
+                  key={tool.id}
+                  tool={tool}
+                  onToggleEnabled={() => toggleToolEnabled(tool.id)}
+                  onToggleCollapsed={() => toggleToolCollapsed(tool.id)}
+                  onExpand={() => expandTool(tool.id)}
+                  onDelete={() => deleteTool(tool.id)}
+                  onCodeChange={(newCode) =>
+                    handleToolCodeChange(tool.id, newCode)
+                  }
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+      {isSystemPromptModalOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-gray-800 rounded-lg p-6 w-3/4 max-w-4xl max-h-3/4 flex flex-col text-gray-100">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold text-indigo-400">
+                Edit System Prompt
+              </h2>
+              <button
+                onClick={handleCancelSystemPrompt}
+                className="text-gray-400 hover:text-white"
+              >
+                <X size={20} />
+              </button>
+            </div>
+            <div className="flex-grow mb-4">
+              <textarea
+                value={tempSystemPrompt}
+                onChange={(e) => setTempSystemPrompt(e.target.value)}
+                className="w-full h-full bg-gray-700 text-white p-4 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                placeholder="Enter your system prompt here..."
+                style={{ minHeight: "300px" }}
+              />
+            </div>
+            <div className="flex justify-between">
+              <button
+                onClick={handleResetSystemPrompt}
+                className="px-4 py-2 bg-teal-600 hover:bg-teal-700 rounded-lg transition-colors"
+              >
+                Reset
+              </button>
+              <div className="flex gap-3">
+                <button
+                  onClick={handleSaveSystemPrompt}
+                  className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+export default App;

src/components/ExamplePrompts.tsx ADDED Viewed

	@@ -0,0 +1,40 @@

+import type React from "react";
+import { DEFAULT_EXAMPLES, type Example } from "../constants/examples";
+interface ExamplePromptsProps {
+  examples?: Example[];
+  onExampleClick: (messageText: string) => void;
+}
+const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
+  examples,
+  onExampleClick,
+}) => (
+  <div className="flex flex-col items-center justify-center h-full space-y-6">
+    <div className="text-center mb-6">
+      <h2 className="text-2xl font-semibold text-gray-300 mb-1">
+        Try an example
+      </h2>
+      <p className="text-sm text-gray-500">Click one to get started</p>
+    </div>
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl w-full px-4">
+      {(examples || DEFAULT_EXAMPLES).map((example, index) => (
+        <button
+          key={index}
+          onClick={() => onExampleClick(example.messageText)}
+          className="flex items-center gap-3 p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-left group cursor-pointer"
+        >
+          <span className="text-xl flex-shrink-0 group-hover:scale-110 transition-transform">
+            {example.icon}
+          </span>
+          <span className="text-sm text-gray-200 group-hover:text-white transition-colors">
+            {example.displayText}
+          </span>
+        </button>
+      ))}
+    </div>
+  </div>
+);
+export default ExamplePrompts;

src/components/LoadingScreen.tsx ADDED Viewed

	@@ -0,0 +1,255 @@

+import { ChevronDown } from "lucide-react";
+import { MODEL_OPTIONS } from "../constants/models";
+import LiquidAILogo from "./icons/LiquidAILogo";
+import HfLogo from "./icons/HfLogo";
+import { useEffect, useRef } from "react";
+export const LoadingScreen = ({
+  isLoading,
+  progress,
+  error,
+  loadSelectedModel,
+  selectedModelId,
+  isModelDropdownOpen,
+  setIsModelDropdownOpen,
+  handleModelSelect,
+}: {
+  isLoading: boolean;
+  progress: number;
+  error: string | null;
+  loadSelectedModel: () => void;
+  selectedModelId: string;
+  isModelDropdownOpen: boolean;
+  setIsModelDropdownOpen: (isOpen: boolean) => void;
+  handleModelSelect: (modelId: string) => void;
+}) => {
+  const model = MODEL_OPTIONS.find((opt) => opt.id === selectedModelId);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  // Background Animation Effect
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let animationFrameId: number;
+    let dots: {
+      x: number;
+      y: number;
+      radius: number;
+      speed: number;
+      opacity: number;
+      blur: number;
+    }[] = [];
+    const setup = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      dots = [];
+      const numDots = Math.floor((canvas.width * canvas.height) / 15000);
+      for (let i = 0; i < numDots; ++i) {
+        dots.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          radius: Math.random() * 1.5 + 0.5,
+          speed: Math.random() * 0.5 + 0.1,
+          opacity: Math.random() * 0.5 + 0.2,
+          blur: Math.random() > 0.7 ? Math.random() * 2 + 1 : 0,
+        });
+      }
+    };
+    const draw = () => {
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      dots.forEach((dot) => {
+        // Update dot position
+        dot.y += dot.speed;
+        if (dot.y > canvas.height) {
+          dot.y = 0 - dot.radius;
+          dot.x = Math.random() * canvas.width;
+        }
+        // Draw dot
+        ctx.beginPath();
+        ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 255, 255, ${dot.opacity})`;
+        if (dot.blur > 0) {
+          ctx.filter = `blur(${dot.blur}px)`;
+        }
+        ctx.fill();
+        ctx.filter = "none"; // Reset filter
+      });
+      animationFrameId = requestAnimationFrame(draw);
+    };
+    const handleResize = () => {
+      cancelAnimationFrame(animationFrameId);
+      setup();
+      draw();
+    };
+    setup();
+    draw();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+  return (
+    <div className="relative flex flex-col items-center justify-center h-screen bg-gray-900 text-white p-4 overflow-hidden">
+      {/* Background Canvas for Animation */}
+      <canvas
+        ref={canvasRef}
+        className="absolute top-0 left-0 w-full h-full z-0"
+      />
+      {/* Vignette Overlay */}
+      <div className="absolute top-0 left-0 w-full h-full z-10 bg-[radial-gradient(ellipse_at_center,_rgba(17,24,39,0)_30%,_#111827_95%)]"></div>
+      {/* Main Content */}
+      <div className="relative z-20 max-w-2xl w-full flex flex-col items-center">
+        <div className="flex items-center justify-center mb-6 gap-6 text-5xl md:text-6xl">
+          <a
+            href="https://www.liquid.ai/"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Liquid AI"
+          >
+            <LiquidAILogo className="h-20 md:h-24 text-gray-300 hover:text-white transition-colors" />
+          </a>
+          <span className="text-gray-600">×</span>
+          <a
+            href="https://huggingface.co/docs/transformers.js"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Transformers.js"
+          >
+            <HfLogo className="h-24 md:h-28 text-gray-300 hover:text-white transition-colors" />
+          </a>
+        </div>
+        <div className="w-full text-center mb-6">
+          <h1 className="text-5xl font-bold mb-2 text-gray-100 tracking-tight">
+            LFM2 WebGPU
+          </h1>
+          <p className="text-md md:text-lg text-gray-400">
+            In-browser tool calling, powered by Transformers.js
+          </p>
+        </div>
+        <div className="w-full text-left text-gray-300 space-y-4 mb-6 text-base max-w-xl">
+          <p>
+            This demo showcases in-browser tool calling with LFM2, a new
+            generation of hybrid models by{" "}
+            <a
+              href="https://www.liquid.ai/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-indigo-400 hover:underline font-medium"
+            >
+              Liquid AI
+            </a>{" "}
+            designed for edge AI and on-device deployment.
+          </p>
+          <p>
+            Everything runs entirely in your browser with{" "}
+            <a
+              href="https://huggingface.co/docs/transformers.js"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-indigo-400 hover:underline font-medium"
+            >
+              Transformers.js
+            </a>{" "}
+            and ONNX Runtime Web, meaning no data is sent to a server. It can
+            even run offline!
+          </p>
+        </div>
+        <p className="text-gray-400 mb-6">
+          Select a model and click load to get started.
+        </p>
+        <div className="relative">
+          <div className="flex rounded-lg shadow-lg bg-indigo-600">
+            <button
+              onClick={isLoading ? undefined : loadSelectedModel}
+              disabled={isLoading}
+              className={`flex items-center justify-center rounded-l-lg font-bold transition-all text-lg ${isLoading ? "bg-gray-700 text-gray-400 cursor-not-allowed" : "bg-indigo-600 hover:bg-indigo-700"}`}
+            >
+              <div className="px-6 py-3">
+                {isLoading ? (
+                  <div className="flex items-center">
+                    <span className="inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+                    <span className="ml-3">Loading... ({progress}%)</span>
+                  </div>
+                ) : (
+                  `Load ${model?.label}`
+                )}
+              </div>
+            </button>
+            <button
+              onClick={(e) => {
+                if (!isLoading) {
+                  e.stopPropagation();
+                  setIsModelDropdownOpen(!isModelDropdownOpen);
+                }
+              }}
+              aria-label="Select model"
+              className="px-3 py-3 border-l border-indigo-800 hover:bg-indigo-700 transition-colors rounded-r-lg disabled:cursor-not-allowed disabled:bg-gray-700"
+              disabled={isLoading}
+            >
+              <ChevronDown size={24} />
+            </button>
+          </div>
+          {isModelDropdownOpen && (
+            <div className="absolute left-0 right-0 top-full mt-2 bg-gray-800 border border-gray-700 rounded-lg shadow-lg z-10 w-full overflow-hidden">
+              {MODEL_OPTIONS.map((option) => (
+                <button
+                  key={option.id}
+                  onClick={() => handleModelSelect(option.id)}
+                  className={`w-full px-4 py-2 text-left hover:bg-gray-700 transition-colors ${selectedModelId === option.id ? "bg-indigo-600 text-white" : "text-gray-200"}`}
+                >
+                  <div className="font-medium">{option.label}</div>
+                  <div className="text-sm text-gray-400">{option.size}</div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        {error && (
+          <div className="bg-red-900/50 border border-red-700/60 rounded-lg p-4 mt-6 max-w-md text-center">
+            <p className="text-sm text-red-200">Error: {error}</p>
+            <button
+              onClick={loadSelectedModel}
+              className="mt-3 text-sm bg-red-600 hover:bg-red-700 px-4 py-1.5 rounded-md font-semibold transition-colors"
+            >
+              Retry
+            </button>
+          </div>
+        )}
+      </div>
+      {/* Click-away listener for dropdown */}
+      {isModelDropdownOpen && (
+        <div
+          className="fixed inset-0 z-5"
+          onClick={() => setIsModelDropdownOpen(false)}
+        />
+      )}
+    </div>
+  );
+};

src/components/ResultBlock.tsx ADDED Viewed

	@@ -0,0 +1,21 @@

+import type React from "react";
+const ResultBlock: React.FC<{ error?: string; result?: any }> = ({
+  error,
+  result,
+}) => (
+  <div
+    className={
+      error
+        ? "bg-red-900 border border-red-600 rounded p-3"
+        : "bg-gray-700 border border-gray-600 rounded p-3"
+    }
+  >
+    {error ? <p className="text-red-300 text-sm">Error: {error}</p> : null}
+    <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto mt-2">
+      {typeof result === "object" ? JSON.stringify(result, null, 2) : result}
+    </pre>
+  </div>
+);
+export default ResultBlock;

src/components/ToolCallIndicator.tsx ADDED Viewed

	@@ -0,0 +1,98 @@

+import type React from "react";
+import { extractToolCallContent } from "../utils";
+const ToolCallIndicator: React.FC<{
+  content: string;
+  isRunning: boolean;
+  hasError: boolean;
+}> = ({ content, isRunning, hasError }) => (
+  <div
+    className={`transition-all duration-500 ease-in-out rounded-lg p-4 ${
+      isRunning
+        ? "bg-gradient-to-r from-yellow-900/30 to-orange-900/30 border border-yellow-600/50"
+        : hasError
+          ? "bg-gradient-to-r from-red-900/30 to-rose-900/30 border border-red-600/50"
+          : "bg-gradient-to-r from-green-900/30 to-emerald-900/30 border border-green-600/50"
+    }`}
+  >
+    <div className="flex items-start space-x-3">
+      <div className="flex-shrink-0">
+        <div className="relative w-6 h-6">
+          {/* Spinner for running */}
+          <div
+            className={`absolute inset-0 flex items-center justify-center transition-opacity duration-500 ${
+              isRunning ? "opacity-100" : "opacity-0 pointer-events-none"
+            }`}
+          >
+            <div className="w-6 h-6 bg-green-400/0 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin"></div>
+          </div>
+          {/* Cross for error */}
+          <div
+            className={`absolute inset-0 flex items-center justify-center transition-opacity duration-500 ${
+              hasError ? "opacity-100" : "opacity-0 pointer-events-none"
+            }`}
+          >
+            <div className="w-6 h-6 bg-red-400/100 rounded-full flex items-center justify-center transition-colors duration-500 ease-in-out">
+              <span className="text-xs text-gray-900 font-bold">✗</span>
+            </div>
+          </div>
+          {/* Tick for success */}
+          <div
+            className={`absolute inset-0 flex items-center justify-center transition-opacity duration-500 ${
+              !isRunning && !hasError
+                ? "opacity-100"
+                : "opacity-0 pointer-events-none"
+            }`}
+          >
+            <div className="w-6 h-6 bg-green-400/100 rounded-full flex items-center justify-center transition-colors duration-500 ease-in-out">
+              <span className="text-xs text-gray-900 font-bold">✓</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex-grow min-w-0">
+        <div className="flex items-center space-x-2 mb-2">
+          <span
+            className={`font-semibold text-sm transition-colors duration-500 ease-in-out ${
+              isRunning
+                ? "text-yellow-400"
+                : hasError
+                  ? "text-red-400"
+                  : "text-green-400"
+            }`}
+          >
+            🔧 Tool Call
+          </span>
+          {isRunning && (
+            <span className="text-yellow-300 text-xs animate-pulse">
+              Running...
+            </span>
+          )}
+        </div>
+        <div className="bg-gray-800/50 rounded p-2 mb-2">
+          <code className="text-xs text-gray-300 font-mono break-all">
+            {extractToolCallContent(content) ?? "..."}
+          </code>
+        </div>
+        <p
+          className={`text-xs transition-colors duration-500 ease-in-out ${
+            isRunning
+              ? "text-yellow-200"
+              : hasError
+                ? "text-red-200"
+                : "text-green-200"
+          }`}
+        >
+          {isRunning
+            ? "Executing tool call..."
+            : hasError
+              ? "Tool call failed"
+              : "Tool call completed"}
+        </p>
+      </div>
+    </div>
+  </div>
+);
+export default ToolCallIndicator;

src/components/ToolItem.tsx ADDED Viewed

	@@ -0,0 +1,144 @@

+import Editor from "@monaco-editor/react";
+import { ChevronUp, ChevronDown, Trash2, Power } from "lucide-react";
+import { useMemo } from "react";
+import { extractFunctionAndRenderer, generateSchemaFromCode } from "../utils";
+export interface Tool {
+  id: number;
+  name: string;
+  code: string;
+  enabled: boolean;
+  isCollapsed?: boolean;
+  renderer?: string;
+}
+interface ToolItemProps {
+  tool: Tool;
+  onToggleEnabled: () => void;
+  onToggleCollapsed: () => void;
+  onExpand: () => void;
+  onDelete: () => void;
+  onCodeChange: (newCode: string) => void;
+}
+const ToolItem: React.FC<ToolItemProps> = ({
+  tool,
+  onToggleEnabled,
+  onToggleCollapsed,
+  onDelete,
+  onCodeChange,
+}) => {
+  const { functionCode } = extractFunctionAndRenderer(tool.code);
+  const schema = useMemo(
+    () => generateSchemaFromCode(functionCode),
+    [functionCode],
+  );
+  return (
+    <div
+      className={`bg-gray-700 rounded-lg p-4 transition-all ${!tool.enabled ? "opacity-50 grayscale" : ""}`}
+    >
+      <div
+        className="flex justify-between items-center cursor-pointer"
+        onClick={onToggleCollapsed}
+      >
+        <div>
+          <h3 className="text-lg font-bold text-teal-300 font-mono">
+            {schema.name}
+          </h3>
+          <div className="text-xs text-gray-300 mt-1">{schema.description}</div>
+        </div>
+        <div className="flex items-center space-x-3">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleEnabled();
+            }}
+            className={`p-1 rounded-full ${tool.enabled ? "text-green-400 hover:bg-green-900" : "text-red-400 hover:bg-red-900"}`}
+          >
+            <Power size={18} />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+            className="p-2 text-gray-400 hover:text-red-500 hover:bg-gray-600 rounded-lg"
+          >
+            <Trash2 size={18} />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleCollapsed();
+            }}
+            className="p-2 text-gray-400 hover:text-white"
+          >
+            {tool.isCollapsed ? (
+              <ChevronDown size={20} />
+            ) : (
+              <ChevronUp size={20} />
+            )}
+          </button>
+        </div>
+      </div>
+      {!tool.isCollapsed && (
+        <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="md:col-span-2">
+            <label className="text-sm font-bold text-gray-400">
+              Implementation & Renderer
+            </label>
+            <div
+              className="mt-1 rounded-md overflow-visible border border-gray-600"
+              style={{ overflow: "visible" }}
+            >
+              <Editor
+                height="300px"
+                language="javascript"
+                theme="vs-dark"
+                value={tool.code}
+                onChange={(value) => onCodeChange(value || "")}
+                options={{
+                  minimap: { enabled: false },
+                  scrollbar: { verticalScrollbarSize: 10 },
+                  fontSize: 14,
+                  lineDecorationsWidth: 0,
+                  lineNumbersMinChars: 3,
+                  scrollBeyondLastLine: false,
+                }}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col">
+            <label className="text-sm font-bold text-gray-400">
+              Generated Schema
+            </label>
+            <div className="mt-1 rounded-md flex-grow overflow-visible border border-gray-600">
+              <Editor
+                height="300px"
+                language="json"
+                theme="vs-dark"
+                value={JSON.stringify(schema, null, 2)}
+                options={{
+                  readOnly: true,
+                  minimap: { enabled: false },
+                  scrollbar: { verticalScrollbarSize: 10 },
+                  lineNumbers: "off",
+                  glyphMargin: false,
+                  folding: false,
+                  lineDecorationsWidth: 0,
+                  lineNumbersMinChars: 0,
+                  scrollBeyondLastLine: false,
+                  fontSize: 12,
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+export default ToolItem;

src/components/ToolResultRenderer.tsx ADDED Viewed

	@@ -0,0 +1,42 @@

+import React from "react";
+import ResultBlock from "./ResultBlock";
+const ToolResultRenderer: React.FC<{
+  result: any;
+  rendererCode?: string;
+  input?: any;
+}> = ({ result, rendererCode, input }) => {
+  if (!rendererCode) {
+    return <ResultBlock result={result} />;
+  }
+  try {
+    const exportMatch = rendererCode.match(/export\s+default\s+(.*)/s);
+    if (!exportMatch) {
+      throw new Error("Invalid renderer format - no export default found");
+    }
+    const componentCode = exportMatch[1].trim();
+    const componentFunction = new Function(
+      "React",
+      "input",
+      "output",
+      `
+      const { createElement: h, Fragment } = React;
+      const JSXComponent = ${componentCode};
+      return JSXComponent(input, output);
+      `,
+    );
+    const element = componentFunction(React, input || {}, result);
+    return element;
+  } catch (error) {
+    return (
+      <ResultBlock
+        error={error instanceof Error ? error.message : "Unknown error"}
+        result={result}
+      />
+    );
+  }
+};
+export default ToolResultRenderer;

src/components/icons/HfLogo.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/icons/LiquidAILogo.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+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="M12.028 8.546l-.008.005 3.03 5.25a3.94 3.94 0 01.643 2.162c0 .754-.212 1.46-.58 2.062l6.173-1.991L11.63 0 9.304 3.872l2.724 4.674zM6.837 24l4.85-4.053h-.013c-2.219 0-4.017-1.784-4.017-3.984 0-.794.235-1.534.64-2.156l2.865-4.976-2.381-4.087L2 16.034 6.83 24h.007zM13.737 19.382h-.001L8.222 24h8.182l4.148-6.769-6.815 2.151z"></path>
+  </svg>
+);

src/constants/db.ts ADDED Viewed

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

+export const DB_NAME = "tool-caller-db";
+export const STORE_NAME = "tools";
+export const SETTINGS_STORE_NAME = "settings";

src/constants/examples.ts ADDED Viewed

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

+export interface Example {
+  icon: string;
+  displayText: string;
+  messageText: string;
+}
+export const DEFAULT_EXAMPLES: Example[] = [
+  {
+    icon: "🌍",
+    displayText: "Where am I and what time is it?",
+    messageText: "Where am I and what time is it?",
+  },
+  {
+    icon: "👋",
+    displayText: "Say hello",
+    messageText: "Say hello",
+  },
+  {
+    icon: "🔢",
+    displayText: "Solve a math problem",
+    messageText: "What is 123 plus 15% of 200 all divided by 7?",
+  },
+  {
+    icon: "😴",
+    displayText: "Sleep for 3 seconds",
+    messageText: "Sleep for 3 seconds",
+  },
+  {
+    icon: "🎲",
+    displayText: "Generate a random number",
+    messageText: "Generate a random number between 1 and 100.",
+  },
+  {
+    icon: "📹",
+    displayText: "Play a video",
+    messageText:
+      'Open the following webpage: "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1".',
+  },
+];

src/constants/models.ts ADDED Viewed

	@@ -0,0 +1,5 @@

+export const MODEL_OPTIONS = [
+  { id: "350M", label: "LFM2-350M", size: "350M parameters (312 MB)" },
+  { id: "700M", label: "LFM2-700M", size: "700M parameters (579 MB)" },
+  { id: "1.2B", label: "LFM2-1.2B", size: "1.2B parameters (868 MB)" },
+];

src/constants/systemPrompt.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+export const DEFAULT_SYSTEM_PROMPT = [
+  "You are an AI assistant with access to a set of tools.",
+  "When a user asks a question, determine if a tool should be called to help answer.",
+  "If a tool is needed, respond with a tool call using the following format: ",
+  "<|tool_call_start|>[tool_function_call_1, tool_function_call_2, ...]<|tool_call_end|>.",
+  'Each tool function call should use Python-like syntax, e.g., speak("Hello"), random_number(min=1, max=10).',
+  "If no tool is needed, you should answer the user directly without calling any tools.",
+  "Always use the most relevant tool(s) for the user's request.",
+  "If a tool returns an error, explain the error to the user.",
+  "Be concise and helpful.",
+].join(" ");

src/hooks/useLLM.ts ADDED Viewed

	@@ -0,0 +1,234 @@

+import { useState, useEffect, useRef, useCallback } from "react";
+import {
+  AutoModelForCausalLM,
+  AutoTokenizer,
+  TextStreamer,
+} from "@huggingface/transformers";
+interface LLMState {
+  isLoading: boolean;
+  isReady: boolean;
+  error: string | null;
+  progress: number;
+}
+interface LLMInstance {
+  model: any;
+  tokenizer: any;
+}
+let moduleCache: {
+  [modelId: string]: {
+    instance: LLMInstance | null;
+    loadingPromise: Promise<LLMInstance> | null;
+  };
+} = {};
+export const useLLM = (modelId?: string) => {
+  const [state, setState] = useState<LLMState>({
+    isLoading: false,
+    isReady: false,
+    error: null,
+    progress: 0,
+  });
+  const instanceRef = useRef<LLMInstance | null>(null);
+  const loadingPromiseRef = useRef<Promise<LLMInstance> | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const pastKeyValuesRef = useRef<any>(null);
+  const loadModel = useCallback(async () => {
+    if (!modelId) {
+      throw new Error("Model ID is required");
+    }
+    const MODEL_ID = `onnx-community/LFM2-${modelId}-ONNX`;
+    if (!moduleCache[modelId]) {
+      moduleCache[modelId] = {
+        instance: null,
+        loadingPromise: null,
+      };
+    }
+    const cache = moduleCache[modelId];
+    const existingInstance = instanceRef.current || cache.instance;
+    if (existingInstance) {
+      instanceRef.current = existingInstance;
+      cache.instance = existingInstance;
+      setState((prev) => ({ ...prev, isReady: true, isLoading: false }));
+      return existingInstance;
+    }
+    const existingPromise = loadingPromiseRef.current || cache.loadingPromise;
+    if (existingPromise) {
+      try {
+        const instance = await existingPromise;
+        instanceRef.current = instance;
+        cache.instance = instance;
+        setState((prev) => ({ ...prev, isReady: true, isLoading: false }));
+        return instance;
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error:
+            error instanceof Error ? error.message : "Failed to load model",
+        }));
+        throw error;
+      }
+    }
+    setState((prev) => ({
+      ...prev,
+      isLoading: true,
+      error: null,
+      progress: 0,
+    }));
+    abortControllerRef.current = new AbortController();
+    const loadingPromise = (async () => {
+      try {
+        const progressCallback = (progress: any) => {
+          // Only update progress for weights
+          if (
+            progress.status === "progress" &&
+            progress.file.endsWith(".onnx_data")
+          ) {
+            const percentage = Math.round(
+              (progress.loaded / progress.total) * 100,
+            );
+            setState((prev) => ({ ...prev, progress: percentage }));
+          }
+        };
+        const tokenizer = await AutoTokenizer.from_pretrained(MODEL_ID, {
+          progress_callback: progressCallback,
+        });
+        const model = await AutoModelForCausalLM.from_pretrained(MODEL_ID, {
+          dtype: "q4f16",
+          device: "webgpu",
+          progress_callback: progressCallback,
+        });
+        const instance = { model, tokenizer };
+        instanceRef.current = instance;
+        cache.instance = instance;
+        loadingPromiseRef.current = null;
+        cache.loadingPromise = null;
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          isReady: true,
+          progress: 100,
+        }));
+        return instance;
+      } catch (error) {
+        loadingPromiseRef.current = null;
+        cache.loadingPromise = null;
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error:
+            error instanceof Error ? error.message : "Failed to load model",
+        }));
+        throw error;
+      }
+    })();
+    loadingPromiseRef.current = loadingPromise;
+    cache.loadingPromise = loadingPromise;
+    return loadingPromise;
+  }, [modelId]);
+  const generateResponse = useCallback(
+    async (
+      messages: Array<{ role: string; content: string }>,
+      tools: Array<any>,
+      onToken?: (token: string) => void,
+    ): Promise<string> => {
+      const instance = instanceRef.current;
+      if (!instance) {
+        throw new Error("Model not loaded. Call loadModel() first.");
+      }
+      const { model, tokenizer } = instance;
+      // Apply chat template with tools
+      const input = tokenizer.apply_chat_template(messages, {
+        tools,
+        add_generation_prompt: true,
+        return_dict: true,
+      });
+      const streamer = onToken
+        ? new TextStreamer(tokenizer, {
+            skip_prompt: true,
+            skip_special_tokens: false,
+            callback_function: (token: string) => {
+              onToken(token);
+            },
+          })
+        : undefined;
+      // Generate the response
+      const { sequences, past_key_values } = await model.generate({
+        ...input,
+        past_key_values: pastKeyValuesRef.current,
+        max_new_tokens: 512,
+        do_sample: false,
+        streamer,
+        return_dict_in_generate: true,
+      });
+      pastKeyValuesRef.current = past_key_values;
+      // Decode the generated text with special tokens preserved (except final <|im_end|>) for tool call detection
+      const response = tokenizer
+        .batch_decode(sequences.slice(null, [input.input_ids.dims[1], null]), {
+          skip_special_tokens: false,
+        })[0]
+        .replace(/<\|im_end\|>$/, "");
+      return response;
+    },
+    [],
+  );
+  const clearPastKeyValues = useCallback(() => {
+    pastKeyValuesRef.current = null;
+  }, []);
+  const cleanup = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, []);
+  useEffect(() => {
+    return cleanup;
+  }, [cleanup]);
+  useEffect(() => {
+    if (modelId && moduleCache[modelId]) {
+      const existingInstance =
+        instanceRef.current || moduleCache[modelId].instance;
+      if (existingInstance) {
+        instanceRef.current = existingInstance;
+        setState((prev) => ({ ...prev, isReady: true }));
+      }
+    }
+  }, [modelId]);
+  return {
+    ...state,
+    loadModel,
+    generateResponse,
+    clearPastKeyValues,
+    cleanup,
+  };
+};

src/index.css ADDED Viewed

	@@ -0,0 +1 @@


1	+ @import "tailwindcss";

src/main.tsx ADDED Viewed

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

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

src/tools/get_location.js ADDED Viewed

	@@ -0,0 +1,84 @@

+/**
+ * Get the user's current location using the browser's geolocation API.
+ * @returns {Promise<{ latitude: number, longitude: number }>} The current position { latitude, longitude }.
+ */
+export async function get_location() {
+  return new Promise((resolve, reject) => {
+    if (!navigator.geolocation) {
+      reject("Geolocation not supported.");
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      (pos) =>
+        resolve({
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude,
+        }),
+      (err) => reject(err.message || "Geolocation error"),
+    );
+  });
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-green-50 border border-green-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "📍",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-green-900 font-semibold" },
+        "Location",
+      ),
+    ),
+    output?.latitude && output?.longitude
+      ? React.createElement(
+          "div",
+          { className: "space-y-1 text-sm" },
+          React.createElement(
+            "p",
+            { className: "text-green-700" },
+            React.createElement(
+              "span",
+              { className: "font-medium" },
+              "Latitude: ",
+            ),
+            output.latitude.toFixed(6),
+          ),
+          React.createElement(
+            "p",
+            { className: "text-green-700" },
+            React.createElement(
+              "span",
+              { className: "font-medium" },
+              "Longitude: ",
+            ),
+            output.longitude.toFixed(6),
+          ),
+          React.createElement(
+            "a",
+            {
+              href: `https://maps.google.com?q=${output.latitude},${output.longitude}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className:
+                "inline-block mt-2 text-green-600 hover:text-green-800 underline text-xs",
+            },
+            "View on Google Maps",
+          ),
+        )
+      : React.createElement(
+          "p",
+          { className: "text-green-700 text-sm" },
+          JSON.stringify(output),
+        ),
+  );

src/tools/get_time.js ADDED Viewed

	@@ -0,0 +1,51 @@

+/**
+ * Get the current date and time.
+ * @returns {{ iso: string, local: string }} The current date and time as ISO and local time strings.
+ */
+export function get_time() {
+  const now = new Date();
+  return {
+    iso: now.toISOString(),
+    local: now.toLocaleString(undefined, {
+      dateStyle: "full",
+      timeStyle: "long",
+    }),
+  };
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-amber-50 border border-amber-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🕐",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-amber-900 font-semibold" },
+        "Current Time",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-sm space-y-1" },
+      React.createElement(
+        "p",
+        { className: "text-amber-700 font-mono" },
+        output.local,
+      ),
+      React.createElement(
+        "p",
+        { className: "text-amber-600 text-xs" },
+        new Date(output.iso).toLocaleString(),
+      ),
+    ),
+  );

src/tools/index.ts ADDED Viewed

	@@ -0,0 +1,19 @@

+import SPEAK_TOOL from "./speak.js?raw";
+import GET_LOCATION_TOOL from "./get_location.js?raw";
+import SLEEP_TOOL from "./sleep.js?raw";
+import GET_TIME_TOOL from "./get_time.js?raw";
+import RANDOM_NUMBER_TOOL from "./random_number.js?raw";
+import MATH_EVAL_TOOL from "./math_eval.js?raw";
+import TEMPLATE_TOOL from "./template.js?raw";
+import OPEN_WEBPAGE_TOOL from "./open_webpage.js?raw";
+export const DEFAULT_TOOLS = {
+  speak: SPEAK_TOOL,
+  get_location: GET_LOCATION_TOOL,
+  sleep: SLEEP_TOOL,
+  get_time: GET_TIME_TOOL,
+  random_number: RANDOM_NUMBER_TOOL,
+  math_eval: MATH_EVAL_TOOL,
+  open_webpage: OPEN_WEBPAGE_TOOL,
+};
+export const TEMPLATE = TEMPLATE_TOOL;

src/tools/math_eval.js ADDED Viewed

	@@ -0,0 +1,54 @@

+/**
+ * Evaluate a math expression.
+ * @param {string} expression - The math expression (e.g., "2 + 2 * (3 - 1)").
+ * @returns {number} The result of the expression.
+ */
+export function math_eval(expression) {
+  // Only allow numbers, spaces, and math symbols: + - * / % ( ) .
+  if (!/^[\d\s+\-*/%.()]+$/.test(expression)) {
+    throw new Error("Invalid characters in expression.");
+  }
+  return Function('"use strict";return (' + expression + ")")();
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-emerald-50 border border-emerald-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🧮",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-emerald-900 font-semibold" },
+        "Math Evaluation",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-center" },
+      React.createElement(
+        "div",
+        { className: "text-lg font-mono text-emerald-700 mb-1" },
+        input.expression || "Unknown expression",
+      ),
+      React.createElement(
+        "div",
+        { className: "text-2xl font-bold text-emerald-600 mb-1" },
+        `= ${output}`,
+      ),
+      React.createElement(
+        "p",
+        { className: "text-emerald-500 text-xs" },
+        "Calculation result",
+      ),
+    ),
+  );

src/tools/open_webpage.js ADDED Viewed

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

+/**
+ * Open a webpage
+ * @param {string} src - The URL of the webpage.
+ * @returns {string} The validated URL.
+ */
+export function open_webpage(src) {
+  try {
+    const urlObj = new URL(src);
+    if (!["http:", "https:"].includes(urlObj.protocol)) {
+      throw new Error("Only HTTP and HTTPS URLs are allowed.");
+    }
+    return urlObj.href;
+  } catch (error) {
+    throw new Error("Invalid URL provided.");
+  }
+}
+export default (input, output) => {
+  return React.createElement(
+    "div",
+    { className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🌐",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-blue-900 font-semibold" },
+        "Web Page",
+      ),
+    ),
+    React.createElement("iframe", {
+      src: output,
+      className: "w-full border border-blue-300 rounded",
+      width: 480,
+      height: 360,
+      title: "Embedded content",
+      allow: "autoplay",
+      frameBorder: "0",
+    }),
+  );
+};

src/tools/random_number.js ADDED Viewed

	@@ -0,0 +1,51 @@

+/**
+ * Generate a random integer between min and max (inclusive).
+ * @param {number} min - Minimum value (inclusive).
+ * @param {number} max - Maximum value (inclusive).
+ * @returns {number} A random integer.
+ */
+export function random_number(min, max) {
+  min = Math.ceil(Number(min));
+  max = Math.floor(Number(max));
+  if (isNaN(min) || isNaN(max) || min > max) {
+    throw new Error("Invalid min or max value.");
+  }
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-indigo-50 border border-indigo-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🎲",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-indigo-900 font-semibold" },
+        "Random Number",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-center" },
+      React.createElement(
+        "div",
+        { className: "text-3xl font-bold text-indigo-600 mb-1" },
+        output,
+      ),
+      React.createElement(
+        "p",
+        { className: "text-indigo-500 text-xs" },
+        `Range: ${input.min || "?"} - ${input.max || "?"}`,
+      ),
+    ),
+  );

src/tools/sleep.js ADDED Viewed

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

+/**
+ * Sleep for a given number of seconds.
+ * @param {number} seconds - The number of seconds to sleep.
+ * @return {void}
+ */
+export async function sleep(seconds) {
+  return new Promise((resolve) => setTimeout(resolve, seconds * 1000));
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-purple-50 border border-purple-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "😴",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-purple-900 font-semibold" },
+        "Sleep",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-sm space-y-1" },
+      React.createElement(
+        "p",
+        { className: "text-purple-700 font-medium" },
+        `Slept for ${input.seconds || "unknown"} seconds`,
+      ),
+      React.createElement(
+        "p",
+        { className: "text-purple-600 text-xs" },
+        output,
+      ),
+    ),
+  );

src/tools/speak.js ADDED Viewed

	@@ -0,0 +1,58 @@

+/**
+ * Speak text using the browser's speech synthesis API.
+ * @param {string} text - The text to speak.
+ * @param {string} [voice] - The name of the voice to use (optional).
+ * @return {void}
+ */
+export function speak(text, voice = undefined) {
+  const utter = new window.SpeechSynthesisUtterance(text);
+  if (voice) {
+    const voices = window.speechSynthesis.getVoices();
+    const match = voices.find((v) => v.name === voice);
+    if (match) utter.voice = match;
+  }
+  window.speechSynthesis.speak(utter);
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🔊",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-blue-900 font-semibold" },
+        "Speech Synthesis",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-sm space-y-1" },
+      React.createElement(
+        "p",
+        { className: "text-blue-700 font-medium" },
+        `Speaking: "${input.text || "Unknown text"}"`,
+      ),
+      input.voice &&
+        React.createElement(
+          "p",
+          { className: "text-blue-600 text-xs" },
+          `Voice: ${input.voice}`,
+        ),
+      React.createElement(
+        "p",
+        { className: "text-blue-600 text-xs" },
+        typeof output === "string" ? output : "Speech completed successfully",
+      ),
+    ),
+  );

src/tools/template.js ADDED Viewed

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

+/**
+ * Description of the tool.
+ * @param {any} parameter1 - Description of the first parameter.
+ * @param {any} parameter2 - Description of the second parameter.
+ * @returns {any} Description of the return value.
+ */
+export function new_tool(parameter1, parameter2) {
+  // TODO: Implement the tool logic here
+  return true; // Placeholder return value
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-amber-50 border border-amber-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🛠️",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-amber-900 font-semibold" },
+        "Tool Name",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-sm space-y-1" },
+      React.createElement(
+        "p",
+        { className: "text-amber-700 font-medium" },
+        `Input: ${JSON.stringify(input)}`,
+      ),
+      React.createElement(
+        "p",
+        { className: "text-amber-600 text-xs" },
+        `Output: ${output}`,
+      ),
+    ),
+  );

src/utils.ts ADDED Viewed

	@@ -0,0 +1,370 @@

+interface ParsedCall {
+  name: string;
+  positionalArgs: any[];
+  keywordArgs: Record<string, any>;
+}
+interface Schema {
+  name: string;
+  description: string;
+  parameters: {
+    type: string;
+    properties: Record<
+      string,
+      {
+        type: string;
+        description: string;
+        default?: any;
+      }
+    >;
+    required: string[];
+  };
+}
+interface JSDocParam {
+  type: string;
+  description: string;
+  isOptional: boolean;
+  defaultValue?: string;
+}
+const parseArguments = (argsString: string): string[] => {
+  const args: string[] = [];
+  let current = "";
+  let inQuotes = false;
+  let quoteChar = "";
+  let depth = 0;
+  for (let i = 0; i < argsString.length; i++) {
+    const char = argsString[i];
+    if (!inQuotes && (char === '"' || char === "'")) {
+      inQuotes = true;
+      quoteChar = char;
+      current += char;
+    } else if (inQuotes && char === quoteChar) {
+      inQuotes = false;
+      quoteChar = "";
+      current += char;
+    } else if (!inQuotes && char === "(") {
+      depth++;
+      current += char;
+    } else if (!inQuotes && char === ")") {
+      depth--;
+      current += char;
+    } else if (!inQuotes && char === "," && depth === 0) {
+      args.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) {
+    args.push(current.trim());
+  }
+  return args;
+};
+export const extractPythonicCalls = (toolCallContent: string): string[] => {
+  try {
+    const cleanContent = toolCallContent.trim();
+    try {
+      const parsed = JSON.parse(cleanContent);
+      if (Array.isArray(parsed)) {
+        return parsed;
+      }
+    } catch {
+      // Fallback to manual parsing
+    }
+    if (cleanContent.startsWith("[") && cleanContent.endsWith("]")) {
+      const inner = cleanContent.slice(1, -1).trim();
+      if (!inner) return [];
+      return parseArguments(inner).map((call) =>
+        call.trim().replace(/^['"]|['"]$/g, ""),
+      );
+    }
+    return [cleanContent];
+  } catch (error) {
+    console.error("Error parsing tool calls:", error);
+    return [];
+  }
+};
+export const parsePythonicCalls = (command: string): ParsedCall | null => {
+  const callMatch = command.match(/^([a-zA-Z0-9_]+)\((.*)\)$/);
+  if (!callMatch) return null;
+  const [, name, argsStr] = callMatch;
+  const args = parseArguments(argsStr);
+  const positionalArgs: any[] = [];
+  const keywordArgs: Record<string, any> = {};
+  for (const arg of args) {
+    const kwargMatch = arg.match(/^([a-zA-Z0-9_]+)\s*=\s*(.*)$/);
+    if (kwargMatch) {
+      const [, key, value] = kwargMatch;
+      try {
+        keywordArgs[key] = JSON.parse(value);
+      } catch {
+        keywordArgs[key] = value;
+      }
+    } else {
+      try {
+        positionalArgs.push(JSON.parse(arg));
+      } catch {
+        positionalArgs.push(arg);
+      }
+    }
+  }
+  return { name, positionalArgs, keywordArgs };
+};
+export const extractFunctionAndRenderer = (
+  code: string,
+): { functionCode: string; rendererCode?: string } => {
+  if (typeof code !== "string") {
+    return { functionCode: code };
+  }
+  const exportMatch = code.match(/export\s+default\s+/);
+  if (!exportMatch) {
+    return { functionCode: code };
+  }
+  const exportIndex = exportMatch.index!;
+  const functionCode = code.substring(0, exportIndex).trim();
+  const rendererCode = code.substring(exportIndex).trim();
+  return { functionCode, rendererCode };
+};
+/**
+ * Helper function to extract JSDoc parameters from JSDoc comments.
+ */
+const extractJSDocParams = (
+  jsdoc: string,
+): Record<string, JSDocParam & { jsdocDefault?: string }> => {
+  const jsdocParams: Record<string, JSDocParam & { jsdocDefault?: string }> =
+    {};
+  const lines = jsdoc
+    .split("\n")
+    .map((line) => line.trim().replace(/^\*\s?/, ""));
+  const paramRegex =
+    /@param\s+\{([^}]+)\}\s+(\[?[a-zA-Z0-9_]+(?:=[^\]]+)?\]?|\S+)\s*-?\s*(.*)?/;
+  for (const line of lines) {
+    const paramMatch = line.match(paramRegex);
+    if (paramMatch) {
+      let [, type, namePart, description] = paramMatch;
+      description = description || "";
+      let isOptional = false;
+      let name = namePart;
+      let jsdocDefault: string | undefined = undefined;
+      if (name.startsWith("[") && name.endsWith("]")) {
+        isOptional = true;
+        name = name.slice(1, -1);
+      }
+      if (name.includes("=")) {
+        const [n, def] = name.split("=");
+        name = n.trim();
+        jsdocDefault = def.trim().replace(/['"]/g, "");
+      }
+      jsdocParams[name] = {
+        type: type.toLowerCase(),
+        description: description.trim(),
+        isOptional,
+        defaultValue: undefined,
+        jsdocDefault,
+      };
+    }
+  }
+  return jsdocParams;
+};
+/**
+ * Helper function to extract function signature information.
+ */
+const extractFunctionSignature = (
+  functionCode: string,
+): {
+  name: string;
+  params: { name: string; defaultValue?: string }[];
+} | null => {
+  const functionSignatureMatch = functionCode.match(
+    /function\s+([a-zA-Z0-9_]+)\s*\(([^)]*)\)/,
+  );
+  if (!functionSignatureMatch) {
+    return null;
+  }
+  const functionName = functionSignatureMatch[1];
+  const params = functionSignatureMatch[2]
+    .split(",")
+    .map((p) => p.trim())
+    .filter(Boolean)
+    .map((p) => {
+      const [name, defaultValue] = p.split("=").map((s) => s.trim());
+      return { name, defaultValue };
+    });
+  return { name: functionName, params };
+};
+export const generateSchemaFromCode = (code: string): Schema => {
+  const { functionCode } = extractFunctionAndRenderer(code);
+  if (typeof functionCode !== "string") {
+    return {
+      name: "invalid_code",
+      description: "Code is not a valid string.",
+      parameters: { type: "object", properties: {}, required: [] },
+    };
+  }
+  // 1. Extract function signature, name, and parameter names directly from the code
+  const signatureInfo = extractFunctionSignature(functionCode);
+  if (!signatureInfo) {
+    return {
+      name: "invalid_function",
+      description: "Could not parse function signature.",
+      parameters: { type: "object", properties: {}, required: [] },
+    };
+  }
+  const { name: functionName, params: paramsFromSignature } = signatureInfo;
+  const schema: Schema = {
+    name: functionName,
+    description: "",
+    parameters: {
+      type: "object",
+      properties: {},
+      required: [],
+    },
+  };
+  // 2. Parse JSDoc comments to get descriptions and types
+  const jsdocMatch = functionCode.match(/\/\*\*([\s\S]*?)\*\//);
+  let jsdocParams: Record<string, JSDocParam & { jsdocDefault?: string }> = {};
+  if (jsdocMatch) {
+    const jsdoc = jsdocMatch[1];
+    jsdocParams = extractJSDocParams(jsdoc);
+    const descriptionLines = jsdoc
+      .split("\n")
+      .map((line) => line.trim().replace(/^\*\s?/, ""))
+      .filter((line) => !line.startsWith("@") && line);
+    schema.description = descriptionLines.join(" ").trim();
+  }
+  // 3. Combine signature parameters with JSDoc info
+  for (const param of paramsFromSignature) {
+    const paramName = param.name;
+    const jsdocInfo = jsdocParams[paramName];
+    schema.parameters.properties[paramName] = {
+      type: jsdocInfo ? jsdocInfo.type : "any",
+      description: jsdocInfo ? jsdocInfo.description : "",
+    };
+    // Prefer default from signature, then from JSDoc
+    if (param.defaultValue !== undefined) {
+      // Try to parse as JSON, fallback to string
+      try {
+        schema.parameters.properties[paramName].default = JSON.parse(
+          param.defaultValue.replace(/'/g, '"'),
+        );
+      } catch {
+        schema.parameters.properties[paramName].default = param.defaultValue;
+      }
+    } else if (jsdocInfo && jsdocInfo.jsdocDefault !== undefined) {
+      schema.parameters.properties[paramName].default = jsdocInfo.jsdocDefault;
+    }
+    // A parameter is required if:
+    // - Not optional in JSDoc
+    // - No default in signature
+    // - No default in JSDoc
+    const hasDefault =
+      param.defaultValue !== undefined ||
+      (jsdocInfo && jsdocInfo.jsdocDefault !== undefined);
+    if (!jsdocInfo || (!jsdocInfo.isOptional && !hasDefault)) {
+      schema.parameters.required.push(paramName);
+    }
+  }
+  return schema;
+};
+/**
+ * Extracts tool call content from a string using the tool call markers.
+ */
+export const extractToolCallContent = (content: string): string | null => {
+  const toolCallMatch = content.match(
+    /<\|tool_call_start\|>(.*?)<\|tool_call_end\|>/s,
+  );
+  return toolCallMatch ? toolCallMatch[1].trim() : null;
+};
+/**
+ * Maps positional and keyword arguments to named parameters based on schema.
+ */
+export const mapArgsToNamedParams = (
+  paramNames: string[],
+  positionalArgs: any[],
+  keywordArgs: Record<string, any>,
+): Record<string, any> => {
+  const namedParams: Record<string, any> = Object.create(null);
+  positionalArgs.forEach((arg, idx) => {
+    if (idx < paramNames.length) {
+      namedParams[paramNames[idx]] = arg;
+    }
+  });
+  Object.assign(namedParams, keywordArgs);
+  return namedParams;
+};
+export const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === "string") {
+    return error;
+  }
+  if (error && typeof error === "object") {
+    return JSON.stringify(error);
+  }
+  return String(error);
+};
+/**
+ * Adapted from https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser.
+ */
+export function isMobileOrTablet() {
+  let check = false;
+  (function (a: string) {
+    if (
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
+        a,
+      ) ||
+      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+        a.slice(0, 4),
+      )
+    )
+      check = true;
+  })(
+    navigator.userAgent ||
+      navigator.vendor ||
+      ("opera" in window && typeof window.opera === "string"
+        ? window.opera
+        : ""),
+  );
+  return check;
+}

src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


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

tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,27 @@

+{
+  "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
+  },
+  "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,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,8 @@

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