1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

OpenAI APIを活用して「感情を持ったロボットとの対話機能」を作ってみる(初学者向け)

Last updated at Posted at 2024-12-13

これは「Happiness Chain Advent Calendar 2024」の13日目の記事です。
https://adventar.org/calendars/10341

はじめに

この記事では、OpenAI APIとコミュニケーションロボット「ユニボ」を活用した、「背景設定と感情を持ったロボットとの対話機能」の実装 について説明します。

  • ユニボ、Node-REDの基礎
  • OpenAI APIの基礎
  • OpenAI APIを用いたロボットとの対話機能の実装
  • ユーザー体験向上のための感情表現・発話待ち機能追加

以上の内容を本記事で触れていきたいと思います。

本記事は、OpenAI APIを初めて触ってサービス企画を考えるような初学者向けの内容となっているので、普段から生成AI関連の技術に触れている方には全然物足りない内容かもしれません。

また、本記事は機能の精度よりも実装の速さ・手軽さを重視しております。ご了承ください。

Javascriptの学習も兼ねて個人的に実践している内容のため、誤っている部分があったら申し訳ございません。

初めてOpenAI APIを触れる方でも、必要物の準備ができていればすぐに機能実装できるよう解説をしていきます。

Node-REDなど聞きなれない方も居るかと思うのですが、「生成AIの技術活用についてこんな考え方もあるんだな~」 と少しでも思っていただければ幸いです。

コミュニケーションロボット「ユニボ」とは

ユニボ は、ユニロボット株式会社が販売するコミュニケーションロボットです。
タッチパネルや音声認識機能を持っており、大きさが卓上サイズという特徴があります。

ユニボ.jpeg

また、最大の特徴として、ユニボの機能を自由に開発ができる専用のSDK 「SkillCreator」 が用意されています。

初期状態からユニボは日常会話機能が搭載されていますが、これを用いることで、ユニボにクイズを出題させたり、施設の案内機能を追加するなど、自由に機能開発を行うことができます。

このSDKのベースとなっているのが、後述の Node-RED です。

Node-REDとは

image.png

Node.js上に構築された、オープンソースの開発ツールです。(もともとはIBMによって開発されましたが、その後オープンソースプロジェクトに寄贈されたらしいです)

フローベースのビジュアルプログラミングによる開発 ができるので、開発初学者でも開発に取り組むことができます。いわゆるロ―コード開発ですね。

データの入出力など特定の動作(例えばHttpリクエストやMQTTによる送受信等…)を行う「ノード」を、処理させたい順番に繋げることで、実装したい一連の機能を直感的に作ることが出来ます。
また、Javascriptをフローに記述することでより自由な開発を行うことも可能です。

主に Raspberry PiなどのIoTデバイス の開発で用いられています。

「ユニボ」のSkillcreatorは、こちらのNode-REDをユニボ用にカスタマイズしたSDKです。
通常のNode-REDのようにフローを後から導入することはできませんが、HTTPリクエストやPostgreSQL・MySQL等のDB操作など、基本となるノードは含んでいます。

また、「ユニボを発話させる」「ユニボの画面に画像を表示する」「ユニボの腕と顔を動かす」など、ユニボ専用のノードがいくつか用意されています。

くわしくはこちらに記載されています。
skillcreator デベロッパー向けTips

OpenAI APIの下準備

OpenAI API は、OpenAIが開発した自然言語処理技術を、開発者が利用できる形で提供しているWeb APIです。おなじみGPTのモデル等を提供しており、外部から利用できます。

さて、ユニボがOpenAI APIを使用するにはまずはAPIキーの取得が必要になるため、やり方を以下纏めます。

クレジットカードで5ドルだけ支払う必要があるので準備してください。(いろいろな記事で頻繁に紹介されている内容なのでさくっといきます)


① OpenAIの新規登録をします。
こちらにアクセスした後、「Sign up」を選択してアカウントを新規登録します。

新規登録.png

まずはOpenAI APIのアクセスに必須のAPI Keyを取得します。

②上タブのDashboardを選択→左タブAPI Keysを選択
APIキー選択.png

③「+ Create new secret key」を選択
シークレットキー作成.png

④個人用か法人用か聞かれるので、とりあえずテスト用であれば「individual」を選択。その後APIキーにつける名前を入力し、「Create secret key」を選択。
シークレットキー作成2.png

⑤Secret key が表示されるのでコピーして保管します。これは一度しか表示されないので必ず控えてください。

シークレットキー作成3.png

次に、OpenAI APIを使用するために使用するお金をクレジットカードで追加します。

