Nano Banana - Gemini CLI 擴充套件

Note

本擴充套件現已支援 Nano Banana Pro (gemini-3-pro-image-preview)！（v1.0.10+）

設定 NANOBANANA_MODEL 環境變數為 gemini-3-pro-image-preview 即可使用。

Nano Banana - Gemini CLI 擴充套件

專業的 Gemini CLI 擴充套件，使用 Nano Banana 模型生成和編輯圖像。

✨ 功能特色

🎨 文字轉圖像生成：從描述性提示創建令人驚豔的圖像
✏️ 圖像編輯：使用自然語言指令修改現有圖像
🔧 圖像修復：修復和增強舊照片或損壞的照片
📁 智慧檔案管理：使用者友善的檔案名稱與自動防止重複

📋 先決條件

已安裝並設定 Gemini CLI
Node.js 20+ 和 npm
API 金鑰：設定以下其中一個環境變數：
- NANOBANANA_GEMINI_API_KEY（建議給使用 Gemini API 金鑰且通常使用「使用 Google 登入」選項進行身份驗證的使用者）
- NANOBANANA_GOOGLE_API_KEY（建議給使用 Vertex API 金鑰且通常使用「使用 Google 登入」選項進行身份驗證的使用者）
- GEMINI_API_KEY（備用）
- GOOGLE_API_KEY（備用）

有關身份驗證設定，請參閱官方 Gemini CLI 文件。

核心元件

index.ts：使用 @modelcontextprotocol/sdk 的 MCP 伺服器，提供專業的協定處理
imageGenerator.ts：處理所有 Gemini API 互動和回應處理
fileHandler.ts：管理檔案輸入輸出、智慧檔案名稱生成和檔案搜尋
types.ts：共用的 TypeScript 介面，確保類型安全

🍌 模型選擇

本擴充套件支援兩種不同的 Nano Banana 模型：

gemini-2.5-flash-image（預設）
gemini-3-pro-image-preview（Nano Banana Pro）

預設使用 gemini-2.5-flash-image 模型。

要使用新的 Gemini 3 Pro 驅動模型，請將 NANOBANANA_MODEL 環境變數設定為 gemini-3-pro-image-preview。

export NANOBANANA_MODEL=gemini-3-pro-image-preview

🚀 安裝

1. 安裝擴充套件

使用 gemini extensions install 指令安裝擴充套件：

gemini extensions install https://github.com/doggy8088/nanobanana

2. 啟用

重新啟動 Gemini CLI。以下指令將可使用：

/generate - 單一或多張圖像生成，具有風格/變化選項
/edit - 圖像編輯
/restore - 圖像修復
/icon - 生成多種尺寸的應用程式圖示、網站圖示和 UI 元素
/pattern - 生成用於背景的無縫圖案和紋理
/story - 生成講述視覺故事或流程的序列圖像
/diagram - 生成技術圖表、流程圖和架構模型
/nanobanana - 自然語言介面

💡 使用方式

本擴充套件提供多種指令選項以應對不同使用情況：

🎯 特定指令（建議）

生成圖像：

# 單一圖像
/generate "雪地森林中的狐狸水彩畫"

# 多個變化版本並預覽
/generate "山脈上的日落" --count=3 --preview

# 風格變化
/generate "山景" --styles="watercolor,oil-painting" --count=4

# 特定變化並自動預覽
/generate "咖啡店內部" --variations="lighting,mood" --preview

編輯圖像：

/edit my_photo.png "為人物添加太陽眼鏡"
/edit portrait.jpg "將背景改為海灘場景" --preview

修復圖像：

/restore old_family_photo.jpg "去除刮痕並提高清晰度"
/restore damaged_photo.png "增強色彩並修復撕裂" --preview

生成圖示：

# 多種尺寸的應用程式圖示
/icon "咖啡杯標誌" --sizes="64,128,256" --type="app-icon" --preview

# 網站圖示套組
/icon "公司標誌" --type="favicon" --sizes="16,32,64"

# UI 元素
/icon "設定齒輪圖示" --type="ui-element" --style="minimal"

建立圖案：

# 無縫圖案
/pattern "幾何三角形" --type="seamless" --style="geometric" --preview

# 背景紋理
/pattern "木紋紋理" --type="texture" --colors="mono"

# 壁紙圖案
/pattern "花卉設計" --type="wallpaper" --density="sparse"

生成故事：

# 視覺故事序列
/story "種子成長為樹" --steps=4 --type="process" --preview

# 逐步教學
/story "如何泡咖啡" --steps=6 --type="tutorial"

