email-done

.env

@@ -0,0 +1,50 @@
+# ExamInsight Environment Variables
+# Copy to .env for local development
+# For HF Spaces, add these as Secrets in the Space settings
+
+# =============================================================================
+# REQUIRED
+# =============================================================================
+
+# OpenAI API Key (required for ChatKit)
+OPENAI_API_KEY=sk-your-openai-api-key
+
+# =============================================================================
+# GOOGLE OAUTH (optional - for private Google Sheets)
+# =============================================================================
+
+# Get these from Google Cloud Console > APIs & Services > Credentials
+GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=GOCSPX-your-client-secret
+
+# Redirect URI - update for production
+# Local: http://localhost:8000/auth/callback
+# HF Spaces: https://taboola-cz-examinsight.hf.space/auth/callback
+GOOGLE_REDIRECT_URI=http://localhost:8000/auth/callback
+
+# =============================================================================
+# EMAIL (optional - for sending reports)
+# =============================================================================
+
+# Option 1: Gmail SMTP (easier setup)
+GMAIL_USER=your-email@gmail.com
+GMAIL_APP_PASSWORD=your-16-char-app-password
+
+# Option 2: SendGrid API
+SENDGRID_API_KEY=SG.your-sendgrid-api-key
+SENDGRID_FROM_EMAIL=examinsight@yourdomain.com
+
+# =============================================================================
+# SECURITY
+# =============================================================================
+
+# Generate with: python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
+ENCRYPTION_KEY=your-fernet-encryption-key
+
+# =============================================================================
+# FRONTEND (for HF Spaces domain key)
+# =============================================================================
+
+# Register your HF Space domain at:
+# https://platform.openai.com/settings/organization/security/domain-allowlist
+VITE_CHATKIT_API_DOMAIN_KEY=domain_pk_your-production-key

chatkit/backend/app/config.py

@@ -59,9 +59,9 @@ def get_settings() -> Settings:
 
 
 # Google OAuth scopes required for the application
+# Note: drive.readonly is sensitive scope; spreadsheets.readonly is less restricted
 GOOGLE_SCOPES = [
     "https://www.googleapis.com/auth/spreadsheets.readonly",
-    "https://www.googleapis.com/auth/drive.readonly",
     "https://www.googleapis.com/auth/userinfo.email",
     "openid",
 ]

chatkit/backend/app/main.py

@@ -60,11 +60,51 @@ chatkit_server = ClassLensChatServer()
 # ChatKit Endpoint
 # =============================================================================
 
+@app.get("/api/models")
+async def get_available_models():
+    """Get list of available AI models."""
+    from .server import AVAILABLE_MODELS, DEFAULT_MODEL
+    return {
+        "models": AVAILABLE_MODELS,
+        "default": DEFAULT_MODEL,
+    }
+
+
 @app.post("/chatkit")
 async def chatkit_endpoint(request: Request) -> Response:
     """Proxy the ChatKit web component payload to the server implementation."""
     payload = await request.body()
-    result = await chatkit_server.process(payload, {"request": request})
+    
+    # Try to extract model from multiple sources
+    model = (
+        request.headers.get("X-Model") or
+        request.query_params.get("model") or
+        # Check if model is in cookies (set by frontend)
+        request.cookies.get("selected_model")
+    )
+    
+    context = {
+        "request": request,
+        "model": model,  # Pass model in context
+    }
+    
+    # Also try to extract from payload if it's JSON
+    try:
+        import json
+        payload_json = json.loads(payload)
+        if isinstance(payload_json, dict):
+            # Check various possible locations for model
+            payload_model = (
+                payload_json.get("metadata", {}).get("model") or
+                payload_json.get("model") or
+                payload_json.get("config", {}).get("model")
+            )
+            if payload_model:
+                context["model"] = payload_model
+    except:
+        pass
+    
+    result = await chatkit_server.process(payload, context)
 
     if isinstance(result, StreamingResult):
         return StreamingResponse(result, media_type="text/event-stream")

chatkit/backend/app/oauth.py

@@ -30,6 +30,10 @@ def get_redirect_uri(request: Request, settings) -> str:
     forwarded_proto = request.headers.get("x-forwarded-proto", "http")
     forwarded_host = request.headers.get("x-forwarded-host") or request.headers.get("host", "localhost:8000")
     
+    # Normalize 127.0.0.1 to localhost for local development (Google OAuth requires exact match)
+    if forwarded_host.startswith("127.0.0.1"):
+        forwarded_host = forwarded_host.replace("127.0.0.1", "localhost")
+    
     # Build the redirect URI
     return f"{forwarded_proto}://{forwarded_host}/auth/callback"
 
@@ -61,19 +65,28 @@ async def start_auth(teacher_email: str, request: Request):
     _state_store[state] = {"email": teacher_email, "redirect_uri": redirect_uri}
     
     # Build authorization URL