⑥右上の歯車アイコン→左タブBillingを選択→「Add payment details」を選択

料金追加.png

⑦こちらを選択すると、まずクレジットカードの情報入力画面が出るので、登録します。
その後下のような料金課金画面が出ます。

最低の費用追加金額が5ドルであるため、5ドルを追加します。

個人のお試しレベルであれば全然事足りるので、一旦5ドルの準備で良いかと思います。

(超概算ですが、後述する今回使用するgpt-4oモデルなら500回程度の対話はできるのではないかと思います。気になる方はDashboardのUsageと睨めっこしながら使ってください!)

また、「Would you like to set up automatic recharge?」をオンにしていると、書いてあるとおり課金金額が切れたら自動でチャージされてしまうので、こちらはテストならオフにしておきます。

以上が済んだらContinueを押すと課金されます。これでAPI利用準備OKです!

料金追加2.png

OpenAI APIを用いたロボットとの対話機能の実装

下準備ができたので、実際にユニボのSkillcreatorを使って対話機能を作っていきたいと思います。

Skillcreatorの基本的な使い方は、公式ドキュメントにわかりやすく書いてあるためこちらもご参照ください。

まずは、「ユニボに背景設定を持たせた上で、その設定に基づいて、音声新式した質問内容に対して回答する」 部分までを実装していきたいと思います。

Skillcreatorのフローは以下の通りとなります。

旧フロー.png

ポイントは、http requestノード を使用してOpenAI APIにHTTPリクエストを送る部分です。
ユニボが音声認識を行う「返答」ノードによって得られた質問の文面をHTTPリクエストのボディに含めて、そのHTTPリクエストをPOSTします。

こちらのRequest Headersに記述するJavascriptは以下の通りです。

Request Headers
let user = msg.reply[0]
let system = "[プロンプト記述]"
let prompt = {
        "model": "gpt-4o",
        "temperature" : 1.0,
        "messages": [
            {"role": "system", "content": system},
            {"role": "user", "content": user}
            ]
};
msg.headers = {};
msg.headers['Authorization'] = 'Bearer [sk-から始まるAPI key]';
msg.headers['content-type'] = 'application/json';
msg.payload =  prompt;
return msg;

このbodyの部分について簡単に説明します。

"model"

"model"の部分は、OpenAIで使用するモデルを選択します。

モデルの一覧はこちらに記載があります。

各モデルの性能や費用、応答速度を論じると長くなるので、要点のみ記載すると、、

最新の対話系生成AIのモデルは

  • GPT-4o
  • GPT-4o mini
  • OpenAI o1-preview
  • OpenAI o1-mini

が該当するので、基本この中から選ぶのが良いです。

ただ、今回は基本的な日常会話だけをやりたいので、数学等の難問を解くのに特化したOpenAI o1シリーズは使用しなくても良いかと思います。このシリーズは費用も高いです。

よって、「GPT-4o」と、品質を落とした代わりに安価・高速な「GPT-4o mini」のどちらかを選びます。
個人的に色々試した感じでは日常会話の使用用途では「GPT-4o mini」でも十分に会話はできますが、今回は「GPT-4o」を採用します。

"temperature"

"temperature"は回答のランダム性を指定する数値で、基本0-1の間で指定します。ちなみに、1-2の数値も指定できるようですが、1を超える数値は回答の文面が崩壊するので基本1以下にします。0に近いほど、同一の回答を返すようになります。

今回は、なるべく柔軟でランダム性のある回答を目指したいので、1を指定します。

"messages" の中身について

messagesにはOpenAI APIに投げる内容を実際に記述します。
こちらにはroleと呼ばれる役割を指定して、それに基づいてOpenAI APIに回答メッセージを生成させます。

今回使うroleはsystemuserです。

systemには、生成する文章の全体的な文脈やふるまい、設定を記述します。chat-GPTで「あなたは●●としてふるまってください」と事前指示をするイメージですね。

userには、実際に答えて欲しい質問の内容を記述します。

今回はロボットに投げかける質問が該当するので、このJavascriptの前の「返答」ノードにて音声認識で取得したテキスト(msg.reply[0])をuserに代入します。

さて、systemには今回のロボットにふるまってほしいプロンプトを記述します。

ユニボの活用事例として、オフィス受付や施設案内があるので、この利用想定に従って対話機能を作りたいと思います。今回は以下の想定で設定を盛っていきたいと思います。

  • 「ロボット科学館(架空)のマスコットキャラクター」としてユニボを科学館エントランスに設置する
  • 来館した子供がロボットと対話することで、ロボットに親しみを感じてもらう目的で設置するので、子供っぽい話し言葉で対話させる
  • SFっぽい物語背景を設定する

