Update better UI

app.py

@@ -46,40 +46,10 @@ model.fuse()
 model.eval()
 
 # Create the Gradio interface
-
-custom_css = """
-body {
-    background: linear-gradient(135deg, #1e1e2f, #2a2a40);
-    color: white;
-}
-.gradio-container {
-    max-width: 1000px !important;
-    margin: auto;
-}
-.header {
-    text-align: center;
-    padding: 20px;
-}
-.header h1 {
-    font-size: 2.2rem;
-    margin-bottom: 5px;
-}
-.header p {
-    color: #cfcfe0;
-}
-.button-primary {
-    background: linear-gradient(90deg, #ff7a18, #ffb347);
-    border: none;
-    color: white;
-    font-weight: bold;
-}
-"""
-
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks() as demo:
     # Header
-    with gr.Column(elem_classes="header"):
-        gr.Markdown("# 🎨 Comic Colorization")
-        gr.Markdown("Bring your grayscale comics to life with **ColorComicNet**")
+    gr.Markdown("# 🎨 Comic Colorization")
+    gr.Markdown("Bring your grayscale comics to life with **ColorComicNet**")
     with gr.Row(equal_height=True):
         with gr.Column(scale=1):
             input_image = gr.Image(
@@ -90,32 +60,27 @@ with gr.Blocks(css=custom_css) as demo:
                 "✨ Colorize Image",
                 elem_classes="button-primary"
             )
-
         with gr.Column(scale=1):
             output_image = gr.Image(
                 label="📤 Colorized Result",
                 type="numpy",
             )
-
     # Example section
     gr.Markdown("### 🖼️ Try an example")
     examples = gr.Examples(
         examples=[
-            ["gray.jpg"],
-            ["gray_2.jpg"],
-            ["gray_4.jpg"],
+            ["./examples/gray.jpg"],
+            ["./examples/gray_2.jpg"],
+            ["./examples/gray_4.jpg"],
         ],
         inputs=input_image
     )
-
     # Footer
     gr.Markdown("---")
-
     # Interaction
     colorize_button.click(
         fn=colorize_image,
         inputs=input_image,
         outputs=output_image
     )
-
 demo.launch()