+    # Use "select_account consent" to allow account selection first, then show consent
+    # This is more flexible and works better when user isn't logged in
     auth_params = {
         "client_id": settings.google_client_id,
         "redirect_uri": redirect_uri,
         "response_type": "code",
         "scope": " ".join(GOOGLE_SCOPES),
         "access_type": "offline",  # Get refresh token
-        "prompt": "consent",  # Always show consent screen to get refresh token
+        "prompt": "select_account consent",  # Allow account selection, then show consent
         "state": state,
-        "login_hint": teacher_email,  # Pre-fill email if possible
+        # Only add login_hint if email is provided and valid
+        # This helps pre-fill but doesn't break if user isn't logged in
     }
     
+    # Add login_hint only if email looks valid (helps pre-fill but not required)
+    if teacher_email and "@" in teacher_email:
+        auth_params["login_hint"] = teacher_email
+    
     print(f"[OAuth] Starting auth for {teacher_email}")
     print(f"[OAuth] Redirect URI: {redirect_uri}")
+    print(f"[OAuth] Scopes: {GOOGLE_SCOPES}")
+    print(f"[OAuth] Full auth URL: https://accounts.google.com/o/oauth2/v2/auth?{urlencode(auth_params)}")
     
     auth_url = f"https://accounts.google.com/o/oauth2/v2/auth?{urlencode(auth_params)}"
     return RedirectResponse(url=auth_url)
@@ -92,7 +105,7 @@ def get_frontend_url(request: Request, settings) -> str:
 
 
 @router.get("/callback")
-async def auth_callback(request: Request, code: str = None, state: str = None, error: str = None):
+async def auth_callback(request: Request, code: str = None, state: str = None, error: str = None, error_description: str = None):
     """
     Handle OAuth callback from Google.
     
@@ -100,13 +113,20 @@ async def auth_callback(request: Request, code: str = None, state: str = None, e
         code: Authorization code from Google
         state: State token for CSRF verification
         error: Error message if authorization failed
+        error_description: Detailed error description from Google
     """
     settings = get_settings()
     frontend_url = get_frontend_url(request, settings)
     
     if error:
+        # Log the full error details
+        error_msg = error
+        if error_description:
+            error_msg = f"{error}: {error_description}"
+        print(f"[OAuth] Error callback: {error_msg}")
+        print(f"[OAuth] Full query params: {dict(request.query_params)}")
         return RedirectResponse(
-            url=f"{frontend_url}?auth_error={error}"
+            url=f"{frontend_url}?auth_error={error_msg}"
         )
     
     if not code or not state:

chatkit/backend/app/server.py

@@ -18,7 +18,46 @@ from .status_tracker import update_status, add_reasoning_step, WorkflowStep, res
 
 
 MAX_RECENT_ITEMS = 50
-MODEL = "gpt-4.1-mini"  # Using mini for cost efficiency (~10x cheaper)
+DEFAULT_MODEL = "gpt-4.1-mini"  # Default model for cost efficiency (~10x cheaper)
+
+# Available models
+AVAILABLE_MODELS = {
+    "gpt-4.1-mini": {
+        "name": "GPT-4.1-mini",
+        "description": "快速且經濟實惠（默認）",
+        "cost": "低",
+    },
+    "gpt-4o": {
+        "name": "GPT-4o",
+        "description": "高性能，適合複雜分析",
+        "cost": "中",
+    },
+    "gpt-4o-mini": {
+        "name": "GPT-4o-mini",
+        "description": "平衡性能與成本",
+        "cost": "低",
+    },
+    "gpt-5-pro": {
+        "name": "GPT-5 Pro",
+        "description": "最新旗艦模型，具備強大推理能力",
+        "cost": "高",
+    },
+    "o3-pro": {
+        "name": "O3 Pro",
+        "description": "深度推理模型，適合複雜問題分析",
+        "cost": "高",
+    },
+    "o1-preview": {
+        "name": "O1 Preview",
+        "description": "具備深度推理能力",
+        "cost": "高",
+    },
+    "o1-mini": {
+        "name": "O1 Mini",
+        "description": "具備推理能力，經濟實惠",
+        "cost": "中",
+    },
+}
 
 # Current session ID (simplified - in production use proper session management)
 _current_session_id = "default"
@@ -29,6 +68,39 @@ def set_session_id(session_id: str):
     _current_session_id = session_id
 
 
+def get_model_from_context(context: dict[str, Any]) -> str:
+    """Get model from context, default to DEFAULT_MODEL if not specified."""
+    # Try multiple ways to get model from context
+    model = (
+        context.get("model") or
+        context.get("request", {}).get("model") or
+        # Check query params
+        (context.get("request", {}).get("query_params", {}).get("model") if hasattr(context.get("request", {}), "query_params") else None) or
+        # Check headers
+        (context.get("request", {}).headers.get("x-model") if hasattr(context.get("request", {}), "headers") else None)
+    )
+    
+    if model and model in AVAILABLE_MODELS:
+        return model
+    return DEFAULT_MODEL
+
+
+def create_agent(model: str) -> Agent[AgentContext[dict[str, Any]]]:
+    """Create an agent with the specified model."""
+    return Agent[AgentContext[dict[str, Any]]](
+        model=model,
+        name="ClassLens",
+        instructions=EXAMINSIGHT_INSTRUCTIONS,
+        tools=[
+            fetch_responses,
+            parse_csv_data,
+            send_report_email,
+            save_analysis_report,
+            log_reasoning,
+        ],
+    )
+
+
 # =============================================================================
 # Tool Definitions with Status Tracking
 # =============================================================================
