Spaces:

ibm-granite
/

Granite-4.0-Nano-WebGPU

Running

App Files Files Community

ibibrahim

Xenova HF Staff commited on 7 days ago

Commit

c675f75

verified ·

1 Parent(s): 58f2f9b

Create demo (#1)

Browse files

- [WIP] do not merge yet (0fb17e108386b0d4175564b8f6d1baf9b55ab328)
- Delete index.html (2ea66b78a61812e89c3c0b39a831847eebae54ef)
- Delete style.css (2d84b4823957e674885571e16558b0e5c6b8377c)
- Upload 33 files (5ed8a7ec3ef4619a9bd8e25b887e84ce188d7200)

Co-authored-by: Joshua <Xenova@users.noreply.huggingface.co>

Files changed (35) hide show

eslint.config.js +23 -0
index.html +13 -26
index.js +0 -76
package.json +35 -0
src/App.tsx +758 -0
src/components/ExamplePrompts.tsx +46 -0
src/components/LoadingScreen.tsx +291 -0
src/components/ResultBlock.tsx +21 -0
src/components/ToolCallIndicator.tsx +104 -0
src/components/ToolItem.tsx +146 -0
src/components/ToolResultRenderer.tsx +42 -0
src/components/icons/HfLogo.tsx +35 -0
src/components/icons/IBMLogo.tsx +12 -0
src/constants/db.ts +3 -0
src/constants/examples.ts +39 -0
src/constants/models.ts +23 -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 +59 -0
src/tools/template.js +47 -0
src/utils.ts +249 -0
src/vite-env.d.ts +1 -0
style.css +0 -76
tsconfig.app.json +27 -0
tsconfig.json +7 -0
tsconfig.node.json +25 -0
vite.config.ts +8 -0

eslint.config.js ADDED Viewed

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

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

index.html CHANGED Viewed

@@ -1,29 +1,16 @@
-<!DOCTYPE html>
 <html lang="en">
-<head>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
-</head>
-<body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-    <script src="index.js" type="module"></script>
-</body>
-</html>

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

index.js DELETED Viewed

@@ -1,76 +0,0 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.4.1';
-// Reference the elements that we will need
-const status = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
-});
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
-    const reader = new FileReader();
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
-    reader.readAsDataURL(file);
-});
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
-}
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
-    // Draw the box
-    const boxElement = document.createElement('div');
-    boxElement.className = 'bounding-box';
-    Object.assign(boxElement.style, {
-        borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
-    })
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
-}

package.json ADDED Viewed

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

+{
+  "name": "granite-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.6",
+    "@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"
+  }
+}

src/App.tsx ADDED Viewed

	@@ -0,0 +1,758 @@

