4deed84ba0
- Complete working image generation app using Imagen 3 - PHP backend with Gemini API integration - Dark themed UI with prompt enhancement - Session management and logging system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>
244 lines
6.3 KiB
Markdown
244 lines
6.3 KiB
Markdown
# Nano Banana Pro Image Generator
|
|
|
|
A sleek HTML/PHP web application for generating and iteratively editing images using Google's Nano Banana Pro (Gemini 3 Pro Image Preview) API.
|
|
|
|
## Features
|
|
|
|
- **Text-to-Image Generation**: Create images from text descriptions
|
|
- **Iterative Editing**: Refine images with natural language prompts like "make it red", "add sunset", "remove background"
|
|
- **Multiple Resolutions**: Support for 1K, 2K, and 4K image generation
|
|
- **Multiple Aspect Ratios**: 16:9, 1:1, 9:16, 4:3, 3:4, and more
|
|
- **Conversation History**: Track all your prompts and edits
|
|
- **Quick Edit Buttons**: Pre-configured editing shortcuts
|
|
- **Modern UI**: Clean black and gold design with Montserrat font
|
|
|
|
## Requirements
|
|
|
|
- PHP 7.4 or higher
|
|
- cURL extension enabled
|
|
- Google Gemini API key with billing enabled
|
|
|
|
## Installation
|
|
|
|
### 1. Get Your API Key
|
|
|
|
1. Visit [Google AI Studio](https://aistudio.google.com/app/apikey)
|
|
2. Create a new API key
|
|
3. **Important**: Enable billing on your Google Cloud account (Nano Banana Pro requires paid access)
|
|
|
|
### 2. Configure the Application
|
|
|
|
1. Open `config.php`
|
|
2. Add your API key:
|
|
|
|
```php
|
|
define('GEMINI_API_KEY', 'YOUR_API_KEY_HERE');
|
|
```
|
|
|
|
### 3. Set Up Your Web Server
|
|
|
|
#### Option A: PHP Built-in Server (Development)
|
|
|
|
```bash
|
|
php -S localhost:8000
|
|
```
|
|
|
|
Then visit: `http://localhost:8000`
|
|
|
|
#### Option B: Apache/NGINX (Production)
|
|
|
|
1. Point your web server document root to this directory
|
|
2. Ensure PHP is properly configured
|
|
3. Make sure session support is enabled
|
|
|
|
### 4. Configure Permissions
|
|
|
|
Ensure PHP can write session files:
|
|
|
|
```bash
|
|
chmod 755 /path/to/NANO-RESEARCH
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Creating Your First Image
|
|
|
|
1. Open the application in your browser
|
|
2. Enter a detailed prompt in the text area (e.g., "A photorealistic sunset over mountains with dramatic clouds")
|
|
3. Choose your preferred aspect ratio and resolution
|
|
4. Click "Generate Image"
|
|
5. Wait 10-30 seconds for the image to generate
|
|
|
|
### Iterative Editing
|
|
|
|
Once you have an image:
|
|
|
|
1. Enter edit instructions like:
|
|
- "Make the sky more orange"
|
|
- "Add a lake in the foreground"
|
|
- "Remove the clouds"
|
|
- "Make it look like a painting"
|
|
2. Click "Edit Image"
|
|
3. The AI will modify your existing image based on the instructions
|
|
|
|
### Quick Edit Buttons
|
|
|
|
Use the pre-configured buttons for common edits:
|
|
- **Add Lighting**: Enhance dramatic lighting
|
|
- **Add Sunset**: Add sunset background
|
|
- **More Vibrant**: Increase color saturation
|
|
- **Motion Blur**: Add movement effect
|
|
- **Photorealistic**: Enhance realism
|
|
- **Depth of Field**: Add bokeh effect
|
|
|
|
### Starting Over
|
|
|
|
Click "Start New Image" to clear your current image and conversation history.
|
|
|
|
## API Pricing
|
|
|
|
**Nano Banana Pro Pricing** (as of 2025):
|
|
- 1K/2K images: ~$0.13 per image
|
|
- 4K images: ~$0.24 per image
|
|
|
|
**Alternative Providers** (20-50% cheaper):
|
|
- [Kie.ai](https://kie.ai/nano-banana-pro): $0.12 per 1K-2K image
|
|
- [fal.ai](https://fal.ai/models/fal-ai/nano-banana-pro): Competitive pricing
|
|
- CometAPI: Various pricing tiers
|
|
|
|
To use alternative providers, modify the `$baseUrl` in `api.php`.
|
|
|
|
## File Structure
|
|
|
|
```
|
|
NANO-RESEARCH/
|
|
├── index.php # Main application interface
|
|
├── api.php # Backend API handler
|
|
├── config.php # Configuration file (add your API key here)
|
|
├── config.example.php # Configuration template
|
|
└── README.md # This file
|
|
```
|
|
|
|
## Troubleshooting
|
|
|
|
### "API key not configured" Error
|
|
|
|
- Make sure you've added your API key to `config.php`
|
|
- Check that the API key is between the quotes: `define('GEMINI_API_KEY', 'your-key-here');`
|
|
|
|
### "API error: 403" or "Permission denied"
|
|
|
|
- Ensure billing is enabled on your Google Cloud account
|
|
- Nano Banana Pro requires a paid Google Cloud account (no free tier)
|
|
|
|
### "Connection timeout" Error
|
|
|
|
- Image generation can take 10-60 seconds
|
|
- For 4K images, it may take longer
|
|
- Check your internet connection
|
|
|
|
### Images Not Displaying
|
|
|
|
- Check browser console for errors
|
|
- Ensure PHP sessions are working (`session_start()` errors)
|
|
- Verify file permissions
|
|
|
|
### "cURL error" Messages
|
|
|
|
- Ensure PHP cURL extension is installed and enabled
|
|
- Check: `php -m | grep curl`
|
|
- Install if missing: `sudo apt-get install php-curl` (Ubuntu/Debian)
|
|
|
|
## Security Notes
|
|
|
|
1. **Never commit `config.php` to version control** - it contains your API key
|
|
2. The API key should be kept secret
|
|
3. Consider adding rate limiting for production use
|
|
4. Add `.htaccess` or nginx rules to prevent direct access to `config.php`
|
|
|
|
### Recommended .htaccess
|
|
|
|
```apache
|
|
<Files "config.php">
|
|
Require all denied
|
|
</Files>
|
|
```
|
|
|
|
## Tips for Best Results
|
|
|
|
### Writing Good Prompts
|
|
|
|
- Be specific and descriptive
|
|
- Include style (e.g., "photorealistic", "oil painting", "digital art")
|
|
- Mention lighting (e.g., "golden hour", "studio lighting")
|
|
- Specify composition (e.g., "close-up", "wide angle")
|
|
|
|
**Good Example:**
|
|
```
|
|
A photorealistic close-up of a red sports car on a coastal highway
|
|
at sunset, with dramatic golden lighting and motion blur on the wheels
|
|
```
|
|
|
|
**Poor Example:**
|
|
```
|
|
car
|
|
```
|
|
|
|
### Iterative Editing Tips
|
|
|
|
- Make one change at a time for better control
|
|
- Use clear, specific instructions
|
|
- Reference existing elements (e.g., "make the car in the image red")
|
|
- Build up changes gradually
|
|
|
|
## Advanced Configuration
|
|
|
|
### Changing the Model
|
|
|
|
To use Nano Banana (faster, cheaper) instead of Nano Banana Pro:
|
|
|
|
Edit `api.php`:
|
|
```php
|
|
private $model = 'gemini-2.5-flash-image'; // Instead of gemini-3-pro-image-preview
|
|
```
|
|
|
|
### Using Alternative API Providers
|
|
|
|
To use Kie.ai or fal.ai:
|
|
|
|
Edit `api.php`:
|
|
```php
|
|
// For Kie.ai
|
|
private $baseUrl = 'https://api.kie.ai/v1/models';
|
|
|
|
// For fal.ai
|
|
private $baseUrl = 'https://queue.fal.run';
|
|
```
|
|
|
|
Refer to their respective documentation for authentication details.
|
|
|
|
### Increasing Timeout
|
|
|
|
For slower connections or 4K images, increase timeout in `api.php`:
|
|
|
|
```php
|
|
CURLOPT_TIMEOUT => 180 // 3 minutes instead of 2
|
|
```
|
|
|
|
## License
|
|
|
|
This project is open source. Use it however you want.
|
|
|
|
## Support
|
|
|
|
For issues with:
|
|
- **This application**: Check troubleshooting section above
|
|
- **Nano Banana Pro API**: Visit [Google AI Documentation](https://ai.google.dev/gemini-api/docs/image-generation)
|
|
- **Billing**: Contact Google Cloud support
|
|
|
|
## Credits
|
|
|
|
Built with:
|
|
- Google Nano Banana Pro (Gemini 3 Pro Image Preview)
|
|
- PHP & cURL
|
|
- Montserrat font by Google Fonts
|