Update app.py

app.py

@@ -1,249 +1,551 @@
-import json
-import time
-from typing import Dict, Any
-import gradio as gr
-
-# --- Simulation Setup for LLM API ---
-# This section simulates the core AI generation logic without requiring a live API key.
-LLM_MODEL = "gemini-2.5-flash-preview-09-2025"
-API_KEY = "MOCK_KEY" # Placeholder
-
-def simulate_gemini_api_call(payload: Dict[str, Any], fields: Dict[str, Any]) -> Dict[str, Any]:
-    """
-    Simulates a structured response from the Gemini API based on the task type.
-    
-    Args:
-        payload: The constructed API payload (used for extracting system instructions).
-        fields: User input fields for customizing the mock output.
-        
-    Returns:
-        A dictionary simulating the API's JSON response structure.
-    """
-    
-    user_query = payload['contents'][0]['parts'][0]['text']
-    system_instruction = payload.get('systemInstruction', {}).get('parts', [{}])[0].get('text', 'No system instruction')
-    
-    # Check system instruction to determine the output type (Admin or Teaching)
-    if "台灣中學學務處行政書記" in system_instruction:
-        # Simulate Admin Copilot (Meeting Minutes) output
-        mock_text_result = json.dumps({
-            "文件類型 (Document Type)": "學務處會議記錄 (Academic Affairs Meeting Minutes)",
-            "meeting_info": {
-                "date": fields.get('date', '2025-01-10'),
-                "location": fields.get('location', '會議室'),
-                "topic": fields.get('topic', '模擬會議主題')
-            },
-            "attendees": ["Principal", "Director", "All Faculty"],
-            "key_points": [
-                "End-of-term commendation process finalized, 30 cases approved.",
-                "New student orientation preparation is 80% complete; venue setup confirmed."
-            ],
-            "resolutions": [
-                {"item": "Issue official commendation announcement.", "responsible": "HR", "deadline": "2025-01-15"},
-                {"item": "Venue setup for orientation completed one day prior.", "responsible": "General Affairs", "deadline": "2025-08-20"}
-            ],
-            "audit_note": "Document generated per internal school writing guidelines."
-        }, ensure_ascii=False, indent=2)
-        
-    elif "台灣國高中資深教師與課程設計師" in system_instruction:
-        # Simulate Teaching Designer (Lesson Plan & Rubric) output
-        mock_text_result = json.dumps({
-            "文件類型 (Document Type)": "單元教案與評量規準 (Lesson Plan & Rubric)",
-            "lesson_plan_title": f"【{fields.get('subject', 'N/A')}】Exploring {fields.get('topic', 'N/A')} ({fields.get('hours', 0)} sessions)",
-            "grade_level": fields.get('grade', 'N/A'),
-            "curriculum_alignment": ["A2 Logical Reasoning (Curriculum Competency)", "B3 Independent Thinking"],
-            "learning_objectives": ["Students can explain X.", "Students can apply Y."],
-            "activities": [
-                {"time_min": 15, "stage": "Introduction", "method": "Inquiry", "description": "Use real-life examples to introduce the core concept."},
-                {"time_min": 30, "stage": "Activity One", "method": "Collaborative Learning", "description": "Group project and practical exercise."},
-            ],
-            "rubric": {
-                "title": "Unit Assessment Rubric (4 Levels x 4 Indicators)",
-                "criteria": [
-                    {"name": "Conceptual Understanding", "A": "Clearly and accurately explains all core concepts.", "D": "Answers only simple questions."},
-                    {"name": "Teamwork", "A": "Actively leads the team to complete the task.", "D": "Does not participate in discussion."}
-                ]
-            },
-            "differentiation_advice": "Provide bilingual vocabulary cards for students with lower English proficiency."
-        }, ensure_ascii=False, indent=2)
-        
-    else:
-        mock_text_result = json.dumps({"error": "Unknown or missing task instruction."})
-
-
-    # Return the simulated API response structure
-    return {
-        "candidates": [{
-            "content": {
-                "parts": [{ "text": mock_text_result }]
-            },
-            "groundingMetadata": {}
-        }]
-    }
-
-# --- Module A: Admin Copilot Generator (Gradio Wrapper) ---
-
-def admin_copilot_generator(template_id: str, topic: str, date: str, location: str, key_input: str) -> str:
-    """
-    Handles the Admin Copilot UI inputs and calls the simulation.
-    """
-    fields = {
-        "topic": topic,
-        "date": date,
-        "location": location,
-        "key_input": key_input
-    }
-
-    # System Prompt and Schema defined as per spec 8.A
-    system_prompt = (
-        "角色：台灣中學學務處行政書記\n"
-        "輸出：JSON（會議資訊、出席、重點、決議、待辦、負責人、期限）\n"
-        "格式規範：用詞正式、避免口語、保留專有名詞\n"
-        "限制：所有決議必須有負責人和明確期限。"
-    )
-    response_schema = {
-        "type": "OBJECT",
-        "properties": {
-            "文件類型 (Document Type)": {"type": "STRING"},
-            "meeting_info": {"type": "OBJECT", "properties": {"date": {"type": "STRING"}, "location": {"type": "STRING"}, "topic": {"type": "STRING"}}},
-            "attendees": {"type": "ARRAY", "items": {"type": "STRING"}},
-            "key_points": {"type": "ARRAY", "items": {"type": "STRING"}},
-            "resolutions": {
-                "type": "ARRAY",
-                "items": {
-                    "type": "OBJECT",
-                    "properties": {
-                        "item": {"type": "STRING"},
-                        "responsible": {"type": "STRING"},
-                        "deadline": {"type": "STRING", "format": "date"}
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CampusAI Suite (台灣校園 AI 文書/教學 MVP)</title>
+    <!-- Load Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'Noto Sans TC', 'sans-serif'],
+                    },
+                    colors: {
+                        'primary': '#4f46e5',
+                        'secondary': '#10b981',
+                        'bg-light': '#f9fafb',
                     }
                 }
-            },
-            "audit_note": {"type": "STRING"}
+            }
         }
