example.html

<!DOCTYPE html>
<html>
<head>
    <title>FunctionGemma Physics Demo</title>
    <script type="module">
        import * as webllm from "https://esm.run/@mlc-ai/web-llm";

        const appConfig = {
            model_list: [
                {
                    model: "https://huggingface.co/2796gauravc/functiongemma-mlc",
                    model_id: "functiongemma-physics",
                    // Use official Gemma WASM (compatible)
                    model_lib: "https://raw.githubusercontent.com/mlc-ai/binary-mlc-llm-libs/main/gemma-2b-it-q4f16_1-ctx4k_cs1k-webgpu.wasm"
                }
            ]
        };

        async function initModel() {
            const statusDiv = document.getElementById("status");
            statusDiv.textContent = "Loading model...";
            
            try {
                const engine = await webllm.CreateMLCEngine(
                    "functiongemma-physics",
                    { 
                        appConfig,
                        initProgressCallback: (progress) => {
                            statusDiv.textContent = progress.text;
                        }
                    }
                );
                
                statusDiv.textContent = "Model loaded! Type a message.";
                
                document.getElementById("send").onclick = async () => {
                    const input = document.getElementById("input").value;
                    const output = document.getElementById("output");
                    
                    output.textContent = "Thinking...";
                    
                    const response = await engine.chat.completions.create({
                        messages: [{ role: "user", content: input }],
                        stream: false
                    });
                    
                    output.textContent = response.choices[0].message.content;
                };
            } catch (error) {
                statusDiv.textContent = "Error: " + error.message;
            }
        }

        window.onload = initModel;
    </script>
</head>
<body>
    <h1>FunctionGemma Physics Game Assistant</h1>
    <div id="status">Initializing...</div>
    <br>
    <input type="text" id="input" placeholder="Ask about physics..." style="width:400px">
    <button id="send">Send</button>
    <br><br>
    <div id="output" style="border:1px solid #ccc; padding:10px; min-height:100px;"></div>
</body>
</html>