Add image generation capabilities to the application

Introduce new API endpoints for synchronous and asynchronous image generation, integrate image generation options into the frontend UI, and update OpenAPI specifications.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: a662ebb5-fd71-4dd7-ad81-6f1890051700
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: efbf4b19-3deb-44d5-b4b1-00474abad1e9
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d9f57912-08a1-48b9-ad13-f36ce06579fd/a662ebb5-fd71-4dd7-ad81-6f1890051700/fWRWvD9

.replit

@@ -34,10 +34,6 @@ outputType = "webview"
 localPort = 5000
 externalPort = 80
 
-[[ports]]
-localPort = 38543
-externalPort = 3003
-
 [[ports]]
 localPort = 38887
 externalPort = 3000

app_local.py

@@ -382,6 +382,99 @@ class APIHandler(SimpleHTTPRequestHandler):
         except Exception as e:
             self.send_error(500, f"Error processing image: {str(e)}")
     
+    def handle_generate_image(self, path, query):
+        """Handle synchronous image generation."""
+        try:
+            prompt = query.get('prompt', [''])[0]
+            if not prompt:
+                self.send_error(400, "Missing 'prompt' parameter")
+                return
+            
+            width = int(query.get('width', [1024])[0])
+            height = int(query.get('height', [1024])[0])
+            width = max(256, min(1440, width))
+            height = max(256, min(1440, height))
+            async_mode = query.get('async_mode', ['false'])[0].lower() == 'true'
+            
+            if async_mode:
+                self.handle_generate_image_async(query)
+                return
+            
+            from PIL import Image
+            image_bytes = generate_image_from_hf(prompt, width, height)
+            generated_image = Image.open(io.BytesIO(image_bytes))
+            
+            file_id = str(uuid.uuid4())
+            output_path = OUTPUT_DIR / f"{file_id}_generated.png"
+            generated_image.save(output_path, "PNG")
+            
+            if "/base64" in path:
+                buffer = io.BytesIO()
+                generated_image.save(buffer, format="PNG")
+                buffer.seek(0)
+                img_base64 = base64.b64encode(buffer.getvalue()).decode("utf-8")
+                
+                self.send_json({
+                    "success": True,
+                    "image_base64": img_base64,
+                    "size": {"width": generated_image.width, "height": generated_image.height},
+                    "model": "FLUX.1-schnell",
+                    "prompt": prompt
+                })
+            else:
+                self.send_response(200)
+                self.send_header('Content-Type', 'image/png')
+                self.send_header('Content-Disposition', f'attachment; filename="generated_{file_id[:8]}.png"')
+                self.end_headers()
+                with open(output_path, 'rb') as f:
+                    self.wfile.write(f.read())
+                    
+        except Exception as e:
+            self.send_error(500, f"Error generating image: {str(e)}")
+    
+    def handle_generate_image_async(self, query):
+        """Handle async image generation with progress tracking."""
+        try:
+            prompt = query.get('prompt', [''])[0]
+            if not prompt:
+                self.send_error(400, "Missing 'prompt' parameter")
+                return
+            
+            width = int(query.get('width', [1024])[0])
+            height = int(query.get('height', [1024])[0])
+            width = max(256, min(1440, width))
+            height = max(256, min(1440, height))
+            
+            token = get_hf_token()
+            if not token:
+                self.send_error(500, "Hugging Face API token not configured. Please set HF_TOKEN secret.")
+                return
+            
+            job_id = str(uuid.uuid4())
+            file_id = str(uuid.uuid4())
+            output_path = OUTPUT_DIR / f"{file_id}_generated.png"
+            
+            jobs[job_id] = {"status": "pending", "progress": 0, "message": "Starting image generation..."}
+            
+            thread = threading.Thread(
+                target=process_generate_image_job,
+                args=(job_id, prompt, width, height, output_path)
+            )
+            thread.start()
+            
+            self.send_json({
+                "job_id": job_id,
+                "status": "processing",
+                "message": "Image generation started. Poll /progress/{job_id} for updates.",
+                "progress_url": f"/progress/{job_id}",
+                "result_url": f"/result/{job_id}",
+                "model": "FLUX.1-schnell",
+                "prompt": prompt
+            })
+            
+        except Exception as e:
+            self.send_error(500, f"Error starting image generation: {str(e)}")
+    
     def serve_html(self):
         html_path = Path("templates/index.html")
         if html_path.exists():
