Add Flask image generation app

app.py

@@ -1,154 +1,110 @@
-import gradio as gr
-import numpy as np
-import random
-
-# import spaces #[uncomment to use ZeroGPU]
-from diffusers import DiffusionPipeline
+from flask import Flask, render_template, request, jsonify
+import os
 import torch
+from diffusers import StableDiffusionPipeline
+from PIL import Image
+import re
+import time
+
+app = Flask(__name__)
+
+# Define paths
+MODEL_PATH = "Roshan1162003/fine_tuned_model"  # Replace with your HF model repository ID
+STATIC_IMAGES_PATH = os.path.join("static", "images")
+os.makedirs(STATIC_IMAGES_PATH, exist_ok=True)
+
+# Restricted terms for prompt filtering
+RESTRICTED_TERMS = [
+    "crime", "abuse", "violence", "illegal", "explicit", "nsfw",
+    "offensive", "hate", "nude", "porn", "gore", "drug"
+]
 
-device = "cuda" if torch.cuda.is_available() else "cpu"
-model_repo_id = "stabilityai/sdxl-turbo"  # Replace to the model you would like to use
-
+# Load the fine-tuned model
+pipe = None
 if torch.cuda.is_available():
-    torch_dtype = torch.float16
+    pipe = StableDiffusionPipeline.from_pretrained(
+        MODEL_PATH,
+        torch_dtype=torch.float16,
+        use_safetensors=True,
+        use_auth_token=os.getenv("HF_TOKEN")  # Use HF_TOKEN from environment
+    ).to("cuda")
 else:
-    torch_dtype = torch.float32
-
-pipe = DiffusionPipeline.from_pretrained(model_repo_id, torch_dtype=torch_dtype)
-pipe = pipe.to(device)
-
-MAX_SEED = np.iinfo(np.int32).max
-MAX_IMAGE_SIZE = 1024
-
-
-# @spaces.GPU #[uncomment to use ZeroGPU]
-def infer(
-    prompt,
-    negative_prompt,
-    seed,
-    randomize_seed,
-    width,
-    height,
-    guidance_scale,
-    num_inference_steps,
-    progress=gr.Progress(track_tqdm=True),
-):
-    if randomize_seed:
-        seed = random.randint(0, MAX_SEED)
-
-    generator = torch.Generator().manual_seed(seed)
-
-    image = pipe(
-        prompt=prompt,
-        negative_prompt=negative_prompt,
-        guidance_scale=guidance_scale,
-        num_inference_steps=num_inference_steps,
-        width=width,
-        height=height,
-        generator=generator,
-    ).images[0]
-
-    return image, seed
-
-
-examples = [
-    "Astronaut in a jungle, cold color palette, muted colors, detailed, 8k",
-    "An astronaut riding a green horse",
-    "A delicious ceviche cheesecake slice",
-]
+    pipe = StableDiffusionPipeline.from_pretrained(
+        MODEL_PATH,
+        torch_dtype=torch.float32,
+        use_safetensors=True,
+        use_auth_token=os.getenv("HF_TOKEN")
+    )
+print("Model loaded successfully")
 
-css = """
-#col-container {
-    margin: 0 auto;
-    max-width: 640px;
+# Aspect ratio to resolution mapping
+ASPECT_RATIOS = {
+    "1:1": (512, 512),
+    "4:3": (512, 384),
+    "16:9": (512, 288)
 }
-"""
-
-with gr.Blocks(css=css) as demo:
-    with gr.Column(elem_id="col-container"):
-        gr.Markdown(" # Text-to-Image Gradio Template")
-
-        with gr.Row():
-            prompt = gr.Text(
-                label="Prompt",
-                show_label=False,
-                max_lines=1,
-                placeholder="Enter your prompt",
-                container=False,
-            )
-
-            run_button = gr.Button("Run", scale=0, variant="primary")
-
-        result = gr.Image(label="Result", show_label=False)
-
-        with gr.Accordion("Advanced Settings", open=False):
-            negative_prompt = gr.Text(
-                label="Negative prompt",
-                max_lines=1,
-                placeholder="Enter a negative prompt",
-                visible=False,
-            )
-
-            seed = gr.Slider(
-                label="Seed",
-                minimum=0,
-                maximum=MAX_SEED,
-                step=1,
-                value=0,
-            )
 