# 時間軸視覺化
/story "智慧型手機的演進" --steps=5 --type="timeline"

建立圖表：

# 系統流程圖
/diagram "使用者登入流程" --type="flowchart" --style="professional" --preview

# 架構圖
/diagram "微服務架構" --type="architecture" --complexity="detailed"

# 資料庫架構
/diagram "電子商務資料庫設計" --type="database" --layout="hierarchical"

🌟 自然語言指令（彈性）

開放式提示：

/nanobanana 為我的科技新創公司建立標誌
/nanobanana 我需要 5 種不同風格的貓插圖
/nanobanana 修正 sunset.jpg 的光線並使其更鮮豔

🎨 進階生成選項

/generate 指令支援進階選項，可用不同風格和參數建立多個變化版本。

生成選項

--count=N - 變化版本數量（1-8，預設：1） --styles="style1,style2" - 以逗號分隔的藝術風格 --variations="var1,var2" - 特定變化類型
--format=grid|separate - 輸出格式（預設：separate） --resolution=1K|2K|4K - 輸出圖像解析度（預設：4K） --seed=123 - 用於可重現變化的種子值 --preview - 在預設檢視器中自動開啟生成的圖像

可用風格

photorealistic - 攝影品質圖像
watercolor - 水彩畫風格
oil-painting - 油畫技法
sketch - 手繪素描風格
pixel-art - 復古像素藝術風格
anime - 動漫風格
vintage - 復古美學
modern - 現代風格
abstract - 抽象藝術風格
minimalist - 簡潔極簡設計

可用變化

lighting - 不同光線條件（戲劇性、柔和）
angle - 各種視角（俯視、特寫）
color-palette - 不同色彩方案（暖色、冷色）
composition - 不同佈局（置中、三分法）
mood - 各種情緒基調（歡樂、戲劇性）
season - 不同季節（春、冬）
time-of-day - 不同時段（日出、日落）

進階範例

風格變化：

/generate "山景" --styles="watercolor,oil-painting,sketch,photorealistic"
# 以 4 種不同藝術風格建立相同的山景

多重變化：

/generate "舒適的咖啡店" --variations="lighting,mood" --count=4
# 生成：戲劇性光線、柔和光線、歡樂氣氛、戲劇性氣氛版本

組合選項：

/generate "友善的機器人角色" --styles="anime,minimalist" --variations="color-palette"
# 建立具有不同色彩方案的動漫和極簡版本

簡單多張生成：

/generate "科技新創公司標誌" --count=6
# 生成相同提示的 6 種不同詮釋

🎯 圖示生成

/icon 指令專門用於建立應用程式圖示、網站圖示和 UI 元素，具有適當的尺寸和格式。

圖示選項

圖示範例

# 完整的應用程式圖示套組
/icon "具有檢查清單的生產力應用程式" --sizes="64,128,256,512" --corners="rounded"

# 網站圖示套件
/icon "山形標誌" --type="favicon" --sizes="16,32,64" --format="png"

# UI 元素套組
/icon "通知鈴鐺" --type="ui-element" --style="flat" --background="transparent"

🎨 圖案與紋理生成

/pattern 指令可建立適合背景和設計元素的無縫圖案和紋理。

圖案選項

圖案範例

# 網站背景圖案
/pattern "細微的幾何六邊形" --type="seamless" --colors="duotone" --density="sparse"

# 材質紋理
/pattern "拉絲金屬表面" --type="texture" --style="tech" --colors="mono"

# 裝飾壁紙
/pattern "裝飾藝術設計" --type="wallpaper" --style="geometric" --size="512x512"

📖 視覺敘事

/story 指令可生成講述視覺故事或展示逐步流程的序列圖像。

故事選項

故事範例

# 產品開發流程
/story "從想法到上市產品" --steps=5 --type="process" --style="consistent"

# 教學教程
/story "git 工作流程教學" --steps=6 --type="tutorial" --layout="comic"

# 品牌演進時間軸
/story "公司標誌演進" --steps=4 --type="timeline" --transition="smooth"

📊 技術圖表

/diagram 指令從簡單的文字描述生成專業的技術圖表、流程圖和架構模型。

圖表選項

圖表類型與使用情境

flowchart：流程、決策樹、工作流程
architecture：系統架構、微服務、基礎設施
network：網路拓撲、伺服器配置
database：資料庫架構、實體關係
wireframe：UI/UX 模型、頁面佈局
mindmap：概念圖、想法層次結構
sequence：序列圖、API 互動

圖表範例

