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 better styling
+# Custom CSS for a modern, compact look
 custom_css = """
 html, body, .gradio-container {
     height: 100vh !important;
@@ -29,131 +29,73 @@ html, body, .gradio-container {
     margin: 0 !important;
     padding: 0 !important;
     font-family: 'Inter', sans-serif;
-    overflow: auto !important;
-    background: #fafbfc;
+    background: #f7f8fa;
 }
 
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-    height: 100%;
-}
-
-.chat-container, .file-upload, .audio-recorder {
-    box-sizing: border-box;
-    border-radius: 16px;
-    background: white;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.07);
-    margin-bottom: 20px;
+.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;
     width: 100%;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-.chat-container {
-    border: 1px solid #e0e0e0;
-    padding: 24px;
-}
-
-.file-upload {
-    border: 2px dashed #e0e0e0;
-    padding: 24px;
-    text-align: center;
-    transition: all 0.3s ease;
-}
-.file-upload:hover {
-    border-color: #4CAF50;
-    background: #f0f7f0;
-    transform: translateY(-2px);
-}
-.audio-recorder {
-    padding: 24px;
-    text-align: center;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-
-.record-button {
-    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
-    color: white;
-    border: none;
-    padding: 14px 28px;
-    border-radius: 30px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-size: 16px;
+.section-title {
+    font-size: 1.2rem;
     font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 0 auto;
-    box-shadow: 0 4px 6px rgba(76, 175, 80, 0.2);
-}
-.record-button:hover {
-    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 8px rgba(76, 175, 80, 0.3);
-}
-.record-button.recording {
-    background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
-    animation: pulse 1.5s infinite;
+    margin-bottom: 10px;
+    color: #222;
 }
-.status-text {
-    color: #666;
-    font-size: 14px;
-    margin-top: 12px;
-    font-weight: 500;
-}
-.send-button {
+
+.upload-btn, .send-btn, .audio-btn {
     background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
     color: white;
     border: none;
-    padding: 12px 24px;
-    border-radius: 25px;
+    padding: 10px 22px;
+    border-radius: 22px;
     cursor: pointer;
-    transition: all 0.3s ease;
     font-weight: 600;
-    box-shadow: 0 4px 6px rgba(33, 150, 243, 0.2);
+    font-size: 15px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    transition: all 0.2s;
 }
-.send-button:hover {
+.upload-btn:hover, .send-btn:hover, .audio-btn:hover {
     background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 8px rgba(33, 150, 243, 0.3);
 }
-.textbox {
-    border-radius: 12px !important;
-    border: 2px solid #e0e0e0 !important;
-    padding: 12px !important;
-    font-size: 16px !important;
-    transition: all 0.3s ease !important;
-}
-.textbox:focus {
-    border-color: #2196F3 !important;
-    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
-}
-.chatbot {
+
+.gradio-chatbot {
     border-radius: 12px !important;
-    border: 2px solid #e0e0e0 !important;
-    padding: 16px !important;
-    width: 100% !important;
-    box-sizing: border-box !important;
+    border: 1.5px solid #e0e0e0 !important;
     background: #fff !important;
+    padding: 10px !important;
+    min-height: 350px !important;
+    max-height: 400px !important;
+    overflow-y: auto !important;
 }
-@keyframes pulse {
-    0% { transform: scale(1); box-shadow: 0 4px 6px rgba(244, 67, 54, 0.2); }
-    50% { transform: scale(1.05); box-shadow: 0 6px 8px rgba(244, 67, 54, 0.3); }
-    100% { transform: scale(1); box-shadow: 0 4px 6px rgba(244, 67, 54, 0.2); }
+
+.gradio-audio {
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
-/* Remove extra scrollbars and ensure only one main scroll */
-body, .gradio-container, #root, #app {
-    overflow: auto !important;
-    height: 100vh !important;
+.textbox {
+    border-radius: 10px !important;
+    border: 1.5px solid #e0e0e0 !important;
+    padding: 10px !important;
+    font-size: 15px !important;
+    margin-bottom: 8px;
 }
 
-/* Remove scroll from inner components */
-#component-0, #component-1, #component-2, .chatbot, .chat-container {
-    overflow: visible !important;
-    height: auto !important;
-    max-height: none !important;
+.status-text {
+    color: #666;
+    font-size: 14px;
+    margin-top: 8px;
+    font-weight: 500;
 }
 """
 
