Update app.py

app.py

@@ -4,10 +4,55 @@ from gradio_imageslider import ImageSlider
 from image_gen_aux import UpscaleWithModel
 from image_gen_aux.utils import load_image
 
-# This uses https://github.com/asomoza/image_gen_aux/blob/main/src/image_gen_aux/upscalers/README.md
-# Also this space has been duplicated from their official huggingface space, https://huggingface.co/spaces/OzzyGT/basic_upscaler
-# They did great work, and I was happy to see them to also use my models :) I thought Id duplicate it and extend it.
-# It basically made me get a pro account so I can make a Zero GPU space and made me upload a lot of my models on huggingface now so I can use them here ;)
+# Custom CSS for dark grey-blue gradients, animations, and hover effects
+custom_css = r"""
+body {
+    background: linear-gradient(135deg, #2a2a3f, #1e1e2f);
+    color: #e0e0e0;
+}
+.gradio-container {
+    background: transparent;
+}
+.gradio-block {
+    background: rgba(30, 30, 47, 0.8);
+    border-radius: 16px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
+    padding: 20px;
+    margin-bottom: 20px;
+    transition: transform 0.3s ease;
+}
+.gradio-block:hover {
+    transform: translateY(-5px);
+}
+.gradio-button {
+    background: linear-gradient(135deg, #3a3a5f, #2a2a4f);
+    color: #ffffff;
+    border: none;
+    padding: 10px 20px;
+    font-size: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.gradio-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6);
+}
+.gradio-image {
+    border-radius: 12px;
+    transition: filter 0.4s ease;
+}
+.gradio-image:hover {
+    filter: brightness(1.1) saturate(1.2);
+}
+@keyframes glow {
+    0%, 100% { text-shadow: 0 0 5px rgba(58, 138, 189, 0.7), 0 0 10px rgba(58, 138, 189, 0.5); }
+    50% { text-shadow: 0 0 20px rgba(58, 138, 189, 1), 0 0 30px rgba(58, 138, 189, 0.8); }
+}
+.title {
+    animation: glow 2s infinite;
+}
+"""
 
 # My models, alphabetically sorted
 MODELS = {
@@ -117,41 +162,37 @@ MODELS = {
 @spaces.GPU
 def upscale_image(image, model_selection):
     original = load_image(image)
-
     upscaler = UpscaleWithModel.from_pretrained(MODELS[model_selection]).to("cuda")
     image = upscaler(original, tiling=True, tile_width=1024, tile_height=1024)
-
     return original, image
 
-
 def clear_result():
     return gr.update(value=None)
 
+# Title with neon glow effect
+title = '''<h1 align="center" class="title">Image Upscaler</h1>
+<div align="center">Use this Space to upscale your images with fancy CSS animations and dark gradients. powered by 
+<a href="https://github.com/asomoza/image_gen_aux" style="color:#3aaebd; text-decoration:none;">Image Gen Aux</a> and 
+<a href="https://github.com/Phhofm/models" style="color:#3aaebd; text-decoration:none;">self-trained models</a>.</div>
+'''
 
-title = """<h1 align="center">Image Upscaler</h1>
-<div align="center">Use this Space to upscale your images, makes use of the
-<a href="https://github.com/asomoza/image_gen_aux">Image Generation Auxiliary Tools</a> library. <br> 
-This space makes use of <a href="https://github.com/Phhofm/models">my self trained models</a> and tiles at 1024x1024<br>
-Here is an <a href="https://huggingface.co/spaces/Phips/Upscaler/resolve/main/input_example1.png">example input image</a> you can use to try it out.</div>
-"""
-
-with gr.Blocks() as demo:
+with gr.Blocks(css=custom_css) as demo:
     gr.HTML(title)
     with gr.Row():
-        with gr.Column():
-            input_image = gr.Image(type="pil", label="Input Image")
-
+        with gr.Column(scale=1, min_width=200):
+            input_image = gr.Image(type="pil", label="Input Image", elem_classes="gradio-image")
             model_selection = gr.Dropdown(
                 choices=list(MODELS.keys()),
                 value="4xNomosWebPhoto_RealPLKSR",
                 label="Model (alphabetically sorted)",
+                elem_id="model-dropdown"
             )
-
-            run_button = gr.Button("Upscale")
-        with gr.Column():
+            run_button = gr.Button("Upscale", elem_classes="gradio-button")
+        with gr.Column(scale=1, min_width=200):
             result = ImageSlider(
                 interactive=False,
                 label="Generated Image",
+                elem_classes="gradio-image"
             )
 
     run_button.click(
@@ -164,5 +205,5 @@ with gr.Blocks() as demo:
         outputs=result,
     )
 
-
-demo.launch(share=False)
+if __name__ == "__main__":
+    demo.launch(share=False)