Spaces:

gg3554
/

imageGenerator

Sleeping

App Files Files Community

gg3554 commited on 20 days ago

Commit

95b88a5

verified ·

1 Parent(s): abd74e7

Upload 4 files

Browse files

Files changed (4) hide show

README.md +111 -13
gemini_logo.gif +0 -0
index.html +548 -0
requirements.txt +28 -0

README.md CHANGED Viewed

@@ -1,13 +1,111 @@
----
-title: ImageGenerator
-emoji: 📊
-colorFrom: yellow
-colorTo: red
-sdk: gradio
-sdk_version: 6.0.1
-app_file: app.py
-pinned: false
-license: apache-2.0
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+# ImageGenerator
+```
+GEMINI 2.5 PRO PROMPT ENHANCEMENT
+Original prompt:  a dog in front of a desk
+Enhanced prompt:  A photorealistic, eye-level shot of a Golden Retriever sitting by a wooden desk. Soft, warm morning light streams from a window, creating gentle highlights and deep shadows. The background is softly blurred, focusing on the dog's detailed fur. A cozy, cinematic atmosphere with an earthy color palette.
+Word count: 47
+Processing sample 1/1: A photorealistic, eye-level shot of a Golden Retriever sitting by a wooden desk. Soft, warm morning light streams from a window, creating gentle highlights and deep shadows. The background is softly blurred, focusing on the dog's detailed fur. A cozy, cinematic atmosphere with an earthy color palette.
+100%|██████████| 30/30 [00:05<00:00,  5.08it/s]
+  Saved as: generated_image_0.png
+============================================================
+DETAILED SAMPLE SCORES
+============================================================
+Average CLIPScore: 0.2753
+Average GenEval Score: 0.6883
+Inception Score: 1.0000 ± 0.0000
+Inception Entropy: 7.5517
+```
+<img width="475" height="500" alt="image" src="https://github.com/user-attachments/assets/f1921bc4-5068-4373-8192-f2034af5416d" />
+# Text to Image Generation Web App
+A Flask-based web application that generates images from text prompts using Stable Diffusion and evaluates them using CLIP scores.
+## Features
+- 🎨 Generate images from text descriptions
+- 📊 CLIP score evaluation for image-text alignment
+- 💬 Chat-style interface
+- 🌙 Modern dark theme UI
+## Requirements
+- Python 3.8+
+- CUDA-capable GPU (recommended) or CPU
+- ~10GB disk space for models
+## Installation
+1. **Clone or download the project files**
+2. **Create a virtual environment (recommended)**
+   ```bash
+   python -m venv venv
+   source venv/bin/activate  # Linux/Mac
+   # or
+   venv\Scripts\activate  # Windows
+   ```
+3. **Install dependencies**
+   ```bash
+   pip install -r requirements.txt
+   ```
+## Running the Application
+1. **Start the Flask server**
+   ```bash
+   python app.py
+   ```
+2. **Open your browser** and go to:
+   ```
+   http://localhost:5000
+   ```
+3. **Enter a prompt** and click "Generate" to create an image!
+## Project Structure
+```
+project/
+├── app.py              # Main Flask application
+├── templates/
+│   └── index.html      # Web interface
+├── static/
+│   └── images/         # Static assets (optional)
+├── requirements.txt    # Python dependencies
+└── README.md          # This file
+```
+## Notes
+- **First run**: The application will download required AI models (~5-7GB). This happens only once.
+- **Generation time**: Each image takes 30-60 seconds on GPU, longer on CPU.
+- **Memory**: Requires ~8GB VRAM (GPU) or ~16GB RAM (CPU).
+## Troubleshooting
+### Out of Memory
+If you get CUDA out of memory errors, try:
+- Closing other GPU applications
+- Reducing `num_inference_steps` in `app.py`
+- Using CPU mode (slower but works with less memory)
+### Slow Generation
+- CPU mode is significantly slower than GPU
+- Consider using a cloud GPU service for better performance
+## API Endpoints
+- `GET /` - Web interface
+- `POST /` - Generate image (form data: `prompt`)
+- `GET /health` - Health check
+## Scores Explained
+- **CLIP Score**: Measures how well the image matches the text (0-1, higher is better)
+- **GenEval Score**: Derived metric (CLIP × 2.5) for easier interpretation

