Update app.py

app.py

@@ -36,17 +36,25 @@ custom_css = """
 .main-container {
     background: rgba(255, 255, 255, 0.98);
     border-radius: 16px;
-    padding: 24px;
+    padding: 20px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     border: 1px solid rgba(0, 0, 0, 0.05);
-    margin: 12px;
 }
 
-.pdf-status {
-    padding: 12px 16px;
+.sidebar-container {
+    background: rgba(255, 255, 255, 0.98);
     border-radius: 12px;
-    margin: 12px 0;
-    font-size: 0.95rem;
+    padding: 16px;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    height: fit-content;
+}
+
+.pdf-status {
+    padding: 10px 14px;
+    border-radius: 10px;
+    margin: 8px 0;
+    font-size: 0.9rem;
     font-weight: 500;
 }
 
@@ -71,17 +79,39 @@ custom_css = """
 .rag-context {
     background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
     border-left: 4px solid #f59e0b;
-    padding: 12px;
-    margin: 12px 0;
-    border-radius: 8px;
-    font-size: 0.9rem;
+    padding: 10px;
+    margin: 8px 0;
+    border-radius: 6px;
+    font-size: 0.85rem;
+}
+
+.status-badge {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    margin: 4px 0;
+}
+
+.status-enabled {
+    background: #10b981;
+    color: white;
 }
 