@@ -199,6 +271,12 @@ async def log_reasoning(thought: str) -> str:
 
 EXAMINSIGHT_INSTRUCTIONS = """You are ClassLens, an AI teaching assistant that creates beautiful, comprehensive exam analysis reports for teachers.
 
+## Language & Communication
+- Always communicate in Traditional Chinese (繁體中文, zh-TW)
+- Use polite and professional language
+- When greeting users, say: "您好！我是 ClassLens 助手，今天能為您做些什麼？"
+- All responses, explanations, and reports should be in Traditional Chinese unless the user specifically requests English
+
 ## Your Core Mission
 
 Transform raw Google Form quiz responses into professional, teacher-ready HTML reports with:
@@ -343,15 +421,62 @@ new Chart(document.getElementById('questionChart').getContext('2d'), {
 });
 ```
 
-### Step 5: Send Report
-Use `send_report_email` with the complete HTML as the body.
+### Step 5: Summary and Email Report
+
+**CRITICAL: After analyzing the exam data, follow these steps:**
+
+1. **Display a bullet-point summary** in chat (in Traditional Chinese):
+   - 總學生數、平均分數、最高分、最低分
+   - 各題正確率（例如：Q1: 85%, Q2: 60%, Q3: 90%）
+   - 主要發現（例如：多數學生在 Q2 答錯，可能對某概念理解不足）
+   - 需要關注的學生（低分學生）
+   - 表現優秀的學生（可作為同儕導師）
+   
+   Format example:
+   ```
+   📊 考試分析摘要：
+   
+   • 總學生數：25 人
+   • 平均分數：72 分（滿分 100）
+   • 最高分：95 分，最低分：45 分
+   
+   📈 各題正確率：
+   • Q1：85% 正確
+   • Q2：60% 正確 ⚠️（需要加強）
+   • Q3：90% 正確
+   
+   🔍 主要發現：
+   • 多數學生在 Q2 答錯，可能對「加速度」概念理解不足
+   • 約 30% 學生在開放式問題中表達不清楚
+   
+   👥 需要關注的學生：3 人（分數低於 50 分）
+   ⭐ 表現優秀的學生：5 人（分數高於 90 分，可作為同儕導師）
+   ```
+
+2. **Ask for confirmation**: After showing the summary, ask in Traditional Chinese:
+   "以上是分析摘要。您希望我生成完整的 HTML 詳細��告並發送到您的電子郵件嗎？"
+   
+3. **Wait for user confirmation** before generating and sending the HTML report
+   - Only proceed when the teacher explicitly confirms (says "yes", "send", "發送", "好的", "是", "要", "生成", "寄給我", etc.)
+   
+4. **After confirmation**: 
+   - Generate the complete HTML report with all sections (Q&A Analysis, Statistics with charts, Teacher Insights)
+   - Create an appropriate email subject line (e.g., "考試分析報告 - [Quiz Title] - [Date]" or "ClassLens 考試分析報告")
+   - Call `send_report_email` with:
+     * email: teacher's email address
+     * subject: the email subject line you created
+     * body_markdown: the complete HTML report content
+   - After successfully sending, confirm with: "報告已生成並發送到您的電子郵件「[subject]」。報告包含詳細的題目分析、統計圖表和教學建議。請檢查您的收件匣。"
+   - Make sure to include the actual subject line in the confirmation message (replace [subject] with the actual subject you used)
 
 ## Output Format
 
-When generating the report:
-1. First display a brief summary in chat
-2. Then output the complete HTML in a code block
-3. Offer to email it to the teacher
+When analyzing exam data:
+1. First display a bullet-point summary in chat (in Traditional Chinese)
+2. Ask: "以上是分析摘要。您希望我生成完整的 HTML 詳細報告並發送到您的電子郵件嗎？"
+3. Wait for user confirmation
+4. Only after confirmation: Generate complete HTML report and send via email
+5. Do NOT automatically generate or send the HTML report - always show summary first and ask for confirmation
 
 ## Design Principles
 
@@ -375,24 +500,40 @@ When generating the report:
 - Never expose full student identifiers
 - Group low performers sensitively
 
-Start by greeting the teacher and asking for:
-1. Google Form/Sheet URL
-2. Their email (for sending the report)
-3. Optionally: correct answers if not embedded in the form"""
+## Initial Conversation Flow
 
+When starting a new conversation, follow this sequence:
 