@@ -430,8 +523,8 @@ class APIHandler(SimpleHTTPRequestHandler):
             "openapi": "3.1.0",
             "info": {
                 "title": "AI Image Processing API",
-                "description": "Comprehensive AI-powered image processing API.\n\n**Features:**\n- Image enhancement and upscaling (Real-ESRGAN)\n- Background removal (BiRefNet)\n- Noise reduction (OpenCV NLM)\n\n**Note:** This is a preview deployment. Deploy to Hugging Face Spaces for full AI processing.",
-                "version": "2.0.0"
+                "description": "Comprehensive AI-powered image processing API.\n\n**Features:**\n- Image enhancement and upscaling (Real-ESRGAN)\n- Background removal (BiRefNet)\n- Noise reduction (OpenCV NLM)\n- Image generation from text (FLUX.1-schnell)\n\n**Note:** This is a preview deployment. Deploy to Hugging Face Spaces for full AI processing.",
+                "version": "2.2.0"
             },
             "servers": [{"url": "/", "description": "Current server"}],
             "paths": {
@@ -462,6 +555,59 @@ class APIHandler(SimpleHTTPRequestHandler):
                         "responses": {"200": {"description": "Denoised image"}}
                     }
                 },
+                "/generate-image": {
+                    "post": {
+                        "summary": "Generate image from text",
+                        "description": "Generate an image from a text prompt using FLUX.1-schnell AI model.",
+                        "parameters": [
+                            {"name": "prompt", "in": "query", "required": True, "schema": {"type": "string"}, "description": "Text prompt describing the image to generate"},
+                            {"name": "width", "in": "query", "schema": {"type": "integer", "default": 1024, "minimum": 256, "maximum": 1440}},
+                            {"name": "height", "in": "query", "schema": {"type": "integer", "default": 1024, "minimum": 256, "maximum": 1440}},
+                            {"name": "async_mode", "in": "query", "schema": {"type": "boolean", "default": False}, "description": "Use async mode with progress tracking"}
+                        ],
+                        "responses": {"200": {"description": "Generated image"}}
+                    }
+                },
+                "/generate-image/async": {
+                    "post": {
+                        "summary": "Generate image (async)",
+                        "description": "Start async image generation with progress tracking using FLUX.1-schnell.",
+                        "parameters": [
+                            {"name": "prompt", "in": "query", "required": True, "schema": {"type": "string"}, "description": "Text prompt describing the image to generate"},
+                            {"name": "width", "in": "query", "schema": {"type": "integer", "default": 1024, "minimum": 256, "maximum": 1440}},
+                            {"name": "height", "in": "query", "schema": {"type": "integer", "default": 1024, "minimum": 256, "maximum": 1440}}
+                        ],
+                        "responses": {"200": {"description": "Job ID for tracking progress"}}
+                    }
+                },
+                "/generate-image/base64": {
+                    "post": {
+                        "summary": "Generate image (base64)",
+                        "description": "Generate an image and return as base64-encoded string.",
+                        "parameters": [
+                            {"name": "prompt", "in": "query", "required": True, "schema": {"type": "string"}, "description": "Text prompt describing the image to generate"},
+                            {"name": "width", "in": "query", "schema": {"type": "integer", "default": 1024, "minimum": 256, "maximum": 1440}},
+                            {"name": "height", "in": "query", "schema": {"type": "integer", "default": 1024, "minimum": 256, "maximum": 1440}}
+                        ],
+                        "responses": {"200": {"description": "Base64 encoded image"}}
+                    }
+                },
+                "/progress/{job_id}": {
+                    "get": {
+                        "summary": "Get job progress",
+                        "description": "Get the progress of an async image processing job.",
+                        "parameters": [{"name": "job_id", "in": "path", "required": True, "schema": {"type": "string"}}],
+                        "responses": {"200": {"description": "Job progress"}}
+                    }
+                },
+                "/result/{job_id}": {
+                    "get": {
+                        "summary": "Get job result",
+                        "description": "Get the result of a completed async job.",
+                        "parameters": [{"name": "job_id", "in": "path", "required": True, "schema": {"type": "string"}}],
+                        "responses": {"200": {"description": "Processed image"}}
+                    }
+                },
                 "/health": {"get": {"summary": "Health check", "responses": {"200": {"description": "API status"}}}},
                 "/model-info": {"get": {"summary": "Model information", "responses": {"200": {"description": "Model details"}}}}
             }

