Update app.py

app.py

@@ -201,37 +201,84 @@ css = """
 #col-container {
     margin: 0 auto;
     max-width: 1024px;
+    padding: 20px;
 }
-#logo-title {
+
+.heading-title {
+    text-align: center;
+    font-style: italic;
+    color: #5b47d1;
+    margin: 0;
+    padding: 20px 0 12px 0;
+    font-size: 1.3em;
+    line-height: 1.4;
+}
+
+.image-preview-container {
+    width: 100%;
+    max-width: 100%; 
+    overflow: auto;
+    background: #222;
     text-align: center;
+    padding: 12px 0;
 }
-#logo-title img {
-    width: 400px;
+
+.image-true-size {
+    display: block;
+    max-width: none;
+    max-height: none;
+    width: auto;
+    height: auto;
+    object-fit: none;
+    background: #111;
+    border: 1px solid #444;
+    margin: 0 auto;
 }
-#edit_text{margin-top: -62px !important}
 """
 
+from PIL import Image
+import gradio as gr
+
+def get_img_html(img):
+    if isinstance(img, list):  # If multiple images, use the first
+        img = img[0]
+    if img is None:
+        return '<div>No image loaded.</div>'
+    width, height = img.size
+    import base64
+    from io import BytesIO
+    buffer = BytesIO()
+    img.save(buffer, format="PNG")
+    img_b64 = base64.b64encode(buffer.getvalue()).decode()
+    html = f"""
+    <div class="image-preview-container">
+        <img src="data:image/png;base64,{img_b64}" class="image-true-size"/>
+        <div style="color:#ccc;font-size:0.9em;margin-top:6px;">
+            Original size: {width} × {height} px
+        </div>
+    </div>
+    """
+    return html
+
 with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
-        gr.HTML("""
-        <div id="logo-title">
-            <h2 style="font-style: italic;color: #5b47d1;margin-top: -27px !important;margin-left: 96px">
-                Upload face image and get your acne, marks, black spots, blemishes removed.
-            </h2>
-        </div>
-        """)
+        gr.HTML('<div class="heading-title">Upload face image and get your acne, marks, black spots, blemishes removed.</div>')
+        
+        # True-size preview (above gallery)
+        preview_html = gr.HTML(value=get_img_html(None))
+        
         with gr.Row():
             with gr.Column():
                 input_images = gr.Gallery(
                     label="Input Images",
-                    show_label=False, 
-                    type="pil", 
+                    show_label=True,
+                    type="pil",
                     interactive=True
                 )
             with gr.Column():
                 result = gr.Gallery(
                     label="Result", 
-                    show_label=False, 
+                    show_label=True, 
                     type="pil"
                 )
                 use_output_btn = gr.Button(
@@ -242,7 +289,7 @@ with gr.Blocks(css=css) as demo:
                 )
 
         run_button = gr.Button(
-            "Get your acne, marks, black spots, blemishes removed", 
+            "Edit", 
             variant="primary"
         )
 
@@ -275,18 +322,18 @@ with gr.Blocks(css=css) as demo:
                     minimum=256,
                     maximum=2048,
                     step=8,
-                    value=None,
+                    value=512,
                 )
                 width = gr.Slider(
                     label="Width",
                     minimum=256,
                     maximum=2048,
                     step=8,
-                    value=None,
+                    value=512,
                 )
                 rewrite_prompt = gr.Checkbox(label="Rewrite prompt", value=True)
 
-    # Hardcode the removal prompt and do not show prompt input
+    # Hardcoded removal prompt
     DEFAULT_EDIT_PROMPT = "remove acne, marks, black spots, blemishes"
 
     gr.on(
@@ -321,6 +368,17 @@ with gr.Blocks(css=css) as demo:
         outputs=[input_images]
     )
 
+    # Update raw preview when input image changes
+    def preview_update(imgs, *args):
+        return get_img_html(imgs)
+
+    input_images.change(
+        preview_update,
+        inputs=[input_images],
+        outputs=[preview_html]
+    )
+
+
 
 if __name__ == "__main__":
     demo.launch()