Update app.py

app.py

@@ -10,7 +10,7 @@ from modelscope.outputs import OutputKeys
 from modelscope.pipelines import pipeline
 from modelscope.utils.constant import Tasks
 
-# Load the colorization model once at startup
+# Load the colorization model at startup
 img_colorization = pipeline(
     Tasks.image_colorization,
     model="iic/cv_ddcolor_image-colorization"
@@ -33,8 +33,12 @@ def enhance_image(
     edge_enhance: bool = False
 ) -> str:
     image = Image.open(img_path)
+
+    # Brightness adjustment
     image = ImageEnhance.Brightness(image).enhance(brightness)
+    # Contrast adjustment
     image = ImageEnhance.Contrast(image).enhance(contrast)
+    # Optional edge enhancement
     if edge_enhance:
         image = image.filter(ImageFilter.EDGE_ENHANCE)
 
@@ -50,220 +54,147 @@ def process_image(
     edge_enhance: bool,
     output_format: str
 ):
-    # 1) Colorize
+    # Step 1: Colorize
     colorized_path = colorize_image(img_path)
-    # 2) Enhance
+    # Step 2: Enhance (brightness/contrast/edge)
     enhanced_path = enhance_image(colorized_path, brightness, contrast, edge_enhance)
-    # 3) Convert to chosen format
+    # Step 3: Convert to chosen format
     img = Image.open(enhanced_path)
     temp_dir = tempfile.mkdtemp()
     filename = f"colorized_image.{output_format.lower()}"
     output_path = os.path.join(temp_dir, filename)
     img.save(output_path, format=output_format.upper())
 
-    # Return ([original, enhanced], download_file)
+    # Return side-by-side (original, enhanced) and the downloadable file
     return ([img_path, enhanced_path], output_path)
 
-# -------------------------------------------------------------------
-# Custom CSS & JS (injected via gr.HTML) for a modern, polished look
-# -------------------------------------------------------------------
-
-CUSTOM_STYLE = """
-<style>
-  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
-
-  body {
-    background-color: #f7f8fa;
-    font-family: 'Inter', sans-serif;
-  }
-  .gradio-container {
-    max-width: 960px !important;
-    margin: 40px auto !important;
-    padding: 0 16px;
-  }
-
-  /* HEADER */
-  #header {
-    background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
-    padding: 24px 16px;
+# CSS to give a modern, centered layout with a colored header and clean panels
+custom_css = """
+/* Overall background */
+body { 
+    background-color: #f0f2f5; 
+}
+
+/* Center the Gradio container and give it a max width */
+.gradio-container {
+    max-width: 900px !important;
+    margin: auto !important;
+}
+
+/* Header styling */
+#header {
+    background-color: #4CAF50;
+    padding: 20px;
     border-radius: 8px;
-    color: #fff;
     text-align: center;
-    box-shadow: 0 4px 12px rgba(0, 13, 255, 0.2);
-    margin-bottom: 32px;
-  }
-  #header h2 {
+    margin-bottom: 20px;
+}
+#header h2 {
+    color: white;
     margin: 0;
     font-size: 2rem;
-    font-weight: 700;
-  }
-  #header p {
-    margin: 8px 0 0;
+}
+#header p {
+    color: white;
+    margin: 5px 0 0 0;
     font-size: 1rem;
-    font-weight: 400;
-    opacity: 0.9;
-  }
-
-  /* CONTROL PANEL */
-  #control-panel {
-    background-color: #ffffff;
-    padding: 24px;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-    margin-bottom: 32px;
-  }
-
-  /* LABELS & COMPONENTS */
-  .gr-label {
-    color: #333;
-    font-weight: 600;
-    margin-bottom: 8px;
-  }
-  .gr-slider, .gr-dropdown, .gr-checkbox {
-    margin-top: 12px;
-  }
+}
 
-  /* BUTTON */
-  #submit-btn {
-    background: #000dff !important;
-    color: #fff !important;
-    border-radius: 8px !important;
-    font-weight: 600;
-    padding: 12px 24px !important;
-    margin-top: 16px !important;
-    transition: background 0.2s ease-in-out;
-  }
-  #submit-btn:hover {
-    background: #2029ff !important;
-  }
-
-  /* GALLERY */
-  #comparison_gallery {
-    background-color: #ffffff;
-    padding: 16px;
+/* White panel for controls */
+#control-panel {
+    background-color: white;
+    padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-  }
-  .gallery-item img {
-    border-radius: 4px;
-  }
-
-  /* DOWNLOAD BUTTON */
-  #download-btn .gr-button {
-    background: #00c853 !important;
-    color: #fff !important;
+    box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+}
+
+/* Style the “Colorize” button */
+#submit-btn {
+    background-color: #4CAF50 !important;
+    color: white !important;
     border-radius: 8px !important;
-    font-weight: 600;
+    font-weight: bold;
     padding: 10px 20px !important;
