OpenAI リアルタイム対話インターフェース

POST https://88api.ai/v1/realtime/sessions
Content-Type: application/json
Authorization: Bearer $NEW_API_KEY

\{
  "model": "gpt-4o-realtime-preview-2024-12-17",
  "voice": "verse"
}

sequenceDiagram
    participant Client
    participant Server
    participant OpenAI

    alt WebRTC 接続
        Client->>Server: 一時トークンをリクエスト
        Server->>OpenAI: セッションを作成
        OpenAI-->>Server: 一時トークンを返却
        Server-->>Client: 一時トークンを返却

        Client->>OpenAI: WebRTC offer を作成
        OpenAI-->>Client: answer を返却

        Note over Client,OpenAI: WebRTC 接続を確立

        Client->>OpenAI: データチャネルを作成
        OpenAI-->>Client: データチャネルを確認
    else WebSocket 接続
        Server->>OpenAI: WebSocket 接続を確立
        OpenAI-->>Server: 接続を確認

        Note over Server,OpenAI: リアルタイム対話を開始
    end

async function init() \{
  // サーバーから一時キーを取得 - 下記のサーバーコードを参照
  const tokenResponse = await fetch("/session");
  const data = await tokenResponse.json();
  const EPHEMERAL_KEY = data.client_secret.value;

  // 対等接続を作成
  const pc = new RTCPeerConnection();

  // モデルから返されたリモートオーディオを再生するように設定
  const audioEl = document.createElement("audio");
  audioEl.autoplay = true;
  pc.ontrack = e => audioEl.srcObject = e.streams[0];

  // ブラウザのマイク入力のローカルトラックを追加
  const ms = await navigator.mediaDevices.getUserMedia({
    audio: true
  });
  pc.addTrack(ms.getTracks()[0]);

  // イベントを送受信するためのデータチャネルを設定
  const dc = pc.createDataChannel("oai-events");
  dc.addEventListener("message", (e) => \{
    // ここでリアルタイムサーバーイベントを受信します！
    console.log(e);
  });

  // セッション記述プロトコル(SDP)を使用してセッションを開始
  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);

  const baseUrl = "https://88api.ai/v1/realtime";
  const model = "gpt-4o-realtime-preview-2024-12-17";
  const sdpResponse = await fetch(`${baseUrl}?model=${model}`, {
    method: "POST",
    body: offer.sdp,
    headers: {
      Authorization: `Bearer ${EPHEMERAL_KEY}`,
      "Content-Type": "application/sdp"
    },
  });

  const answer = {
    type: "answer",
    sdp: await sdpResponse.text(),
  };
  await pc.setRemoteDescription(answer);
}

init();

import express from "express";

const app = express();

// 一時トークンを生成するためのエンドポイントを作成
// このエンドポイントは上記のクライアントコードと連携して使用されます
app.get("/session", async (req, res) => {
  const r = await fetch("https://88api.ai/v1/realtime/sessions", {
    method: "POST",
    headers: \{
      "Authorization": `Bearer ${process.env.NEW_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: "gpt-4o-realtime-preview-2024-12-17",
      voice: "verse",
    }),
  });
  const data = await r.json();

  // OpenAI REST APIから受け取ったJSONをクライアントに返送
  res.send(data);
});

app.listen(3000);

// 対等接続からデータチャネルを作成
const dc = pc.createDataChannel('oai-events');

// データチャネル上のサーバーイベントをリッスン
// イベントデータはJSON文字列から解析する必要があります
dc.addEventListener('message', (e) => {
  const realtimeEvent = JSON.parse(e.data);
  console.log(realtimeEvent);
});

// クライアントイベントを送信: 有効なクライアントイベントを
// JSONにシリアライズし、データチャネル経由で送信します
const responseCreate = {
  type: 'response.create',
  response: {
    modalities: ['text'],
    instructions: 'Write a haiku about code',
  },
};
dc.send(JSON.stringify(responseCreate));

import WebSocket from "ws";

const url = "wss://88api.ai/v1/realtime?model=gpt-4o-realtime-preview-2024-12-17";
const ws = new WebSocket(url, {
  headers: \{
    "Authorization": "Bearer " + process.env.NEW_API_KEY,
    "OpenAI-Beta": "realtime=v1",
  },
});

ws.on("open", function open() {
  console.log("Connected to server.");
});

ws.on("message", function incoming(message) {
  console.log(JSON.parse(message.toString()));
});

# websocket-client ライブラリのインストールが必要です:
# pip install websocket-client

import os
import json
import websocket

NEW_API_KEY = os.environ.get("NEW_API_KEY")

url = "wss://88api.ai/v1/realtime?model=gpt-4o-realtime-preview-2024-12-17"
headers = [
    "Authorization: Bearer " + NEW_API_KEY,
    "OpenAI-Beta: realtime=v1"
]

def on_open(ws):
    print("Connected to server.")

def on_message(ws, message):
    data = json.loads(message)
    print("Received event:", json.dumps(data, indent=2))

ws = websocket.WebSocketApp(
    url,
    header=headers,
    on_open=on_open,
    on_message=on_message,
)

ws.run_forever()

/*
注意: ブラウザなどのクライアント環境では、WebRTCの使用を推奨します。
ただし、DenoやCloudflare Workersなどのブラウザ類似環境では、
標準WebSocketインターフェースも使用できます。
*/

const ws = new WebSocket(
  'wss://88api.ai/v1/realtime?model=gpt-4o-realtime-preview-2024-12-17',
  [
    'realtime',
    // 認証
    'openai-insecure-api-key.' + NEW_API_KEY,
    // オプション
    'openai-organization.' + OPENAI_ORG_ID,
    'openai-project.' + OPENAI_PROJECT_ID,
    // Betaプロトコル、必須
    'openai-beta.realtime-v1',
  ]
);

ws.on('open', function open() {
  console.log('Connected to server.');
});

ws.on('message', function incoming(message) {
  console.log(message.data);
});

// サーバーイベントを受信
ws.on("message", function incoming(message) \{
  // メッセージデータはJSONから解析する必要があります
  const serverEvent = JSON.parse(message.data)
  console.log(serverEvent);
});

// イベントを送信、クライアントイベント形式に準拠したJSONデータ構造を作成
const event = {
  type: "response.create",
  response: {
    modalities: ["audio", "text"],
    instructions: "Give me a haiku about code.",
  }
};
ws.send(JSON.stringify(event));

# クライアントイベントを送信、辞書をJSONにシリアライズ
def on_open(ws):
    print("Connected to server.")

    event = \{
        "type": "response.create",
        "response": \{
            "modalities": ["text"],
            "instructions": "Please assist the user."
        }
    }
    ws.send(json.dumps(event))

# メッセージを受信するには、メッセージペイロードをJSONから解析する必要があります
def on_message(ws, message):
    data = json.loads(message)
    print("Received event:", json.dumps(data, indent=2))