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