updated the Ui

app.py

@@ -294,24 +294,108 @@ def generate_and_score(query: str):
     score = eval_resp.choices[0].message.content.strip()
 
     return post, score
+# Custom CSS for Instagram‑inspired gradient, typography, and layout
+custom_css = """
+/* Background gradient */
+body {
+    background: linear-gradient(135deg, #FDF2F8 0%, #F3E8FF 50%, #FFFFFF 100%);
+    height: 100vh;
+    margin: 0;
+    font-family: 'Poppins', sans-serif;
+}
+
+/* Main title styling */
+h1, h2, h3 {
+    background: linear-gradient(90deg, #8B5CF6, #EC4899);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 800 !important;
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+/* Section headers */
+.gr-textbox label, .gr-button, .gr-textbox-output label {
+    font-weight: 600 !important;
+    font-size: 1.2rem !important;
+    color: #374151 !important;
+}
+
+/* Input and output boxes */
+textarea, input {
+    border-radius: 16px !important;
+    border: 2px solid transparent !important;
+    background: rgba(255,255,255,0.8) !important;
+    padding: 12px !important;
+    font-size: 1rem !important;
+    font-weight: 400 !important;
+    color: #1F2937 !important;
+}
+textarea:focus, input:focus {
+    outline: none !important;
+    border: 2px solid #8B5CF6 !important;
+    box-shadow: 0 0 10px rgba(139,92,246,0.5) !important;
+}
+
+/* Generate button */
+button {
+    background: linear-gradient(90deg, #8B5CF6, #EC4899) !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    border-radius: 16px !important;
+    font-size: 1.1rem !important;
+    font-weight: 700 !important;
+    padding: 14px 24px !important;
+    transition: all 0.3s ease !important;
+}
+button:hover {
+    background: linear-gradient(90deg, #EC4899, #8B5CF6) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 20px rgba(236,72,153,0.4) !important;
+}
+
+/* Output caption box larger */
+.gr-textbox-output textarea {
+    min-height: 200px !important;
+}
+
+/* Score display styling */
+.score-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(90deg, #3B82F6, #8B5CF6) !important;
+    border-radius: 50%;
+    width: 80px;
+    height: 80px;
+    margin: auto;
+}
+.score-box p {
+    color: #FFFFFF;
+    font-size: 2rem;
+    font-weight: 800;
+    margin: 0;
+}
+"""
 
-# Build Gradio UI
-theme = gr.themes.Default(primary_hue="purple")
-
-with gr.Blocks(title="iboothme Instagram Post Generator", theme=theme) as demo:
-    gr.Markdown("## iboothme Instagram Caption Generator & Evaluator")
+# Build the Gradio app
+with gr.Blocks(css=custom_css, title="iboothme Instagram Post Generator") as demo:
+    gr.Markdown("<h1>📸 iboothme Instagram Caption Generator & Evaluator</h1>")
+    
     with gr.Row():
         query_input = gr.Textbox(
             label="Enter your post brief or query",
             placeholder="e.g. Client: NAOS… Challenge: Engage attendees at…",
             lines=4
         )
+    
     with gr.Row():
-        generate_btn = gr.Button("Generate & Score", variant="primary")
+        generate_btn = gr.Button("🚀 Generate & Score", variant="primary")
+    
     with gr.Row():
         post_output = gr.Textbox(label="Generated Instagram Caption", lines=10)
         score_output = gr.Textbox(label="Quality Score (1–10)", lines=1)
-
+    
     generate_btn.click(
         fn=generate_and_score,
         inputs=[query_input],
@@ -319,4 +403,4 @@ with gr.Blocks(title="iboothme Instagram Post Generator", theme=theme) as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(share=True)