import { prebuiltAppConfig } from "@mlc-ai/web-llm";
export default {
model_list: prebuiltAppConfig.model_list,
use_web_worker: true,
};
Dieser Code konfiguriert die Anwendung so, dass eine vordefinierte Liste von Modellen verwendet wird und die Nutzung von Web-Workern ermöglicht wird:
- model_list: Diese Eigenschaft wird auf die model_list aus der prebuiltAppConfig gesetzt. Sie enthält eine Liste von Modellen, die die Anwendung verwenden kann. Hier sind die Hauptfamilien von Modellen, die derzeit unterstützt werden:
Llama: Llama 3, Llama 2, Hermes-2-Pro-Llama-3
Phi: Phi 3, Phi 2, Phi 1.5
Gemma: Gemma-2B
Mistral: Mistral-7B-v0.3, Hermes-2-Pro-Mistral-7B, NeuralHermes-2.5-Mistral-7B, OpenHermes-2.5-Mistral-7B
Qwen: Qwen2 0.5B, 1.5B, 7B
- use_web_worker: Diese Eigenschaft wird auf true gesetzt, was bedeutet, dass die Anwendung einen Web-Worker zur Ausführung von Aufgaben verwenden soll. Web-Worker ermöglichen das Ausführen von Skripten in Hintergrund-Threads, wodurch die Leistung verbessert werden kann, indem Aufgaben vom Haupt-Thread ausgelagert werden.
Dieser Code führt die folgenden drei Schritte aus:
Schritt 1. Importieren aller exportierten Mitglieder
Die erste Zeile importiert alle exportierten Mitglieder (Funktionen, Klassen, Konstanten usw.) aus dem @mlc-ai/web-llm-Paket und macht sie unter dem Namespace webllm verfügbar.
Schritt 2. Bestimmen, ob ein Web Worker verwendet werden soll
Die zweite Zeile ruft die Einstellung use_web_worker aus dem appConfig-Objekt ab. Diese Einstellung bestimmt, ob die Anwendung einen Web Worker zur Ausführung von Aufgaben verwenden soll.
Schritt 3. Deklarieren der Engine-Variable
Die dritte Zeile deklariert eine Variable engine vom Typ webllm.MLCEngineInterface. Diese Variable wird die Instanz der maschinellen Lern-Engine enthalten.
Schritt 4. Instanziierung der Engine:
Wenn useWebWorker auf true gesetzt ist:
- Es wird eine Instanz von webllm.WebWorkerMLCEngine erstellt.
- Diese Instanz wird mit einem neuen Web Worker initialisiert, der aus der worker.ts-Datei erstellt wird.
- Der Web Worker wird so konfiguriert, dass er als Modul läuft.
- Die Engine wird ebenfalls mit appConfig und einem Log-Level von „INFO“ konfiguriert.
Wenn useWebWorker auf false gesetzt ist:
- Es wird eine Instanz von webllm.MLCEngine direkt erstellt, ohne einen Web Worker zu verwenden.
- Diese Instanz wird ebenfalls mit appConfig konfiguriert.
Haupteinstiegspunkt
Der Einstiegspunkt in diesem Beispiel ist die asynchrone CreateAsync-Methode, die die ChatUI-Klasse initialisiert und die Engine-Instanz als Argument übergibt. Diese Methode richtet die UI-Elemente mit der angegebenen Engine ein und registriert Ereignishandler:
public static CreateAsync = async (engine: webllm.MLCEngineInterface) => {
//logic
}
ChatUI.CreateAsync(engine);
Chat Vervollständigung
Sobald die Engine erfolgreich initialisiert ist, können Sie die engine.chat.completions-Schnittstelle verwenden, um Chat-Vervollständigungen im OpenAI-Stil aufzurufen:
const messages = [
{ content: "Hi, I’m your personal Artificial intelligence helper.", role: "system", },
{ content: "Hi!", role: "user" },
]
const reply = await engine.chat.completions.create({
messages,
});
console.log(reply.choices[0].message);
console.log(reply.usage);
Streaming
WebLLM unterstützt auch das Streaming von Chat-Vervollständigungen. Um es zu nutzen, fügen Sie einfach stream: true in den engine.chat.completions.create-Aufruf ein.
const messages = [
{ content: "Hi, I’m your personal Artificial intelligence helper.", role: "system", },
{ content: "Hi!", role: "user" },
]
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 || "";
console.log(reply);
if (chunk.usage) {
console.log(chunk.usage); // only last chunk has usage
}
}
const fullReply = await engine.getMessage();
console.log(fullReply);
Testen
Führen Sie npm install und npm start in der Eingabeaufforderung (CMD) oder PowerShell aus, um die Anwendung zu starten. In unserem Fall wählte das System automatisch das Modell Llama-3.2-1B-Instruct-q4f32_1-MLC für die Arbeit aus. Außerdem wurde in unserem Fall bereits ein Chatbot-Client entwickelt, der nur mit der oben beschriebenen Schnittstelle der WebLLM-Funktionalität integriert werden musste.
Wie wir sehen können, bewältigt die LLM Integration abstrakte Fragen aus der Wissensdatenbank, auf der sie trainiert wurde, gut. Das Modell hat jedoch möglicherweise keinen Zugriff auf Echtzeitdaten oder die Fähigkeit, spezifische Wetteraktualisierungen bereitzustellen.
Das Beispiel zeigt, wie man Chat-Vervollständigungen mit OpenAI-ähnlichen Chat-APIs aufruft und wie man Streaming für Echtzeit-Antworten aktiviert. Diese Funktionen machen das Chat-Erlebnis dynamischer und reaktionsfähiger.
Fazit zur LLM-Integration in Ihre App
Druzik Aliaksei Nikolaevich, Senior Software Engineer, LLM-Integrationsspezialist:
„Die LLM Integration in Ihre Web-App mit TypeScript kann die Fähigkeiten Ihrer Anwendung erheblich erweitern und ausgeklügelte Funktionen für die Verarbeitung natürlicher Sprache bieten. Indem Sie die in diesem Artikel beschriebenen Schritte befolgen, können Sie einen intelligenten Chatbot erstellen, die Inhaltserstellung verbessern und die Benutzerinteraktionen optimieren, wodurch sich eine Welt voller Möglichkeiten für Ihre Webanwendung eröffnet.“
Falls Sie eine reibungslose LLM Integration wünschen, garantiert das Elinext-Team LLM-Integrationsservices, die Ihre Erwartungen erfüllen.
