Improve UI design

.gitignore

@@ -0,0 +1 @@
+stitch_ielts_ai_evaluator

app.py

@@ -902,11 +902,52 @@ def evaluate_reading(answers_text: str, reading_state: str):
 # Gradio UI
 # =========
 CSS = """
+/* Global UI Styles */
 .gr-button-primary { font-weight: 600; }
 .band-box { font-size: 1.4rem; font-weight: 700; text-align: center; }
 #wc1, #wc2 { max-width: 120px; }
+
+/* Custom Styling to mimic Tailwind/Material Design from HTML files */
+.ielts-card {
+    border: 1px solid #c3c6d7;
+    border-radius: 12px;
+    padding: 24px;
+    background-color: #ffffff;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+}
+.ielts-header {
+    font-family: 'Public Sans', sans-serif;
+    color: #111c2d;
+    border-bottom: 1px solid #c3c6d7;
+    padding-bottom: 16px;
+    margin-bottom: 24px;
+}
+.ielts-prompt-box {
+    background-color: #f0f3ff;
+    border: 1px solid #c3c6d7;
+    border-left: 4px solid #004ac6;
+    padding: 16px;
+    border-radius: 8px;
+    font-family: 'Public Sans', sans-serif;
+    font-size: 18px;
+    line-height: 1.6;
+}
+.ielts-btn-primary {
+    background-color: #004ac6 !important;
+    color: white !important;
+    border-radius: 8px !important;
+}
+.writing-area {
+    font-family: 'Public Sans', sans-serif;
+    font-size: 18px;
+    line-height: 1.6;
+    border: 1px solid #c3c6d7;
+    border-radius: 12px;
+}
 """
 
