NanoBanana PRO

🍌 NanoBanana PRO

Generate knowledge posters (infographics) from your Obsidian notes using AI

✨ Features

• 🎨 AI-Powered Infographic Generation: Transform your notes into beautiful visual posters
• 🤖 Multiple AI Providers: Choose from OpenAI, Google Gemini, Anthropic Claude, or xAI Grok
• 📝 Prompt Preview & Edit: Review and customize the generated prompt before creating images
• 📊 6 Visual Styles: Infographic, Poster, Diagram, Mind Map, Timeline, Cartoon (Comic Strip)
• 🔄 Auto-Retry: Automatic retry on transient failures with exponential backoff
• 📈 Progress Tracking: Real-time progress modal with step-by-step feedback
• 🌙 Dark Mode Support: Fully compatible with Obsidian's dark theme

📸 Screenshots

Progress Modal

┌─────────────────────────────────────────┐
│  🎨 Knowledge Poster 생성 중...          │
│                                         │
│  ████████████░░░░░░░░ 60%              │
│                                         │
│  ✅ 1. 노트 분석 완료                    │
│  ✅ 2. 프롬프트 생성 완료                 │
│  🔄 3. 이미지 생성 중...                 │
│  ⏳ 4. 파일 저장 대기                    │
└─────────────────────────────────────────┘

Prompt Preview

┌─────────────────────────────────────────┐
│  📝 프롬프트 미리보기                     │
│                                         │
│  🤖 모델: gemini-2.0-flash-exp          │
│  📊 스타일: Infographic                  │
│                                         │
│  [이미지 생성] [다시 생성] [취소]          │
└─────────────────────────────────────────┘

🚀 Installation

Community plugins (recommended)

Once the plugin is listed in the Obsidian Community directory:

1. Open Settings → Community plugins
2. Turn off Restricted mode if it is enabled
3. Select Browse and search for NanoBanana PRO
4. Install and enable the plugin
5. Add a Google API key in the plugin settings

Via BRAT

1. Install the BRAT plugin
2. Open BRAT settings
3. Click Add Beta Plugin
4. Enter: reallygood83/nanobanana-pro-obsidian
5. Enable the plugin

Manual installation

1. Download the latest release from Releases
2. Extract main.js, manifest.json, and styles.css to your vault's .obsidian/plugins/nanobanana-pro/ folder
3. Reload Obsidian
4. Enable the plugin in Settings → Community plugins

⚙️ Configuration

API Keys

You'll need at least a Google API Key for image generation. Optionally configure other providers for prompt generation:

Get your API keys:

• Google AI Studio
• OpenAI Platform
• Anthropic Console
• xAI Console

This plugin is free. Image and prompt generation use the API keys you provide, and those providers may charge usage fees.

Network use

This plugin sends the active note's content to the AI providers you configure, so it can generate a prompt and an image. Nothing is sent to the plugin author.

API keys are stored locally in your Obsidian plugin data and are sent only to the matching provider.

Settings

📖 Usage

Generate Knowledge Poster

1. Open a note with content
2. Use Command Palette (Cmd/Ctrl + P)
3. Search for "Generate Knowledge Poster"
4. (Optional) Edit the prompt in preview modal
5. Wait for generation to complete
6. Image will be embedded at the top of your note

Commands

Keyboard Shortcuts

You can assign custom hotkeys in Settings → Hotkeys:

• Search for "NanoBanana" to find all commands

🎨 Image Styles

❓ Troubleshooting

"API key is not configured"

→ Go to Settings → NanoBanana PRO and add your API key

"Rate limit exceeded"

→ Wait a few minutes and try again. Consider upgrading your API plan.

"Content was blocked by safety filters"

→ Modify your note content or try a different style

Image generation fails repeatedly

→ Try regenerating with a different style, or edit the prompt in preview mode

No image in response

→ The model may not support image generation. Try gemini-2.0-flash-exp or similar.

🛠️ Development

Build from source

# Clone the repository
git clone https://github.com/reallygood83/nanobanana-pro-obsidian.git
cd nanobanana-pro-obsidian

# Install dependencies
npm install

# Build for production
npm run build

# Development mode (watch)
npm run dev

Project Structure

.
├── src/
│   ├── main.ts              # Plugin entry point
│   ├── types.ts             # TypeScript interfaces
│   ├── settings.ts          # Settings tab UI
│   ├── settingsData.ts      # Default settings
│   ├── progressModal.ts     # Progress modal UI
│   ├── previewModal.ts      # Prompt preview modal
│   └── services/
│       ├── promptService.ts # AI prompt generation
│       ├── imageService.ts  # Image generation
│       └── fileService.ts   # File operations
├── manifest.json
├── package.json
├── styles.css
└── README.md

📝 Changelog

v1.0.21

• Prepare the plugin for the Obsidian Community directory
• Mask API keys in settings
• Disclose network use and third-party AI providers
• Use Vault.process when embedding generated images

v1.0.0

• Initial release
• Support for 4 AI providers (OpenAI, Google, Anthropic, xAI)
• 5 image styles
• Progress modal with step tracking
• Prompt preview and edit
• Auto-retry with exponential backoff
• Korean and English UI support

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Obsidian for the amazing platform
• Google Gemini for image generation capabilities
• All the amazing AI providers making this possible

---

👨‍💻 Developer

---

Made with 🍌 by NanoBanana PRO