Leitfaden KI-Inferenz

Codebeispiele

Beispiele für den Einstieg

Startpunkte für konkrete SDK-Formen, keine versionslosen Produktionsrezepte. Installieren Sie das gezeigte Paket, wählen Sie ein Modell aus dem aktuellen Anbieterkatalog, pinnen Sie die Abhängigkeitsversionen und testen Sie vor dem Deployment die Pfade für Fehler, Timeout, Abbruch und Ressourcengrenzen.

WebLLM-Beispiel im Browser

// npm install @mlc-ai/web-llm
import { CreateMLCEngine } from "@mlc-ai/web-llm";

// Initialize the engine
const engine = await CreateMLCEngine(
  "Llama-3.2-1B-Instruct-q4f32_1-MLC",
  {
    initProgressCallback: (progress) => {
      console.log('Loading:', Math.round(progress.progress * 100) + '%');
    }
  }
);

// Generate text
const response = await engine.chat.completions.create({
  messages: [
    { role: "system", content: "You are a helpful assistant." },
    { role: "user", content: "Hello! How are you?" }
  ],
  temperature: 0.8,
  max_tokens: 100
});

console.log(response.choices[0].message.content);

BrowserAI-Beispiel

// npm install @browserai/browserai
import { BrowserAI } from '@browserai/browserai';

const browserAI = new BrowserAI();

// Load model with progress tracking
await browserAI.loadModel('llama-3.2-1b-instruct', {
  quantization: 'q4f16_1',
  onProgress: (progress) => console.log('Loading:', progress.progress + '%')
});

// Generate text
const response = await browserAI.generateText('Hello, how are you?');
console.log(response.choices[0].message.content);

// Streaming example
const chunks = await browserAI.generateText('Write a story', {
  stream: true,
  temperature: 0.8
});

for await (const chunk of chunks) {
  console.log(chunk.choices[0]?.delta.content || '');
}

Lokaler Ollama-Server

Installieren Sie Ollama nach den offiziellen Anleitungen für Ihre Plattform und stellen Sie sicher, dass die Desktop-App oder der Dienst läuft.

# Terminal
ollama pull llama3.2:1b
ollama run llama3.2:1b "Hello, world!"

// JavaScript (browser/devtools while the local service is running)
const response = await fetch('http://localhost:11434/api/generate', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    model: 'llama3.2:1b',
    prompt: 'Hello!',
    stream: false
  })
});
if (!response.ok) throw new Error('Ollama request failed: ' + response.status);
console.log(await response.json());

LM Studio Desktop-App

Laden Sie ein Modell in LM Studio und starten Sie dann dessen lokalen Server mit lms server start. Das Beispiel ermittelt die tatsächliche lokale Modellkennung, statt eine anzunehmen.

// Discover the identifiers exposed by this LM Studio server
const modelsResponse = await fetch('http://localhost:1234/v1/models');
if (!modelsResponse.ok) throw new Error('Model list failed: ' + modelsResponse.status);
const models = await modelsResponse.json();
const model = models.data?.[0]?.id;
if (!model) throw new Error('Load at least one model in LM Studio');

const response = await fetch('http://localhost:1234/v1/chat/completions', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    model,
    messages: [
      { role: 'system', content: 'You are a helpful assistant.' },
      { role: 'user', content: 'Hello!' }
    ],
    temperature: 0.7,
    max_tokens: 100
  })
});

if (!response.ok) throw new Error('Completion failed: ' + response.status);
const data = await response.json();
console.log(data.choices[0].message.content);

Beispiel für eine Anbieter-API (Together AI)

// npm install together-ai
import Together from "together-ai";

const together = new Together({
  apiKey: process.env.TOGETHER_API_KEY,
});

const model = process.env.TOGETHER_MODEL;
if (!model) throw new Error("Set TOGETHER_MODEL to an ID from the current serverless catalog");

const response = await together.chat.completions.create({
  messages: [
    { role: "system", content: "You are a helpful assistant." },
    { role: "user", content: "Explain quantum computing in simple terms." }
  ],
  model,
  max_tokens: 500,
  temperature: 0.7,
  stream: true,
});