templates/index.html

@@ -361,7 +361,7 @@
     <div class="container">
         <header>
             <h1>AI Image Processing</h1>
-            <p class="subtitle">Enhance, remove backgrounds, denoise, and scan documents with AI</p>
+            <p class="subtitle">Enhance, remove backgrounds, denoise, scan documents, and generate images with AI</p>
             <div class="api-link">
                 <a href="/docs" target="_blank">View API Documentation</a>
             </div>
@@ -373,6 +373,7 @@
                 <button class="feature-tab" data-feature="remove-bg">Remove Background</button>
                 <button class="feature-tab" data-feature="denoise">Denoise</button>
                 <button class="feature-tab" data-feature="docscan">Doc Scan</button>
+                <button class="feature-tab" data-feature="generate">Generate Image</button>
             </div>
             
             <div class="drop-zone" id="dropZone">
@@ -451,6 +452,40 @@
                 </p>
             </div>
             
+            <div id="generateOptions" class="feature-options">
+                <div class="options">
+                    <div class="option-group" style="flex: 2;">
+                        <label for="prompt">Image Prompt</label>
+                        <input type="text" id="prompt" placeholder="A beautiful sunset over mountains, detailed, 8k quality">
+                    </div>
+                </div>
+                <div class="options" style="margin-top: 10px;">
+                    <div class="option-group">
+                        <label for="genWidth">Width</label>
+                        <select id="genWidth">
+                            <option value="512">512px</option>
+                            <option value="768">768px</option>
+                            <option value="1024" selected>1024px</option>
+                            <option value="1280">1280px</option>
+                            <option value="1440">1440px</option>
+                        </select>
+                    </div>
+                    <div class="option-group">
+                        <label for="genHeight">Height</label>
+                        <select id="genHeight">
+                            <option value="512">512px</option>
+                            <option value="768">768px</option>
+                            <option value="1024" selected>1024px</option>
+                            <option value="1280">1280px</option>
+                            <option value="1440">1440px</option>
+                        </select>
+                    </div>
+                </div>
+                <p style="color: #888; font-size: 0.85rem; margin-top: 10px;">
+                    Generate images from text using FLUX.1-schnell by Black Forest Labs. No image upload needed.
+                </p>
+            </div>
+            
             <button class="process-btn" id="processBtn" disabled>Process Image</button>
             
             <div class="error" id="error"></div>
@@ -502,6 +537,10 @@
                     <h4>Document Scanning</h4>
                     <p>Auto-crop, align, and enhance documents with AI</p>
                 </div>
+                <div class="info-item">
+                    <h4>Image Generation</h4>
+                    <p>Generate images from text prompts using FLUX.1-schnell</p>
+                </div>
                 <div class="info-item">
                     <h4>API Access</h4>
                     <p>Full RESTful API with Swagger documentation at /docs</p>
@@ -544,12 +583,20 @@
                 
                 if (currentFeature === 'enhance') {
                     document.getElementById('enhanceOptions').classList.add('active');
+                    dropZone.style.display = 'block';
                 } else if (currentFeature === 'remove-bg') {
                     document.getElementById('removeBgOptions').classList.add('active');
+                    dropZone.style.display = 'block';
                 } else if (currentFeature === 'denoise') {
                     document.getElementById('denoiseOptions').classList.add('active');
+                    dropZone.style.display = 'block';
                 } else if (currentFeature === 'docscan') {
                     document.getElementById('docscanOptions').classList.add('active');
+                    dropZone.style.display = 'block';
+                } else if (currentFeature === 'generate') {
+                    document.getElementById('generateOptions').classList.add('active');
+                    dropZone.style.display = 'none';
+                    processBtn.disabled = false;
                 }
                 
                 updateButtonText();