# 開發工作流程
/diagram "包含測試階段的 CI/CD 管道" --type="flowchart" --complexity="detailed"

# 系統設計
/diagram "聊天應用程式架構" --type="architecture" --style="technical"

# API 文件
/diagram "REST API 認證流程" --type="sequence" --layout="vertical"

# 資料庫設計
/diagram "社群媒體資料庫架構" --type="database" --annotations="detailed"

📁 檔案管理

智慧檔案名稱生成

圖像會根據您的提示儲存為使用者友善的名稱：

"山脈上的日落" → sunset_over_mountains.png
"抽象藝術作品" → abstract_art_piece.png

自動防止重複

如果檔案已存在，會自動加上計數器：

sunset_over_mountains.png
sunset_over_mountains_1.png
sunset_over_mountains_2.png

檔案搜尋位置

對於編輯/修復功能，擴充套件會在以下位置搜尋輸入圖像：

當前工作目錄
./images/ 子目錄
./input/ 子目錄
./nanobanana-output/ 子目錄
~/Downloads/
~/Desktop/

輸出目錄

生成的圖像會儲存至自動建立的 ./nanobanana-output/ 目錄。

🛠️ 開發

建置指令

# 建置 MCP 伺服器
npm run build

# 安裝 MCP 伺服器相依套件
npm run install-deps

# 開發模式並監看檔案變更
npm run dev

MCP 伺服器指令

# 直接建置 MCP 伺服器
cd mcp-server && npm run build

# 獨立啟動伺服器（用於測試）
cd mcp-server && npm start

# 開發模式並監看 TypeScript
cd mcp-server && npm run dev

🔧 技術細節

MCP 伺服器協定

擴充套件使用官方的模型上下文協定（MCP）SDK 進行穩健的客戶端-伺服器通訊：

協定：透過 stdio 的 JSON-RPC
SDK：@modelcontextprotocol/sdk
工具：generate_image、edit_image、restore_image

API 整合

模型：gemini-2.5-flash-image
SDK：@google/genai
回應處理：多個備援位置用於圖像資料偵測

錯誤處理

具有除錯資訊的全面錯誤訊息
API 回應解析的優雅備援
檔案驗證和搜尋路徑報告

🐛 疑難排解

常見問題

「指令無法識別」：確保擴充套件位於 ~/.gemini/extensions/nanobanana-extension/ 且已重新啟動 Gemini CLI
「找不到 API 金鑰」：設定 GEMINI_API_KEY 環境變數：
```
export GEMINI_API_KEY="your-api-key-here"
```
「建置失敗」：確保已安裝 Node.js 18+ 並執行：
```
npm run install-deps && npm run build
```
「找不到圖像」：檢查輸入檔案是否在搜尋目錄之一（請參閱上方的檔案搜尋位置）

除錯模式

MCP 伺服器包含詳細的除錯日誌，會出現在 Gemini CLI 主控台中，協助診斷問題。

📄 法律聲明

授權：Apache License 2.0
安全性：安全政策

🤝 貢獻

Fork 此儲存庫
建立功能分支
在模組化架構中進行變更
執行 npm run build 以確保編譯成功
使用 Gemini CLI 進行測試
提交 pull request

Name		Name	Last commit message	Last commit date
Latest commit History 31 Commits
.github/workflows		.github/workflows
commands		commands
docs		docs
mcp-server		mcp-server
.gemini-extension-install.json		.gemini-extension-install.json
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
GEMINI.md		GEMINI.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
eslint.config.js		eslint.config.js
gemini-extension.json		gemini-extension.json
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

Nano Banana - Gemini CLI 擴充套件

✨ 功能特色

📋 先決條件

核心元件

🍌 模型選擇

🚀 安裝

1. 安裝擴充套件

2. 啟用

💡 使用方式

🎯 特定指令（建議）

🌟 自然語言指令（彈性）

🎨 進階生成選項

生成選項

可用風格

可用變化

進階範例

🎯 圖示生成

圖示選項

圖示範例

🎨 圖案與紋理生成

圖案選項

圖案範例

📖 視覺敘事

故事選項

故事範例

📊 技術圖表

圖表選項

圖表類型與使用情境

圖表範例

📁 檔案管理

智慧檔案名稱生成

自動防止重複

檔案搜尋位置

輸出目錄

🛠️ 開發

建置指令

MCP 伺服器指令

🔧 技術細節

MCP 伺服器協定

API 整合

錯誤處理

🐛 疑難排解

常見問題

除錯模式

📄 法律聲明

🤝 貢獻

About

Resources

License

Code of conduct

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages