# 🍌 NanoBanana PRO

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

![Obsidian Plugin](https://img.shields.io/badge/Obsidian-Plugin-7C3AED?logo=obsidian&logoColor=white)
![License](https://img.shields.io/badge/License-MIT-green)
![Version](https://img.shields.io/badge/Version-1.0.21-blue)

## ✨ 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](https://community.obsidian.md):

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](https://github.com/TfTHacker/obsidian42-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](https://github.com/reallygood83/nanobanana-pro-obsidian/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:

| Provider | Required | Purpose |
|----------|----------|---------|
| Google | ✅ Yes | Image generation (always required) |
| OpenAI | Optional | Prompt generation |
| Anthropic | Optional | Prompt generation |
| xAI | Optional | Prompt generation |

**Get your API keys:**
- [Google AI Studio](https://aistudio.google.com/apikey)
- [OpenAI Platform](https://platform.openai.com/api-keys)
- [Anthropic Console](https://console.anthropic.com/settings/keys)
- [xAI Console](https://console.x.ai/)

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.

| Service | Host | When it is used |
|---------|------|-----------------|
| Google Gemini | `generativelanguage.googleapis.com` | Prompt generation (if Google is selected) and all image generation |
| OpenAI | `api.openai.com` | Prompt generation, only if you select OpenAI |
| Anthropic | `api.anthropic.com` | Prompt generation, only if you select Anthropic |
| xAI | `api.x.ai` | Prompt generation, only if you select xAI |

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

### Settings

| Setting | Default | Description |
|---------|---------|-------------|
| AI Provider | Google | Provider for prompt generation |
| Prompt Model | gemini-2.0-flash-exp | Model for generating image prompts |
| Image Model | gemini-2.0-flash-exp | Model for generating images |
| Image Style | Infographic | Visual style preset |
| Show Preview | ✅ Enabled | Preview prompt before generation |
| Show Progress | ✅ Enabled | Show progress modal |
| Attachment Folder | 999-Attachments | Where to save images |
| Auto-Retry Count | 2 | Retry on transient failures |

## 📖 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

| Command | Description |
|---------|-------------|
| Generate Knowledge Poster | Full generation process |
| Generate Prompt Only | Generate and copy prompt to clipboard |
| Regenerate Last Poster | Retry last generation with same prompt |

### Keyboard Shortcuts

You can assign custom hotkeys in Settings → Hotkeys:
- Search for "NanoBanana" to find all commands

## 🎨 Image Styles

| Style | Description | Best For |
|-------|-------------|----------|
| 📊 Infographic | Charts, icons, visual hierarchy | Data-driven content |
| 🎨 Poster | Bold typography, strong imagery | Announcements, summaries |
| 📐 Diagram | Technical, clear connections | System architecture |
| 🧠 Mind Map | Central concept with branches | Brainstorming, concepts |
| 📅 Timeline | Progression and milestones | Historical, processes |
| 🎬 Cartoon | Comic strip with sequential panels | Stories, tutorials, step-by-step |

## ❓ 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

```bash
# 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](LICENSE) file for details.

## 🙏 Acknowledgments

- [Obsidian](https://obsidian.md/) for the amazing platform
- [Google Gemini](https://ai.google.dev/) for image generation capabilities
- All the amazing AI providers making this possible

---

## 👨‍💻 Developer

[![X (Twitter)](https://img.shields.io/badge/X-@reallygood83-000000?style=flat&logo=x&logoColor=white)](https://x.com/reallygood83)
[![YouTube](https://img.shields.io/badge/YouTube-배움의달인-FF0000?style=flat&logo=youtube&logoColor=white)](https://www.youtube.com/@%EB%B0%B0%EC%9B%80%EC%9D%98%EB%8B%AC%EC%9D%B8-p5v)

---

Made with 🍌 by NanoBanana PRO