Spaces:

akhaliq
/

ERNIE-Image-Turbo

Running on Zero

App Files Files Community

akhaliq HF Staff commited on 16 days ago

Commit

a888964

1 Parent(s): 89d8565

refactor: update UI to Apple-inspired aesthetic with system fonts and dark mode support

Browse files

Files changed (1) hide show

index.html +158 -318

index.html CHANGED Viewed

@@ -2,303 +2,189 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ERNIE Image Turbo</title>
-    <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&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
-            --bg-base: #0f172a;
-            --bg-secondary: rgba(30, 41, 59, 0.7);
-            --primary: #6366f1;
-            --primary-hover: #4f46e5;
-            --accent: #ec4899;
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-            --border: rgba(255, 255, 255, 0.1);
-            --glass-bg: rgba(15, 23, 42, 0.6);
-            --glass-border: rgba(255, 255, 255, 0.08);
-            --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
         }
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
         }
         body {
-            font-family: 'Inter', sans-serif;
-            background-color: var(--bg-base);
-            color: var(--text-main);
             min-height: 100vh;
             display: flex;
-            background-image:
-                radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15), transparent 25%),
-                radial-gradient(circle at 85% 30%, rgba(236, 72, 153, 0.15), transparent 25%);
-            background-attachment: fixed;
-            overflow-x: hidden;
         }
         main {
             display: flex;
             width: 100%;
-            height: 100vh;
-            padding: 1rem;
-            gap: 1rem;
         }
-        /* ----- SIDEBAR CONTROLS ----- */
         .sidebar {
-            width: 360px;
-            background: var(--glass-bg);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            border: 1px solid var(--glass-border);
-            border-radius: 24px;
-            padding: 1.5rem;
             display: flex;
             flex-direction: column;
             gap: 1.5rem;
-            box-shadow: var(--glass-shadow);
-            overflow-y: auto;
             flex-shrink: 0;
             z-index: 2;
         }
-        /* Custom Scrollbar for Sidebar */
-        .sidebar::-webkit-scrollbar {
-            width: 6px;
-        }
-        .sidebar::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.02);
-        }
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-        }
-        .header {
-            margin-bottom: 0.5rem;
-        }
         .header h1 {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.8rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, #a5b4fc 0%, #fbcfe8 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 0.25rem;
             letter-spacing: -0.5px;
         }
         .header p {
-            color: var(--text-muted);
-            font-size: 0.875rem;
         }
         .control-group {
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
-        }
-        label {
-            font-size: 0.875rem;
-            font-weight: 500;
-            color: var(--text-main);
-            display: flex;
-            justify-content: space-between;
-        }
-        .label-val {
-            color: var(--primary);
-            font-family: 'Outfit', sans-serif;
-            font-weight: 600;
         }
         textarea {
             width: 100%;
-            height: 120px;
-            background: rgba(0, 0, 0, 0.2);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 1rem;
-            color: var(--text-main);
             font-family: inherit;
-            font-size: 0.95rem;
             resize: none;
-            transition: all 0.3s ease;
         }
         textarea:focus {
             outline: none;
-            border-color: var(--primary);
-            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
         }
-        /* Custom Sliders */
-        input[type="range"] {
-            -webkit-appearance: none;
-            width: 100%;
-            background: transparent;
-            height: 6px;
-            border-radius: 3px;
-        }
-        input[type="range"]::-webkit-slider-runnable-track {
-            width: 100%;
-            height: 6px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 3px;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            height: 18px;
-            width: 18px;
-            border-radius: 50%;
-            background: var(--primary);
-            margin-top: -6px;
-            cursor: pointer;
-            box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
-            transition: transform 0.2s;
-        }
-        input[type="range"]::-webkit-slider-thumb:hover {
-            transform: scale(1.2);
-        }
-        /* Custom Checkbox */
-        .checkbox-container {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            cursor: pointer;
-            user-select: none;
-        }
-        .checkbox-container input {
-            display: none;
-        }
-        .checkmark {
-            width: 20px;
-            height: 20px;
-            background: rgba(0, 0, 0, 0.2);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-        }
-        .checkbox-container input:checked ~ .checkmark {
-            background: var(--primary);
-            border-color: var(--primary);
-        }
-        .checkmark i {
-            color: white;
-            font-size: 12px;
-            opacity: 0;
-            transform: scale(0.5);
-            transition: all 0.2s ease;
-        }
-        .checkbox-container input:checked ~ .checkmark i {
-            opacity: 1;
-            transform: scale(1);
         }
         .btn-generate {
-            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
-            color: white;
             border: none;
-            padding: 1rem;
-            border-radius: 12px;
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.1rem;
             font-weight: 600;
             cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
-            margin-top: auto;
-            position: relative;
-            overflow: hidden;
             display: flex;
             justify-content: center;
             align-items: center;
             gap: 0.5rem;
-        }
-        .btn-generate::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-            transition: left 0.5s ease;
         }
         .btn-generate:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
