File size: 3,689 Bytes
4879fd8 d6f1f58 4879fd8 d6f1f58 4879fd8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
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("Hermes-2") ||
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;
}
};
|