@@ -412,73 +354,37 @@ def process_audio_base64(audio_base64, history):
         return "", history + [("Audio input", f"Error: {str(e)}")]
 
 # Create Gradio interface with improved layout
-with gr.Blocks(title="Document Q&A System", css=custom_css) as demo:
+with gr.Blocks(css=custom_css, title="Document Q&A System") as demo:
     gr.Markdown("""
-    # 📚 Document Q&A System
-    Upload a document and ask questions about it. You can also use voice input!
+    # 📄 Document Q&A System
+    <div style='text-align:center; color:#555; margin-bottom:18px;'>Upload a document, ask questions, or use your voice!</div>
     """)
 
     with gr.Row():
-        with gr.Column(scale=1):
-            with gr.Group(elem_classes="file-upload"):
-                file_input = gr.File(
-                    label="Upload Document",
-                    file_types=[".pdf", ".txt", ".doc", ".docx"],
-                    file_count="single",
-                    type="binary"
-                )
-                file_output = gr.Textbox(
-                    label="Upload Status",
-                    interactive=False,
-                    elem_classes="textbox"
-                )
+        with gr.Column():
+            with gr.Box(elem_classes="compact-box"):
+                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")
                 file_input.change(process_file, file_input, file_output)
 
     with gr.Row():
-        with gr.Column(scale=2):
-            chatbot = gr.Chatbot(
-                height=500,
-                type="messages",
-                show_label=False,
-                elem_classes="chatbot",
-                placeholder="Ask questions about your uploaded document..."
-            )
-            
-            def chat_fn(message, history):
-                if not rag.thread_id:
-                    return "Please upload a document first."
-                try:
-                    response = rag.ask_question(message)
-                    return response
-                except Exception as e:
-                    return f"Error: {str(e)}"
-
-            def vote(data: gr.LikeData):
-                if data.liked:
-                    print("You upvoted this response: " + data.value["value"])
-                else:
-                    print("You downvoted this response: " + data.value["value"])
-
-            chatbot.like(vote, None, None)
-            
-            gr.ChatInterface(
-                fn=chat_fn,
-                chatbot=chatbot,
-                examples=[
-                    "What is this document about?",
-                    "Can you summarize the main points?",
-                    "What are the key findings?"
-                ],
-                title="Document Q&A",
-                description="Ask questions about your uploaded document",
-                theme="soft"
-            )
+        with gr.Column():
+            with gr.Box(elem_classes="compact-box"):
+                gr.Markdown("<div class='section-title'>2. Chat with your Document</div>")
+                chatbot = gr.Chatbot(height=350, elem_classes="gradio-chatbot", label=None)
+                question = gr.Textbox(label="Type your question and press Enter", placeholder="Ask a question about your document...", elem_classes="textbox")
+                send_btn = gr.Button("Send", elem_classes="send-btn")
+                question.submit(process_question, [question, chatbot], [question, chatbot])
+                send_btn.click(process_question, [question, chatbot], [question, chatbot])
 
     with gr.Row():
-        with gr.Column(scale=1):
-            audio_recorder = create_audio_recorder()
-            audio_input = gr.Audio(label="Voice Input", type="filepath", visible=False)
-            audio_input.change(process_audio, [audio_input, chatbot], [audio_input, chatbot])
+        with gr.Column():
+            with gr.Box(elem_classes="compact-box"):
+                gr.Markdown("<div class='section-title'>3. Or use your Voice</div>")
+                audio_input = gr.Audio(source="microphone", type="filepath", label="Record or Upload Audio", elem_classes="gradio-audio")
+                audio_status = gr.Textbox(label="Audio Status", interactive=False, elem_classes="status-text")
+                audio_input.change(process_audio, [audio_input, chatbot], [audio_input, chatbot])
 
     # Add JavaScript for audio handling
     demo.load(