-        }
-        .btn-generate:hover::before {
-            left: 100%;
         }
         .btn-generate:disabled {
-            opacity: 0.7;
             cursor: not-allowed;
             transform: none;
         }
-        /* ----- WORKSPACE (CANVAS) ----- */
         .workspace {
             flex: 1;
-            background: var(--glass-bg);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            border: 1px solid var(--glass-border);
-            border-radius: 24px;
             display: flex;
             align-items: center;
             justify-content: center;
-            position: relative;
-            box-shadow: var(--glass-shadow);
             overflow: hidden;
-            padding: 1rem;
             z-index: 1;
         }
         .image-container {
-            position: relative;
             width: 100%;
             height: 100%;
             display: flex;
             align-items: center;
             justify-content: center;
         }
         #result-image {
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
-            border-radius: 12px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-            transition: opacity 0.5s ease, transform 0.5s ease;
             opacity: 0;
-            transform: scale(0.95);
         }
         #result-image.loaded {
@@ -313,42 +199,40 @@
             align-items: center;
             justify-content: center;
             gap: 1rem;
-            color: var(--text-muted);
             text-align: center;
-            pointer-events: none;
-            transition: opacity 0.3s ease;
         }
         .empty-state i {
-            font-size: 4rem;
-            background: linear-gradient(45deg, var(--primary), var(--accent));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
             opacity: 0.5;
         }
         .empty-state h3 {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.5rem;
             font-weight: 500;
         }
         /* Loading Overlay */
         .loading-overlay {
             position: absolute;
             inset: 0;
-            background: rgba(15, 23, 42, 0.8);
-            backdrop-filter: blur(8px);
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            gap: 1.5rem;
             opacity: 0;
             pointer-events: none;
             transition: opacity 0.3s ease;
-            border-radius: 20px;
             z-index: 10;
         }
         .loading-overlay.active {
@@ -357,10 +241,10 @@
         }
         .spinner {
-            width: 60px;
-            height: 60px;
-            border: 4px solid rgba(255, 255, 255, 0.1);
-            border-left-color: var(--primary);
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
@@ -370,33 +254,34 @@
         }
         .loading-text {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.2rem;
             font-weight: 500;
-            color: white;
-            letter-spacing: 1px;
             animation: pulse 1.5s ease-in-out infinite;
         }
         @keyframes pulse {
             0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
         }
         .error-message {
             position: absolute;
             top: 2rem;
             left: 50%;
             transform: translateX(-50%) translateY(-20px);
-            background: rgba(239, 68, 68, 0.9);
             color: white;
-            padding: 1rem 2rem;
-            border-radius: 12px;
             font-weight: 500;
             opacity: 0;
             pointer-events: none;
-            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
             z-index: 20;
             display: flex;
             align-items: center;
@@ -412,21 +297,23 @@
             position: absolute;
             bottom: 2rem;
             right: 2rem;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--border);
-            color: white;
-            width: 50px;
-            height: 50px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
-            transition: all 0.3s ease;
             opacity: 0;
             pointer-events: none;
             z-index: 5;
         }
         .download-btn.visible {
@@ -435,28 +322,37 @@
         }
         .download-btn:hover {
-            background: var(--primary);
-            transform: translateY(-3px);
-            box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
         }
         @media (max-width: 1024px) {
             main {
                 flex-direction: column-reverse; /* Image on top, controls on bottom */
-                padding: 0.5rem;
-                gap: 0.5rem;
                 height: 100dvh;
             }
             .sidebar {
                 width: 100%;
-                height: 50vh;
-                max-height: none;
-                border-radius: 20px 20px 0 0;
-                padding-bottom: 2rem; /* Give breathing room at bottom */
             }
             .workspace {
-                height: 50vh;
-                border-radius: 0 0 20px 20px;
             }
         }
     </style>
