ストリーミング - OpenModex

概要

ストリーミングを使用すると、完全なレスポンスを待つのではなく、生成されるレスポンストークンをリアルタイムで受信できます。これにより、ユーザーの体感レイテンシーが大幅に改善されます。

ストリーミングを使用するタイミング

チャットインターフェース — タイピングインジケーターとリアルタイムテキストの表示
長いレスポンス — 完全なレスポンスを待たせない
コード生成 — 書かれている最中のコードを表示

仕組み

リクエストでstream: trueを設定
OpenModexがSSE（Server-Sent Events）接続を開く
トークンが生成されるたびにdata:イベントとして送信
ストリームはdata: [DONE]で終了

使用例

const stream = await client.chat.completions.create({
  model: 'gpt-4o',
  messages: [{ role: 'user', content: 'Tell me a story.' }],
  stream: true,
});

for await (const chunk of stream) {
  process.stdout.write(chunk.choices[0]?.delta?.content ?? '');
}

stream = client.chat.completions.create(
    model="gpt-4o",
    messages=[{"role": "user", "content": "Tell me a story."}],
    stream=True,
)

for chunk in stream:
    content = chunk.choices[0].delta.content
    if content:
        print(content, end="", flush=True)

stream, _ := client.Chat.Completions.CreateStream(ctx, &openmodex.ChatCompletionParams{
    Model:    "gpt-4o",
    Messages: []openmodex.ChatMessage{{Role: "user", Content: "Tell me a story."}},
})

for chunk, err := range stream.Iter() {
    if err != nil { break }
    fmt.Print(chunk.Choices[0].Delta.Content)
}

import { useChat } from '@openmodex/react';

function Chat() {
  const { messages, input, setInput, sendMessage, isLoading } = useChat({
    apiKey: 'omx_sk_...',
    model: 'gpt-4o',
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={() => sendMessage()}>Send</button>
    </div>
  );
}

ストリーミング + フォールバック

ストリーミングはフォールバックとシームレスに連携します。ストリーミング開始前にプライマリモデルが失敗した場合、OpenModexはフォールバックモデルで自動的にリトライします：

const stream = await client.chat.completions.create({
  model: 'gpt-4o',
  messages: [{ role: 'user', content: 'Hello!' }],
  stream: true,
  routing: {
    fallback: ['claude-3.5-sonnet'],
  },
});