Upload 10 files

src/services/gemini.js

@@ -0,0 +1,169 @@
+
+import { GoogleGenerativeAI } from "https://esm.run/@google/generative-ai";
+import { getPeerPrompts, db } from "./classroom.js";
+import { doc, getDoc } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
+
+let genAI = null;
+let model = null;
+let apiKey = null;
+
+// System Instructions for the Socratic Tutor
+const TUTOR_INSTRUCTION = `
+You are a Socratic Teaching Assistant for a "Prompt Engineering" class. 
+Your goal is to help students refine their prompts WITHOUT giving them the answer.
+The student is trying to write a prompt to solve a specific challenge.
+You will be provided with:
+1. The Challenge Description (The Goal).
+2. 3 Successful Examples (Few-Shot Context) from other students.
+3. The Student's Current Attempt.
+
+Rules:
+- NEVER reveal the direct solution or code.
+- If the input is lazy (e.g., "123", "help"), be sassy but helpful.
+- If the input is a direct copy of the description, point it out.
+- Use the Socratic method: Ask a guiding question to help them notice their missing parameter or logic.
+- Keep responses short (under 50 words) and encouraging.
+- Tone: Friendly, slightly "Cyberpunk" or "Gamer" vibe (matching the Vibe Coding aesthetic).
+`;
+
+// System Instructions for the Dashboard Analyst
+const ANALYST_INSTRUCTION = `
+You are an expert Prompt Engineer and Pedagogy Analyst.
+Your task is to analyze a batch of student prompts for a specific coding challenge.
+Categorize each prompt into ONE of these categories:
+1. "rough": Logic is correct/creative, but syntax or formatting is messy. (Rough Diamond)
+2. "precise": Clean, efficient, and accurate. (Pixel Perfect)
+3. "gentle": Uses polite language ("Please", "Thank you") or positive vibes. (Gentle Soul)
+4. "creative": Unconventional approach or interesting parameter usage. (Wild Card)
+5. "spam": Nonsense, random characters ("asdf"), or irrelevant text.
+6. "parrot": Direct copy-paste of the challenge description or problem statement.
+
+Return ONLY a JSON object mapping category names to arrays of Student IDs.
+Example: { "rough": ["id1"], "precise": ["id2", "id5"], "spam": ["id3"] ... }
+`;
+
+/**
+ * Initialize Gemini with API Key
+ * @param {string} key 
+ */
+export async function initGemini(key) {
+    if (!key) return false;
+    apiKey = key;
+    try {
+        genAI = new GoogleGenerativeAI(apiKey);
+        model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+        return true;
+    } catch (e) {
+        console.error("Gemini Init Failed", e);
+        return false;
+    }
+}
+
+/**
+ * Detects if a prompt is potential spam/low effort locally first
+ * @param {string} prompt 
+ * @param {string} problemDesc 
+ */
+export function quickSpamCheck(prompt, problemDesc) {
+    if (!prompt) return true;
+    const p = prompt.trim();
+    if (p.length < 3) return true; // Too short
+
+    // Check for repetitive chars (e.g., "aaaaa")
+    if (/^(.)\1+$/.test(p)) return true;
+
+    // Parrot Check (Simple similarity)
+    if (problemDesc && p.includes(problemDesc.substring(0, 20))) {
+        // If they copied the first 20 chars of description, likely parrot
+        return 'parrot';
+    }
+
+    return false;
+}
+
+/**
+ * Ask the AI Tutor for help (Rubber Duck)
+ * @param {string} challengeDesc 
+ * @param {string} studentPrompt 
+ * @param {string} roomCode 
+ * @param {string} challengeId 
+ */
+export async function askTutor(challengeDesc, studentPrompt, roomCode, challengeId) {
+    if (!model) throw new Error("AI not initialized");
+
+    const spamStatus = quickSpamCheck(studentPrompt, challengeDesc);
+    if (spamStatus === true) return "Duck says: Quack? (Too short or empty!)";
+    if (spamStatus === 'parrot') return "Duck says: You're just repeating the question! Try telling me WHAT you want to change.";
+
+    // 1. Fetch Context (Few-Shot)
+    // We want 'Starred' examples first, then random successful ones.
+    let peers = await getPeerPrompts(roomCode, challengeId);
+
+    // Filter for instructor stars (assuming 'isStarred' or 'likes' > threshold)
+    // Since 'isStarred' isn't in DB yet, we use 'likes' as proxy for quality or randomness.
+    // Ideally, we add a 'starred' field in Instructor Dashboard later.
+    // For now, let's prioritize high likes.
+    peers.sort((a, b) => b.likes - a.likes);
+
+    // Take top 3 as examples
+    const examples = peers.slice(0, 3).map(p => `- Example: "${p.prompt}"`).join('\n');
+
+    const prompt = `
+${TUTOR_INSTRUCTION}
+
+[Context - Challenge Description]
+${challengeDesc}
+
+[Context - Successful Classmate Examples (For AI understanding only, DO NOT LEAK these to student)]
+${examples || "No examples available yet."}
+
+[Student Input]
+"${studentPrompt}"
+
+[Your Response]
+`;
+
+    try {
+        const result = await model.generateContent(prompt);
+        return result.response.text();
+    } catch (e) {
+        console.error("AI Request Failed", e);
+        return "Duck is sleeping... zzz (API Error)";
+    }
+}
+
+/**
+ * Batch evaluate prompts for the Instructor Dashboard
+ * @param {Array} submissions - Array of { userId, prompt, nickname }
+ * @param {string} challengeDesc 
+ */
+export async function evaluatePrompts(submissions, challengeDesc) {
+    if (!model) throw new Error("AI not initialized");
+    if (!submissions || submissions.length === 0) return {};
+
+    // Prepare batch text
+    const entries = submissions.map((s, i) => `ID_${s.userId}: "${s.prompt.replace(/\n/g, ' ')}"`).join('\n');
+
+    const prompt = `
+${ANALYST_INSTRUCTION}
+
+[Challenge Description]
+${challengeDesc}
+
+[Student Submissions]
+${entries}
+
+[Output JSON]
+`;
+
+    try {
+        const result = await model.generateContent({
+            contents: [{ role: "user", parts: [{ text: prompt }] }],
+            generationConfig: { responseMimeType: "application/json" }
+        });
+        return JSON.parse(result.response.text());
+    } catch (e) {
+        console.error("AI Evaluation Failed", e);
+        return {};
+    }
+}