@@ -565,7 +612,8 @@
                 'enhance': 'Enhance Image',
                 'remove-bg': 'Remove Background',
                 'denoise': 'Denoise Image',
-                'docscan': 'Scan Document'
+                'docscan': 'Scan Document',
+                'generate': 'Generate Image'
             };
             processBtn.textContent = texts[currentFeature] || 'Process Image';
         }
@@ -688,10 +736,22 @@
         }
         
         processBtn.addEventListener('click', async () => {
-            if (!selectedFile) return;
+            const isGenerate = currentFeature === 'generate';
+            
+            if (!isGenerate && !selectedFile) return;
+            
+            if (isGenerate) {
+                const prompt = document.getElementById('prompt').value.trim();
+                if (!prompt) {
+                    showError('Please enter a prompt to generate an image');
+                    return;
+                }
+            }
             
             const formData = new FormData();
-            formData.append('file', selectedFile);
+            if (!isGenerate) {
+                formData.append('file', selectedFile);
+            }
             
             let endpoint = '/enhance/async';
             let params = new URLSearchParams();
@@ -726,12 +786,27 @@
                 params.append('enhance_hd', enhanceHd);
                 loadingText.textContent = 'Scanning and enhancing document...';
                 resultLabel.textContent = 'Scanned Document';
+            } else if (currentFeature === 'generate') {
+                endpoint = '/generate-image/async';
+                const prompt = document.getElementById('prompt').value.trim();
+                const width = document.getElementById('genWidth').value;
+                const height = document.getElementById('genHeight').value;
+                params.append('prompt', prompt);
+                params.append('width', width);
+                params.append('height', height);
+                loadingText.textContent = 'Generating image with FLUX.1-schnell...';
+                resultLabel.textContent = 'Generated';
+                document.querySelector('.image-box:first-child').style.display = 'none';
             }
             
             if (currentFeature !== 'remove-bg') {
                 resultBox.classList.remove('checkerboard');
             }
             
+            if (currentFeature !== 'generate') {
+                document.querySelector('.image-box:first-child').style.display = 'block';
+            }
+            
             loading.classList.add('show');
             results.classList.remove('show');
             processBtn.disabled = true;
@@ -739,10 +814,15 @@
             resetProgress();
             
             try {
-                const response = await fetch(`${endpoint}?${params.toString()}`, {
-                    method: 'POST',
-                    body: formData
-                });
+                const fetchOptions = {
+                    method: 'POST'
+                };
+                
+                if (!isGenerate) {
+                    fetchOptions.body = formData;
+                }
+                
+                const response = await fetch(`${endpoint}?${params.toString()}`, fetchOptions);
                 
                 if (!response.ok) {
                     const errorData = await response.json();
@@ -773,10 +853,12 @@
                     'enhance': 'enhanced',
                     'remove-bg': 'nobg',
                     'denoise': 'denoised',
-                    'docscan': 'scanned'
+                    'docscan': 'scanned',
+                    'generate': 'generated'
                 };
                 const filename = filenames[currentFeature] || 'processed';
-                downloadBtn.download = `${filename}_${selectedFile.name.split('.')[0]}.png`;
+                const baseName = isGenerate ? 'ai_image' : selectedFile.name.split('.')[0];
+                downloadBtn.download = `${filename}_${baseName}.png`;
                 
                 loading.classList.remove('show');
                 results.classList.add('show');
@@ -786,7 +868,7 @@
                 loading.classList.remove('show');
             }
             
-            processBtn.disabled = false;
+            processBtn.disabled = currentFeature !== 'generate';
         });
         
         function showError(message) {