-    }
-    user_query = f"請生成一份會議記錄。主題: {topic}; 輸入重點（或逐字稿）：{key_input}"
-    
-    payload = {
-        "contents": [{ "parts": [{ "text": user_query }] }],
-        "systemInstruction": { "parts": [{ "text": system_prompt }] },
-        "generationConfig": {
-            "responseMimeType": "application/json",
-            "responseSchema": response_schema
+    </script>
+    <style>
+        /* Base styles */
+        body {
+            background-color: #f3f4f6;
+            min-height: 100vh;
         }
-    }
-
-    api_response = simulate_gemini_api_call(payload, fields)
-    
-    try:
-        json_string = api_response['candidates'][0]['content']['parts'][0]['text']
-        return json_string
-    except (KeyError, json.JSONDecodeError):
-        return "ERROR: Failed to parse LLM structured output."
-
-# --- Module B: Teaching AI Designer (Gradio Wrapper) ---
-
-def lesson_plan_designer(grade: str, subject: str, topic: str, hours: int, method: str, equipment: str, class_needs: str) -> str:
-    """
-    Handles the Teaching Designer UI inputs and calls the simulation.
-    """
-    fields = {
-        "grade": grade,
-        "subject": subject,
-        "topic": topic,
-        "hours": hours,
-        "method": method,
-        "equipment": equipment,
-        "class_needs": class_needs
-    }
-    
-    # System Prompt and Schema defined as per spec 8.B
-    system_prompt = (
-        "角色：台灣國高中資深教師與課程設計師\n"
-        "輸出：JSON（教案標題、目標、課綱對齊、活動步驟、評量規準、差異化建議）\n"
-        "限制：活動分鏡以 15 分鐘粒度；至少 2 項形成性評量。\n"
-        "對齊：請將輸出中的 'curriculum_alignment' 欄位，對齊台灣課綱的關鍵能力/素養。"
-    )
-    
-    response_schema = {
-        "type": "OBJECT",
-        "properties": {
-            "文件類型 (Document Type)": {"type": "STRING"},
-            "lesson_plan_title": {"type": "STRING"},
-            "grade_level": {"type": "STRING"},
-            "curriculum_alignment": {"type": "ARRAY", "items": {"type": "STRING"}},
-            "learning_objectives": {"type": "ARRAY", "items": {"type": "STRING"}},
-            "activities": {"type": "ARRAY", "items": {"type": "OBJECT"}},
-            "rubric": {"type": "OBJECT"},
-            "differentiation_advice": {"type": "STRING"}
+        /* Custom scrollbar for output area */
+        .custom-scroll::-webkit-scrollbar {
+            width: 8px;
         }
-    }
-
-    user_query = (
-        f"請根據以下資訊設計一個單元教案、評量規準和差異化建議：\n"
-        f"年級/學科/單元主題: {grade}/{subject}/{topic}\n"
-        f"課時數: {hours} 節\n"
-        f"教學法偏好: {method}\n"
-        f"可用設備: {equipment}\n"
-        f"班級特性: {class_needs}"
-    )
-
-    payload = {
-        "contents": [{ "parts": [{ "text": user_query }] }],
-        "systemInstruction": { "parts": [{ "text": system_prompt }] },
-        "generationConfig": {
-            "responseMimeType": "application/json",
-            "responseSchema": response_schema
+        .custom-scroll::-webkit-scrollbar-track {
+            background: #e5e7eb;
+            border-radius: 10px;
         }
-    }
-
-    api_response = simulate_gemini_api_call(payload, fields)
-    
-    try:
-        json_string = api_response['candidates'][0]['content']['parts'][0]['text']
-        return json_string
-    except (KeyError, json.JSONDecodeError):
-        return "ERROR: Failed to parse LLM structured output."
-
-# --- Gradio Interface Definition ---
-
-# Module A Interface (Admin Copilot)
-admin_copilot_interface = gr.Interface(
-    fn=admin_copilot_generator,
-    inputs=[
-        gr.Textbox(label="模板 ID (Template ID - Fixed for MVP)", value="meeting_minutes_standard", interactive=False),
-        gr.Textbox(label="會議主題 (Meeting Topic)", value="學務處期末獎懲與新生訓練籌備會議"),
-        gr.Textbox(label="日期 (Date)", value="2025-01-10"),
-        gr.Textbox(label="地點 (Location)", value="學務處會議室"),
-        gr.Textbox(label="輸入重點/逐字稿 (Key Input/Transcript)", value="討論期末獎懲核定程序。新生訓練場地佈置、人員編組確認。", lines=5),
-    ],
-    outputs=gr.JSON(label="AI 生成結構化 JSON 初稿 (Structured JSON Draft for DOCX Templating)"),
-    title="行政 Copilot：會議記錄生成 (Admin Copilot: Meeting Minutes Generation)",
-    description="🎯 模擬一鍵生成格式嚴謹的行政文件 JSON。實際系統將此 JSON 套入 DOCX 模板匯出。"
-)
-
-# Module B Interface (Teaching Designer)
-lesson_plan_designer_interface = gr.Interface(
-    fn=lesson_plan_designer,
-    inputs=[
-        gr.Dropdown(label="年級 (Grade)", choices=["國一", "高一", "小六"], value="高一"),
-        gr.Textbox(label="學科 (Subject)", value="歷史"),
-        gr.Textbox(label="單元主題 (Unit Topic)", value="從茶葉看全球化：17-19世紀的貿易網絡"),
-        gr.Slider(label="課時數 (Number of Sessions)", minimum=1, maximum=10, step=1, value=4),
-        gr.Dropdown(label="教學法偏好 (Pedagogy Preference)", choices=["探究式、PBL", "翻轉教學", "合作學習", "講述法"], value="探究式、PBL"),
-        gr.Textbox(label="可用設備 (Available Equipment)", value="平板電腦、投影設備、網路"),
-        gr.Textbox(label="班級特性 (Class Characteristics)", value="班級組成多元，需考慮多樣化的史料呈現方式。"),
-    ],
-    outputs=gr.JSON(label="AI 生成教案與評量規準 JSON (Lesson Plan & Rubric JSON)"),
-    title="教學 AI 設計器：教案與 Rubric 生成 (Teaching AI Designer: Lesson Plan & Rubric)",
-    description="📘 模擬生成符合課綱精神的單元教案結構和評量規準。實際系統將此 JSON 套入 DOCX 或 Google Slides 框架。"
-)
-
-# Integrate the two modules into a Tabbed Interface
-demo = gr.TabbedInterface([admin_copilot_interface, lesson_plan_designer_interface], 
-                          ["模組 A: 行政 Copilot", "模組 B: 教學設計器"], 
-                          title="CampusAI Suite (台灣校園 AI 文書/教學 MVP 演示)",
-                          theme=gr.themes.Soft())
-
-if __name__ == "__main__":
-    demo.launch()
+        .custom-scroll::-webkit-scrollbar-thumb {
+            background: #9ca3af;
+            border-radius: 10px;
+        }
+        .custom-scroll::-webkit-scrollbar-thumb:hover {
+            background: #6b7280;
+        }
+        /* Markdown styling for document preview */
+        .markdown-preview h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.5rem; }
+        .markdown-preview h2 { font-size: 1.5rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #4f46e5; }
+        .markdown-preview h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; border-left: 4px solid #10b981; padding-left: 0.5rem; }
+        .markdown-preview p { margin-bottom: 0.75rem; line-height: 1.6; }
+        .markdown-preview ul { list-style: disc; margin-left: 1.5rem; margin-bottom: 1rem; }
+        .markdown-preview li { margin-bottom: 0.25rem; }
+        .markdown-preview table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
+        .markdown-preview th, .markdown-preview td { border: 1px solid #d1d5db; padding: 0.75rem; text-align: left; }
+        .markdown-preview th { background-color: #eef2ff; font-weight: 600; color: #374151; }
+
+        .tab-button.active {
+            border-color: #4f46e5;
+            color: #4f46e5;
+            font-weight: 600;
+            background-color: #ffffff;
+        }
+    </style>
+</head>
+<body class="font-sans">
+
+    <!-- Firebase SDK Imports (Required for Canvas Environment) -->
+    <script type="module">
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
+        import { getAuth, signInAnonymously, signInWithCustomToken } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
+        import { getFirestore } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
+
+        // Global variables provided by the Canvas environment
+        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
+        const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : null;
+        const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;
+
+        let db, auth;
+
+        if (firebaseConfig) {
+            const app = initializeApp(firebaseConfig);
+            db = getFirestore(app);
+            auth = getAuth(app);
+            window.db = db; // Make available globally if needed
+            window.auth = auth; // Make available globally if needed
+
+            // Sign in using custom token or anonymously
+            async function authenticate() {
+                try {
+                    if (initialAuthToken) {
+                        await signInWithCustomToken(auth, initialAuthToken);
+                        console.log("Firebase signed in with custom token.");
+                    } else {
+                        await signInAnonymously(auth);
+                        console.log("Firebase signed in anonymously.");
+                    }
+                } catch (error) {
+                    console.error("Firebase authentication error:", error);
+                }
+            }
+            authenticate();
+        } else {
+            console.warn("Firebase config not available. Running without database features.");
+        }
+    </script>
+
+
+    <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+        <h1 class="text-3xl font-bold text-gray-900 mb-6">CampusAI Suite (台灣校園 AI 文書/教學 MVP 演示)</h1>
+
+        <!-- Tab Navigation -->
+        <div class="border-b border-gray-200 mb-6">
+            <nav class="-mb-px flex space-x-4" aria-label="Tabs">
+                <button id="tab-admin" onclick="switchTab('admin')"
+                    class="tab-button active group inline-flex items-center py-3 px-3 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
+                    模組 A: 行政 Copilot (會議記錄)
+                </button>
+                <button id="tab-teaching" onclick="switchTab('teaching')"
+                    class="tab-button group inline-flex items-center py-3 px-3 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
+                    模組 B: 教學設計器 (教案與 Rubric)
+                </button>
+            </nav>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <!-- Left Column: Input Forms -->
+            <div class="bg-white shadow-xl rounded-xl p-6 h-full">
+                <div id="content-admin" class="tab-content">
+                    <h2 class="text-2xl font-semibold text-primary mb-4">行政 Copilot：會議記錄生成</h2>
+                    <p class="text-sm text-gray-500 mb-6">🎯 模擬一鍵生成格式嚴謹的行政文件 JSON，並轉換為文件預覽。</p>
+
+                    <div class="space-y-4">
+                        <label class="block">
+                            <span class="text-gray-700">會議主題 (Meeting Topic)</span>
+                            <input type="text" id="admin-topic" value="學務處期末獎懲與新生訓練籌備會議" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border">
+                        </label>
+                        <div class="flex space-x-4">
+                            <label class="block w-1/2">
+                                <span class="text-gray-700">日期 (Date)</span>
+                                <input type="date" id="admin-date" value="2025-01-10" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border">
+                            </label>
+                            <label class="block w-1/2">
+                                <span class="text-gray-700">地點 (Location)</span>
+                                <input type="text" id="admin-location" value="學務處會議室" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border">
+                            </label>
+                        </div>
+                        <label class="block">
+                            <span class="text-gray-700">輸入重點/逐字稿 (Key Input/Transcript)</span>
+                            <textarea id="admin-key-input" rows="5" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border">討論期末獎懲核定程序。新生訓練場地佈置、人員編組確認。</textarea>
+                        </label>
+
+                        <button onclick="generateDocument('admin')" id="admin-button"
+                            class="w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-primary hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out">
+                            生成會議記錄預覽 (Generate Preview)
+                        </button>
+                    </div>
+                </div>
+
+                <div id="content-teaching" class="tab-content hidden">
+                    <h2 class="text-2xl font-semibold text-secondary mb-4">教學 AI 設計器：教案與 Rubric 生成</h2>
+                    <p class="text-sm text-gray-500 mb-6">📘 模擬生成符合課綱精神的教案結構和評量規準。</p>
+
+                    <div class="space-y-4">
+                        <div class="flex space-x-4">
+                            <label class="block w-1/3">
+                                <span class="text-gray-700">年級 (Grade)</span>
+                                <select id="teaching-grade" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border">
+                                    <option value="國一">國一</option>
+                                    <option value="高一" selected>高一</option>
+                                    <option value="小六">小六</option>
+                                </select>
+                            </label>
+                            <label class="block w-1/3">
+                                <span class="text-gray-700">學科 (Subject)</span>
+                                <input type="text" id="teaching-subject" value="歷史" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border">
+                            </label>
+                            <label class="block w-1/3">
+                                <span class="text-gray-700">課時數 (Sessions)</span>
+                                <input type="number" id="teaching-hours" value="4" min="1" max="10" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border">
+                            </label>
+                        </div>
+
+                        <label class="block">
+                            <span class="text-gray-700">單元主題 (Unit Topic)</span>
+                            <input type="text" id="teaching-topic" value="從茶葉看全球化：17-19世紀的貿易網絡" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border">
+                        </label>
+
+                        <label class="block">
+                            <span class="text-gray-700">教學法偏好 (Pedagogy Preference)</span>
+                            <select id="teaching-method" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border">
+                                <option value="探究式、PBL" selected>探究式、PBL</option>
+                                <option value="翻轉教學">翻轉教學</option>
+                                <option value="合作學習">合作學習</option>
+                            </select>
+                        </label>
+
+                        <label class="block">
+                            <span class="text-gray-700">班級特性 (Class Characteristics)</span>
+                            <textarea id="teaching-class-needs" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border">班級組成多元，需考慮多樣化的史料呈現方式。</textarea>
+                        </label>
+
+                        <button onclick="generateDocument('teaching')" id="teaching-button"
+                            class="w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-secondary hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary transition duration-150 ease-in-out">
+                            生成教案預覽 (Generate Preview)
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Column: Document Preview -->
+            <div class="bg-white shadow-xl rounded-xl p-6 h-full">
+                <h2 class="text-2xl font-semibold text-gray-800 mb-4">文件預覽 (DOCX Preview Mockup)</h2>
+                <div id="loading-indicator" class="hidden text-center py-8 text-lg text-gray-500">
+                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
+                    AI 正在為您生成文件結構中...
+                </div>
+                <div id="output-preview"
+                    class="markdown-preview custom-scroll bg-gray-50 p-6 rounded-lg border border-gray-200 h-[600px] overflow-y-auto text-gray-800">
+                    <p class="text-gray-500 italic">請在左側輸入資料，然後點擊按鈕生成文件結構。</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // --- Core Simulation and Utility Functions ---
+
+        /**
+         * Simulates a structured response from the Gemini API.
+         * In a production environment, this would be a real fetch call.
+         */
+        function simulate_gemini_api_call(payload, fields) {
+            const systemInstruction = payload.systemInstruction.parts[0].text;
+            let mockTextResult;
+
+            if (systemInstruction.includes("台灣中學學務處行政書記")) {
+                // Simulate Admin Copilot (Meeting Minutes) output
+                mockTextResult = {
+                    "文件類型 (Document Type)": "學務處會議記錄 (Academic Affairs Meeting Minutes)",
+                    "meeting_info": {
+                        "date": fields.date || '2025-01-10',
+                        "location": fields.location || '會議室',
+                        "topic": fields.topic || '模擬會議主題'
+                    },
+                    "attendees": ["校長 (Principal)", "學務主任 (Director of Student Affairs)", "全體學務處教職人員 (All Faculty)"],
+                    "key_points": [
+                        "期末獎懲核定程序已完成，共核定 30 件。建議將名單呈報校長核閱。",
+                        "新生訓練場地佈置進度達 80%，物資清單已交付總務處採購。",
+                        "決議於下次會議討論下學期活動預算編列。"
+                    ],
+                    "resolutions": [
+                        {"item": "發布正式期末獎懲公告。", "responsible": "教務處 (Academic Affairs)", "deadline": "2025-01-15"},
+                        {"item": "新生訓練場地佈置於活動前一天完成驗收。", "responsible": "總務處 (General Affairs)", "deadline": "2025-08-20"},
+                        {"item": "提交下學期活動預算草案供下次會議討論。", "responsible": "會計室 (Accounting)", "deadline": "2025-01-30"}
+                    ],
+                    "audit_note": "文件根據校內行政公文標準格式生成。"
+                };
+            } else if (systemInstruction.includes("台灣國高中資深教師與課程設計師")) {
+                // Simulate Teaching Designer (Lesson Plan & Rubric) output
+                mockTextResult = {
+                    "文件類型 (Document Type)": "單元教案與評量規準 (Lesson Plan & Rubric)",
+                    "lesson_plan_title": `【${fields.subject || '歷史'}】從${fields.topic.split('看')[0]}看全球化 (${fields.hours} 課時)`,
+                    "grade_level": fields.grade || '高一',
+                    "curriculum_alignment": ["A2 邏輯推理與批判思辨 (Logical Reasoning)", "B3 獨立思考與探究精神 (Independent Inquiry)"],
+                    "learning_objectives": [
+                        "學生能解釋 17-19 世紀茶葉貿易在全球經濟中的角色。",
+                        "學生能分析茶葉文化在不同地區的轉變與影響。",
+                        "學生能應用史料證據論證全球化對現代生活的影響。"
+                    ],
+                    "activities": [
+                        {"time_min": 15, "stage": "引導 (Introduction)", "method": "提問式教學", "description": "播放茶葉之路短片，引導學生思考『茶』如何改變世界。"},
+                        {"time_min": 30, "stage": "活動一 (Activity 1)", "method": "小組合作學習", "description": "分組研讀不同地區（英國、中國、印度）的茶葉史料，並製作簡報。"},
+                        {"time_min": 30, "stage": "活動二 (Activity 2)", "method": "探究與討論", "description": "以模擬國際會議形式，討論茶葉貿易中的道德與環境議題。"},
+                        {"time_min": 15, "stage": "總結與作業 (Conclusion)", "method": "自我評量", "description": "學生完成概念圖並繳交反思報告。"}
+                    ],
+                    "rubric": {
+                        "title": "單元評量規準 (四級四指標)",
+                        "criteria": [
+                            {"name": "概念理解 (Conceptual Understanding)", "A": "清晰、精確地解釋所有核心概念，並能融會貫通。", "D": "只能回答簡單的記憶性問題，缺乏連貫性。"},
+                            {"name": "史料分析 (Source Analysis)", "A": "能批判性地使用多樣史料，提出獨立見解。", "D": "無法有效解讀史料，或未能在論證中引用。"},
+                            {"name": "團隊合作 (Teamwork)", "A": "積極主導團隊討論，有效分配任務並提升整體表現。", "D": "討論中保持沉默，未對任務做出實質貢獻。"}
+                        ]
+                    },
+                    "differentiation_advice": "針對閱讀障礙學生，提供圖文並茂的史料摘要卡；鼓勵資優學生擴展研究範圍至咖啡或糖的全球貿易史。"
+                };
+            } else {
+                return { "error": "Unknown or missing task instruction." };
+            }
+
+            // Simulate the final API response structure
+            return {
+                candidates: [{
+                    content: {
+                        parts: [{ text: JSON.stringify(mockTextResult, null, 2) }]
+                    },
+                    groundingMetadata: {}
+                }]
+            };
+        }
+
+        // --- Document Rendering Functions (JSON to Markdown Preview) ---
+
+        /**
+         * Renders the Admin Copilot (Meeting Minutes) JSON into Markdown.
+         */
+        function renderAdminMarkdown(data) {
+            const info = data.meeting_info;
+            let markdown = `# ${data['文件類型 (Document Type)']}\n\n`;
+
+            markdown += `## 會議資訊 (Meeting Details)\n`;
+            markdown += `| 項目 (Item) | 內容 (Content) |\n`;
+            markdown += `| :--- | :--- |\n`;
+            markdown += `| **主題 (Topic)** | ${info.topic} |\n`;
+            markdown += `| **日期 (Date)** | ${info.date} |\n`;
+            markdown += `| **地點 (Location)** | ${info.location} |\n`;
+            markdown += `| **出席人員 (Attendees)** | ${data.attendees.join('、')} |\n\n`;
+
+            markdown += `## 討論重點摘要 (Key Discussion Points)\n`;
+            data.key_points.forEach(point => {
+                markdown += `* ${point}\n`;
+            });
+            markdown += `\n`;
+
+            markdown += `## 會議決議與待辦事項 (Resolutions & Action Items)\n`;
+            markdown += `| 決議事項 (Item) | 負責人 (Responsible) | 期限 (Deadline) |\n`;
+            markdown += `| :--- | :--- | :--- |\n`;
+            data.resolutions.forEach(res => {
+                markdown += `| ${res.item} | ${res.responsible} | ${res.deadline} |\n`;
+            });
+            markdown += `\n`;
+
+            markdown += `*行政備註 (Audit Note): ${data.audit_note}*\n`;
+
+            return markdown;
+        }
+
+        /**
+         * Renders the Teaching Designer (Lesson Plan) JSON into Markdown.
+         */
+        function renderTeachingMarkdown(data) {
+            let markdown = `# ${data.lesson_plan_title}\n\n`;
+            markdown += `## 單元概覽 (Unit Overview)\n`;
+            markdown += `* **文件類型:** ${data['文件類型 (Document Type)']}\n`;
+            markdown += `* **適用年級:** ${data.grade_level}\n\n`;
+
+            markdown += `## 學習目標 (Learning Objectives)\n`;
+            data.learning_objectives.forEach((obj, index) => {
+                markdown += `* **目標 ${index + 1}:** ${obj}\n`;
+            });
+            markdown += `\n`;
+
+            markdown += `## 課綱素養對齊 (Curriculum Alignment)\n`;
+            markdown += `本單元主要對應以下核心素養：\n`;
+            data.curriculum_alignment.forEach(align => {
+                markdown += `* ${align}\n`;
+            });
+            markdown += `\n`;
+
+            markdown += `## 教學活動步驟 (Lesson Activities)\n`;
+            markdown += `| 階段 (Stage) | 耗時 (Min) | 教學法 (Method) | 內容說明 (Description) |\n`;
+            markdown += `| :--- | :--- | :--- | :--- |\n`;
+            data.activities.forEach(activity => {
+                markdown += `| ${activity.stage} | ${activity.time_min} | ${activity.method} | ${activity.description} |\n`;
+            });
+            markdown += `\n`;
+
+            markdown += `## 評量規準 (Assessment Rubric)\n`;
+            const rubric = data.rubric;
+            markdown += `### ${rubric.title}\n`;
+            markdown += `| 評量指標 (Criteria) | A (精熟) | D (待加強) |\n`;
+            markdown += `| :--- | :--- | :--- |\n`;
+            rubric.criteria.forEach(crit => {
+                markdown += `| ${crit.name} | ${crit.A} | ${crit.D} |\n`;
+            });
+            markdown += `\n`;
+
+            markdown += `## 差異化教學建議 (Differentiation Advice)\n`;
+            markdown += `<p>${data.differentiation_advice}</p>\n`;
+
+            return markdown;
+        }
+
+
+        /**
+         * Main function to handle input, call simulation, and display output.
+         */
+        async function generateDocument(module) {
+            const outputElement = document.getElementById('output-preview');
+            const loadingElement = document.getElementById('loading-indicator');
+            const button = document.getElementById(`${module}-button`);
+
+            button.disabled = true;
+            loadingElement.classList.remove('hidden');
+            outputElement.innerHTML = ''; // Clear previous output
+
+            let fields = {};
+            let systemPrompt = "";
+            let userQuery = "";
+            let renderFunction;
+
+            // 1. Collect inputs and define API payload based on module
+            if (module === 'admin') {
+                fields.topic = document.getElementById('admin-topic').value;
+                fields.date = document.getElementById('admin-date').value;
+                fields.location = document.getElementById('admin-location').value;
+                fields.key_input = document.getElementById('admin-key-input').value;
+                renderFunction = renderAdminMarkdown;
+
+                systemPrompt = (
+                    "角色：台灣中學學務處行政書記\n" +
+                    "輸出：JSON（會議資訊、出席、重點、決議、待辦、負責人、期限）\n" +
+                    "格式規範：用詞正式、避免口語、保留專有名���\n" +
+                    "限制：所有決議必須有負責人和明確期限。"
+                );
+                userQuery = `請生成一份會議記錄。主題: ${fields.topic}; 輸入重點（或逐字稿）：${fields.key_input}`;
+            } else if (module === 'teaching') {
+                fields.grade = document.getElementById('teaching-grade').value;
+                fields.subject = document.getElementById('teaching-subject').value;
+                fields.topic = document.getElementById('teaching-topic').value;
+                fields.hours = parseInt(document.getElementById('teaching-hours').value);
+                fields.method = document.getElementById('teaching-method').value;
+                // equipment and class_needs are simulated implicitly
+                fields.class_needs = document.getElementById('teaching-class-needs').value;
+                renderFunction = renderTeachingMarkdown;
+
+                systemPrompt = (
+                    "角色：台灣國高中資深教師與課程設計師\n" +
+                    "輸出：JSON（教案標題、目標、課綱對齊、活動步驟、評量規準、差異化建議）\n" +
+                    "限制：活動分鏡以 15 分鐘粒度；至少 2 項形成性評量。\n" +
+                    "對齊：請將輸出中的 'curriculum_alignment' 欄位，對齊台灣課綱的關鍵能力/素養。"
+                );
+                userQuery = (
+                    `請根據以下資訊設計一個單元教案、評量規準和差異化建議：\n` +
+                    `年級/學科/單元主題: ${fields.grade}/${fields.subject}/${fields.topic}\n` +
+                    `課時數: ${fields.hours} 節\n` +
+                    `教學法偏好: ${fields.method}\n` +
+                    `班級特性: ${fields.class_needs}`
+                );
+            }
+
+            const payload = {
+                contents: [{ parts: [{ text: userQuery }] }],
+                systemInstruction: { parts: [{ text: systemPrompt }] },
+                // generationConfig with schema is required for structured output, but we mock it.
+                generationConfig: { responseMimeType: "application/json" }
+            };
+
+            // 2. Call the simulated API (Wait for 1.5s to simulate network latency)
+            await new Promise(resolve => setTimeout(resolve, 1500));
+            const apiResponse = simulate_gemini_api_call(payload, fields);
+
+            // 3. Process the response
+            try {
+                const jsonString = apiResponse.candidates[0].content.parts[0].text;
+                const data = JSON.parse(jsonString);
+
+                const markdownOutput = renderFunction(data);
+                
+                // Use a simple pre-formatted block for the markdown to simulate the document appearance
+                // Note: Full Markdown rendering engine is not used, just basic HTML elements styled via markdown-preview class
+                outputElement.innerHTML = `
+                    <div class="space-y-6">
+                        <div class="markdown-preview">${convertMarkdownToHTML(markdownOutput)}</div>
+                        <h3 class="text-xl font-semibold text-gray-700 pt-4 border-t">JSON 原始輸出 (For DOCX Templating)</h3>
+                        <pre class="bg-gray-100 p-4 rounded-md text-xs overflow-x-auto border border-gray-300">${jsonString}</pre>
+                    </div>
+                `;
+
+            } catch (error) {
+                console.error("Processing error:", error);
+                outputElement.innerHTML = `<div class="p-4 bg-red-100 text-red-700 rounded-md">文件生成失敗：無法解析 AI 結構化輸出。請檢查輸入內容是否完整。</div>`;
+            } finally {
+                loadingElement.classList.add('hidden');
+                button.disabled = false;
+            }
+        }
+
+        /**
+         * Simple function to convert basic Markdown (headers, lists, tables) to HTML.
+         * Note: This is a minimal conversion, not a full MD parser.
+         */
+        function convertMarkdownToHTML(md) {
+            // Replace headers
+            md = md.replace(/^#\s*(.*)$/gm, '<h1>$1</h1>');
+            md = md.replace(/^##\s*(.*)$/gm, '<h2>$1</h2>');
+            md = md.replace(/^###\s*(.*)$/gm, '<h3>$1</h3>');
+
+            // Replace lists (simple * to <li>)
+            md = md.replace(/^\*\s*(.*)$/gm, '<li>$1</li>');
+            // Wrap lists in <ul>
+            md = md.replace(/(<li>[\s\S]*?<\/li>)/g, '<ul>$1</ul>');
+            md = md.replace(/<\/li>\s*<ul>/g, '</li><ul>');
+
+            // Handle tables (very basic, requires specific MD format from renderer)
+            const tableRegex = /^(?:\|.*?\|(?:.*?\|)*\n)+/gm;
+            md = md.replace(tableRegex, (tableMatch) => {
+                let html = '<table>';
+                const rows = tableMatch.trim().split('\n').filter(r => r.trim() !== '');
+                
+                // Header (1st row)
+                const headerCells = rows[0].match(/\|(.*?)(?=\|)/g).map(c => c.slice(1).trim());
+                html += '<thead><tr>' + headerCells.map(c => `<th>${c}</th>`).join('') + '</tr></thead><tbody>';
+
+                // Data rows (skip 2nd row which is separator)
+                for (let i = 2; i < rows.length; i++) {
+                    const dataCells = rows[i].match(/\|(.*?)(?=\|)/g).map(c => c.slice(1).trim());
+                    html += '<tr>' + dataCells.map(c => `<td>${c}</td>`).join('') + '</tr>';
+                }
+                html += '</tbody></table>';
+                return html;
+            });
+            
+            // Convert remaining lines to paragraphs
+            md = md.split('\n\n').map(p => {
+                // Ignore lines already processed as headers/lists/tables or empty
+                if (p.startsWith('<h') || p.startsWith('<ul>') || p.startsWith('<table') || p.trim() === '') {
+                    return p;
+                }
+                // Handle specific P tags from renderer
+                if (p.startsWith('<p>') && p.endsWith('</p>')) {
+                    return p;
+                }
+                // Wrap plain text in paragraph tags
+                return `<p>${p.trim()}</p>`;
+            }).join('\n');
+
+            return md;
+        }
+
+
+        // --- UI Logic ---
+
+        let activeTab = 'admin';
+
+        function switchTab(tabId) {
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+            document.querySelectorAll('.tab-button').forEach(el => el.classList.remove('active'));
+
+            document.getElementById(`content-${tabId}`).classList.remove('hidden');
+            document.getElementById(`tab-${tabId}`).classList.add('active');
+            activeTab = tabId;
+        }
+
+        // Initial setup
+        document.addEventListener('DOMContentLoaded', () => {
+            switchTab(activeTab);
+        });
+    </script>
+</body>
+</html>
+