Upload 5 files

app.py

@@ -0,0 +1,211 @@
+from flask import Flask, request, jsonify, render_template, send_from_directory
+import requests
+import time
+import os
+import random
+import json
+
+app = Flask(__name__, static_folder='static', template_folder='templates')
+
+# Image generation API functions
+def get_common_headers():
+    return {
+        "Accept": "application/json, text/javascript, */*; q=0.01",
+        "Content-Type": "application/json; charset=UTF-8",
+        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36",
+        "X-Requested-With": "XMLHttpRequest"
+    }
+
+def get_upgraded_prompt(prompt):
+    url = "https://editor.imagelabs.net/upgrade_prompt"
+    payload = {"prompt": prompt}
+    headers = get_common_headers()
+    
+    try:
+        response = requests.post(url, json=payload, headers=headers)
+        response.raise_for_status()
+        data = response.json()
+        return data.get("upgraded_prompt") or data.get("prompt") or prompt
+    except Exception as e:
+        print(f"Error upgrading prompt: {e}")
+        return prompt
+
+def generate_image(prompt, seed, subseed, attention, width, height, tiling, negative_prompt, reference_image, reference_image_type, reference_strength):
+    url = "https://editor.imagelabs.net/txt2img"
+    payload = {
+        "prompt": prompt,
+        "seed": seed,
+        "subseed": subseed,
+        "attention": attention,
+        "width": width,
+        "height": height,
+        "tiling": tiling,
+        "negative_prompt": negative_prompt,
+        "reference_image": reference_image,
+        "reference_image_type": reference_image_type,
+        "reference_strength": reference_strength
+    }
+    headers = get_common_headers()
+    
+    try:
+        response = requests.post(url, json=payload, headers=headers)
+        response.raise_for_status()
+        data = response.json()
+        return data.get("task_id")
+    except Exception as e:
+        print(f"Error generating image: {e}")
+        raise
+
+def poll_progress(task_id):
+    url = "https://editor.imagelabs.net/progress"
+    payload = {"task_id": task_id}
+    headers = get_common_headers()
+    max_attempts = 15
+    attempt = 0
+    
+    while attempt < max_attempts:
+        try:
+            response = requests.post(url, json=payload, headers=headers)
+            response.raise_for_status()
+            data = response.json()
+            
+            final_image_url = data.get("final_image_url")
+            status = (data.get("status") or "").lower()
+            
+            if final_image_url:
+                return final_image_url
+            if status == "done":
+                return None
+                
+            # Wait before next poll
+            time.sleep(2)
+            attempt += 1
+        except Exception as e:
+            print(f"Error polling progress: {e}")
+            raise
+    
+    raise Exception("Polling timed out after 30 seconds")
+
+# Routes
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/healthcheck')
+def healthcheck():
+    return "Flask application is running!"
+
+@app.route('/api/upgrade-prompt', methods=['POST'])
+def upgrade_prompt():
+    data = request.json
+    if not data or 'prompt' not in data or not data['prompt']:
+        return jsonify({"error": "Invalid prompt. Please provide a text prompt."}), 400
+    
+    try:
+        upgraded_prompt = get_upgraded_prompt(data['prompt'])
+        return jsonify({"upgradedPrompt": upgraded_prompt})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/generate', methods=['POST'])
+def api_generate_image():
+    data = request.json
+    if not data or 'prompt' not in data or not data['prompt']:
+        return jsonify({"error": "Invalid prompt. Please provide a text prompt."}), 400
+    
+    try:
+        prompt = data['prompt']
+        seed = data.get('seed', random.randint(0, 999999))
+        subseed = data.get('subseed', 0)
+        attention = data.get('attention', 0.5)
+        width = data.get('width', 512)
+        height = data.get('height', 512)
+        tiling = data.get('tiling', False)
+        negative_prompt = data.get('negative_prompt', "")
+        reference_image = data.get('reference_image')
+        reference_image_type = data.get('reference_image_type')
+        reference_strength = data.get('reference_strength', 0.5)
+        
+        task_id = generate_image(
+            prompt, seed, subseed, attention, width, height, tiling,
+            negative_prompt, reference_image, reference_image_type, reference_strength
+        )
+        
+        return jsonify({"taskId": task_id, "status": "processing"})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/poll', methods=['POST'])
+def api_poll_progress():
+    data = request.json
+    if not data or 'taskId' not in data or not data['taskId']:
+        return jsonify({"error": "Invalid task ID. Please provide a valid task ID."}), 400
+    
+    try:
+        task_id = data['taskId']
+        image_url = poll_progress(task_id)
+        
+        return jsonify({
+            "final_image_url": image_url,
+            "status": "done" if image_url else "processing"
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+# Helper route to save image history
+@app.route('/api/save-history', methods=['POST'])
+def save_history():
+    data = request.json
+    
+    try:
+        history_file = os.path.join(app.static_folder, 'data', 'history.json')
+        os.makedirs(os.path.dirname(history_file), exist_ok=True)
+        
+        # Read existing history
+        history = []
+        if os.path.exists(history_file):
+            with open(history_file, 'r') as f:
+                try:
+                    history = json.load(f)
+                except:
+                    history = []
+        
+        # Add new image
+        if data and isinstance(history, list):
+            # Set an ID if none exists
+            if 'id' not in data:
+                data['id'] = str(int(time.time() * 1000))
+            
+            # Add to the beginning of the array
+            history.insert(0, data)
+            
+            # Keep only the last 20 images
+            history = history[:20]
+            
+            with open(history_file, 'w') as f:
+                json.dump(history, f)
+            
+            return jsonify({"success": True})
+        
+        return jsonify({"error": "Invalid data format"}), 400
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/get-history', methods=['GET'])
+def get_history():
+    try:
+        history_file = os.path.join(app.static_folder, 'data', 'history.json')
+        
+        if os.path.exists(history_file):
+            with open(history_file, 'r') as f:
+                history = json.load(f)
+                return jsonify({"images": history})
+        
+        return jsonify({"images": []})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    # Create data directory if it doesn't exist
+    os.makedirs(os.path.join(app.static_folder, 'data'), exist_ok=True)
+    app.run(host='0.0.0.0', port=8080, debug=True)

static/css/styles.css

@@ -0,0 +1,1832 @@
+/* Variables */
+:root {
+    /* Dark Theme (Default) */
+    --bg-color: #0d0f18;
+    --bg-secondary: #12141e;
+    --bg-tertiary: #171a26;
+    --bg-card: #1e2132;
+    --text-color: #f5f6fa;
+    --text-secondary: #a2a8bc;
+    --text-tertiary: #717790;
+    --border-color: #2c3049;
+    --primary-color: #6366f1;
+    --primary-hover: #818cf8;
+    --primary-light: rgba(99, 102, 241, 0.15);
+    --secondary-color: #334155;
+    --secondary-hover: #475569;
+    --danger-color: #ef4444;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --info-color: #3b82f6;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+    --modal-overlay: rgba(0, 0, 0, 0.75);
+    --gradient-start: #6366f1;
+    --gradient-middle: #8b5cf6;
+    --gradient-end: #d946ef;
+    --placeholder-color: #202437;
+    --glass-bg: rgba(18, 20, 30, 0.7);
+    --blur-amount: 10px;
+    --border-radius: 1rem;
+    --button-radius: 0.75rem;
+    --card-radius: 1.25rem;
+    --transition-slow: 0.5s;
+    --transition-medium: 0.3s;
+    --transition-fast: 0.15s;
+}
+
+/* Light Theme */
+.light-theme {
+    --bg-color: #f8f9fc;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #eef2ff;
+    --bg-card: #ffffff;
+    --text-color: #1e293b;
+    --text-secondary: #475569;
+    --text-tertiary: #94a3b8;
+    --border-color: #e2e8f0;
+    --primary-color: #4f46e5;
+    --primary-hover: #4338ca;
+    --primary-light: rgba(79, 70, 229, 0.1);
+    --secondary-color: #e2e8f0;
+    --secondary-hover: #cbd5e1;
+    --shadow-color: rgba(15, 23, 42, 0.1);
+    --modal-overlay: rgba(15, 23, 42, 0.5);
+    --placeholder-color: #f1f5f9;
+    --glass-bg: rgba(255, 255, 255, 0.8);
+}
+
+/* Reset & Base Styles */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    transition: background-color var(--transition-medium), color var(--transition-medium);
+    line-height: 1.6;
+    overflow-x: hidden;
+    min-height: 100vh;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    line-height: 1.3;
+}
+
+/* Typography */
+h1 {
+    font-size: 2.5rem;
+}
+
+h2 {
+    font-size: 1.75rem;
+}
+
+h3 {
+    font-size: 1.3rem;
+}
+
+small, .small {
+    font-size: 0.875rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideUp {
+    from { transform: translateY(30px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideDown {
+    from { transform: translateY(-30px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideLeft {
+    from { transform: translateX(30px); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideRight {
+    from { transform: translateX(-30px); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+@keyframes rotateIn {
+    from { transform: rotate(-10deg) scale(0.9); opacity: 0; }
+    to { transform: rotate(0) scale(1); opacity: 1; }
+}
+
+@keyframes shimmer {
+    0% { background-position: -1000px 0; }
+    100% { background-position: 1000px 0; }
+}
+
+@keyframes dots {
+    0%, 20% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+    80%, 100% { transform: translateY(0); }
+}
+
+@keyframes gradientMove {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+@keyframes floatUp {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0); }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+@keyframes zoomInOut {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.2); }
+}
+
+@keyframes glowPulse {
+    0%, 100% { box-shadow: 0 0 5px 0 var(--primary-color); }
+    50% { box-shadow: 0 0 20px 5px var(--primary-color); }
+}
+
+/* Utility classes */
+.hidden {
+    display: none !important;
+}
+
+.gradient-text {
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+.setting-hint {
+    display: block;
+    color: var(--text-tertiary);
+    font-size: 0.8rem;
+    margin-top: 0.25rem;
+}
+
+.helper-tip {
+    display: block;
+    font-size: 0.85rem;
+    margin-top: 0.5rem;
+    color: var(--text-tertiary);
+    opacity: 0.8;
+}
+
+.pulse-effect {
+    animation: pulse 2s infinite;
+}
+
+.pulse-slow {
+    animation: pulse 4s infinite;
+}
+
+.float-animation {
+    animation: floatUp 6s ease-in-out infinite;
+}
+
+.fa-spin-hover:hover {
+    animation: spin 1.5s linear infinite;
+}
+
+.fa-spin-pulse {
+    animation: spin 15s linear infinite;
+}
+
+.pulse-animation {
+    position: relative;
+    overflow: hidden;
+}
+
+.pulse-animation::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    animation: shimmer 2s infinite;
+    transform: skewX(-20deg);
+}
+
+.full-width {
+    width: 100% !important;
+}
+
+/* Loading Screen */
+#loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--bg-color);
+    z-index: 9999;
+    transition: opacity 0.8s ease, visibility 0.8s ease;
+}
+
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3rem;
+    animation: fadeIn 0.8s ease-out;
+}
+
+.loading-logo {
+    position: relative;
+    margin-bottom: 1rem;
+}
+
+.logo-animation {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    animation: pulse 3s infinite;
+}
+
+.logo-circle {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle), var(--gradient-end));
+    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.5);
+    margin-bottom: 1.5rem;
+    animation: zoomInOut 4s infinite;
+}
+
+.logo-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.logo-text .gradient-text {
+    font-size: 2.5rem;
+    font-weight: 800;
+    letter-spacing: -1px;
+}
+
+.logo-text .subtext {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}
+
+.loading-animation {
+    margin-bottom: 1.5rem;
+}
+
+.lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.lds-ellipsis div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+    0% { transform: scale(0); }
+    100% { transform: scale(1); }
+}
+
+@keyframes lds-ellipsis2 {
+    0% { transform: translate(0, 0); }
+    100% { transform: translate(24px, 0); }
+}
+
+@keyframes lds-ellipsis3 {
+    0% { transform: scale(1); }
+    100% { transform: scale(0); }
+}
+
+.loading-text {
+    font-size: 1.35rem;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+}
+
+.animated-text {
+    display: inline-block;
+    background: linear-gradient(90deg, var(--text-color), var(--text-secondary));
+    background-size: 200% auto;
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    animation: gradientMove 3s linear infinite;
+}
+
+.loading-dots {
+    display: inline-flex;
+    margin-left: 4px;
+}
+
+.loading-dots .dot {
+    animation: dots 1.4s infinite;
+    display: inline-block;
+}
+
+.loading-dots .dot:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.loading-dots .dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+/* App Header */
+.app-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 70px;
+    background-color: var(--bg-secondary);
+    backdrop-filter: blur(var(--blur-amount));
+    -webkit-backdrop-filter: blur(var(--blur-amount));
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1.5rem;
+    z-index: 20;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+}
+
+.header-logo {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.header-logo .gradient-text {
+    font-size: 1.4rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+}
+
+.header-version {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+/* Theme Toggle */
+.theme-toggle {
+    background-color: var(--bg-tertiary);
+    color: var(--text-color);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    transition: background-color var(--transition-medium), transform var(--transition-medium), box-shadow var(--transition-medium);
+    box-shadow: 0 2px 10px var(--shadow-color);
+}
+
+.theme-toggle:hover {
+    background-color: var(--primary-color);
+    transform: translateY(-2px);
+    color: white;
+    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
+}
+
+/* Menu Toggle */
+.menu-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background-color: var(--bg-tertiary);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--button-radius);
+    padding: 0.6rem 1rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all var(--transition-medium);
+    box-shadow: 0 2px 10px var(--shadow-color);
+}
+
+.menu-toggle:hover {
+    background-color: var(--primary-color);
+    color: white;
+    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
+}
+
+/* Main Container */
+.main-container {
+    display: flex;
+    min-height: 100vh;
+    padding-top: 70px; /* Match header height */
+}
+
+/* Sidebar */
+.sidebar {
+    width: 350px;
+    flex-shrink: 0;
+    background-color: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
+    min-height: calc(100vh - 70px);
+    padding: 1.5rem;
+    overflow-y: auto;
+    transition: transform var(--transition-medium) ease;
+    position: fixed;
+    left: 0;
+    top: 70px;
+    bottom: 0;
+    z-index: 18;
+    box-shadow: 5px 0 20px var(--shadow-color);
+    scrollbar-width: thin;
+    scrollbar-color: var(--text-tertiary) var(--bg-tertiary);
+}
+
+.sidebar::-webkit-scrollbar {
+    width: 6px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+    background: var(--bg-tertiary);
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+    background-color: var(--text-tertiary);
+    border-radius: 20px;
+}
+
+.sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.app-title {
+    font-size: 1.6rem;
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    margin-bottom: 0;
+}
+
+.sidebar-close {
+    display: none;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: color var(--transition-medium);
+}
+
+.sidebar-close:hover {
+    color: var(--danger-color);
+}
+
+.sidebar-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.sidebar-section-title {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0.5rem;
+}
+
+/* Latest Creation Preview */
+.latest-creation-preview {
+    margin-bottom: 1rem;
+}
+
+.latest-creation {
+    background-color: var(--bg-tertiary);
+    border-radius: var(--card-radius);
+    overflow: hidden;
+    aspect-ratio: 1/1;
+    position: relative;
+    box-shadow: 0 4px 12px var(--shadow-color);
+    transition: transform var(--transition-medium);
+}
+
+.latest-creation:hover {
+    transform: translateY(-5px);
+}
+
+.latest-creation img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.latest-creation-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-tertiary);
+    padding: 1rem;
+    text-align: center;
+}
+
+.latest-creation-placeholder i {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    opacity: 0.7;
+}
+
+/* Form Elements */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-row {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.form-row .form-group {
+    flex: 1;
+    margin-bottom: 0;
+}
+
+.form-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+textarea, input[type="text"], input[type="number"], select {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--button-radius);
+    background-color: var(--bg-tertiary);
+    color: var(--text-color);
+    font-family: inherit;
+    font-size: 0.95rem;
+    transition: border-color var(--transition-medium), box-shadow var(--transition-medium);
+}
+
+textarea:focus, input[type="text"]:focus, input[type="number"]:focus, select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+.prompt-container {
+    position: relative;
+}
+
+.upgrade-btn {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    background-color: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all var(--transition-medium);
+    padding: 0.4rem;
+    border-radius: 0.5rem;
+}
+
+.upgrade-btn:hover {
+    color: white;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5);
+}
+
+.seed-container {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.seed-container input {
+    flex: 1;
+}
+
+.random-btn {
+    background-color: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--button-radius);
+    cursor: pointer;
+    transition: all var(--transition-medium);
+}
+
+.random-btn:hover {
+    color: white;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5);
+}
+
+.checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.checkbox-group input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    accent-color: var(--primary-color);
+    cursor: pointer;
+}
+
+.checkbox-group label {
+    margin-bottom: 0;
+    cursor: pointer;
+}
+
+.slider-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+input[type="range"] {
+    flex: 1;
+    -webkit-appearance: none;
+    height: 6px;
+    background: var(--secondary-color);
+    border-radius: 3px;
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    background: var(--primary-color);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.slider-container span {
+    min-width: 40px;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    font-weight: 600;
+}
+
+/* Buttons */
+.primary-btn, .secondary-btn, .control-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.85rem 1.5rem;
+    border-radius: var(--button-radius);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-medium);
+    border: none;
+    font-size: 1rem;
+    font-family: inherit;
+}
+
+.primary-btn {
+    background-color: var(--primary-color);
+    color: white;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+}
+
+.primary-btn:hover:not(:disabled) {
+    background-color: var(--primary-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.5);
+}
+
+.secondary-btn {
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+}
+
+.secondary-btn:hover:not(:disabled) {
+    background-color: var(--secondary-hover);
+    transform: translateY(-2px);
+}
+
+.control-btn {
+    background-color: var(--bg-tertiary);
+    color: var(--text-secondary);
+    padding: 0.6rem 1rem;
+    font-size: 0.9rem;
+    border: 1px solid var(--border-color);
+}
+
+.control-btn:hover:not(:disabled) {
+    background-color: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+}
+
+.primary-btn:disabled, .secondary-btn:disabled, .control-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    padding: 2rem;
+    margin-left: 350px;
+    transition: margin-left var(--transition-medium) ease;
+}
+
+.content-section {
+    margin-bottom: 3rem;
+    animation: slideUp 0.5s ease-out;
+}
+
+.section-title {
+    font-size: 1.8rem;
+    margin-bottom: 1.5rem;
+    position: relative;
+    display: inline-block;
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 60%;
+    height: 3px;
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
+    border-radius: 3px;
+}
+
+/* Image Display */
+.image-display {
+    width: 100%;
+    min-height: 500px;
+    background-color: var(--bg-secondary);
+    border-radius: var(--card-radius);
+    overflow: hidden;
+    box-shadow: 0 8px 30px var(--shadow-color);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1rem;
+    transition: transform var(--transition-medium);
+}
+
+.image-display:hover {
+    transform: translateY(-5px);
+}
+
+.placeholder-wrapper {
+    width: 100%;
+    height: 100%;
+    min-height: 500px;
+    background-color: var(--placeholder-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7;
+}
+
+.placeholder-content {
+    text-align: center;
+    padding: 2rem;
+}
+
+.placeholder-icon {
+    font-size: 5rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.5;
+    color: var(--text-secondary);
+}
+
+.display-image {
+    width: 100%;
+    height: auto;
+    display: block;
+    animation: rotateIn 0.7s ease-out;
+}
+
+.image-display .loading-indicator {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+}
+
+.loading-shimmer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to right, 
+        var(--placeholder-color) 0%, 
+        var(--bg-secondary) 50%, 
+        var(--placeholder-color) 100%);
+    background-size: 1000px 100%;
+    animation: shimmer 2s infinite linear;
+}
+
+/* Image Controls */
+.image-controls {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.image-controls .control-btn {
+    flex: 1;
+}
+
+/* History Gallery */
+.history-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 1.5rem;
+}
+
+.history-item {
+    position: relative;
+    cursor: pointer;
+    border-radius: var(--card-radius);
+    overflow: hidden;
+    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
+    box-shadow: 0 4px 20px var(--shadow-color);
+    aspect-ratio: 1 / 1;
+    background-color: var(--bg-secondary);
+    will-change: transform;
+    perspective: 1000px;
+}
+
+.history-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, var(--primary-color), transparent);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    z-index: 1;
+    mix-blend-mode: overlay;
+    pointer-events: none;
+}
+
+.history-item::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 30%);
+    opacity: 0;
+    mix-blend-mode: overlay;
+    transform: scale(0.5);
+    z-index: 2;
+    transition: transform 0.6s ease, opacity 0.6s ease;
+    pointer-events: none;
+}
+
+.history-item:hover {
+    transform: translateY(-8px) scale(1.02) rotateX(3deg) rotateY(-3deg);
+    box-shadow: 0 15px 35px var(--shadow-color), 
+                0 0 0 2px var(--primary-color),
+                10px 10px 20px rgba(0,0,0,0.1);
+}
+
+.history-item:hover::before {
+    opacity: 0.5;
+}
+
+.history-item:hover::after {
+    opacity: 0.3;
+    transform: scale(1) translate(25%, 25%);
+}
+
+.history-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+    filter: brightness(1);
+}
+
+.history-item:hover .history-img {
+    transform: scale(1.08);
+    filter: brightness(1.1) contrast(1.1);
+}
+
+.history-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4) 40%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    display: flex;
+    align-items: flex-end;
+    padding: 1rem;
+    z-index: 3;
+}
+
+.history-item:hover .history-overlay {
+    opacity: 1;
+}
+
+.history-prompt {
+    color: white;
+    font-size: 0.9rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    transform: translateY(10px);
+    opacity: 0;
+    transition: transform 0.4s ease, opacity 0.4s ease;
+}
+
+.history-item:hover .history-prompt {
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.history-actions {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 15px;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.history-item:hover .history-actions {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.history-action-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 0.9rem;
+    padding: 0;
+    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+    transform: scale(1);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.history-action-btn:hover {
+    transform: scale(1.2);
+    background-color: var(--primary-color);
+    border-color: transparent;
+    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
+}
+
+.history-action-btn.view-btn:hover {
+    background-color: var(--info-color);
+}
+
+.history-action-btn.regenerate-btn:hover {
+    background-color: var(--success-color);
+}
+
+.history-action-btn.download-btn:hover {
+    background-color: var(--warning-color);
+}
+
+.history-action-btn i {
+    transition: transform 0.3s ease;
+}
+
+.history-action-btn:hover i {
+    transform: scale(1.1);
+}
+
+.history-item::before,
+.history-item:hover::before,
+.history-item::after,
+.history-item:hover::after,
+.history-item:hover,
+.history-overlay,
+.history-item:hover .history-overlay,
+.history-img,
+.history-item:hover .history-img,
+.history-prompt,
+.history-item:hover .history-prompt,
+.history-actions,
+.history-item:hover .history-actions,
+.history-action-btn,
+.history-action-btn:hover {
+    will-change: transform, opacity, filter;
+}
+
+.empty-history-message {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--text-secondary);
+    background-color: var(--bg-secondary);
+    border-radius: var(--card-radius);
+    box-shadow: 0 4px 20px var(--shadow-color);
+}
+
+.empty-history-message i {
+    font-size: 4rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.4;
+    color: var(--text-tertiary);
+}
+
+/* Modals */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--modal-overlay);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--transition-medium), visibility var(--transition-medium);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+}
+
+.modal.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.modal-content {
+    background-color: var(--bg-secondary);
+    border-radius: var(--border-radius);
+    width: 90%;
+    max-width: 550px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 15px 50px var(--shadow-color);
+    animation: slideUp 0.5s ease-out;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--border-color);
+}
+
+.modal-content.fullscreen {
+    max-width: 90%;
+    width: 1100px;
+    height: 90vh;
+}
+
+.modal-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    background-color: var(--bg-secondary);
+    z-index: 10;
+}
+
+.modal-header h2 {
+    margin-bottom: 0;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.close-modal {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: color var(--transition-medium);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.close-modal:hover {
+    color: var(--danger-color);
+    background-color: var(--bg-tertiary);
+}
+
+.modal-body {
+    padding: 1.5rem;
+    flex: 1;
+    overflow-y: auto;
+}
+
+.modal-footer {
+    padding: 1.5rem;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    position: sticky;
+    bottom: 0;
+    background-color: var(--bg-secondary);
+    z-index: 10;
+}
+
+.modal-footer .primary-btn,
+.modal-footer .secondary-btn {
+    min-width: 130px;
+}
+
+/* Enhancement Animation */
+.enhancement-animation {
+    margin: 1.5rem 0;
+    position: relative;
+    height: 2px;
+    background-color: var(--bg-tertiary);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.enhancement-line {
+    height: 100%;
+    width: 30%;
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
+    border-radius: 2px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: shimmer 1.5s infinite;
+}
+
+/* Modal Columns Layout */
+.modal-columns {
+    display: grid;
+    grid-template-columns: 1.5fr 1fr;
+    gap: 2rem;
+    height: 100%;
+}
+
+/* Image Viewer */
+.image-viewer-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    border-radius: var(--card-radius);
+    overflow: hidden;
+    box-shadow: 0 10px 30px var(--shadow-color);
+    background-color: var(--bg-tertiary);
+}
+
+.image-viewer-container img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    flex: 1;
+    display: block;
+    background-color: var(--bg-tertiary);
+}
+
+.image-actions {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    background-color: var(--bg-tertiary);
+    border-top: 1px solid var(--border-color);
+}
+
+.image-action-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    border-radius: var(--button-radius);
+    background-color: var(--bg-secondary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: all var(--transition-medium);
+    font-weight: 500;
+    font-size: 0.9rem;
+}
+
+.image-action-btn:hover {
+    background-color: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+}
+
+/* Image Details */
+.image-details {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.detail-section {
+    flex: 1;
+    margin-bottom: 2rem;
+}
+
+.detail-section-title {
+    font-size: 1.2rem;
+    margin-bottom: 1.5rem;
+    color: var(--text-secondary);
+    position: relative;
+}
+
+.detail-section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -7px;
+    left: 0;
+    width: 40px;
+    height: 3px;
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
+    border-radius: 3px;
+}
+
+.detail-item {
+    margin-bottom: 1.5rem;
+}
+
+.detail-label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.detail-value {
+    line-height: 1.5;
+    display: block;
+    color: var(--text-color);
+    font-size: 0.95rem;
+    background-color: var(--bg-tertiary);
+    padding: 0.75rem;
+    border-radius: var(--button-radius);
+    border: 1px solid var(--border-color);
+}
+
+.detail-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.stat-label {
+    font-size: 0.8rem;
+    color: var(--text-tertiary);
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.stat-value {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--text-color);
+    background-color: var(--bg-tertiary);
+    padding: 0.5rem;
+    border-radius: var(--button-radius);
+    border: 1px solid var(--border-color);
+    text-align: center;
+}
+
+.detail-actions {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+/* Reference Image Handling */
+.reference-image-container {
+    position: relative;
+}
+
+input[type="file"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 1;
+}
+
+.file-upload-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    border: 2px dashed var(--border-color);
+    border-radius: var(--button-radius);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all var(--transition-medium);
+}
+
+.file-upload-label:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    background-color: var(--primary-light);
+}
+
+.reference-preview {
+    margin-top: 1rem;
+    position: relative;
+    border-radius: var(--button-radius);
+    overflow: hidden;
+    box-shadow: 0 5px 15px var(--shadow-color);
+}
+
+.reference-preview img {
+    width: 100%;
+    display: block;
+}
+
+.remove-reference {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--transition-medium);
+}
+
+.remove-reference:hover {
+    background-color: var(--danger-color);
+}
+
+/* Share Modal */
+.share-preview {
+    width: 100%;
+    max-height: 300px;
+    overflow: hidden;
+    border-radius: var(--card-radius);
+    margin-bottom: 1.5rem;
+    box-shadow: 0 5px 20px var(--shadow-color);
+}
+
+.share-preview img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.share-options {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.share-btn {
+    padding: 0.75rem;
+    border-radius: var(--button-radius);
+    border: none;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-medium);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.share-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.share-btn.facebook {
+    background-color: #1877f2;
+}
+
+.share-btn.twitter {
+    background-color: #1da1f2;
+}
+
+.share-btn.pinterest {
+    background-color: #e60023;
+}
+
+.share-btn.whatsapp {
+    background-color: #25d366;
+}
+
+.share-link {
+    display: flex;
+    border-radius: var(--button-radius);
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+}
+
+.share-link input {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    border: none;
+    background-color: var(--bg-tertiary);
+    color: var(--text-color);
+    font-size: 0.9rem;
+}
+
+.copy-btn {
+    padding: 0 1rem;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color var(--transition-medium);
+}
+
+.copy-btn:hover {
+    background-color: var(--primary-hover);
+}
+
+/* Toast Notifications */
+#toast-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: 350px;
+}
+
+.toast {
+    background-color: var(--bg-secondary);
+    color: var(--text-color);
+    padding: 1rem 1.5rem;
+    border-radius: var(--button-radius);
+    box-shadow: 0 10px 30px var(--shadow-color);
+    margin-bottom: 10px;
+    animation: slideLeft 0.3s forwards;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+    border-left: 4px solid var(--primary-color);
+}
+
+.toast.info {
+    border-left-color: var(--info-color);
+}
+
+.toast.success {
+    border-left-color: var(--success-color);
+}
+
+.toast.warning {
+    border-left-color: var(--warning-color);
+}
+
+.toast.error {
+    border-left-color: var(--danger-color);
+}
+
+.toast-content {
+    flex: 1;
+}
+
+.toast-title {
+    font-weight: 600;
+    margin-bottom: 5px;
+    font-size: 1rem;
+}
+
+.toast-message {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+.toast-close {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 1.2rem;
+    transition: color var(--transition-medium);
+    align-self: flex-start;
+    margin-left: 10px;
+}
+
+.toast-close:hover {
+    color: var(--danger-color);
+}
+
+.toast-progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    background-color: var(--primary-color);
+    width: 100%;
+    animation: toast-progress 5s linear forwards;
+}
+
+@keyframes toast-progress {
+    0% { width: 100%; }
+    100% { width: 0%; }
+}
+
+.toast.exit {
+    animation: slideRight 0.3s forwards;
+}
+
+/* Responsive Styles */
+@media screen and (max-width: 1200px) {
+    .modal-columns {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+    
+    .image-viewer-container {
+        height: auto;
+        max-height: 500px;
+    }
+    
+    .detail-section {
+        margin-bottom: 1rem;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .main-content {
+        margin-left: 0;
+        padding: 1.5rem;
+    }
+    
+    .sidebar {
+        transform: translateX(-100%);
+    }
+    
+    .sidebar.active {
+        transform: translateX(0);
+    }
+    
+    .sidebar-close {
+        display: block;
+    }
+    
+    .image-display {
+        min-height: 400px;
+    }
+    
+    .placeholder-wrapper {
+        min-height: 400px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .app-header {
+        padding: 0 1rem;
+    }
+    
+    .header-logo .gradient-text {
+        font-size: 1.2rem;
+    }
+    
+    .content-section {
+        margin-bottom: 2rem;
+    }
+    
+    .history-gallery {
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: 1rem;
+    }
+    
+    .image-controls {
+        flex-direction: column;
+    }
+    
+    .modal-content {
+        width: 95%;
+    }
+    
+    .modal-footer {
+        flex-direction: column;
+    }
+    
+    .modal-footer .primary-btn,
+    .modal-footer .secondary-btn {
+        width: 100%;
+    }
+    
+    .share-options {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .header-controls {
+        gap: 0.5rem;
+    }
+    
+    .menu-toggle span {
+        display: none;
+    }
+    
+    .logo-text .gradient-text {
+        font-size: 1.8rem;
+    }
+    
+    .form-row {
+        flex-direction: column;
+    }
+    
+    .form-actions {
+        gap: 0.75rem;
+    }
+    
+    .history-gallery {
+        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+        gap: 0.75rem;
+    }
+    
+    .history-actions {
+        gap: 6px;
+    }
+    
+    .history-action-btn {
+        width: 30px;
+        height: 30px;
+        font-size: 0.8rem;
+    }
+    
+    .image-display {
+        min-height: 300px;
+    }
+    
+    .placeholder-wrapper {
+        min-height: 300px;
+    }
+    
+    .placeholder-icon {
+        font-size: 3rem;
+    }
+    
+    .detail-stats {
+        grid-template-columns: 1fr 1fr;
+    }
+}

static/data/history.json

@@ -0,0 +1 @@
+[{"imageUrl": "https://pornlabstaskstore.s3-accelerate.amazonaws.com/709156089bd6446897b225501d8931e2.jpg", "prompt": "A cute girl playing in ground Hd 4k image", "negativePrompt": "low quality , clothes", "seed": 137000, "width": 768, "height": 768, "timestamp": "2025-03-28T13:53:35.495Z", "id": "1743170015505"}, {"imageUrl": "https://pornlabstaskstore.s3-accelerate.amazonaws.com/acf526cf7dff45bf829355d22c3c715f.jpg", "prompt": "photo of a cheerful 7 year old boy with tousled brown hair, wearing a bright red t-shirt and denim shorts, joyfully playing in a vast green field filled with vibrant, colorful wildflowers of various types, under a clear, bright blue sky dotted with fluffy white clouds, sunlight casting a warm, golden glow on the scene, several butterflies fluttering around him, playful and delighted expression on his face as he runs amidst the flowers (field:1.1), (sunlight:1.1), (wildflowers:1.1)", "negativePrompt": "", "seed": 841852, "width": 768, "height": 768, "timestamp": "2025-03-28T13:22:58.806Z", "id": "1743168178808"}, {"imageUrl": "https://pornlabstaskstore.s3-accelerate.amazonaws.com/16f9da13d1f74d169f519e6d430ad79e.jpg", "prompt": "photo of a cute 7 year old boy with tousled brown hair wearing a bright red t-shirt and denim shorts, joyfully playing in a vast green field filled with colorful wildflowers, bright blue sky with fluffy white clouds, sunlight casting a warm glow, butterflies fluttering around, playful expression on his face", "negativePrompt": "", "seed": 841852, "width": 768, "height": 768, "timestamp": "2025-03-28T13:21:44.919Z", "id": "1743168104920"}]

static/js/main.js

@@ -0,0 +1,978 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize AOS (Animate On Scroll)
+    AOS.init({
+        duration: 800,
+        easing: 'ease-in-out',
+        once: false
+    });
+    
+    // Elements
+    const loadingScreen = document.getElementById('loading-screen');
+    const appContainer = document.getElementById('app-container');
+    const themeToggle = document.getElementById('theme-toggle');
+    const menuToggle = document.getElementById('menu-toggle');
+    const sidebarClose = document.getElementById('sidebar-close');
+    const sidebar = document.getElementById('sidebar');
+    const generationForm = document.getElementById('generation-form');
+    const promptInput = document.getElementById('prompt');
+    const negativePromptInput = document.getElementById('negative-prompt');
+    const widthSelect = document.getElementById('width');
+    const heightSelect = document.getElementById('height');
+    const seedInput = document.getElementById('seed');
+    const randomSeedBtn = document.getElementById('random-seed');
+    const tilingCheckbox = document.getElementById('tiling');
+    const advancedSettingsBtn = document.getElementById('advanced-settings-btn');
+    const upgradePromptBtn = document.getElementById('upgrade-prompt-btn');
+    const imageDisplay = document.getElementById('image-display');
+    const historyGallery = document.getElementById('history-gallery');
+    const latestCreation = document.getElementById('latest-creation');
+    
+    // Image Controls
+    const downloadCurrentBtn = document.getElementById('download-current');
+    const shareCurrentBtn = document.getElementById('share-current');
+    const favoriteCurrentBtn = document.getElementById('favorite-current');
+    
+    // Modals
+    const advancedSettingsModal = document.getElementById('advanced-settings-modal');
+    const promptModal = document.getElementById('prompt-modal');
+    const imageViewerModal = document.getElementById('image-viewer-modal');
+    const shareModal = document.getElementById('share-modal');
+    
+    // Advanced Settings Elements
+    const subseedInput = document.getElementById('subseed');
+    const attentionInput = document.getElementById('attention');
+    const attentionValue = document.getElementById('attention-value');
+    const referenceImageInput = document.getElementById('reference-image');
+    const referencePreview = document.getElementById('reference-preview');
+    const referencePreviewImg = document.getElementById('reference-preview-img');
+    const removeReferenceBtn = document.getElementById('remove-reference');
+    const referenceTypeSelect = document.getElementById('reference-type');
+    const referenceStrengthInput = document.getElementById('reference-strength');
+    const referenceStrengthValue = document.getElementById('reference-strength-value');
+    const resetAdvancedSettingsBtn = document.getElementById('reset-advanced-settings');
+    const saveAdvancedSettingsBtn = document.getElementById('save-advanced-settings');
+    
+    // Prompt Modal Elements
+    const originalPromptInput = document.getElementById('original-prompt');
+    const enhancedPromptInput = document.getElementById('enhanced-prompt');
+    const cancelPromptEnhancementBtn = document.getElementById('cancel-prompt-enhancement');
+    const useEnhancedPromptBtn = document.getElementById('use-enhanced-prompt');
+    
+    // Image Viewer Modal Elements
+    const viewerImage = document.getElementById('viewer-image');
+    const viewerPrompt = document.getElementById('viewer-prompt');
+    const viewerNegativePrompt = document.getElementById('viewer-negative-prompt');
+    const viewerSize = document.getElementById('viewer-size');
+    const viewerSeed = document.getElementById('viewer-seed');
+    const viewerTimestamp = document.getElementById('viewer-timestamp');
+    const downloadImageBtn = document.getElementById('download-image');
+    const shareImageBtn = document.getElementById('share-image');
+    const regenerateImageBtn = document.getElementById('regenerate-image');
+    const editPromptImageBtn = document.getElementById('edit-prompt-image');
+    
+    // Share Modal
+    const sharePreviewImg = document.getElementById('share-preview-img');
+    const shareLinkInput = document.getElementById('share-link-input');
+    const copyLinkBtn = document.getElementById('copy-link');
+    const shareBtns = document.querySelectorAll('.share-btn');
+    
+    // Global variables
+    let currentImage = null;
+    let referenceImageData = null;
+    let isGenerating = false;
+    const defaultAdvancedSettings = {
+        subseed: 0,
+        attention: 0.5,
+        referenceImage: null,
+        referenceType: 'style',
+        referenceStrength: 0.5
+    };
+    let advancedSettings = {...defaultAdvancedSettings};
+    let favoriteImages = [];
+    
+    // Initialize
+    initializeApp();
+    
+    function initializeApp() {
+        // Slower loading screen for a better experience
+        setTimeout(() => {
+            loadingScreen.style.opacity = '0';
+            setTimeout(() => {
+                loadingScreen.style.visibility = 'hidden';
+                appContainer.classList.remove('hidden');
+                
+                // Trigger AOS animations on initial load
+                AOS.refresh();
+            }, 800);
+        }, 3000);
+        
+        // Set random seed initially
+        seedInput.value = Math.floor(Math.random() * 999999);
+        
+        // Load theme preference
+        loadThemePreference();
+        
+        // Load image history
+        loadImageHistory();
+        
+        // Load favorites
+        loadFavorites();
+        
+        // Event listeners
+        setupEventListeners();
+    }
+    
+    function setupEventListeners() {
+        // Theme toggle
+        themeToggle.addEventListener('click', toggleTheme);
+        
+        // Mobile menu
+        menuToggle.addEventListener('click', () => sidebar.classList.add('active'));
+        sidebarClose.addEventListener('click', () => sidebar.classList.remove('active'));
+        
+        // Generate random seed
+        randomSeedBtn.addEventListener('click', generateRandomSeed);
+        
+        // Advanced settings modal
+        advancedSettingsBtn.addEventListener('click', openAdvancedSettingsModal);
+        
+        // Handle sliders in advanced settings
+        attentionInput.addEventListener('input', () => {
+            attentionValue.textContent = attentionInput.value;
+            advancedSettings.attention = parseFloat(attentionInput.value);
+        });
+        
+        referenceStrengthInput.addEventListener('input', () => {
+            referenceStrengthValue.textContent = referenceStrengthInput.value;
+            advancedSettings.referenceStrength = parseFloat(referenceStrengthInput.value);
+        });
+        
+        // Reference image handling
+        referenceImageInput.addEventListener('change', handleReferenceImageUpload);
+        removeReferenceBtn.addEventListener('click', removeReferenceImage);
+        
+        referenceTypeSelect.addEventListener('change', () => {
+            advancedSettings.referenceType = referenceTypeSelect.value;
+        });
+        
+        // Advanced settings buttons
+        resetAdvancedSettingsBtn.addEventListener('click', resetAdvancedSettings);
+        saveAdvancedSettingsBtn.addEventListener('click', () => closeModal(advancedSettingsModal));
+        
+        // Upgrade prompt button
+        upgradePromptBtn.addEventListener('click', handleUpgradePrompt);
+        
+        // Prompt modal buttons
+        cancelPromptEnhancementBtn.addEventListener('click', () => closeModal(promptModal));
+        useEnhancedPromptBtn.addEventListener('click', applyEnhancedPrompt);
+        
+        // Image controls
+        downloadCurrentBtn.addEventListener('click', downloadCurrentImage);
+        shareCurrentBtn.addEventListener('click', openShareModal);
+        favoriteCurrentBtn.addEventListener('click', toggleFavoriteCurrentImage);
+        
+        // Image viewer modal buttons
+        downloadImageBtn.addEventListener('click', downloadCurrentImage);
+        shareImageBtn.addEventListener('click', openShareModal);
+        regenerateImageBtn.addEventListener('click', regenerateSimilarImage);
+        editPromptImageBtn.addEventListener('click', editAndCreateNew);
+        
+        // Share modal buttons
+        copyLinkBtn.addEventListener('click', copyShareLink);
+        shareBtns.forEach(btn => {
+            btn.addEventListener('click', function() {
+                shareToSocialMedia(this.className.split(' ')[1]);
+            });
+        });
+        
+        // Close modals
+        document.querySelectorAll('.close-modal').forEach(btn => {
+            btn.addEventListener('click', () => {
+                closeAllModals();
+            });
+        });
+        
+        // Form submission
+        generationForm.addEventListener('submit', handleImageGeneration);
+        
+        // Escape key for modals
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                closeAllModals();
+            }
+        });
+        
+        // Disable context menu on images (for better UX)
+        document.addEventListener('contextmenu', function(e) {
+            if (e.target.tagName === 'IMG') {
+                e.preventDefault();
+                return false;
+            }
+        });
+    }
+    
+    function closeAllModals() {
+        closeModal(advancedSettingsModal);
+        closeModal(promptModal);
+        closeModal(imageViewerModal);
+        closeModal(shareModal);
+    }
+    
+    function loadThemePreference() {
+        const isDarkMode = localStorage.getItem('darkMode') !== 'false'; // Default to dark
+        setTheme(isDarkMode);
+    }
+    
+    function toggleTheme() {
+        const isDarkMode = !document.body.classList.contains('light-theme');
+        setTheme(!isDarkMode);
+        localStorage.setItem('darkMode', !isDarkMode);
+    }
+    
+    function setTheme(isDarkMode) {
+        if (isDarkMode) {
+            document.body.classList.remove('light-theme');
+            themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+        } else {
+            document.body.classList.add('light-theme');
+            themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+        }
+    }
+    
+    function generateRandomSeed() {
+        const newSeed = Math.floor(Math.random() * 999999);
+        seedInput.value = newSeed;
+        
+        // Add pulse animation to seed input
+        seedInput.classList.add('pulse-effect');
+        setTimeout(() => {
+            seedInput.classList.remove('pulse-effect');
+        }, 1000);
+        
+        showToast('Seed Updated', `Random seed generated: ${newSeed}`, 'info');
+    }
+    
+    function openAdvancedSettingsModal() {
+        // Update modal with current settings
+        subseedInput.value = advancedSettings.subseed;
+        attentionInput.value = advancedSettings.attention;
+        attentionValue.textContent = advancedSettings.attention;
+        referenceTypeSelect.value = advancedSettings.referenceType;
+        referenceStrengthInput.value = advancedSettings.referenceStrength;
+        referenceStrengthValue.textContent = advancedSettings.referenceStrength;
+        
+        // Update reference image preview if exists
+        if (referenceImageData) {
+            referencePreviewImg.src = referenceImageData;
+            referencePreview.classList.remove('hidden');
+        } else {
+            referencePreview.classList.add('hidden');
+        }
+        
+        openModal(advancedSettingsModal);
+    }
+    
+    function resetAdvancedSettings() {
+        advancedSettings = {...defaultAdvancedSettings};
+        subseedInput.value = defaultAdvancedSettings.subseed;
+        attentionInput.value = defaultAdvancedSettings.attention;
+        attentionValue.textContent = defaultAdvancedSettings.attention;
+        referenceTypeSelect.value = defaultAdvancedSettings.referenceType;
+        referenceStrengthInput.value = defaultAdvancedSettings.referenceStrength;
+        referenceStrengthValue.textContent = defaultAdvancedSettings.referenceStrength;
+        
+        removeReferenceImage();
+        showToast('Settings Reset', 'Advanced settings have been reset to defaults', 'info');
+    }
+    
+    function handleReferenceImageUpload(e) {
+        const file = e.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                referenceImageData = event.target.result;
+                referencePreviewImg.src = referenceImageData;
+                referencePreview.classList.remove('hidden');
+                advancedSettings.referenceImage = referenceImageData;
+                
+                showToast('Reference Added', 'Reference image uploaded successfully', 'success');
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    
+    function removeReferenceImage() {
+        referenceImageData = null;
+        advancedSettings.referenceImage = null;
+        referenceImageInput.value = '';
+        referencePreview.classList.add('hidden');
+    }
+    
+    async function handleUpgradePrompt() {
+        const prompt = promptInput.value.trim();
+        
+        if (!prompt) {
+            showToast('Error', 'Please enter a prompt to enhance', 'error');
+            return;
+        }
+        
+        showToast('Processing', 'Enhancing your prompt with AI...', 'info');
+        
+        try {
+            const response = await fetch('/api/upgrade-prompt', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ prompt })
+            });
+            
+            const data = await response.json();
+            
+            if (data.error) {
+                throw new Error(data.error);
+            }
+            
+            // Populate prompt modal
+            originalPromptInput.value = prompt;
+            enhancedPromptInput.value = data.upgradedPrompt || prompt;
+            
+            // Open modal
+            openModal(promptModal);
+            
+        } catch (error) {
+            console.error('Error upgrading prompt:', error);
+            showToast('Error', error.message || 'Failed to enhance prompt. Please try again.', 'error');
+        }
+    }
+    
+    function applyEnhancedPrompt() {
+        const enhancedPrompt = enhancedPromptInput.value.trim();
+        
+        if (enhancedPrompt) {
+            promptInput.value = enhancedPrompt;
+            showToast('Applied', 'Enhanced prompt applied successfully', 'success');
+        }
+        
+        closeModal(promptModal);
+    }
+    
+    async function handleImageGeneration(e) {
+        e.preventDefault();
+        
+        if (isGenerating) {
+            showToast('In Progress', 'An image is already being generated', 'warning');
+            return;
+        }
+        
+        const prompt = promptInput.value.trim();
+        
+        if (!prompt) {
+            showToast('Error', 'Please enter a prompt', 'error');
+            return;
+        }
+        
+        // Collect parameters
+        const params = {
+            prompt: prompt,
+            seed: parseInt(seedInput.value) || Math.floor(Math.random() * 999999),
+            subseed: parseInt(subseedInput.value) || 0,
+            attention: parseFloat(attentionInput.value) || 0.5,
+            width: parseInt(widthSelect.value) || 768,
+            height: parseInt(heightSelect.value) || 768,
+            tiling: tilingCheckbox.checked,
+            negative_prompt: negativePromptInput.value.trim(),
+            reference_image: referenceImageData,
+            reference_image_type: referenceImageData ? referenceTypeSelect.value : null,
+            reference_strength: referenceImageData ? parseFloat(referenceStrengthInput.value) : 0.5
+        };
+        
+        isGenerating = true;
+        showGeneratingUI();
+        
+        try {
+            // Generate the image
+            const taskResponse = await fetch('/api/generate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(params)
+            });
+            
+            const taskData = await taskResponse.json();
+            
+            if (taskData.error) {
+                throw new Error(taskData.error);
+            }
+            
+            const taskId = taskData.taskId;
+            
+            // Poll for completion
+            await pollImageProgress(taskId, params);
+            
+        } catch (error) {
+            console.error('Error generating image:', error);
+            showToast('Error', error.message || 'Failed to generate image. Please try again.', 'error');
+            hideGeneratingUI();
+            isGenerating = false;
+        }
+    }
+    
+    async function pollImageProgress(taskId, originalParams) {
+        // Start polling
+        const maxAttempts = 30; // 60 seconds (2s per poll)
+        let attempt = 0;
+        
+        const poll = async () => {
+            try {
+                const response = await fetch('/api/poll', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ taskId })
+                });
+                
+                const data = await response.json();
+                
+                if (data.error) {
+                    throw new Error(data.error);
+                }
+                
+                if (data.final_image_url) {
+                    // Image is ready
+                    const imageUrl = data.final_image_url;
+                    
+                    // Create image object
+                    currentImage = {
+                        imageUrl: imageUrl,
+                        prompt: originalParams.prompt,
+                        negativePrompt: originalParams.negative_prompt,
+                        seed: originalParams.seed,
+                        width: originalParams.width,
+                        height: originalParams.height,
+                        timestamp: new Date().toISOString()
+                    };
+                    
+                    // Display the image
+                    displayGeneratedImage(currentImage);
+                    
+                    // Save to history
+                    saveImageToHistory(currentImage);
+                    
+                    return;
+                }
+                
+                if (data.status === 'done' && !data.final_image_url) {
+                    throw new Error('Image generation completed but no image was returned.');
+                }
+                
+                // Continue polling
+                if (attempt < maxAttempts) {
+                    attempt++;
+                    setTimeout(poll, 2000);
+                } else {
+                    throw new Error('Image generation timed out. Please try again.');
+                }
+            } catch (error) {
+                console.error('Error polling progress:', error);
+                showToast('Error', error.message || 'Failed to generate image. Please try again.', 'error');
+                hideGeneratingUI();
+                isGenerating = false;
+            }
+        };
+        
+        await poll();
+    }
+    
+    function showGeneratingUI() {
+        // Show loading state in image display
+        imageDisplay.innerHTML = `
+            <div class="loading-shimmer"></div>
+            <div class="loading-indicator">
+                <div class="generation-status">
+                    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+                    <p>Creating your masterpiece...</p>
+                </div>
+            </div>
+        `;
+        
+        // Update generate button
+        const generateBtn = document.getElementById('generate-btn');
+        generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating...';
+        generateBtn.disabled = true;
+        
+        // Disable sidebar controls
+        advancedSettingsBtn.disabled = true;
+        upgradePromptBtn.disabled = true;
+    }
+    
+    function hideGeneratingUI() {
+        // Enable form controls
+        const generateBtn = document.getElementById('generate-btn');
+        generateBtn.innerHTML = '<i class="fas fa-bolt"></i> Create Image';
+        generateBtn.disabled = false;
+        
+        advancedSettingsBtn.disabled = false;
+        upgradePromptBtn.disabled = false;
+        
+        // If no image was generated, restore placeholder
+        if (!currentImage) {
+            imageDisplay.innerHTML = `
+                <div class="placeholder-wrapper">
+                    <div class="placeholder-content">
+                        <i class="fas fa-image placeholder-icon pulse-slow"></i>
+                        <p>Your masterpiece will appear here</p>
+                        <span class="helper-tip">Use the form to create something amazing</span>
+                    </div>
+                </div>
+            `;
+        }
+        
+        isGenerating = false;
+    }
+    
+    function displayGeneratedImage(imageData) {
+        // Update image display
+        imageDisplay.innerHTML = `
+            <img src="${imageData.imageUrl}" alt="Generated Image" class="display-image" />
+        `;
+        
+        // Update latest creation
+        updateLatestCreation(imageData);
+        
+        // Enable image controls
+        downloadCurrentBtn.disabled = false;
+        shareCurrentBtn.disabled = false;
+        favoriteCurrentBtn.disabled = false;
+        
+        // Update favorite button state
+        updateFavoriteButtonState();
+        
+        hideGeneratingUI();
+        
+        // Show success message
+        showToast('Success', 'Your creation is ready!', 'success');
+    }
+    
+    function updateLatestCreation(imageData) {
+        latestCreation.innerHTML = `
+            <img src="${imageData.imageUrl}" alt="Latest Creation" />
+        `;
+        
+        latestCreation.addEventListener('click', () => {
+            openImageViewer(imageData);
+        });
+    }
+    
+    function openImageViewer(imageData) {
+        // Set current image
+        currentImage = imageData;
+        
+        // Populate viewer details
+        viewerImage.src = imageData.imageUrl;
+        viewerPrompt.textContent = imageData.prompt;
+        viewerNegativePrompt.textContent = imageData.negativePrompt || 'None';
+        viewerSize.textContent = `${imageData.width} × ${imageData.height}`;
+        viewerSeed.textContent = imageData.seed;
+        
+        // Format date
+        const date = new Date(imageData.timestamp);
+        const formattedDate = date.toLocaleString();
+        viewerTimestamp.textContent = formattedDate;
+        
+        // Open modal
+        openModal(imageViewerModal);
+    }
+    
+    function regenerateSimilarImage(imageData) {
+        // Close modal
+        closeModal(imageViewerModal);
+        
+        // Fill form with same parameters
+        promptInput.value = currentImage.prompt;
+        negativePromptInput.value = currentImage.negativePrompt || '';
+        
+        // Select closest dimensions in dropdowns
+        selectClosestOption(widthSelect, currentImage.width);
+        selectClosestOption(heightSelect, currentImage.height);
+        
+        // Use same seed
+        seedInput.value = currentImage.seed;
+        
+        // Scroll to form
+        sidebar.scrollIntoView({ behavior: 'smooth' });
+        
+        // Show toast
+        showToast('Ready to Regenerate', 'Parameters loaded from selected image', 'info');
+    }
+    
+    function editAndCreateNew() {
+        // Close modal
+        closeModal(imageViewerModal);
+        
+        // Fill form with same parameters but focus on prompt
+        promptInput.value = currentImage.prompt;
+        negativePromptInput.value = currentImage.negativePrompt || '';
+        
+        // Select closest dimensions in dropdowns
+        selectClosestOption(widthSelect, currentImage.width);
+        selectClosestOption(heightSelect, currentImage.height);
+        
+        // Generate new seed for variation
+        generateRandomSeed();
+        
+        // Scroll to form and focus on prompt
+        sidebar.scrollIntoView({ behavior: 'smooth' });
+        promptInput.focus();
+        
+        // Show toast
+        showToast('Ready to Edit', 'Edit the prompt to create a new variation', 'info');
+    }
+    
+    function selectClosestOption(selectElement, value) {
+        let closestOption = null;
+        let closestDiff = Infinity;
+        
+        // Find the closest option
+        for (let i = 0; i < selectElement.options.length; i++) {
+            const optionValue = parseInt(selectElement.options[i].value);
+            const diff = Math.abs(optionValue - value);
+            
+            if (diff < closestDiff) {
+                closestDiff = diff;
+                closestOption = i;
+            }
+        }
+        
+        if (closestOption !== null) {
+            selectElement.selectedIndex = closestOption;
+        }
+    }
+    
+    function downloadCurrentImage() {
+        if (currentImage) {
+            downloadImage(currentImage.imageUrl);
+        }
+    }
+    
+    function downloadImage(url) {
+        // Create an anchor element
+        const a = document.createElement('a');
+        a.href = url;
+        
+        // Set the download attribute with a filename
+        const filename = 'adarshkumar-creation-' + Date.now() + '.png';
+        a.download = filename;
+        
+        // Append to the body, click, and remove
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        
+        showToast('Downloaded', 'Image saved to your device', 'success');
+    }
+    
+    function openShareModal() {
+        if (!currentImage) return;
+        
+        // Set share preview image
+        sharePreviewImg.src = currentImage.imageUrl;
+        
+        // Set share link
+        shareLinkInput.value = currentImage.imageUrl;
+        
+        openModal(shareModal);
+    }
+    
+    function copyShareLink() {
+        shareLinkInput.select();
+        document.execCommand('copy');
+        
+        showToast('Copied', 'Link copied to clipboard', 'success');
+    }
+    
+    function shareToSocialMedia(platform) {
+        if (!currentImage) return;
+        
+        const url = encodeURIComponent(currentImage.imageUrl);
+        const text = encodeURIComponent(`Check out this AI image I created: "${currentImage.prompt.substring(0, 50)}..."`);
+        let shareUrl = '';
+        
+        switch (platform) {
+            case 'facebook':
+                shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
+                break;
+            case 'twitter':
+                shareUrl = `https://twitter.com/intent/tweet?text=${text}&url=${url}`;
+                break;
+            case 'pinterest':
+                shareUrl = `https://pinterest.com/pin/create/button/?url=${url}&media=${url}&description=${text}`;
+                break;
+            case 'whatsapp':
+                shareUrl = `https://api.whatsapp.com/send?text=${text} ${url}`;
+                break;
+        }
+        
+        if (shareUrl) {
+            window.open(shareUrl, '_blank');
+        }
+    }
+    
+    function toggleFavoriteCurrentImage() {
+        if (!currentImage) return;
+        
+        const index = favoriteImages.findIndex(img => img.imageUrl === currentImage.imageUrl);
+        
+        if (index === -1) {
+            // Add to favorites
+            favoriteImages.push(currentImage);
+            showToast('Added to Favorites', 'Image saved to your favorites', 'success');
+        } else {
+            // Remove from favorites
+            favoriteImages.splice(index, 1);
+            showToast('Removed from Favorites', 'Image removed from your favorites', 'info');
+        }
+        
+        // Save favorites to localStorage
+        localStorage.setItem('favoriteImages', JSON.stringify(favoriteImages));
+        
+        // Update button state
+        updateFavoriteButtonState();
+    }
+    
+    function updateFavoriteButtonState() {
+        if (!currentImage) return;
+        
+        const isFavorite = favoriteImages.some(img => img.imageUrl === currentImage.imageUrl);
+        
+        if (isFavorite) {
+            favoriteCurrentBtn.innerHTML = '<i class="fas fa-heart"></i> Favorited';
+            favoriteCurrentBtn.classList.add('favorited');
+        } else {
+            favoriteCurrentBtn.innerHTML = '<i class="far fa-heart"></i> Favorite';
+            favoriteCurrentBtn.classList.remove('favorited');
+        }
+    }
+    
+    function loadFavorites() {
+        const storedFavorites = localStorage.getItem('favoriteImages');
+        
+        if (storedFavorites) {
+            try {
+                favoriteImages = JSON.parse(storedFavorites);
+            } catch (e) {
+                favoriteImages = [];
+            }
+        }
+    }
+    
+    async function saveImageToHistory(imageData) {
+        try {
+            // Save locally first for immediate feedback
+            let history = getLocalHistory();
+            
+            // Set an ID if none exists
+            if (!imageData.id) {
+                imageData.id = Date.now().toString();
+            }
+            
+            // Add to the beginning of the array
+            history.unshift(imageData);
+            
+            // Keep only the last 20 images
+            history = history.slice(0, 20);
+            
+            // Save to localStorage
+            localStorage.setItem('imageHistory', JSON.stringify(history));
+            
+            // Save to server
+            await fetch('/api/save-history', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(imageData)
+            });
+            
+            // Render gallery
+            renderHistoryGallery(history);
+            
+        } catch (error) {
+            console.error('Error saving to history:', error);
+        }
+    }
+    
+    async function loadImageHistory() {
+        try {
+            // Try to get from server first
+            const response = await fetch('/api/get-history');
+            const data = await response.json();
+            
+            if (data.images && Array.isArray(data.images) && data.images.length > 0) {
+                // Save to localStorage for offline access
+                localStorage.setItem('imageHistory', JSON.stringify(data.images));
+                renderHistoryGallery(data.images);
+            } else {
+                // Fall back to local storage
+                const history = getLocalHistory();
+                renderHistoryGallery(history);
+            }
+            
+        } catch (error) {
+            console.error('Error loading history:', error);
+            
+            // Fall back to local storage
+            const history = getLocalHistory();
+            renderHistoryGallery(history);
+        }
+    }
+    
+    function getLocalHistory() {
+        const storageData = localStorage.getItem('imageHistory');
+        
+        if (storageData) {
+            try {
+                return JSON.parse(storageData);
+            } catch (e) {
+                return [];
+            }
+        }
+        
+        return [];
+    }
+    
+    function renderHistoryGallery(images) {
+        if (!images || !Array.isArray(images) || images.length === 0) {
+            showEmptyHistoryMessage();
+            return;
+        }
+        
+        let galleryHTML = '';
+        
+        images.forEach(image => {
+            galleryHTML += `
+                <div class="history-item" data-image-id="${image.id || ''}">
+                    <img src="${image.imageUrl}" alt="${image.prompt}" class="history-img">
+                    <div class="history-overlay">
+                        <div class="history-prompt">${image.prompt}</div>
+                        <div class="history-actions">
+                            <button class="history-action-btn view-btn" title="View Details">
+                                <i class="fas fa-eye"></i>
+                            </button>
+                            <button class="history-action-btn regenerate-btn" title="Regenerate Similar">
+                                <i class="fas fa-sync-alt"></i>
+                            </button>
+                            <button class="history-action-btn download-btn" title="Download Image">
+                                <i class="fas fa-download"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+        
+        historyGallery.innerHTML = galleryHTML;
+        
+        // Add click events to history items
+        document.querySelectorAll('.history-item').forEach(item => {
+            const imageId = item.getAttribute('data-image-id');
+            const image = images.find(img => img.id === imageId);
+            
+            if (!image) return;
+            
+            // View button click
+            const viewBtn = item.querySelector('.view-btn');
+            viewBtn.addEventListener('click', (e) => {
+                e.stopPropagation(); // Prevent triggering the parent click
+                openImageViewer(image);
+            });
+            
+            // Regenerate button click
+            const regenerateBtn = item.querySelector('.regenerate-btn');
+            regenerateBtn.addEventListener('click', (e) => {
+                e.stopPropagation(); // Prevent triggering the parent click
+                regenerateSimilarImage(image);
+            });
+            
+            // Download button click
+            const downloadBtn = item.querySelector('.download-btn');
+            downloadBtn.addEventListener('click', (e) => {
+                e.stopPropagation(); // Prevent triggering the parent click
+                downloadImage(image.imageUrl);
+            });
+            
+            // Main image click (for viewing)
+            item.addEventListener('click', () => {
+                openImageViewer(image);
+            });
+        });
+    }
+    
+    function showEmptyHistoryMessage() {
+        historyGallery.innerHTML = `
+            <div class="empty-history-message">
+                <i class="fas fa-images"></i>
+                <p>Your creations will be displayed here</p>
+                <span class="helper-tip">Get started by generating your first image!</span>
+            </div>
+        `;
+    }
+    
+    function openModal(modal) {
+        modal.classList.add('active');
+        
+        // Add animation to modal content for better UX
+        const modalContent = modal.querySelector('.modal-content');
+        if (modalContent) {
+            modalContent.style.animation = 'none';
+            setTimeout(() => {
+                modalContent.style.animation = '';
+            }, 10);
+        }
+    }
+    
+    function closeModal(modal) {
+        modal.classList.remove('active');
+    }
+    
+    function showToast(title, message, type = 'info') {
+        const toastContainer = document.getElementById('toast-container');
+        
+        // Create toast element
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        
+        // Add toast content
+        toast.innerHTML = `
+            <div class="toast-content">
+                <div class="toast-title">${title}</div>
+                <div class="toast-message">${message}</div>
+            </div>
+            <button class="toast-close"><i class="fas fa-times"></i></button>
+            <div class="toast-progress"></div>
+        `;
+        
+        // Add to container
+        toastContainer.appendChild(toast);
+        
+        // Add close functionality
+        toast.querySelector('.toast-close').addEventListener('click', () => {
+            toast.classList.add('exit');
+            setTimeout(() => {
+                toast.remove();
+            }, 300);
+        });
+        
+        // Auto remove after 5 seconds
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.classList.add('exit');
+                setTimeout(() => {
+                    toast.remove();
+                }, 300);
+            }
+        }, 5000);
+    }
+});

templates/index.html

@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ADARSH KUMAR - AI Image Generator</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <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=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
+</head>
+<body>
+    <!-- Loading Screen -->
+    <div id="loading-screen">
+        <div class="loading-container">
+            <div class="loading-logo">
+                <div class="logo-animation">
+                    <div class="logo-circle"></div>
+                    <div class="logo-text">
+                        <span class="gradient-text">ADARSH KUMAR</span>
+                        <span class="subtext">IS MAKING IT</span>
+                    </div>
+                </div>
+            </div>
+            <div class="loading-animation">
+                <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+            </div>
+            <div class="loading-text">
+                <span class="animated-text">Initializing Creative Intelligence</span>
+                <div class="loading-dots">
+                    <span class="dot">.</span>
+                    <span class="dot">.</span>
+                    <span class="dot">.</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Application -->
+    <div id="app-container" class="hidden">
+        <!-- Header Area -->
+        <header class="app-header">
+            <div class="header-logo">
+                <span class="gradient-text">ADARSH KUMAR</span>
+                <span class="header-version">AI Studio </span>
+            </div>
+            
+            <div class="header-controls">
+                <button id="theme-toggle" class="theme-toggle" title="Toggle Dark/Light Mode">
+                    <i class="fas fa-moon"></i>
+                </button>
+                
+                <button id="menu-toggle" class="menu-toggle">
+                    <i class="fas fa-bars"></i>
+                    <span>Menu</span>
+                </button>
+            </div>
+        </header>
+
+        <!-- Main Container -->
+        <div class="main-container">
+            <!-- Sidebar -->
+            <div id="sidebar" class="sidebar">
+                <div class="sidebar-header">
+                    <h1 class="app-title">Creator Studio</h1>
+                    <button id="sidebar-close" class="sidebar-close">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+
+                <div class="sidebar-content">
+                    <div class="latest-creation-preview">
+                        <h3 class="sidebar-section-title">Latest Creation</h3>
+                        <div id="latest-creation" class="latest-creation">
+                            <div class="latest-creation-placeholder">
+                                <i class="fas fa-image"></i>
+                                <p>Generate an image to see it here</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <form id="generation-form">
+                        <div class="form-group">
+                            <label for="prompt">Prompt</label>
+                            <div class="prompt-container">
+                                <textarea id="prompt" placeholder="Describe your vision in detail..." rows="4"></textarea>
+                                <button type="button" id="upgrade-prompt-btn" class="upgrade-btn" title="Enhance with AI">
+                                    <i class="fas fa-wand-magic-sparkles"></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="negative-prompt">Negative Prompt</label>
+                            <textarea id="negative-prompt" placeholder="Elements to avoid in your image..." rows="2"></textarea>
+                        </div>
+
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label for="width">Width</label>
+                                <select id="width">
+                                    <option value="512">512px</option>
+                                    <option value="640">640px</option>
+                                    <option value="768" selected>768px</option>
+                                    <option value="1024">1024px</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="height">Height</label>
+                                <select id="height">
+                                    <option value="512">512px</option>
+                                    <option value="640">640px</option>
+                                    <option value="768" selected>768px</option>
+                                    <option value="1024">1024px</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="seed">Seed</label>
+                            <div class="seed-container">
+                                <input type="number" id="seed" min="0" max="999999" value="0">
+                                <button type="button" id="random-seed" class="random-btn pulse-effect" title="Generate random seed">
+                                    <i class="fas fa-dice"></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="form-group checkbox-group">
+                            <input type="checkbox" id="tiling">
+                            <label for="tiling">Seamless Tiling</label>
+                        </div>
+
+                        <div class="form-actions">
+                            <button type="button" id="advanced-settings-btn" class="secondary-btn">
+                                <i class="fas fa-sliders"></i> Advanced Settings
+                            </button>
+
+                            <button type="submit" id="generate-btn" class="primary-btn pulse-animation">
+                                <i class="fas fa-bolt"></i> Create Image
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <div class="main-content">
+                <div class="content-section" data-aos="fade-up">
+                    <h2 class="section-title">Creative Canvas</h2>
+                    <div id="image-display" class="image-display">
+                        <div class="placeholder-wrapper">
+                            <div class="placeholder-content">
+                                <i class="fas fa-image placeholder-icon pulse-slow"></i>
+                                <p>Your masterpiece will appear here</p>
+                                <span class="helper-tip">Use the form to create something amazing</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="image-controls">
+                        <button id="download-current" class="control-btn" disabled>
+                            <i class="fas fa-download"></i> Download
+                        </button>
+                        <button id="share-current" class="control-btn" disabled>
+                            <i class="fas fa-share-alt"></i> Share
+                        </button>
+                        <button id="favorite-current" class="control-btn" disabled>
+                            <i class="far fa-heart"></i> Favorite
+                        </button>
+                    </div>
+                </div>
+
+                <div class="content-section" data-aos="fade-up" data-aos-delay="100">
+                    <h2 class="section-title">Creation Gallery</h2>
+                    <div id="history-gallery" class="history-gallery">
+                        <!-- Will be populated by JavaScript -->
+                        <div class="empty-history-message">
+                            <i class="fas fa-images"></i>
+                            <p>Your creations will be displayed here</p>
+                            <span class="helper-tip">Get started by generating your first image!</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Advanced Settings Modal -->
+    <div id="advanced-settings-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2><i class="fas fa-cog fa-spin-pulse"></i> Advanced Settings</h2>
+                <button class="close-modal"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label for="subseed">Subseed</label>
+                    <input type="number" id="subseed" min="0" max="999999" value="0">
+                    <small class="setting-hint">Variation seed for more control</small>
+                </div>
+                
+                <div class="form-group">
+                    <label for="attention">Attention (Guidance Scale)</label>
+                    <div class="slider-container">
+                        <input type="range" id="attention" min="0" max="1" step="0.01" value="0.5">
+                        <span id="attention-value">0.5</span>
+                    </div>
+                    <small class="setting-hint">Higher values = more precise prompt following</small>
+                </div>
+                
+                <div class="form-group">
+                    <label>Reference Image</label>
+                    <div class="reference-image-container">
+                        <input type="file" id="reference-image" accept="image/*">
+                        <label for="reference-image" class="file-upload-label">
+                            <i class="fas fa-cloud-upload-alt"></i> Upload Reference
+                        </label>
+                    </div>
+                    <div id="reference-preview" class="reference-preview hidden">
+                        <img id="reference-preview-img" src="#" alt="Reference Image">
+                        <button id="remove-reference" class="remove-reference">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <small class="setting-hint">Use an existing image as reference</small>
+                </div>
+                
+                <div class="form-group">
+                    <label for="reference-type">Reference Type</label>
+                    <select id="reference-type">
+                        <option value="style">Style</option>
+                        <option value="content">Content</option>
+                        <option value="composition">Composition</option>
+                    </select>
+                    <small class="setting-hint">How to use the reference image</small>
+                </div>
+                
+                <div class="form-group">
+                    <label for="reference-strength">Reference Strength</label>
+                    <div class="slider-container">
+                        <input type="range" id="reference-strength" min="0" max="1" step="0.01" value="0.5">
+                        <span id="reference-strength-value">0.5</span>
+                    </div>
+                    <small class="setting-hint">How much influence the reference has</small>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button id="reset-advanced-settings" class="secondary-btn">
+                    <i class="fas fa-undo"></i> Reset
+                </button>
+                <button id="save-advanced-settings" class="primary-btn">
+                    <i class="fas fa-check"></i> Apply Settings
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Prompt Enhancement Modal -->
+    <div id="prompt-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2><i class="fas fa-magic"></i> AI Enhanced Prompt</h2>
+                <button class="close-modal"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label for="original-prompt">Your Original Prompt</label>
+                    <textarea id="original-prompt" rows="3" readonly></textarea>
+                </div>
+                
+                <div class="enhancement-animation">
+                    <div class="enhancement-line"></div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="enhanced-prompt">AI Enhanced Version</label>
+                    <textarea id="enhanced-prompt" rows="5"></textarea>
+                    <small class="setting-hint">Feel free to edit this enhanced prompt</small>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button id="cancel-prompt-enhancement" class="secondary-btn">
+                    <i class="fas fa-times"></i> Keep Original
+                </button>
+                <button id="use-enhanced-prompt" class="primary-btn">
+                    <i class="fas fa-check-double"></i> Use Enhanced
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Image Viewer Modal -->
+    <div id="image-viewer-modal" class="modal">
+        <div class="modal-content fullscreen">
+            <div class="modal-header">
+                <h2><i class="fas fa-image"></i> Image Showcase</h2>
+                <button class="close-modal"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="modal-body">
+                <div class="modal-columns">
+                    <div class="image-viewer-container">
+                        <img id="viewer-image" src="#" alt="Generated Image">
+                        <div class="image-actions">
+                            <button id="download-image" class="image-action-btn">
+                                <i class="fas fa-download"></i> Download
+                            </button>
+                            <button id="share-image" class="image-action-btn">
+                                <i class="fas fa-share-alt"></i> Share
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="image-details">
+                        <div class="detail-section">
+                            <h3 class="detail-section-title">Creation Details</h3>
+                            
+                            <div class="detail-item">
+                                <span class="detail-label"><i class="fas fa-keyboard"></i> Prompt:</span>
+                                <span id="viewer-prompt" class="detail-value"></span>
+                            </div>
+                            
+                            <div class="detail-item">
+                                <span class="detail-label"><i class="fas fa-ban"></i> Negative Prompt:</span>
+                                <span id="viewer-negative-prompt" class="detail-value"></span>
+                            </div>
+                            
+                            <div class="detail-stats">
+                                <div class="stat-item">
+                                    <span class="stat-label"><i class="fas fa-expand"></i> Size:</span>
+                                    <span id="viewer-size" class="stat-value"></span>
+                                </div>
+                                
+                                <div class="stat-item">
+                                    <span class="stat-label"><i class="fas fa-seedling"></i> Seed:</span>
+                                    <span id="viewer-seed" class="stat-value"></span>
+                                </div>
+                                
+                                <div class="stat-item">
+                                    <span class="stat-label"><i class="far fa-clock"></i> Created:</span>
+                                    <span id="viewer-timestamp" class="stat-value"></span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="detail-actions">
+                            <button id="regenerate-image" class="primary-btn full-width">
+                                <i class="fas fa-sync-alt fa-spin-hover"></i> Create Similar Image
+                            </button>
+                            <button id="edit-prompt-image" class="secondary-btn full-width">
+                                <i class="fas fa-edit"></i> Edit & Create New
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Share Modal -->
+    <div id="share-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2><i class="fas fa-share-alt"></i> Share Your Creation</h2>
+                <button class="close-modal"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="modal-body">
+                <div class="share-preview">
+                    <img id="share-preview-img" src="#" alt="Share Preview">
+                </div>
+                
+                <div class="share-options">
+                    <button class="share-btn facebook">
+                        <i class="fab fa-facebook"></i> Facebook
+                    </button>
+                    <button class="share-btn twitter">
+                        <i class="fab fa-twitter"></i> Twitter
+                    </button>
+                    <button class="share-btn pinterest">
+                        <i class="fab fa-pinterest"></i> Pinterest
+                    </button>
+                    <button class="share-btn whatsapp">
+                        <i class="fab fa-whatsapp"></i> WhatsApp
+                    </button>
+                </div>
+                
+                <div class="share-link">
+                    <input type="text" id="share-link-input" readonly>
+                    <button id="copy-link" class="copy-btn">
+                        <i class="fas fa-copy"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast Notifications Container -->
+    <div id="toast-container"></div>
+
+    <!-- Scripts -->
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html>