Digital 3D AI Teacher

\n \n

Realistic 3D Teacher with advanced facial expressions

\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

.*?<\\/li>)/gs, '

$1');\n // Code blocks\n formattedText = formattedText.replace(/`(.*?)`/g, '$1');\n // Line breaks\n formattedText = formattedText.replace(/\\n/g, '
');\n }\n \n messageDiv.innerHTML = `\n

\n ${avatarEmoji}\n

\n ${formattedText}\n

\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 // Create environment map for realistic reflections\n const cubeTextureLoader = new THREE.CubeTextureLoader();\n const environmentMap = cubeTextureLoader.load([\n 'https://threejs.org/examples/textures/cube/Park2/posx.jpg',\n 'https://threejs.org/examples/textures/cube/Park2/negx.jpg',\n 'https://threejs.org/examples/textures/cube/Park2/posy.jpg',\n 'https://threejs.org/examples/textures/cube/Park2/negy.jpg',\n 'https://threejs.org/examples/textures/cube/Park2/posz.jpg',\n 'https://threejs.org/examples/textures/cube/Park2/negz.jpg'\n ]);\n scene.environment = environmentMap;\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 // Animate eyebrows to show interest (raise slightly)\n if (facialFeatures.leftEyebrow && facialFeatures.rightEyebrow) {\n facialFeatures.leftEyebrow.position.y += 0.05;\n facialFeatures.rightEyebrow.position.y += 0.05;\n }\n \n // Make pupils dilate slightly to show engagement\n if (facialFeatures.leftPupil && facialFeatures.rightPupil) {\n facialFeatures.leftPupil.scale.set(1.2, 1.2, 1.2);\n facialFeatures.rightPupil.scale.set(1.2, 1.2, 1.2);\n }\n \n // Change eye color slightly to be more vibrant when talking\n if (eyesMaterial) {\n eyesMaterial.color.setHex(0x4a9ac4); // Brighter blue\n }\n \n // Set timeout to stop talking after 5 seconds\n animationTimeout = setTimeout(() => {\n isAvatarTalking = false;\n \n // Reset facial expressions\n if (facialFeatures.leftEyebrow && facialFeatures.rightEyebrow) {\n facialFeatures.leftEyebrow.position.y -= 0.05;\n facialFeatures.rightEyebrow.position.y -= 0.05;\n }\n \n if (facialFeatures.leftPupil && facialFeatures.rightPupil) {\n facialFeatures.leftPupil.scale.set(1, 1, 1);\n facialFeatures.rightPupil.scale.set(1, 1, 1);\n }\n \n if (eyesMaterial) {\n eyesMaterial.color.setHex(0x3a8ab4); // Back to normal blue\n }\n }, 5000);\n}\n\nfunction animate() {\n requestAnimationFrame(animate);\n \n const delta = clock.getDelta();\n const time = Date.now() * 0.001; // Current time in seconds\n \n // Animate the mouth if talking\n if (isAvatarTalking) {\n // More realistic mouth movement\n if (facialFeatures.upperLip && facialFeatures.lowerLip) {\n // Upper lip moves less than lower lip\n facialFeatures.upperLip.position.y = -0.4 + Math.sin(time * 10) * 0.02;\n // Lower lip moves more\n facialFeatures.lowerLip.position.y = -0.5 + Math.sin(time * 10) * 0.05;\n // Vary the mouth width slightly\n facialFeatures.upperLip.scale.x = 1 + Math.sin(time * 5) * 0.05;\n facialFeatures.lowerLip.scale.x = 1 + Math.sin(time * 5) * 0.05;\n }\n \n // Subtle head movement while talking (more active)\n if (model) {\n model.rotation.y = Math.sin(time * 1.5) * 0.1;\n model.rotation.x = Math.sin(time * 2) * 0.03;\n model.position.y = Math.sin(time * 2.5) * 0.03;\n }\n \n // Eye movement while talking (looking around slightly)\n if (facialFeatures.leftEye && facialFeatures.rightEye) {\n facialFeatures.leftEye.rotation.y = Math.sin(time * 0.5) * 0.2;\n facialFeatures.rightEye.rotation.y = Math.sin(time * 0.5) * 0.2;\n \n // Occasional blinks\n if (Math.sin(time * 3) > 0.95) {\n facialFeatures.leftEye.scale.y = 0.1;\n facialFeatures.rightEye.scale.y = 0.1;\n } else {\n facialFeatures.leftEye.scale.y = 1;\n facialFeatures.rightEye.scale.y = 1;\n }\n }\n } else {\n // Idle animations when not talking\n \n // Subtle breathing movement\n if (model) {\n model.rotation.y = Math.sin(time * 0.5) * 0.05;\n model.position.y = Math.sin(time * 0.7) * 0.02;\n }\n \n // Occasional random eye movements\n if (facialFeatures.leftEye && facialFeatures.rightEye) {\n // Look in random directions occasionally\n if (Math.sin(time * 0.3) > 0.9) {\n facialFeatures.leftEye.rotation.y = Math.sin(time * 0.2) * 0.3;\n facialFeatures.rightEye.rotation.y = Math.sin(time * 0.2) * 0.3;\n }\n \n // Random blinks\n if (Math.sin(time * 2) > 0.98) {\n facialFeatures.leftEye.scale.y = 0.1;\n facialFeatures.rightEye.scale.y = 0.1;\n } else {\n facialFeatures.leftEye.scale.y = 1;\n facialFeatures.rightEye.scale.y = 1;\n }\n }\n \n // Subtle mouth movements (breathing)\n if (facialFeatures.upperLip && facialFeatures.lowerLip) {\n facialFeatures.upperLip.position.y = -0.4;\n facialFeatures.lowerLip.position.y = -0.5 + Math.sin(time * 0.5) * 0.01;\n }\n }\n \n // Subtle skin color variations to simulate blood flow\n if (headModel) {\n const pulseIntensity = (Math.sin(time * 0.8) * 0.5 + 0.5) * 0.05;\n headModel.material.color.setRGB(\n 1.0 - pulseIntensity, \n 0.878 - pulseIntensity, \n 0.753 - pulseIntensity\n );\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}",[19,67],"109f7252-3307-11f0-b87d-569c3dd06744",3,["D",1747476588508],0,"directory",[19],{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":76,"_47":48,"_49":103,"_17":78,"_52":79,"_53":-5,"_55":56,"_57":-5,"_92":104,"_18":105},{"_36":95,"_13":96,"_39":97,"_41":-5,"_43":44,"_45":98,"_47":48,"_49":99,"_17":51,"_52":24,"_53":100,"_55":56,"_57":-5,"_92":101,"_18":102},{"_36":84,"_13":85,"_39":86,"_41":-5,"_43":44,"_45":87,"_47":48,"_49":88,"_17":89,"_52":90,"_53":91,"_55":56,"_57":-5,"_92":93,"_18":94},"baf292a6-3308-11f0-bcc7-569c3dd06744","index.ts","06c464ae-3307-11f0-a591-569c3dd06744",18,["D",1747477303761],6,"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 // 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;","children",[],[85],"87c49faa-3308-11f0-91f7-569c3dd06744","README.md","fea2b384-3306-11f0-ad17-569c3dd06744",14,["D",1747477217896],"# 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- Realistic 3D avatar representation using Three.js\n - Advanced materials with physical properties\n - Detailed facial features with realistic skin, eyes, and hair\n - Lifelike animations and expressions\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 with 3D rendering\n - `style.css` - Styling\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\n4. Watch the realistic facial expressions and animations as the teacher responds\n\n## Technologies Used\n\n- Three.js for 3D rendering\n - MeshPhysicalMaterial for realistic materials\n - Advanced lighting setup for photorealistic rendering\n - Facial animation system\n- OpenAI API for AI responses\n- Tailwind CSS for styling",[],[96],["D",1747476588508],[106,107,108],[19],{"_36":66,"_13":67,"_39":68,"_41":42,"_43":44,"_45":69,"_47":48,"_49":115,"_17":71,"_52":72,"_53":73,"_55":56,"_57":-5,"_92":116,"_18":117},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":112,"_17":51,"_52":24,"_53":64,"_55":56,"_57":-5,"_92":113,"_18":114},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":109,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_92":110,"_18":111},["D",1747477260070],[],[19,38],["D",1747477290757],[],[19,60],["D",1747477364702],[],[19,67],"bd72b3f0-3306-11f0-85ec-569c3dd06744",["D",1747476448969],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","b09cab60-322d-11f0-850d-c3fec8914ba3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","e03e7ce1-b11a-4ee2-bd8e-7d7c1055c4b6","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_170":166},"org",{"_11":12,"_164":-5,"_165":166,"_127":128,"_167":168,"_169":56},"branch",{"_17":69,"_13":16,"_36":44,"_156":118,"_157":-5,"_158":-5,"_159":-5,"_160":-5,"_161":-5,"_162":14,"_163":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4QWFEU1VJSEJ3WHQ5b0JNbjd0YlpDbm9FTyJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":118,"_13":14,"_49":224,"_120":-5,"_121":56,"_122":123,"_124":123,"_125":-5,"_126":-5,"_127":128,"_129":86,"_130":48,"_131":48,"_132":-5,"_133":78,"_134":135,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":141,"_142":141,"_143":144,"_145":144,"_146":144,"_147":141,"_148":141,"_149":225,"_151":226,"_153":227,"_155":56},[206,210,211],"files",[206,207,208,209,210,211],"counts",{"_197":78,"_198":51,"_199":78,"_32":200,"_201":202},[191,192,193],{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":76,"_47":48,"_49":77,"_17":78,"_52":79,"_53":-5,"_55":56,"_57":-5,"_18":190},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_36":66,"_13":67,"_39":68,"_41":42,"_43":44,"_45":69,"_47":48,"_49":70,"_17":71,"_52":72,"_53":73,"_55":56,"_57":-5,"_18":196},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":63,"_17":51,"_52":24,"_53":64,"_55":56,"_57":-5,"_18":195},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_18":194},[19,38],[19,60],[19,67],"pulls","branches","forks",{"_203":78,"_205":78},"connections",{"_203":78,"_204":78},"count","unfilledCount","emptyCount",{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":76,"_47":48,"_49":103,"_17":78,"_52":79,"_53":-5,"_55":56,"_57":-5,"_92":222,"_18":223},{"_36":66,"_13":67,"_39":68,"_41":42,"_43":44,"_45":69,"_47":48,"_49":115,"_17":71,"_52":72,"_53":73,"_55":56,"_57":-5,"_92":220,"_18":221},{"_36":59,"_13":60,"_39":61,"_41":42,"_43":44,"_45":62,"_47":48,"_49":112,"_17":51,"_52":24,"_53":64,"_55":56,"_57":-5,"_92":218,"_18":219},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":109,"_17":51,"_52":24,"_53":54,"_55":56,"_57":-5,"_92":216,"_18":217},{"_36":95,"_13":96,"_39":97,"_41":-5,"_43":44,"_45":98,"_47":48,"_49":99,"_17":51,"_52":24,"_53":100,"_55":56,"_57":-5,"_92":214,"_18":215},{"_36":84,"_13":85,"_39":86,"_41":-5,"_43":44,"_45":87,"_47":48,"_49":88,"_17":89,"_52":90,"_53":91,"_55":56,"_57":-5,"_92":212,"_18":213},[],[85],[],[96],[],[19,38],[],[19,60],[],[19,67],[207,208,209],[19],["D",1747476448969],{"_11":12,"_170":166},{"_11":12,"_164":-5,"_165":166,"_127":128,"_167":168,"_169":56},{"_17":69,"_13":16,"_36":44,"_156":118,"_157":-5,"_158":-5,"_159":-5,"_160":-5,"_161":-5,"_162":14,"_163":12},"ctx",{"_149":-5,"_187":261,"_262":263,"_264":265,"_266":56,"_267":56,"_268":56,"_269":48,"_270":-5,"_271":-7,"_272":-7,"_273":78,"_274":56,"_275":56,"_276":-5,"_277":56,"_278":56,"_279":56,"_280":-5},"ENV",{"_232":233,"_234":235,"_236":16,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","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"]