// Handle streaming response
for await (const chunk of response) {
  process.stdout.write(chunk.choices[0]?.delta?.content || '');
}

Ein Modell aus dem aktuellen Serverless-Katalog wählen

Einbindung eines Vision-Modells

Eingabeschemata für Bilder und unterstützte Modell-IDs unterscheiden sich je nach Runtime. Wählen Sie ein derzeit unterstütztes Bild-zu-Text- oder multimodales Modell aus dem Runtime-Katalog und prüfen Sie dann Grenzen für Bildgröße und -typ, Ausrichtung, Barrierefreiheit, Speicherdruck und den Umgang mit nicht vertrauenswürdigen Dateien.

Die aktuelle Transformers.js-Dokumentation und deren Beispiele nutzen

Bewährte Praktiken

Performanceoptimierung

• Quantisierte Varianten gegen Qualitäts- und Latenzziele messen
• Geeignete Caching-Strategien umsetzen
• Batchgrößen für den Durchsatz optimieren
• Speicherverbrauch und Freigabe überwachen

Nutzererlebnis

• Ladefortschritt beim Herunterladen von Modellen anzeigen
• Streaming für lange Antworten umsetzen
• Ausweichoptionen anbieten
• Fehler sauber behandeln

AI Inference Guide

Leitfaden KI-Inferenz

// npm install @mlc-ai/web-llm import { CreateMLCEngine } from "@mlc-ai/web-llm"; // Initialize the engine const engine = await CreateMLCEngine( "Llama-3.2-1B-Instruct-q4f32_1-MLC", { initProgressCallback: (progress) => { console.log('Loading:', Math.round(progress.progress * 100) + '%'); } } ); // Generate text const response = await engine.chat.completions.create({ messages: [ { role: "system", content: "You are a helpful assistant." }, { role: "user", content: "Hello! How are you?" } ], temperature: 0.8, max_tokens: 100 }); console.log(response.choices[0].message.content);

// npm install @browserai/browserai import { BrowserAI } from '@browserai/browserai'; const browserAI = new BrowserAI(); // Load model with progress tracking await browserAI.loadModel('llama-3.2-1b-instruct', { quantization: 'q4f16_1', onProgress: (progress) => console.log('Loading:', progress.progress + '%') }); // Generate text const response = await browserAI.generateText('Hello, how are you?'); console.log(response.choices[0].message.content); // Streaming example const chunks = await browserAI.generateText('Write a story', { stream: true, temperature: 0.8 }); for await (const chunk of chunks) { console.log(chunk.choices[0]?.delta.content || ''); }

// JavaScript (browser/devtools while the local service is running) const response = await fetch('http://localhost:11434/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'llama3.2:1b', prompt: 'Hello!', stream: false }) }); if (!response.ok) throw new Error('Ollama request failed: ' + response.status); console.log(await response.json());

// Discover the identifiers exposed by this LM Studio server const modelsResponse = await fetch('http://localhost:1234/v1/models'); if (!modelsResponse.ok) throw new Error('Model list failed: ' + modelsResponse.status); const models = await modelsResponse.json(); const model = models.data?.[0]?.id; if (!model) throw new Error('Load at least one model in LM Studio'); const response = await fetch('http://localhost:1234/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model, messages: [ { role: 'system', content: 'You are a helpful assistant.' }, { role: 'user', content: 'Hello!' } ], temperature: 0.7, max_tokens: 100 }) }); if (!response.ok) throw new Error('Completion failed: ' + response.status); const data = await response.json(); console.log(data.choices[0].message.content);

// npm install together-ai import Together from "together-ai"; const together = new Together({ apiKey: process.env.TOGETHER_API_KEY, }); const model = process.env.TOGETHER_MODEL; if (!model) throw new Error("Set TOGETHER_MODEL to an ID from the current serverless catalog"); const response = await together.chat.completions.create({ messages: [ { role: "system", content: "You are a helpful assistant." }, { role: "user", content: "Explain quantum computing in simple terms." } ], model, max_tokens: 500, temperature: 0.7, stream: true, }); // Handle streaming response for await (const chunk of response) { process.stdout.write(chunk.choices[0]?.delta?.content || ''); }