EdCharbeneau · January 31, 2025 17:25
diff --git a/deepseek.html b/deepseek.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module">
        import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm";

 // Callback function to update model loading progress
 const initProgressCallback = (initProgress) => {
    document.getElementById("loadingMessage").innerText = initProgress.text;
  console.log(initProgress);
 }
 const selectedModel = "DeepSeek-R1-Distill-Llama-8B-q4f32_1-MLC";

 const engine = await CreateMLCEngine(
  selectedModel,
  { initProgressCallback: initProgressCallback }, // engineConfig
 );

 document.getElementsByTagName("form")[0].onsubmit = async (event) => {
    event.preventDefault();
    const form = event.target;
    const formData = new FormData(form);
    const prompt = formData.get("prompt");
    const messages = [
        { role: "system", content: "You are a helpful AI assistant." },
        { role: "user", content: prompt },
    ];
    const chunks = await engine.chat.completions.create({
        messages,
        temperature: 1,
        stream: true, // <-- Enable streaming
        stream_options: { include_usage: true },
    });
    let reply = "";
    for await (const chunk of chunks) {
        reply += chunk.choices[0]?.delta.content || "";
        document.getElementById("response").innerText = reply;
        if (chunk.usage) {
            console.log(chunk.usage); // only last chunk has usage
        }
    }
 };

    </script>
 </head>
 <body>
    <form>
        <input type="text" name="prompt" id="prompt">
        <button type="submit">Submit</button>
    </form>
    <div id="response"></div>
    <p id="loadingMessage"></p>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="module">
	import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm";

	// Callback function to update model loading progress
	const initProgressCallback = (initProgress) => {
	document.getElementById("loadingMessage").innerText = initProgress.text;
	console.log(initProgress);
	}
	const selectedModel = "DeepSeek-R1-Distill-Llama-8B-q4f32_1-MLC";

	const engine = await CreateMLCEngine(
	selectedModel,
	{ initProgressCallback: initProgressCallback }, // engineConfig
	);

	document.getElementsByTagName("form")[0].onsubmit = async (event) => {
	event.preventDefault();
	const form = event.target;
	const formData = new FormData(form);
	const prompt = formData.get("prompt");
	const messages = [
	{ role: "system", content: "You are a helpful AI assistant." },
	{ role: "user", content: prompt },
	];
	const chunks = await engine.chat.completions.create({
	messages,
	temperature: 1,
	stream: true, // <-- Enable streaming
	stream_options: { include_usage: true },
	});
	let reply = "";
	for await (const chunk of chunks) {
	reply += chunk.choices[0]?.delta.content \|\| "";
	document.getElementById("response").innerText = reply;
	if (chunk.usage) {
	console.log(chunk.usage); // only last chunk has usage
	}
	}
	};

	</script>
	</head>
	<body>
	<form>
	<input type="text" name="prompt" id="prompt">
	<button type="submit">Submit</button>
	</form>
	<div id="response"></div>
	<p id="loadingMessage"></p>
	</body>
	</html>