この記事では、アプリを作成し、ダウンロードしてローカルで実行する方法をご紹介します。
無料のGoogleアカウントを使用しています。クレジットカード登録していません。
さらに、Google以外のサーバーで静的ファイルをアップロードする形で公開することを目的にします。
なので今回作るアプリは以下の機能は対象としていません。
・バックエンドを使用するアプリ。
・Googleの有料APIを使用するアプリ（APIキーが必要になるため）
Windows11を使用しています。
Node.jsがパソコンにインストールされている必要があります。
完成アプリでは、口を開いた画像と閉じた画像を用意し、音声をアップロードするとリップシンクします。デフォルトで画像と音声をアップロードしてあるので再生ボタンを押してみてください。
「素材準備」の章も参照してください。
完成したアプリ：https://yamaichige.shop/ai_lipsync_animater/
Google AI Studioについては、こちらを参照してください。
材料の用意の仕方はこちらで紹介します。また、作ったリップシンク画像を録画してYoutubeで使う方法です。↓↓↓↓
こちらは別のアプローチでリップシンクを作りました。
Google AI StudioのBuild apps with Geminiの使い方
Google AI Studioの左メニューのBuildをクリック
⚙詳細設定はデフォルトのまま、System instructions templateはReact（Typescript）になっています。
あとは、プロンプトで指示するだけです。
試したこと
Reactで完成するとむずかしくなりそうなので以下のプロンプトでお願いしました。
・html、Javascript、cssでアプリを作って。
・アップロードした画像のlipsyncのアプリを作りたい。
結果：
html、Javascript、cssの件は何もふれずReactで作られた。
画像、音声のアップロードのUIが作られ、実行すると画像の口の部分が単純な図形で動いてるだけだった。しかも位置も全然違う。
そこで新たに指示：
・lipsyncはnanobananaで元の画像から口の形が違う画像を何枚か用意し、音に合わせて切り替えて話しているようにしてほしい。
結果：元の画像とnanobananaで作った4枚の口の形が違う画像を切り替えるだけだった。
最終的な指示：
AIが生成した最初の口パク画像が4枚1組になっているからこの現象が起きていると思います。元画像と同じサイズで、口だけ変化している画像を1枚作り切り替えればうまくいくと思います。
結果：リップシンクが正しく動作する形で完成しました。
ローカルで実行するためにアプリ内からAIを使わないようにした。
Google AI StudioのBuild apps with Geminiで公開しないで個人だけで使っている分には、APIキーは必要ない。
しかしローカルで動かす場合、nanobananaをAPIで使用するためにAPIキーが必要になる。
ちなみに低級のモデルだったら無料で使えるGemini APIキー（gemini flash1.5）はある。
しかし、画像生成系、ましてやnanobananaのAPIが無料で使えるわけもない。
Gemini APIキー（gemini flash1.5）については以下参照。
ということでnanobanana部分は、手動で操作して口の閉じた画像を用意することにして全面的にアプリを変えるように指示した。
プロンプト：
画像生成している部分は、手動で画像生成を依頼して完成した画像をアップロードする形にしてください。
その際、依頼するプロンプトは何と書けばいいでしょう。
結果：
はい、承知いたしました。
アプリケーションのAIによる画像生成機能を、ユーザーが手動で作成した画像をアップロードする形に変更します。それに伴い、UIもより分かりやすく更新しました。
画像生成AIにどのような指示（プロンプト）を出せば良いかについては、以下の通りです。現在広く使われている画像生成AI（Midjourney, Stable Diffusion, DALL-E 3など）で良い結果を得るための一般的なプロンプト例です。（次項）
素材準備
こちらのYoutubehttps://www.youtube.com/watch?v=EBQJKs2-VaEで実際にやっている様子が見れます。
- 口を閉じた元画像は同じGoogle AI Studioのimagen4で作成できます。Aspect ratioは1:1。
- 画像加工はnanobananaを使います。（nanobananaはアップロードした画像を指示に従って加工してくれます。アップロードするときサイズを半分にしたほうがいいかもしれません。）
画像生成AIへのプロンプト例：
元の画像をベースに、口の形だけを母音の「あー(Aahh)」を発声しているように自然に大きく開けてください。背景、髪型、目、服装など、口以外のすべての要素は元の画像と完全に同一に保ってください。 - さらに、音声は同じくGoogle AI StudioのGemini speech generationでテキストを音声に変換できます。
ローカルで実行
完成したアプリをzipファイルでダウンロードします。
プロジェクトフォルダを作成し、その中に解凍します
mkdir my-lip-sync-app
cd my-lip-sync-appWindows11の場合ファイルを右クリック→「すべてを展開」で展開先をmy-lip-sync-appにして展開します。
Node.jsがインストールされていること。（npxコマンドを使用するために必要です）
npm install
で依存関係をインストール
node_modulesフォルダとpackage-lock.jsonが作成されている。
🧩 npm installとは？
npm install は アプリを動かすために必要な追加の部品（ライブラリ）をまとめてインストールするコマンドです。package.json に記載されたライブラリ（例：React, Expressなど）を node_modules フォルダに展開します。
npm run dev
でhttp://localhost:5173にアクセスするとアプリが動きます。サーバーにアップロード
サーバーにアップロードするためにビルドが必要です。（ビルドとは、ソースコードを実行可能な形に変換する作業のことです。）
後で実行するnpm run build（ビルド）を行うと
distディレクトリの下にファイルが完成します。
出来上がったファイルとディレクトリをアップロードします。
その際、サーバーにディレクトリ（例：ai_lipsync_animater）を作って、
そこにdistディレクトリの中身をアップロードする場合。
以下のようにbaseのURLを設定しておかないとindex.htmlにはai_lipsync_animaterが存在していることを知らないコードが書かれているため、ルート直下のディレクトリやファイルにアクセスするようになってしまいます。
例：
ｈttps://yamaichige.shop/ai_lipsync_animater/ここの下にあるディレクトリやファイルにアクセスしてほしいのに
ｈttps://yamaichige.shop/の下にアクセスしてしまいます。
（最初にアクセスされるindex.htmlは大丈夫だが、index.htmlに書かれてある内容の場所にアクセスしに行くときに問題が起こります。）
対策：例：ai_lipsync_animaterの場合。
1. Vite設定の更新
vite.config.tsにbase: '/ai_lipsync_animater/'を追加
import path from 'path';
import { defineConfig, loadEnv } from 'vite';
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, '.', '');
return {
base: '/ai_lipsync_animater/',
以下省略
これにより、すべてのアセットが/ai_lipsync_animater/をベースパスとして使用
2. ファイルパスの更新
App.tsx内のfetchパスを絶対パスから相対パスに変更
例：/setumei/から./setumei/に変更
const [neutralResponse, openMouthResponse, audioResponse] = await Promise.all([
fetch('./setumei/maiko1to1.jpg'),
fetch('./setumei/maiko1to1open.jpeg'),
fetch('./setumei/setumei.mp3')
]);
相対パスを使用することで、ベースパス設定と連動
ビルド
npm run build
その結果distディレクトリにアップロードに必要なディレクトリとファイルが作成されます。
dist/フォルダ全体をWebサーバーにアップロード
（distの下にあるものをアップロード）アップロード先は、以下のような静的ファイルがアップロードできるサーバー。
Youtubeでリップシンク画像を利用しました
アプリで作ったものを録画しYoutubeで使いました。
使用するツールと手順
Google AI Studio
1. imagen – 元画像作成
2. nanobanana – 元画像の口だけ修正した画像作成
3. text to generate – テキストから音声を作成
4.自作アプリ – 上記3つを合成
5.Xbox Game Bar – 録画
6.Clipchamp – 動画作成+背景透明化
imagenでできた画像は1024×1024なので、ペイントで半分の512×512にしたほうがいいかもしれません。私は、そうしてます。
所感
Google AI StudioのBuild apps with Geminiは無料で使えていいが、アプリを公開しようとすると無料では厳しくなる。
高機能のアプリが簡単に作れるが、共有やデプロイして、どのくらいお金が、かかるのかは調べたほうがいいと思った。特に、APIキーが、どう利用されているか把握しないと思ったよりかかるかも。
Reactは初めてさわったが、Reactで何か作りたくなったら、ここを利用するのも便利だと思った。
この記事を書いたイチゲを応援する（質問でもokです）
Vプリカでのお支払いがおすすめです。