+
 FORCE_LIGHT_JS = """
 function() {
     document.documentElement.classList.remove('dark');
@@ -930,17 +971,18 @@ Powered by **Gemini 2.5 Flash** · Academic Module · Writing Tasks 1 & 2 · Rea
 
             with gr.Row():
                 gen_btn_1 = gr.Button("🎲 Generate Chart & Question",
-                                      variant="primary", scale=2)
+                                        variant="primary", scale=2, elem_classes="ielts-btn-primary")
                 with gr.Column(scale=3):
-                    gr.Markdown("*Randomly selects: bar, line, pie, process or map diagram*")
+                    gr.Markdown("<div class='ielts-header'><h3>Academic Module: Writing Task 1</h3><p>Data Interpretation Report • 20 Minutes Recommended</p></div>")
 
             with gr.Row():
                 with gr.Column(scale=5):
-                    chart_img = gr.Image(label="Chart / Diagram", type="pil")
+                    chart_img = gr.Image(label="Chart / Diagram", type="pil", elem_classes="ielts-card")
                 with gr.Column(scale=5):
                     task1_q = gr.Textbox(
-                        label="Question", lines=4, interactive=False,
-                        placeholder="Click 'Generate' to load a question…"
+                        label="AI Generated Prompt", lines=4, interactive=False,
+                        placeholder="Click 'Generate' to load a question…",
+                        elem_classes="ielts-prompt-box"
                     )
 
             gr.Markdown("---")
@@ -949,23 +991,25 @@ Powered by **Gemini 2.5 Flash** · Academic Module · Writing Tasks 1 & 2 · Rea
                 with gr.Column(scale=7):
                     essay1 = gr.Textbox(
                         label="Your Response", lines=16,
-                        placeholder="Write your Task 1 response here (minimum 150 words)…"
+                        placeholder="Begin drafting your report here (minimum 150 words)…",
+                        elem_classes="writing-area"
                     )
                 with gr.Column(scale=3):
                     wc_label1 = gr.Textbox(label="Word Count", elem_id="wc1",
-                                           interactive=False, value="0 words")
-                    eval_btn_1 = gr.Button("📊 Evaluate", variant="primary")
-                    band_1 = gr.Textbox(label="Band Score", interactive=False,
+                                            interactive=False, value="0 words")
+                    eval_btn_1 = gr.Button("📊 Evaluate Response", variant="primary", elem_classes="ielts-btn-primary")
+                    band_1 = gr.Textbox(label="Estimated Band Score", interactive=False,
                                         elem_classes="band-box")
 
-            feedback1 = gr.Markdown(label="Feedback")
+            feedback1 = gr.Markdown(label="AI Evaluation Feedback")
+
 
-            essay1.change(word_count, inputs=essay1, outputs=wc_label1)
-            gen_btn_1.click(generate_task1,
-                            outputs=[chart_img, task1_q, chart_spec_state])
-            eval_btn_1.click(evaluate_task1,
-                             inputs=[essay1, chart_spec_state],
-                             outputs=[feedback1, band_1])
+        essay1.change(word_count, inputs=essay1, outputs=wc_label1)
+        gen_btn_1.click(generate_task1,
+                        outputs=[chart_img, task1_q, chart_spec_state])
+        eval_btn_1.click(evaluate_task1,
+                            inputs=[essay1, chart_spec_state],
+                            outputs=[feedback1, band_1])
 
         # ════════════════════════════════════════════════════════════���═════════
         # TASK 2
@@ -974,14 +1018,14 @@ Powered by **Gemini 2.5 Flash** · Academic Module · Writing Tasks 1 & 2 · Rea
 
             with gr.Row():
                 gen_btn_2 = gr.Button("🎲 Generate Essay Question",
-                                      variant="primary", scale=2)
+                                       variant="primary", scale=2, elem_classes="ielts-btn-primary")
                 with gr.Column(scale=3):
-                    gr.Markdown("*Randomises: opinion, discussion, problem-solution, "
-                                "advantages/disadvantages, direct question*")
+                    gr.Markdown("<div class='ielts-header'><h3>Academic Module: Writing Task 2</h3><p>Discursive Essay • 40 Minutes Recommended</p></div>")
 
             task2_q = gr.Textbox(
-                label="Question", lines=5, interactive=False,
-                placeholder="Click 'Generate' to load a question…"
+                label="AI Generated Prompt", lines=5, interactive=False,
+                placeholder="Click 'Generate' to load a question…",
+                elem_classes="ielts-prompt-box"
             )
 
             gr.Markdown("---")
@@ -990,16 +1034,18 @@ Powered by **Gemini 2.5 Flash** · Academic Module · Writing Tasks 1 & 2 · Rea
                 with gr.Column(scale=7):
                     essay2 = gr.Textbox(
                         label="Your Response", lines=18,
-                        placeholder="Write your Task 2 essay here (minimum 250 words)…"
+                        placeholder="Begin drafting your essay here (minimum 250 words)…",
+                        elem_classes="writing-area"
                     )
                 with gr.Column(scale=3):
                     wc_label2 = gr.Textbox(label="Word Count", elem_id="wc2",
                                            interactive=False, value="0 words")
-                    eval_btn_2 = gr.Button("📊 Evaluate", variant="primary")
-                    band_2 = gr.Textbox(label="Band Score", interactive=False,
-                                        elem_classes="band-box")
+                    eval_btn_2 = gr.Button("📊 Evaluate Response", variant="primary", elem_classes="ielts-btn-primary")
+                    band_2 = gr.Textbox(label="Estimated Band Score", interactive=False,
+                                         elem_classes="band-box")
+
+            feedback2 = gr.Markdown(label="AI Evaluation Feedback")
 
-            feedback2 = gr.Markdown(label="Feedback")
 
             essay2.change(word_count, inputs=essay2, outputs=wc_label2)
             gen_btn_2.click(generate_task2, outputs=task2_q)
@@ -1016,13 +1062,10 @@ Powered by **Gemini 2.5 Flash** · Academic Module · Writing Tasks 1 & 2 · Rea
             # ── Header controls ────────────────────────────────────────────
             with gr.Row():
                 gen_reading_btn = gr.Button(
-                    "🎲 Generate New Reading Test", variant="primary", scale=2
+                    "🎲 Generate New Reading Test", variant="primary", scale=2, elem_classes="ielts-btn-primary"
                 )
                 with gr.Column(scale=3):
-                    gr.Markdown(
-                        "*3 academic passages · 40 questions · 60 minutes · "
-                        "Passages & questions generated together by Gemini*"
-                    )
+                    gr.Markdown("<div class='ielts-header'><h3>Academic Module: Reading Paper</h3><p>3 Passages · 40 Questions · 60 Minutes Recommended</p></div>")
 
             # ── Countdown timer (injected by generate_reading_test) ────────
             timer_html_comp = gr.HTML("")
@@ -1037,19 +1080,20 @@ Powered by **Gemini 2.5 Flash** · Academic Module · Writing Tasks 1 & 2 · Rea
             )
 
             with gr.Accordion("📄 Passage 1", open=False):
-                reading_p1 = gr.Markdown("*Generate a test to load Passage 1.*")
+                reading_p1 = gr.Markdown(elem_classes="ielts-card")
 
             with gr.Accordion("📄 Passage 2", open=False):
-                reading_p2 = gr.Markdown("*Generate a test to load Passage 2.*")
+                reading_p2 = gr.Markdown(elem_classes="ielts-card")
 
             with gr.Accordion("📄 Passage 3", open=False):
-                reading_p3 = gr.Markdown("*Generate a test to load Passage 3.*")
+                reading_p3 = gr.Markdown(elem_classes="ielts-card")
 
             gr.Markdown("---")
 
             # ── Questions display ──────────────────────────────────────────
             reading_questions = gr.Markdown(
-                "*Questions will appear here after you generate a test.*"
+                "*Questions will appear here after you generate a test.*",
+                elem_classes="ielts-prompt-box"
             )
 
             gr.Markdown("---")
@@ -1062,8 +1106,7 @@ Powered by **Gemini 2.5 Flash** · Academic Module · Writing Tasks 1 & 2 · Rea
                 "- True / False / Not Given: &nbsp;`2. TRUE` &nbsp;or&nbsp; `3. NOT GIVEN`\n"
                 "- Matching headings: &nbsp;`4. iii`\n"
                 "- Sentence / Short answer: &nbsp;`5. carbon dioxide`\n\n"
-                "Answers are evaluated by Gemini against the generated answer key. "
-                "*(Evaluator will be replaced by your fine-tuned model once trained.)*"
+                "Answers are evaluated by Gemini against the generated answer key."
             )
 
             with gr.Row():
@@ -1081,18 +1124,19 @@ Powered by **Gemini 2.5 Flash** · Academic Module · Writing Tasks 1 & 2 · Rea
                             "...\n"
                             "40. YES"
                         ),
+                        elem_classes="writing-area"
                     )
                 with gr.Column(scale=3):
                     submit_reading_btn = gr.Button(
-                        "📊 Submit & Evaluate", variant="primary"
+                        "📊 Submit & Evaluate", variant="primary", elem_classes="ielts-btn-primary"
                     )
                     reading_band_box = gr.Textbox(
-                        label="Band Score",
+                        label="Estimated Band Score",
                         interactive=False,
                         elem_classes="band-box",
                     )
 
-            reading_feedback_md = gr.Markdown()
+            reading_feedback_md = gr.Markdown(label="AI Evaluation Feedback")
 
             # ── Events ────────────────────────────────────────────────────
             gen_reading_btn.click(