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