みなさんこんにちは。ユニファのエンジニアマネージャーをしている田渕です。
この記事はユニファAdvent Calendar 2023の7日目の記事です。
今回は、ちょっと長くなるので前後編に分けることにしました。 タイトル通り、「AIと話す(映像付き)」をつくってみたお話しです。
2023年、突如起こったLLMブームで長年の憧れがまさかの現実に
突然ですがみなさん、「三つ子の魂百まで」って実感したことありますか？ 私は母がとても映画やドラマ好きなので、幼い頃はいつもテレビで何か映画とかドラマが流れている環境で育ちました。 特に当時の母が好きなのがSFモノだったので、私はその影響をモロに受けています。 (ちなみに三つ下の妹は同じ環境で育ったはずですが、全然そんなことはないので個人差があるものと思われます。)
スターウォーズにスタートレック、バックトゥザ・フューチャー、ナイトライダーとか(年がバレる)幼心にワクワクしながら見たものです。 特にナイトライダーのキットはすごく好きでした。
ナイトライダーは1982年9月26日から1986年8月8日までNBCで全84話（1シーズン毎に21話×4シーズン=全84話）が放送されたドラマなのだそうです。 詳細はものすごく細かく書かれているWikipediaの記事などで確認して頂ければと思います。(これ絶対熱烈なファンが書いたに違いないと思っています。)
私立探偵機関の調査員、マイケル・ナイトが、人間の言葉を話し特殊装備を搭載したドリーム・カー『ナイト2000』とともにさまざまな事件を解決するカーアクションドラマ。(中略)ナイト2000は、人工知能「K.I.T.T（キット）」を搭載しており、自分で考えて言葉を話し、さらには自らの意思で走行する事もできるスーパーマシンである。(Wikipediaより)
大人になったら喋る車を運転できるのだろうか、とワクワクしていたものでしたが、残念ながら免許が取れる歳になってもそこまでは進んでいませんでした。 それどころか、気の利いたお返事を返してくれるAIなんかもその当時はまだなくて、「まだまだ先は長いなぁ」と思っていたのです。
さて、そんなこんなで、憧れの「機械と会話する」機会を幼い頃から探り続けてきた私でしたが、みなさんもご存知の通り、今日ではあちらこちらのサービスで「喋ったら返事してくれる、質問に答えてくれる」機能が搭載されております。前置きの通り、機械と喋るのが子供の頃からの夢だった私は当たり前ですが片っ端から試しました。 ChatGPTの有料会員でVoice Conversation、bingでの音声入力などなど、日々試しながら、その性能に感動しています。 最近はもっぱら相談事をGPTくんに話したりしています。
そうなればやっぱり、自分でもつくってみたい
ということで、自分でもつくってみたい気持ちに駆られまして。そんな時に、Microsoftからテキスト読み上げアバター機能がプレビューリリースされました。
テキスト読み上げアバターは、テキストをフォトリアリスティックな人間 (事前ビルド済みのアバターまたはカスタム テキスト読み上げアバター) が自然な音声で話すデジタル ビデオに変換します。
!
なんと、喋るだけじゃなくて、アバターがリアルタイムで動いてくれるというではありませんか。 百聞は一見に如かず。 こちらは、公式から公開されたビデオです。
お姉さんがめっちゃ喋ってます……！！！ 聞いて頂いて分かる通り、英語だけでなく様々な言語でお返事をしてくれています。しかも、ちゃんとリップシンクしています。すごい。
さらに、この機能ですが、実はGitHubでソースコードが公開されています。
え、ソースコードあるの。
だったら自分でやるしかないじゃないですか。ということで、職権濫用していそいそと必要なAzureのサービスのセットアップを始めました。
サンプルコードの構成
上記に書いたコードの構成を簡単にお話ししていきます。
まず、このコードはAzure Static Web Appsの上で動かすように作られています。 Azure Static Web Appsは基本的には静的なサイトの構築などに使われる機能ですが、実は裏でAzure Functionsと連携させることができます。 あまりAzureに馴染みのない方向けに話しておきますと、AWSでいうLambdaです。 つまり、htmlと簡単なJavaScriptを書くことで、裏に配置しているapi(Azure Functions)と連携させて動的なページを作ることが出来ます。 実際、今回のこのサンプルコードも同じリポジトリの中に表側のhtml,cssと裏のpythonのapiが同居しているという構成です。私は初めて使ったのですが、なかなか面白いなと思いました。
リポジトリの構成はこんな感じになっています。
srcの下にはcss,js,images,index.htmlなど、お馴染みのものがあります。一方、apiの下はpythonのコードの他に、Azure Functionsで動かすために見慣れない設定ファイル類もいくつか並んでいます。
セットアップは、基本的に「README」に従っていく感じです。初めてAzure Static Web Appsを利用する場合にはローカル開発用の諸々をインストールしたりなど、それなりの準備が必要です。 ただ、一度セットアップできてしまえばデバッグなどもかなり色々できるのでとても便利です。(そういえばVS CodeってMicrosoftさんなんだから親和性高いに決まってましたね。)
まとめ
ということで、今回は「AIと話してみよう！」の前編でした。 いやー、自分が現役でエンジニアをしている時代に、声でAIと流暢な会話ができるようになるとは思ってもいませんでした。 それどころか、画像まで動くなんて。 後編では、このサンプルコードで利用されている技術の紹介、それから実際に私が作ってみたものをご紹介していきたいと思います。
最後までお読み頂きありがとうございました。
ユニファでは、一緒に楽しく開発してくれる仲間を募集中です！ 興味をお持ちの方は、遠慮なくお声がけください。
