經過了前面 26 天的漫長打磨，從一開始在 Google AI Studio 嘗試調整 System Instruction、用 Google Stitch 刻出第一版介面，到後來的 Structured Output、盲點診斷、Gemini Vision 多模態辨識、RAG 教材限制、Firestore 學習歷程記錄，一路走到動態難度調整（Adaptive Learning）與情緒崩潰攔截（Emotional Gate）。
今天，我們終於迎來了整個 30 天系列最激動人心的時刻——Full Demo 實戰全貌展示！
這不是一個只會跳出罐頭文字、死板回覆的 Chatbot，而是一個真正具備「教學靈魂」、懂得察言觀色、會用蘇格拉底式引導、甚至能接住學生挫折情緒的個人化 AI 虛擬助教：Professor Spark。
接下來，我們將透過 6 張核心系統截圖與真實對話場景，帶領大家完整走一遍這 30 天心血結晶的實際運作全貌。
為了讓讀者能夠直觀感受到這套系統的溫度與技術深度，我們梳理了以下 6 個關鍵操作場景。這不只是畫面的展示，更是這幾週技術架構收網的時刻。
Prompt 與 Schema 的精準控制：AI 絕對不能變成學生抄作業、寫考卷的作弊工具。透過後端強制的 Structured Output，AI 在收到「求答案」的請求時，會自動切換為 give_hint 策略，用問題回答問題，逼迫學生動腦思考。
在教學介面上，我們刻意追求簡潔，不讓複雜的數值計分干擾學生的沈浸感。當學生點選正確的公式推導（如「電流等於電壓除以電阻」）後，讀者可以觀察到兩個層面的變化：
currentLevel: 2，並將下一次 Gemini 提問的認知等級參數同步提升！json
// 後端 /api/chat 實際回傳之狀態物件 (State Object)
{
"success":true,
"state":{
"currentLevel":2,// 認知難度晉升至 Level 2
"consecutiveCorrects":1,// 連續答對計數 +1
"consecutiveMistakes":0
},
"diagnostic":{
"is_correct":true,
"next_pedagogical_action":"increase_difficulty"
}
}
Emotional Gate 機制：教育不只是冰冷的知識傳遞。如果學生已經陷入學習挫折（Frustration），再高深的演算法也無濟于事。我們在 API 進入點加入了情緒辨識閘道，當偵測到放棄或焦慮字眼時，會強制介入同理心 Prompt 分支，把對話拉回安全、溫暖的陪伴軌道。
Gemini Vision 多模態辨識與引導能力：學生常常無法用文字精準描述自己卡在哪裡（尤其是數學算式或電路圖）。透過 Gemini Vision API，系統能夠直接解析學生上傳的手寫草稿照片，抓出計算盲點，而不是籠統地叫學生重算。
為了讓這套系統順利運作，我們的 Express 後端在 Day 27 迎來了最終的整合。以下是接收前端請求、跑過 Emotional Gate 與 Adaptive State 檢查的核心路由邏輯：
JavaScript
// server.js - AI Virtual Tutor Core Pipeline
const express = require('express');
const { GoogleGenAI } = require('@google/genai');
const admin = require('firebase-admin');
const app = express();
app.use(express.json());
const ai = new GoogleGenAI(); // 自動讀取環境變數 GEMINI_API_KEY
// 模擬 Emotional Gate 檢測與教學策略分派
function evaluateStudentState(userInput, currentLevel){
const frustrationKeywords = ['太難', '聽不懂', '不想學', '放棄', '不會啦', '好煩'];
const isFrustrated = frustrationKeywords.some(keyword => userInput.includes(keyword));
if (isFrustrated) {
return {
mode: 'EMOTIONAL_GATE',
action: 'empathy_and_downgrade',
targetLevel: Math.max(1, currentLevel - 1)
};
}
return {
mode: 'SOCRATIC_GUIDANCE',
action: 'normal_advance',
targetLevel: currentLevel
};
}
app.post('/api/tutor/chat', async (req, res) => {
try {
const { studentId, message, currentLevel = 1, imagePart } = req.body;
// 1. 執行情緒與狀態閘道檢查
const stateCheck = evaluateStudentState(message, currentLevel);
let systemInstruction = `你是 Professor Spark，一位溫暖、擅長使用蘇格拉底式引導的 K-12 AI 虛擬助教。
核心原則：
1. 絕不直接給出完整答案。
2. 每次只引導一個觀念，並提供 3 個引導選項。`;
if (stateCheck.mode === 'EMOTIONAL_GATE') {
systemInstruction += `\n【緊急狀態】學生目前表現出強烈的挫折與放棄情緒。請立刻放下題目，用極具同理心與安撫的語氣鼓勵學生，不要給予壓力，並將難度重置。`;
}
// 2. 準備 Gemini 呼叫內容
const contents = [message];
if (imagePart) {
contents.push(imagePart); // 支援 Gemini Vision 多模態輸入
}
// 3. 呼叫 Gemini 模型
const response = await ai.models.generateContent({
model: 'gemini-2.5-flash', // 依據實際可用且高效的模型
contents: contents,
config: {
systemInstruction: systemInstruction,
temperature: 0.7,
}
});
res.json({
reply: response.text,
newLevel: stateCheck.targetLevel,
systemMode: stateCheck.mode
});
} catch (error) {
console.error('Tutor API Error:', error);
res.status(500).json({ error: 'AI 助教目前正在思考中，請稍後再試。' });
}
});
app.listen(3001, () => {
console.log('AI Virtual Tutor backend running on http://localhost:3001');
});
回顧這 30 天的開發歷程，我最大的收穫不是學會了多少 API 參數，而是重新定義了教育科技的價值。
傳統的 AI Chatbot 追求的是「快問快答」，學生問什麼，它就吐出幾千字完美的解答。但這對學習而言往往是災難——學生複製了答案，卻交出了思考的權利。
而我們透過這 30 天打造的 AI Virtual Tutor System，透過 System Instruction 約束、Emotional Gate 攔截、Vision 手寫辨識 與 Adaptive Learning 狀態機，讓 AI 學會了人類優秀教師最珍貴的特質：踩煞車的智慧、同理心的溫暖，以及不急著給答案的堅持。
明天將迎來倒數第三天——Day 28：【Open Source】把 30 天做出的 AI Tutor 開源！我們會將把這套完整的專案打包，整理好 README 與安全規範，放在Github上面公開。
iThome鐵人賽
看影片追技術