diff --git a/GEMINI_IMAGE_API.md b/GEMINI_IMAGE_API.md new file mode 100644 index 0000000..b88050f --- /dev/null +++ b/GEMINI_IMAGE_API.md @@ -0,0 +1,217 @@ +# Gemini API Image Editing Endpoints + +This document describes the new image editing functionality integrated with Google's Gemini AI API. + +## Overview + +The Base platform now includes AI-powered image analysis and editing guidance using Google's Gemini API. While Gemini doesn't directly edit images, it provides detailed analysis and professional editing instructions. + +## API Endpoints + +### 1. Image Analysis + +**Endpoint:** `POST /image/analyze` + +**Description:** Analyzes an uploaded image using Gemini AI to provide detailed insights about the image content, composition, and characteristics. + +**Request:** +```http +POST /image/analyze +Content-Type: multipart/form-data + +image: [image file] (jpg, jpeg, png, gif, webp) +``` + +**Response:** +```json +{ + "success": true, + "analysis": "Detailed analysis of the image content...", + "filename": "example.jpg", + "size": 1024000 +} +``` + +**Example Usage:** +```bash +curl -X POST \ + -F "image=@/path/to/your/image.jpg" \ + http://localhost:3000/image/analyze +``` + +### 2. Image Edit Instructions + +**Endpoint:** `POST /image/edit` + +**Description:** Provides detailed editing instructions based on user requirements and image analysis using Gemini AI. + +**Request:** +```http +POST /image/edit +Content-Type: multipart/form-data + +image: [image file] (jpg, jpeg, png, gif, webp) +instruction: "Description of desired edits" +``` + +**Response:** +```json +{ + "success": true, + "description": "Detailed editing instructions and recommendations...", + "editedImageUrl": null +} +``` + +**Example Usage:** +```bash +curl -X POST \ + -F "image=@/path/to/your/image.jpg" \ + -F "instruction=Make the sky more dramatic and add warm lighting" \ + http://localhost:3000/image/edit +``` + +## Configuration + +### Environment Variables + +Create a `.env` file in the `uploadService` directory with the following variables: + +```env +# Cloudflare R2 Configuration (existing) +ACCOUNT_ENDPOINT=your_cloudflare_r2_endpoint +ACCOUNT_ACCESS_ID=your_access_key_id +ACCOUNT_SECRET_KEY=your_secret_access_key + +# Google Gemini API Configuration (new) +GEMINI_API_KEY=your_gemini_api_key_here +``` + +### Getting a Gemini API Key + +1. Go to [Google AI Studio](https://makersuite.google.com/app/apikey) +2. Sign in with your Google account +3. Create a new API key +4. Copy the API key to your `.env` file + +## Frontend Integration + +The platform now includes a dedicated Image Editor interface accessible from the main dashboard: + +- **Image Upload:** Drag and drop or select image files (up to 10MB) +- **Image Analysis:** Get detailed AI analysis of your images +- **Edit Instructions:** Receive professional editing guidance based on your requirements +- **Intuitive UI:** Clean, modern interface with real-time previews + +## File Upload Limits + +- **Maximum file size:** 10MB +- **Supported formats:** JPG, JPEG, PNG, GIF, WebP +- **Storage:** Files are processed in memory and not permanently stored + +## Error Handling + +All endpoints include comprehensive error handling: + +```json +{ + "error": "Error message", + "details": "Detailed error information" +} +``` + +Common errors: +- Missing image file (400) +- Unsupported file format (400) +- File too large (400) +- Invalid Gemini API key (500) +- API rate limits exceeded (500) + +## Technical Implementation + +### Key Components + +1. **Gemini AI Integration** (`src/utils/gemini.ts`) + - Image analysis using Gemini 1.5 Flash model + - Professional editing instruction generation + - Error handling and API communication + +2. **Multer File Upload** + - Memory storage for temporary processing + - File type validation + - Size limits enforcement + +3. **Frontend Image Editor** (`src/ImageEditor.tsx`) + - React component with file upload + - Tabbed interface for analysis vs. editing + - Real-time image preview + +### Dependencies Added + +```json +{ + "@google/generative-ai": "^0.24.1", + "multer": "^2.0.2", + "@types/multer": "^2.0.0" +} +``` + +## Usage Examples + +### 1. Analyze a Portrait Photo +```javascript +const formData = new FormData(); +formData.append('image', imageFile); + +fetch('/image/analyze', { + method: 'POST', + body: formData +}) +.then(response => response.json()) +.then(data => console.log(data.analysis)); +``` + +### 2. Get Editing Instructions +```javascript +const formData = new FormData(); +formData.append('image', imageFile); +formData.append('instruction', 'Make this look more professional for LinkedIn'); + +fetch('/image/edit', { + method: 'POST', + body: formData +}) +.then(response => response.json()) +.then(data => console.log(data.description)); +``` + +## Future Enhancements + +- Integration with actual image editing APIs (like Adobe Photoshop API) +- Batch processing capabilities +- Image generation using Gemini +- Advanced editing features and filters +- Integration with cloud storage for processed images + +## Development + +### Running the Service + +```bash +# Development mode +cd uploadService +npm run dev + +# Production mode +npm run build +npm start +``` + +### Testing the Frontend + +```bash +cd frontend +npm run dev +``` + +The image editor will be available at the main application URL with a dedicated "AI Image Editor" button. \ No newline at end of file diff --git a/README.MD b/README.MD index 89dc950..07f28f1 100644 --- a/README.MD +++ b/README.MD @@ -5,6 +5,20 @@ While I have been hearing that frontend engineering is dead in the AI era, I sti Here is the log of my learnings and the architecture I am building. +## 🎨 New Feature: AI Image Editing with Gemini API + +Base now includes integrated AI-powered image analysis and editing guidance using Google's Gemini API. See [GEMINI_IMAGE_API.md](./GEMINI_IMAGE_API.md) for detailed documentation. + +**Key Features:** +- **Image Analysis:** Get detailed AI insights about your images +- **Edit Instructions:** Receive professional editing guidance based on your requirements +- **Modern UI:** Clean, intuitive interface with real-time previews +- **Multiple Formats:** Support for JPG, PNG, GIF, WebP (up to 10MB) + +**API Endpoints:** +- `POST /image/analyze` - Analyze image content and composition +- `POST /image/edit` - Get detailed editing instructions based on user requirements + # Overview We can break the whole process into 5 steps diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1a4b656..b1a51d0 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; import './App.css'; +import { ImageEditor } from './ImageEditor'; const API_URL = 'http://localhost:3000'; // Change if needed @@ -9,6 +10,7 @@ function App() { const [status, setStatus] = useState(''); const [loading, setLoading] = useState(false); const [deployedUrl, setDeployedUrl] = useState(''); + const [currentView, setCurrentView] = useState<'deploy' | 'imageEdit'>('deploy'); const handleDeploy = async () => { setLoading(true); @@ -56,28 +58,59 @@ function App() { } }; + if (currentView === 'imageEdit') { + return setCurrentView('deploy')} />; + } + return (
-

