fixing UI

app.py

@@ -93,81 +93,47 @@ def analyze_document(file):
         return "\n".join(summary)
     else:
         return "No specific topics detected in document."
+    
+# -------------------------
+# Custom CSS for Dark Theme
+# -------------------------
 css = """
-/* --- Global Layout --- */
-body {
+body, .gradio-container {
     background-color: #1a1a1a !important;
     color: #f5f5f5 !important;
     font-family: 'Inter', sans-serif !important;
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
-/* Full width */
-#root, .gradio-container, .main {
-    max-width: 100% !important;
-    width: 100% !important;
-    background-color: #1a1a1a !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    border: none !important;
-    box-shadow: none !important;
 }
-
-/* Headings and Labels */
 h1, h2, h3, label {
     color: #ff9900 !important;
     font-weight: 600 !important;
 }
-
-/* Text Inputs */
-textarea, input {
+textarea, input, .upload-box, .gr-box {
     background-color: #2a2a2a !important;
     color: #f5f5f5 !important;
     border: 1px solid #3a3a3a !important;
     border-radius: 10px !important;
-    padding: 12px !important;
 }
-
-
-
-
-/* Buttons */
 button {
     background-color: #ff9900 !important;
     color: #1a1a1a !important;
     font-weight: 600 !important;
     border-radius: 8px !important;
     border: none !important;
-    padding: 8px 16px !important;
     transition: 0.25s ease-in-out;
 }
 button:hover {
     background-color: #ffb84d !important;
 }
-
-/* Output textbox */
 .output-textbox {
     background-color: #252525 !important;
     color: #ffd480 !important;
     border: 1px solid #3a3a3a !important;
     border-radius: 10px !important;
-    box-shadow: inset 0 0 6px rgba(255,153,0,0.1);
-}
-
-/* Tabs */
-.tabitem.svelte-1ipelgc {
-    background-color: #1a1a1a !important;
-    color: #ffb84d !important;
 }
-.tabitem.svelte-1ipelgc.selected {
-    background-color: #ff9900 !important;
-    color: #1a1a1a !important;
-    font-weight: 700 !important;
+.gr-tabs, .tabitem {
+    background-color: transparent !important;
 }
-
-/* Footer */
-.footer, .svelte-1xdkkgx, .wrap.svelte-1ipelgc {
+footer, .footer, .svelte-1xdkkgx {
     background: none !important;
     border: none !important;
     box-shadow: none !important;
@@ -177,43 +143,33 @@ button:hover {
 """
 
 # -------------------------
-# Gradio Interface
+# Layout Using Blocks
 # -------------------------
+with gr.Blocks(css=css, theme=gr.themes.Base(primary_hue="orange")) as app:
+    gr.Markdown("<h1 style='text-align:center;'>🧠 AI Topic Analyzer</h1>")
+    gr.Markdown(
+        "Analyze text or upload a document to detect key topics using CardiffNLP’s Tweet Topic model."
+    )
+
+    with gr.Tabs():
+        with gr.Tab("💬 Text Analyzer"):
+            text_input = gr.Textbox(
+                label="📝 Enter Text", placeholder="Type or paste text here...", lines=4
+            )
+            text_output = gr.Textbox(label="🎯 Detected Topics", elem_classes=["output-textbox"])
+            analyze_text_btn = gr.Button("Analyze Text")
+            analyze_text_btn.click(analyze_topics, inputs=text_input, outputs=text_output)
+
+        with gr.Tab("📄 Document Analyzer"):
+            file_input = gr.File(label="📄 Upload PDF, DOCX, or TXT", file_types=[".pdf", ".docx", ".txt"])
+            doc_output = gr.Textbox(label="📘 Detected Topics", elem_classes=["output-textbox"])
+            analyze_doc_btn = gr.Button("Analyze Document")
+            analyze_doc_btn.click(analyze_document, inputs=file_input, outputs=doc_output)
+
+    gr.Markdown("<p style='text-align:center; color:#888;'>Built with ❤️ using Gradio & Transformers</p>")
 
-tweet_tab = gr.Interface(
-    fn=analyze_topics,
-    inputs=gr.Textbox(
-        label="📝 Enter Text",
-        placeholder="Type or paste text here...",
-        lines=4
-    ),
-    outputs=gr.Textbox(label="🎯 Detected Topics"),
-    examples=[
-        ["Just watched the new Marvel movie, it was amazing!"],
-        ["Bitcoin prices are going up again!"],
-        ["Climate change is affecting polar bears."],
-    ],
-    title="💬 Text Topic Analyzer",
-    description="Analyze short texts or tweets to detect underlying topics using CardiffNLP’s Tweet Topic model.",
-)
-
-document_tab = gr.Interface(
-    fn=analyze_document,
-    inputs=gr.File(label="📄 Upload Document (PDF, DOCX, or TXT)"),
-    outputs=gr.Textbox(label="📘 Detected Topics"),
-    title="📄 Document Topic Analyzer",
-    description="Upload a document and let the AI detect key topics discussed inside.",
-)
-
-app = gr.TabbedInterface(
-    [tweet_tab, document_tab],
-    ["💬 Text Analyzer", "📄 Document Analyzer"],
-    title="🧠 AI Topic Analyzer",
-    css=css,
-    theme=gr.themes.Base(primary_hue="orange", secondary_hue="orange"),
-)
-
+# -------------------------
+# Launch
+# -------------------------
 if __name__ == "__main__":
-    app.launch()
-
-
+    app.launch()

requirements.txt

@@ -1,7 +1,7 @@
-gradio>=4.0.0
-transformers>=4.30.0
-torch>=2.0.0
-numpy>=1.21.0
-scipy>=1.7.0
-PyPDF2>=3.0.0
-python-docx>=0.8.11
+gradio
+transformers
+torch
+PyPDF2
+python-docx
+numpy
+scipy