File size: 4,101 Bytes
ab229ee 4879fd8 ab229ee 4879fd8 5e784b0 bde0b73 df2ca54 4879fd8 d6f1f58 4879fd8 ab229ee 4879fd8 ab229ee 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 132 133 134 135 136 137 138 139 140 141 142 143 144 |
import { prebuiltAppConfig, CreateMLCEngine } from "@charliefruan/web-llm";
import hljs from "highlight.js";
import ace from "ace-builds";
// required for ace to resolve module correctly
require("ace-builds/src-noconflict/mode-javascript");
require("ace-builds/webpack-resolver");
// DO NOT REMOVE
// Required for user input type definition to be eval
const { Type } = require('@sinclair/typebox');
let engine = null;
const availableModels = prebuiltAppConfig.model_list
.filter(
(m) =>
m.model_id.startsWith("Llama-3-8B") ||
m.model_id.startsWith("Llama-3-70B") ||
m.model_id.startsWith("Llama-3.1-8B") ||
m.model_id.startsWith("Llama-3.1-70B") ||
m.model_id.startsWith("Llama-3.2-3B") ||
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 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;
}
};
|