画像を送信して音声解説を取得する

call-openai-thru-ords.js

// スピナーを表示し、画面操作をブロックする。
let spinner = apex.widget.waitPopup();
// P1_IMAGEに設定されているファイルを取り出す。
let file = document.getElementById("P1_IMAGE").files[0];
// OPenAI GPT-4VをORDSのREST API経由で呼び出す。
const req = new XMLHttpRequest();
req.open("POST", "&G_REQUEST_URL.", true);
// 現行のAPEXは画像のクロッピングを行うと、フォーマットがPNGに変わる。
// この動作は将来のバージョンで変更される可能性がある。
req.setRequestHeader('content-type','image/png');
// APEXのセッションでORDS APIを認証するためにApex-Sessionヘッダーを設定している。
const authHeader = apex.env.APP_ID.concat(',',apex.env.APP_SESSION);
req.setRequestHeader('Apex-Session', authHeader);
// text to speechを呼び出すので出力はaudio/mp3
req.responseType = "blob";
req.onload = (event) => {
    const audio = req.response;
    const audioURL = URL.createObjectURL(audio);
    const elem = document.getElementById("my-audio");
    elem.src = audioURL;
    // スピナーを解除して解説を読み上げ。
    spinner.remove();
    elem.play();
};
// 要求の送信。
req.send(file);