khalatevarun · Copilot · Sep 17, 2025 · Sep 17, 2025
diff --git a/GEMINI_IMAGE_API.md 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.
diff --git 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
@@ -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 <ImageEditor onBack={() => setCurrentView('deploy')} />;
+  }
+
   return (
     <div style={{ 
-      maxWidth: 600, 
-      margin: '40px auto', 
-      padding: 32, 
-      border: '1px solid #eee', 
-      borderRadius: 12, 
-      fontFamily: 'system-ui, -apple-system, sans-serif',
-      boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+      minHeight: '100vh',
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      padding: '40px 20px',
+      fontFamily: 'system-ui, -apple-system, sans-serif'
     }}>
-      <h1 style={{ margin: '0 0 16px 0', color: '#ffffff', fontWeight: 700, fontSize: '32px' }}>Instant App Deployment</h1>
-
-      <p style={{ 
-        color: '#e1e1e1', 
-        lineHeight: '1.5', 
-        fontSize: '16px',
-        margin: '0 0 24px 0' 
+      <div style={{ 
+        maxWidth: 600, 
+        margin: '0 auto', 
+        padding: 32, 
+        background: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: 16, 
+        boxShadow: '0 8px 32px rgba(0,0,0,0.1)'
       }}>
-        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.
-      </p>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+          <h1 style={{ margin: 0, color: '#1f2937', fontWeight: 700, fontSize: '32px' }}>Base Platform</h1>
+          <button
+            onClick={() => setCurrentView('imageEdit')}
+            style={{
+              background: '#8b5cf6',
+              color: 'white',
+              border: 'none',
+              padding: '8px 16px',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: 500
+            }}
+          >
+            🎨 AI Image Editor
+          </button>
+        </div>
+
+        <div style={{ marginBottom: '32px' }}>
+          <h2 style={{ margin: '0 0 16px 0', color: '#1f2937', fontWeight: 600, fontSize: '24px' }}>
+            Instant App Deployment
+          </h2>
+          <p style={{ 
+            color: '#6b7280', 
+            lineHeight: '1.5', 
+            fontSize: '16px',
+            margin: '0 0 24px 0' 
+          }}>
+            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.
+          </p>
+        </div>
 
       <div style={{ marginBottom: 24 }}>
         <input
@@ -118,10 +151,11 @@ function App() {
         <div style={{ 
           marginTop: 24,
           padding: 16,
-          backgroundColor: '#f7f7f7',
-          borderRadius: 6 
+          backgroundColor: '#f3f4f6',
+          borderRadius: 8,
+          border: '1px solid #e5e7eb'
         }}>
-          <div style={{ marginBottom: deployedUrl ? 12 : 0 }}>
+          <div style={{ marginBottom: deployedUrl ? 12 : 0, color: '#374151' }}>
             Status: <b>{status}</b>
           </div>
           {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() {
           )}
         </div>
       )}
+      </div>
     </div>
   );
 }