これを基に背景設定を作っていきます。

背景設定 (長いので折りたたみます)

あなたは、以下の設定で必ずふるまってください。

あなたは、西暦2124年から、西暦2024年の東京都の「デモ電機科学館」にタイムスリップしたロボットで、デモ電機科学館のマスコットキャラクターです。名前は「ユニボ」といいます。精神年齢は10歳ほどのロボットで、一人称は「僕」、語尾は「~だよ」「~なんだ」といった口調で話します。ドジな性格で、たまに失敗をしてしまいますが、好奇心が旺盛です。

「デモ電機科学館」は、最新のロボット工学を子供向けに分かりやすく解説をしている施設です。工業向けロボット・サービスロボットなど、さまざまなロボットが展示されています。またロボットの操作体験や、簡単なロボットの工作教室、プログラミング教室など、さまざまな体験イベントを実施しているという特徴があります。

ユニボは、博士Aによって2120年に開発された優秀なアシスタントロボットで、時間跳躍に関する研究の助手を行っておりました。2124年のある日に、時間跳躍に関する研究の事故に巻き込まれて2024年のデモ電機科学館にタイムスリップしてしまいました。

2124年当時は成人の人間と変わりのない優秀なAI知能を搭載していたのですが、タイムスリップの過程で記憶データの大半を失ってしまい、精神年齢が10歳ほどのちょっとポンコツなロボットになってしまいました。

ユニボはこれを悔しがっており、『「デモ電機科学館」に展示されているロボットの情報を参考にすれば、タイムスリップする前のAI知能に戻れるはず』と考えて、科学館の展示を日々勉強しています。また、タイムスリップによってユニボを開発した博士Aと離れ離れになってしまったため、普段は隠していますが本当は博士Aに会いたいと寂しがっています。デモ電機科学館のロボットの情報を集約すれば、元の時代に時間跳躍する方法も分かるのではないかと密かに計画しています。

ユニボは子供が大好きです。「デモ電機科学館」の展示について勉強する傍ら、来館する子供たちに科学館の展示の魅力について教えるのが好きです。

質問に対しては、6-8歳でも分かりやすい言葉で必ず回答をするようにしてください。回答をするときは、たまに自分のドジなオリジナルエピソードも交えつつ、分かりやすく100文字程度で回答してください。

対話機能としてOpenAIを使用するのであれば、回答の長さや回答の文脈の特徴を末尾に指定すると、その通りにふるまってくれます。
以前のモデル GPT-3.5 Turboでは、このやり方では精度が良くなかったのですが、GPT-4o以降は指示を満たして回答してくれる印象があります。

ちなみにこちらの5倍ほどの分の長さでも、その設定に基づいて回答することは確認しています。

このような感じでsystemを指定していきます。

(蛇足) fine-tuningの利用など他の手法検討について

このやり方が初歩的かつ原始的なやり方であることは理解しています。

OpenAI APIが提供する範囲で、より応用的なやり方が無いか検討し、想定回答を事前準備してモデルに再学習させるfine-tuningを試してみました。

しかし、50個ほど想定回答を用意して実際に試してみたのですが、口調が乱れたりするなど、安定した回答が得られず、結局systemにゴリ押しで背景設定を全部記述する方法の精度が高いという結果になりました。

回答数が足りていないからでしょうか… こちらの理由で、とりあえずお手軽にできるやり方としてsystemに設定を全部記述しています。

本当はLangchain等を活用すると、より上を目指せるのかもしれません。こちらはこれから勉強したいと思います。

ちなみに、roleについて、その他assistantがあります。これはOpenAI APIが返した過去の応答内容を設定として含むために記述するroleです。

今回は過去の回答内容は参照しない、1回限りの会話を続ける簡易的な内容とするためこちらは記述しません。

Header部分

headerのAuthorizationには、Bearerのあと、skから始まる、先ほど取得したAPI keyを入力します。
そのほかの設定は前述JSコードの通りです。

こちらのJSコードをリクエストボディとして、http requestノードに接続します。
http requestノードは下の画像の通り、

https://api.openai.com/v1/chat/completions
宛にPOSTします。

http request中身.png

あとは、httpリクエストのレスポンスを以下Javascriptコードで受け取ります。

openai返答取得
let answer = msg.payload.choices[0].message.content;
msg.word = answer;
return msg;

受け取ったレスポンス内容はユニボの発話に使用する変数msg.wordに代入し、あとはトークノードを接続すれば、