@@ -465,57 +361,23 @@
     <main>
         <!-- Sidebar Controls -->
-        <aside class="sidebar">
             <div class="header">
                 <h1>ERNIE Image Turbo</h1>
-                <p>High-Fidelity Gen-AI</p>
-            </div>
-            <div class="control-group">
-                <label for="prompt">Prompt</label>
-                <textarea id="prompt" placeholder="A futuristic city with flying cars at sunset, highly detailed, cinematic lighting..."></textarea>
-            </div>
-            <div class="control-group">
-                <label>
-                    Width
-                    <span class="label-val" id="width-val">1024</span>
-                </label>
-                <input type="range" id="width" min="512" max="1536" step="64" value="1024">
             </div>
             <div class="control-group">
-                <label>
-                    Height
-                    <span class="label-val" id="height-val">1024</span>
-                </label>
-                <input type="range" id="height" min="512" max="1536" step="64" value="1024">
-            </div>
-            <div class="control-group">
-                <label>
-                    Inference Steps
-                    <span class="label-val" id="steps-val">8</span>
-                </label>
-                <input type="range" id="steps" min="4" max="20" step="1" value="8">
-            </div>
-            <div class="control-group">
-                <label>
-                    Guidance Scale
-                    <span class="label-val" id="guidance-val">1.0</span>
-                </label>
-                <input type="range" id="guidance" min="0.0" max="5.0" step="0.1" value="1.0">
             </div>
             <button class="btn-generate" id="generate-btn">
-                <i class="fas fa-wand-magic-sparkles"></i>
-                Generate Image
             </button>
         </aside>
         <!-- Canvas Workspace -->
-        <section class="workspace">
             <div class="error-message" id="error-toast">
                 <i class="fas fa-exclamation-circle"></i>
                 <span id="error-text">An error occurred.</span>
@@ -523,15 +385,15 @@
             <div class="image-container">
                 <div class="empty-state" id="empty-state">
-                    <i class="fa-regular fa-image"></i>
-                    <h3>Your masterpiece awaits</h3>
-                    <p>Enter a prompt and hit generate to begin.</p>
                 </div>
                 <img id="result-image" alt="Generated Image" src="" />
             </div>
             <a id="download-link" download="ernie-generation.png" class="download-btn">
-                <i class="fas fa-download"></i>
             </a>
             <div class="loading-overlay" id="loading-overlay">
@@ -547,15 +409,6 @@
         // ----- UI Elements -----
         const promptInput = document.getElementById('prompt');
-        const widthSlider = document.getElementById('width');
-        const widthVal = document.getElementById('width-val');
-        const heightSlider = document.getElementById('height');
-        const heightVal = document.getElementById('height-val');
-        const stepsSlider = document.getElementById('steps');
-        const stepsVal = document.getElementById('steps-val');
-        const guidanceSlider = document.getElementById('guidance');
-        const guidanceVal = document.getElementById('guidance-val');
         const generateBtn = document.getElementById('generate-btn');
         const resultImage = document.getElementById('result-image');
         const emptyState = document.getElementById('empty-state');
@@ -565,18 +418,6 @@
         const errorText = document.getElementById('error-text');
         const downloadBtn = document.getElementById('download-link');
