AI解説動画制作スタジオ — 場面ごとに素材・キャラクター・セリフを配置し、AivisSpeech による読み上げと合わせて解説動画(WebM)を作成するブラウザアプリです。一般向けの操作方法は USER_GUIDE.md、詳しい操作と環境設定は GUIDE.md、仕様は SPEC.md を参照してください。
| サービス | 用途 | 既定の接続先 |
|---|---|---|
| AivisSpeech Engine | キャラクターのセリフ読み上げ(TTS) | http://127.0.0.1:10101 |
| OpenAI互換 LLM サーバー(llama.cpp / LM Studio 等) | AI台本生成 | http://127.0.0.1:3001/v1 |
どちらも未起動でもアプリ自体は動作します(該当機能のみ無効/エラー表示)。LLM の接続先・APIキー・モデルは .env.local で変更できます(見本: .env.local.example)。
AI台本生成の既定LLMは、このリポジトリに同梱した llm-server/(llama_cpp パッケージを直接使う最小限のAPIサーバー)で Gemma 4 E4B を動かす想定です。汎用の llama_cpp.server コマンドではなく、このプロジェクト専用のスクリプトを使います。
# 1) 依存関係のインストール(llama-cpp-python 0.3.34以降が必要。Gemma4対応のgemma4チャットフォーマットを含む)
pip install -r llm-server/requirements.txt
# 2) モデルを手動で事前ダウンロードする(このスクリプトはモデルを一切自動ダウンロードしない)
hf download unsloth/gemma-4-E4B-it-qat-GGUF \
gemma-4-E4B-it-qat-UD-Q4_K_XL.gguf --local-dir ./models
# 3) APIサーバーを起動する(既定でLLM_BASE_URLに合わせてポート3001で待ち受ける)
python llm-server/serve.pyモデルは unsloth/gemma-4-E4B-it-qat-GGUF リポジトリの gemma-4-E4B-it-qat-UD-Q4_K_XL.gguf(約4.22GB)を使用します。素の Q4_K_M ではなく、QAT(量子化考慮学習)チェックポイント+Unsloth Dynamic量子化(UD)を採用したもので、同程度以下のサイズで素の Q4_K_M より精度が高く、CPU実行時の実用速度・回答品質のバランスが良いためです。
ローカルサーバーを使わず、OpenAIなど外部のAPIサービスを使うこともできます。.env.local で LLM_BASE_URL/LLM_API_KEY/LLM_MODEL を設定するか、アプリ内の「AI台本生成」タブ→「外部LLMを使う」から接続先URL・APIキー・モデル名をその場で指定できます(サーバー再起動不要、ブラウザのlocalStorageにのみ保存)。
Next.js開発サーバーとLLMサーバーを別々のターミナルで手動起動した場合、両者は無関係な別プロセスになります。 片方を強制終了してももう片方(特に4GB超のモデルを抱えるLLMサーバー)は生き残り、孤児プロセスとして残ってしまいます。これを避けたい場合は、両方をまとめて起動する scripts/dev-with-llm.sh を使ってください:
./scripts/dev-with-llm.shこのスクリプトはNext.js開発サーバーとLLMサーバーをまとめて起動し、どちらかが(kill -9 のような強制終了も含めて)終了したら、もう片方も確実に道連れで停止します(LLMサーバー側に、監視対象プロセスの生死をポーリングするウォッチドッグを内蔵しているため、シグナルを捕捉できない強制終了にも対応します。生死判定は psutil を使ってOS問わず(Windows含む)動作します)。
Windowsではbashスクリプトの代わりに、同等のPowerShell版を使ってください:
.\scripts\dev-with-llm.ps1このリポジトリのみを単独で動かす場合(LLMサーバーを使わない、または別途起動する場合):
npm install # 初回のみ
npm run devブラウザで http://localhost:3000 を開きます。
作業内容はブラウザの IndexedDB に自動保存され、次回起動時に復元されます(ヘッダーの「プロジェクト管理」から複数プロジェクトの切替・ファイル書き出しが可能)。
http://<このPCのIP>:3000 でアクセスできますが、Next.js の開発サーバーは既定で別オリジンからのアクセスをブロックします。アクセス元のIPを next.config.ts の allowedDevOrigins に追加し、devサーバーを再起動してください:
const nextConfig: NextConfig = {
allowedDevOrigins: ["192.168.100.5"], // アクセス元のIPを追記
};AivisSpeech・LLM への接続はいずれもアプリサーバー経由(/api/tts/*・/api/generate-script)のため、別端末のブラウザからでもTTS・AI台本生成は動作します(エンジン類はアプリを動かしているPC上で起動しておけばOK)。
開発環境(Node.js・Python・git)を用意せず、Windows PCでそのまま使いたい場合向けに、ポータブル版Node.js・組み込み版Python・LLMモデル本体(Gemma 4 E4B、約4.2GB)を1つにまとめたインストーラを作成できます。利用者はインストーラを実行するだけで、Node.js/Python/gitのインストールもモデルのダウンロードも不要です(AivisSpeech Engineのみ別途インストールが必要です)。
- 生成物一式の組み立ては packaging/windows/build.sh、最終的な
.exeへのコンパイルは packaging/windows/installer.iss(Inno Setup)で行います。 - 必ずWindows環境(実機またはGitHub Actionsの
windows-latestランナー)でビルドしてください。npm run buildはビルドを実行したOS向けにネイティブ依存(Next.js同梱のsharp等)を解決するため、Linux/macOS上でビルドしたものをそのまま配布するとWindows上で正しく動作しません。 - 手元でビルドせず自動ビルドしたい場合は、GitHub Actionsの Build Windows Installer ワークフロー(
workflow_dispatchで手動実行)を使うと、windows-latestランナー上でモデルのダウンロードからインストーラのコンパイルまで自動的に行われ、AITalkStudio-Setup.exeが成果物としてダウンロードできます。 - インストール後は、作成されたショートカットから起動できます。実体は packaging/windows/start.bat(start.ps1 経由)で、同梱のLLMサーバーとアプリ本体をまとめて起動し、ブラウザを自動で開きます。アプリ本体を終了するとLLMサーバーも道連れで停止します(
scripts/dev-with-llm.ps1と同じウォッチドッグ方式)。
This is a Next.js project bootstrapped with create-next-app.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.