+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useMemo,
+} from "react";
+import { openDB, type IDBPDatabase } from "idb";
+import { Play, Plus, RotateCcw, Wrench } from "lucide-react";
+import { useLLM } from "./hooks/useLLM";
+import type { Tool } from "./components/ToolItem";
+import {
+  extractFunctionAndRenderer,
+  generateSchemaFromCode,
+  getErrorMessage,
+  isMobileOrTablet,
+} from "./utils";
+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 [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 [selectedModel, setSelectedModel] = useState<string>(
+    isMobile ? "350M" : "1B",
+  );
+  const [isModelDropdownOpen, setIsModelDropdownOpen] =
+    useState<boolean>(false);
+  const [isToolsPanelVisible, setIsToolsPanelVisible] =
+    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(selectedModel);
+  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);
+  };
+  interface ToolCallPayload {
+    name: string;
+    arguments?: Record<string, any>;
+  }
+  const extractToolCalls = (text: string): ToolCallPayload[] => {
+    const matches = Array.from(
+      text.matchAll(/<tool_call>([\s\S]*?)<\/tool_call>/g),
+    );
+    const toolCalls: ToolCallPayload[] = [];
+    for (const match of matches) {
+      try {
+        const parsed = JSON.parse(match[1].trim());
+        if (parsed && typeof parsed.name === "string") {
+          toolCalls.push({
+            name: parsed.name,
+            arguments: parsed.arguments ?? {},
+          });
+        }
+      } catch {
+        // ignore malformed tool call payloads
+      }
+    }
+    return toolCalls;
+  };
+  const executeToolCall = async (
+    toolCall: ToolCallPayload,
+  ): Promise<{
+    serializedResult: string;
+    rendererCode?: string;
+    input: Record<string, any>;
+  }> => {
+    const toolToUse = tools.find((t) => t.name === toolCall.name && t.enabled);
+    if (!toolToUse)
+      throw new Error(`Tool '${toolCall.name}' not found or is disabled.`);
+    const { functionCode, rendererCode } = extractFunctionAndRenderer(
+      toolToUse.code,
+    );
+    const schema = generateSchemaFromCode(functionCode);
+    const properties = schema.parameters?.properties ?? {};
+    const paramNames = Object.keys(properties);
+    const requiredParams = schema.parameters?.required ?? [];
+    const callArgs = toolCall.arguments ?? {};
+    const finalArgs: any[] = [];
+    const resolvedArgs: Record<string, any> = Object.create(null);
+    for (const paramName of paramNames) {
+      const propertyConfig = properties[paramName] ?? {};
+      if (Object.prototype.hasOwnProperty.call(callArgs, paramName)) {
+        const value = callArgs[paramName];
+        finalArgs.push(value);
+        resolvedArgs[paramName] = value;
+      } else if (
+        Object.prototype.hasOwnProperty.call(propertyConfig, "default")
+      ) {
+        const value = propertyConfig.default;
+        finalArgs.push(value);
+        resolvedArgs[paramName] = value;
+      } else if (!requiredParams.includes(paramName)) {
+        finalArgs.push(undefined);
+        resolvedArgs[paramName] = undefined;
+      } else {
+        throw new Error(`Missing required argument: ${paramName}`);
+      }
+    }
+    for (const extraKey of Object.keys(callArgs)) {
+      if (!Object.prototype.hasOwnProperty.call(resolvedArgs, extraKey)) {
+        resolvedArgs[extraKey] = callArgs[extraKey];
+      }
+    }
+    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 {
+      serializedResult: JSON.stringify(result),
+      rendererCode,
+      input: resolvedArgs,
+    };
+  };
+  const executeToolCalls = async (
+    toolCalls: ToolCallPayload[],
+  ): Promise<RenderInfo[]> => {
+    if (toolCalls.length === 0) {
+      return [{ call: "", error: "No valid tool calls found." }];
+    }
+    const results: RenderInfo[] = [];
+    for (const toolCall of toolCalls) {
+      const callDisplay = `<tool_call>${JSON.stringify(toolCall)}</tool_call>`;
+      try {
+        const { serializedResult, rendererCode, input } =
+          await executeToolCall(toolCall);
+        let parsedResult: unknown;
+        try {
+          parsedResult = JSON.parse(serializedResult);
+        } catch {
+          parsedResult = serializedResult;
+        }
+        results.push({
+          call: callDisplay,
+          result: parsedResult,
+          renderer: rendererCode,
+          input,
+        });
+      } catch (error) {
+        results.push({
+          call: callDisplay,
+          error: getErrorMessage(error),
+        });
+      }
+    }
+    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 = [...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 toolCalls = extractToolCalls(response);
+        if (toolCalls.length > 0) {
+          const toolResults = await executeToolCalls(toolCalls);
+          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 loadSelectedModel = useCallback(async (): Promise<void> => {
+    try {
+      await loadModel();
+    } catch (error) {
+      console.error("Failed to load model:", error);
+    }
+  }, [selectedModel, loadModel]);
+  const saveSelectedModel = useCallback(async (modelId: string) => {
+    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);
+    }
+  }, []);
+  const loadSelectedModelId = useCallback(async (): Promise<void> => {
+    try {
+      const db = await getDB();
+      const stored = await db.get(SETTINGS_STORE_NAME, "selectedModelId");
+      if (stored && stored.value) {
+        setSelectedModel(stored.value);
+      }
+    } catch (error) {
+      console.error("Failed to load selected model ID:", error);
+    }
+  }, []);
+  useEffect(() => {
+    loadSelectedModelId();
+  }, [loadSelectedModelId]);
+  const handleModelSelect = async (modelId: string) => {
+    setSelectedModel(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 = [...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 toolCalls = extractToolCalls(response);
+        if (toolCalls.length > 0) {
+          const toolResults = await executeToolCalls(toolCalls);
+          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 min-h-screen bg-gradient-to-br from-[#031b4e] via-[#06183d] to-[#010409] text-gray-100 text-[16px] md:text-[17px]">
+      {!isReady ? (
+        <LoadingScreen
+          isLoading={isLoading}
+          progress={progress}
+          error={error}
+          loadSelectedModel={loadSelectedModel}
+          selectedModelId={selectedModel}
+          isModelDropdownOpen={isModelDropdownOpen}
+          setIsModelDropdownOpen={setIsModelDropdownOpen}
+          handleModelSelect={handleModelSelect}
+        />
+      ) : (
+        <div className="flex h-screen text-gray-100 w-full gap-6 py-10 px-8">
+          <div className="flex-1 flex flex-col p-6 bg-white/5 backdrop-blur-lg border border-white/10 rounded-3xl shadow-[0_35px_65px_rgba(3,27,78,0.55)] min-h-0">
+            <div className="flex items-center justify-between mb-6">
+              <div className="space-y-1">
+                <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.35em] text-[#78a9ff]">
+                  IBM Granite
+                </span>
+                <h1 className="text-3xl font-semibold text-white">
+                  Granite-4.0 Tool Studio
+                </h1>
+              </div>
+              <div className="flex items-center gap-3">
+                <button
+                  disabled={isGenerating}
+                  onClick={clearChat}
+                  className={`h-10 flex items-center px-4 rounded-full font-semibold text-sm transition-all border ${
+                    isGenerating
+                      ? "border-white/15 bg-white/10 text-[#a6c8ff] opacity-50 cursor-not-allowed"
+                      : "border-white/20 bg-white/8 text-[#d0e2ff] hover:border-[#78a9ff]/50 hover:bg-[#0f62fe]/15"
+                  }`}
+                  title="Clear chat"
+                >
+                  <RotateCcw size={14} className="mr-2" /> Reset Thread
+                </button>
+                <button
+                  onClick={() =>
+                    setIsToolsPanelVisible((previous) => !previous)
+                  }
+                  className={`h-10 flex items-center px-4 rounded-full font-semibold text-sm transition-all border ${
+                    isToolsPanelVisible
+                      ? "border-[#78a9ff]/60 bg-[#0f62fe]/25 text-white shadow-[0_10px_25px_rgba(15,98,254,0.25)]"
+                      : "border-white/20 bg-white/8 text-[#d0e2ff] hover:border-[#78a9ff]/50 hover:bg-[#0f62fe]/15"
+                  }`}
+                >
+                  <Wrench size={16} className="mr-2" />
+                  {isToolsPanelVisible ? "Hide Tools" : "Show Tools"}
+                </button>
+              </div>
+            </div>
+            <div
+              ref={chatContainerRef}
+              className="flex-grow bg-[#0b1e3f]/80 border border-white/10 rounded-2xl p-6 overflow-y-auto mb-6 space-y-5 shadow-inner min-h-0"
+            >
+              {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="px-4 py-3 rounded-2xl max-w-md bg-[#0f62fe]/30 border border-[#78a9ff]/40 shadow-[0_20px_45px_rgba(10,49,140,0.25)]">
+                          <p className="text-md text-white whitespace-pre-wrap">
+                            {msg.content}
+                          </p>
+                        </div>
+                      </div>
+                    );
+                  }
+                  if (msg.role === "assistant") {
+                    const isToolCall = msg.content.includes("<tool_call>");
+                    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="px-4 py-3 rounded-2xl bg-white/8 border border-[#0f62fe]/30 shadow-[0_18px_50px_rgba(0,0,0,0.35)]">
+                            <ToolCallIndicator
+                              content={msg.content}
+                              isRunning={!isCompleted}
+                              hasError={hasError}
+                            />
+                          </div>
+                        </div>
+                      );
+                    }
+                    return (
+                      <div key={key} className="flex justify-start">
+                        <div className="px-4 py-3 rounded-2xl max-w-md bg-white/8 border border-white/15 shadow-[0_18px_50px_rgba(0,0,0,0.35)]">
+                          <p className="text-md text-[#d0e2ff] whitespace-pre-wrap">
+                            {msg.content}
+                          </p>
+                        </div>
+                      </div>
+                    );
+                  }
+                  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-4 rounded-2xl bg-white/8 border border-white/15 max-w-lg shadow-[0_18px_50px_rgba(0,0,0,0.35)]">
+                          <div className="space-y-4">
+                            {visibleToolResults.map((info, idx) => (
+                              <div className="flex flex-col gap-2" key={idx}>
+                                <div className="text-xs text-[#a6c8ff] 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 items-center gap-3">
+              <div className="flex flex-1 items-center bg-white/5 border border-white/10 rounded-2xl overflow-hidden shadow-[0_15px_45px_rgba(0,0,0,0.35)]">
+                <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-transparent px-5 py-3 text-lg text-white placeholder:text-[#a6c8ff]/70 focus:outline-none disabled:opacity-40"
+                  placeholder={
+                    isReady
+                      ? "Type your message here..."
+                      : "Load a Granite model to enable chat"
+                  }
+                />
+                <button
+                  onClick={handleSendMessage}
+                  disabled={isGenerating || !isReady}
+                  className="h-full px-5 py-3 bg-[#0f62fe] hover:bg-[#0043ce] disabled:bg-[#0f62fe]/40 disabled:cursor-not-allowed text-white font-semibold transition-all"
+                >
+                  <Play size={28} />
+                </button>
+              </div>
+            </div>
+          </div>
+          {isToolsPanelVisible && (
+            <div className="w-full md:w-1/2 flex flex-col p-6 bg-white/5 backdrop-blur-lg border border-white/10 rounded-3xl shadow-[0_35px_65px_rgba(3,27,78,0.55)] min-h-0">
+              <div className="flex justify-between items-center mb-6">
+                <div>
+                  <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#78a9ff]">
+                    Tool Workspace
+                  </span>
+                  <h2 className="text-2xl font-semibold text-white mt-1">
+                    Tools
+                  </h2>
+                </div>
+                <button
+                  onClick={addTool}
+                  className="flex items-center bg-gradient-to-r from-[#0f62fe] to-[#4589ff] hover:brightness-110 text-white font-semibold py-2 px-4 rounded-full transition-all shadow-[0_15px_35px_rgba(15,98,254,0.35)]"
+                >
+                  <Plus size={16} className="mr-2" /> Add Tool
+                </button>
+              </div>
+              <div
+                ref={toolsContainerRef}
+                className="flex-grow bg-[#0b1e3f]/60 border border-white/10 rounded-2xl 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>
+      )}
+    </div>
+  );
+};
+export default App;

src/components/ExamplePrompts.tsx ADDED Viewed

	@@ -0,0 +1,46 @@

+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-3xl font-semibold text-white mb-1">Try an example</h2>
+      <p className="text-md text-[#9bb5ff]">Click one to get started</p>
+    </div>
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-4xl w-full px-4">
+      {(examples || DEFAULT_EXAMPLES).map((example, index) => (
+        <button
+          key={index}
+          onClick={() => onExampleClick(example.messageText)}
+          className="group relative overflow-hidden rounded-2xl border border-white/12 bg-white/8 text-left shadow-[0_22px_55px_rgba(3,27,78,0.35)] transition-all hover:-translate-y-0.5 hover:shadow-[0_28px_65px_rgba(15,98,254,0.35)]"
+        >
+          <span className="pointer-events-none absolute inset-0 bg-gradient-to-r from-[#0f62fe]/25 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
+          <div className="relative flex items-center gap-4 px-5 py-4">
+            <span className="flex size-12 flex-shrink-0 items-center justify-center rounded-full border border-[#78a9ff]/30 bg-[#0f62fe]/15 text-xl text-[#a6c8ff] transition-all group-hover:scale-105 group-hover:bg-[#0f62fe]/25 group-hover:text-white">
+              {example.icon}
+            </span>
+            <div className="flex flex-1 items-center">
+              <span className="text-md font-medium text-white">
+                {example.displayText}
+              </span>
+            </div>
+            <span className="flex size-10 items-center justify-center rounded-full border border-white/10 bg-white/10 text-[#9bb5ff] transition-all group-hover:border-[#78a9ff]/40 group-hover:bg-[#0f62fe]/35 group-hover:text-white">
+              →
+            </span>
+          </div>
+        </button>
+      ))}
+    </div>
+  </div>
+);
+export default ExamplePrompts;

src/components/LoadingScreen.tsx ADDED Viewed

	@@ -0,0 +1,291 @@

+import { ChevronDown } from "lucide-react";
+import { MODEL_OPTIONS } from "../constants/models";
+import IBMLogo from "./icons/IBMLogo";
+import HfLogo from "./icons/HfLogo";
+import { useEffect, useRef } from "react";
+// Define the structure of our animated dots
+interface Dot {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  radius: number;
+  opacity: number;
+}
+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: Dot[] = [];
+    const maxConnectionDistance = 130; // Max distance to draw a line between dots
+    const dotSpeed = 0.3; // How fast dots move
+    const setup = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      dots = [];
+      // Adjust dot density based on screen area
+      const numDots = Math.floor((canvas.width * canvas.height) / 20000);
+      for (let i = 0; i < numDots; ++i) {
+        dots.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          vx: (Math.random() - 0.5) * dotSpeed, // Random horizontal velocity
+          vy: (Math.random() - 0.5) * dotSpeed, // Random vertical velocity
+          radius: Math.random() * 1.5 + 0.5,
+          opacity: Math.random() * 0.5 + 0.2,
+        });
+      }
+    };
+    const draw = () => {
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      // 1. Update and draw dots
+      dots.forEach((dot) => {
+        // Update position
+        dot.x += dot.vx;
+        dot.y += dot.vy;
+        // Bounce off edges
+        if (dot.x <= 0 || dot.x >= canvas.width) dot.vx *= -1;
+        if (dot.y <= 0 || dot.y >= canvas.height) dot.vy *= -1;
+        // Draw dot
+        ctx.beginPath();
+        ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 255, 255, ${dot.opacity})`;
+        ctx.fill();
+      });
+      // 2. Draw connecting lines
+      ctx.lineWidth = 0.5; // Use a thin line for connections
+      for (let i = 0; i < dots.length; i++) {
+        for (let j = i + 1; j < dots.length; j++) {
+          const dot1 = dots[i];
+          const dot2 = dots[j];
+          const dx = dot1.x - dot2.x;
+          const dy = dot1.y - dot2.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          // If dots are close enough, draw a line
+          if (distance < maxConnectionDistance) {
+            // Calculate opacity based on distance (closer = more opaque)
+            const opacity = 1 - distance / maxConnectionDistance;
+            ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.3})`; // Faint white lines
+            ctx.beginPath();
+            ctx.moveTo(dot1.x, dot1.y);
+            ctx.lineTo(dot2.x, dot2.y);
+            ctx.stroke();
+          }
+        }
+      }
+      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-gradient-to-br from-[#031b4e] via-[#06183d] to-[#010409] text-gray-100 text-[16px] md:text-[17px] p-8 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(3,27,78,0)_30%,_rgba(1,4,9,0.85)_95%)]"></div>
+      {/* Main Content */}
+      <div className="relative z-20 max-w-3xl w-full flex flex-col items-center bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-10 shadow-[0_35px_65px_rgba(3,27,78,0.55)] space-y-8">
+        <div className="flex items-center justify-center gap-6 text-5xl md:text-6xl">
+          <a
+            href="https://huggingface.co/ibm-granite"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="IBM Granite"
+          >
+            <div className="size-24 md:size-28 bg-blue-500 rounded-sm p-2 flex items-center justify-center">
+              <IBMLogo className="text-white" />
+            </div>
+          </a>
+          <span className="text-[#78a9ff]">×</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">
+          <h1 className="text-5xl font-semibold mb-2 text-white tracking-tight">
+            Granite-4.0 WebGPU
+          </h1>
+          <p className="text-md md:text-lg text-[#a6c8ff]">
+            In-browser tool calling, powered by Transformers.js
+          </p>
+        </div>
+        <div className="w-full text-left text-[#d0e2ff] space-y-4 text-xl">
+          <p>
+            This demo showcases in-browser tool calling with Granite-4.0, a new
+            series of models by{" "}
+            <a
+              href="https://huggingface.co/ibm-granite"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[#78a9ff] hover:underline font-medium"
+            >
+              IBM Granite
+            </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-[#78a9ff] 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-[#a6c8ff]">
+          Select a model and click load to get started.
+        </p>
+        <div className="relative w-full max-w-lg">
+          <div className="flex rounded-2xl border border-white/12 bg-white/10 overflow-hidden shadow-[0_18px_45px_rgba(3,27,78,0.45)]">
+            <button
+              onClick={isLoading ? undefined : loadSelectedModel}
+              disabled={isLoading}
+              className={`flex-1 flex items-center justify-center font-semibold transition-all text-lg ${isLoading ? "bg-white/5 text-[#8da2d8] cursor-not-allowed" : "bg-[#0f62fe] hover:bg-[#0043ce] text-white"}`}
+            >
+              <div className="px-6 py-3">
+                {isLoading ? (
+                  <div className="flex items-center">
+                    <span className="inline-block w-5 h-5 border-2 border-white/80 border-t-transparent rounded-full animate-spin"></span>
+                    <span className="ml-3 text-md font-medium">
+                      Loading... ({progress}%)
+                    </span>
+                  </div>
+                ) : (
+                  `Load ${model?.label}`
+                )}
+              </div>
+            </button>
+            <button
+              onClick={(e) => {
+                if (!isLoading) {
+                  e.stopPropagation();
+                  setIsModelDropdownOpen(!isModelDropdownOpen);
+                }
+              }}
+              aria-label="Select model"
+              className="px-4 py-3 border-l border-white/15 bg-[#0f62fe] hover:bg-[#0043ce] transition-colors text-white disabled:cursor-not-allowed disabled:bg-white/5"
+              disabled={isLoading}
+            >
+              <ChevronDown size={24} />
+            </button>
+          </div>
+          {isModelDropdownOpen && (
+            <div className="absolute left-0 right-0 bottom-full mb-3 bg-[#02102c]/98 border border-white/12 rounded-xl shadow-[0_22px_55px_rgba(3,27,78,0.55)] z-10 w-full overflow-visible backdrop-blur-2xl">
+              {MODEL_OPTIONS.map((option) => (
+                <button
+                  key={option.id}
+                  onClick={() => handleModelSelect(option.id)}
+                  className={`w-full px-5 py-3 text-left text-sm font-medium rounded-lg border transition-all ${
+                    selectedModelId === option.id
+                      ? "border-[#78a9ff]/60 bg-[#0f62fe]/25 text-white shadow-[0_10px_25px_rgba(15,98,254,0.25)]"
+                      : "border-transparent text-[#d0e2ff] hover:border-[#78a9ff]/30 hover:bg-white/12 hover:text-white"
+                  }`}
+                >
+                  <div className="font-medium">{option.label}</div>
+                  <div className="text-md text-[#95a8dd]">{option.size}</div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        {error && (
+          <div className="bg-[#2d0709]/70 border border-[#ff8389]/40 rounded-2xl p-4 w-full max-w-md text-center shadow-[0_15px_35px_rgba(45,7,9,0.4)]">
+            <p className="text-sm text-[#ffb3b8]">Error: {error}</p>
+            <button
+              onClick={loadSelectedModel}
+              className="mt-3 text-sm px-4 py-2 rounded-full bg-white/15 hover:bg-white/25 border border-white/20 text-white font-semibold transition-all"
+            >
+              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,104 @@

+import type React from "react";
+import { extractToolCallContent } from "../utils";
+const ToolCallIndicator: React.FC<{
+  content: string;
+  isRunning: boolean;
+  hasError: boolean;
+}> = ({ content, isRunning, hasError }) => {
+  const toolCalls = extractToolCallContent(content);
+  const displayContent = toolCalls?.join("\n") ?? "...";
+  return (
+    <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 size-8">
+            {/* 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="size-8 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="size-8 bg-red-400/100 rounded-full flex items-center justify-center transition-colors duration-500 ease-in-out">
+                <span className="text-md 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="size-8 bg-green-400/100 rounded-full flex items-center justify-center transition-colors duration-500 ease-in-out">
+                <span className="text-md 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-sm text-gray-300 font-mono break-all">
+              {displayContent}
+            </code>
+          </div>
+          <p
+            className={`text-sm 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,146 @@

+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={`rounded-2xl p-5 border border-white/10 bg-white/5 backdrop-blur-sm transition-all shadow-[0_18px_55px_rgba(3,27,78,0.45)] ${!tool.enabled ? "opacity-40" : ""}`}
+    >
+      <div
+        className="flex justify-between items-center cursor-pointer"
+        onClick={onToggleCollapsed}
+      >
+        <div>
+          <h3 className="text-lg font-semibold text-[#78a9ff] font-mono">
+            {schema.name}
+          </h3>
+          <div className="text-xs text-[#a6c8ff]/80 mt-1">
+            {schema.description}
+          </div>
+        </div>
+        <div className="flex items-center space-x-3">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleEnabled();
+            }}
+            className={`p-1.5 rounded-full border transition-all ${tool.enabled ? "border-[#0f62fe]/50 bg-[#0f62fe]/20 text-[#78a9ff]" : "border-white/15 bg-white/5 text-white/60"}`}
+          >
+            <Power size={18} />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+            className="p-2 text-[#ff8389] hover:text-white border border-transparent hover:border-[#ff8389]/40 hover:bg-[#ff8389]/10 rounded-full transition-all"
+          >
+            <Trash2 size={18} />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleCollapsed();
+            }}
+            className="p-2 text-white/70 hover:text-white border border-white/10 hover:border-white/30 hover:bg-white/10 rounded-full transition-all"
+          >
+            {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-xs font-semibold uppercase tracking-[0.2em] text-[#a6c8ff]/80">
+              Implementation & Renderer
+            </label>
+            <div
+              className="mt-1 rounded-2xl overflow-visible border border-white/12 bg-[#031b4e]/60"
+              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-xs font-semibold uppercase tracking-[0.2em] text-[#a6c8ff]/80">
+              Generated Schema
+            </label>
+            <div className="mt-1 rounded-2xl flex-grow overflow-visible border border-white/12 bg-[#031b4e]/60">
+              <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/IBMLogo.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 1000 400"
+    fill="currentColor"
+  >
+    <path d="M0 0v27.367h194.648V0H0zm222.226 0v27.367h277.383S471.276 0 433.75 0H222.226zm331.797 0v27.367h167.812L711.875 0H554.023zm288.125 0l-9.961 27.367h166.289V0H842.148zM0 53.222v27.367h194.648V53.222H0zm222.226.039V80.59h309.57s-3.615-21.063-9.922-27.329H222.226zm331.797 0V80.59h186.211l-9.219-27.329H554.023zm268.203 0l-9.219 27.329h185.469V53.261h-176.25zM55.937 106.444v27.406h84.297v-27.406H55.937zm222.227 0v27.406h84.297v-27.406h-84.297zm166.289 0v27.406h84.297s5.352-14.473 5.352-27.406h-89.649zm165.508 0v27.406h149.453l-9.961-27.406H609.961zm193.906 0l-10 27.406h150.195v-27.406H803.867zm-747.93 53.262v27.367h84.297v-27.367H55.937zm222.227 0v27.367h215.312s18.012-14.042 23.75-27.367H278.164zm331.797 0v27.367h84.297v-15.234l5.352 15.234h154.414l5.742-15.234v15.234h84.297v-27.367H785.82l-8.398 23.18-8.438-23.18H609.961zM55.937 212.928v27.367h84.297v-27.367H55.937zm222.227 0v27.367h239.062c-5.739-13.281-23.75-27.367-23.75-27.367H278.164zm331.797 0v27.367h84.297v-27.367h-84.297zm99.609 0l10.195 27.367h115.781l9.688-27.367H709.57zm150.195 0v27.367h84.297v-27.367h-84.297zM55.937 266.15v27.366h84.297V266.15H55.937zm222.227 0v27.366h84.297V266.15h-84.297zm166.289 0v27.366h89.648c0-12.915-5.352-27.366-5.352-27.366h-84.296zm165.508 0v27.366h84.297V266.15h-84.297zm118.75 0l9.883 27.366h77.617l9.961-27.366h-97.461zm131.054 0v27.366h84.297V266.15h-84.297zM1.523 319.372v27.406h194.648v-27.406H1.523zm220.703 0v27.406h299.648c6.307-6.275 9.922-27.406 9.922-27.406h-309.57zm333.321 0v27.406h138.711v-27.406H555.547zm192.343 0l10.156 27.406h39.492l9.531-27.406H747.89zm111.875 0v27.406H1000v-27.406H859.765zM1.523 372.633V400h194.648v-27.367H1.523zm220.703 0v27.328H433.75c37.526 0 65.859-27.328 65.859-27.328H222.226zm333.321 0V400h138.711v-27.367H555.547zm211.601 0l9.766 27.29 1.68.038 9.922-27.328h-21.368zm92.617 0V400H1000v-27.367H859.765z" />
+  </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: "Tell me a joke.",
+    messageText: "Tell me a joke.",
+  },
+  {
+    icon: "🔢",
+    displayText: "Solve a math problem",
+    messageText: "What is 123 times 456 divided by 789?",
+  },
+  {
+    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 this website: "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" and do nothing else.',
+  },
+];

src/constants/models.ts ADDED Viewed

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

+export const MODEL_OPTIONS = [
+  {
+    id: "350M",
+    modelId: "onnx-community/granite-4.0-350m-ONNX-web",
+    dtype: "fp16",
+    label: "Granite-4.0 350M (fp16)",
+    size: "A lightweight 350M instruct model (~709 MB in size).",
+  },
+  {
+    id: "1B",
+    modelId: "onnx-community/granite-4.0-1b-ONNX-web",
+    dtype: "q4",
+    label: "Granite-4.0 1B (q4)",
+    size: "A medium-sized instruct model (~1.78 GB in size).",
+  },
+  {
+    id: "3B",
+    modelId: "onnx-community/granite-4.0-micro-ONNX-web",
+    dtype: "q4f16",
+    label: "Granite-4.0 3B (q4f16)",
+    size: "A large 3B parameter instruct model (~2.3 GB in size).",
+  },
+] as const;

src/hooks/useLLM.ts ADDED Viewed

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

+import { useState, useEffect, useRef, useCallback } from "react";
+import {
+  AutoModelForCausalLM,
+  AutoTokenizer,
+  TextStreamer,
+} from "@huggingface/transformers";
+import { MODEL_OPTIONS } from "../constants/models";
+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 = (modelName?: 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 { modelId, dtype } = MODEL_OPTIONS.find((opt) => opt.id === modelName)!;
+  const loadModel = useCallback(async () => {
+    if (!modelId) {
+      throw new Error("Model ID is required");
+    }
+    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 progress_callback = (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(modelId, {
+          progress_callback,
+        });
+        const model = await AutoModelForCausalLM.from_pretrained(modelId, {
+          dtype,
+          device: "webgpu",
+          progress_callback,
+        });
+        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 <|end_of_text|>) for tool call detection
+      const response = tokenizer
+        .batch_decode(sequences.slice(null, [input.input_ids.dims[1], null]), {
+          skip_special_tokens: false,
+        })[0]
+        .replace(/<\|end_of_text\|>$/, "");
+      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,59 @@

+/**
+ * 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 {boolean} - Whether the tool was executed successfully.
+ */
+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);
+  return true;
+}
+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,249 @@

+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;
+}
+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 => {
+  if (typeof content !== "string") return null;
+  const matches = [...content.matchAll(/<tool_call>([\s\S]*?)<\/tool_call>/g)];
+  return matches.length ? matches.map(([, inner]) => inner.trim()) : null;
+};
+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" />

style.css DELETED Viewed

@@ -1,76 +0,0 @@
-* {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    font-family: sans-serif;
-}
-html,
-body {
-    height: 100%;
-}
-body {
-    padding: 32px;
-}
-body,
-#container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-#container {
-    position: relative;
-    gap: 0.4rem;
-    width: 640px;
-    height: 640px;
-    max-width: 100%;
-    max-height: 100%;
-    border: 2px dashed #D1D5DB;
-    border-radius: 0.75rem;
-    overflow: hidden;
-    cursor: pointer;
-    margin: 1rem;
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    font-size: 18px;
-}
-#upload {
-    display: none;
-}
-svg {
-    pointer-events: none;
-}
-#example {
-    font-size: 14px;
-    text-decoration: underline;
-    cursor: pointer;
-}
-#example:hover {
-    color: #2563EB;
-}
-.bounding-box {
-    position: absolute;
-    box-sizing: border-box;
-    border: solid 2px;
-}
-.bounding-box-label {
-    color: white;
-    position: absolute;
-    font-size: 12px;
-    margin: -16px 0 0 -2px;
-    padding: 1px;
-}

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()],
+});