-            randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
-
-            with gr.Row():
-                width = gr.Slider(
-                    label="Width",
-                    minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
-                    step=32,
-                    value=1024,  # Replace with defaults that work for your model
-                )
-
-                height = gr.Slider(
-                    label="Height",
-                    minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
-                    step=32,
-                    value=1024,  # Replace with defaults that work for your model
-                )
-
-            with gr.Row():
-                guidance_scale = gr.Slider(
-                    label="Guidance scale",
-                    minimum=0.0,
-                    maximum=10.0,
-                    step=0.1,
-                    value=0.0,  # Replace with defaults that work for your model
-                )
-
-                num_inference_steps = gr.Slider(
-                    label="Number of inference steps",
-                    minimum=1,
-                    maximum=50,
-                    step=1,
-                    value=2,  # Replace with defaults that work for your model
-                )
-
-        gr.Examples(examples=examples, inputs=[prompt])
-    gr.on(
-        triggers=[run_button.click, prompt.submit],
-        fn=infer,
-        inputs=[
-            prompt,
-            negative_prompt,
-            seed,
-            randomize_seed,
-            width,
-            height,
-            guidance_scale,
-            num_inference_steps,
-        ],
-        outputs=[result, seed],
-    )
+def is_prompt_safe(prompt):
+    """Check if prompt contains restricted terms."""
+    prompt_lower = prompt.lower()
+    for term in RESTRICTED_TERMS:
+        if re.search(r'\b' + re.escape(term) + r'\b', prompt_lower):
+            return False
+    return True
+
+@app.route("/", methods=["GET"])
+def index():
+    return render_template("index.html")
+
+@app.route("/generate", methods=["POST"])
+def generate():
+    try:
+        # Get form data
+        prompt = request.form.get("prompt", "").strip()
+        num_images = int(request.form.get("num_images", 1))
+        aspect_ratio = request.form.get("aspect_ratio", "1:1")
+        model_name = request.form.get("model", "stable_diffusion")
+
+        # Validate inputs
+        if not prompt:
+            return jsonify({"error": "Prompt is required"}), 400
+        if model_name != "stable_diffusion":
+            return jsonify({"error": "Selected model is locked"}), 400
+        if num_images < 1 or num_images > 5:
+            return jsonify({"error": "Number of images must be between 1 and 5"}), 400
+        if aspect_ratio not in ASPECT_RATIOS:
+            return jsonify({"error": "Invalid aspect ratio"}), 400
+
+        # Check for restricted terms
+        if not is_prompt_safe(prompt):
+            return jsonify({
+                "error": "You are violating the regulation policy terms and conditions due to restricted terms in the prompt."
+            }), 400
+
+        # Get resolution for aspect ratio
+        width, height = ASPECT_RATIOS[aspect_ratio]
+
+        # Generate images
+        image_paths = []
+        for i in range(num_images):
+            image = pipe(
+                prompt,
+                width=width,
+                height=height,
+                num_inference_steps=50,
+                guidance_scale=7.5,
+                seed=42 + i
+            ).images[0]
+            # Save image
+            timestamp = int(time.time() * 1000)
+            image_path = os.path.join(STATIC_IMAGES_PATH, f"generated_{timestamp}_{i}.png")
+            image.save(image_path)
+            image_paths.append(image_path.replace("static/", ""))
+
+        return jsonify({"images": image_paths})
+
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
 
 if __name__ == "__main__":
-    demo.launch()
+    app.run(host="0.0.0.0", port=7860, debug=False)

requirements.txt

@@ -1,6 +1,7 @@
-accelerate
-diffusers
-invisible_watermark
-torch
-transformers
-xformers
+flask==3.0.3
+torch==2.3.0
+diffusers==0.34.0
+transformers==4.52.0
+accelerate==0.33.0
+safetensors==0.4.5
+pillow==10.4.0

templates/index.html