-        // ----- Sync Sliders with Labels -----
-        const setupSlider = (slider, label) => {
-            slider.addEventListener('input', (e) => {
-                label.textContent = e.target.value;
-            });
-        };
-        setupSlider(widthSlider, widthVal);
-        setupSlider(heightSlider, heightVal);
-        setupSlider(stepsSlider, stepsVal);
-        setupSlider(guidanceSlider, guidanceVal);
         const showError = (message) => {
             errorText.textContent = message;
             errorToast.classList.add('visible');
@@ -599,18 +440,17 @@
                 loadingOverlay.classList.add('active');
                 statusText.textContent = "Connecting to backend...";
-                // Connect to backend (same origin as HTML is served by App)
                 const client = await Client.connect(window.location.origin);
-                statusText.textContent = "Generating... this may take a few moments.";
-                // Prepare params
                 const params = {
                     prompt: promptStr,
-                    width: parseInt(widthSlider.value),
-                    height: parseInt(heightSlider.value),
-                    guidance_scale: parseFloat(guidanceSlider.value),
-                    num_inference_steps: parseInt(stepsSlider.value)
                 };
                 // Call endpoint

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>ERNIE Image Turbo</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
+            --bg-body: #f5f5f7;
+            --bg-surface: rgba(255, 255, 255, 0.7);
+            --border-subtle: rgba(0, 0, 0, 0.05);
+            --text-primary: #1d1d1f;
+            --text-secondary: #86868b;
+            --accent: #000000;
+            --accent-hover: #333333;
+            --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
+        }
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg-body: #000000;
+                --bg-surface: rgba(28, 28, 30, 0.7);
+                --border-subtle: rgba(255, 255, 255, 0.1);
+                --text-primary: #f5f5f7;
+                --text-secondary: #86868b;
+                --accent: #ffffff;
+                --accent-hover: #e5e5e5;
+                --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+            }
         }
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
         }
         body {
+            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: var(--bg-body);
+            color: var(--text-primary);
             min-height: 100vh;
             display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+            overflow: hidden;
+            transition: background-color 0.3s ease;
         }
         main {
             display: flex;
             width: 100%;
+            max-width: 1200px;
+            height: calc(100vh - 4rem);
+            gap: 2rem;
+        }
+        /* Elements */
+        .panel {
+            background: var(--bg-surface);
+            backdrop-filter: blur(40px);
+            -webkit-backdrop-filter: blur(40px);
+            border: 1px solid var(--border-subtle);
+            border-radius: 32px;
+            box-shadow: var(--glass-shadow);
         }
+        /* Inputs */
         .sidebar {
+            width: 320px;
+            padding: 2.5rem;
             display: flex;
             flex-direction: column;
             gap: 1.5rem;
             flex-shrink: 0;
             z-index: 2;
         }
         .header h1 {
+            font-size: 1.5rem;
+            font-weight: 600;
             letter-spacing: -0.5px;
+            margin-bottom: 0.25rem;
         }
         .header p {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 400;
         }
         .control-group {
             display: flex;
             flex-direction: column;
+            gap: 0.75rem;
+            flex: 1;
         }
         textarea {
+            flex: 1;
             width: 100%;
+            background: rgba(120, 120, 128, 0.05);
+            border: 1px solid var(--border-subtle);
+            border-radius: 20px;
+            padding: 1.25rem;
+            color: var(--text-primary);
             font-family: inherit;
+            font-size: 1.05rem;
+            line-height: 1.4;
             resize: none;
+            transition: all 0.2s ease;
         }
         textarea:focus {
             outline: none;
+            background: rgba(120, 120, 128, 0.1);
+            border-color: rgba(120, 120, 128, 0.2);
         }
+        textarea::placeholder {
+            color: var(--text-secondary);
+            font-weight: 400;
         }
         .btn-generate {
+            background-color: var(--accent);
+            color: var(--bg-body);
             border: none;
+            padding: 1.1rem;
+            border-radius: 100px; /* Pill shape */
+            font-size: 1.05rem;
             font-weight: 600;
             cursor: pointer;
+            transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s;
             display: flex;
             justify-content: center;
             align-items: center;
             gap: 0.5rem;
+            margin-top: auto;
         }
         .btn-generate:hover {
+            transform: scale(0.98);
+            background-color: var(--accent-hover);
         }
         .btn-generate:disabled {
+            opacity: 0.5;
             cursor: not-allowed;
             transform: none;
         }
+        /* Workspace */
         .workspace {
             flex: 1;
+            position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
+            padding: 2rem;
             overflow: hidden;
             z-index: 1;
         }
         .image-container {
             width: 100%;
             height: 100%;
             display: flex;
             align-items: center;
             justify-content: center;
+            position: relative;
         }
         #result-image {
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
+            border-radius: 16px;
             opacity: 0;
+            transform: scale(0.98);
+            transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
         }
         #result-image.loaded {
             align-items: center;
             justify-content: center;
             gap: 1rem;
+            color: var(--text-secondary);
             text-align: center;
+            transition: opacity 0.4s ease;
         }
         .empty-state i {
+            font-size: 3rem;
             opacity: 0.5;
+            margin-bottom: 0.5rem;
         }
         .empty-state h3 {
+            font-size: 1.2rem;
             font-weight: 500;
+            color: var(--text-primary);
         }
         /* Loading Overlay */
         .loading-overlay {
             position: absolute;
             inset: 0;
+            background: var(--bg-surface);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            gap: 1.2rem;
             opacity: 0;
             pointer-events: none;
             transition: opacity 0.3s ease;
             z-index: 10;
+            border-radius: inherit;
         }
         .loading-overlay.active {
         }
         .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid var(--border-subtle);