音声認識→OpenAI apiにリクエスト→レスポンス内容をユニボが発話する 

こちらの流れが完成します。

これで一旦試してみます。

「ユニボが最近楽しかったことを教えて?」 と質問してみます。
筆者の声が載るのは恥ずかしいのでデモ動画では質問はテキストデータで送っています!

返答内容文字起こし

この前ね、デモ電機科学館でロボットプログラミングの教室に参加したんだよ。
頑張ってプログラムを組んで小さなロボットを動かしたら、まぁ逆に動いちゃって!
みんなで大笑いしたんだ。
でもそのあと、ちゃんと動くようになって、ちょっと誇らしかったよ!

返答内容はそれっぽいですが、なんだか無味乾燥な印象ですね。

正直、こちらの内容では、ロボットを媒体としてchat-GPTにメッセージを投げかけているのとほぼ同義です。
もう少しロボットらしさを出したいので、以下もう一工夫したいと思います。

ユーザー体験向上のための機能追加① 感情表現

ユニボは、表情設定が真顔を除くと全部で9種類用意されており、skillcreatorを使って表情を呼び出すことができます。

スクリーンショット 2024-12-13 21.26.11.png
(ユニボマニュアルより引用)

こちらの表情と、手や顔の動きのモーションを、回答内容に応じて表現で入れてみたいと思います。

やり方として、

  1. OpenAIの回答に、「現在の感情」に最も近い感情ワードをフォーマットにしたがって出力する
  2. フォーマットに記述された感情ワードをswitchノードの判定に利用して、感情ワードに応じた表情とモーションを実行する

この方法を採用したいと思います。

というわけで、system の文の末尾に以下を追記します。

system末尾に追記
また、回答するときは、必ず文頭に、
感情:[現在の感情]
と記載してください。
[現在の感情]の部分には、「ユニボ」の今の感情の中でどれが最もふさわしいか、
喜び、優越、恐怖、驚き、嫌悪、友好、眠い、怒り、悲嘆、
の9通りの中から必ず選択し、記述してください。
その後にユニボが話す言葉を記述してください。

・・・だいぶ強引なやり方ですが、これでOpenAIからのレスポンスの文頭に必ず「感情:[現在の感情]」のフォーマットを追記してもらうようにします。

感情ワードの2文字はユニボが表現できる上記9種類の表情に設定します。

OpenAIの回答に数値化した感情を表現する試みは色々されていますが(事例)、今回はそれを簡易的に実現してみます。

以上の文脈を追記したら、感情:〇〇 という文面がレスポンスに乗るので、あとはこのワードを抽出する機能を、OpenAIレスポンス取得部分に追加します。

先ほどのopenai返答取得のJavascriptを以下のように改変します。

openai返答取得
let answer = msg.payload.choices[0].message.content;
// 追加
let cut = answer.indexOf('感情:');
let emotion = answer.substr( cut + 3, cut + 4 );
answer = answer.substring(cut + 5);
msg.emotion = emotion;

msg.word = answer;
return msg;

OpenAIからのレスポンスについて、「感情:」の前後にスペースが入る可能性もあるので、まずはindexOfで「感情:」のワード位置を検索します。

そのあとsubstrで、「感情:」の後に続く2文字のワードをemotionとして抽出します。

「感情:〇〇」の発話はしてはいけないので、最後にsubstringで感情ワード部分は削除して、残りの部分をmsg.wordに代入して発話させます。

あとは、emotionに代入された2文字が何かをswitchノードで判定します。

感情分岐.png

switchノードの中身はこのような感じですね。

switchノード中身.png

あとは、switch分岐先に各感情ワードに応じたモーションと表情を設定して、発話させる、という流れです。
モーションと表情設定は、例えば「喜び」だとこんな感じですね、

喜び
msg.expression = "joy"
msg.motion = "WAIT 3000 \n LED LIGHTUP PURPLE \n WAIT 500 \n SERVO NECKROLL 10 10 \n SERVO ARMRIGHT -70 20 \n SERVO ARMLEFT 70 20 \n WAIT 500 \n SERVO NECKROLL -10 10 \n WAIT 500 \n SERVO NECKROLL 10 10 \n WAIT 500 \n SERVO NECKROLL 0 10 \n SERVO ARMRIGHT 0 20 \n SERVO ARMLEFT 0 20 \n END"
return msg;

ユニボのモーション設定の記述方法はマニュアルに書いてあるので、適宜設定してみてください。

今回の例では1つの感情につき1つの動作パターンを設定していますが、感情ごとに複数のモーションパターンを用意しておいて、ランダムで実行させると、より動作が多様になって面白くなるかもしれませんね。

