AI推論ガイド
コード例
はじめるための例
特定のSDKの書き方を示す出発点であり、バージョンを問わない本番向けのレシピではありません。示したパッケージをインストールし、現在のプロバイダーカタログに載っているモデルを選び、依存関係のバージョンを固定したうえで、デプロイ前にエラー、タイムアウト、キャンセル、リソース上限の各経路を確認してください。
WebLLMによるブラウザでの例
// 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の例
// 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 || '');
}Ollamaのローカルサーバー
Ollamaはプラットフォーム別の公式手順に従ってインストールし、デスクトップアプリまたはサービスが起動していることを確認してください。
# 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デスクトップアプリ
LM Studioでモデルを読み込み、lms server startでローカルサーバーを起動します。この例では、モデル識別子を決め打ちせず、実際のローカルモデル識別子を取得しています。
// 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);プロバイダー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 || '');
}ビジョンモデルの組み込み
画像入力のスキーマと対応モデルIDはランタイムごとに異なります。ランタイムのカタログから、現在サポートされている画像テキスト変換またはマルチモーダルのモデルを選び、そのうえで画像のサイズと形式の上限、向き、アクセシビリティ、メモリ負荷、信頼できないファイルの扱いを確認してください。
最新のTransformers.jsのドキュメントと例を参照するベストプラクティス
性能の最適化
- • 量子化した派生モデルを、品質とレイテンシの目標に照らして計測する
- • 適切なキャッシュ戦略を実装する
- • スループットに向けてバッチサイズを最適化する
- • メモリ使用量と解放を監視する
ユーザー体験
- • モデルのダウンロード進捗を表示する
- • 長い応答にはストリーミングを実装する
- • 代替手段を用意する
- • エラーを丁寧に処理する