Update app.py

app.py

@@ -24,12 +24,23 @@ def summarize(text):
     except Exception as e:
         return f"🚨 Error: {str(e)}", ""
 
-# ======= ENHANCED UI ======= #
+# ======= FIXED & ENHANCED UI ======= #
 custom_css = """
-#input-box, #output-box {
+.gradio-container {
+    max-width: 800px !important;
+    margin: auto !important;
+}
+#input-box {
+    font-family: 'Helvetica', sans-serif;
+    border-radius: 12px !important;
+    padding: 15px !important;
+    background: white !important;
+}
+#output-box {
     font-family: 'Helvetica', sans-serif;
     border-radius: 12px !important;
     padding: 15px !important;
+    background: #f8f9fa !important;
 }
 #submit-btn {
     background: linear-gradient(45deg, #FF6B6B, #4ECDC4) !important;
@@ -38,44 +49,58 @@ custom_css = """
     font-weight: bold !important;
     border-radius: 8px !important;
     padding: 12px 24px !important;
+    transition: all 0.3s !important;
 }
 #submit-btn:hover {
-    transform: scale(1.02);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    transform: scale(1.02) !important;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
 }
 .header {
     text-align: center;
     font-weight: 800 !important;
+    font-size: 2em !important;
     background: linear-gradient(45deg, #4F6BFF, #8E54E9);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    margin-bottom: 10px !important;
+}
+.subheader {
+    text-align: center;
+    color: #666 !important;
+    margin-bottom: 20px !important;
 }
 .status {
     font-size: 0.9em;
     padding: 8px;
     border-radius: 6px;
     text-align: center;
+    background: #f0f0f0;
+}
+.dark .status {
+    background: #333 !important;
+    color: white !important;
 }
 """
 
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
     gr.Markdown("""
     <div class='header'>✨ SUMMIFY PRO ✨</div>
-    <div style='text-align:center'>Transform long texts into concise summaries</div>
+    <div class='subheader'>Transform long texts into concise summaries</div>
     """)
     
     with gr.Row():
         input_txt = gr.Textbox(
             label="Your Text",
-            placeholder="Paste any article, essay, or document...",
+            placeholder="Paste any article, essay, or document here...",
             lines=7,
-            elem_id="input-box"
+            elem_id="input-box",
+            interactive=True  # THIS WAS THE FIX - REMOVED THE DISABLED STATE
         )
         output_txt = gr.Textbox(
             label="Summary",
-            interactive=False,
             lines=7,
-            elem_id="output-box"
+            elem_id="output-box",
+            interactive=False  # Output should remain non-editable
         )
     
     status = gr.Textbox(
@@ -85,14 +110,23 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
     )
     
     with gr.Row():
-        gr.Button(
+        submit_btn = gr.Button(
             "Summarize", 
             variant="primary",
             elem_id="submit-btn"
         )
-        gr.ClearButton([input_txt, output_txt, status])
+        clear_btn = gr.ClearButton(
+            components=[input_txt, output_txt, status],
+            value="🗑️ Clear All"
+        )
+    
+    submit_btn.click(
+        fn=summarize,
+        inputs=input_txt,
+        outputs=[output_txt, status]
+    )
 
-    # Dark mode toggle
+    # Enhanced dark mode toggle
     gr.HTML("""
     <script>
     function toggleDark() {
@@ -107,12 +141,14 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
         position: fixed;
         bottom: 20px;
         right: 20px;
-        padding: 8px 12px;
+        padding: 10px;
         border-radius: 50%;
         background: #4F6BFF;
         color: white;
         border: none;
         cursor: pointer;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+        z-index: 999;
     ">🌓</button>
     """)