gemini_logo.gif ADDED Viewed

index.html ADDED Viewed

	@@ -0,0 +1,548 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Text to Image Generation using Stable Diffusion with CLIP evaluation">
+  <title>Text to Image Generation</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700&display=swap" rel="stylesheet">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Manrope', sans-serif;
+      margin: 0;
+      min-height: 100vh;
+      background: linear-gradient(135deg, #0a0f1a 0%, #1a1f3a 50%, #0d1229 100%);
+      color: #fff;
+    }
+    .container-main {
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .header {
+      text-align: center;
+      padding: 40px 20px;
+      background: linear-gradient(180deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%);
+      border-radius: 20px;
+      margin-bottom: 30px;
+    }
+    .header h1 {
+      font-size: 2.5rem;
+      font-weight: 700;
+      background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      margin-bottom: 10px;
+    }
+    .header p {
+      color: #94a3b8;
+      font-size: 1rem;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    .input-section {
+      background: rgba(30, 41, 59, 0.5);
+      border: 1px solid rgba(99, 102, 241, 0.2);
+      border-radius: 16px;
+      padding: 24px;
+      margin-bottom: 30px;
+      backdrop-filter: blur(10px);
+    }
+    .input-wrapper {
+      display: flex;
+      gap: 12px;
+    }
+    .prompt-input {
+      flex: 1;
+      background: rgba(15, 23, 42, 0.8);
+      border: 1px solid rgba(99, 102, 241, 0.3);
+      border-radius: 12px;
+      padding: 16px 20px;
+      color: #fff;
+      font-size: 1rem;
+      font-family: 'Manrope', sans-serif;
+      transition: all 0.3s ease;
+    }
+    .prompt-input:focus {
+      outline: none;
+      border-color: #818cf8;
+      box-shadow: 0 0 20px rgba(129, 140, 248, 0.2);
+    }
+    .prompt-input::placeholder {
+      color: #64748b;
+    }
+    .generate-btn {
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+      border: none;
+      border-radius: 12px;
+      padding: 16px 32px;
+      color: #fff;
+      font-weight: 600;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      white-space: nowrap;
+    }
+    .generate-btn:hover:not(:disabled) {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
+    }
+    .generate-btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    .chat-history {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 30px;
+    }
+    .chat-message {
+      display: flex;
+      gap: 16px;
+      padding: 20px;
+      border-radius: 16px;
+      animation: fadeIn 0.3s ease;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .user-message {
+      background: rgba(99, 102, 241, 0.1);
+      border: 1px solid rgba(99, 102, 241, 0.2);
+    }
+    .bot-message {
+      background: rgba(30, 41, 59, 0.6);
+      border: 1px solid rgba(148, 163, 184, 0.1);
+    }
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.2rem;
+    }
+    .user-avatar {
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    }
+    .bot-avatar {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    }
+    .message-content {
+      flex: 1;
+    }
+    .message-content p {
+      margin: 0;
+      color: #e2e8f0;
+      line-height: 1.6;
+    }
+    .image-container {
+      margin-top: 16px;
+    }
+    .generated-image {
+      max-width: 100%;
+      width: 512px;
+      height: auto;
+      border-radius: 12px;
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+    }
+    .scores-container {
+      display: flex;
+      gap: 16px;
+      margin-top: 16px;
+      flex-wrap: wrap;
+    }
+    .score-badge {
+      background: rgba(15, 23, 42, 0.8);
+      border: 1px solid rgba(99, 102, 241, 0.3);
+      border-radius: 10px;
+      padding: 12px 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .score-label {
+      font-size: 0.75rem;
+      color: #94a3b8;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .score-value {
+      font-size: 1.25rem;
+      font-weight: 700;
+      background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .loading-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      padding: 40px;
+    }
+    .loading-spinner {
+      width: 60px;
+      height: 60px;
+      border: 3px solid rgba(99, 102, 241, 0.2);
+      border-top-color: #818cf8;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .loading-text {
+      color: #94a3b8;
+      font-size: 0.9rem;
+    }
+    .loading-steps {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 10px;
+    }
+    .loading-step {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: #64748b;
+      font-size: 0.85rem;
+    }
+    .loading-step.active {
+      color: #818cf8;
+    }
+    .loading-step.done {
+      color: #10b981;
+    }
+    .step-icon {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      border: 2px solid currentColor;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.7rem;
+    }
+    .placeholder-container {
+      text-align: center;
+      padding: 60px 20px;
+      background: rgba(30, 41, 59, 0.3);
+      border: 2px dashed rgba(99, 102, 241, 0.3);
+      border-radius: 20px;
+    }
+    .placeholder-icon {
+      font-size: 4rem;
+      margin-bottom: 16px;
+      opacity: 0.5;
+    }
+    .placeholder-text {
+      color: #64748b;
+      font-size: 1.1rem;
+    }
+    .error-message {
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid rgba(239, 68, 68, 0.3);
+      border-radius: 12px;
+      padding: 16px;
+      color: #fca5a5;
+      margin-top: 16px;
+    }
+    @media (max-width: 640px) {
+      .header h1 {
+        font-size: 1.75rem;
+      }
+      .input-wrapper {
+        flex-direction: column;
+      }
+      .generate-btn {
+        width: 100%;
+      }
+      .scores-container {
+        flex-direction: column;
+      }
+      .score-badge {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container-main">
+    <div class="header">
+      <h1>✨ Text to Image Generator</h1>
+      <p>Transform your imagination into stunning visuals using AI-powered image generation with quality evaluation</p>
+    </div>
+    <div align="center" style="margin-bottom: 20px; color: #fbbf24;">
+    ⚡ <strong>Note:</strong> Image generation may take 30-60 seconds depending on your hardware. Please be patient!
+  </div>
+    <div class="input-section">
+      <div class="input-wrapper">
+        <input
+          type="text"
+          class="prompt-input"
+          id="chat-input"
+          placeholder="Describe the image you want to create... (e.g., A majestic dragon flying over a crystal castle at sunset)"
+        >
+        <button id="generate-btn" class="generate-btn">Generate
+        </button>
+      </div>
+    </div>
+    <div id="chat-history" class="chat-history">
+      <!-- Chat messages will appear here -->
+    </div>
+    <div id="placeholder" class="placeholder-container">
+      <div class="placeholder-icon">🖼️</div>
+      <p class="placeholder-text">Enter a prompt above to generate your first image</p>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.6.3.min.js"
+    integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
+  <script>
+    $(document).ready(function() {
+      const $chatHistory = $('#chat-history');
+      const $placeholder = $('#placeholder');
+      const $input = $('#chat-input');
+      const $btn = $('#generate-btn');
+      function generateImage() {
+        const prompt = $input.val().trim();
+        if (!prompt) {
+          alert('Please enter a prompt!');
+          return;
+        }
+        // Hide placeholder
+        $placeholder.hide();
+        // Disable input
+        $btn.prop('disabled', true).html('⏳ Generating...');
+        $input.prop('disabled', true);
+        // Add user message
+        const userMessage = `
+          <div class="chat-message user-message">
+            <div class="avatar user-avatar">👤</div>
+            <div class="message-content">
+              <p>${escapeHtml(prompt)}</p>
+            </div>
+          </div>
+        `;
+        $chatHistory.append(userMessage);
+        // Add loading message
+        const loadingId = 'loading-' + Date.now();
+        const loadingMessage = `
+          <div class="chat-message bot-message" id="${loadingId}">
+            <div class="avatar bot-avatar">🤖</div>
+            <div class="message-content">
+              <div class="loading-container">
+                <div class="loading-spinner"></div>
+                <div class="loading-text">Creating your masterpiece...</div>
+                <div class="loading-steps">
+                  <div class="loading-step active" id="step1">
+                    <span class="step-icon">1</span>
+                    <span>Processing prompt...</span>
+                  </div>
+                  <div class="loading-step" id="step2">
+                    <span class="step-icon">2</span>
+                    <span>Generating image...</span>
+                  </div>
+                  <div class="loading-step" id="step3">
+                    <span class="step-icon">3</span>
+                    <span>Evaluating quality...</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+        $chatHistory.append(loadingMessage);
+        // Scroll to loading
+        $('html, body').animate({
+          scrollTop: $(`#${loadingId}`).offset().top - 100
+        }, 300);
+        // Simulate step progression
+        setTimeout(() => {
+          $('#step1').removeClass('active').addClass('done');
+          $('#step2').addClass('active');
+        }, 2000);
+        setTimeout(() => {
+          $('#step2').removeClass('active').addClass('done');
+          $('#step3').addClass('active');
+        }, 15000);
+        // Clear input
+        $input.val('');
+        // Make API call
+        $.ajax({
+          type: "POST",
+          url: "/",
+          data: { 'prompt': prompt },
+          timeout: 300000, // 5 minute timeout
+          success: function(data) {
+            // Remove loading message
+            $(`#${loadingId}`).remove();
+            if (data.error) {
+              showError(data.error);
+              return;
+            }
+            // Add result message
+            const resultMessage = `
+              <div class="chat-message bot-message">
+                <div class="avatar bot-avatar">🤖</div>
+                <div class="message-content">
+                  <p>Here's your generated image! 🎉</p>
+                  <div class="image-container">
+                    <img src="data:image/png;base64,${data.image_base64}" alt="Generated image" class="generated-image">
+                  </div>
+                  <div class="scores-container">
+                    <div class="score-badge">
+                      <span class="score-label">CLIP Score</span>
+                      <span class="score-value">${data.clip_score}</span>
+                    </div>
+                    <div class="score-badge">
+                      <span class="score-label">GenEval Score</span>
+                      <span class="score-value">${data.geneval_score}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            `;
+            $chatHistory.append(resultMessage);
+            // Scroll to result
+            $('html, body').animate({
+              scrollTop: $(document).height()
+            }, 300);
+          },
+          error: function(xhr, status, error) {
+            $(`#${loadingId}`).remove();
+            let errorMsg = 'An error occurred while generating the image.';
+            if (status === 'timeout') {
+              errorMsg = xhr.responseJSON.error + 'Request timed out. The server might be overloaded.';
+            } else if (xhr.responseJSON && xhr.responseJSON.error) {
+              errorMsg = xhr.responseJSON.error;
+            }
+            showError(errorMsg);
+          },
+          complete: function() {
+            // Re-enable input
+            $btn.prop('disabled', false).html('Generate');
+            $input.prop('disabled', false).focus();
+          }
+        });
+      }
+      function showError(message) {
+        const errorMessage = `
+          <div class="chat-message bot-message">
+            <div class="avatar bot-avatar">🤖</div>
+            <div class="message-content">
+              <div class="error-message">
+                ❌ ${escapeHtml(message)}
+              </div>
+            </div>
+          </div>
+        `;
+        $chatHistory.append(errorMessage);
+      }
+      function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+      }
+      // Event listeners
+      $btn.click(generateImage);
+      $input.keypress(function(e) {
+        if (e.which === 13) {
+          generateImage();
+        }
+      });
+      // Focus input on page load
+      $input.focus();
+    });
+  </script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1,28 @@

+torch>=2.2.2
+torchvision>=0.17.2
+torchaudio>=2.2.2
+datasets>=2.14.0
+transformers>=4.33.0
+diffusers>=0.35.1
+scikit-learn>=1.3.0
+Pillow>=10.0.0
+matplotlib>=3.7.0
+seaborn>=0.12.2
+numpy>=1.24.0
+accelerate>=0.21.0
+bitsandbytes>=0.40.0
+tensorflow>=2.13.0
+streamlit>=1.28.0
+google-generativeai>=0.3.0
+requests>=2.31.0
+flask-socketio==5.3.6
+python-socketio==5.10.0
+eventlet==0.33.3
+scipy>=1.12.0
+tqdm>=4.66.0
+safetensors==0.4.5
+xformers==0.0.32.post2
+flask>=3.0.3
+flask-cors==4.0.1
+pyopenssl==24.2.1
+cryptography==43.0.0