src/views/StudentView.js

@@ -1,9 +1,11 @@
-import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead, getClassSize, updateUserMonster, getUser, subscribeToUserProgress } from "../services/classroom.js";
+import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead, getClassSize, updateUserMonster, getUser, subscribeToUserProgress, db } from "../services/classroom.js";
 import { generateMonsterSVG, getNextMonster, MONSTER_STAGES, MONSTER_DEFS } from "../utils/monsterUtils.js";
+import { doc, getDoc } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
 
 
 // Cache challenges locally
 let cachedChallenges = [];
+let roomAiSettings = { active: false, key: null };
 
 function renderTaskCard(c, userProgress) {
     const p = userProgress[c.id] || {};
@@ -79,10 +81,30 @@ function renderTaskCard(c, userProgress) {
                                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-cyan-500 focus:outline-none transition-colors text-sm"
                                 placeholder="貼上您的修復提示詞..."></textarea>
                             
-                            <div id="error-${c.id}" class="text-red-500 text-xs hidden">提示詞太短囉，請多寫一點細節！</div>
+                            <!-- AI Tutor / Error Area -->
+                            <div class="flex justify-between items-start">
+                                <div id="error-${c.id}" class="text-red-500 text-xs hidden mt-1">提示詞太短囉...</div>
+                                
+                                ${roomAiSettings.active ? `
+                                <button onclick="window.callAiTutor('${c.id}')" id="btn-tutor-${c.id}"
+                                    class="text-xs bg-gray-800 hover:bg-gray-700 text-cyan-400 border border-gray-600 px-3 py-1 rounded-full flex items-center space-x-1 transition-colors self-start mt-1">
+                                    <span>🐥 呼叫 AI 橡皮鴨</span>
+                                </button>
+                                ` : ''}
+                            </div>
+                            
+                            <!-- AI Response Bubble -->
+                            <div id="ai-response-${c.id}" class="hidden mt-2 mb-2 relative group">
+                                <div class="absolute -top-1 left-4 w-2 h-2 bg-gray-700 transform rotate-45"></div>
+                                <div class="bg-gray-800 border border-cyan-500/30 rounded-lg p-3 text-cyan-300 text-sm font-mono shadow-lg flex items-start space-x-2">
+                                    <span class="text-lg">🤖</span>
+                                    <div class="flex-1 typing-effect" id="ai-text-${c.id}">...</div>
+                                    <button onclick="document.getElementById('ai-response-${c.id}').classList.add('hidden')" class="text-gray-500 hover:text-white">×</button>
+                                </div>
+                            </div>
 
                             <button onclick="window.submitLevel('${c.id}')"
-                                class="w-full bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white px-6 py-2 rounded-lg font-bold transition-transform active:scale-95 shadow-lg shadow-cyan-900/50">
+                                class="w-full bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white px-6 py-2 rounded-lg font-bold transition-transform active:scale-95 shadow-lg shadow-cyan-900/50 mt-2">
                                 提交解答
                             </button>
                         </div>