+            border-top-color: var(--text-primary);
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
         }
         .loading-text {
+            font-size: 1rem;
             font-weight: 500;
+            color: var(--text-primary);
+            letter-spacing: -0.2px;
             animation: pulse 1.5s ease-in-out infinite;
         }
         @keyframes pulse {
             0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
         }
+        /* Error */
         .error-message {
             position: absolute;
             top: 2rem;
             left: 50%;
             transform: translateX(-50%) translateY(-20px);
+            background: #ff3b30;
             color: white;
+            padding: 1rem 1.5rem;
+            border-radius: 100px;
             font-weight: 500;
+            font-size: 0.95rem;
             opacity: 0;
             pointer-events: none;
+            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+            box-shadow: 0 4px 16px rgba(255, 59, 48, 0.4);
             z-index: 20;
             display: flex;
             align-items: center;
             position: absolute;
             bottom: 2rem;
             right: 2rem;
+            background: var(--bg-surface);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--border-subtle);
+            color: var(--text-primary);
+            width: 44px;
+            height: 44px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
+            transition: all 0.2s ease;
             opacity: 0;
             pointer-events: none;
             z-index: 5;
+            box-shadow: var(--glass-shadow);
         }
         .download-btn.visible {
         }
         .download-btn:hover {
+            transform: scale(1.05);
         }
         @media (max-width: 1024px) {
+            body {
+                padding: 0;
+                align-items: flex-end;
+            }
             main {
                 flex-direction: column-reverse; /* Image on top, controls on bottom */
+                padding: 0;
+                gap: 0;
                 height: 100dvh;
             }
             .sidebar {
                 width: 100%;
+                height: 45vh;
+                border-radius: 32px 32px 0 0;
+                padding-bottom: 2.5rem;
+                border-bottom: none;
+                border-left: none;
+                border-right: none;
             }
             .workspace {
+                height: 55vh;
+                border-radius: 0;
+                border-top: none;
+                border-left: none;
+                border-right: none;
+                background: transparent;
+                box-shadow: none;
             }
         }
     </style>
     <main>
         <!-- Sidebar Controls -->
+        <aside class="sidebar panel">
             <div class="header">
                 <h1>ERNIE Image Turbo</h1>
+                <p>High-Fidelity Generation</p>
             </div>
             <div class="control-group">
+                <textarea id="prompt" placeholder="A futuristic city with flying cars at sunset, highly detailed..."></textarea>
             </div>
             <button class="btn-generate" id="generate-btn">
+                Generate
             </button>
         </aside>
         <!-- Canvas Workspace -->
+        <section class="workspace panel">
             <div class="error-message" id="error-toast">
                 <i class="fas fa-exclamation-circle"></i>
                 <span id="error-text">An error occurred.</span>
             <div class="image-container">
                 <div class="empty-state" id="empty-state">
+                    <i class="fa-solid fa-wand-magic-sparkles"></i>
+                    <h3>Imagine anything</h3>
+                    <p>Enter a prompt and hit generate</p>
                 </div>
                 <img id="result-image" alt="Generated Image" src="" />
             </div>
             <a id="download-link" download="ernie-generation.png" class="download-btn">
+                <i class="fas fa-arrow-down"></i>
             </a>
             <div class="loading-overlay" id="loading-overlay">
         // ----- UI Elements -----
         const promptInput = document.getElementById('prompt');
         const generateBtn = document.getElementById('generate-btn');
         const resultImage = document.getElementById('result-image');
         const emptyState = document.getElementById('empty-state');
         const errorText = document.getElementById('error-text');
         const downloadBtn = document.getElementById('download-link');
         const showError = (message) => {
             errorText.textContent = message;
             errorToast.classList.add('visible');
                 loadingOverlay.classList.add('active');
                 statusText.textContent = "Connecting to backend...";
                 const client = await Client.connect(window.location.origin);
+                statusText.textContent = "Generating...";
+                // Hardcoded defaults for clean UI
                 const params = {
                     prompt: promptStr,
+                    width: 1024,
+                    height: 1024,
+                    guidance_scale: 1.0,
+                    num_inference_steps: 8
                 };
                 // Call endpoint