画面の隅に、いつでも話せる「相棒」を
以前以下で紹介した、当サイトの右下でつぶやくキャラクターが、自分のデスクトップ上を歩いて会話する、AIキャラクターデスクトップアプリを開発しました。
最近GoogleのAIコードエディター「Antigravity」でいろいろ開発しています。過去に開発したものについても以下に掲載していますので、みなさんもご自身で開発してみてください。
今回のデスクトップアプリも「Antigravity」で開発しました。
なんとなく、自分専用のデスクトップ上を自由に動き回り、時には話しかけてくるAIキャラクターを作ってみたいなと思い開発開始しました。
今回は、このデスクトップAIキャラクターの開発プロジェクトについて、実装の裏側を紹介します。
プロジェクトの全体像：最新スタックでのデスクトップアプリ開発
今回のプロジェクト「デスクトップ-AIキャラクター」は、以下の技術スタックで構築されています。
- 基盤: Electron + Vite + TypeScript
- 脳（LLM）: node-llama-cpp + Qwen2.5-Coder-7B (ローカルGGUF)
- 声（TTS）: VOICEVOX Engine + msedge-tts
- 物理・演出: CSSアニメーション + 自作物理エンジン
一番のこだわりは、「すべての処理をローカル完結させること」です。
外部APIへの課金や遅延を気にせず、オフラインでも「AIキャラクター」はあなたの隣にいてくれます。
技術的な挑戦と解決策
① 「デスクトップ透過」とクリック制御の難しさ
キャラクターをデスクトップ上に自然に配置するため、Electronの透過ウィンドウ（Transparent Window）を使用しています。
課題となったのは「クリックの透過制御」です。キャラクターの画像がある部分だけクリックを有効にし、それ以外の透明な部分は後ろにあるウィンドウ（ブラウザやコードエディタなど）が操作できるように、setIgnoreMouseEventsをミリ秒単位で制御。
「キャラクターを掴んで動かせるのに、作業の邪魔にならない」という絶妙な操作感を実現しました。
② ローカルLLMによる「命」の吹き込み
知能部分には、node-llama-cppを採用。
「Qwen2.5-Coder-7B」というモデルを量子化して動かすことで、Macだけでなく、一般的なWindowsデスクトップでも非常に高速な応答が可能になりました。
最初はもっと動作を軽量にしたくて、軽いモデルを使っていましたが、生成されるセリフが不自然だったため、少し高性能なモデルに変更しました。
あと、PowerShell経由で「今ユーザーがアクティブにしているウィンドウのタイトル」を取得して、その内容を話す機能を実装したかったのですが、自然な会話が実現できず要件から除外しました。
③ VOICEVOCによる豊かな表情と表現
音声にはVOICEVOXを採用し、音声は「雨晴はう」の明るい声を選択しました。
喜怒哀楽に合わせて、アニメーションフレームも動的に切り替わります。
ユーザーがキャラクターをクリックすると驚いたり、しばらく暇にしていると「しりとり」を始めたりと、「人間味」を随所に散りばめました。
開発で苦労したポイント
以下でも投稿しましたが、開発中にGoogle側のAIモデル利用制限の基準が変わったようで、Gemini3.1 ProやClaude4.6 Opusといった、高性能モデルが制限で利用できなくなった点です。
仕方なくGemini3 Flashに切替ましたが、やはり性能面で厳しく、詳細に指示してフォローすることで何とか完成までこじつけました。
あと、ローカルLLMでの会話生成はなかなか正しい日本語が生成されず、思ったよりも苦戦しました。ゲーム「Arc Raiders」でAI音声を人間の俳優に差し替えるというニュースが最近ありましたが、やはりAIでセリフを自動生成するのは、意図しない動作などが制御できないということかもしれません。
まとめ：今後の展望
現在は一人のキャラクターのみですが、二人のキャラクターが画面上で会話をする機能や、実装が難しそうですが、ユーザーの行動からリアクションしたりするのも面白そう。
あなたの画面にも、小さな「知能」を居座らせてみてはいかがでしょうか？
