image: Migrate to Node.js.

Signed-off-by: Hadad <[email protected]>

.gitignore

@@ -0,0 +1,24 @@
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.DS_Store
+*.log
+logs/
+*.pid
+*.seed
+*.pid.lock
+.npm
+.eslintcache
+.node_repl_history
+.yarn-integrity
+dist/
+build/
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.cache/
+tmp/
+temp/

Dockerfile

@@ -3,20 +3,14 @@
 # SPDX-License-Identifier: Apache-2.0
 #
 
-# Use a specific container image for the app
-FROM python:latest
+FROM node:latest
 
-# Set the main working directory inside the container
 WORKDIR /app
 
-# Copy all files into the container
 COPY . .
 
-# Install all dependencies
-RUN pip install -r requirements.txt
+RUN npm install
 
-# Open the port so the app can be accessed
-EXPOSE 7860
+EXPOSE 3000
 
-# Start the app
-CMD ["python", "app.py"]
+CMD ["npm", "start"]

README.md

@@ -6,8 +6,8 @@ emoji: ⚡
 colorFrom: indigo
 colorTo: purple
 sdk: docker
-app_port: 7860
-pinned: false
+app_port: 3000
+pinned: true
 # Used to promote this Hugging Face Space
 models:
 - hadadrjt/JARVIS
@@ -81,6 +81,9 @@ models:
 - facebook/MobileLLM-R1-950M
 - Alibaba-NLP/Tongyi-DeepResearch-30B-A3B
 - openbmb/VoxCPM-0.5B
+- Wan-AI/Wan2.2-Animate-14B
+- decart-ai/Lucy-Edit-Dev
+- ibm-granite/granite-docling-258M
 # Used to promote this Hugging Face Space
 datasets:
 - fka/awesome-chatgpt-prompts

app.py

@@ -1,84 +0,0 @@
-#
-# SPDX-FileCopyrightText: Hadad <[email protected]>
-# SPDX-License-Identifier: Apache-2.0
-#
-
-import os
-from openai import OpenAI, OpenAIError
-import base64
-from io import BytesIO
-from PIL import Image
-from config import MODEL, SIZE, DESCRIPTION, EXAMPLES
-import gradio as gr
-
-def playground(model, size, prompt, mode="run"):
-    if not model or not size or not prompt or not prompt.strip():
-        return gr.update(interactive=False) if mode == "helper" else None
-    if mode == "helper":
-        return gr.update(interactive=True)
-
-    try:
-        response = OpenAI(
-            base_url=os.getenv("OPENAI_API_BASE_URL"),
-            api_key=os.getenv("OPENAI_API_KEY")
-        ).images.generate(
-            model=model,
-            prompt=prompt,
-            size=size,
-            n=1,
-            response_format="b64_json"
-        )
-
-    except OpenAIError:
-        raise gr.Error(
-            "The server is currently busy. Please try again later, "
-            "or consider switching to another model, "
-            "as each model has a different inference speed."
-        )
-
-    return Image.open(
-        BytesIO(
-            base64.b64decode(
-                response.data[0].b64_json
-            )
-        )
-    )
-
-with gr.Blocks(theme=gr.themes.Soft()) as app:
-    with gr.Sidebar(): gr.HTML(DESCRIPTION)
-    image = gr.Image(label="GENERATED IMAGE", type="pil")
-    model = gr.Dropdown(MODEL, label="MODEL")
-    size  = gr.Dropdown(SIZE, label="IMAGE SIZE")
-    input = gr.Textbox(
-        label="INSTRUCTIONS",
-        placeholder="Insert your prompt here...",
-        lines=2
-    )
-    submit = gr.Button("Generate", interactive=False)
-    [
-        (component.change if hasattr(component, "change") else component)(
-            (lambda model, size, prompt:
-                playground(model, size, prompt, "helper"))
-            if hasattr(component, "change") else playground,
-            [model, size, input],
-            [submit] if hasattr(component, "change") else [image]
-        )
-        for component in [
-            model,
-            size,
-            input,
-            submit.click,
-            input.submit
-        ]
-    ]
-    gr.Examples(EXAMPLES, inputs=[model, size, input], outputs=[image],
-        fn=playground, cache_examples=False, run_on_click=True)
-
-app.queue(
-    max_size=3,
-    default_concurrency_limit=3
-).launch(
-    show_api=False,
-    server_name="0.0.0.0",
-    pwa=True
-)

assets/css/styles.css