@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Image Studio - Professional Text-to-Image Generator</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tango, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+            line-height: 1.6;
+        }
+
+        .main-container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        /* Header */
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            color: white;
+        }
+
+        .header h1 {
+            font-size: 3rem;
+            font-weight: 300;
+            margin-bottom: 10px;
+            letter-spacing: -1px;
+        }
+
+        .header .subtitle {
+            font-size: 1.2rem;
+            opacity: 0.9;
+            font-weight: 300;
+        }
+
+        /* Main Content Grid */
+        .content-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            align-items: start;
+        }
+
+        /* Control Panel */
+        .control-panel {
+            background: white;
+            border-radius: 16px;
+            padding: 32px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(10px);
+        }
+
+        .panel-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #2d3748;
+            margin-bottom: 24px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .form-group {
+            margin-bottom: 24px;
+        }
+
+        .form-label {
+            display: block;
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: #4a5568;
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .form-input, .form-select, .form-textarea {
+            width: 100%;
+            padding: 14px 16px;
+            border: 2px solid #e2e8f0;
+            border-radius: 12px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: #f8fafc;
+        }
+
+        .form-input:focus, .form-select:focus, .form-textarea:focus {
+            outline: none;
+            border-color: #667eea;
+            background: white;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .form-textarea {
+            min-height: 120px;
+            resize: vertical;
+            font-family: inherit;
+        }
+
+        .form-select {
+            cursor: pointer;
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+            background-position: right 12px center;
+            background-repeat: no-repeat;
+            background-size: 16px;
+            padding-right: 40px;
+            appearance: none;
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+
+        /* Generate Button */
+        .generate-btn {
+            width: 100%;
+            padding: 16px 24px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            margin-top: 8px;
+        }
+
+        .generate-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3);
+        }
+
+        .generate-btn:active {
+            transform: translateY(0);
+        }
+
+        .generate-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        /* Results Panel */
+        .results-panel {
+            background: white;
+            border-radius: 16px;
+            padding: 32px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            min-height: 400px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .results-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 24px;
+        }
+
+        .results-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #2d3748;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .results-count {
+            background: #667eea;
+            color: white;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.875rem;
+            font-weight: 600;
+        }
+
+        /* Gallery */
+        .gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            flex: 1;
+        }
+
+        .gallery-item {
+            position: relative;
+            border-radius: 12px;
+            overflow: hidden;
+            background: #f8fafc;
+            aspect-ratio: 1;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .gallery-item:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+        }
+
+        .gallery-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.3s ease;
+        }
+
+        .gallery-item:hover img {
+            transform: scale(1.05);
+        }
+
+        .gallery-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            display: flex;
+            align-items: flex-end;
+            padding: 16px;
+        }
+
+        .gallery-item:hover .gallery-overlay {
+            opacity: 1;
+        }
+
+        .gallery-actions {
+            display: flex;
+            gap: 8px;
+        }
+
+        .gallery-action {
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(10px);
+            border: none;
+            color: white;
+            padding: 8px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .gallery-action:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+
+        /* Empty State */
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            color: #a0aec0;
+            text-align: center;
+        }
+
+        .empty-state i {
+            font-size: 4rem;
+            margin-bottom: 16px;
+            opacity: 0.5;
+        }
+
+        .empty-state h3 {
+            font-size: 1.25rem;
+            margin-bottom: 8px;
+            color: #718096;
+        }
+
+        .empty-state p {
+            font-size: 0.875rem;
+        }
+
+        /* Loading State */
+        .loading {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            color: #667eea;
+        }
+
+        .loading-spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid #e2e8f0;
+            border-top: 3px solid #667eea;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 16px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Error Message */
+        .error-message {
+            background: #fed7d7;
+            color: #c53030;
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+            border: 1px solid #feb2b2;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .content-grid {
+                grid-template-columns: 1fr;
+                gap: 20px;
+            }
+
+            .header h1 {
+                font-size: 2rem;
+            }
+
+            .control-panel, .results-panel {
+                padding: 24px;
+            }
+
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+
+            .gallery {
+                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+                gap: 16px;
+            }
+        }
+
+        /* Additional Professional Touches */
+        .badge {
+            display: inline-flex;
+            align-items: center;
+            padding: 4px 8px;
+            background: #edf2f7;
+            color: #4a5568;
+            border-radius: 6px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .divider {
+            height: 1px;
+            background: #e2e8f0;
+            margin: 24px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="main-container">
+        <!-- Header -->
+        <div class="header">
+            <h1>AI Image Studio</h1>
+            <p class="subtitle">Transform your ideas into stunning visuals with advanced AI technology</p>
+        </div>
+
+        <!-- Main Content -->
+        <div class="content-grid">
+            <!-- Control Panel -->
+            <div class="control-panel">
+                <h2 class="panel-title">
+                    <i class="fas fa-magic"></i>
+                    Generate Images
+                </h2>
+
+                <form id="generate-form">
+                    <div class="form-group">
+                        <label class="form-label" for="prompt">
+                            <i class="fas fa-pen"></i> Prompt Description
+                        </label>
+                        <textarea 
+                            id="prompt" 
+                            name="prompt" 
+                            class="form-textarea" 
+                            required 
+                            placeholder="Describe the image you want to create... (e.g., A serene landscape with mountains at sunset, digital art style)"
+                        ></textarea>
+                    </div>
+
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label class="form-label" for="num_images">
+                                <i class="fas fa-images"></i> Quantity
+                            </label>
+                            <select id="num_images" name="num_images" class="form-select">
+                                <option value="1">1 Image</option>
+                                <option value="2">2 Images</option>
+                                <option value="3">3 Images</option>
+                                <option value="4">4 Images</option>
+                                <option value="5">5 Images</option>
+                            </select>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="form-label" for="aspect_ratio">
+                                <i class="fas fa-expand-arrows-alt"></i> Aspect Ratio
+                            </label>
+                            <select id="aspect_ratio" name="aspect_ratio" class="form-select">
+                                <option value="1:1">1:1 Square</option>
+                                <option value="4:3">4:3 Standard</option>
+                                <option value="16:9">16:9 Widescreen</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label" for="model">
+                            <i class="fas fa-brain"></i> AI Model
+                        </label>
+                        <select id="model" name="model" class="form-select">
+                            <option value="stable_diffusion">Stable Diffusion</option>
+                            <option value="locked_model" disabled>Premium Model (Coming Soon)</option>
+                        </select>
+                    </div>
+
+                    <div class="divider"></div>
+
+                    <button type="submit" class="generate-btn">
+                        <i class="fas fa-rocket"></i>
+                        Generate Images
+                    </button>
+                </form>
+
+                <div id="error-message"></div>
+            </div>
+
+            <!-- Results Panel -->
+            <div class="results-panel">
+                <div class="results-header">
+                    <h2 class="results-title">
+                        <i class="fas fa-images"></i>
+                        Generated Images
+                    </h2>
+                    <div class="results-count" id="results-count" style="display: none;">0</div>
+                </div>
+
+                <div id="gallery-content">
+                    <div class="empty-state">
+                        <i class="fas fa-image"></i>
+                        <h3>Ready to Create</h3>
+                        <p>Enter a prompt and click generate to see your AI-created images appear here</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.getElementById("generate-form").addEventListener("submit", async (e) => {
+            e.preventDefault();
+            
+            const formData = new FormData(e.target);
+            const errorDiv = document.getElementById("error-message");
+            const galleryContent = document.getElementById("gallery-content");
+            const resultsCount = document.getElementById("results-count");
+            const generateBtn = document.querySelector(".generate-btn");
+            
+            // Clear previous state
+            errorDiv.innerHTML = "";
+            resultsCount.style.display = "none";
+            
+            // Show loading state
+            generateBtn.disabled = true;
+            generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
+            
+            galleryContent.innerHTML = `
+                <div class="loading">
+                    <div class="loading-spinner"></div>
+                    <h3>Creating your images...</h3>
+                    <p>This may take a few moments</p>
+                </div>
+            `;
+
+            try {
+                const response = await fetch("/generate", {
+                    method: "POST",
+                    body: formData
+                });
+                const data = await response.json();
+
+                if (data.error) {
+                    errorDiv.innerHTML = `
+                        <div class="error-message">
+                            <i class="fas fa-exclamation-triangle"></i>
+                            ${data.error}
+                        </div>
+                    `;
+                    galleryContent.innerHTML = `
+                        <div class="empty-state">
+                            <i class="fas fa-exclamation-triangle"></i>
+                            <h3>Generation Failed</h3>
+                            <p>Please check your prompt and try again</p>
+                        </div>
+                    `;
+                } else {
+                    // Show results
+                    const gallery = document.createElement("div");
+                    gallery.className = "gallery";
+                    
+                    data.images.forEach((imgPath, index) => {
+                        const galleryItem = document.createElement("div");
+                        galleryItem.className = "gallery-item";
+                        galleryItem.innerHTML = `
+                            <img src="/${imgPath}" alt="Generated Image ${index + 1}" loading="lazy">
+                            <div class="gallery-overlay">
+                                <div class="gallery-actions">
+                                    <button class="gallery-action" onclick="downloadImage('/${imgPath}')" title="Download">
+                                        <i class="fas fa-download"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        `;
+                        gallery.appendChild(galleryItem);
+                    });
+                    
+                    galleryContent.innerHTML = "";
+                    galleryContent.appendChild(gallery);
+                    
+                    // Update results count
+                    resultsCount.textContent = data.images.length;
+                    resultsCount.style.display = "block";
+                }
+            } catch (err) {
+                errorDiv.innerHTML = `
+                    <div class="error-message">
+                        <i class="fas fa-exclamation-triangle"></i>
+                        Network error occurred. Please check your connection and try again.
+                    </div>
+                `;
+                galleryContent.innerHTML = `
+                    <div class="empty-state">
+                        <i class="fas fa-wifi"></i>
+                        <h3>Connection Error</h3>
+                        <p>Please check your internet connection and try again</p>
+                    </div>
+                `;
+            } finally {
+                // Reset button
+                generateBtn.disabled = false;
+                generateBtn.innerHTML = '<i class="fas fa-rocket"></i> Generate Images';
+            }
+        });
+
+        // Download function
+        function downloadImage(src) {
+            const link = document.createElement('a');
+            link.href = src;
+            link.download = `ai-generated-image-${Date.now()}.png`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+
+        // Add some interactive polish
+        document.addEventListener('DOMContentLoaded', function() {
+            // Add subtle animation to form elements
+            const formElements = document.querySelectorAll('.form-input, .form-select, .form-textarea');
+            formElements.forEach(element => {
+                element.addEventListener('focus', function() {
+                    this.parentElement.style.transform = 'translateY(-2px)';
+                });
+                element.addEventListener('blur', function() {
+                    this.parentElement.style.transform = 'translateY(0)';
+                });
+            });
+        });
+    </script>
+</body>
+</html>