Update app.py

app.py

@@ -48,78 +48,42 @@ def check_password(password):
     return password == "pixo"
 
 css = '''
-#top{position: fixed; right: 20px; top: 20px; max-width: 300px; z-index: 1000;}
-
 body {
     font-family: 'Roboto', sans-serif;
-    background: linear-gradient(135deg, #f5d0fe, #d8b4fe);
-    color: #4a0e4e;
-    transition: background-color 0.3s, color 0.3s;
+    background-color: #f0f0f0;
+    color: #333;
 }
-
 .container {
-    background-color: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    border-radius: 15px;
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     padding: 20px;
     margin-bottom: 20px;
 }
-
 .gradio-slider input[type="range"] {
-    accent-color: #d946ef;
+    accent-color: #6200ea;
 }
-
 .gradio-button {
-    background-color: #a21caf;
+    background-color: #6200ea;
     color: white;
     border: none;
     padding: 10px 20px;
     border-radius: 5px;
     cursor: pointer;
-    transition: background-color 0.3s, transform 0.1s;
-    font-weight: bold;
+    transition: background-color 0.3s;
 }
-
 .gradio-button:hover {
-    background-color: #86198f;
-    transform: translateY(-2px);
+    background-color: #3700b3;
 }
-
-.gradio-slider, .gradio-dropdown, .gradio-checkbox, .gradio-radio, .gradio-textbox, .gradio-number {
-    background-color: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 10px;
-}
-
-h1, h2, h3 {
-    color: #701a75;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+.result-image {
+    width: 100%;
+    max-width: 512px;
+    margin: 0 auto;
+    display: block;
 }
-
-@media (prefers-color-scheme: dark) {
-    body {
-        background: linear-gradient(135deg, #3b0764, #581c87);
-        color: #e9d5ff;
-    }
-    
+@media (max-width: 768px) {
     .container {
-        background-color: rgba(0, 0, 0, 0.2);
-    }
-
-    h1, h2, h3 {
-        color: #d8b4fe;
-    }
-
-    .gradio-button {
-        background-color: #d946ef;
-        color: #1a1a1a;
-    }
-
-    .gradio-button:hover {
-        background-color: #e879f9;
+        padding: 10px;
     }
 }
 '''
@@ -134,94 +98,46 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     with gr.Column(visible=False) as main_interface:
         gr.Markdown("## 🎨 Demo for expression-editor cog image by fofr")
         with gr.Row():
-            with gr.Column(scale=2, elem_classes="container"):
+            with gr.Column(scale=1, elem_classes="container"):
                 image = gr.Image(
                     label="Input image", 
                     type="filepath",
-                    height=180
+                    height=256
                 )
                 with gr.Row():
-                    rotate_pitch = gr.Slider(
-                        label="Rotate Up-Down",
-                        value=0,
-                        minimum=-20, maximum=20
-                    )
-                    rotate_yaw = gr.Slider(
-                        label="Rotate Left-Right turn", 
-                        value=0,
-                        minimum=-20, maximum=20
-                    )
-                    rotate_roll = gr.Slider(
-                        label="Rotate Left-Right tilt", value=0,
-                        minimum=-20, maximum=20
-                    )
+                    rotate_pitch = gr.Slider(label="Rotate Up-Down", value=0, minimum=-20, maximum=20)
+                    rotate_yaw = gr.Slider(label="Rotate Left-Right turn", value=0, minimum=-20, maximum=20)
                 with gr.Row():
-                    blink = gr.Slider(
-                        label="Blink", value=0,
-                        minimum=-20, maximum=5
-                    )
-                    eyebrow = gr.Slider(
-                        label="Eyebrow", value=0,
-                        minimum=-10, maximum=15
-                    )
-                    wink = gr.Slider(
-                        label="Wink", value=0,
-                        minimum=0, maximum=25
-                    )
+                    rotate_roll = gr.Slider(label="Rotate Left-Right tilt", value=0, minimum=-20, maximum=20)
+                    blink = gr.Slider(label="Blink", value=0, minimum=-20, maximum=5)
                 with gr.Row():
