Update app.py

app.py

@@ -91,18 +91,29 @@ example_images = [
     "https://apnapestcontrol.ca/wp-content/uploads/2019/02/9.jpg",  
     "https://images.pexels.com/photos/1107717/pexels-photo-1107717.jpeg?cs=srgb&dl=pexels-fotios-photos-1107717.jpg&fm=jpg"
 ]
-
-# Create Gradio interface
+css = """
+    .gradio-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .gradio-title, .gradio-description {
+        text-align: center;
+    }
+"""
+
+# Create Gradio interface with custom CSS
 iface = gr.Interface(
     fn=predict_emotion,
     inputs=gr.Image(type="pil", label="Upload an Image"),
     outputs=[gr.Textbox(label="Emotion"), gr.Textbox(label="Memorability Score")],
-    title="<div style='text-align: center;'>PerceptCLIP</div>",
-    description="<div style='text-align: center;'>This is an official demo of PerceptCLIP from the paper: [Don’t Judge Before You CLIP: A Unified Approach for Perceptual Tasks](https://arxiv.org/pdf/2503.13260). For each specific task, we fine-tune CLIP with LoRA and an MLP head. Our models achieve state-of-the-art performance. <br>This demo shows results from three models, one for each task - visual emotion analysis, memorability prediction, and image quality assessment.</div>",
-    examples=example_images  
+    title="PerceptCLIP",
+    description="This is an official demo of PerceptCLIP from the paper: [Don’t Judge Before You CLIP: A Unified Approach for Perceptual Tasks](https://arxiv.org/pdf/2503.13260). For each specific task, we fine-tune CLIP with LoRA and an MLP head. Our models achieve state-of-the-art performance. \nThis demo shows results from three models, one for each task - visual emotion analysis, memorability prediction, and image quality assessment.",
+    examples=example_images,
+    css=css  # Inject the custom CSS
 )
 
 
-
 if __name__ == "__main__":
     iface.launch()