AzureSamples: azure-search-openai-demo での応答における`引用`の実装方法メモ

概要

Bing copilot でいうところの以下の部分

上記について、azure-search-openai-demo ではどうしているか？という点についての備忘録

日本語版デモである以下でも同様

backend

• approach class を継承した各approachクラス内で生成
• 最終的な応答としては、以下になる筈
  • run_without_streaming()
  • run_with_streaming()
    • stream の場合は、[delta] が基本
• で、メッセージ内にて追加しておくように、プロンプトで指示
• 形式としては [filename]
  

stream 時の応答例

yield {"delta": {"role": "assistant"}, "context": extra_info, "session_state": session_state}

frontend

• 応答内容は、Answer にて解釈
• 今回の肝である、suggestedResponses は、AnswerParser にて解析
• [, ]で囲われた部分を抜き出して、citations として切り出している。
• [filename] として backend から /content 取得したら、あとは表示するだけ

Parser 2024/6/16 現在の Parser をコピペ記録

export function parseAnswerToHtml(answer: string, isStreaming: boolean, onCitationClicked: (citationFilePath: string) => void): HtmlParsedAnswer {
    const citations: string[] = [];

    // (Stream 用とかなので省略)

    const parts = parsedAnswer.split(/\[([^\]]+)\]/g);

    const fragments: string[] = parts.map((part, index) => {
        if (index % 2 === 0) {
            return part;
        } else {
            let citationIndex: number;
            if (citations.indexOf(part) !== -1) {
                citationIndex = citations.indexOf(part) + 1;
            } else {
                citations.push(part);
                citationIndex = citations.length;
            }

            const path = getCitationFilePath(part);

            return renderToStaticMarkup(
                <a className="supContainer" title={part} onClick={() => onCitationClicked(path)}>
                    <sup>{citationIndex}</sup>
                </a>
            );
        }
    });

    return {
        answerHtml: fragments.join(""),
        citations
    };
}

あとがき

日本語デモや、最初の頃のデモだと、オーバーラッピングチャンクの影響で、表示させたページに目的としたコンテンツが無い、とかあったけど、最新のデモだと pdf#page= を利用して前後を直ぐにみられるようになっていてとても便利