[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_203":204,"_205":206},"routes/_app.x.$handle.$name",{"_97":96,"_32":46,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",12,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/app.js","latestPath","fileId","2aa7eb48-3307-11f0-9743-569c3dd06744","name","app.js","fileType","script","content","// Import Three.js from the global scope\nconst THREE = window.THREE;\n\n// Initialize project info\nconst projectInfo = window.__PROJECT_INFO__ || { url: \"#\" };\ndocument.getElementById(\"view-source\").href = projectInfo.url;\n\n// DOM Elements\nconst questionForm = document.getElementById(\"question-form\");\nconst questionInput = document.getElementById(\"question-input\");\nconst chatMessages = document.getElementById(\"chat-messages\");\nconst thinkingIndicator = document.getElementById(\"thinking\");\nconst avatarContainer = document.getElementById(\"avatar-container\");\nconst avatarLoading = document.getElementById(\"avatar-loading\");\n\n// 3D Scene Variables\nlet scene, camera, renderer, model, mixer, clock;\nlet isAvatarTalking = false;\nlet animationTimeout;\nlet facialFeatures = {}; // Store facial features for animation\nlet headModel, eyesMaterial;\n\n// Initialize 3D Scene\ninitScene();\n\n// Event Listeners\nquestionForm.addEventListener(\"submit\", handleQuestionSubmit);\n\n// Functions\nasync function handleQuestionSubmit(e) {\n e.preventDefault();\n \n const question = questionInput.value.trim();\n if (!question) return;\n \n // Add user message to chat\n addMessageToChat(\"user\", question);\n \n // Clear input\n questionInput.value = \"\";\n \n // Show thinking indicator\n thinkingIndicator.classList.remove(\"hidden\");\n \n try {\n // Send question to API\n const response = await fetch(\"/api/ask\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ question }),\n });\n \n if (!response.ok) {\n throw new Error(\"Failed to get response\");\n }\n \n const data = await response.json();\n \n // Hide thinking indicator\n thinkingIndicator.classList.add(\"hidden\");\n \n // Add AI response to chat\n addMessageToChat(\"teacher\", data.answer);\n \n // Animate the avatar talking\n animateAvatarTalking();\n } catch (error) {\n console.error(\"Error:\", error);\n thinkingIndicator.classList.add(\"hidden\");\n addMessageToChat(\"teacher\", \"Sorry, I encountered an error while processing your question. Please try again.\");\n }\n}\n\nfunction addMessageToChat(role, text) {\n const messageDiv = document.createElement(\"div\");\n messageDiv.className = `chat-message ${role}`;\n \n const avatarEmoji = role === \"teacher\" ? \"👩‍🏫\" : \"👤\";\n \n messageDiv.innerHTML = `\n

\n ${avatarEmoji}\n

${text}

\n ${avatarEmoji}\n

${text}

\n `;\n \n chatMessages.appendChild(messageDiv);\n \n // Scroll to bottom\n chatMessages.scrollTop = chatMessages.scrollHeight;\n}\n\nfunction initScene() {\n // Create scene with improved background\n scene = new THREE.Scene();\n scene.background = new THREE.Color(0xe8f4f8); // Softer blue-tinted background\n \n // Create camera with better positioning\n camera = new THREE.PerspectiveCamera(\n 40, // Narrower FOV for less distortion\n avatarContainer.clientWidth / avatarContainer.clientHeight,\n 0.1,\n 1000\n );\n camera.position.set(0, 1.6, 3.5); // Better framing of the head\n camera.lookAt(0, 1.2, 0);\n \n // Create renderer with enhanced settings\n renderer = new THREE.WebGLRenderer({ \n antialias: true,\n alpha: true,\n powerPreference: \"high-performance\"\n });\n renderer.setSize(avatarContainer.clientWidth, avatarContainer.clientHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Cap pixel ratio for performance\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows\n renderer.outputEncoding = THREE.sRGBEncoding; // Better color reproduction\n renderer.toneMapping = THREE.ACESFilmicToneMapping; // Cinematic tone mapping\n renderer.toneMappingExposure = 1.2; // Slightly brighter\n \n // Remove loading indicator and append renderer\n avatarLoading.remove();\n avatarContainer.appendChild(renderer.domElement);\n \n // Enhanced lighting setup for more realistic appearance\n // Ambient light for base illumination\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);\n scene.add(ambientLight);\n \n // Main key light (simulates window light)\n const keyLight = new THREE.DirectionalLight(0xffffeb, 1.2); // Slightly warm\n keyLight.position.set(2, 2, 2);\n keyLight.castShadow = true;\n keyLight.shadow.mapSize.width = 1024;\n keyLight.shadow.mapSize.height = 1024;\n keyLight.shadow.camera.near = 0.5;\n keyLight.shadow.camera.far = 10;\n keyLight.shadow.bias = -0.0001;\n scene.add(keyLight);\n \n // Fill light (softer light from opposite side)\n const fillLight = new THREE.DirectionalLight(0xe6f0ff, 0.7); // Slightly cool\n fillLight.position.set(-2, 1, 1);\n scene.add(fillLight);\n \n // Rim light (edge highlight from behind)\n const rimLight = new THREE.DirectionalLight(0xffffff, 0.6);\n rimLight.position.set(0, 2, -3);\n scene.add(rimLight);\n \n // Create realistic avatar\n createRealisticAvatar();\n \n // Initialize animation clock\n clock = new THREE.Clock();\n \n // Start animation loop\n animate();\n \n // Handle window resize\n window.addEventListener(\"resize\", onWindowResize);\n}\n\nfunction createRealisticAvatar() {\n // Create a group to hold the avatar parts\n model = new THREE.Group();\n \n // Create a more realistic head using subdivision\n const headGeometry = new THREE.SphereGeometry(1, 64, 64); // Higher poly count\n \n // Create realistic skin material with subsurface scattering effect\n const headMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xffe0c0, // Base skin tone\n roughness: 0.3, // Slightly glossy skin\n metalness: 0.0, // Non-metallic\n clearcoat: 0.5, // Subtle clearcoat for realism\n clearcoatRoughness: 0.4,\n envMapIntensity: 0.3, // Subtle environment reflections\n sheen: 0.2, // Subtle sheen\n sheenRoughness: 0.5,\n sheenColor: 0xffe0c0, // Matching sheen color\n transmission: 0.05, // Slight translucency for skin\n ior: 1.4 // Index of refraction for skin\n });\n \n headModel = new THREE.Mesh(headGeometry, headMaterial);\n // Slightly elongate the head for more realistic proportions\n headModel.scale.set(0.9, 1.05, 0.9);\n model.add(headModel);\n \n // Create more realistic eyes\n const eyeGeometry = new THREE.SphereGeometry(0.15, 32, 32);\n \n // Create eye white material\n const eyeWhiteMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xffffff,\n roughness: 0.1,\n metalness: 0.0,\n clearcoat: 0.8,\n transmission: 0.1,\n ior: 1.4\n });\n \n // Create iris material with depth\n eyesMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0x3a8ab4, // Blue eyes\n roughness: 0.1,\n metalness: 0.1,\n clearcoat: 0.9,\n clearcoatRoughness: 0.1,\n transmission: 0.05,\n ior: 1.4\n });\n \n // Create pupil material (black)\n const pupilMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });\n \n // Left eye group\n const leftEyeGroup = new THREE.Group();\n leftEyeGroup.position.set(-0.3, 0.15, 0.85);\n \n // Eye white\n const leftEyeWhite = new THREE.Mesh(eyeGeometry, eyeWhiteMaterial);\n leftEyeGroup.add(leftEyeWhite);\n \n // Iris (slightly smaller and protruding)\n const leftIrisGeometry = new THREE.SphereGeometry(0.08, 32, 32);\n const leftIris = new THREE.Mesh(leftIrisGeometry, eyesMaterial);\n leftIris.position.z = 0.1;\n leftIris.name = \"leftIris\";\n leftEyeGroup.add(leftIris);\n \n // Pupil (even smaller and more protruding)\n const leftPupilGeometry = new THREE.SphereGeometry(0.04, 16, 16);\n const leftPupil = new THREE.Mesh(leftPupilGeometry, pupilMaterial);\n leftPupil.position.z = 0.12;\n leftPupil.name = \"leftPupil\";\n leftEyeGroup.add(leftPupil);\n \n // Right eye (same structure)\n const rightEyeGroup = new THREE.Group();\n rightEyeGroup.position.set(0.3, 0.15, 0.85);\n \n const rightEyeWhite = new THREE.Mesh(eyeGeometry, eyeWhiteMaterial);\n rightEyeGroup.add(rightEyeWhite);\n \n const rightIrisGeometry = new THREE.SphereGeometry(0.08, 32, 32);\n const rightIris = new THREE.Mesh(rightIrisGeometry, eyesMaterial);\n rightIris.position.z = 0.1;\n rightIris.name = \"rightIris\";\n rightEyeGroup.add(rightIris);\n \n const rightPupilGeometry = new THREE.SphereGeometry(0.04, 16, 16);\n const rightPupil = new THREE.Mesh(rightPupilGeometry, pupilMaterial);\n rightPupil.position.z = 0.12;\n rightPupil.name = \"rightPupil\";\n rightEyeGroup.add(rightPupil);\n \n // Add eyes to model\n model.add(leftEyeGroup);\n model.add(rightEyeGroup);\n \n // Store eye references for animation\n facialFeatures.leftEye = leftEyeGroup;\n facialFeatures.rightEye = rightEyeGroup;\n facialFeatures.leftIris = leftIris;\n facialFeatures.rightIris = rightIris;\n facialFeatures.leftPupil = leftPupil;\n facialFeatures.rightPupil = rightPupil;\n \n // Create realistic eyebrows\n const leftEyebrowGeometry = new THREE.BoxGeometry(0.25, 0.05, 0.05);\n const eyebrowMaterial = new THREE.MeshStandardMaterial({ \n color: 0x5a3825, // Dark brown\n roughness: 1.0\n });\n \n const leftEyebrow = new THREE.Mesh(leftEyebrowGeometry, eyebrowMaterial);\n leftEyebrow.position.set(-0.3, 0.35, 0.85);\n leftEyebrow.rotation.z = -0.1; // Slight angle\n leftEyebrow.name = \"leftEyebrow\";\n model.add(leftEyebrow);\n \n const rightEyebrowGeometry = new THREE.BoxGeometry(0.25, 0.05, 0.05);\n const rightEyebrow = new THREE.Mesh(rightEyebrowGeometry, eyebrowMaterial);\n rightEyebrow.position.set(0.3, 0.35, 0.85);\n rightEyebrow.rotation.z = 0.1; // Slight angle\n rightEyebrow.name = \"rightEyebrow\";\n model.add(rightEyebrow);\n \n facialFeatures.leftEyebrow = leftEyebrow;\n facialFeatures.rightEyebrow = rightEyebrow;\n \n // Create a more realistic mouth with lips\n const lipMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xd5756c, // Natural lip color\n roughness: 0.3,\n metalness: 0.0,\n clearcoat: 0.7,\n transmission: 0.1\n });\n \n // Upper lip\n const upperLipGeometry = new THREE.TorusGeometry(0.2, 0.05, 16, 32, Math.PI);\n const upperLip = new THREE.Mesh(upperLipGeometry, lipMaterial);\n upperLip.rotation.x = Math.PI;\n upperLip.position.set(0, -0.4, 0.9);\n upperLip.name = \"upperLip\";\n model.add(upperLip);\n \n // Lower lip\n const lowerLipGeometry = new THREE.TorusGeometry(0.2, 0.05, 16, 32, Math.PI);\n const lowerLip = new THREE.Mesh(lowerLipGeometry, lipMaterial);\n lowerLip.position.set(0, -0.5, 0.9);\n lowerLip.name = \"lowerLip\";\n model.add(lowerLip);\n \n facialFeatures.upperLip = upperLip;\n facialFeatures.lowerLip = lowerLip;\n \n // Create a nose\n const noseBaseGeometry = new THREE.SphereGeometry(0.12, 16, 16);\n const noseMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xffdbbc, // Slightly darker than skin\n roughness: 0.4,\n metalness: 0.0,\n clearcoat: 0.3\n });\n \n const noseBase = new THREE.Mesh(noseBaseGeometry, noseMaterial);\n noseBase.position.set(0, -0.1, 1);\n noseBase.scale.set(1, 1.1, 1);\n model.add(noseBase);\n \n // Nose bridge\n const noseBridgeGeometry = new THREE.BoxGeometry(0.08, 0.2, 0.1);\n const noseBridge = new THREE.Mesh(noseBridgeGeometry, noseMaterial);\n noseBridge.position.set(0, 0.05, 0.95);\n model.add(noseBridge);\n \n // Add glasses with more realistic materials\n const glassesFrameMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0x222222,\n roughness: 0.2,\n metalness: 0.8,\n clearcoat: 0.9\n });\n \n const glassLensMaterial = new THREE.MeshPhysicalMaterial({\n color: 0xffffff,\n roughness: 0.1,\n metalness: 0.0,\n transmission: 0.9, // Highly transparent\n opacity: 0.2,\n transparent: true,\n ior: 1.5 // Glass IOR\n });\n \n // Left glasses frame\n const leftGlassesFrameGeometry = new THREE.TorusGeometry(0.2, 0.02, 16, 32, Math.PI * 2);\n const leftGlassesFrame = new THREE.Mesh(leftGlassesFrameGeometry, glassesFrameMaterial);\n leftGlassesFrame.position.set(-0.3, 0.15, 0.92);\n leftGlassesFrame.rotation.x = Math.PI / 2;\n model.add(leftGlassesFrame);\n \n // Left glasses lens\n const leftLensGeometry = new THREE.CircleGeometry(0.19, 32);\n const leftLens = new THREE.Mesh(leftLensGeometry, glassLensMaterial);\n leftLens.position.set(-0.3, 0.15, 0.91);\n leftLens.rotation.x = Math.PI / 2;\n model.add(leftLens);\n \n // Right glasses frame\n const rightGlassesFrameGeometry = new THREE.TorusGeometry(0.2, 0.02, 16, 32, Math.PI * 2);\n const rightGlassesFrame = new THREE.Mesh(rightGlassesFrameGeometry, glassesFrameMaterial);\n rightGlassesFrame.position.set(0.3, 0.15, 0.92);\n rightGlassesFrame.rotation.x = Math.PI / 2;\n model.add(rightGlassesFrame);\n \n // Right glasses lens\n const rightLensGeometry = new THREE.CircleGeometry(0.19, 32);\n const rightLens = new THREE.Mesh(rightLensGeometry, glassLensMaterial);\n rightLens.position.set(0.3, 0.15, 0.91);\n rightLens.rotation.x = Math.PI / 2;\n model.add(rightLens);\n \n // Glasses bridge\n const bridgeGeometry = new THREE.BoxGeometry(0.3, 0.02, 0.02);\n const bridge = new THREE.Mesh(bridgeGeometry, glassesFrameMaterial);\n bridge.position.set(0, 0.15, 0.92);\n model.add(bridge);\n \n // Glasses temples (arms)\n const leftTempleGeometry = new THREE.BoxGeometry(0.02, 0.02, 0.5);\n const leftTemple = new THREE.Mesh(leftTempleGeometry, glassesFrameMaterial);\n leftTemple.position.set(-0.5, 0.15, 0.7);\n leftTemple.rotation.y = Math.PI / 2.5;\n model.add(leftTemple);\n \n const rightTempleGeometry = new THREE.BoxGeometry(0.02, 0.02, 0.5);\n const rightTemple = new THREE.Mesh(rightTempleGeometry, glassesFrameMaterial);\n rightTemple.position.set(0.5, 0.15, 0.7);\n rightTemple.rotation.y = -Math.PI / 2.5;\n model.add(rightTemple);\n \n // Create realistic hair\n const hairMaterial = new THREE.MeshStandardMaterial({ \n color: 0x5a3825, // Dark brown\n roughness: 0.8,\n metalness: 0.1\n });\n \n // Main hair volume\n const hairGeometry = new THREE.SphereGeometry(1.05, 32, 32, 0, Math.PI * 2, 0, Math.PI / 2);\n const hair = new THREE.Mesh(hairGeometry, hairMaterial);\n hair.position.set(0, 0.1, 0);\n hair.rotation.x = Math.PI * 0.05;\n model.add(hair);\n \n // Add some hair strands for more realism\n const strandGeometry = new THREE.BoxGeometry(0.05, 0.2, 0.05);\n \n // Create several strands across the forehead\n for (let i = -0.8; i <= 0.8; i += 0.2) {\n const strand = new THREE.Mesh(strandGeometry, hairMaterial);\n strand.position.set(i, 0.5, 0.8);\n strand.rotation.x = Math.PI * 0.15;\n strand.rotation.z = Math.random() * 0.2 - 0.1;\n model.add(strand);\n }\n \n // Add ears\n const earGeometry = new THREE.SphereGeometry(0.2, 32, 16);\n const earMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xffdbbc,\n roughness: 0.5,\n metalness: 0.0,\n clearcoat: 0.2\n });\n \n // Left ear\n const leftEar = new THREE.Mesh(earGeometry, earMaterial);\n leftEar.position.set(-0.9, 0.1, 0);\n leftEar.scale.set(0.5, 1, 0.7);\n model.add(leftEar);\n \n // Right ear\n const rightEar = new THREE.Mesh(earGeometry, earMaterial);\n rightEar.position.set(0.9, 0.1, 0);\n rightEar.scale.set(0.5, 1, 0.7);\n model.add(rightEar);\n \n // Add neck\n const neckGeometry = new THREE.CylinderGeometry(0.3, 0.4, 0.7, 32);\n const neckMaterial = new THREE.MeshPhysicalMaterial({ \n color: 0xffe0c0,\n roughness: 0.3,\n metalness: 0.0,\n clearcoat: 0.3\n });\n \n const neck = new THREE.Mesh(neckGeometry, neckMaterial);\n neck.position.set(0, -0.8, 0);\n model.add(neck);\n \n // Add to scene\n scene.add(model);\n}\n\nfunction animateAvatarTalking() {\n // Clear any existing animation timeout\n if (animationTimeout) {\n clearTimeout(animationTimeout);\n }\n \n isAvatarTalking = true;\n \n // Set timeout to stop talking after 3 seconds\n animationTimeout = setTimeout(() => {\n isAvatarTalking = false;\n }, 3000);\n}\n\nfunction animate() {\n requestAnimationFrame(animate);\n \n const delta = clock.getDelta();\n \n // Animate the mouth if talking\n if (isAvatarTalking) {\n const mouth = model.getObjectByName(\"mouth\");\n if (mouth) {\n // Simple talking animation - open and close mouth\n mouth.scale.y = 1 + Math.sin(Date.now() * 0.01) * 1.5;\n }\n }\n \n // Gentle head movement\n if (model) {\n model.rotation.y = Math.sin(Date.now() * 0.001) * 0.1;\n model.position.y = Math.sin(Date.now() * 0.0015) * 0.05;\n }\n \n renderer.render(scene, camera);\n}\n\nfunction onWindowResize() {\n camera.aspect = avatarContainer.clientWidth / avatarContainer.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(avatarContainer.clientWidth, avatarContainer.clientHeight);\n}","createdAt",["D",1747477176373],"branchVersion","branchId","bd7305d0-3306-11f0-85ec-569c3dd06744","id","bd72b3f0-3306-11f0-85ec-569c3dd06744","Teach",["D",1747476448969],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","b09cab60-322d-11f0-850d-c3fec8914ba3","pinnedFileId","06c464ae-3307-11f0-a591-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e03e7ce1-b11a-4ee2-bd8e-7d7c1055c4b6","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"isOwned",22,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Problewk","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4QWFEU1VJSEJ3WHQ5b0JNbjd0YlpDbm9FTyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":199,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":200,"_81":201,"_83":202,"_85":25},"tree",[165,169,170],"files",[165,166,167,168,169,170],"counts",{"_155":63,"_156":144,"_157":63,"_158":159,"_160":161},"contents",[127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":148,"_32":149,"_30":150,"_132":-5,"_42":43,"_41":151,"_134":59,"_39":152,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_27":154},{"_44":141,"_32":142,"_30":143,"_132":-5,"_42":43,"_41":144,"_134":25,"_39":145,"_13":63,"_34":20,"_36":146,"_24":25,"_139":-5,"_27":147},{"_44":130,"_32":131,"_30":57,"_132":-5,"_42":43,"_41":133,"_134":25,"_39":135,"_13":136,"_34":137,"_36":138,"_24":25,"_139":-5,"_27":140},"98fcf12e-3307-11f0-8d80-569c3dd06744","index.ts","parentId",9,"latest",["D",1747476817281],4,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main page\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for view source link\n const projectInfo = parseProject(import.meta.url);\n \n // Inject project info\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// API endpoint for AI responses\napp.post(\"/api/ask\", async c => {\n try {\n const body = await c.req.json();\n const { question, history = [] } = body;\n \n if (!question) {\n return c.json({ error: \"Question is required\" }, 400);\n }\n \n const openai = new OpenAI();\n \n // Get conversation history from the request if available\n const { history = [] } = body;\n \n // Prepare messages with history and enhanced system prompt\n const messages = [\n { \n role: \"system\", \n content: `You are an expert educational AI teacher specializing in making complex topics easy to understand.\nYour responses should:\n- Be clear, concise, and accurate\n- Break down complex concepts into simple explanations\n- Use analogies and real-world examples to illustrate points\n- Include step-by-step explanations when teaching processes or methods\n- Highlight key terms or concepts that are important to remember\n- End with a thought-provoking question to encourage further learning\n- Keep content educational, engaging, and suitable for students\n- Format your response with markdown for better readability when appropriate`\n },\n ...history,\n { role: \"user\", content: question }\n ];\n \n const completion = await openai.chat.completions.create({\n messages,\n model: \"gpt-4o-mini\",\n max_tokens: 800,\n });\n \n // Return the answer and updated conversation history\n return c.json({ \n answer: completion.choices[0].message.content,\n history: [\n ...messages.slice(1), // Skip the system message\n { role: \"assistant\", content: completion.choices[0].message.content }\n ]\n });\n } catch (error) {\n console.error(\"Error processing request:\", error);\n return c.json({ error: \"Failed to process your question\" }, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","label",[131],"fea2b2c6-3306-11f0-ad17-569c3dd06744","README.md","fea2b384-3306-11f0-ad17-569c3dd06744",1,["D",1747476558330],"# Digital 3D AI-Powered Teacher\n\nThis Val Town project creates an interactive 3D AI-powered teacher that can answer educational questions.\n\n## Features\n\n- 3D avatar representation using Three.js\n- AI-powered responses using OpenAI's API\n- Interactive chat interface\n- Educational content delivery\n\n## Project Structure\n\n- `index.ts` - Main HTTP entry point\n- `frontend/` - Frontend assets and components\n - `index.html` - Main HTML template\n - `app.js` - Frontend JavaScript\n - `style.css` - Styling\n- `shared/` - Shared utilities and types\n\n## How to Use\n\n1. Visit the application URL\n2. Ask educational questions in the chat interface\n3. The 3D teacher avatar will respond with AI-generated educational content\n\n## Technologies Used\n\n- Three.js for 3D rendering\n- OpenAI API for AI responses\n- Tailwind CSS for styling",[142],"109f7252-3307-11f0-b87d-569c3dd06744","frontend","7bce36a6-aa6b-471d-bd6f-35c5ed4443e3",3,["D",1747476588508],"directory",[149],"pulls","branches","forks","envVars",{"_162":63,"_164":63},"connections",{"_162":63,"_163":63},"count","unfilledCount","emptyCount",{"_44":148,"_32":149,"_30":150,"_132":-5,"_42":43,"_41":151,"_134":59,"_39":196,"_13":63,"_34":153,"_36":-5,"_24":25,"_139":-5,"_172":197,"_27":198},{"_44":192,"_32":33,"_30":31,"_132":150,"_42":43,"_41":14,"_134":25,"_39":193,"_13":151,"_34":35,"_36":38,"_24":25,"_139":-5,"_172":194,"_27":195},{"_44":185,"_32":186,"_30":187,"_132":150,"_42":43,"_41":151,"_134":25,"_39":188,"_13":63,"_34":20,"_36":189,"_24":25,"_139":-5,"_172":190,"_27":191},{"_44":178,"_32":179,"_30":180,"_132":150,"_42":43,"_41":136,"_134":25,"_39":181,"_13":63,"_34":20,"_36":182,"_24":25,"_139":-5,"_172":183,"_27":184},{"_44":141,"_32":142,"_30":143,"_132":-5,"_42":43,"_41":144,"_134":25,"_39":175,"_13":63,"_34":20,"_36":146,"_24":25,"_139":-5,"_172":176,"_27":177},{"_44":130,"_32":131,"_30":57,"_132":-5,"_42":43,"_41":133,"_134":25,"_39":171,"_13":136,"_34":137,"_36":138,"_24":25,"_139":-5,"_172":173,"_27":174},["D",1747476817281],"children",[],[131],["D",1747476558330],[],[142],"1444cfec-3307-11f0-9adf-569c3dd06744","style.css","1444d096-3307-11f0-9adf-569c3dd06744",["D",1747476594623],"/* Custom styles for the Digital 3D AI Teacher */\n\n/* Chat message styling */\n.chat-message {\n margin-bottom: 1rem;\n max-width: 80%;\n}\n\n.chat-message.teacher {\n align-self: flex-start;\n margin-right: auto;\n}\n\n.chat-message.user {\n align-self: flex-end;\n margin-left: auto;\n text-align: right;\n}\n\n.chat-message.user .message {\n background-color: #e0f2fe;\n}\n\n#chat-messages {\n display: flex;\n flex-direction: column;\n}\n\n/* Animation delays for thinking dots */\n.delay-75 {\n animation-delay: 0.75s;\n}\n\n.delay-150 {\n animation-delay: 0.15s;\n}\n\n.delay-300 {\n animation-delay: 0.3s;\n}\n\n/* 3D avatar container */\n#avatar-container {\n position: relative;\n overflow: hidden;\n}\n\n/* Ensure canvas is responsive */\ncanvas {\n width: 100% !important;\n height: 100% !important;\n display: block;\n}",[],[149,179],"109f67da-3307-11f0-b87d-569c3dd06744","index.html","109f687a-3307-11f0-b87d-569c3dd06744",["D",1747476588508],"\n\n\n \n \n Digital 3D AI Teacher\n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

Digital 3D AI Teacher

Ask any educational question and get an AI-powered response

\n \n

\n \n \n

\n 👩‍🏫\n

Hello! I'm your AI teacher. Ask me any educational question, and I'll do my best to help you learn!

\n \n

\n Thinking\n .\n .\n .\n

\n \n \n

\n \n \n \n\n",[],[149,186],"6f270a82-3308-11f0-bd35-569c3dd06744",["D",1747477176373],[],[149,33],["D",1747476588508],[166,167,168],[149],["D",1747476448969],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"ctx",{"_79":-5,"_124":236,"_237":238,"_239":240,"_241":25,"_242":25,"_243":25,"_244":59,"_245":-5,"_246":-7,"_247":-7,"_248":63,"_249":25,"_250":25,"_251":-5,"_252":25,"_253":25,"_254":25,"_255":-5},"ENV",{"_207":208,"_209":210,"_211":87,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v12