@@ -0,0 +1,523 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+* { 
+    margin: 0; 
+    padding: 0; 
+    box-sizing: border-box; 
+    -webkit-font-smoothing: antialiased; 
+    -moz-osx-font-smoothing: grayscale; 
+}
+
+:root {
+    --bg-primary: #0d0d0d;
+    --bg-secondary: #151515;
+    --bg-tertiary: #1c1c1c;
+    --bg-card: #181818;
+    --border: rgba(255, 255, 255, 0.05);
+    --border-hover: rgba(255, 255, 255, 0.1);
+    --text-primary: #fafafa;
+    --text-secondary: #9ca3af;
+    --text-muted: #6b7280;
+    --accent: #7c3aed;
+    --accent-hover: #6d28d9;
+    --danger: #ef4444;
+}
+
+body {
+    font-family: 'Inter', system-ui, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 100vh;
+    line-height: 1.6;
+    overflow-x: hidden;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+.gradient-bg {
+    background: 
+        radial-gradient(
+            ellipse at top left, 
+            rgba(124, 58, 237, 0.03) 0%, 
+            transparent 50%
+        ),
+        radial-gradient(
+            ellipse at bottom right, 
+            rgba(236, 72, 153, 0.03) 0%, 
+            transparent 50%
+        );
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+}
+
+.gradient-mesh {
+    background-image: 
+        radial-gradient(
+            at 20% 40%, 
+            hsla(280, 70%, 40%, 0.05) 0px, 
+            transparent 50%
+        ),
+        radial-gradient(
+            at 80% 20%, 
+            hsla(320, 70%, 40%, 0.04) 0px, 
+            transparent 50%
+        ),
+        radial-gradient(
+            at 40% 80%, 
+            hsla(200, 70%, 40%, 0.03) 0px, 
+            transparent 50%
+        );
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    opacity: 0.8;
+    animation: meshFloat 100s ease-in-out infinite;
+}
+
+@keyframes meshFloat {
+    0%, 100% { 
+        transform: translate(0, 0) scale(1) rotate(0deg); 
+    }
+    33% { 
+        transform: translate(-30px, -40px) scale(1.02) rotate(1deg); 
+    }
+    66% { 
+        transform: translate(30px, -30px) scale(0.98) rotate(-1deg); 
+    }
+}
+
+.card {
+    background: rgba(24, 24, 24, 0.4);
+    backdrop-filter: blur(60px);
+    border: 1px solid var(--border);
+    border-radius: clamp(16px, 2vw, 24px);
+    transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(
+        800px circle at var(--mouse-x) var(--mouse-y), 
+        rgba(124, 58, 237, 0.02), 
+        transparent 40%
+    );
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+}
+
+.card:hover::before { 
+    opacity: 1; 
+}
+
+.card:hover {
+    border-color: var(--border-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.btn {
+    border-radius: clamp(12px, 1.5vw, 16px);
+    font-weight: 600;
+    transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
+    position: relative;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: clamp(8px, 1vw, 12px);
+    border: none;
+    cursor: pointer;
+    z-index: 1;
+    font-size: clamp(14px, 1.5vw, 16px);
+}
+
+.btn::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        45deg, 
+        transparent 30%, 
+        rgba(255, 255, 255, 0.05) 50%, 
+        transparent 70%
+    );
+    transform: translateX(-100%) skewX(-20deg);
+    transition: transform 1.5s;
+}
+
+.btn:hover::after { 
+    transform: translateX(200%) skewX(-20deg); 
+}
+
+.btn-primary {
+    background: linear-gradient(
+        135deg, 
+        var(--accent), 
+        var(--accent-hover)
+    );
+    color: white;
+    padding: clamp(14px, 2vw, 20px) clamp(28px, 4vw, 48px);
+    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.2);
+}
+
+.btn-primary:hover:not(:disabled) {
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: 0 16px 40px rgba(124, 58, 237, 0.3);
+}
+
+.btn-primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+.btn-danger {
+    background: linear-gradient(135deg, var(--danger), #dc2626);
+    color: white;
+    padding: clamp(14px, 2vw, 20px) clamp(28px, 4vw, 48px);
+}
+
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.96);
+    backdrop-filter: blur(40px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    animation: fadeIn 0.4s ease;
+    padding: clamp(16px, 2vw, 24px);
+}
+
+.modal-content {
+    background: linear-gradient(
+        135deg, 
+        rgba(28, 28, 28, 0.98), 
+        rgba(24, 24, 24, 0.98)
+    );
+    border-radius: clamp(20px, 2.5vw, 32px);
+    padding: clamp(24px, 4vw, 48px);
+    max-width: min(90%, 720px);
+    width: 100%;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
+    animation: slideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+    position: relative;
+    overflow: hidden;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+.modal-content::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: conic-gradient(
+        from 0deg at 50% 50%, 
+        rgba(124, 58, 237, 0.04), 
+        rgba(236, 72, 153, 0.04), 
+        rgba(59, 130, 246, 0.04), 
+        rgba(124, 58, 237, 0.04)
+    );
+    animation: rotate 90s linear infinite;
+}
+
+@keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideUp {
+    from { 
+        opacity: 0; 
+        transform: translateY(60px) scale(0.9); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateY(0) scale(1); 
+    }
+}
+
+.progress-bar {
+    width: 100%;
+    height: 4px;
+    background: rgba(124, 58, 237, 0.1);
+    border-radius: 2px;
+    overflow: hidden;
+    margin: 20px 0;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), #ec4899);
+    transition: width 0.3s ease;
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% { opacity: 0.8; }
+    50% { opacity: 1; }
+    100% { opacity: 0.8; }
+}
+
+.image-output-section {
+    min-height: clamp(120px, 15vh, 200px);
+    border: 2px dashed var(--border);
+    border-radius: clamp(20px, 2.5vw, 32px);
+    padding: clamp(32px, 4vw, 60px);
+    margin-bottom: clamp(32px, 4vw, 56px);
+    text-align: center;
+    transition: all 0.5s ease;
+    background: rgba(24, 24, 24, 0.2);
+    position: relative;
+    overflow: hidden;
+}
+
+.image-output-section.has-images {
+    border: none;
+    padding: 0;
+    background: transparent;
+}
+
+.image-grid {
+    display: grid;
+    gap: clamp(20px, 2.5vw, 36px);
+    grid-template-columns: repeat(
+        auto-fit, 
+        minmax(
+            min(100%, clamp(280px, 35vw, 400px)), 
+            1fr
+        )
+    );
+    justify-content: center;
+    justify-items: center;
+    align-items: start;
+}
+
+.image-card {
+    position: relative;
+    border-radius: clamp(16px, 2vw, 24px);
+    overflow: hidden;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
+    animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+    width: 100%;
+    max-width: fit-content;
+}
+
+.image-card img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+}
+
+.image-card:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
+    border-color: rgba(124, 58, 237, 0.2);
+}
+
+@keyframes scaleIn {
+    from { 
+        opacity: 0; 
+        transform: scale(0.7) translateY(60px); 
+    }
+    to { 
+        opacity: 1; 
+        transform: scale(1) translateY(0); 
+    }
+}
+
+.image-actions {
+    position: absolute;
+    top: clamp(16px, 2vw, 24px);
+    right: clamp(16px, 2vw, 24px);
+    display: flex;
+    gap: clamp(10px, 1.5vw, 14px);
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: all 0.3s ease;
+}
+
+.image-card:hover .image-actions {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.action-btn {
+    width: clamp(40px, 5vw, 52px);
+    height: clamp(40px, 5vw, 52px);
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(40px);
+    border-radius: clamp(12px, 1.5vw, 18px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    color: white;
+}
+
+.action-btn:hover {
+    background: rgba(124, 58, 237, 0.2);
+    transform: scale(1.15) rotate(10deg);
+    border-color: rgba(124, 58, 237, 0.3);
+}
+
+.input-field {
+    background: rgba(28, 28, 28, 0.5);
+    border: 1px solid var(--border);
+    border-radius: clamp(12px, 1.5vw, 18px);
+    padding: clamp(16px, 2vw, 22px) clamp(20px, 2.5vw, 28px);
+    color: var(--text-primary);
+    width: 100%;
+    font-size: clamp(14px, 1.5vw, 16px);
+    transition: all 0.3s ease;
+    outline: none;
+}
+
+.input-field:focus {
+    border-color: rgba(124, 58, 237, 0.3);
+    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.06);
+    background: rgba(28, 28, 28, 0.7);
+    transform: translateY(-1px);
+}
+
+.select-field {
+    appearance: none;
+    background-image: url(
+        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M8 11L3 6h10z'/%3E%3C/svg%3E"
+    );
+    background-repeat: no-repeat;
+    background-position: right clamp(20px, 2.5vw, 28px) center;
+    padding-right: clamp(48px, 6vw, 64px);
+    cursor: pointer;
+}
+
+.textarea-field {
+    resize: vertical;
+    min-height: clamp(140px, 20vh, 200px);
+    font-family: 'JetBrains Mono', monospace;
+    line-height: 1.7;
+    word-wrap: break-word;
+    word-break: break-word;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+}
+
+.example-card {
+    background: rgba(28, 28, 28, 0.3);
+    border: 1px solid var(--border);
+    border-radius: clamp(14px, 1.8vw, 20px);
+    padding: clamp(20px, 2.5vw, 32px);
+    cursor: pointer;
+    transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
+    position: relative;
+    overflow: hidden;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+.example-card p {
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+}
+
+.example-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        135deg, 
+        rgba(124, 58, 237, 0.05), 
+        rgba(236, 72, 153, 0.05)
+    );
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+.example-card:hover::before { 
+    opacity: 1; 
+}
+
+.example-card:hover {
+    transform: translateX(12px) scale(1.02);
+    border-color: rgba(124, 58, 237, 0.25);
+    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.3);
+}
+
+.loading-spinner {
+    width: clamp(24px, 3vw, 32px);
+    height: clamp(24px, 3vw, 32px);
+    border: 3px solid rgba(255, 255, 255, 0.1);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.header-gradient {
+    background: linear-gradient(135deg, #7c3aed, #ec4899, #3b82f6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 900;
+    background-size: 200% 200%;
+    animation: gradientShift 12s ease infinite;
+}
+
+@keyframes gradientShift {
+    0%, 100% { 
+        background-position: 0% 50%; 
+    }
+    50% { 
+        background-position: 100% 50%; 
+    }
+}
+
+@media (max-width: 144px) {
+    body { 
+        font-size: 10px; 
+    }
+    .modal-content { 
+        padding: 12px; 
+    }
+}
+
+@media (min-width: 3840px) {
+    body { 
+        font-size: 22px; 
+    }
+}
+
+@media (min-width: 7680px) {
+    body { 
+        font-size: 36px; 
+    }
+}

assets/css/webLoader.css

@@ -0,0 +1,250 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    padding: 20px;
+}
+
+.modal-content {
+    background: var(--card-bg);
+    border-radius: 24px;
+    padding: clamp(32px, 4vw, 48px);
+    max-width: min(90%, 600px);
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+.modal-content::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(
+        circle at center,
+        rgba(99, 102, 241, 0.1) 0%,
+        transparent 70%
+    );
+    animation: pulse 4s ease-in-out infinite;
+}
+
+.modal-inner {
+    position: relative;
+    z-index: 1;
+}
+
+.modal-title {
+    font-size: clamp(24px, 5vw, 48px);
+    margin-bottom: clamp(20px, 3vw, 40px);
+    text-align: center;
+}
+
+.modal-text {
+    color: var(--text-secondary);
+    line-height: 1.8;
+    margin-bottom: clamp(24px, 3vw, 40px);
+    font-size: clamp(14px, 1.8vw, 17px);
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+.modal-error-title {
+    font-size: clamp(20px, 3vw, 28px);
+    font-weight: 700;
+    color: var(--danger);
+    margin-bottom: clamp(16px, 2vw, 24px);
+    text-align: center;
+}
+
+.modal-error-text {
+    color: var(--text-secondary);
+    margin-bottom: clamp(20px, 3vw, 32px);
+    text-align: center;
+    font-size: clamp(14px, 1.8vw, 17px);
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+.header-main {
+    border-bottom: 1px solid var(--border);
+    padding: clamp(20px, 3vw, 32px) 0;
+}
+
+.header-title {
+    font-size: clamp(32px, 6vw, 64px);
+}
+
+.main-content {
+    padding: clamp(24px, 4vw, 48px) 16px;
+    max-width: min(100%, 1800px);
+}
+
+.loading-container {
+    padding: clamp(32px, 4vw, 60px);
+}
+
+.loading-text {
+    color: var(--text-secondary);
+    font-size: clamp(16px, 2vw, 20px);
+    font-weight: 600;
+    margin-bottom: 16px;
+}
+
+.progress-text {
+    color: var(--text-muted);
+    font-size: clamp(14px, 1.6vw, 16px);
+}
+
+.image-actions form {
+    margin: 0;
+}
+
+.image-info {
+    padding: clamp(20px, 2.5vw, 28px);
+    border-top: 1px solid var(--border);
+}
+
+.image-prompt {
+    font-size: clamp(13px, 1.5vw, 15px);
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+.image-meta {
+    font-size: clamp(12px, 1.4vw, 14px);
+    color: var(--text-muted);
+}
+
+.image-model {
+    font-weight: 700;
+    color: var(--accent);
+}
+
+.placeholder-icon {
+    margin: 0 auto clamp(20px, 2.5vw, 28px);
+    opacity: 0.15;
+}
+
+.placeholder-text {
+    color: var(--text-muted);
+    font-size: clamp(16px, 2vw, 20px);
+    font-weight: 500;
+}
+
+.form-section {
+    padding: clamp(32px, 4vw, 48px);
+    margin-bottom: clamp(32px, 4vw, 48px);
+}
+
+.form-grid {
+    margin-bottom: clamp(24px, 3vw, 36px);
+}
+
+.form-label {
+    display: block;
+    font-size: clamp(13px, 1.5vw, 15px);
+    font-weight: 700;
+    color: var(--text-secondary);
+    margin-bottom: clamp(10px, 1.2vw, 14px);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.form-group {
+    margin-bottom: clamp(24px, 3vw, 36px);
+}
+
+.button-icon {
+    width: clamp(20px, 2.5vw, 28px);
+    height: clamp(20px, 2.5vw, 28px);
+}
+
+.examples-section {
+    padding: clamp(32px, 4vw, 48px);
+}
+
+.examples-title {
+    font-size: clamp(24px, 3vw, 32px);
+    font-weight: 800;
+    color: var(--text-secondary);
+    margin-bottom: clamp(24px, 3vw, 36px);
+}
+
+.example-text {
+    margin-bottom: clamp(12px, 1.5vw, 16px);
+    font-size: clamp(14px, 1.6vw, 16px);
+    line-height: 1.6;
+    font-weight: 500;
+}
+
+.example-meta {
+    font-size: clamp(12px, 1.4vw, 14px);
+    color: var(--text-muted);
+    font-weight: 700;
+}
+
+.example-model {
+    color: var(--accent);
+}
+
+.footer-main {
+    border-top: 1px solid var(--border);
+    padding: clamp(32px, 4vw, 48px) 0;
+    margin-top: clamp(80px, 10vw, 140px);
+}
+
+.footer-copyright {
+    font-size: clamp(13px, 1.5vw, 15px);
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+.footer-link {
+    display: flex;
+    align-items: center;
+    gap: clamp(10px, 1.5vw, 16px);
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: all 0.3s;
+    font-size: clamp(13px, 1.5vw, 15px);
+    font-weight: 600;
+}
+
+.footer-link:hover {
+    color: var(--accent);
+    transform: translateX(-6px);
+}
+
+.footer-icon {
+    width: clamp(20px, 2.5vw, 26px);
+    height: clamp(20px, 2.5vw, 26px);
+}
+
+.modal-error-content {
+    max-width: min(90%, 480px);
+}
+
+.action-icon {
+    width: clamp(20px, 2.5vw, 28px);
+    height: clamp(20px, 2.5vw, 28px);
+}

assets/plugins/imageGenerator.js

@@ -0,0 +1,22 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+(function () {
+  'use strict';
+
+  var isGenerating = false;
+  var requestId = '';
+
+  if (document && document.body) {
+    isGenerating = document.body.dataset.isGenerating === 'true';
+    requestId = document.body.dataset.requestId || '';
+  }
+
+  if (isGenerating) {
+    setTimeout(function () {
+      window.location.href = '/?rid=' + encodeURIComponent(requestId);
+    }, 10000);
+  }
+})();

assets/plugins/webLoader.js

@@ -0,0 +1,340 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+(function () {
+  'use strict';
+
+  var noop = function () {};
+  var methods = [
+    'log', 'error', 'warn', 'info', 'debug', 'trace', 
+    'dir', 'table', 'time', 'timeEnd', 'timeLog', 'group', 
+    'groupEnd', 'assert', 'count', 'countReset', 'profile', 
+    'profileEnd', 'clear', 'dirxml', 'exception', 
+    'groupCollapsed'
+  ];
+
+  var disableConsole = function () {
+    methods.forEach(function (m) {
+      try {
+        window.console[m] = noop;
+      } catch (e) {}
+    });
+
+    try {
+      Object.defineProperty(window, 'console', {
+        value: Object.freeze(Object.create(null)),
+        writable: false,
+        configurable: false
+      });
+    } catch (e) {}
+  };
+
+  disableConsole();
+
+  var InitWelcomeModal = function () {
+    try {
+      var hasShown = localStorage.getItem(
+        'welcomeModalShown'
+      );
+      if (!hasShown) {
+        var modal = document.getElementById(
+          'welcomeModal'
+        );
+        if (modal) {
+          modal.style.display = 'flex';
+        }
+      }
+    } catch (e) {
+      var modal = document.getElementById(
+        'welcomeModal'
+      );
+      if (modal) {
+        modal.style.display = 'flex';
+      }
+    }
+  };
+
+  var closeWelcomeModal = function () {
+    var modal = document.getElementById('welcomeModal');
+    if (modal) {
+      modal.style.display = 'none';
+      try {
+        localStorage.setItem(
+          'welcomeModalShown', 
+          'true'
+        );
+      } catch (e) {}
+    }
+  };
+
+  var closeErrorModal = function () {
+    var modal = document.getElementById('errorModal');
+    if (modal) {
+      modal.style.animation = 'fadeIn 0.5s ease reverse';
+      setTimeout(function () {
+        modal.remove();
+      }, 500);
+    }
+  };
+
+  var validateInputs = function () {
+    var model = document.getElementById('modelSelect');
+    var size = document.getElementById('sizeSelect');
+    var prompt = document.getElementById('promptInput');
+    var submitBtn = document.getElementById('submitBtn');
+
+    if (!model || !size || !prompt || !submitBtn) return;
+
+    var modelValue = model.value;
+    var sizeValue = size.value;
+    var promptValue = prompt.value
+      .trim()
+      .replace(/\s+/g, ' ')
+      .replace(/[\t\n\r]/g, '');
+
+    var isValid = !!modelValue &&
+      !!sizeValue &&
+      !!promptValue &&
+      promptValue.length > 0;
+
+    submitBtn.disabled = !isValid;
+  };
+
+  var triggerExample = function (prompt, model, size) {
+    var modelSelect = document.getElementById(
+      'modelSelect'
+    );
+    var sizeSelect = document.getElementById(
+      'sizeSelect'
+    );
+    var promptInput = document.getElementById(
+      'promptInput'
+    );
+    var form = document.getElementById('generateForm');
+
+    if (modelSelect) modelSelect.value = model;
+    if (sizeSelect) sizeSelect.value = size;
+    if (promptInput) promptInput.value = prompt;
+
+    validateInputs();
+
+    if (form) {
+      setTimeout(function () {
+        var fa = document.getElementById('formAction');
+        if (fa) fa.value = 'generate';
+        form.submit();
+      }, 100);
+    }
+  };
+
+  var cancelGeneration = function () {
+    var form = document.getElementById('generateForm');
+    var fa = document.getElementById('formAction');
+    var cancelBtn = event && event.target 
+      ? event.target.closest('button') 
+      : null;
+    
+    if (cancelBtn) {
+      cancelBtn.disabled = true;
+      cancelBtn.style.opacity = '0.6';
+      cancelBtn.style.cursor = 'not-allowed';
+      
+      var btnText = cancelBtn.querySelector('span') || 
+        cancelBtn.childNodes[
+          cancelBtn.childNodes.length - 1
+        ];
+      if (btnText && btnText.nodeType === 3) {
+        btnText.textContent = 'Cancelling...';
+      } else if (!btnText) {
+        var textNode = Array.from(
+          cancelBtn.childNodes
+        ).find(function(node) {
+          return node.nodeType === 3 && 
+            node.textContent.trim();
+        });
+        if (textNode) {
+          textNode.textContent = 'Cancelling...';
+        }
+      }
+    }
+    
+    if (fa) {
+      fa.value = 'cancel';
+      
+      if (form) {
+        var hiddenCancel = document.createElement(
+          'input'
+        );
+        hiddenCancel.type = 'hidden';
+        hiddenCancel.name = 'forceCancel';
+        hiddenCancel.value = 'true';
+        form.appendChild(hiddenCancel);
+        
+        var timestamp = document.createElement('input');
+        timestamp.type = 'hidden';
+        timestamp.name = 'cancelTime';
+        timestamp.value = Date.now();
+        form.appendChild(timestamp);
+        
+        try {
+          form.submit();
+        } catch (e) {
+          form.requestSubmit && form.requestSubmit();
+        }
+        
+        setTimeout(function() {
+          if (form && fa) {
+            fa.value = 'cancel';
+            try {
+              form.submit();
+            } catch (e) {
+              window.location.reload();
+            }
+          }
+        }, 500);
+        
+        setTimeout(function() {
+          window.location.reload();
+        }, 3000);
+      }
+    } else if (form) {
+      var newFA = document.createElement('input');
+      newFA.type = 'hidden';
+      newFA.id = 'formAction';
+      newFA.name = 'action';
+      newFA.value = 'cancel';
+      form.appendChild(newFA);
+      
+      try {
+        form.submit();
+      } catch (e) {
+        window.location.reload();
+      }
+    } else {
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', window.location.href, true);
+      xhr.setRequestHeader('Content-Type', 
+        'application/x-www-form-urlencoded');
+      xhr.onload = function() {
+        window.location.reload();
+      };
+      xhr.onerror = function() {
+        window.location.reload();
+      };
+      xhr.send('action=cancel&forceCancel=true');
+    }
+    
+    window.cancelRequested = true;
+    
+    if (window.EventSource) {
+      try {
+        var sources = window.eventSources || [];
+        sources.forEach(function(source) {
+          if (source && source.close) {
+            source.close();
+          }
+        });
+      } catch (e) {}
+    }
+    
+    if (window.AbortController && 
+        window.abortController) {
+      try {
+        window.abortController.abort();
+      } catch (e) {}
+    }
+    
+    setTimeout(function() {
+      if (window.cancelRequested) {
+        window.stop && window.stop();
+        document.execCommand && 
+          document.execCommand('Stop');
+      }
+    }, 100);
+  };
+
+  var modelSelect = document.getElementById(
+    'modelSelect'
+  );
+  var sizeSelect = document.getElementById(
+    'sizeSelect'
+  );
+  var promptInput = document.getElementById(
+    'promptInput'
+  );
+
+  if (modelSelect) {
+    modelSelect.addEventListener(
+      'change', 
+      validateInputs
+    );
+  }
+  if (sizeSelect) {
+    sizeSelect.addEventListener(
+      'change', 
+      validateInputs
+    );
+  }
+
+  if (promptInput) {
+    promptInput.addEventListener(
+      'input', 
+      validateInputs
+    );
+    promptInput.addEventListener('paste', function () {
+      setTimeout(validateInputs, 10);
+    });
+    promptInput.addEventListener(
+      'keydown', 
+      function (e) {
+        if (e.key === 'Enter' && e.ctrlKey) {
+          e.preventDefault();
+          var submitBtn = document.getElementById(
+            'submitBtn'
+          );
+          if (submitBtn && !submitBtn.disabled) {
+            var form = document.getElementById(
+              'generateForm'
+            );
+            if (form) form.submit();
+          }
+        }
+      }
+    );
+  }
+
+  window.closeWelcomeModal = closeWelcomeModal;
+  window.closeErrorModal = closeErrorModal;
+  window.triggerExample = triggerExample;
+  window.cancelGeneration = cancelGeneration;
+
+  validateInputs();
+
+  var cards = document.querySelectorAll('.card');
+  Array.prototype.forEach.call(cards, function (card) {
+    card.addEventListener('mousemove', function (e) {
+      var rect = card.getBoundingClientRect();
+      var x = e.clientX - rect.left;
+      var y = e.clientY - rect.top;
+      card.style.setProperty('--mouse-x', x + 'px');
+      card.style.setProperty('--mouse-y', y + 'px');
+    });
+  });
+
+  document.addEventListener('DOMContentLoaded', 
+    function() {
+      InitWelcomeModal();
+    }
+  );
+
+  if (document.readyState === 'complete' || 
+      document.readyState === 'interactive') {
+    InitWelcomeModal();
+  }
+
+  setInterval(function () {
+    disableConsole();
+  }, 1000);
+})();

config.js

@@ -0,0 +1,33 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+export default {
+  server: {
+    port: 3000,
+    host: '0.0.0.0'
+  },
+  api: {
+    baseUrl: process.env.OPENAI_API_BASE_URL,
+    key: process.env.OPENAI_API_KEY,
+    timeout: 120000
+  },
+  storage: {
+    maxAge: 600000,
+    cleanupInterval: 60000
+  },
+  limits: {
+    bodySize: '2mb',
+    maxContentLength: Infinity
+  },
+  generation: {
+    progressInterval: 800,
+    startDelay: 100,
+    maxProgress: 90
+  },
+  paths: {
+    views: 'public',
+    mainView: 'webViewer'
+  }
+};

config.py

@@ -1,57 +0,0 @@
-#
-# SPDX-FileCopyrightText: Hadad <[email protected]>
-# SPDX-License-Identifier: Apache-2.0
-#
-
-MODEL = [
-    "flux", "kontext", "turbo"
-]
-
-SIZE = [
-    "256x256", "512x512",  "1024x1024",
-    "512x768", "768x1024", "1024x1536",
-    "768x512", "1024x768", "1536x1024"
-]
-
-EXAMPLES=[
-    ["flux", "1024x1024", "A woman riding a horse in the forest"],
-    ["kontext", "1024x1024",
-     "A cozy cabin in the snowy mountains, warm lights glowing inside"],
-    ["turbo", "1024x1024",
-     "A cute cat astronaut floating in space, holding a little flag"],
-    ["kontext", "1024x1024",
-     "An ancient library filled with floating books and magical lights"],
-    ["flux", "1024x1024",
-     "Tropical beach with crystal-clear water and palm trees swaying"],
-    ["flux", "1024x1024",
-     "Cyberpunk street musician with neon tattoos"],
-    ["flux", "1024x1024",
-     "Abstract watercolor splash resembling a city skyline"],
-    ["flux", "1024x1024",
-     "Anatomical diagram of the human heart in textbook style"]
-]
-
-DESCRIPTION = """
-Welcome to the <b>Image Generation Playground</b>, where imagination transforms 
-into visual creations.
-<br><br>
-
-For your information, <b>image generation</b> and <b>OpenAI Audio TTS</b> 
-is already built-in natively in the primary spaces.
-<br><br>
-
-For more advanced capabilities, 
-please visit the <b><a href='https://umint-openwebui.hf.space' 
-target='_blank'>UltimaX Intelligence</a></b> primary spaces.
-<br><br>
-
-Please consider reading the <b><a href=
-'https://huggingface.co/spaces/umint/ai/discussions/37#68b55209c51ca52ed299db4c' 
-target='_blank'>Terms of Use and Consequences of Violation</a></b> 
-if you wish to proceed to the main Spaces.
-<br><br>
-
-<b>Like this project? Feel free to buy me a 
-<a href='https://ko-fi.com/hadad' target='_blank'>
-coffee</a></b>.
-"""

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "Image Generation Playground",
+  "version": "0.0.1",
+  "description": "Part of the UltimaX Intelligence ecosystem",
+  "type": "module",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "keywords": [
+    "Image Generation",
+    "playground",
+    "UltimaX Intelligence",
+    "umint",
+    "Pollinations.AI"
+  ],
+  "author": "Hadad Darajat",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "axios": "latest",
+    "ejs": "latest",
+    "express": "latest"
+  },
+  "homepage": "https://umint-image.hf.space"
+}

public/webViewer.ejs

@@ -0,0 +1,386 @@
+<!-- 
+  SPDX-FileCopyrightText: Hadad <[email protected]>
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" 
+          content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+
+    <meta name="author" content="Hadad Darajat" />
+
+    <meta name="description"
+          content="UltimaX Intelligence is a free AI platform unifying 
+                   multiple premium AI models with an intuitive 
+                   ChatGPT-like interface. Powered by Pollinations 
+                   open-source AI and integrated with OpenWebUI, 
+                   it offers advanced features, no cost, no registration, 
+                   and ensures user privacy with temporary, 
+                   unsaved conversations." />
+
+    <meta name="keywords"
+          content="UltimaX Intelligence, free AI platform, 
+                   premium AI models, Pollinations AI, open-source AI, 
+                   Open-WebUI integration, ChatGPT alternative, 
+                   AI tools free, no registration AI, AI privacy, 
+                   temporary AI conversations, AI platform no login, 
+                   advanced AI features, AI community powered, 
+                   seamless AI experience" />
+
+    <meta property="og:domain" content="umint-ai.hf.space" />
+    <meta property="og:url" content="https://umint-ai.hf.space" />
+    <meta property="og:title" content="UltimaX Intelligence" />
+
+    <meta property="og:description"
+          content="UltimaX Intelligence is a free AI platform unifying 
+                   multiple premium AI models with an intuitive 
+                   ChatGPT-like interface. Powered by Pollinations 
+                   open-source AI and integrated with OpenWebUI, 
+                   it offers advanced features, no cost, no registration, 
+                   and ensures user privacy with temporary, 
+                   unsaved conversations." />
+
+    <meta property="og:image"
+          content="https://cdn-uploads.huggingface.co/production/uploads/686e28b405d4ddcdd96adeb2/i9iufR3L-rgj39mk_B9QW.jpeg" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:domain" content="umint-ai.hf.space" />
+    <meta name="twitter:url" content="https://umint-ai.hf.space" />
+    <meta name="twitter:title" content="UltimaX Intelligence" />
+
+    <meta name="twitter:description"
+          content="UltimaX Intelligence is a free AI platform unifying 
+                   multiple premium AI models with an intuitive 
+                   ChatGPT-like interface. Powered by Pollinations 
+                   open-source AI and integrated with OpenWebUI, 
+                   it offers advanced features, no cost, no registration, 
+                   and ensures user privacy with temporary, 
+                   unsaved conversations." />
+
+    <meta name="twitter:image"
+          content="https://cdn-uploads.huggingface.co/production/uploads/686e28b405d4ddcdd96adeb2/i9iufR3L-rgj39mk_B9QW.jpeg" />
+
+    <link rel="icon" 
+          href="https://umint-ai.hf.space/assets/images/favicon.ico" 
+          type="image/x-icon" />
+
+    <title>Image Generation Playground</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" 
+          href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+
+    <link rel="stylesheet" href="/__public__/assets/css/styles.css" />
+    <link rel="stylesheet" href="/__public__/assets/css/webLoader.css" />
+</head>
+<body data-is-generating="<%= !!isGenerating %>"
+      data-request-id="<%= requestId || '' %>">
+    <div class="gradient-bg"></div>
+    <div class="gradient-mesh"></div>
+    
+        <div id="welcomeModal" class="modal-overlay" style="display: none;">
+        <div class="modal-content">
+            <div class="modal-inner">
+                <h2 class="header-gradient animate__animated 
+                          animate__fadeInDown modal-title">
+                    Hi there!
+                </h2>
+                <div class="animate__animated animate__fadeInUp modal-text">
+                    Welcome to the <b>Image Generation Playground</b>, 
+                    where imagination transforms into visual creations.
+                    <br><br>
+                    For your information, <b>image generation</b> and 
+                    <b>OpenAI Audio TTS</b> is already built-in natively 
+                    in the primary spaces.
+                    <br><br>
+                    For more advanced capabilities, please visit the 
+                    <b><a href='https://umint-openwebui.hf.space' 
+                    target='_blank' style="color: var(--accent); 
+                    text-decoration: underline;">
+                    UltimaX Intelligence</a></b> primary spaces.
+                    <br><br>
+                    Please consider reading the 
+                    <b><a href='https://huggingface.co/spaces/umint/ai/discussions/37' 
+                    target='_blank' style="color: var(--accent); 
+                    text-decoration: underline;">
+                    Terms of Use and Consequences of Violation</a></b> 
+                    if you wish to proceed to the main Spaces.
+                    <br><br>
+                    <b>Like this project? Feel free to buy me a 
+                    <a href='https://ko-fi.com/hadad' target='_blank' 
+                    style="color: var(--accent); 
+                    text-decoration: underline;">coffee</a></b>.
+                </div>
+                <button onclick="closeWelcomeModal()" 
+                        class="btn btn-primary w-full animate__animated 
+                               animate__fadeInUp animate__delay-1s">
+                    Get Started
+                </button>
+            </div>
+        </div>
+    </div>
+    
+    <% if (error) { %>
+    <div id="errorModal" class="modal-overlay">
+        <div class="modal-content modal-error-content">
+            <div class="modal-inner">
+                <h3 class="modal-error-title">Error</h3>
+                <p class="modal-error-text"><%= error %></p>
+                <button onclick="closeErrorModal()" 
+                        class="btn btn-primary w-full">OK</button>
+            </div>
+        </div>
+    </div>
+    <% } %>
+    
+    <header class="header-main">
+        <div class="container mx-auto px-4">
+            <h1 class="header-gradient animate__animated 
+                      animate__fadeInDown header-title">
+                Image Generation Playground
+            </h1>
+        </div>
+    </header>
+    
+    <main class="container mx-auto px-4 main-content">
+        
+        <div class="image-output-section 
+                    <%= images && images.length > 0 ? 'has-images' : '' %> 
+                    animate__animated animate__fadeIn">
+            <% if (isGenerating) { %>
+                <div class="loading-container">
+                    <div class="loading-spinner" 
+                         style="margin: 0 auto 20px;"></div>
+                    <p class="loading-text">Generating your image...</p>
+                    <div class="progress-bar">
+                        <div class="progress-fill" 
+                             style="width: <%= progress %>%;"></div>
+                    </div>
+                    <p class="progress-text">
+                        <%= progress.toFixed(0) %>% Complete
+                    </p>
+                </div>
+            <% } else if (images && images.length > 0) { %>
+                <div class="image-grid">
+                    <% images.forEach((image, index) => { %>
+                    <div class="image-card">
+                        <img src="data:image/png;base64,<%= image.base64 %>" 
+                             alt="<%= image.prompt %>">
+                        <div class="image-actions">
+                            <a href="data:image/png;base64,<%= image.base64 %>" 
+                               download="generated-<%= image.id %>.png" 
+                               class="action-btn">
+                                <svg class="action-icon" viewBox="0 0 24 24" 
+                                     fill="none">
+                                    <path d="M12 16L7 11L8.4 9.55L11 12.15V4H13V12.15L15.6 9.55L17 11L12 16Z" 
+                                          fill="currentColor"/>
+                                    <path d="M4 20C3.45 20 2.98 19.8 2.59 19.41C2.2 19.02 2 18.55 2 18V15H4V18H20V15H22V18C22 18.55 21.8 19.02 21.41 19.41C21.02 19.8 20.55 20 20 20H4Z" 
+                                          fill="currentColor"/>
+                                </svg>
+                            </a>
+                            <form method="POST" action="/">
+                                <input type="hidden" name="action" value="delete">
+                                <input type="hidden" name="imageIndex" 
+                                       value="<%= index %>">
+                                <button type="submit" class="action-btn">
+                                    <svg class="action-icon" viewBox="0 0 24 24" 
+                                         fill="none">
+                                        <path d="M18.3 5.71C17.91 5.32 17.28 5.32 16.89 5.71L12 10.59L7.11 5.7C6.72 5.31 6.09 5.31 5.7 5.7C5.31 6.09 5.31 6.72 5.7 7.11L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.11C18.68 6.73 18.68 6.09 18.3 5.71Z" 
+                                              fill="currentColor"/>
+                                    </svg>
+                                </button>
+                            </form>
+                        </div>
+                        <div class="image-info">
+                            <p class="image-prompt"><%= image.prompt %></p>
+                            <p class="image-meta">
+                                <span class="image-model">
+                                    <%= image.model.toUpperCase() %>
+                                </span> 
+                                | <%= image.size %>
+                            </p>
+                        </div>
+                    </div>
+                    <% }); %>
+                </div>
+            <% } else { %>
+                <svg class="placeholder-icon" width="80" height="80" 
+                     viewBox="0 0 24 24" fill="none">
+                    <path d="M21 3H3C2 3 1 4 1 5V19C1 20 2 21 3 21H21C22 21 23 20 23 19V5C23 4 22 3 21 3ZM21 19H3V5H21V19Z" 
+                          fill="currentColor"/>
+                    <path d="M4.5 16.5L9 12L11.5 14.5L16 10L19.5 13.5" 
+                          stroke="currentColor" stroke-width="1.5" 
+                          stroke-linecap="round"/>
+                    <circle cx="8" cy="8.5" r="1.5" fill="currentColor"/>
+                </svg>
+                <p class="placeholder-text">
+                    No images generated yet. Start creating amazing visuals!
+                </p>
+            <% } %>
+        </div>
+        
+        <section class="card animate__animated animate__fadeIn 
+                        animate__delay-1s form-section">
+            <form method="POST" action="/" id="generateForm">
+                <input type="hidden" name="action" value="generate" 
+                       id="formAction">
+                
+                <div class="grid md:grid-cols-2 gap-6 form-grid">
+                    <div>
+                        <label class="form-label">Model</label>
+                        <select name="model" id="modelSelect" required 
+                                class="input-field select-field" 
+                                <%= isGenerating ? 'disabled' : '' %>>
+                            <option value="">Select a model</option>
+                            <option value="flux">Flux</option>
+                            <option value="kontext">Kontext</option>
+                            <option value="turbo">Turbo</option>
+                            <option value="nanobanana">Nano Banana</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label class="form-label">Size</label>
+                        <select name="size" id="sizeSelect" required 
+                                class="input-field select-field" 
+                                <%= isGenerating ? 'disabled' : '' %>>
+                            <option value="">Select size</option>
+                            <optgroup label="Square">
+                                <option value="256x256">256×256</option>
+                                <option value="512x512">512×512</option>
+                                <option value="768x768">768×768</option>
+                                <option value="1024x1024">1024×1024</option>
+                                <option value="1536x1536">1536×1536</option>
+                                <option value="2048x2048">2048×2048</option>
+                            </optgroup>
+                            <optgroup label="Portrait">
+                                <option value="256x384">256×384</option>
+                                <option value="384x512">384×512</option>
+                                <option value="512x768">512×768</option>
+                                <option value="768x1024">768×1024</option>
+                                <option value="1024x1536">1024×1536</option>
+                                <option value="1536x2048">1536×2048</option>
+                            </optgroup>
+                            <optgroup label="Landscape">
+                                <option value="384x256">384×256</option>
+                                <option value="512x384">512×384</option>
+                                <option value="768x512">768×512</option>
+                                <option value="1024x768">1024×768</option>
+                                <option value="1536x1024">1536×1024</option>
+                                <option value="2048x1536">2048×1536</option>
+                            </optgroup>
+                        </select>
+                    </div>
+                </div>
+                
+                <div class="form-group">
+                    <label class="form-label">Prompt</label>
+                    <textarea name="prompt" id="promptInput" required
+                              placeholder="Describe the image you want to generate..." 
+                              class="input-field textarea-field" 
+                              <%= isGenerating ? 'disabled' : '' %>></textarea>
+                </div>
+                
+                <div class="flex justify-center gap-4">
+                    <% if (!isGenerating) { %>
+                    <button type="submit" id="submitBtn" disabled 
+                            class="btn btn-primary">
+                        <svg class="button-icon" viewBox="0 0 24 24" 
+                             fill="none">
+                            <path d="M3 20V4L22 12L3 20ZM5 17L16.85 12L5 7V10.5L11 12L5 13.5V17Z" 
+                                  fill="currentColor"/>
+                        </svg>
+                        Generate Image
+                    </button>
+                    <% } else { %>
+                    <button type="button" onclick="cancelGeneration()" 
+                            class="btn btn-danger">
+                        <svg class="button-icon" viewBox="0 0 24 24" 
+                             fill="none">
+                            <rect x="4" y="4" width="16" height="16" rx="3" 
+                                  fill="currentColor"/>
+                        </svg>
+                        Stop Generation
+                    </button>
+                    <% } %>
+                </div>
+            </form>
+        </section>
+        
+        <section class="card animate__animated animate__fadeIn 
+                        animate__delay-1s examples-section">
+            <h3 class="examples-title">Example Prompts</h3>
+            <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-4">
+                <div class="example-card" 
+                     onclick="triggerExample('A majestic mountain landscape at golden hour with dramatic clouds and vibrant colors reflecting on a crystal clear alpine lake', 'flux', '1536x1024')">
+                    <p class="example-text">
+                        A majestic mountain landscape at golden hour with 
+                        dramatic clouds and vibrant colors reflecting on a 
+                        crystal clear alpine lake
+                    </p>
+                    <p class="example-meta">
+                        <span class="example-model">FLUX</span> | 1536×1024
+                    </p>
+                </div>
+                
+                <div class="example-card" 
+                     onclick="triggerExample('An enchanted forest with bioluminescent plants and magical floating particles, moonlight streaming through ancient mystical trees', 'kontext', '1024x1024')">
+                    <p class="example-text">
+                        An enchanted forest with bioluminescent plants and 
+                        magical floating particles, moonlight streaming 
+                        through ancient mystical trees
+                    </p>
+                    <p class="example-meta">
+                        <span class="example-model">KONTEXT</span> | 1024×1024 | Sometimes the server is busy
+                    </p>
+                </div>
+                
+                <div class="example-card" 
+                     onclick="triggerExample('Underwater coral reef teeming with colorful tropical fish and sea life, sunbeams penetrating crystal clear turquoise water', 'turbo', '1024x768')">
+                    <p class="example-text">
+                        Underwater coral reef teeming with colorful tropical 
+                        fish and sea life, sunbeams penetrating crystal 
+                        clear turquoise water
+                    </p>
+                    <p class="example-meta">
+                        <span class="example-model">TURBO</span> | 1024×768 | Sometimes the server is busy
+                    </p>
+                </div>
+                
+                <div class="example-card" 
+                     onclick="triggerExample('A woman riding a horse across an open field, cinematic and realistic style', 'nanobanana', '1024x768')">
+                    <p class="example-text">
+                        A woman riding a horse across an open field, 
+                        cinematic and realistic style
+                    </p>
+                    <p class="example-meta">
+                        <span class="example-model">NANO BANANA</span> | 1024×768
+                    </p>
+                </div>
+            </div>
+        </section>
+    </main>
+    
+    <footer class="footer-main">
+        <div class="container mx-auto px-4 flex flex-col md:flex-row 
+                    justify-between items-center gap-6">
+            <div class="footer-copyright">© 2025 Hadad Darajat</div>
+            <a href="https://linkedin.com/in/hadadrjt" target="_blank" 
+               class="footer-link">
+                <svg class="footer-icon" viewBox="0 0 24 24" 
+                     fill="currentColor">
+                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                </svg>
+                Connect with LinkedIn
+            </a>
+        </div>
+    </footer>
+    <script defer src="/__public__/assets/plugins/imageGenerator.js"></script>
+    <script defer src="/__public__/assets/plugins/webLoader.js"></script>
+</body>
+</html>

requirements.txt

@@ -1,2 +0,0 @@
-gradio[oauth,mcp]
-openai

server.js

@@ -0,0 +1,45 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import express from 'express';
+import { fileURLToPath } from 'url';
+import path from 'path';
+import config from './config.js';
+import imageRoutes from 
+  './src/routes/imageRoutes.js';
+import { initCleanup } from 
+  './src/services/storageManager.js';
+import { setupViewEngine } from 
+  './src/middleware/viewEngine.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+
+setupViewEngine(app, __dirname);
+
+app.use(express.urlencoded({ 
+  extended: true, 
+  limit: config.limits.bodySize 
+}));
+
+app.use(
+  "/__public__/assets",
+  express.static(path.resolve("assets"))
+);
+
+app.use(express.static(
+  path.join(__dirname, 'public')
+));
+
+app.use('/', imageRoutes);
+
+initCleanup();
+
+app.listen(
+  config.server.port, 
+  config.server.host
+);

src/controllers/imageController.js

@@ -0,0 +1,140 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import config from '../../config.js';
+import { generateId } from '../utils/idGenerator.js';
+import { 
+  validateGenerationParams, 
+  validateApiConfig,
+  validateImageIndex 
+} from '../utils/validators.js';
+import { 
+  getStorage, 
+  setStorage, 
+  getDefaultData 
+} from '../services/storageManager.js';
+import { 
+  generateImage, 
+  cancelGeneration 
+} from '../services/imageGenerator.js';
+import { renderView } from '../utils/viewRenderer.js';
+
+export const renderHome = (req, res) => {
+  const requestId = req.query.rid || generateId();
+  const data = getStorage(requestId) || getDefaultData();
+  
+  renderView(res, {
+    ...data,
+    requestId
+  });
+};
+
+export const handleAction = async (req, res) => {
+  const requestId = req.body.requestId || generateId();
+  const { 
+    action, 
+    prompt, 
+    model, 
+    size, 
+    imageIndex 
+  } = req.body;
+  
+  let data = getStorage(requestId) || getDefaultData();
+  
+  switch(action) {
+    case 'delete':
+      return handleDelete(
+        requestId, 
+        imageIndex, 
+        data, 
+        res
+      );
+      
+    case 'cancel':
+      return handleCancel(requestId, res);
+      
+    case 'generate':
+      return handleGenerate(
+        requestId, 
+        prompt, 
+        model, 
+        size, 
+        data, 
+        res
+      );
+      
+    default:
+      return res.redirect(`/?rid=${requestId}`);
+  }
+};
+
+const handleDelete = (
+  requestId, 
+  imageIndex, 
+  data, 
+  res
+) => {
+  if (validateImageIndex(
+    imageIndex, 
+    data.images.length
+  )) {
+    data.images.splice(parseInt(imageIndex), 1);
+    setStorage(requestId, data);
+  }
+  return res.redirect(`/?rid=${requestId}`);
+};
+
+const handleCancel = (requestId, res) => {
+  cancelGeneration(requestId);
+  return res.redirect(`/?rid=${requestId}`);
+};
+
+const handleGenerate = async (
+  requestId, 
+  prompt, 
+  model, 
+  size, 
+  data, 
+  res
+) => {
+  const trimmedPrompt = prompt?.trim() || '';
+  
+  if (!validateGenerationParams(
+    trimmedPrompt, 
+    model, 
+    size
+  )) {
+    data.error = 'Please fill in all required fields';
+    setStorage(requestId, data);
+    return renderView(res, {
+      ...data,
+      requestId
+    });
+  }
+  
+  if (!validateApiConfig()) {
+    data.error = 'The server is currently busy. ' +
+                'Please try again later.';
+    setStorage(requestId, data);
+    return renderView(res, {
+      ...data,
+      requestId
+    });
+  }
+  
+  data.isGenerating = true;
+  data.progress = 50;
+  data.error = null;
+  setStorage(requestId, data);
+  
+  res.redirect(`/?rid=${requestId}`);
+  
+  await generateImage(
+    requestId, 
+    trimmedPrompt, 
+    model, 
+    size
+  );
+};

src/middleware/viewEngine.js

@@ -0,0 +1,15 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import path from 'path';
+import config from '../../config.js';
+
+export const setupViewEngine = (app, rootDir) => {
+  app.set('view engine', 'ejs');
+  app.set('views', path.join(
+    rootDir, 
+    config.paths.views
+  ));
+};

src/routes/imageRoutes.js

@@ -0,0 +1,17 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import { Router } from 'express';
+import { 
+  renderHome, 
+  handleAction 
+} from '../controllers/imageController.js';
+
+const router = Router();
+
+router.get('/', renderHome);
+router.post('/', handleAction);
+
+export default router;

src/services/imageGenerator.js

@@ -0,0 +1,157 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import axios from 'axios';
+import config from '../../config.js';
+import { generateId } from '../utils/idGenerator.js';
+import { 
+  getStorage, 
+  setStorage,
+  getActiveGeneration,
+  setActiveGeneration,
+  deleteActiveGeneration 
+} from './storageManager.js';
+
+const updateProgress = (requestId, progress) => {
+  const data = getStorage(requestId);
+  if (data) {
+    data.progress = progress;
+    setStorage(requestId, data);
+  }
+};
+
+const createProgressUpdater = (requestId) => {
+  return setInterval(() => {
+    const data = getStorage(requestId);
+    if (data && 
+        data.isGenerating && 
+        data.progress < config.generation.maxProgress) {
+      const increment = Math.random() * 20;
+      const newProgress = Math.min(
+        config.generation.maxProgress,
+        data.progress + increment
+      );
+      updateProgress(requestId, newProgress);
+    }
+  }, config.generation.progressInterval);
+};
+
+const createImageObject = (
+  base64Data, 
+  prompt, 
+  model, 
+  size
+) => ({
+  id: generateId(),
+  base64: base64Data,
+  prompt,
+  model,
+  size
+});
+
+const callImageApi = async (
+  prompt, 
+  model, 
+  size, 
+  signal
+) => {
+  return await axios.post(
+    config.api.baseUrl,
+    {
+      model,
+      prompt,
+      size,
+      response_format: 'b64_json',
+      n: 1
+    },
+    {
+      headers: {
+        'Authorization': `Bearer ${config.api.key}`,
+        'Content-Type': 'application/json'
+      },
+      signal,
+      timeout: config.api.timeout,
+      maxBodyLength: config.limits.maxContentLength,
+      maxContentLength: config.limits.maxContentLength
+    }
+  );
+};
+
+export const generateImage = async (
+  requestId, 
+  prompt, 
+  model, 
+  size
+) => {
+  const controller = new AbortController();
+  setActiveGeneration(requestId, controller);
+  
+  const progressInterval = createProgressUpdater(requestId);
+  
+  setTimeout(async () => {
+    try {
+      const response = await callImageApi(
+        prompt, 
+        model, 
+        size, 
+        controller.signal
+      );
+      
+      const data = getStorage(requestId);
+      if (!data) return;
+      
+      updateProgress(requestId, 100);
+      
+      if (response.data?.data?.length > 0) {
+        const base64 = response.data.data[0].b64_json;
+        const newImage = createImageObject(
+          base64, 
+          prompt, 
+          model, 
+          size
+        );
+        
+        data.images.unshift(newImage);
+      }
+      
+      data.isGenerating = false;
+      data.progress = 0;
+      setStorage(requestId, data);
+      
+    } catch (error) {
+      const data = getStorage(requestId);
+      if (!data) return;
+      
+      if (error.name !== 'CanceledError' && 
+          error.code !== 'ERR_CANCELED') {
+        data.error = 'The server is currently busy. ' +
+                     'Please try again later.';
+      }
+      
+      data.isGenerating = false;
+      data.progress = 0;
+      setStorage(requestId, data);
+      
+    } finally {
+      clearInterval(progressInterval);
+      deleteActiveGeneration(requestId);
+    }
+  }, config.generation.startDelay);
+};
+
+export const cancelGeneration = (requestId) => {
+  const controller = getActiveGeneration(requestId);
+  if (controller) {
+    controller.abort();
+    deleteActiveGeneration(requestId);
+    
+    const data = getStorage(requestId);
+    if (data) {
+      data.isGenerating = false;
+      data.progress = 0;
+      setStorage(requestId, data);
+    }
+  }
+};

src/services/storageManager.js

@@ -0,0 +1,64 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import config from '../../config.js';
+
+const tempStorage = new Map();
+const activeGenerations = new Map();
+
+export const getStorage = (requestId) => {
+  const data = tempStorage.get(requestId);
+  if (data) {
+    data.lastAccess = Date.now();
+  }
+  return data;
+};
+
+export const setStorage = (requestId, data) => {
+  data.lastAccess = Date.now();
+  tempStorage.set(requestId, data);
+};
+
+export const deleteStorage = (requestId) => {
+  tempStorage.delete(requestId);
+  activeGenerations.delete(requestId);
+};
+
+export const getActiveGeneration = (requestId) => {
+  return activeGenerations.get(requestId);
+};
+
+export const setActiveGeneration = (
+  requestId, 
+  controller
+) => {
+  activeGenerations.set(requestId, controller);
+};
+
+export const deleteActiveGeneration = (requestId) => {
+  activeGenerations.delete(requestId);
+};
+
+export const getDefaultData = () => ({
+  images: [],
+  isGenerating: false,
+  progress: 0,
+  error: null,
+  lastAccess: Date.now()
+});
+
+export const initCleanup = () => {
+  setInterval(() => {
+    const now = Date.now();
+    const maxAge = config.storage.maxAge;
+    
+    for (const [key, value] of tempStorage.entries()) {
+      if (!value.lastAccess || 
+          now - value.lastAccess > maxAge) {
+        deleteStorage(key);
+      }
+    }
+  }, config.storage.cleanupInterval);
+};

src/utils/idGenerator.js

@@ -0,0 +1,10 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+export const generateId = () => {
+  return Math.random()
+    .toString(36)
+    .substring(2, 15);
+};

src/utils/validators.js

@@ -0,0 +1,39 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import config from '../../config.js';
+
+export const validatePrompt = (prompt) => {
+  if (!prompt) return false;
+  
+  const trimmed = prompt.trim();
+  return trimmed && 
+    trimmed.replace(/\s+/g, '').length > 0;
+};
+
+export const validateGenerationParams = (
+  prompt, 
+  model, 
+  size
+) => {
+  return validatePrompt(prompt) && 
+    model && 
+    size;
+};
+
+export const validateApiConfig = () => {
+  return config.api.baseUrl && 
+    config.api.key;
+};
+
+export const validateImageIndex = (
+  index, 
+  arrayLength
+) => {
+  const idx = parseInt(index);
+  return !isNaN(idx) && 
+    idx >= 0 && 
+    idx < arrayLength;
+};

src/utils/viewRenderer.js

@@ -0,0 +1,10 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import config from '../../config.js';
+
+export const renderView = (res, data) => {
+  res.render(config.paths.mainView, data);
+};