天才か？ Azure OpenAI Service の Stream 出力をスムーズに見せかけるトリック

追記　2024/03 非同期変更フィルター機能がご利用できます

Azure OpenAI Service で ChatCompletion API を使用する際、stream = True に設定すると、回答がバルクで返ってきてしまいます。

これを OpenAI 本家のようにヌルヌルと出力させる面白いトリックを発見しました。というのも、いつもおなじみの Azure-Samples/azure-search-openai-demo の更新で実装されてました。

該当のコードはこれです。バックエンド側はそのままに、フロントエンド側でタイマーをセットして 33 ミリ秒ごとに新しい文字を追加していく仕組みです。フロントエンドの制約に応じて、ここにさまざまな値をセットしてインタラクションを調整できます。数十ミリ秒のような速い値はもちろん自然なインタラクションにつながりますが、数百ミリ秒の値であっても AI が生成しているというエクスペリエンスをユーザーに体感させるのに十分でしょう。

const updateState = (newContent: string) => {
    return new Promise(resolve => {
        setTimeout(() => {
            answer += newContent;
            const latestResponse: ChatAppResponse = {
                ...askResponse,
                choices: [{ ...askResponse.choices[0], message: { content: answer, role: askResponse.choices[0].message.role } }]
            };
            setStreamedAnswers([...answers, [question, latestResponse]]);
            resolve(null);
        }, 33);
    });
};

これを自分で試すために、該当部分だけ抜き出した超シンプルなサンプルコードを作成しました。すべて Azure-Samples のものを使っています。ありがたいです。

参考