app.py

import gradio as gr
import spaces
from gradio_imageslider import ImageSlider
from image_gen_aux import UpscaleWithModel
from image_gen_aux.utils import load_image

# 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 = {
"1xDeH264_realplksr": "Phips/1xDeH264_realplksr",
"1xDeJPG_HAT": "Phips/1xDeJPG_HAT",
"1xDeJPG_OmniSR": "Phips/1xDeJPG_OmniSR",
"1xDeJPG_realplksr_otf": "Phips/1xDeJPG_realplksr_otf",
"1xDeJPG_SRFormer_light": "Phips/1xDeJPG_SRFormer_light",
"1xDeNoise_realplksr_otf": "Phips/1xDeNoise_realplksr_otf",
"1xExposureCorrection_compact": "Phips/1xExposureCorrection_compact",
"1xOverExposureCorrection_compact": "Phips/1xOverExposureCorrection_compact",
"1xUnderExposureCorrection_compact": "Phips/1xUnderExposureCorrection_compact",
"2xAoMR_mosr": "Phips/2xAoMR_mosr",
"2xEvangelion_compact": "Phips/2xEvangelion_compact",
"2xEvangelion_dat2": "Phips/2xEvangelion_dat2",
"2xEvangelion_omnisr": "Phips/2xEvangelion_omnisr",
"2xHFA2k_compact_multijpg": "Phips/2xHFA2k_compact_multijpg",
"2xHFA2k_LUDVAE_compact": "Phips/2xHFA2k_LUDVAE_compact",
"2xHFA2k_LUDVAE_SPAN": "Phips/2xHFA2k_LUDVAE_SPAN",
"2xHFA2kAVCCompact": "Phips/2xHFA2kAVCCompact",
"2xHFA2kAVCOmniSR": "Phips/2xHFA2kAVCOmniSR",
"2xHFA2kAVCSRFormer_light": "Phips/2xHFA2kAVCSRFormer_light",
"2xHFA2kCompact": "Phips/2xHFA2kCompact",
"2xHFA2kOmniSR": "Phips/2xHFA2kOmniSR",
"2xHFA2kReal-CUGAN": "Phips/2xHFA2kReal-CUGAN",
"2xHFA2kShallowESRGAN": "Phips/2xHFA2kShallowESRGAN",
"2xHFA2kSPAN": "Phips/2xHFA2kSPAN",
"2xHFA2kSwinIR-S": "Phips/2xHFA2kSwinIR-S",
"2xLexicaRRDBNet": "Phips/2xLexicaRRDBNet",
"2xLexicaRRDBNet_Sharp": "Phips/2xLexicaRRDBNet_Sharp",
"2xNomosUni_compact_multijpg": "Phips/2xNomosUni_compact_multijpg",
"2xNomosUni_compact_multijpg_ldl": "Phips/2xNomosUni_compact_multijpg_ldl",
"2xNomosUni_compact_otf_medium": "Phips/2xNomosUni_compact_otf_medium",
"2xNomosUni_esrgan_multijpg": "Phips/2xNomosUni_esrgan_multijpg",
"2xNomosUni_span_multijpg": "Phips/2xNomosUni_span_multijpg",
"2xNomosUni_span_multijpg_ldl": "Phips/2xNomosUni_span_multijpg_ldl",
"2xParimgCompact": "Phips/2xParimgCompact",
"4x4xTextures_GTAV_rgt-s": "Phips/4xTextures_GTAV_rgt-s",
"4xArtFaces_realplksr_dysample": "Phips/4xArtFaces_realplksr_dysample",
"4xBHI_dat2_multiblur": "Phips/4xBHI_dat2_multiblur",
"4xBHI_dat2_multiblurjpg": "Phips/4xBHI_dat2_multiblurjpg",
"4xBHI_dat2_otf": "Phips/4xBHI_dat2_otf",
"4xBHI_dat2_real": "Phips/4xBHI_dat2_real",
"4xBHI_realplksr_dysample_multi": "Phips/4xBHI_realplksr_dysample_multi",
"4xBHI_realplksr_dysample_multiblur": "Phips/4xBHI_realplksr_dysample_multiblur",
"4xBHI_realplksr_dysample_otf": "Phips/4xBHI_realplksr_dysample_otf",
"4xBHI_realplksr_dysample_otf_nn": "Phips/4xBHI_realplksr_dysample_otf_nn",
"4xBHI_realplksr_dysample_real": "Phips/4xBHI_realplksr_dysample_real",
"4xFaceUpDAT": "Phips/4xFaceUpDAT",
"4xFaceUpLDAT": "Phips/4xFaceUpLDAT",
"4xFaceUpSharpDAT": "Phips/4xFaceUpSharpDAT",
"4xFaceUpSharpLDAT": "Phips/4xFaceUpSharpLDAT",
"4xFFHQDAT": "Phips/4xFFHQDAT",
"4xFFHQLDAT": "Phips/4xFFHQLDAT",
"4xHFA2k": "Phips/4xHFA2k",
"4xHFA2k_ludvae_realplksr_dysample": "Phips/4xHFA2k_ludvae_realplksr_dysample",
"4xHFA2kLUDVAEGRL_small": "Phips/4xHFA2kLUDVAEGRL_small",
"4xHFA2kLUDVAESRFormer_light": "Phips/4xHFA2kLUDVAESRFormer_light",
"4xHFA2kLUDVAESwinIR_light": "Phips/4xHFA2kLUDVAESwinIR_light",
"4xLexicaDAT2_otf": "Phips/4xLexicaDAT2_otf",
"4xLSDIRCompact2": "Phips/4xLSDIRCompact2",
"4xLSDIRCompact": "Phips/4xLSDIRCompact",
"4xLSDIRCompactC3": "Phips/4xLSDIRCompactC3",
"4xLSDIRCompactC": "Phips/4xLSDIRCompactC",
"4xLSDIRCompactCR3": "Phips/4xLSDIRCompactCR3",
"4xLSDIRCompactN3": "Phips/4xLSDIRCompactN3",
"4xLSDIRCompactR3": "Phips/4xLSDIRCompactR3",
"4xLSDIRCompactR": "Phips/4xLSDIRCompactR",
"4xLSDIRDAT": "Phips/4xLSDIRDAT",
"4xNature_realplksr_dysample": "Phips/4xNature_realplksr_dysample",
"4xNomos2_hq_atd": "Phips/4xNomos2_hq_atd",
"4xNomos2_hq_dat2": "Phips/4xNomos2_hq_dat2",
"4xNomos2_hq_drct-l": "Phips/4xNomos2_hq_drct-l",
"4xNomos2_hq_mosr": "Phips/4xNomos2_hq_mosr",
"4xNomos2_otf_esrgan": "Phips/4xNomos2_otf_esrgan",
"4xNomos2_realplksr_dysample": "Phips/4xNomos2_realplksr_dysample",
"4xNomos8k_atd_jpg": "Phips/4xNomos8k_atd_jpg",
"4xNomos8kDAT": "Phips/4xNomos8kDAT",
"4xNomos8kHAT-L_bokeh_jpg": "Phips/4xNomos8kHAT-L_bokeh_jpg",
"4xNomos8kHAT-L_otf": "Phips/4xNomos8kHAT-L_otf",
"4xNomos8kSC": "Phips/4xNomos8kSC",
"4xNomos8kSCHAT-L": "Phips/4xNomos8kSCHAT-L",
"4xNomos8kSCHAT-S": "Phips/4xNomos8kSCHAT-S",
"4xNomos8kSCSRFormer": "Phips/4xNomos8kSCSRFormer",
"4xNomosUni_rgt_multijpg": "Phips/4xNomosUni_rgt_multijpg",
"4xNomosUni_rgt_s_multijpg": "Phips/4xNomosUni_rgt_s_multijpg",
"4xNomosUni_span_multijpg": "Phips/4xNomosUni_span_multijpg",
"4xNomosUniDAT2_box": "Phips/4xNomosUniDAT2_box",
"4xNomosUniDAT2_multijpg_ldl": "Phips/4xNomosUniDAT2_multijpg_ldl",
"4xNomosUniDAT2_multijpg_ldl_sharp": "Phips/4xNomosUniDAT2_multijpg_ldl_sharp",
"4xNomosUniDAT_bokeh_jpg": "Phips/4xNomosUniDAT_bokeh_jpg",
"4xNomosUniDAT_otf": "Phips/4xNomosUniDAT_otf",
"4xNomosWebPhoto_atd": "Phips/4xNomosWebPhoto_atd",
"4xNomosWebPhoto_esrgan": "Phips/4xNomosWebPhoto_esrgan",
"4xNomosWebPhoto_RealPLKSR": "Phips/4xNomosWebPhoto_RealPLKSR",
"4xReal_SSDIR_DAT_GAN": "Phips/4xReal_SSDIR_DAT_GAN",
"4xRealWebPhoto_v3_atd": "Phips/4xRealWebPhoto_v3_atd",
"4xRealWebPhoto_v4_dat2": "Phips/4xRealWebPhoto_v4_dat2",
"4xRealWebPhoto_v4_drct-l": "Phips/4xRealWebPhoto_v4_drct-l",
"4xSSDIRDAT": "Phips/4xSSDIRDAT",
"4xTextureDAT2_otf": "Phips/4xTextureDAT2_otf",
"4xTextures_GTAV_rgt-s": "Phips/4xTextures_GTAV_rgt-s",
"4xTextures_GTAV_rgt-s_dither": "Phips/4xTextures_GTAV_rgt-s_dither",
}


@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>
'''

with gr.Blocks(css=custom_css) as demo:
    gr.HTML(title)
    with gr.Row():
        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", 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(
        fn=clear_result,
        inputs=None,
        outputs=result,
    ).then(
        fn=upscale_image,
        inputs=[input_image, model_selection],
        outputs=result,
    )

if __name__ == "__main__":
    demo.launch(share=True)