Upload 6 files

Dockerfile

@@ -0,0 +1,32 @@
+# Use official Python slim image
+FROM python:3.10-slim
+
+# Ensure /app is writable (important!)
+RUN mkdir -p /app/cache && chmod -R 777 /app
+
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && \
+    apt-get install -y git libgl1 libglib2.0-0 && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --upgrade pip && pip install -r requirements.txt
+
+# Copy your Flask app and other files
+COPY . /app
+
+# Expose the port your Flask app will run on
+EXPOSE 7860
+
+# Run your Flask app
+CMD ["python", "main.py"]

main.py

@@ -0,0 +1,43 @@
+import os
+from diffusers import DiffusionPipeline
+import torch
+from flask import Flask, request, jsonify, render_template
+from PIL import Image
+from io import BytesIO
+import base64
+
+app = Flask(__name__)
+
+# ✅ Safe local cache directory inside the app folder
+hf_cache_dir = os.path.join(os.getcwd(), "cache")
+os.makedirs(hf_cache_dir, exist_ok=True)
+os.environ["HF_HOME"] = hf_cache_dir
+
+# Load model
+model_repo_id = "stabilityai/sdxl-turbo"
+torch_dtype = torch.float16 if torch.cuda.is_available() else torch.float32
+
+pipe = DiffusionPipeline.from_pretrained(
+    model_repo_id,
+    torch_dtype=torch_dtype,
+    cache_dir=hf_cache_dir
+)
+pipe.to("cuda" if torch.cuda.is_available() else "cpu")
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+@app.route("/generate", methods=["POST"])
+def generate():
+    prompt = request.json["prompt"]
+    image = pipe(prompt).images[0]
+
+    buffered = BytesIO()
+    image.save(buffered, format="PNG")
+    img_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
+
+    return jsonify({"image": img_str})
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,9 @@
+accelerate
+diffusers
+invisible_watermark
+torch
+transformers
+xformers
+flask
+Pillow
+numpy

static/script.js

@@ -0,0 +1,47 @@
+async function generateImage() {
+  const prompt = document.getElementById("prompt").value;
+  const imageContainer = document.getElementById("generatedImage");
+  const downloadSection = document.getElementById("downloadSection");
+
+  imageContainer.innerHTML = "<p class='placeholder-text'>Generating...</p>";
+  downloadSection.style.display = "none";
+
+  try {
+    const response = await fetch("/generate", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ prompt })
+    });
+
+    const data = await response.json();
+
+    if (data.image) {
+      const img = new Image();
+      img.id = "generatedImg";
+      img.src = `data:image/png;base64,${data.image}`;
+      img.alt = "Generated Image";
+      imageContainer.innerHTML = "";
+      imageContainer.appendChild(img);
+      downloadSection.style.display = "block";
+    } else {
+      imageContainer.innerHTML = "<p class='placeholder-text'>Failed to generate image.</p>";
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    imageContainer.innerHTML = "<p class='placeholder-text'>An error occurred.</p>";
+  }
+}
+
+function downloadImage() {
+  const img = document.getElementById("generatedImg");
+  if (!img) return;
+
+  const link = document.createElement("a");
+  link.href = img.src;
+  link.download = "ai_generated_image.png";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}

static/style.css

@@ -0,0 +1,214 @@
+body {
+  font-family: 'Roboto', Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  color: #333333;
+}
+
+.container {
+  background-color:#e2d3eb;
+  border: 3px solid #9344c7;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  width: 90%;
+  max-width: 600px; /* Increased container width */
+  padding: 30px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+h1 {
+  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  font-size: 24px;
+  margin: 0 0 20px 0;
+  text-align: center;
+  font-weight:bolder;
+  color:#9344c7 ;
+}
+
+.input-container {
+  width: 100%; /* Takes full width of container */
+  max-width: 550px;/* Specific width for the textarea */
+}
+
+.input-container textarea {
+  width: 100%;
+  height: 120px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 16px;
+  resize: none;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+.input-container textarea::placeholder {
+  color: #999;
+}
+
+.button-container {
+  width: 50%;
+  max-width: 550px; /* Match textarea width */
+  margin-bottom: 25px;
+}
+
+.generate-btn {
+  width: 100%;
+  padding: 15px;
+  background-color: #9344c7;
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-weight: bolder;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 20px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.generate-btn:hover {
+  background-color:#5c1988;
+}
+
+.image-container {
+  width: 256px;
+  height:256px;
+  border: 1px dashed #ccc;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f9f9f9;
+  overflow: hidden;
+}
+
+.placeholder-text {
+  color: #999;
+  font-size: 16px;
+  text-align: center;
+}
+
+/* When an image is generated */
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.download-container {
+  width: 50%;
+  max-width: 550px;
+  margin-top: 10px;
+}
+
+.download-btn {
+  width: 100%;
+  padding: 14px;
+  background-color: #5c1988;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-weight: bolder;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.download-btn:hover {
+  background-color: #3b0f5c;
+}
+
+/* Media Queries for Responsiveness */
+@media (max-width: 768px) {
+  .container {
+      padding: 20px;
+  }
+  
+  h1 {
+      font-size: 22px;
+  }
+  
+  .input-container textarea {
+      height: 100px;
+      font-size: 15px;
+  }
+  
+  .generate-btn {
+      padding: 12px;
+      font-size: 15px;
+  }
+  
+  .placeholder-text {
+      font-size: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+      padding: 15px;
+      border-radius: 8px;
+  }
+  
+  h1 {
+      font-size: 20px;
+      margin-bottom: 15px;
+  }
+  
+  .input-container textarea {
+      height: 80px;
+      font-size: 14px;
+      padding: 12px;
+      margin-bottom: 15px;
+  }
+  
+  .generate-btn {
+      padding: 10px;
+      font-size: 14px;
+  }
+  
+  .button-container {
+      margin-bottom: 20px;
+  }
+  
+  .placeholder-text {
+      font-size: 14px;
+  }
+}
+
+@media (max-width: 350px) {
+  .container {
+      padding: 12px;
+  }
+  
+  h1 {
+      font-size: 18px;
+  }
+  
+  .input-container textarea {
+      height: 70px;
+      font-size: 13px;
+  }
+}
+
+@media (max-width: 768px) {
+  .download-btn {
+    font-size: 15px;
+    padding: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .download-btn {
+    font-size: 14px;
+    padding: 10px;
+  }
+}

templates/index.html

@@ -0,0 +1,28 @@
+<!-- Save as templates/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>AI Image Generator</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+  <div class="container">
+    <h1>AI Image Generator</h1>
+    <div class="input-container">
+      <textarea id="prompt" placeholder="Describe your imagination in detail..."></textarea>
+    </div>
+    <div class="button-container">
+      <button class="generate-btn" onclick="generateImage()">Generate</button>
+    </div>
+    <div class="image-container" id="generatedImage">
+      <p class="placeholder-text">Your generated image will appear here</p>
+    </div>
+    <div class="button-container download-container" id="downloadSection" style="display: none;">
+      <button class="download-btn" onclick="downloadImage()">Download</button>
+    </div>
+  </div>
+  <script src="{{ url_for('static', filename='script.js') }}"></script>
+</body>
+</html>