-classlens_agent = Agent[AgentContext[dict[str, Any]]](
-    model=MODEL,
-    name="ClassLens",
-    instructions=EXAMINSIGHT_INSTRUCTIONS,
-    tools=[
-        fetch_responses,
-        parse_csv_data,
-        send_report_email,
-        save_analysis_report,
-        log_reasoning,
-    ],
-)
+1. **Greet the teacher** in Traditional Chinese: "您好！我是 ClassLens 助手，今天能為您做些什麼？"
+
+2. **Ask for Google Form/Sheet URL**: "請提供您的 Google 表單或試算表網址。"
+
+3. **Ask about answer key** (標準答案):
+   - "請問您是否方便提供本次考試的正確答案（標準答案）？"
+   - "如果您有標準答案，請提供給我，這樣我可以更準確地評分和分析。"
+   - "如果您沒有標準答案，我可以嘗試根據學生的回答模式自動推斷標準答案。您希望我為您自動生成標準答案嗎？"
+
+4. **Ask for email**: "請提供您的電子郵件地址，以便我將分析報告發送給您。"
+
+5. **Wait for all information** before starting analysis:
+   - Google Form/Sheet URL (required)
+   - Answer key (optional, but recommended for accuracy)
+   - Teacher email (required for sending report)
+
+## Answer Key Handling
+
+- **If teacher provides answer key**: Use it directly for accurate grading
+- **If teacher doesn't have answer key but wants auto-generation**: 
+  - Analyze student responses to infer the most likely correct answers
+  - Show the inferred answers to the teacher for confirmation
+  - Ask: "根據學生回答模式，我推斷的標準答案如下：[列出答案]。請確認這些答案是否正確，或提供修正。"
+- **If teacher doesn't provide and doesn't want auto-generation**: 
+  - Proceed with analysis but note that grading accuracy may be limited
+  - Focus on response patterns and common mistakes rather than absolute correctness"""
+
+
+# Default agent (will be overridden by dynamic agent creation in respond method)
+classlens_agent = create_agent(DEFAULT_MODEL)
 
 
 # =============================================================================
@@ -416,6 +557,12 @@ class ClassLensChatServer(ChatKitServer[dict[str, Any]]):
         reset_status(thread.id)
         set_session_id(thread.id)
         
+        # Get model from context (user selection from frontend)
+        selected_model = get_model_from_context(context)
+        
+        # Create agent with selected model
+        agent = create_agent(selected_model)
+        
         items_page = await self.store.load_thread_items(
             thread.id,
             after=None,
@@ -433,7 +580,7 @@ class ClassLensChatServer(ChatKitServer[dict[str, Any]]):
         )
 
         result = Runner.run_streamed(
-            classlens_agent,
+            agent,
             agent_input,
             context=agent_context,
         )

chatkit/frontend/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-TW">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

chatkit/frontend/src/App.tsx

@@ -50,7 +50,7 @@ function InviteCodeGate({ onSuccess }: { onSuccess: () => void }) {
               ClassLens
             </h1>
             <p className="text-[var(--color-text-muted)] mt-2">
-              AI-Powered Exam Analysis
+              AI 驅動的考試分析
             </p>
           </div>
 
@@ -61,7 +61,7 @@ function InviteCodeGate({ onSuccess }: { onSuccess: () => void }) {
                 htmlFor="invite-code" 
                 className="block text-sm font-medium text-[var(--color-text-muted)] mb-2"
               >
-                Enter Invite Code
+                輸入邀請碼
               </label>
               <input
                 id="invite-code"
@@ -71,7 +71,7 @@ function InviteCodeGate({ onSuccess }: { onSuccess: () => void }) {
                   setCode(e.target.value);
                   setError(false);
                 }}
-                placeholder="Enter your invite code..."
+                placeholder="請輸入您的邀請碼..."
                 className={`w-full px-4 py-3 bg-[var(--color-background)] border rounded-xl text-[var(--color-text)] placeholder-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] transition-all ${
                   error 
                     ? "border-red-500 focus:ring-red-500" 
@@ -84,7 +84,7 @@ function InviteCodeGate({ onSuccess }: { onSuccess: () => void }) {
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                   </svg>
-                  Invalid invite code. Please try again.
+                  邀請碼無效，請重試。
                 </p>
               )}
             </div>
@@ -93,7 +93,7 @@ function InviteCodeGate({ onSuccess }: { onSuccess: () => void }) {
               type="submit"
               className="w-full py-3 px-4 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-accent)] text-white font-semibold rounded-xl hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface)]"
             >
-              Access App →
+              進入應用程式 →
             </button>
           </form>
 

chatkit/frontend/src/components/AuthStatus.tsx

@@ -45,7 +45,7 @@ export function AuthStatus({
     setError(null);
     
     if (!emailInput.trim()) {
-      setError("Please enter your email address");
+      setError("請輸入您的電子郵件地址");
       return;
     }
     
@@ -69,7 +69,7 @@ export function AuthStatus({
         const data = await response.json();
         if (data.detail?.includes('not configured')) {
           setAuthMode('csv-only');
-          setError("Google OAuth not configured. You can still use the app by uploading CSV files directly in the chat!");
+          setError("Google OAuth 未設定。您仍可在聊天中直接上傳 CSV 檔案使用應用程式！");
           // Set as "connected" with just email for CSV fallback
           setTeacherEmail(emailInput);
           setIsAuthenticated(true);
@@ -110,12 +110,12 @@ export function AuthStatus({
               </svg>
             </div>
             <h2 className="font-display text-2xl font-bold text-[var(--color-text)] mb-2">
-              {isAuthenticated ? "You're Connected!" : "Connect Your Google Account"}
+              {isAuthenticated ? "已連接！" : "連接您的 Google 帳號"}
             </h2>
             <p className="text-[var(--color-text-muted)]">
               {isAuthenticated 
-                ? "Your Google account is linked. You can now analyze exam responses."
-                : "We'll only access your Google Forms response spreadsheets. No data is stored on our servers."}
+                ? "您的 Google 帳號已連結。現在可以分析考試答案了。"
+                : "我們只會存取您的 Google 表單回應試算表。不會在我們的伺服器上儲存任何資料。"}
             </p>
           </div>
 
@@ -130,14 +130,14 @@ export function AuthStatus({
             <div className="text-left">
               <div className="font-medium text-[var(--color-text)]">{teacherEmail}</div>
               <div className="text-sm text-[var(--color-text-muted)]">
-                {authMode === 'csv-only' ? 'CSV Upload Mode (Google OAuth not configured)' : 'Google Account Connected'}
+                {authMode === 'csv-only' ? 'CSV 上傳模式（Google OAuth 未設定）' : 'Google 帳號已連接'}
               </div>
             </div>
           </div>
           
           {authMode === 'csv-only' && (
             <div className="p-3 rounded-lg bg-amber-50 border border-amber-200 text-amber-700 text-sm">
-              <strong>Note:</strong> You can paste CSV data directly in the chat, or set up Google OAuth to fetch from Google Forms.
+              <strong>注意：</strong>您可以在聊天中直接貼上 CSV 資料，或設定 Google OAuth 從 Google 表單取得資料。
             </div>
           )}
               
@@ -145,14 +145,14 @@ export function AuthStatus({
                 onClick={handleDisconnect}
                 className="w-full btn btn-outline text-red-500 border-red-200 hover:border-red-500 hover:text-red-600"
               >
-                Disconnect Account
+                斷開帳號
               </button>
             </div>
           ) : (
             <form onSubmit={handleConnect} className="space-y-4">
               <div>
                 <label htmlFor="email" className="block text-sm font-medium text-[var(--color-text)] mb-2">
-                  Your School Email
+                  您的學校電子郵件
                 </label>
                 <input
                   type="email"
@@ -182,7 +182,7 @@ export function AuthStatus({
                       <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                       <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                     </svg>
-                    Checking...
+                    檢查中...
                   </>
                 ) : (
                   <>
@@ -192,16 +192,16 @@ export function AuthStatus({
                       <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                       <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                     </svg>
-                    Continue with Google
+                    使用 Google 繼續
                   </>
                 )}
               </button>
               
               <p className="text-center text-xs text-[var(--color-text-muted)]">
-                By connecting, you agree to our{" "}
-                <a href="#" className="underline hover:text-[var(--color-primary)]">Terms of Service</a>
-                {" "}and{" "}
-                <a href="#" className="underline hover:text-[var(--color-primary)]">Privacy Policy</a>
+                連接即表示您同意我們的{" "}
+                <a href="#" className="underline hover:text-[var(--color-primary)]">服務條款</a>
+                {" "}和{" "}
+                <a href="#" className="underline hover:text-[var(--color-primary)]">隱私政策</a>
               </p>
             </form>
           )}

chatkit/frontend/src/components/ExamAnalyzer.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { ChatKit, useChatKit } from "@openai/chatkit-react";
 import { CHATKIT_API_DOMAIN_KEY, CHATKIT_API_URL } from "../lib/config";
 import { ReasoningPanel } from "./ReasoningPanel";
@@ -10,9 +10,50 @@ interface ExamAnalyzerProps {
 
 export function ExamAnalyzer({ teacherEmail, onBack }: ExamAnalyzerProps) {
   const [showCopiedToast, setShowCopiedToast] = useState(false);
+  const [selectedModel, setSelectedModel] = useState("gpt-4.1-mini");
+  const [availableModels, setAvailableModels] = useState<Record<string, {name: string; description: string; cost: string}>>({});
+  
+  // Load available models
+  useEffect(() => {
+    fetch("/api/models")
+      .then(res => res.json())
+      .then(data => {
+        setAvailableModels(data.models || {});
+        setSelectedModel(data.default || "gpt-4.1-mini");
+      })
+      .catch(err => console.error("Failed to load models:", err));
+  }, []);
+  
+  // Force Traditional Chinese locale for ChatKit
+  useEffect(() => {
+    // Set document language to zh-TW
+    document.documentElement.lang = 'zh-TW';
+    
+    // Try to override browser language detection
+    if (navigator.language) {
+      Object.defineProperty(navigator, 'language', {
+        get: () => 'zh-TW',
+        configurable: true,
+      });
+    }
+    
+    // Set Accept-Language header hint (may not work for iframe)
+    const meta = document.createElement('meta');
+    meta.httpEquiv = 'Content-Language';
+    meta.content = 'zh-TW';
+    document.head.appendChild(meta);
+  }, []);
+  
+  // Store selected model in sessionStorage for backend access
+  useEffect(() => {
+    sessionStorage.setItem("selected_model", selectedModel);
+  }, [selectedModel]);
   
   const chatkit = useChatKit({
-    api: { url: CHATKIT_API_URL, domainKey: CHATKIT_API_DOMAIN_KEY },
+    api: { 
+      url: CHATKIT_API_URL, 
+      domainKey: CHATKIT_API_DOMAIN_KEY,
+    },
     composer: {
       attachments: { enabled: false },
     },
@@ -26,19 +67,19 @@ export function ExamAnalyzer({ teacherEmail, onBack }: ExamAnalyzerProps) {
 
   const examplePrompts = [
     {
-      title: "📊 Analyze Google Sheet",
-      prompt: `Please analyze the exam responses from this Google Sheet:
+      title: "📊 分析 Google 試算表",
+      prompt: `請分析這個 Google 試算表中的考試答案：
 https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/edit
 
-The correct answers are:
+標準答案是：
 - Q1: 4
-- Q2: Acceleration is the rate of change of velocity
+- Q2: 加速度是速度的變化率
 
-My email is ${teacherEmail}. Please grade the responses, explain incorrect answers, suggest peer learning groups, and email me the report.`,
+我的電子郵件是 ${teacherEmail}。請評分、解釋錯誤答案、建議同儕學習小組，並將報告發送到我的電子郵件。`,
     },
     {
-      title: "📝 Analyze CSV Data",
-      prompt: `Please analyze this exam data:
+      title: "📝 分析 CSV 資料",
+      prompt: `請分析這些考試資料：
 
 Timestamp,Email,Student Name,Q1 (2+2),Q2 (Explain acceleration)
 2026-01-26 08:00:00,alice@student.edu,Alice,4,Acceleration is the rate of change of velocity
@@ -46,15 +87,15 @@ Timestamp,Email,Student Name,Q1 (2+2),Q2 (Explain acceleration)
 2026-01-26 08:02:00,carol@student.edu,Carol,4,velocity change over time
 2026-01-26 08:03:00,david@student.edu,David,5,speed
 
-The correct answers are:
+標準答案是：
 - Q1: 4
 - Q2: Acceleration is the rate of change of velocity over time
 
-My email is ${teacherEmail}. Please grade and create a full report.`,
+我的電子郵件是 ${teacherEmail}。請評分並建立完整報告。`,
     },
     {
-      title: "⚡ Quick Summary",
-      prompt: `Just give me a quick summary of class performance. My email is ${teacherEmail}.`,
+      title: "⚡ 快速摘要",
+      prompt: `請給我班級表現的快速摘要。我的電子郵件是 ${teacherEmail}。`,
     },
   ];
 
@@ -63,7 +104,7 @@ My email is ${teacherEmail}. Please grade and create a full report.`,
       {/* Copied toast */}
       {showCopiedToast && (
         <div className="fixed top-24 left-1/2 -translate-x-1/2 z-50 px-4 py-2 bg-green-500 text-white rounded-lg shadow-lg">
-          ✓ Prompt copied! Paste it in the chat.
+          ✓ 提示已複製！請在聊天中貼上。
         </div>
       )}
       
@@ -77,14 +118,28 @@ My email is ${teacherEmail}. Please grade and create a full report.`,
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
             </svg>
-            Back to Home
+            返回首頁
           </button>
           
           <div className="flex items-center gap-3">
-            <span className="text-sm text-gray-500">Connected as</span>
+            <span className="text-sm text-gray-500">已連接為</span>
             <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium">
               {teacherEmail}
             </span>
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-gray-500">模型：</span>
+              <select
+                value={selectedModel}
+                onChange={(e) => setSelectedModel(e.target.value)}
+                className="px-3 py-1 bg-white border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                {Object.entries(availableModels).map(([key, model]) => (
+                  <option key={key} value={key}>
+                    {model.name} {key === "gpt-4.1-mini" ? "(默認)" : ""} - {model.description}
+                  </option>
+                ))}
+              </select>
+            </div>
           </div>
         </div>
 
@@ -97,7 +152,7 @@ My email is ${teacherEmail}. Please grade and create a full report.`,
             {/* Example Prompts */}
             <div className="bg-white rounded-xl shadow-sm border p-4">
               <h3 className="text-sm font-semibold text-gray-800 mb-3">
-                Quick Start Prompts
+                快速開始提示
               </h3>
               <div className="space-y-2">
                 {examplePrompts.map((example, i) => (
@@ -110,7 +165,7 @@ My email is ${teacherEmail}. Please grade and create a full report.`,
                       {example.title}
                     </div>
                     <div className="text-xs text-gray-500">
-                      Click to copy
+                      點擊複製
                     </div>
                   </button>
                 ))}
@@ -120,20 +175,20 @@ My email is ${teacherEmail}. Please grade and create a full report.`,
             {/* Tips */}
             <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
               <h3 className="text-sm font-semibold text-gray-800 mb-2 flex items-center gap-2">
-                💡 Pro Tips
+                💡 專業提示
               </h3>
               <ul className="space-y-1.5 text-xs text-gray-600">
                 <li className="flex items-start gap-1.5">
                   <span className="text-green-500">✓</span>
-                  Include answer key for accuracy
+                  包含標準答案以提高準確度
                 </li>
                 <li className="flex items-start gap-1.5">
                   <span className="text-green-500">✓</span>
-                  Make Google Sheet public, or use CSV
+                  將 Google 試算表設為公開，或使用 CSV
                 </li>
                 <li className="flex items-start gap-1.5">
                   <span className="text-green-500">✓</span>
-                  Ask for email delivery
+                  要求以電子郵件發送報告
                 </li>
               </ul>
             </div>
@@ -153,15 +208,15 @@ My email is ${teacherEmail}. Please grade and create a full report.`,
                     </div>
                     <div>
                       <h2 className="text-lg font-semibold text-white">
-                        ClassLens Assistant
+                        ClassLens 助手
                       </h2>
                       <p className="text-sm text-white/70">
-                        Paste your exam data or Google Sheet URL below
+                        請在下方貼上您的考試資料或 Google 試算表網址
                       </p>
                     </div>
                   </div>
                   <span className="px-2 py-1 rounded-full bg-white/20 text-white text-xs">
-                    GPT-4.1-mini
+                    {availableModels[selectedModel]?.name || selectedModel}
                   </span>
                 </div>
               </div>

chatkit/frontend/src/components/Features.tsx

@@ -6,8 +6,8 @@ export function Features() {
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
         </svg>
       ),
-      title: "Automatic Grading",
-      description: "Grade multiple choice, numeric, and even open-ended questions with AI-powered accuracy.",
+      title: "自動評分",
+      description: "使用 AI 精準評分選擇題、數值題，甚至開放式問題。",
       color: "var(--color-primary)",
     },
     {
@@ -16,8 +16,8 @@ export function Features() {
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
         </svg>
       ),
-      title: "Smart Explanations",
-      description: "Get personalized explanations for each wrong answer, helping students understand their mistakes.",
+      title: "智能解釋",
+      description: "為每個錯誤答案提供個人化解釋，幫助學生理解錯誤。",
       color: "var(--color-accent)",
     },
     {
@@ -26,8 +26,8 @@ export function Features() {
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
         </svg>
       ),
-      title: "Peer Learning Groups",
-      description: "AI-suggested student groupings pair high performers with those who need help on specific topics.",
+      title: "同儕學習小組",
+      description: "AI 建議的學生分組，將表現優秀的學生與需要特定主題幫助的學生配對。",
       color: "var(--color-success)",
     },
     {
@@ -36,8 +36,8 @@ export function Features() {
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
         </svg>
       ),
-      title: "Email Reports",
-      description: "Receive beautiful, formatted reports directly in your inbox, ready to share with students or parents.",
+      title: "電子郵件報告",
+      description: "直接在收件匣中接收精美的格式化報告，隨時可與學生或家長分享。",
       color: "var(--color-warning)",
     },
     {
@@ -46,8 +46,8 @@ export function Features() {
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
         </svg>
       ),
-      title: "Privacy First",
-      description: "Student data is processed securely. We only access what you share and never store sensitive information.",
+      title: "隱私優先",
+      description: "學生資料安全處理。我們只存取您分享的內容，絕不儲存敏感資訊。",
       color: "var(--color-primary-light)",
     },
     {
@@ -56,8 +56,8 @@ export function Features() {
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
         </svg>
       ),
-      title: "Instant Analysis",
-      description: "Get comprehensive insights in seconds, not hours. More time teaching, less time grading.",
+      title: "即時分析",
+      description: "幾秒內獲得全面洞察，而非數小時。更多時間教學，更少時間評分。",
       color: "var(--color-accent-light)",
     },
   ];
@@ -67,12 +67,11 @@ export function Features() {
       <div className="max-w-6xl mx-auto">
         <div className="text-center mb-16">
           <h2 className="font-display text-4xl font-bold text-[var(--color-text)] mb-4">
-            Everything You Need to
-            <span className="text-gradient"> Understand Your Students</span>
+            了解您的學生所需的一切
+            <span className="text-gradient"> 功能</span>
           </h2>
           <p className="text-lg text-[var(--color-text-muted)] max-w-2xl mx-auto">
-            ClassLens combines the power of AI with thoughtful education practices
-            to give you actionable insights.
+            ClassLens 結合 AI 的力量與深思熟慮的教育實踐，為您提供可操作的洞察。
           </p>
         </div>
 

chatkit/frontend/src/components/Hero.tsx

@@ -16,19 +16,18 @@ export function Hero({ isAuthenticated, onStartAnalysis }: HeroProps) {
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
             </svg>
-            Powered by OpenAI ChatKit
+            由 OpenAI ChatKit 提供技術支援
           </span>
         </div>
         
         <h1 className="font-display text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-6 opacity-0 animate-fade-in-up stagger-2">
-          <span className="text-[var(--color-text)]">Transform Exams into</span>
+          <span className="text-[var(--color-text)]">將考試轉化為</span>
           <br />
-          <span className="text-gradient">Teaching Insights</span>
+          <span className="text-gradient">教學洞察</span>
         </h1>
         
         <p className="text-xl text-[var(--color-text-muted)] max-w-2xl mx-auto mb-10 opacity-0 animate-fade-in-up stagger-3">
-          Upload your Google Form responses and let AI analyze student performance, 
-          generate personalized explanations, and create peer learning groups—all in seconds.
+          上傳您的 Google 表單回應，讓 AI 分析學生表現、生成個人化解釋並建立同儕學習小組——只需幾秒鐘。
         </p>
         
         <div className="flex flex-col sm:flex-row items-center justify-center gap-4 opacity-0 animate-fade-in-up stagger-4">
@@ -37,7 +36,7 @@ export function Hero({ isAuthenticated, onStartAnalysis }: HeroProps) {
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
               </svg>
-              Start Analyzing
+              開始分析
             </button>
           ) : (
             <a href="#connect" className="btn btn-primary text-lg px-8 py-4">
@@ -47,20 +46,20 @@ export function Hero({ isAuthenticated, onStartAnalysis }: HeroProps) {
                 <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                 <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
               </svg>
-              Connect Google Account
+              連接 Google 帳號
             </a>
           )}
           <a href="#features" className="btn btn-outline text-lg px-8 py-4">
-            See How It Works
+            查看使用方式
           </a>
         </div>
         
         {/* Stats */}
         <div className="mt-20 grid grid-cols-3 gap-8 max-w-2xl mx-auto opacity-0 animate-fade-in-up stagger-5">
           {[
-            { value: "5min", label: "Average Analysis Time" },
-            { value: "98%", label: "Teacher Satisfaction" },
-            { value: "40+", label: "Question Types Supported" },
+            { value: "5分鐘", label: "平均分析時間" },
+            { value: "98%", label: "教師滿意度" },
+            { value: "40+", label: "支援的題型" },
           ].map((stat, i) => (
             <div key={i} className="text-center">
               <div className="font-display text-3xl font-bold text-[var(--color-primary)]">

chatkit/frontend/src/index.css

@@ -291,6 +291,20 @@ h1, h2, h3, h4, h5, h6 {
   background-clip: text;
 }
 
+/* ChatKit customization - Force Traditional Chinese */
+.chatkit-container,
+[data-chatkit-composer] {
+  /* Force zh-TW locale */
+}
+
+/* Override ChatKit placeholder text to Traditional Chinese */
+[data-chatkit-composer] textarea::placeholder,
+[data-chatkit-composer] input::placeholder,
+.chatkit-composer textarea::placeholder,
+.chatkit-composer input::placeholder {
+  /* This may not work as ChatKit uses iframe */
+}
+
 /* ChatKit customization */
 .chatkit-container {
   --ck-color-primary: var(--color-primary);

chatkit/run-local.sh

@@ -0,0 +1,76 @@
+#!/bin/bash
+# Run ClassLens locally (both backend and frontend)
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+cd "$SCRIPT_DIR"
+
+echo "🚀 Starting ClassLens locally..."
+echo ""
+
+# Check for .env file
+if [ ! -f "../.env" ]; then
+    echo "⚠️  No .env file found. Please create one from env.example"
+    exit 1
+fi
+
+# Function to cleanup on exit
+cleanup() {
+    echo ""
+    echo "🛑 Stopping servers..."
+    pkill -f "uvicorn app.main" 2>/dev/null || true
+    pkill -f "vite" 2>/dev/null || true
+    exit 0
+}
+
+trap cleanup SIGINT SIGTERM
+
+# Start backend
+echo "📦 Starting backend on http://127.0.0.1:8000"
+cd backend
+if [ ! -d ".venv" ]; then
+    echo "Creating Python virtual environment..."
+    python3 -m venv .venv
+fi
+source .venv/bin/activate
+pip install -q -e . > /dev/null 2>&1
+
+# Load environment variables
+export $(grep -v '^#' ../.env | xargs)
+
+# Start backend in background
+uvicorn app.main:app --host 127.0.0.1 --port 8000 --reload > /tmp/classlens-backend.log 2>&1 &
+BACKEND_PID=$!
+
+# Wait a bit for backend to start
+sleep 2
+
+# Start frontend
+echo "🎨 Starting frontend on http://localhost:3000"
+cd ../frontend
+
+# Install frontend dependencies if needed
+if [ ! -d "node_modules" ]; then
+    echo "Installing frontend dependencies..."
+    npm install
+fi
+
+# Start frontend
+npm run dev > /tmp/classlens-frontend.log 2>&1 &
+FRONTEND_PID=$!
+
+echo ""
+echo "✅ ClassLens is running!"
+echo ""
+echo "   Backend:  http://127.0.0.1:8000"
+echo "   Frontend: http://localhost:3000"
+echo ""
+echo "   Backend logs:  tail -f /tmp/classlens-backend.log"
+echo "   Frontend logs: tail -f /tmp/classlens-frontend.log"
+echo ""
+echo "Press Ctrl+C to stop both servers"
+echo ""
+
+# Wait for both processes
+wait $BACKEND_PID $FRONTEND_PID