Avatar 3D \u2014 c\u1eed ch\u1ec9 tay khi n\u00f3i (\u0111\u00e3 s\u1eeda)<\/title>\r\n<\/head>\r\n<body>\r\n<div id=\"avatar3d\" style=\"width:300px; height:400px; margin:auto;\"><\/div>\r\n\r\n<br>\r\n<input id=\"userInput\" placeholder=\"Nh\u1eadp c\u00e2u h\u1ecfi...\" style=\"width:200px;\">\r\n<button onclick=\"askAI()\">H\u1ecfi AI<\/button>\r\n<button onclick=\"autoRead()\">Nghe b\u00e0i gi\u1ea3ng<\/button>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/build\/three.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\r\n\r\n<script>\r\n\/\/ ===== UNLOCK AUDIO =====\r\ndocument.addEventListener(\"click\", () => {\r\n const a = new Audio();\r\n a.play().catch(()=>{});\r\n}, { once: true });\r\n\r\n\/\/ ===== SCENE =====\r\nlet scene = new THREE.Scene();\r\nlet container = document.getElementById(\"avatar3d\");\r\nlet width = container.clientWidth;\r\nlet height = container.clientHeight;\r\n\r\nlet camera = new THREE.PerspectiveCamera(45, width \/ height, 0.1, 1000);\r\nlet renderer = new THREE.WebGLRenderer({ antialias: true });\r\nrenderer.setSize(width, height);\r\nrenderer.setClearColor(0x87CEEB);\r\ncontainer.appendChild(renderer.domElement);\r\n\r\ncamera.position.set(0, 0.8, 3);\r\n\r\n\/\/ ===== LIGHT =====\r\nscene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 2));\r\nlet light = new THREE.DirectionalLight(0xffffff, 1.2);\r\nlight.position.set(0,2,2);\r\nscene.add(light);\r\n\r\n\/\/ ===== MODEL =====\r\nlet morphMesh = null;\r\nlet isSpeaking = false;\r\n\r\nlet loader = new THREE.GLTFLoader();\r\nloader.load(\r\n \"https:\/\/hoctuonglai.edu.vn\/wp-content\/uploads\/2026\/04\/avatar2.glb\",\r\n function (gltf) {\r\n\r\n let model = gltf.scene;\r\n model.scale.set(2,2,2);\r\n model.rotation.y = -Math.PI \/ 2;\r\n\r\n scene.add(model);\r\n\r\n model.traverse(function(obj){\r\n if(obj.isMesh && obj.morphTargetDictionary){\r\n morphMesh = obj;\r\n console.log(\"SHAPES:\", morphMesh.morphTargetDictionary);\r\n }\r\n });\r\n\r\n autoRead();\r\n }\r\n);\r\n\r\n\/\/ ===== RENDER LOOP =====\r\nfunction animate(){\r\n requestAnimationFrame(animate);\r\n renderer.render(scene, camera);\r\n}\r\nanimate();\r\n\r\n\/\/ ===== AUTO READ =====\r\nasync function autoRead(){\r\n try {\r\n const res = await fetch(\"https:\/\/api.hoctuonglai.edu.vn\/auto-read?t=\" + Date.now());\r\n const data = await res.json();\r\n if (data.text) speak(data.text);\r\n } catch (err) {}\r\n}\r\n\/\/ ===== HAND =====\r\nfunction triggerHand(){\r\n if (!morphMesh) return;\r\n\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let tay = dict[\"TAY\"];\r\n if (tay === undefined) return;\r\n\r\n inf[tay] = 1;\r\n\r\n setTimeout(()=>{\r\n inf[tay] = 0;\r\n }, 400);\r\n}\r\n\/\/ ===== MOUTH =====\r\n\/\/ Ch\u1ec9 gi\u1ea3m \u0111\u00fang c\u00e1c morph mi\u1ec7ng theo ch\u1ec9 s\u1ed1 trong dictionary \u2014 KH\u00d4NG d\u00f9ng keys[i] v\u1edbi inf[i]\r\n\/\/ v\u00ec th\u1ee9 t\u1ef1 Object.keys(dict) kh\u00f4ng tr\u00f9ng th\u1ee9 t\u1ef1 morphTargetInfluences (g\u00e2y \u201c\u0103n\u201d nh\u1ea7m morph tay).\r\nfunction setMouth(shape){\r\n if (!morphMesh) return;\r\n\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let mouthShapes = [\"A\",\"O\",\"M\"];\r\n\r\n for (let m = 0; m < mouthShapes.length; m++) {\r\n let idx = dict[mouthShapes[m]];\r\n if (idx !== undefined) {\r\n inf[idx] *= 0.3;\r\n }\r\n }\r\n\r\n if (dict[shape] !== undefined) {\r\n let i = dict[shape];\r\n inf[i] = Math.max(inf[i], 0.6);\r\n }\r\n}\r\n\r\n\/\/ ===== PLAY TIMELINE =====\r\nlet currentTimeouts = [];\r\n\r\nfunction clearSpeechTimers(){\r\n currentTimeouts.forEach(t => clearTimeout(t));\r\n currentTimeouts = [];\r\n}\r\n\r\nfunction playTimeline(timeline){\r\n clearSpeechTimers();\r\n\r\n if (!timeline) return;\r\n timeline.forEach(item=>{\r\n let t = setTimeout(()=>{\r\n\r\n setMouth(item.shape);\r\n\r\n if (Math.random() < 0.2) {\r\n triggerHand();\r\n }\r\n\r\n }, item.time);\r\n\r\n currentTimeouts.push(t);\r\n });\r\n\r\n}\r\n\r\n\/\/ ===== RESET =====\r\nfunction resetMouth(){\r\n if (!morphMesh) return;\r\n let inf = morphMesh.morphTargetInfluences;\r\n for (let i = 0; i < inf.length; i++) {\r\n inf[i] = 0;\r\n }\r\n}\r\n\r\n\/\/ ===== BLINK (n\u1ebfu model c\u00f3) =====\r\nfunction blink(){\r\n if (!morphMesh) return;\r\n\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let key = dict[\"Blink\"] ?? dict[\"blink\"];\r\n if (key === undefined) return;\r\n\r\n inf[key] = 1;\r\n setTimeout(() => inf[key] = 0, 120);\r\n}\r\n\r\nsetInterval(() => {\r\n blink();\r\n}, 4000);\r\n\r\n\/\/ ===== H\u00c0NH VI GI\u00c1O VI\u00caN =====\r\n\r\nfunction analyzeText(text){\r\n return {\r\n isLong: text.length > 200,\r\n hasEmphasis: text.includes(\"quan tr\u1ecdng\") || text.includes(\"!\"),\r\n isQuestion: text.includes(\"?\")\r\n };\r\n}\r\n\r\nfunction nodHead(){\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let gd = dict[\"GD\"];\r\n if (gd === undefined) return;\r\n\r\n inf[gd] = 1;\r\n setTimeout(()=> inf[gd]=0, 300);\r\n}\r\n\r\nfunction glance(){\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let left = dict[\"LT\"];\r\n let right = dict[\"LP\"];\r\n\r\n if (Math.random() < 0.5 && left !== undefined){\r\n inf[left] = 1;\r\n setTimeout(()=> inf[left]=0, 300);\r\n } else if (right !== undefined){\r\n inf[right] = 1;\r\n setTimeout(()=> inf[right]=0, 300);\r\n }\r\n}\r\n\r\nfunction bowHead(){\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let cm = dict[\"CM\"];\r\n if (cm === undefined) return;\r\n\r\n inf[cm] = 1;\r\n setTimeout(()=> inf[cm]=0, 300);\r\n}\r\n\r\nfunction moveHand(){\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let tay = dict[\"TAY\"];\r\n if (tay === undefined) return;\r\n\r\n inf[tay] = 1;\r\n\r\n setTimeout(()=> inf[tay]=0, 1500);\r\n}\r\n\r\nlet behaviorInterval = null;\r\n\r\nfunction stopBehavior(){\r\n if (behaviorInterval !== null) {\r\n clearInterval(behaviorInterval);\r\n behaviorInterval = null;\r\n }\r\n}\r\n\r\nfunction startBehavior(text){\r\n\r\n stopBehavior();\r\n\r\n const b = analyzeText(text);\r\n let t = 0;\r\n\r\n behaviorInterval = setInterval(()=>{\r\n\r\n if (!isSpeaking){\r\n stopBehavior();\r\n return;\r\n }\r\n\r\n t++;\r\n\r\n if (t % 3 === 0) glance();\r\n\r\n if (b.hasEmphasis && t % 4 === 0) nodHead();\r\n\r\n \/\/ Tay khi \u0111ang n\u00f3i: th\u1ec9nh tho\u1ea3ng v\u1edbi m\u1ecdi \u0111o\u1ea1n (gi\u1ed1ng nh\u00e1y m\u1eaft), kh\u00f4ng ch\u1ec9 b\u00e0i d\u00e0i\r\n if (t % 3 === 0 && Math.random() < 0.45) {\r\n triggerHand();\r\n } else if (b.isLong && t % 5 === 0) {\r\n moveHand();\r\n }\r\n\r\n if (b.isQuestion && t % 6 === 0) bowHead();\r\n\r\n }, 800);\r\n}\r\n\r\n\/\/ ===== SPEAK =====\r\nasync function speak(text){\r\n\r\n const res = await fetch(\r\n \"https:\/\/api.hoctuonglai.edu.vn\/speak?text=\" + encodeURIComponent(text)\r\n );\r\n\r\n const data = await res.json();\r\n if (!data.audio) return;\r\n\r\n const audio = new Audio(\r\n \"https:\/\/api.hoctuonglai.edu.vn\" + data.audio\r\n );\r\n\r\n stopBehavior();\r\n clearSpeechTimers();\r\n\r\n isSpeaking = true;\r\n\r\n startBehavior(text);\r\n\r\n audio.muted = true;\r\n audio.play().then(() => {\r\n audio.muted = false;\r\n });\r\n\r\n audio.onplaying = () => {\r\n if (data.mouth) playTimeline(data.mouth);\r\n };\r\n\r\n audio.onended = () => {\r\n isSpeaking = false;\r\n stopBehavior();\r\n clearSpeechTimers();\r\n resetMouth();\r\n };\r\n}\r\n\r\n\/\/ ===== ASK AI =====\r\nasync function askAI(){\r\n\r\n const text = document.getElementById(\"userInput\").value;\r\n\r\n const res = await fetch(\"https:\/\/api.hoctuonglai.edu.vn\/chat\", {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify({ message: text })\r\n });\r\n\r\n const data = await res.json();\r\n\r\n if (data.reply) {\r\n speak(data.reply);\r\n }\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54b816b elementor-widget elementor-widget-button\" data-id=\"54b816b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Click here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2fc2bd4 e-con-full e-flex e-con e-child\" data-id=\"2fc2bd4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Avatar 3D \u2014 c\u1eed ch\u1ec9 tay khi n\u00f3i (\u0111\u00e3 s\u1eeda) H\u1ecfi AI Nghe b\u00e0i gi\u1ea3ng Click here<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-153","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Trang ch\u1ee7 - Hoctuonglai.edu.vn<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hoctuonglai.edu.vn\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trang ch\u1ee7 - Hoctuonglai.edu.vn\" \/>\n<meta property=\"og:description\" content=\"Avatar 3D \u2014 c\u1eed ch\u1ec9 tay khi n\u00f3i (\u0111\u00e3 s\u1eeda) H\u1ecfi AI Nghe b\u00e0i gi\u1ea3ng Click here\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hoctuonglai.edu.vn\/\" \/>\n<meta property=\"og:site_name\" content=\"Hoctuonglai.edu.vn\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-25T09:39:34+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hoctuonglai.edu.vn\/\",\"url\":\"https:\/\/hoctuonglai.edu.vn\/\",\"name\":\"Trang ch\u1ee7 - Hoctuonglai.edu.vn\",\"isPartOf\":{\"@id\":\"https:\/\/hoctuonglai.edu.vn\/#website\"},\"datePublished\":\"2026-04-04T09:10:41+00:00\",\"dateModified\":\"2026-04-25T09:39:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hoctuonglai.edu.vn\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hoctuonglai.edu.vn\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hoctuonglai.edu.vn\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hoctuonglai.edu.vn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Trang ch\u1ee7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hoctuonglai.edu.vn\/#website\",\"url\":\"https:\/\/hoctuonglai.edu.vn\/\",\"name\":\"Hoctuonglai.edu.vn\",\"description\":\"Tham gia c\u00f9ng h\u00e0ng ng\u00e0n ng\u01b0\u1eddi h\u1ecdc v\u00e0 kh\u00e1m ph\u00e1 c\u00e1c kh\u00f3a h\u1ecdc t\u1eeb nh\u1eefng gi\u1ea3ng vi\u00ean h\u00e0ng \u0111\u1ea7u. D\u1ec5 d\u00e0ng kh\u1edfi t\u1ea1o, qu\u1ea3n l\u00fd v\u00e0 ph\u00e1t tri\u1ec3n..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hoctuonglai.edu.vn\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n","yoast_head_json":{"title":"Trang ch\u1ee7 - Hoctuonglai.edu.vn","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hoctuonglai.edu.vn\/","og_locale":"en_US","og_type":"article","og_title":"Trang ch\u1ee7 - Hoctuonglai.edu.vn","og_description":"Avatar 3D \u2014 c\u1eed ch\u1ec9 tay khi n\u00f3i (\u0111\u00e3 s\u1eeda) H\u1ecfi AI Nghe b\u00e0i gi\u1ea3ng Click here","og_url":"https:\/\/hoctuonglai.edu.vn\/","og_site_name":"Hoctuonglai.edu.vn","article_modified_time":"2026-04-25T09:39:34+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hoctuonglai.edu.vn\/","url":"https:\/\/hoctuonglai.edu.vn\/","name":"Trang ch\u1ee7 - Hoctuonglai.edu.vn","isPartOf":{"@id":"https:\/\/hoctuonglai.edu.vn\/#website"},"datePublished":"2026-04-04T09:10:41+00:00","dateModified":"2026-04-25T09:39:34+00:00","breadcrumb":{"@id":"https:\/\/hoctuonglai.edu.vn\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hoctuonglai.edu.vn\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hoctuonglai.edu.vn\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hoctuonglai.edu.vn\/"},{"@type":"ListItem","position":2,"name":"Trang ch\u1ee7"}]},{"@type":"WebSite","@id":"https:\/\/hoctuonglai.edu.vn\/#website","url":"https:\/\/hoctuonglai.edu.vn\/","name":"Hoctuonglai.edu.vn","description":"Tham gia c\u00f9ng h\u00e0ng ng\u00e0n ng\u01b0\u1eddi h\u1ecdc v\u00e0 kh\u00e1m ph\u00e1 c\u00e1c kh\u00f3a h\u1ecdc t\u1eeb nh\u1eefng gi\u1ea3ng vi\u00ean h\u00e0ng \u0111\u1ea7u. D\u1ec5 d\u00e0ng kh\u1edfi t\u1ea1o, qu\u1ea3n l\u00fd v\u00e0 ph\u00e1t tri\u1ec3n..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hoctuonglai.edu.vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/pages\/153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=153"}],"version-history":[{"count":359,"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/pages\/153\/revisions"}],"predecessor-version":[{"id":562,"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/pages\/153\/revisions\/562"}],"wp:attachment":[{"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n Avatar 3D \u2014 c\u1eed ch\u1ec9 tay khi n\u00f3i (\u0111\u00e3 s\u1eeda)<\/title>\r\n<\/head>\r\n<body>\r\n<div id=\"avatar3d\" style=\"width:300px; height:400px; margin:auto;\"><\/div>\r\n\r\n<br>\r\n<input id=\"userInput\" placeholder=\"Nh\u1eadp c\u00e2u h\u1ecfi...\" style=\"width:200px;\">\r\n<button onclick=\"askAI()\">H\u1ecfi AI<\/button>\r\n<button onclick=\"autoRead()\">Nghe b\u00e0i gi\u1ea3ng<\/button>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/build\/three.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\r\n\r\n<script>\r\n\/\/ ===== UNLOCK AUDIO =====\r\ndocument.addEventListener(\"click\", () => {\r\n const a = new Audio();\r\n a.play().catch(()=>{});\r\n}, { once: true });\r\n\r\n\/\/ ===== SCENE =====\r\nlet scene = new THREE.Scene();\r\nlet container = document.getElementById(\"avatar3d\");\r\nlet width = container.clientWidth;\r\nlet height = container.clientHeight;\r\n\r\nlet camera = new THREE.PerspectiveCamera(45, width \/ height, 0.1, 1000);\r\nlet renderer = new THREE.WebGLRenderer({ antialias: true });\r\nrenderer.setSize(width, height);\r\nrenderer.setClearColor(0x87CEEB);\r\ncontainer.appendChild(renderer.domElement);\r\n\r\ncamera.position.set(0, 0.8, 3);\r\n\r\n\/\/ ===== LIGHT =====\r\nscene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 2));\r\nlet light = new THREE.DirectionalLight(0xffffff, 1.2);\r\nlight.position.set(0,2,2);\r\nscene.add(light);\r\n\r\n\/\/ ===== MODEL =====\r\nlet morphMesh = null;\r\nlet isSpeaking = false;\r\n\r\nlet loader = new THREE.GLTFLoader();\r\nloader.load(\r\n \"https:\/\/hoctuonglai.edu.vn\/wp-content\/uploads\/2026\/04\/avatar2.glb\",\r\n function (gltf) {\r\n\r\n let model = gltf.scene;\r\n model.scale.set(2,2,2);\r\n model.rotation.y = -Math.PI \/ 2;\r\n\r\n scene.add(model);\r\n\r\n model.traverse(function(obj){\r\n if(obj.isMesh && obj.morphTargetDictionary){\r\n morphMesh = obj;\r\n console.log(\"SHAPES:\", morphMesh.morphTargetDictionary);\r\n }\r\n });\r\n\r\n autoRead();\r\n }\r\n);\r\n\r\n\/\/ ===== RENDER LOOP =====\r\nfunction animate(){\r\n requestAnimationFrame(animate);\r\n renderer.render(scene, camera);\r\n}\r\nanimate();\r\n\r\n\/\/ ===== AUTO READ =====\r\nasync function autoRead(){\r\n try {\r\n const res = await fetch(\"https:\/\/api.hoctuonglai.edu.vn\/auto-read?t=\" + Date.now());\r\n const data = await res.json();\r\n if (data.text) speak(data.text);\r\n } catch (err) {}\r\n}\r\n\/\/ ===== HAND =====\r\nfunction triggerHand(){\r\n if (!morphMesh) return;\r\n\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let tay = dict[\"TAY\"];\r\n if (tay === undefined) return;\r\n\r\n inf[tay] = 1;\r\n\r\n setTimeout(()=>{\r\n inf[tay] = 0;\r\n }, 400);\r\n}\r\n\/\/ ===== MOUTH =====\r\n\/\/ Ch\u1ec9 gi\u1ea3m \u0111\u00fang c\u00e1c morph mi\u1ec7ng theo ch\u1ec9 s\u1ed1 trong dictionary \u2014 KH\u00d4NG d\u00f9ng keys[i] v\u1edbi inf[i]\r\n\/\/ v\u00ec th\u1ee9 t\u1ef1 Object.keys(dict) kh\u00f4ng tr\u00f9ng th\u1ee9 t\u1ef1 morphTargetInfluences (g\u00e2y \u201c\u0103n\u201d nh\u1ea7m morph tay).\r\nfunction setMouth(shape){\r\n if (!morphMesh) return;\r\n\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let mouthShapes = [\"A\",\"O\",\"M\"];\r\n\r\n for (let m = 0; m < mouthShapes.length; m++) {\r\n let idx = dict[mouthShapes[m]];\r\n if (idx !== undefined) {\r\n inf[idx] *= 0.3;\r\n }\r\n }\r\n\r\n if (dict[shape] !== undefined) {\r\n let i = dict[shape];\r\n inf[i] = Math.max(inf[i], 0.6);\r\n }\r\n}\r\n\r\n\/\/ ===== PLAY TIMELINE =====\r\nlet currentTimeouts = [];\r\n\r\nfunction clearSpeechTimers(){\r\n currentTimeouts.forEach(t => clearTimeout(t));\r\n currentTimeouts = [];\r\n}\r\n\r\nfunction playTimeline(timeline){\r\n clearSpeechTimers();\r\n\r\n if (!timeline) return;\r\n timeline.forEach(item=>{\r\n let t = setTimeout(()=>{\r\n\r\n setMouth(item.shape);\r\n\r\n if (Math.random() < 0.2) {\r\n triggerHand();\r\n }\r\n\r\n }, item.time);\r\n\r\n currentTimeouts.push(t);\r\n });\r\n\r\n}\r\n\r\n\/\/ ===== RESET =====\r\nfunction resetMouth(){\r\n if (!morphMesh) return;\r\n let inf = morphMesh.morphTargetInfluences;\r\n for (let i = 0; i < inf.length; i++) {\r\n inf[i] = 0;\r\n }\r\n}\r\n\r\n\/\/ ===== BLINK (n\u1ebfu model c\u00f3) =====\r\nfunction blink(){\r\n if (!morphMesh) return;\r\n\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let key = dict[\"Blink\"] ?? dict[\"blink\"];\r\n if (key === undefined) return;\r\n\r\n inf[key] = 1;\r\n setTimeout(() => inf[key] = 0, 120);\r\n}\r\n\r\nsetInterval(() => {\r\n blink();\r\n}, 4000);\r\n\r\n\/\/ ===== H\u00c0NH VI GI\u00c1O VI\u00caN =====\r\n\r\nfunction analyzeText(text){\r\n return {\r\n isLong: text.length > 200,\r\n hasEmphasis: text.includes(\"quan tr\u1ecdng\") || text.includes(\"!\"),\r\n isQuestion: text.includes(\"?\")\r\n };\r\n}\r\n\r\nfunction nodHead(){\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let gd = dict[\"GD\"];\r\n if (gd === undefined) return;\r\n\r\n inf[gd] = 1;\r\n setTimeout(()=> inf[gd]=0, 300);\r\n}\r\n\r\nfunction glance(){\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let left = dict[\"LT\"];\r\n let right = dict[\"LP\"];\r\n\r\n if (Math.random() < 0.5 && left !== undefined){\r\n inf[left] = 1;\r\n setTimeout(()=> inf[left]=0, 300);\r\n } else if (right !== undefined){\r\n inf[right] = 1;\r\n setTimeout(()=> inf[right]=0, 300);\r\n }\r\n}\r\n\r\nfunction bowHead(){\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let cm = dict[\"CM\"];\r\n if (cm === undefined) return;\r\n\r\n inf[cm] = 1;\r\n setTimeout(()=> inf[cm]=0, 300);\r\n}\r\n\r\nfunction moveHand(){\r\n let dict = morphMesh.morphTargetDictionary;\r\n let inf = morphMesh.morphTargetInfluences;\r\n\r\n let tay = dict[\"TAY\"];\r\n if (tay === undefined) return;\r\n\r\n inf[tay] = 1;\r\n\r\n setTimeout(()=> inf[tay]=0, 1500);\r\n}\r\n\r\nlet behaviorInterval = null;\r\n\r\nfunction stopBehavior(){\r\n if (behaviorInterval !== null) {\r\n clearInterval(behaviorInterval);\r\n behaviorInterval = null;\r\n }\r\n}\r\n\r\nfunction startBehavior(text){\r\n\r\n stopBehavior();\r\n\r\n const b = analyzeText(text);\r\n let t = 0;\r\n\r\n behaviorInterval = setInterval(()=>{\r\n\r\n if (!isSpeaking){\r\n stopBehavior();\r\n return;\r\n }\r\n\r\n t++;\r\n\r\n if (t % 3 === 0) glance();\r\n\r\n if (b.hasEmphasis && t % 4 === 0) nodHead();\r\n\r\n \/\/ Tay khi \u0111ang n\u00f3i: th\u1ec9nh tho\u1ea3ng v\u1edbi m\u1ecdi \u0111o\u1ea1n (gi\u1ed1ng nh\u00e1y m\u1eaft), kh\u00f4ng ch\u1ec9 b\u00e0i d\u00e0i\r\n if (t % 3 === 0 && Math.random() < 0.45) {\r\n triggerHand();\r\n } else if (b.isLong && t % 5 === 0) {\r\n moveHand();\r\n }\r\n\r\n if (b.isQuestion && t % 6 === 0) bowHead();\r\n\r\n }, 800);\r\n}\r\n\r\n\/\/ ===== SPEAK =====\r\nasync function speak(text){\r\n\r\n const res = await fetch(\r\n \"https:\/\/api.hoctuonglai.edu.vn\/speak?text=\" + encodeURIComponent(text)\r\n );\r\n\r\n const data = await res.json();\r\n if (!data.audio) return;\r\n\r\n const audio = new Audio(\r\n \"https:\/\/api.hoctuonglai.edu.vn\" + data.audio\r\n );\r\n\r\n stopBehavior();\r\n clearSpeechTimers();\r\n\r\n isSpeaking = true;\r\n\r\n startBehavior(text);\r\n\r\n audio.muted = true;\r\n audio.play().then(() => {\r\n audio.muted = false;\r\n });\r\n\r\n audio.onplaying = () => {\r\n if (data.mouth) playTimeline(data.mouth);\r\n };\r\n\r\n audio.onended = () => {\r\n isSpeaking = false;\r\n stopBehavior();\r\n clearSpeechTimers();\r\n resetMouth();\r\n };\r\n}\r\n\r\n\/\/ ===== ASK AI =====\r\nasync function askAI(){\r\n\r\n const text = document.getElementById(\"userInput\").value;\r\n\r\n const res = await fetch(\"https:\/\/api.hoctuonglai.edu.vn\/chat\", {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify({ message: text })\r\n });\r\n\r\n const data = await res.json();\r\n\r\n if (data.reply) {\r\n speak(data.reply);\r\n }\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54b816b elementor-widget elementor-widget-button\" data-id=\"54b816b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Click here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2fc2bd4 e-con-full e-flex e-con e-child\" data-id=\"2fc2bd4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Avatar 3D \u2014 c\u1eed ch\u1ec9 tay khi n\u00f3i (\u0111\u00e3 s\u1eeda) H\u1ecfi AI Nghe b\u00e0i gi\u1ea3ng Click here<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-153","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Trang ch\u1ee7 - Hoctuonglai.edu.vn<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hoctuonglai.edu.vn\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trang ch\u1ee7 - Hoctuonglai.edu.vn\" \/>\n<meta property=\"og:description\" content=\"Avatar 3D \u2014 c\u1eed ch\u1ec9 tay khi n\u00f3i (\u0111\u00e3 s\u1eeda) H\u1ecfi AI Nghe b\u00e0i gi\u1ea3ng Click here\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hoctuonglai.edu.vn\/\" \/>\n<meta property=\"og:site_name\" content=\"Hoctuonglai.edu.vn\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-25T09:39:34+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hoctuonglai.edu.vn\/\",\"url\":\"https:\/\/hoctuonglai.edu.vn\/\",\"name\":\"Trang ch\u1ee7 - Hoctuonglai.edu.vn\",\"isPartOf\":{\"@id\":\"https:\/\/hoctuonglai.edu.vn\/#website\"},\"datePublished\":\"2026-04-04T09:10:41+00:00\",\"dateModified\":\"2026-04-25T09:39:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hoctuonglai.edu.vn\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hoctuonglai.edu.vn\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hoctuonglai.edu.vn\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hoctuonglai.edu.vn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Trang ch\u1ee7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hoctuonglai.edu.vn\/#website\",\"url\":\"https:\/\/hoctuonglai.edu.vn\/\",\"name\":\"Hoctuonglai.edu.vn\",\"description\":\"Tham gia c\u00f9ng h\u00e0ng ng\u00e0n ng\u01b0\u1eddi h\u1ecdc v\u00e0 kh\u00e1m ph\u00e1 c\u00e1c kh\u00f3a h\u1ecdc t\u1eeb nh\u1eefng gi\u1ea3ng vi\u00ean h\u00e0ng \u0111\u1ea7u. D\u1ec5 d\u00e0ng kh\u1edfi t\u1ea1o, qu\u1ea3n l\u00fd v\u00e0 ph\u00e1t tri\u1ec3n..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hoctuonglai.edu.vn\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n","yoast_head_json":{"title":"Trang ch\u1ee7 - Hoctuonglai.edu.vn","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hoctuonglai.edu.vn\/","og_locale":"en_US","og_type":"article","og_title":"Trang ch\u1ee7 - Hoctuonglai.edu.vn","og_description":"Avatar 3D \u2014 c\u1eed ch\u1ec9 tay khi n\u00f3i (\u0111\u00e3 s\u1eeda) H\u1ecfi AI Nghe b\u00e0i gi\u1ea3ng Click here","og_url":"https:\/\/hoctuonglai.edu.vn\/","og_site_name":"Hoctuonglai.edu.vn","article_modified_time":"2026-04-25T09:39:34+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hoctuonglai.edu.vn\/","url":"https:\/\/hoctuonglai.edu.vn\/","name":"Trang ch\u1ee7 - Hoctuonglai.edu.vn","isPartOf":{"@id":"https:\/\/hoctuonglai.edu.vn\/#website"},"datePublished":"2026-04-04T09:10:41+00:00","dateModified":"2026-04-25T09:39:34+00:00","breadcrumb":{"@id":"https:\/\/hoctuonglai.edu.vn\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hoctuonglai.edu.vn\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hoctuonglai.edu.vn\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hoctuonglai.edu.vn\/"},{"@type":"ListItem","position":2,"name":"Trang ch\u1ee7"}]},{"@type":"WebSite","@id":"https:\/\/hoctuonglai.edu.vn\/#website","url":"https:\/\/hoctuonglai.edu.vn\/","name":"Hoctuonglai.edu.vn","description":"Tham gia c\u00f9ng h\u00e0ng ng\u00e0n ng\u01b0\u1eddi h\u1ecdc v\u00e0 kh\u00e1m ph\u00e1 c\u00e1c kh\u00f3a h\u1ecdc t\u1eeb nh\u1eefng gi\u1ea3ng vi\u00ean h\u00e0ng \u0111\u1ea7u. D\u1ec5 d\u00e0ng kh\u1edfi t\u1ea1o, qu\u1ea3n l\u00fd v\u00e0 ph\u00e1t tri\u1ec3n..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hoctuonglai.edu.vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/pages\/153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=153"}],"version-history":[{"count":359,"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/pages\/153\/revisions"}],"predecessor-version":[{"id":562,"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=\/wp\/v2\/pages\/153\/revisions\/562"}],"wp:attachment":[{"href":"https:\/\/hoctuonglai.edu.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}