스트리밍 - 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'],
  },
});