| <!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", |
| |
| 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> |
|
|
