Update app.py

app.py

@@ -2,7 +2,7 @@ import os
 import requests
 import gradio as gr
 
-# Token setup (keep your working version)
+# Token setup
 TOKEN = os.getenv("HF_API_TOKEN", "").strip()
 
 def summarize(text):
@@ -24,83 +24,85 @@ def summarize(text):
     except Exception as e:
         return f"🚨 Error: {str(e)}", ""
 
-# ======= FIXED & ENHANCED UI ======= #
+# ======= PURPLE THEME ======= #
 custom_css = """
 .gradio-container {
-    max-width: 800px !important;
-    margin: auto !important;
+    background: #6A0DAD !important;
+    color: white !important;
+    max-width: 800px;
+    margin: auto;
+    border-radius: 15px;
+    padding: 20px;
 }
-#input-box {
-    font-family: 'Helvetica', sans-serif;
-    border-radius: 12px !important;
+#input-box, #output-box {
+    font-family: 'Arial', sans-serif;
+    border-radius: 10px !important;
     padding: 15px !important;
-    background: white !important;
+    background: #8A2BE2 !important;
+    color: white !important;
+    border: 2px solid #9370DB !important;
 }
-#output-box {
-    font-family: 'Helvetica', sans-serif;
-    border-radius: 12px !important;
-    padding: 15px !important;
-    background: #f8f9fa !important;
+#input-box::placeholder {
+    color: #D8BFD8 !important;
 }
-#submit-btn {
-    background: linear-gradient(45deg, #FF6B6B, #4ECDC4) !important;
-    border: none !important;
+#submit-btn, .clear-btn {
+    background: #9370DB !important;
     color: white !important;
-    font-weight: bold !important;
+    border: none !important;
     border-radius: 8px !important;
     padding: 12px 24px !important;
-    transition: all 0.3s !important;
+    font-weight: bold !important;
+    margin: 5px !important;
 }
-#submit-btn:hover {
-    transform: scale(1.02) !important;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+#submit-btn:hover, .clear-btn:hover {
+    background: #8A2BE2 !important;
+    transform: scale(1.02);
 }
 .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;
+    color: white !important;
     margin-bottom: 10px !important;
 }
 .subheader {
     text-align: center;
-    color: #666 !important;
+    color: #D8BFD8 !important;
     margin-bottom: 20px !important;
 }
 .status {
-    font-size: 0.9em;
-    padding: 8px;
-    border-radius: 6px;
+    background: #8A2BE2 !important;
+    color: white !important;
+    border-radius: 8px;
+    padding: 10px;
     text-align: center;
-    background: #f0f0f0;
 }
-.dark .status {
-    background: #333 !important;
+label {
     color: white !important;
+    font-weight: bold !important;
+}
+footer {
+    visibility: hidden;
 }
 """
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
+with gr.Blocks(css=custom_css) as app:
     gr.Markdown("""
     <div class='header'>✨ SUMMIFY PRO ✨</div>
-    <div class='subheader'>Transform long texts into concise summaries</div>
+    <div class='subheader'>Transform texts into concise summaries</div>
     """)
     
     with gr.Row():
         input_txt = gr.Textbox(
             label="Your Text",
-            placeholder="Paste any article, essay, or document here...",
+            placeholder="Type or paste your content here...",
             lines=7,
-            elem_id="input-box",
-            interactive=True  # THIS WAS THE FIX - REMOVED THE DISABLED STATE
+            elem_id="input-box"
         )
         output_txt = gr.Textbox(
             label="Summary",
             lines=7,
             elem_id="output-box",
-            interactive=False  # Output should remain non-editable
+            interactive=False
         )
     
     status = gr.Textbox(
@@ -110,46 +112,16 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
     )
     
     with gr.Row():
-        submit_btn = gr.Button(
+        gr.Button(
             "Summarize", 
-            variant="primary",
             elem_id="submit-btn"
         )
-        clear_btn = gr.ClearButton(
-            components=[input_txt, output_txt, status],
-            value="🗑️ Clear All"
+        gr.Button(
+            "Clear", 
+            elem_classes="clear-btn"
+        ).click(
+            lambda: ["", "", ""], 
+            outputs=[input_txt, output_txt, status]
         )
-    
-    submit_btn.click(
-        fn=summarize,
-        inputs=input_txt,
-        outputs=[output_txt, status]
-    )
-
-    # Enhanced dark mode toggle
-    gr.HTML("""
-    <script>
-    function toggleDark() {
-        document.body.classList.toggle('dark');
-        localStorage.setItem('darkMode', document.body.classList.contains('dark'));
-    }
-    if (localStorage.getItem('darkMode') === 'true') {
-        document.body.classList.add('dark');
-    }
-    </script>
-    <button onclick="toggleDark()" style="
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        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>
-    """)
 
 app.launch(server_name="0.0.0.0")