-    margin-top: 20px !important;
-    transition: background 0.2s ease-in-out;
-  }
-  #download-btn .gr-button:hover {
-    background: #10e77a !important;
-  }
-
-  /* TOOLTIP STYLES */
-  .has-tooltip {
-    position: relative;
-    cursor: help;
-  }
-  .has-tooltip:hover::after {
-    content: attr(data-tooltip);
-    position: absolute;
-    top: -36px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(51, 51, 51, 0.9);
-    color: #fff;
-    padding: 6px 10px;
-    border-radius: 4px;
-    white-space: nowrap;
-    font-size: 0.875rem;
-    z-index: 10;
-    opacity: 1;
-  }
-  .has-tooltip::after {
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-  }
-</style>
+    margin-top: 10px !important;
+}
+
+/* Add some spacing around sliders and checkbox */
+#control-panel .gr-row {
+    gap: 15px;
+}
+.gr-slider, .gr-checkbox, .gr-dropdown {
+    margin-top: 10px;
+}
+
+/* Gallery panel styling */
+#comparison_gallery {
+    background-color: white;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
+}
 
-<script>
-  // Smooth scroll to gallery once results appear
-  function scrollToGallery() {
-    const gallery = document.getElementById("comparison_gallery");
-    if (gallery) {
-      gallery.scrollIntoView({ behavior: "smooth", block: "start" });
-    }
-  }
-  document.addEventListener("gradio:submit", function() {
-    setTimeout(scrollToGallery, 800);
-  });
-</script>
+/* Download button spacing */
+#download-btn {
+    margin-top: 15px !important;
+}
 """
 
 TITLE = "🌈 Color Restorization Model"
 DESCRIPTION = "Bring your old black & white photos back to life—upload, adjust, and download in vivid color."
 
-with gr.Blocks(title=TITLE) as app:
-    # Inject custom CSS and JS
-    gr.HTML(CUSTOM_STYLE)
-
-    # Header
+with gr.Blocks(title=TITLE, css=custom_css) as app:
+    # Header section
     gr.HTML(
         """
         <div id="header">
-          <h2>🌈 Color Restorization Model</h2>
-          <p>Bring your old black & white photos back to life—upload, adjust, and download in vivid color.</p>
+            <h2>🌈 Color Restorization Model</h2>
+            <p>Bring your old black & white photos back to life—upload, adjust, and download in vivid color.</p>
         </div>
         """
     )
 
-    # Control panel: white card with inputs
+    # Main control panel: white box with rounded corners
     with gr.Column(elem_id="control-panel"):
         with gr.Row():
             # Left column: inputs and controls
-            with gr.Column(scale=1):
+            with gr.Column():
                 input_image = gr.Image(
                     type="filepath",
                     label="Upload B&W Image",
-                    tool="editor",
-                    interactive=True,
-                    elem_id="input-image"
+                    tool="editor",          # Enables zoom/pan
+                    interactive=True
                 )
                 brightness_slider = gr.Slider(
                     minimum=0.5, maximum=2.0, value=1.0,
-                    label="Brightness",
-                    elem_id="brightness-slider"
+                    label="Brightness"
                 )
                 contrast_slider = gr.Slider(
                     minimum=0.5, maximum=2.0, value=1.0,
-                    label="Contrast",
-                    elem_id="contrast-slider"
+                    label="Contrast"
                 )
                 edge_enhance_checkbox = gr.Checkbox(
-                    label="Apply Edge Enhancement",
-                    elem_id="edge-checkbox"
+                    label="Apply Edge Enhancement"
                 )
                 output_format_dropdown = gr.Dropdown(
                     choices=["PNG", "JPEG", "TIFF"],
                     value="PNG",
-                    label="Output Format",
-                    elem_id="format-dropdown"
+                    label="Output Format"
                 )
                 submit_btn = gr.Button(
-                    "Colorize",
+                    "Colorize", 
                     elem_id="submit-btn"
                 )
 
             # Right column: results gallery & download
-            with gr.Column(scale=1):
+            with gr.Column():
                 comparison_gallery = gr.Gallery(
                     label="Original vs. Colorized",
                     columns=2,
                     elem_id="comparison_gallery",
                     height="auto"
-                )
+                ).style(grid=[2], height="auto")
                 download_btn = gr.File(
                     label="Download Colorized Image",
                     elem_id="download-btn"
@@ -281,7 +212,7 @@ with gr.Blocks(title=TITLE) as app:
         outputs=[comparison_gallery, download_btn]
     )
 
-# Launch for production
+# “Production” launch: bind to 0.0.0.0 and use PORT env var if provided
 if __name__ == "__main__":
     port = int(os.environ.get("PORT", 7860))
-    app.queue().launch(server_name="0.0.0.0", server_port=port)
+    app.queue().launch(server_name="0.0.0.0", server_port=port)