Update app.py

app.py

@@ -9,110 +9,99 @@ from utils.gradio_helpers import parse_outputs, process_outputs
 names = ['image', 'rotate_pitch', 'rotate_yaw', 'rotate_roll', 'blink', 'eyebrow', 'wink', 'pupil_x', 'pupil_y', 'aaa', 'eee', 'woo', 'smile', 'src_ratio', 'sample_ratio', 'crop_factor', 'output_format', 'output_quality']
 
 def predict(request: gr.Request, *args, progress=gr.Progress(track_tqdm=True)):
-    headers = {'Content-Type': 'application/json'}
-
-    payload = {"input": {}}
-    
-    
-    base_url = "http://0.0.0.0:7860"
-    for i, key in enumerate(names):
-        value = args[i]
-        if value and (os.path.exists(str(value))):
-            value = f"{base_url}/file=" + value
-        if value is not None and value != "":
-            payload["input"][key] = value
-
-    response = requests.post("http://0.0.0.0:5000/predictions", headers=headers, json=payload)
-
-    
-    if response.status_code == 201:
-        follow_up_url = response.json()["urls"]["get"]
-        response = requests.get(follow_up_url, headers=headers)
-        while response.json()["status"] != "succeeded":
-            if response.json()["status"] == "failed":
-                raise gr.Error("The submission failed!")
-            response = requests.get(follow_up_url, headers=headers)
-            time.sleep(1)
-    if response.status_code == 200:
-        json_response = response.json()
-        #If the output component is JSON return the entire output response 
-        if(outputs[0].get_config()["name"] == "json"):
-            return json_response["output"]
-        predict_outputs = parse_outputs(json_response["output"])
-        processed_outputs = process_outputs(predict_outputs)
-        
-        return tuple(processed_outputs) if len(processed_outputs) > 1 else processed_outputs[0]
-    else:
-        if(response.status_code == 409):
-            raise gr.Error(f"Sorry, the Cog image is still processing. Try again in a bit.")
-        raise gr.Error(f"The submission failed! Error: {response.status_code}")
+    # ... (keep the predict function as is)
 
 def check_password(password):
     return password == "pixo"
 
 css = '''
-#top{position: fixed;}
+#top{position: fixed; right: 20px; top: 20px; max-width: 300px; z-index: 1000;}
 
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Roboto', sans-serif;
+    background: linear-gradient(135deg, #f5d0fe, #d8b4fe);
+    color: #4a0e4e;
     transition: background-color 0.3s, color 0.3s;
 }
 
-body.dark-mode {
-    background-color: #1a1a1a;
-    color: #ffffff;
-}
-
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
+    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);
     padding: 20px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
 }
 
 .gradio-slider input[type="range"] {
-    accent-color: #ff69b4;
+    accent-color: #d946ef;
 }
 
 .gradio-button {
-    background-color: #9370db;
+    background-color: #a21caf;
     color: white;
     border: none;
     padding: 10px 20px;
     border-radius: 5px;
     cursor: pointer;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s, transform 0.1s;
+    font-weight: bold;
 }
 
 .gradio-button:hover {
-    background-color: #8a2be2;
+    background-color: #86198f;
+    transform: translateY(-2px);
+}
+
+.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);
 }
 
 @media (prefers-color-scheme: dark) {
     body {
-        background-color: #1a1a1a;
-        color: #ffffff;
+        background: linear-gradient(135deg, #3b0764, #581c87);
+        color: #e9d5ff;
     }
     
     .container {
-        background-color: rgba(255, 255, 255, 0.05);
+        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;
     }
 }
 '''
 
-with gr.Blocks(css=css) as demo:
-    gr.Markdown("# Expression Editor")
+with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
+    gr.Markdown("# 🎭 Expression Editor")
     
     with gr.Column():
-        password = gr.Textbox(type="password", label="Enter password")
-        login_button = gr.Button("Login")
+        password = gr.Textbox(type="password", label="Enter password", placeholder="Enter 'pixo' to access")
+        login_button = gr.Button("Login", variant="primary")
     
     with gr.Column(visible=False) as main_interface:
-        gr.Markdown("Demo for expression-editor cog image by fofr")
+        gr.Markdown("## 🎨 Demo for expression-editor cog image by fofr")
         with gr.Row():
-            with gr.Column(elem_classes="container"):
+            with gr.Column(scale=2, elem_classes="container"):
                 image = gr.Image(
                     label="Input image", 
                     type="filepath",
@@ -190,9 +179,9 @@ with gr.Blocks(css=css) as demo:
                     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("Submit")
-            with gr.Column():
-                result_image = gr.Image(elem_id="top")
+                submit_btn = gr.Button("Generate", variant="primary")
+            with gr.Column(scale=1):
+                result_image = gr.Image(elem_id="top", label="Generated Image")
                 gr.HTML("""
                 <div style="display: flex; justify-content: center; align-items: center; text-align: center;">
                     <p style="display: flex;gap: 6px;">