Update app.py

app.py

@@ -20,7 +20,7 @@ if not api_key:
 # Initialize OpenAI client with older API syntax
 openai.api_key = api_key
 
-# Custom CSS for a modern, compact look
+# Custom CSS for a beautiful, modern look
 custom_css = """
 html, body, .gradio-container {
     height: 100vh !important;
@@ -28,74 +28,124 @@ html, body, .gradio-container {
     max-width: 100vw !important;
     margin: 0 !important;
     padding: 0 !important;
-    font-family: 'Inter', sans-serif;
-    background: #f7f8fa;
+    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+    background: #f4f7fb;
+    color: #222;
+}
+
+.centered-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 100vh;
+    width: 100vw;
+    padding-top: 32px;
 }
 
 .compact-box {
     background: #fff;
-    border-radius: 14px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
-    padding: 24px 24px 16px 24px;
-    margin-bottom: 18px;
+    border-radius: 18px;
+    box-shadow: 0 4px 24px rgba(0, 60, 180, 0.07), 0 1.5px 4px rgba(0,0,0,0.04);
+    padding: 32px 32px 20px 32px;
+    margin-bottom: 32px;
     width: 100%;
-    max-width: 700px;
+    max-width: 600px;
     margin-left: auto;
     margin-right: auto;
+    border: 1.5px solid #e3e8f0;
 }
 
 .section-title {
-    font-size: 1.2rem;
-    font-weight: 600;
-    margin-bottom: 10px;
-    color: #222;
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 18px;
+    color: #1a237e;
+    letter-spacing: 0.01em;
 }
 
-.upload-btn, .send-btn, .audio-btn {
-    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
+.upload-btn, .send-btn, .audio-btn, .reset-btn {
+    background: linear-gradient(135deg, #1976D2 0%, #00bcd4 100%);
     color: white;
     border: none;
-    padding: 10px 22px;
-    border-radius: 22px;
+    padding: 12px 28px;
+    border-radius: 24px;
     cursor: pointer;
     font-weight: 600;
-    font-size: 15px;
-    margin-top: 8px;
-    margin-bottom: 8px;
+    font-size: 16px;
+    margin-top: 10px;
+    margin-bottom: 10px;
     transition: all 0.2s;
+    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
 }
-.upload-btn:hover, .send-btn:hover, .audio-btn:hover {
-    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
+.upload-btn:hover, .send-btn:hover, .audio-btn:hover, .reset-btn:hover {
+    background: linear-gradient(135deg, #00bcd4 0%, #1976D2 100%);
+    box-shadow: 0 4px 16px rgba(0, 188, 212, 0.13);
 }
 
 .gradio-chatbot {
-    border-radius: 12px !important;
-    border: 1.5px solid #e0e0e0 !important;
-    background: #fff !important;
-    padding: 10px !important;
+    border-radius: 14px !important;
+    border: 1.5px solid #e3e8f0 !important;
+    background: #f8fafc !important;
+    padding: 12px !important;
     min-height: 350px !important;
     max-height: 400px !important;
     overflow-y: auto !important;
+    margin-bottom: 10px;
 }
 
 .gradio-audio {
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin-top: 12px;
+    margin-bottom: 12px;
 }
 
 .textbox {
-    border-radius: 10px !important;
-    border: 1.5px solid #e0e0e0 !important;
-    padding: 10px !important;
-    font-size: 15px !important;
-    margin-bottom: 8px;
+    border-radius: 12px !important;
+    border: 1.5px solid #e3e8f0 !important;
+    padding: 12px !important;
+    font-size: 16px !important;
+    margin-bottom: 10px;
+    background: #f8fafc !important;
+    color: #222 !important;
+}
+.textbox:focus {
+    border-color: #1976D2 !important;
+    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.13) !important;
 }
 
 .status-text {
-    color: #666;
-    font-size: 14px;
-    margin-top: 8px;
+    color: #1976D2;
+    font-size: 15px;
+    margin-top: 10px;
     font-weight: 500;
+    background: #e3f2fd;
+    border-radius: 8px;
+    padding: 8px 12px;
+}
+
+/* File upload area */
+input[type="file"]::-webkit-file-upload-button {
+    background: #1976D2;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    padding: 8px 18px;
+    font-weight: 600;
+    cursor: pointer;
+}
+input[type="file"]::-webkit-file-upload-button:hover {
+    background: #00bcd4;
+}
+
+/* Only one main scroll */
+body, .gradio-container, #root, #app {
+    overflow: auto !important;
+    height: 100vh !important;
+}
+#component-0, #component-1, #component-2, .chatbot, .chat-container {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
 }
 """
 
@@ -356,26 +406,24 @@ def process_audio_base64(audio_base64, history):
 # Create Gradio interface with improved layout
 with gr.Blocks(css=custom_css, title="Document Q&A System") as demo:
     gr.Markdown("""
-    # 📄 Document Q&A System
-    <div style='text-align:center; color:#555; margin-bottom:18px;'>Upload a document, ask questions, or use your voice!</div>
+    # <span style='color:#1976D2;'>Document Q&A System</span>
+    <div style='text-align:center; color:#1976D2; margin-bottom:18px;'>Upload a document, ask questions, or use your voice!</div>
     """)
 
-    with gr.Row():
+    with gr.Row(elem_classes="centered-main"):
         with gr.Column():
             with gr.Group(elem_classes="compact-box"):
-                gr.Markdown("<div class='section-title'>1. Upload or Replace Document</div>")
+                gr.Markdown("<div class='section-title'>1. Upload Document</div>")
                 file_input = gr.File(label="Upload Document", file_types=[".pdf", ".txt", ".doc", ".docx"], file_count="single", type="binary", elem_classes="upload-btn")
                 file_output = gr.Textbox(label="Upload Status", interactive=False, elem_classes="textbox")
-                reset_btn = gr.Button("Reset Chat & Upload New Document", elem_classes="upload-btn")
-                
+                reset_btn = gr.Button("Reset Chat & Upload New Document", elem_classes="reset-btn")
                 def reset_all():
                     rag.thread_id = None
                     return "", []
-                
                 file_input.change(process_file, file_input, file_output)
-                reset_btn.click(reset_all, None, [file_output, "chatbot"])
+                reset_btn.click(reset_all, None, [file_output, chatbot])
 
-    with gr.Row():
+    with gr.Row(elem_classes="centered-main"):
         with gr.Column():
             with gr.Group(elem_classes="compact-box"):
                 gr.Markdown("<div class='section-title'>2. Chat with your Document</div>")
@@ -387,8 +435,7 @@ with gr.Blocks(css=custom_css, title="Document Q&A System") as demo:
                 question.submit(process_question, [question, chatbot], [question, chatbot])
                 send_btn.click(process_question, [question, chatbot], [question, chatbot])
 
-    # Voice integration: show audio recorder when mic button is clicked
-    with gr.Row(visible=False) as audio_row:
+    with gr.Row(elem_classes="centered-main", visible=False) as audio_row:
         with gr.Column():
             with gr.Group(elem_classes="compact-box"):
                 gr.Markdown("<div class='section-title'>Speak your Question</div>")