日日是Oracle APEX: OpenAI Whisperを使った文字起こしアプリの作成(5)

2023年1月24日火曜日

ブラウザで音声を録音し、そのデータを使って直接WhisperのAPIを呼び出して文字起こしをした結果を、ページ・アイテムに設定する実装を追加してみました。

以下のような動作になります。

Startボタンを押してからStopボタンを押すまでに、結果としてTextに文字起こしされる言葉を録音しています。

Whisperを実行するコードに、CORSの対応を追加します。

Whisper APIを呼び出すページはAPEXのサーバーが生成しています。OriginがAPEXのサーバーであれば、Whisper APIを呼び出せるように許可を与えています。

次に共有コンポーネントの静的アプリケーション・ファイルを作成します。

ファイル名はpage-actions.jsとします。内容は以下になります。今回は記述するJavaScriptのコードを、ひとつのファイルにまとめています。

参照はコピーしておきます。

ページ・デザイナにて、ホーム・ページを開きます。

JavaScriptのファイルURLを設定します。

音声レコーダーとなるリージョンと、START、STOP、TRANSCRIBEの３つボタンを作成します。

リージョンを作成します。

識別のタイトルはAudio Playerとします。タイプに静的コンテンツを選択し、ソースのHTMLコードとして以下を記述します。

<audio id="player" controls></audio>

リージョンの修飾を最小限にするため、外観のテンプレートとしてBlank with Attributesを選択します。

録音を開始するボタンSTARTを作成します。

識別のボタン名はSTART、ラベルはStartとします。レイアウトの位置として、レコーダーの左に配置されるよう、Previousを選択します。

動作のアクションに動的アクションで定義を選択し、詳細のカスタム属性にて実行するAPEXアクションを指定します。

data-action="#action$start-audio-recording"

録音を停止するボタンSTOPを作成します。

識別のボタン名はSTOP、ラベルはStopとします。レイアウトの位置として、レコーダーの右に配置されるよう、Nextを選択します。

動作のアクションに動的アクションで定義を選択し、詳細のカスタム属性にて実行するAPEXアクションを指定します。

data-action="#action$stop-audio-recording"

同様に、Whisper APIを呼び出し文字起こしを実行するボタンTRANSCRIBEを作成します。

動作の指定である詳細のカスタム属性は、以下の記述になります。

data-action="#action$whisper-transcribe?target=P1_TEXT&url=&G_TRANSCRIBE_URL."

以上で実装は完了です。アプリケーションを実行すると、最初のGIF動画のように動作します。

例えば日報を音声入力するとしても、いちいちファイルに保存するのは現実的ではないと感じたので、JavaScriptで実装してみました。以前に紹介したアプリケーションのエクスポートは置き換えています。

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完