Instant App Deployment

- -

- Deploy your React applications instantly from GitHub. Simply paste your repository URL below - and we'll handle the build and deployment process for you. Your app will be live in minutes - with its own unique URL. -

+
+

Base Platform

+ +
+ +
+

+ Instant App Deployment +

+

+ Deploy your React applications instantly from GitHub. Simply paste your repository URL below + and we'll handle the build and deployment process for you. Your app will be live in minutes + with its own unique URL. +

+
-
+
Status: {status}
{deployedUrl && ( @@ -131,7 +165,7 @@ function App() { target="_blank" rel="noopener noreferrer" style={{ - color: '#0070f3', + color: '#3b82f6', textDecoration: 'none', fontWeight: 500 }} @@ -142,6 +176,7 @@ function App() { )}
)} +
); } diff --git a/frontend/src/ImageEditor.tsx b/frontend/src/ImageEditor.tsx new file mode 100644 index 0000000..97f7345 --- /dev/null +++ b/frontend/src/ImageEditor.tsx @@ -0,0 +1,280 @@ +import { useState } from 'react'; + +const API_URL = 'http://localhost:3000'; + +interface ImageEditProps { + onBack: () => void; +} + +export function ImageEditor({ onBack }: ImageEditProps) { + const [selectedFile, setSelectedFile] = useState(null); + const [instruction, setInstruction] = useState(''); + const [loading, setLoading] = useState(false); + const [result, setResult] = useState(null); + const [previewUrl, setPreviewUrl] = useState(''); + const [activeTab, setActiveTab] = useState<'analyze' | 'edit'>('analyze'); + + const handleFileSelect = (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + setSelectedFile(file); + setPreviewUrl(URL.createObjectURL(file)); + setResult(null); + } + }; + + const handleAnalyze = async () => { + if (!selectedFile) return; + + setLoading(true); + setResult(null); + + const formData = new FormData(); + formData.append('image', selectedFile); + + try { + const res = await fetch(`${API_URL}/image/analyze`, { + method: 'POST', + body: formData, + }); + const data = await res.json(); + setResult(data); + } catch (err) { + setResult({ error: 'Failed to analyze image' }); + } finally { + setLoading(false); + } + }; + + const handleEdit = async () => { + if (!selectedFile || !instruction.trim()) return; + + setLoading(true); + setResult(null); + + const formData = new FormData(); + formData.append('image', selectedFile); + formData.append('instruction', instruction); + + try { + const res = await fetch(`${API_URL}/image/edit`, { + method: 'POST', + body: formData, + }); + const data = await res.json(); + setResult(data); + } catch (err) { + setResult({ error: 'Failed to process edit request' }); + } finally { + setLoading(false); + } + }; + + return ( +
+
+
+ +

+ AI Image Editor with Gemini +

+
+ +
+ +
+ + {previewUrl && ( +
+ Preview +
+ )} + +
+
+ + +
+ + {activeTab === 'analyze' && ( +
+

+ Analyze your image using Google's Gemini AI to understand its content and composition. +

+ +
+ )} + + {activeTab === 'edit' && ( +
+