banana-slides 🍌
Vibe your PPT like vibing code.
Google Gemini (nano banana pro) を基盤としたネイティブAI搭載PPT生成アプリケーションで、真の「Vibe PPT」体験を目指しています。誰もが美しくプロフェッショナルなプレゼンテーションを作成する際の障壁を低くします。
GitHub: https://github.com/Anionex/banana-slides
License: MIT | Stars: 480+ | Forks: 72+
🧩 プロジェクトの背景
従来のAI PPTジェネレーターは、スピードと品質のバランスを取るのに苦労しています。一般的な問題点としては以下が挙げられます。
- 事前定義されたテンプレートのみで、柔軟なスタイル制御ができない
- 複数回の反復編集における自由度が低い
- すべてが同じように見える均質的な出力
- 低品質で汎用的な素材
- デザインセンスに欠ける、テキストと画像のレイアウトが悪い
Google Gemini (nano banana pro) の登場が状況を一変させました。その画像生成能力は、要求されたすべてのテキストコンテンツを正確にレンダリングし、参照画像のスタイルに忠実に従うことができるため、ネイティブ「Vibe PPT」アプリケーションのコアエンジンとして理想的です。
✨ 主な機能
1. 3つの作成パス
- アイデアから: 1つの文章またはラフなコンセプトを入力 → 完全なアウトライン + スライド説明 + 最終スライドを自動生成
- アウトラインから: 既存のアウトラインを貼り付け → AIがページごとの詳細な説明に拡張
- 説明から: ページごとの説明を直接提供 → スライド画像を即座に生成
2. 自然言語編集
- 個々のスライドまたはスライド内の選択領域への変更を音声で指示
- アウトラインカードのドラッグ&ドロップによる並べ替え
- アウトラインとページ説明のVibeスタイルの音声編集
3. スマート素材&テンプレートサポート
- スタイル/コンテンツの参照として、任意の参照画像、スクリーンショット、古いPPTスライドをアップロード
- ドキュメント(PDF、DOCX、MD、TXT)をアップロード — バックエンドがMinerU + マルチモーダルLLMを使用してテキストと画像を自動解析
- Markdownテキストに埋め込まれた画像リンクを自動抽出
4. 高品質スライド生成
- Gemini画像生成による: 高解像度でスタイルの一貫したスライドデザイン
- マルチページ生成を高速化する並列処理
5. エクスポートオプション
- PPTX: 標準のPowerPoint形式
- PDF: クイック共有とプレゼンテーション用
- デフォルトの16:9アスペクト比、すべての主要ディスプレイで動作
🛠️ テックスタック
フロントエンド
| 技術 | 用途 |
|---|---|
| React 18 + TypeScript | UIフレームワーク |
| Vite 5 | ビルドツール |
| Zustand | 状態管理 |
| React Router v6 | ルーティング |
| Tailwind CSS | スタイリング |
| @dnd-kit | ドラッグ&ドロップ |
| Axios | HTTPクライアント |
バックエンド
| 技術 | 用途 |
|---|---|
| Python 3.10+ / Flask 3.0 | APIサーバー |
| Google Gemini API | AI画像&テキスト生成 |
| SQLite + Flask-SQLAlchemy | データ永続化 |
| python-pptx | PPTXエクスポート |
| Pillow | 画像処理 |
| ThreadPoolExecutor | 並列スライド生成 |
| uv | Pythonパッケージ管理 |
🏗️ アーキテクチャ概要
banana-slides/
├── frontend/ # React + TypeScript SPA
│ ├── pages/ # Home, OutlineEditor, DetailEditor, SlidePreview, History
│ ├── components/ # 共有UIコンポーネント、アウトライン/プレビューウィジェット
│ ├── store/ # Zustand状態管理
│ └── api/ # Axiosクライアント + エンドポイント定義
│
├── backend/ # Flask REST API
│ ├── models/ # Project, Page, Task, Material, Template, ReferenceFile
│ ├── services/ # AIサービス (Gemini)、ファイルパーサー、エクスポート、タスクマネージャー
│ ├── controllers/ # 全リソースのルートハンドラー
│ └── utils/ # レスポンスヘルパー、バリデーター、パスユーティリティ
│
├── docker-compose.yml # ワンコマンドデプロイ
└── pyproject.toml # Pythonプロジェクト設定 (uv管理)
🚀 クイックスタート
Docker Compose (推奨)
git clone https://github.com/Anionex/banana-slides
cd banana-slides
cp .env.example .env
# .envを編集し、GOOGLE_API_KEYを追加してください
docker compose up -d
- フロントエンド: http://localhost:3000
- バックエンドAPI: http://localhost:5000
ソースから
バックエンド:
uv sync
cp .env.example .env # GOOGLE_API_KEYを設定してください
cd backend && uv run python app.py
フロントエンド:
cd frontend
npm install
npm run dev
🎯 ユースケース
- 非デザイナー: デザイン経験なしで、ゼロバリアで美しいPPTを作成
- PPTプロフェッショナル: AI生成デザインからの迅速なレイアウトインスピレーション
- 教育者: 教材をイラスト入りの授業スライドに変換
- 学生: プレゼンテーション課題を迅速に完了し、フォーマットではなくコンテンツに集中
- ビジネスプロフェッショナル: 提案書や製品ピッチの迅速な視覚化
📄 ライセンス
MIT License — 個人および商用利用は無料です。