香蕉投影片 🍌

讓您的 PPT 充滿活力，如同程式碼充滿活力。

一個原生 AI 驅動的 PPT 生成應用程式，建構在 Google Gemini (nano banana pro) 之上，目標是成為真正的「Vibe PPT」體驗。它降低了每個人創建精美、專業簡報的門檻。

GitHub: https://github.com/Anionex/banana-slides
授權: MIT | 收藏數: 480+ | 分支數: 72+

🧩 專案背景

傳統的 AI PPT 生成器在速度和品質之間難以取得平衡。常見問題包括：

僅提供預設模板 — 無彈性的風格控制
多輪迭代編輯的自由度低
輸出同質化，看起來都一樣
低品質、通用的素材
文字與圖像佈局不佳，缺乏設計感

Google Gemini (nano banana pro) 的出現改變了這個局面。其圖像生成能力可以準確渲染所有要求的文字內容，同時忠實遵循參考圖像的風格 — 這使其成為原生「Vibe PPT」應用程式的核心引擎的理想選擇。

✨ 主要功能

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/         # 首頁, 大綱編輯器, 詳細編輯器, 投影片預覽, 歷史記錄
│   ├── components/    # 共用 UI 組件, 大綱/預覽小工具
│   ├── store/         # Zustand 狀態管理
│   └── api/           # Axios 客戶端 + 端點定義
│
├── backend/           # Flask REST API
│   ├── models/        # 專案, 頁面, 任務, 素材, 模板, 參考文件
│   ├── 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 授權 — 個人和商業用途均免費。