improve gradio interface

app.py

@@ -309,27 +309,41 @@ def webcam_input(frame, transform, lip_color):
     return frame, face_shape, glass_shape
 
 
-
-# Gradio Interface
+# Gradio interface
 with gr.Blocks(theme=gr.themes.Soft(primary_hue="purple", secondary_hue="blue")) as demo:
     gr.Markdown("<h1 style='text-align: center; font-weight: bold;'>🤓 Glasses Virtual Try-On 🕶️👓</h1>")
     with gr.Column(elem_classes=["my-column"]):
         with gr.Group(elem_classes=["my-group"]):
-            gr.Markdown("<h1 style='text-align: center; color: blue;'>You can only apply one filter at a time, either the transform filter or the lip color filter.</h1>")
-            transform = gr.Dropdown(choices=["cartoon", "edges", "sepia", "negative", "sketch", "blur", "none"],
-                                    value="none", label="Select Filter")
-            lip_color = gr.Dropdown(choices=["classic_red", "deep_red", "cherry_red", "rose_red", "wine_red", "brick_red", "coral_red", "berry_red", "ruby_red", "crimson_red", "none"],
-                                    value="none", label="Select Lip Color")
-            gr.Markdown("Click the Webcam icon to start the camera, and then press the record button to start the virtual try-on.")
+            gr.Markdown("<p style='text-align: left; color: purple;'>🟣You can only apply one filter at a time, either the transform filter or the lip color filter.</p>")
+            # Two filters: transform and lip color
+            with gr.Row():
+                transform = gr.Dropdown(
+                    choices=["cartoon", "edges", "sepia", "negative", "sketch", "blur", "none"],
+                    value="none", label="Select Filter"
+                )
+
+                lip_color = gr.Dropdown(
+                    choices=["classic_red", "deep_red", "cherry_red", "rose_red", "wine_red", "brick_red", "coral_red", "berry_red", "ruby_red", "crimson_red", "none"],
+                    value="none", label="Select Lip Color"
+                )
+            gr.Markdown("<p style='text-align: left; font-weight: bold; color: purple;'>🟣Click the Webcam icon to start the camera, and then press the record button to start the virtual try-on.</p>")
             input_img = gr.Image(sources=["webcam"], type="numpy", streaming=True)
-            gr.Markdown("Face Shape and Recommended Glass Shape")
-            face_shape_output = gr.Textbox(label="Detected Face Shape")
-            glass_shape_output = gr.Textbox(label="Recommended Glass Shape")
             next_button = gr.Button("Next Glasses➡️")
+            gr.Markdown("<p style='text-align: left; color: purple;'>🟣Face Shape and Recommended Glass Shape</p>")
+            
+            # Face shape and recommended glass shape
+            with gr.Row():
+                face_shape_output = gr.Textbox(label="Detected Face Shape")
+                glass_shape_output = gr.Textbox(label="Recommended Glass Shape")
+
             save_button = gr.Button("Save as a Picture📌")
-            gr.Markdown("‼️Warning: Refresh the page after saving the picture to use the virtual try-on again.")
+
+            gr.Markdown("<p style='text-align: left; color: red;'>‼️Warning: Refresh the page after saving the picture to use the virtual try-on again.</p>")
+
             download_link = gr.File(label="Download Saved Picture")
+
     input_img.stream(webcam_input, [input_img, transform, lip_color], [input_img, face_shape_output, glass_shape_output], stream_every=0.1)
+
     with gr.Row():
         next_button.click(change_glasses, [], [])
     with gr.Row():