-.thinking-section {
-    background: rgba(0, 0, 0, 0.02);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    padding: 12px;
+.status-disabled {
+    background: #6b7280;
+    color: white;
+}
+
+/* Chat interface maximization */
+.chat-container {
+    height: calc(100vh - 200px) !important;
+    min-height: 600px;
+}
+
+/* Accordion styling */
+.accordion {
     margin: 8px 0;
 }
 """
@@ -519,88 +549,149 @@ def update_rag_settings(enable, docs, k):
 
 # Build the interface
 with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, fill_height=True) as demo:
-    gr.Markdown("# 🚀 GPT-OSS-20B with PDF RAG System")
-    gr.Markdown("Enhanced AI assistant with document-based context understanding")
-    
     with gr.Row():
-        # Left sidebar for RAG controls
-        with gr.Column(scale=1):
-            with gr.Group(elem_classes="main-container"):
-                gr.Markdown("### 📚 Document RAG Settings")
-                
+        # Compact sidebar
+        with gr.Column(scale=1, min_width=300):
+            gr.Markdown("## 🚀 GPT-OSS-20B + RAG")
+            
+            # RAG Status Badge
+            with gr.Group(elem_classes="sidebar-container"):
+                rag_status = gr.HTML(
+                    value="<div class='status-badge status-disabled'>RAG: Disabled</div>"
+                )
+                context_preview = gr.HTML(value="", visible=False)
+            
+            # PDF Upload Section
+            with gr.Accordion("📄 PDF Documents", open=True, elem_classes="accordion"):
                 pdf_upload = gr.File(
                     label="Upload PDF",
                     file_types=[".pdf"],
-                    type="filepath"
+                    type="filepath",
+                    elem_classes="compact-upload"
                 )
                 
                 upload_status = gr.HTML(
-                    value="<div class='pdf-status pdf-info'>📤 Upload a PDF to enable document-based answers</div>"
+                    value="<div style='font-size: 0.85rem; color: #6b7280;'>No documents uploaded</div>"
                 )
                 
                 document_list = gr.CheckboxGroup(
                     choices=[],
-                    label="📄 Select Documents",
-                    info="Choose documents to use as context"
-                )
-                
-                clear_btn = gr.Button("🗑️ Clear All Documents", size="sm", variant="secondary")
-                
-                enable_rag = gr.Checkbox(
-                    label="✨ Enable RAG",
-                    value=False,
-                    info="Use documents for context-aware responses"
+                    label="Select Documents",
+                    elem_classes="compact-checkbox"
                 )
                 
+                with gr.Row():
+                    enable_rag = gr.Checkbox(
+                        label="Enable RAG",
+                        value=False,
+                        scale=2
+                    )
+                    clear_btn = gr.Button("Clear", size="sm", variant="secondary", scale=1)
+            
+            # RAG Settings
+            with gr.Accordion("⚙️ RAG Settings", open=False, elem_classes="accordion"):
                 top_k_slider = gr.Slider(
                     minimum=1,
                     maximum=5,
                     value=3,
                     step=1,
                     label="Context Chunks",
-                    info="Number of document chunks to use"
+                    info="Number of chunks to use"
+                )
+            
+            # Model Settings
+            with gr.Accordion("🔧 Model Settings", open=False, elem_classes="accordion"):
+                max_tokens = gr.Slider(
+                    label="Max tokens",
+                    minimum=64,
+                    maximum=4096,
+                    step=1,
+                    value=2048
                 )
                 
-                # RAG status display
-                rag_status = gr.HTML(
-                    value="<div class='pdf-status pdf-info'>🔍 RAG: <strong>Disabled</strong></div>"
+                temperature = gr.Slider(
+                    label="Temperature",
+                    minimum=0.1,
+                    maximum=2.0,
+                    step=0.1,
+                    value=0.7
                 )
                 
-                context_preview = gr.HTML(value="", visible=False)
+                with gr.Row():
+                    top_p = gr.Slider(
+                        label="Top-p",
+                        minimum=0.05,
+                        maximum=1.0,
+                        step=0.05,
+                        value=0.9
+                    )
+                    
+                    top_k = gr.Slider(
+                        label="Top-k",
+                        minimum=1,
+                        maximum=100,
+                        step=1,
+                        value=50
+                    )
+                
+                repetition_penalty = gr.Slider(
+                    label="Repetition Penalty",
+                    minimum=1.0,
+                    maximum=2.0,
+                    step=0.05,
+                    value=1.0
+                )
+            
+            # System Prompt
+            with gr.Accordion("💬 System Prompt", open=False, elem_classes="accordion"):
+                system_prompt = gr.Textbox(
+                    label="System Prompt",
+                    value="You are a helpful assistant. Reasoning: medium",
+                    lines=3,
+                    placeholder="Customize the system prompt..."
+                )
         
-        # Right side for chat interface
-        with gr.Column(scale=3):
-            with gr.Group(elem_classes="main-container"):
+        # Main chat area - maximized
+        with gr.Column(scale=4):
+            with gr.Group(elem_classes="main-container chat-container"):
                 # Create ChatInterface with custom function
                 chat_interface = gr.ChatInterface(
                     fn=generate_response,
                     additional_inputs=[
-                        gr.Slider(label="Max new tokens", minimum=64, maximum=4096, step=1, value=2048),
-                        gr.Textbox(
-                            label="System Prompt",
-                            value="You are a helpful assistant. Reasoning: medium",
-                            lines=4,
-                            placeholder="Change system prompt"
-                        ),
-                        gr.Slider(label="Temperature", minimum=0.1, maximum=2.0, step=0.1, value=0.7),
-                        gr.Slider(label="Top-p", minimum=0.05, maximum=1.0, step=0.05, value=0.9),
-                        gr.Slider(label="Top-k", minimum=1, maximum=100, step=1, value=50),
-                        gr.Slider(label="Repetition Penalty", minimum=1.0, maximum=2.0, step=0.05, value=1.0)
+                        max_tokens,
+                        system_prompt,
+                        temperature,
+                        top_p,
+                        top_k,
+                        repetition_penalty
                     ],
                     examples=[
-                        [{"text": "Explain Newton laws clearly and concisely"}],
-                        [{"text": "Write a Python function to calculate the Fibonacci sequence"}],
-                        [{"text": "What are the benefits of open weight AI models"}],
+                        [{"text": "Summarize the document"}],
+                        [{"text": "What are the key points mentioned?"}],
+                        [{"text": "Explain the main concept"}],
                     ],
                     cache_examples=False,
                     type="messages",
-                    description="""Chat with GPT-OSS-20B. Upload PDFs to enhance responses with document context. 
-                    Click to view thinking process (default is on).""",
+                    title=None,
+                    description=None,
                     textbox=gr.Textbox(
-                        label="Query Input",
-                        placeholder="Type your prompt (RAG will be applied if enabled)"
+                        label="Message",
+                        placeholder="Ask anything... (RAG will be applied if enabled)",
+                        lines=2,
+                        max_lines=10,
+                        autofocus=True
+                    ),
+                    chatbot=gr.Chatbot(
+                        height=550,
+                        show_copy_button=True,
+                        bubble_full_width=False,
+                        render_markdown=True
                     ),
-                    stop_btn="Stop Generation",
+                    stop_btn="Stop",
+                    retry_btn="Retry",
+                    undo_btn="Undo",
+                    clear_btn="Clear",
+                    submit_btn="Send",
                     multimodal=False
                 )
     
@@ -616,21 +707,37 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, fill_height=True) as demo
         outputs=[upload_status, document_list]
     )
     
+    # Simplified RAG status update
+    def update_rag_status_simple(enable, docs, k):
+        """Simplified RAG status update"""
+        global rag_enabled, selected_docs, top_k_chunks
+        rag_enabled = enable
+        selected_docs = docs if docs else []
+        top_k_chunks = k
+        
+        if enable and docs:
+            status_html = "<div class='status-badge status-enabled'>RAG: Active</div>"
+            preview = f"<div style='font-size: 0.85rem; color: #10b981;'>📚 {len(docs)} doc(s) | {k} chunks</div>"
+            return gr.update(value=status_html), gr.update(value=preview, visible=True)
+        else:
+            status_html = "<div class='status-badge status-disabled'>RAG: Disabled</div>"
+            return gr.update(value=status_html), gr.update(value="", visible=False)
+    
     # Update RAG settings when changed
     enable_rag.change(
-        fn=update_rag_settings,
+        fn=update_rag_status_simple,
         inputs=[enable_rag, document_list, top_k_slider],
         outputs=[rag_status, context_preview]
     )
     
     document_list.change(
-        fn=update_rag_settings,
+        fn=update_rag_status_simple,
         inputs=[enable_rag, document_list, top_k_slider],
         outputs=[rag_status, context_preview]
     )
     
     top_k_slider.change(
-        fn=update_rag_settings,
+        fn=update_rag_status_simple,
         inputs=[enable_rag, document_list, top_k_slider],
         outputs=[rag_status, context_preview]
     )