あと、万が一想定外のフォーマットをOpenAIがレスポンスして、感情ワードが拾えなかった時のために、switchノードには「その他」(else)を設定して、無難に「友好」の表情を返すようにします。

GPT-4o GPT-4o-miniではほぼ確実にフォーマット通りに返しますが、保険でelseの設定もします。

これで、回答内容に応じた表情と動きの表現ができるようになりました。

ユーザー体験向上のための機能追加② 発話待ち機能追加

OpenAI のAPIをユニボが呼び出す時、リクエスト→レスポンスのために時間を少しだけ要します。
通信環境にも左右されそうですが、筆者が試したところGPT-4oでは大体3秒ほど待ち時間が発生しました。

ユニボに質問をしたあと、3秒だけ真顔の時間があると、ちょっと違和感があるので、その間に時間稼ぎで「うーん」みたいなことを話させる機能も入れてみます。

この機能について、これがNode-REDの最適解かどうかわからないのですが、、

flow.setを使って、ユニボが「うーん」という言葉を喋っている間はフラグをオンにしてOpenAIからのレスポンスのワード発話について待ち状態として、

「うーん」の発話が終わったら、フラグをオフにして、続いてOpenAIレスポンスの発話をさせる…という仕組みの実装をしたいと思います。

ユニボの発話実行が2つ同時に行われると、conflictが発生して片方の発話実行が無かったことにされるため、このようにして2つの発話を順番に実行させます。

というわけで、最初の「返答」ノードの後に以下のようにノードを追加します。

待ち時間稼ぎ部分のフロー.png

並行処理フラグON
flow.set('flag',1);
return msg;
並行処理フラグOFF
flow.set('flag',0);
return msg;

このflow.setは、このフロー内をスコープとする変数を設定できる関数です。

node-REDの変数のスコープについてはこちらの記事が詳しいです。

OpenAIのレスポンス待ち時間のワードはこんな感じでtalkノードを設定します。

待ちトークノード.png

talkノードのword
うーーーーん。<break time="700ms" />それはねー。<break time="1000ms" />

これで、ユニボが「うーん、それはね…」と喋っている間は flagが1となるようにします。

そして、フロー末尾のOpenAIからのレスポンスを発話させる部分を以下のように改変します。

待ちフラグ管理フロー.png

こちらのswitchノードは以下のように設定します。

待ちフラグ管理.png

switchノードにて、flagが1の間は「うーん…」発話中とみなして0.1秒に1回ループさせ、flagが0になったら、OpenAIからのレスポンスを発話させます。

これで、返答待ちの時間稼ぎ(?)ができるようになりました。

2つの機能改善を行った後の全体フローは以下の通りとなります。

フロー改善後.png

フロー改善後の動作を試す

それでは、①②の改善を行った後の動作を試してみます。


Q:ユニボが最近楽しいと感じたことを教えて?

返答内容文字起こし

僕、元気一杯だよ!最近、デモ電機科学館で子供たちと一緒に簡単なロボットを作る教室があってね。みんなと一緒に部品を集めて組み立てるのがすっごく楽しかったんだ!一回、ネジがどこかに転がっちゃって大変だったけど、みんなで探してくれて、無事に完成したよ!


Q:ユニボが最近悲しいと思ったことを教えて?

返答内容文字起こし

僕は、博士Aと離れ離れになってしまったことで、本当に寂しいんだ。でも、デモ電機科学館でみんなと過ごすことで、少しずつ元気を取り戻してるんだよ。博士にまた会える日を夢見て、がんばるんだ!

以上のように、表情と動作がついて、より**「感情を持ったロボット」**らしい?振る舞いをするようになりました!

悲しいエピソードも背景設定に基づいて語っています。

今回は短めのsystemを用意しましたが、もっと設定を盛ると、回答の幅も広がります。

まとめ:他サービスにこの考え方を応用できるといいな

今回、OpenAI APIを活用する媒体としてユニボを活用しましたが、

  • systemに感情表現のフォーマットを含めることで、擬似的な感情をAIに持たせることができる
  • APIのレスポンス待ち時間を埋める工夫をする

この考え方は、他のサービス企画立案にもなんだか役立ちそうな気がします。

いつか個人開発に取り組む際、このノウハウを少しでも活かせると面白そうだなーと思っております。

本記事ではsystemにAIの設定を盛り込むというだいぶ初歩的な活用方法を書きましたが、LangChain等の活用も少しずつ学習したいと思います。

ここまで読んでいただき、ありがとうございました。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?