Update app.py

app.py

@@ -96,47 +96,107 @@ def generate_question_paper(pdf_file, difficulty, num_questions, progress=gr.Pro
     except Exception as e:
         raise gr.Error(f"Generation failed: {str(e)}")
 
-# --- 3. UI Layout ---
-
-# No theme argument used here to ensure compatibility
-with gr.Blocks(title="ExamGen AI") as demo:
+# --- 3. UI Layout (MVP Styling) ---
+
+# CSS Injection for SaaS/MVP Look
+css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');
+
+.gradio-container {
+    font-family: 'Inter', sans-serif !important;
+    background-color: #f3f4f6 !important;
+}
+
+.header-container {
+    text-align: center;
+    padding: 3rem 1rem;
+    background: white;
+    border-bottom: 1px solid #e5e7eb;
+    margin-bottom: 2rem;
+}
+
+.logo-text {
+    font-size: 2rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.subtitle {
+    color: #6b7280;
+    font-size: 1.1rem;
+    margin-top: 0.5rem;
+}
+
+/* Custom Panel Styling */
+.control-panel {
+    background: white !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 12px !important;
+    padding: 1.5rem !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Paper Output Styling */
+.paper-preview {
+    background: white !important;
+    border: 1px solid #e5e7eb !important;
+    min-height: 700px !important;
+    padding: 3rem !important;
+    border-radius: 2px !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    font-family: 'Times New Roman', serif !important; /* Academic look */
+}
+
+/* Primary Button Styling */
+#gen-btn {
+    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    padding: 12px !important;
+    border-radius: 8px !important;
+    transition: transform 0.2s, box-shadow 0.2s !important;
+}
+
+#gen-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4) !important;
+}
+"""
+
+with gr.Blocks(title="ExamGen AI", css=css) as demo:
     
-    # Header Section with inline styling
+    # Header
     gr.HTML("""
-        <div style="text-align: center; margin-bottom: 2rem;">
-            <h1 style="font-size: 2.5rem; font-weight: 800; 
-                       background: linear-gradient(45deg, #4f46e5, #9333ea);
-                       -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-                       background-clip: text; margin-bottom: 0.5rem;">
-                ExamGen AI
-            </h1>
-            <p style="font-size: 1.1rem; color: #64748b;">
-                Transform study materials into professional grade exam papers in seconds.
-            </p>
+        <div class="header-container">
+            <div class="logo-text">ExamGen AI</div>
+            <div class="subtitle">Enterprise-grade Question Paper Generator</div>
         </div>
     """)
 
     with gr.Row():
         
-        # --- Left Column: Controls ---
-        with gr.Column(scale=1, variant="panel"):
-            gr.Markdown("### 🛠️ Configuration")
+        # --- Left Sidebar: Controls ---
+        with gr.Column(scale=1, elem_classes="control-panel"):
+            gr.Markdown("### ⚙️ Configuration")
             
-            # File Upload
+            gr.Markdown("**1. Upload Material**")
             pdf_input = gr.File(
-                label="Upload Study Material",
+                label="",
                 file_types=[".pdf"],
                 file_count="single"
             )
             
-            gr.Markdown("---")
+            gr.HTML("<hr style='margin: 1.5rem 0; border-color: #f3f4f6;'>")
             
-            # Settings Group
+            gr.Markdown("**2. Exam Settings**")
             difficulty = gr.Radio(
                 choices=["Easy", "Medium", "Hard"],
                 value="Medium",
-                label="Complexity",
-                info="Adjusts vocabulary and concept depth"
+                label="Difficulty Level",
+                info="Determines concept depth"
             )
             
             num_questions = gr.Slider(
@@ -145,72 +205,35 @@ with gr.Blocks(title="ExamGen AI") as demo:
                 value=10, 
                 step=1,
                 label="Total Questions",
-                info="Distribution: 40% MCQ, 40% Short, 20% Essay"
+                info="Mix of MCQ, Short & Long answers"
             )
-
-            # Action Button
+            
+            gr.HTML("<div style='margin-top: 1.5rem;'></div>")
+            
             btn_generate = gr.Button(
-                "✨ Generate Exam Paper",
-                variant="primary",
+                "✨ Generate Question Paper",
+                elem_id="gen-btn",
                 size="lg"
             )
 
-            # Footer/Status
-            gr.HTML("""
-                <div style="font-size: 0.8rem; color: #94a3b8; text-align: center; margin-top: 2rem;">
-                    Powered by <b>Llama 3.2</b> & <b>LangChain</b><br>
-                    Note: Ensure HF_TOKEN is set in secrets.
+            gr.Markdown(
+                """
+                <div style="margin-top: 2rem; padding: 1rem; background: #f9fafb; border-radius: 6px; font-size: 0.8rem; color: #6b7280;">
+                    <strong>System Status:</strong><br>
+                    🟢 Model: Llama-3.2-3B<br>
+                    🟢 RAG Engine: Active
                 </div>
-            """)
-
-        # --- Right Column: Preview ---
-        with gr.Column(scale=2):
-            gr.Markdown("### 📄 Paper Preview")
-            
-            output = gr.Markdown(
-                value="<div style='color: #9ca3af; font-style: italic;'>Upload a PDF and click Generate to see the result here...</div>"
+                """
             )
 
-    # Add visual enhancements with HTML/CSS
-    gr.HTML("""
-        <style>
-            /* Global container styling */
-            .gradio-container {
-                background: linear-gradient(to bottom right, #f8fafc, #eff6ff) !important;
-            }
-            
-            /* Output paper styling */
-            .prose {
-                background-color: white !important;
-                border: 1px solid #e2e8f0;
-                border-radius: 8px;
-                padding: 2rem !important;
-                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-                min-height: 600px;
-            }
-            
-            /* Button hover effects */
-            button.primary {
-                background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
-                border: none !important;
-                transition: all 0.3s !important;
-                color: white !important;
-            }
-            
-            button.primary:hover {
-                transform: translateY(-2px) !important;
-                box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3) !important;
-            }
-            
-            /* Card-like panels */
-            .panel {
-                background: white;
-                border-radius: 8px;
-                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-                padding: 1.5rem;
-            }
-        </style>
-    """)
+        # --- Right Content: Paper Preview ---
+        with gr.Column(scale=2):
+            with gr.Group():
+                gr.Markdown("### 📄 Examination Paper Preview")
+                output = gr.Markdown(
+                    value="<div style='text-align: center; color: #9ca3af; margin-top: 5rem;'><i>Generated paper will appear here formatted as a document.</i></div>",
+                    elem_classes="paper-preview"
+                )
 
     # --- Interaction Wiring ---
     btn_generate.click(