index.js

import * as webllm from "https://esm.run/@mlc-ai/web-llm";
import hljs from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";
import { Type } from "./lib/typebox/index.mjs";

let engine = null;

const availableModels = webllm.prebuiltAppConfig.model_list
 .filter(
 (m) =>
 m.model_id.startsWith("Llama-3") ||
 m.model_id.startsWith("Llama-3.1") ||
 m.model_id.startsWith("Hermes-2") ||
 m.model_id.startsWith("Hermes-3") ||
 m.model_id.startsWith("Phi-3")
 )
 .map((m) => m.model_id);
let selectedModel = availableModels[0];

availableModels.forEach((modelId) => {
 const option = document.createElement("option");
 option.value = modelId;
 option.textContent = modelId;
 document.getElementById("model-selection").appendChild(option);
});
document.getElementById("model-selection").value = selectedModel;
document.getElementById("model-selection").onchange = (e) => {
 selectedModel = e.target.value;
 engine = null;
};
document.getElementById(
 "prompt"
).value = `Hermione Granger is a character in Harry Potter. Please fill in the following information about this character in JSON format.
Name is a string of character name.
House is one of Gryffindor, Hufflepuff, Ravenclaw, Slytherin.
Blood status is one of Pure-blood, Half-blood, Muggle-born.
Occupation is one of Student, Professor, Ministry of Magic, Other.
Wand is an object with wood, core, and length.
Alive is a boolean.
Patronus is a string.
`;

// JSON editor setup
const editor = ace.edit("schema", {
 // mode: "ace/mode/javascript",
 mode: "ace/mode/javascript",
 theme: 'ace/theme/github',
 wrap: true,
});
editor.setTheme("ace/theme/github");
editor.setValue(`Type.Object({
 "name": Type.String(),
 "house": Type.Enum({
 "Gryffindor": "Gryffindor",
 "Hufflepuff": "Hufflepuff",
 "Ravenclaw": "Ravenclaw",
 "Slytherin": "Slytherin",
 }),
 "blood_status": Type.Enum({
 "Pure-blood": "Pure-blood",
 "Half-blood": "Half-blood",
 "Muggle-born": "Muggle-born",
 }),
 "occupation": Type.Enum({
 "Student": "Student",
 "Professor": "Professor",
 "Ministry of Magic": "Ministry of Magic",
 "Other": "Other",
 }),
 "wand": Type.Object({
 "wood": Type.String(),
 "core": Type.String(),
 "length": Type.Number(),
 }),
 "alive": Type.Boolean(),
 "patronus": Type.String(),
})`);

// Generate button
document.getElementById("generate").onclick = async () => {
 const schemaInput = editor.getValue();
 let T;
 try {
 T = eval(schemaInput);
 } catch (e) {
 console.error("Invalid schema", e);
 return;
 }
 const schema = JSON.stringify(T);

 if (!engine) {
 engine = await webllm.CreateMLCEngine(selectedModel, {
 initProgressCallback: (progress) => {
 console.log(progress);
 document.getElementById("output").textContent = progress.text;
 },
 });
 }
 const request = {
 stream: true,
 messages: [
 {
 role: "user",
 content: document.getElementById("prompt").value,
 },
 ],
 max_tokens: 128,
 response_format: {
 type: "json_object",
 schema: schema,
 },
 };

 let curMessage = "";
 const generator = await engine.chatCompletion(request);
 for await (const chunk of generator) {
 const curDelta = chunk.choices[0]?.delta.content;
 if (curDelta) {
 curMessage += curDelta;
 }
 console.log(curMessage);
 document.getElementById("output").textContent = curMessage;
 }
 const finalMessage = await engine.getMessage();
 console.log(finalMessage);
 if (hljs) {
 document.getElementById("output").innerHTML = hljs.highlight(finalMessage, {
 language: "json",
 }).value;
 } else {
 document.getElementById("output").textContent = finalMessage;
 }
};