Update app.py

app.py

@@ -5,15 +5,167 @@ def generate(topic, platform):
     post, engagement, tone, clarity = workflow(topic, platform)
     return post, engagement, tone, clarity
 
-with gr.Blocks() as demo:
-    gr.Markdown("# Social Media Post Generator")
-    topic_input = gr.Textbox(label="Topic", placeholder="Enter topic here")
-    platform_input = gr.Textbox(label="Platform", placeholder="e.g., LinkedIn, Twitter")
-    generate_btn = gr.Button("Generate Post")
-    post_output = gr.Textbox(label="Generated Post", lines=8)
-    engagement_output = gr.Textbox(label="Engagement Score")
-    tone_output = gr.Textbox(label="Tone Score")
-    clarity_output = gr.Textbox(label="Clarity Score")
+css = """
+/* Gradient background */
+body {
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #2d3748;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Glassmorphism container */
+.gradio-container {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 20px;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    padding: 3rem 3.5rem;
+    width: 95%;
+    max-width: 960px;
+    color: #1a202c;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+/* Title with underline */
+#title {
+    font-size: 3rem;
+    font-weight: 900;
+    text-align: center;
+    color: #fff;
+    letter-spacing: 1.4px;
+    margin-bottom: 0.3rem;
+    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
+    position: relative;
+}
+
+#title::after {
+    content: "";
+    display: block;
+    width: 80px;
+    height: 3px;
+    background: #f6ad55;
+    margin: 12px auto 0;
+    border-radius: 2px;
+}
+
+/* Subtitle style */
+#subtitle {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: #e2e8f0dd;
+    text-align: center;
+    margin-bottom: 2.5rem;
+    font-style: italic;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
+}
+
+/* Labels */
+.input-label, .output-label {
+    font-weight: 700;
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+    color: #e2e8f0dd;
+}
+
+/* Input styling with icon placeholder */
+input[type="text"], textarea {
+    width: 100%;
+    padding: 14px 18px;
+    font-size: 1rem;
+    border: none;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.85);
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+    transition: box-shadow 0.3s ease, background 0.3s ease;
+    color: #2d3748;
+}
+
+input[type="text"]:focus, textarea:focus {
+    outline: none;
+    background: #fff;
+    box-shadow: 0 0 12px 2px #f6ad55;
+}
+
+/* Readonly output styling */
+textarea[readonly], input[readonly] {
+    background: rgba(255, 255, 255, 0.7);
+    color: #2d3748;
+    resize: vertical;
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+}
+
+/* Button styling with animation */
+.gr-button {
+    width: 100%;
+    padding: 16px 0;
+    background: linear-gradient(45deg, #f6ad55, #d69e2e);
+    border: none;
+    border-radius: 14px;
+    color: #fff;
+    font-weight: 700;
+    font-size: 1.2rem;
+    cursor: pointer;
+    box-shadow: 0 8px 15px rgba(246,173,85,0.4);
+    transition: box-shadow 0.3s ease, transform 0.3s ease;
+    margin-top: 2rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.gr-button:hover {
+    box-shadow: 0 12px 20px rgba(246,173,85,0.65);
+    transform: translateY(-3px);
+}
+
+/* Layout for rows and columns */
+.gr-row {
+    gap: 2.5rem;
+}
+
+/* Output boxes spacing */
+.gr-row > .gradio-textbox {
+    margin-top: 1.3rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 2rem 2rem;
+    }
+    .gr-row {
+        flex-direction: column;
+        gap: 2rem;
+    }
+}
+"""
+
+with gr.Blocks(css=css) as demo:
+    gr.Markdown(
+        """
+        <div id="title">Social Media Post Generator</div>
+        <div id="subtitle">Craft professional, clear, and engaging posts tailored to your platform.</div>
+        """
+    )
+
+    with gr.Row():
+        with gr.Column(scale=1):
+            topic_input = gr.Textbox(label="Topic", placeholder="Enter your topic here")
+            platform_input = gr.Textbox(label="Platform", placeholder="E.g., LinkedIn, Twitter")
+            generate_btn = gr.Button("Generate Post")
+
+        with gr.Column(scale=1):
+            post_output = gr.Textbox(label="Generated Post", lines=8, interactive=False)
+            engagement_output = gr.Textbox(label="Engagement Score", interactive=False)
+            tone_output = gr.Textbox(label="Tone Score", interactive=False)
+            clarity_output = gr.Textbox(label="Clarity Score", interactive=False)
 
     generate_btn.click(fn=generate, inputs=[topic_input, platform_input], outputs=[post_output, engagement_output, tone_output, clarity_output])