chatgptとvoiceBOXを利用して画像を切り替える処理に以下要素を追加する。
chatgptからもらう返答に感情パラメータ(喜び3,悲しみ2,怒り4,驚き0のようなもの)を付与してもらい、その数字に合わせて表示する画像を変更する。
具体的に手をつけていい箇所がわからない。
// ずんだもん表示
const Character = ({ character }: { character: CharacterType }) => {
const [imageIndex, setImageIndex] = useState<number>(0)
const imageRef = useRef<HTMLImageElement>(null)
// 画像リスト
const images = ['/zundamon1.png', '/zundamon2.png', '/zundamon3.png']
// 画像を切り替える関数
const changeImage = () => {
setImageIndex((imageIndex + 1) % images.length)
}
// システムメッセージを配列の先頭に追加
newMessages.unshift({
role: ChatCompletionRequestMessageRoleEnum.System,
content: 'あなたはAIアシスタントです。簡潔に答えてください。',
})
色々なサイトを参考にしたのですが感情パラメータを扱って最適な画像の表示をコントロールしているのはなかったです。
具体的にcontnetの中身に感情パラメータを指定したとしてもそのデータのみを吸い上げ、テキストボックスには表示しないように設定する方法がわからなかったです。
合わせてYouTubeのコメントを自動で入力する機能も搭載しようとしているので、その際はまたご質問させていただけますと幸いです。
ご質問ありがとうございます。
案としましては、ChatGPTの回答をjson形式で回答してもらうようにしてみてはいかがでしょうか。
json形式で、メッセージと感情パラメータを返してもらいます。
メッセージのみ表示して、感情パラメータは、判定してキャラクター画像の切り替えに使用します。
ChatGPTのsystemプロンプトにjson形式で出力してと指示をすることもできますし、若干不安定なので、Function Callingを使用して、確実にjson形式で出力することもできます。
https://zenn.dev/hathle/books/next-function-calling
さらに複雑なFunction Callingの使い方は今チュートリアルを作成しています。
試してみてください。