Next.js13とSupabaseで音声認識AIチャットアプリ構築

ライブラリのインポート

• gasp:アニメーションが簡単に実装

npm i axios gpt3-tokenizer gsap openai react-select react-use @heroicons/react

npm i mic-recorder-to-mp3 formidable@2.1.1 react-timer-hook

req, resの型はnextモジュールからNextApiRequest, NextApiResponseとして参照できる

import { Configuration, OpenAIApi } from "openai";
import type { NextApiRequest } from "next";

multiplesをtrueとすることで複数のファイルを一つのフィールドからアップロードすることができます。
keepExtensionsをtrueとすることでアップロードされたファイルは元の拡張子を保持したまま保存されます。デフォルトでは、この値はfalseであり、アップロードされたファイルは拡張子なしで保存されます。

const form = formidable({multiples: true, keepExtensions: true})

音声認識は、openai.createTranscriptionを使用します。

第 1 引数に File を設定します。

fileContent には、ファイルが読み込まれていることを確認し、読み込まれていた場合は、fs.createReadStreamを使用してストリームとして返しています。

bodyParser オプションを false に設定する必要があります。

第 2 引数にモデルwhisper-1を指定します。

console.error() メソッドは、エラーメッセージをウェブコンソールに出力します。

slice(-2)は列の最後から2つの要素を取り出す。