はじめに
本記事はNTTテクノクロス Advent Calendar 2024のシリーズ2 16日目の記事です。
こんにちは。NTTテクノクロスの上原です。
11月のある晴れた日の会話
- (同僚): 上原さん(この記事の著者)、「副チャット」って知ってます?
- (上原): あれですよね。当社のセミナーなどで、聴障害者のために、ボランティアが文字起こしを補助するチャットチャンネルですよね。
- (同僚): まさにそれです。で、現在の副チャットは、専用のUIがあるわけではないので、元の文字起こしと合わせて読みとるのがたいへんなんですよ。生成AIでなんとかならないかなあ…
弊社には、上記のような取り組みがあり、大きなセミナーのリアルタイム配信などでは、有志の方々が聴覚障害を持った方の聴取をサポートするために、自動文字起こしを補足するための支援をしています。合理的配慮としてだけではなく、社員全員が活躍できるために、障壁をより少なくするために日々工夫を継続しているのです。
🤔何が問題?
- 会議アプリのリアルタイムの文字起こし機能は有用だが、一定の誤認識は避けられず、聴覚障害をもった参加者から見ると、発言を正しく理解しているという自信がなくなり、おのずと発言や質問などの意欲が押しとどめられてしまう
- 副チャットは上記を改善するためにチャットでの手作業として文字起こしの訂正を都度行っていくものであるが、見る側からすると、副チャットとその元になったトランスクリプトと、さらに元の配信動画の3つを見なければならず、また副チャットの訂正は時間的に前後するため、「どこが修正されたか」を探すのに負担がかかる。
- 結果として、会議に参加している意義すらをも見失いかねない。
最近は、生成AIをつかってわかりやすく会議を事後に要約してくれるものが出てきていますが、ここではあくまでリアルタイムの参加体験としての没入感を得るための正確性が求められています。
生成AIでやったれや!
ということで、それを補うシステムをPoCしてみたよ、というのが本記事です。
CollaRecoとは
CollaRecoは協調型音声認識ツールです。現在PoC段階です。
画面はこちらです。
しくみは以下のようになっています。
- ① ChromeブラウザでNext.jsのReact WebアプリであるCollaRecoクライアントを実行し、Chrome内蔵のWeb Speech Recognition APIを使って文字起こしを開始する。
- ② 認識された発話テキストをCollaRecoサーバに送信する。テキストは「文字起こし領域」に追記される。送信された文字列は、LLMにプロンプトとともに送られる。
- LLMは、プロンプトの指示によってフィラー(「あー」とか「えーと」などのつなぎ言葉)を削除したり、文章としてわかりやすいように変換する。
- ③ ドキュメント同時編集共有ライブラリであるYjsの「共有編集領域」にLLMが変換した文を投入する。
- ④ ボランティア参加者は、適宜、Yjsの共有編集機能で編集を行う。
- ⑤ 聴覚障害を持つ参加者は、AIと人が校正した結果をYjs共有編集領域で読むことができる。
- ⑥ 聴覚障害者の能力を阻害する障壁を低くして、チームや組織の本来の能力を解放し、進化と成長を❗❗
デモ
CollaRecoのPoC版をVercelにデモモードで配備しており、以下で試すことができます。動作保証はありません。利用者の責任でご利用ください。
デモで生成AIによる校正を行うにはOepnAIのAPIキーを利用者が準備して入力する必要があります。使用されるLLMモデルはOpenAIのGPT-4o-miniです。デモモードではLLMの呼び出しはクライアントが直接OpenAIに対して行い、APIキーがサーバを経由することはありませんが、心配なかたはソースコードを確認して問題がないと判断し納得された場合のみご利用ください。
なお、「クライアント側からのLLM呼び出し」のチェックをしなければ、LLMを使わずに発話をSpeech Recognition APIで認識した結果を直接共有編集領域に転記しますので、LLMなしで試すこともできます。
音声認識した内容は他の利用者からも共有され閲覧や編集が可能です。また音声認識を実行しっぱなしだと延々と音声が公開され続けることになるので注意下さい。
APIキーを設定する場合、音声認識・文字起こしを中はLLMを連続使用することになりますので、料金が発生することを注意してください。
解説
CollaRecoは、音声認識結果をリアルタイムでLLM（大規模言語モデル）を使用して読みやすくテキスト化し、さらに認識されたテキストのWebを通じた同時編集機能により、健聴者と協調する形で認識誤りをリアルタイムで訂正する機能を提供します。
CollaRecoの目標は以下です。
- オンラインのセミナーや動画配信で、文字起こしの失敗、認識ミスを、人間と生成AIが協調してリアルタイムに訂正し共有していくことで、聴覚障害者を含む聴講者がより優れた参加体験と理解をイベントで得ることができるようにする
- オフラインの打合せを含む会議やセミナーで音声をマイクで認識させつつ、参加者同士で文字起こしを確認訂正することで、聴覚障害者の理解を深め、その会議にリアルタイムで実際に参加することの密度と意義を高める
いずれにせよ、リアルタイム性を重視していて、後日に生成された、正確な文字起こしや要約を読んで「後で理解する」ことは主眼としていません。
RollaRecは音声が主軸になりがちな会議やセミナーを、本来あるべき形に、つまり障害者を含めてより包摂的に実施できるようにするためのツールです。本来不要な制約をAIとの協力により取りのぞき、チームメンバや組織の本来の能力を発揮できるようにすることを目指しています。
技術選定について
本開発では、PoCとしての最高速度を達成するとともに、そのまま本開発に繋げられることを想定した以下の技術スタックを選定しました。
- T3 Stack(Create T3 App)
- Next.js (Next15 App Router)
- Prisma ORM
- libSQL
- tRPC
- (trpc-to-openapi)
- Takstack Query
- Zod
- TalwindCSS
- @tailwindcss/typography
- daisyUI
- LangChain.js
- TipTap/ProseMirror/Yjs
- Jotai
利用技術についてちょっと解説
■ T3 Stack
自分が@ITにも記事を連載しているフルTypeScirptのフルスタックフレーワークです。
フロントエンジニアがバックエンドまで一気通巻で開発するための必然性に充ちたものです。今回の中心的な技術ということになるでしょう。一時期trpc-openaiの開発が止まってREST勢にとっては残念なことになっていましたが、最近trpc-to-openapiが後継となったことでTypeScriptによる静的型のフルサポートとOpenAPI(Swagger)で文書化できるREST API呼び出しの両方を実現できます。
■ LangChain.js
LangChainは言わずとしれたPythonの生成AIを利用するためのライブラリですが、そのJavaScript版であるLangChain.jsを採用しました。今回は単にOpenAIとAzure OpenAI (AOAI)の切り替えが楽なので使っているにすぎませんが、将来行うかもしれない機能拡張においては充分すぎるほどの機能を持っています。LCELは怖くないぜ!
■ Tiptap/ProseMirror/Yjs
YjsはWebSocketなどを通じての分散・リアルタイム共同編集を可能にするライブラリです。衝突のない同時編集を可能にするためにCRDTという優れたアルゴリズムを採用しています。これにより、複数のユーザーが同時に文書やデータを編集する際に、その変更がリアルタイムで他のユーザーに反映されます。HackMDやGoogle Docsのような共同編集機能のコアとなるライブラリです。
ProseMirrorはYjsをバックエンドに持つことができる、カスタマイズ性の高いリッチテキストエディットライブラリです。
TiptapはさらにProseMirrorをwrapした、使いやすいインターフェースであると理解しています。便利すぎるほど便利なものです。
CollaReco(PoC)のインストール方法
こちらを参照ください。
気づいたこと
- 健聴者の自分、ぼ〜っとセミナーを聞いているとき、CollaRecoのリアルタイム文字起こしがあると戻って読みなおせて便利 😄
- 同じセミナーでも話者によって認識率が全然ちがう
- 音響機器の違い
- おそらくマイクの品質でまったく違う。
- 人間が聞きとる場合、前後での補完をものすごくやっている
- 話しかたの違い
- ゲーム実況を趣味でやっている者 ← ものすごく認識率がたかい
- 適宜「間をおく」ことで認識率は向上する
- 自分の発話が相手にどう聴こえているか?これは聴覚障害者への配慮や文字起こしのためではなく、健聴者向けも含めて言葉を届けようとするすべての人への配慮となる
- 録音などで確認してみよう
- Chromeのキャプション機能で認識精度をリアルタイムで確認できる
- 録音などで確認してみよう
- 音響機器の違い
- AI校正の効果は
- 整って読みやすくなるが、意味の補完や訂正はあまりできない。
- RAGや動的プロンプト追加、発話区切り工夫、文脈を与える等で改善?
今後の展開
- 方式の検討。Realtime APIはいったんコストの問題で断念したが、将来的には値段も下るだろうし、同様の条件であらためて比較してみたい。Realtime APIは、文字起こしとLLMとしての処理を同時に行なうことができるので、遅延を最小限にすることができると思われる。
- 出たばかりのGemini 2.0 のマルチモーダルライブAPIは試す価値が多分にありそう。今のところ英語認識のみらしいので日本語対応したら試す。
- アプリとしての最低限の機能充足を行う。認証とセッション管理、ログの保存など。
まとめ
最後まで読んでいたたき、ありがとうございました。
本件は、プログラマとしてなかなかのやりがいを感じております。
本PoCは将来なんらかの形で世の中に出せるようにして行きたいと思います。
感想などいただけるとありがたいです。
明日は @oharn さんです。
引き続きNTTテクノクロス Advent Calendar 2024をお楽しみに!
おまけ
いままでに書いてきたAdvent Calendarの記事を記録として列挙しておきます。
- 2023 Refine(Refine.dev)を半年開発で使ってみてわかったこと
- 2022 流行り始めたtRPCでAPI通信を型にはめて開発しよう
- 2021 React Queryを状態管理ライブラリとして使い倒そう！/useQStateのススメ
- 2020 ReactでAirtableのAPPS(アプリ)を作ろう!!
- 2019 React-SpringのHooks APIでブラウザアニメーションを基本から極めよう!
- 2018 Reactベース静的サイトジェネレータGatsbyの真の力をお見せします
あと宣伝ですが、@ITで今回も使ったT3 Stackの連載を去年から年越しで行っています。興味あればどうぞ!!