-                    pupil_x = gr.Slider(
-                        label="Pupil X", value=0,
-                        minimum=-15, maximum=15
-                    )
-                    pupil_y = gr.Slider(
-                        label="Pupil Y", value=0,
-                        minimum=-15, maximum=15
-                    )
+                    eyebrow = gr.Slider(label="Eyebrow", value=0, minimum=-10, maximum=15)
+                    wink = gr.Slider(label="Wink", value=0, minimum=0, maximum=25)
                 with gr.Row():
-                    aaa = gr.Slider(
-                        label="Aaa", value=0,
-                        minimum=-30, maximum=120
-                    )
-                    eee = gr.Slider(
-                        label="Eee", value=0,
-                        minimum=-20, maximum=15
-                    )
-                    woo = gr.Slider(
-                        label="Woo", value=0,
-                        minimum=-20, maximum=15
-                    )
-                smile = gr.Slider(
-                    label="Smile", value=0,
-                    minimum=-0.3, maximum=1.3
-                )
+                    pupil_x = gr.Slider(label="Pupil X", value=0, minimum=-15, maximum=15)
+                    pupil_y = gr.Slider(label="Pupil Y", value=0, minimum=-15, maximum=15)
+                with gr.Row():
+                    aaa = gr.Slider(label="Aaa", value=0, minimum=-30, maximum=120)
+                    eee = gr.Slider(label="Eee", value=0, minimum=-20, maximum=15)
+                with gr.Row():
+                    woo = gr.Slider(label="Woo", value=0, minimum=-20, maximum=15)
+                    smile = gr.Slider(label="Smile", value=0, minimum=-0.3, maximum=1.3)
                 with gr.Accordion("More Settings", open=False):
-                    src_ratio = gr.Number(
-                        label="Src Ratio", info='''Source ratio''', value=1
-                    )
-                    sample_ratio = gr.Slider(
-                        label="Sample Ratio", info='''Sample ratio''', value=1,
-                        minimum=-0.2, maximum=1.2
-                    )
-                    crop_factor = gr.Slider(
-                        label="Crop Factor", info='''Crop factor''', value=1.7,
-                        minimum=1.5, maximum=2.5
-                    )
-                    output_format = gr.Dropdown(
-                        choices=['webp', 'jpg', 'png'], label="output_format", info='''Format of the output images''', value="webp"
-                    )
-                    output_quality = gr.Number(
-                        label="Output Quality", info='''Quality of the output images, from 0 to 100. 100 is best quality, 0 is lowest quality.''', value=95
-                    )
+                    src_ratio = gr.Number(label="Src Ratio", info='Source ratio', value=1)
+                    sample_ratio = gr.Slider(label="Sample Ratio", info='Sample ratio', value=1, minimum=-0.2, maximum=1.2)
+                    crop_factor = gr.Slider(label="Crop Factor", info='Crop factor', value=1.7, minimum=1.5, maximum=2.5)
+                    output_format = gr.Dropdown(choices=['webp', 'jpg', 'png'], label="Output Format", info='Format of the output images', value="webp")
+                    output_quality = gr.Number(label="Output Quality", info='Quality of the output images, from 0 to 100. 100 is best quality, 0 is lowest quality.', value=95)
                 submit_btn = gr.Button("Generate", variant="primary")
+            
             with gr.Column(scale=1):
-                result_image = gr.Image(elem_id="top", label="Generated Image")
+                result_image = gr.Image(elem_classes="result-image", label="Generated Image")
                 gr.HTML("""
-                <div style="display: flex; justify-content: center; align-items: center; text-align: center;">
-                    <p style="display: flex;gap: 6px;">
-                         <a href="https://huggingface.co/spaces/fffiloni/expression-editor?duplicate=true">
-                            <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/duplicate-this-space-md.svg" alt="Duplicate this Space">
-                        </a> to skip the queue and enjoy faster inference on the GPU of your choice 
-                    </p>
+                <div style="text-align: center; margin-top: 20px;">
+                    <a href="https://huggingface.co/spaces/fffiloni/expression-editor?duplicate=true">
+                        <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/duplicate-this-space-md.svg" alt="Duplicate this Space">
+                    </a>
+                    <p>Skip the queue and enjoy faster inference on the GPU of your choice</p>
                 </div>
                 """)