Spaces:

akhaliq
/

ERNIE-Image-Turbo

Running on Zero

App Files Files Community

akhaliq HF Staff commited on Apr 14

Commit

89d8565

1 Parent(s): db77c48

refactor: remove Prompt Enhancer support and update UI layout and styling

Browse files

Files changed (2) hide show

app.py +2 -3
index.html +30 -27

app.py CHANGED Viewed

@@ -28,7 +28,7 @@ app = Server()
 @app.api()
 @spaces.GPU(duration=120)
-def generate_image(prompt: str, width: int = 1024, height: int = 1024, guidance_scale: float = 1.0, num_inference_steps: int = 8, use_pe: bool = True) -> FileData:
     """Generate an image using ERNIE-Image-Turbo."""
     print(f"Endpoint triggered! Prompt: {prompt}, width: {width}, height: {height}", flush=True)
@@ -38,8 +38,7 @@ def generate_image(prompt: str, width: int = 1024, height: int = 1024, guidance_
         height=height,
         width=width,
         num_inference_steps=num_inference_steps,
-        guidance_scale=guidance_scale,
-        use_pe=use_pe
     ).images[0]
     # Save to a temporary unique file

 @app.api()
 @spaces.GPU(duration=120)
+def generate_image(prompt: str, width: int = 1024, height: int = 1024, guidance_scale: float = 1.0, num_inference_steps: int = 8) -> FileData:
     """Generate an image using ERNIE-Image-Turbo."""
     print(f"Endpoint triggered! Prompt: {prompt}, width: {width}, height: {height}", flush=True)
         height=height,
         width=width,
         num_inference_steps=num_inference_steps,
+        guidance_scale=guidance_scale
     ).images[0]
     # Save to a temporary unique file

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ERNIE Image Turbo Studio</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">
@@ -47,25 +47,26 @@
             display: flex;
             width: 100%;
             height: 100vh;
-            padding: 1.5rem;
-            gap: 1.5rem;
         }
         /* ----- SIDEBAR CONTROLS ----- */
         .sidebar {
-            width: 380px;
             background: var(--glass-bg);
-            backdrop-filter: blur(16px);
-            -webkit-backdrop-filter: blur(16px);
             border: 1px solid var(--glass-border);
-            border-radius: 20px;
-            padding: 2rem;
             display: flex;
             flex-direction: column;
             gap: 1.5rem;
             box-shadow: var(--glass-shadow);
             overflow-y: auto;
             flex-shrink: 0;
         }
         /* Custom Scrollbar for Sidebar */
@@ -86,7 +87,7 @@
         .header h1 {
             font-family: 'Outfit', sans-serif;
-            font-size: 2rem;
             font-weight: 700;
             background: linear-gradient(135deg, #a5b4fc 0%, #fbcfe8 100%);
             -webkit-background-clip: text;
@@ -266,17 +267,18 @@
         .workspace {
             flex: 1;
             background: var(--glass-bg);
-            backdrop-filter: blur(16px);
-            -webkit-backdrop-filter: blur(16px);
             border: 1px solid var(--glass-border);
-            border-radius: 20px;
             display: flex;
             align-items: center;
             justify-content: center;
             position: relative;
             box-shadow: var(--glass-shadow);
             overflow: hidden;
-            padding: 2rem;
         }
         .image-container {
@@ -440,12 +442,21 @@
         @media (max-width: 1024px) {
             main {
-                flex-direction: column;
             }
             .sidebar {
                 width: 100%;
-                height: auto;
-                max-height: 50vh;
             }
         }
     </style>
@@ -456,8 +467,8 @@
         <!-- Sidebar Controls -->
         <aside class="sidebar">
             <div class="header">
-                <h1>ERNIE STUDIO</h1>
-                <p>Powered by ERNIE-Image-Turbo</p>
             </div>
             <div class="control-group">
@@ -497,12 +508,6 @@
                 <input type="range" id="guidance" min="0.0" max="5.0" step="0.1" value="1.0">
             </div>
-            <label class="checkbox-container">
-                <input type="checkbox" id="use-pe" checked>
-                <div class="checkmark"><i class="fas fa-check"></i></div>
-                Use Prompt Enhancer
-            </label>
             <button class="btn-generate" id="generate-btn">
                 <i class="fas fa-wand-magic-sparkles"></i>
                 Generate Image
@@ -550,7 +555,6 @@
         const stepsVal = document.getElementById('steps-val');
         const guidanceSlider = document.getElementById('guidance');
         const guidanceVal = document.getElementById('guidance-val');
-        const peCheckbox = document.getElementById('use-pe');
         const generateBtn = document.getElementById('generate-btn');
         const resultImage = document.getElementById('result-image');
@@ -606,8 +610,7 @@
                     width: parseInt(widthSlider.value),
                     height: parseInt(heightSlider.value),
                     guidance_scale: parseFloat(guidanceSlider.value),
-                    num_inference_steps: parseInt(stepsSlider.value),
-                    use_pe: peCheckbox.checked
                 };
                 // Call endpoint

 <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">
             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 */
         .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;
         .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 {
         @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>
         <!-- Sidebar Controls -->
         <aside class="sidebar">
             <div class="header">
+                <h1>ERNIE Image Turbo</h1>
+                <p>High-Fidelity Gen-AI</p>
             </div>
             <div class="control-group">
                 <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
         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');
                     width: parseInt(widthSlider.value),
                     height: parseInt(heightSlider.value),
                     guidance_scale: parseFloat(guidanceSlider.value),
+                    num_inference_steps: parseInt(stepsSlider.value)
                 };
                 // Call endpoint