Talking Cat<\/title>\r\n <style>\r\n .cat-container {\r\n position: relative;\r\n width: 300px;\r\n height: 300px;\r\n }\r\n\r\n #cat-image {\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .speech-bubble {\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: white;\r\n border: 2px solid black;\r\n border-radius: 20px;\r\n padding: 10px;\r\n display: none;\r\n }\r\n\r\n #speech-text {\r\n font-family: Arial, sans-serif;\r\n font-size: 16px;\r\n }\r\n <\/style>\r\n <script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs@2.0.0\"><\/script>\r\n <script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/face-api.js@0.22.2\/dist\/face-api.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div class=\"cat-container\">\r\n <img decoding=\"async\" id=\"cat-image\" src=\"human_face.png\" alt=\"Cat\">\r\n <div class=\"speech-bubble\">\r\n <div id=\"speech-text\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n const catImage = document.getElementById('cat-image');\r\n const speechBubble = document.querySelector('.speech-bubble');\r\n const speechText = document.getElementById('speech-text');\r\n\r\n \/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d4\u05e6\u05d2\u05ea \u05d3\u05d9\u05d1\u05d5\u05e8\r\n function speak(message) {\r\n speechText.innerText = message;\r\n speechBubble.style.display = 'block';\r\n setTimeout(() => {\r\n speechBubble.style.display = 'none';\r\n }, 3000); \/\/ \u05de\u05e1\u05e4\u05e8 \u05d4\u05de\u05d9\u05dc\u05d9\u05e9\u05d9\u05d5\u05ea \u05e2\u05d3 \u05e9\u05d4\u05d3\u05d9\u05d1\u05d5\u05e8 \u05e0\u05e1\u05d2\u05e8 \u05d0\u05d5\u05d8\u05d5\u05de\u05d8\u05d9\u05ea\r\n }\r\n\r\n \/\/ \u05d3\u05d5\u05d2\u05de\u05d4 \u05dc\u05e7\u05e8\u05d9\u05d0\u05d4 \u05dc\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d3\u05d9\u05d1\u05d5\u05e8\r\n speak('\u05de\u05d4 \u05e0\u05e9\u05de\u05e2? \u05d0\u05e0\u05d9 \u05d7\u05ea\u05d5\u05dc \u05de\u05d3\u05d1\u05e8!');\r\n\r\n async function loadModels() {\r\n await faceapi.nets.tinyFaceDetector.loadFromUri('\/models');\r\n await faceapi.nets.faceLandmark68Net.loadFromUri('\/models');\r\n }\r\n\r\n async function detectFace() {\r\n const detections = await faceapi.detectAllFaces(catImage, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks();\r\n const resizedDetections = faceapi.resizeResults(detections, {\r\n width: catImage.width,\r\n height: catImage.height\r\n });\r\n\r\n \/\/ \u05dc\u05e6\u05d9\u05d9\u05e8 \u05d0\u05ea \u05d4\u05d6\u05d9\u05d4\u05d5\u05d9 \u05e2\u05dc \u05d4\u05e7\u05e0\u05d1\u05e1\r\n const canvas = faceapi.createCanvasFromMedia(catImage);\r\n document.body.append(canvas);\r\n faceapi.matchDimensions(canvas, { width: catImage.width, height: catImage.height });\r\n faceapi.draw.drawDetections(canvas, resizedDetections);\r\n faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);\r\n\r\n \/\/ \u05d6\u05d9\u05d4\u05d5\u05d9 \u05e2\u05d9\u05e0\u05d9\u05d9\u05dd \u05d5\u05e4\u05d4 \u05d5\u05d4\u05e0\u05e4\u05e9\u05d4\r\n if (resizedDetections.length > 0) {\r\n const landmarks = resizedDetections[0].landmarks;\r\n const leftEye = landmarks.getLeftEye();\r\n const rightEye = landmarks.getRightEye();\r\n const mouth = landmarks.getMouth();\r\n\r\n animateEyesAndMouth(leftEye, rightEye, mouth);\r\n }\r\n }\r\n\r\n function animateEyesAndMouth(leftEye, rightEye, mouth) {\r\n \/\/ \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05dc\u05e2\u05d9\u05e0\u05d9\u05d9\u05dd \u05d5\u05dc\u05e4\u05d4\r\n console.log('Left Eye:', leftEye);\r\n console.log('Right Eye:', rightEye);\r\n console.log('Mouth:', mouth);\r\n\r\n \/\/ \u05dc\u05d3\u05d5\u05d2\u05de\u05d4, \u05e0\u05d9\u05ea\u05df \u05dc\u05d4\u05d6\u05d9\u05d6 \u05d0\u05ea \u05d4\u05e2\u05d9\u05e0\u05d9\u05d9\u05dd \u05d5\u05d4\u05e4\u05d4 \u05dc\u05e4\u05d9 \u05de\u05d9\u05e7\u05d5\u05de\u05dd\r\n leftEye.forEach(point => {\r\n createAnimationCircle(point.x, point.y, 'blue');\r\n });\r\n\r\n rightEye.forEach(point => {\r\n createAnimationCircle(point.x, point.y, 'green');\r\n });\r\n\r\n mouth.forEach(point => {\r\n createAnimationCircle(point.x, point.y, 'red');\r\n });\r\n }\r\n\r\n function createAnimationCircle(x, y, color) {\r\n const circle = document.createElement('div');\r\n circle.style.position = 'absolute';\r\n circle.style.width = '5px';\r\n circle.style.height = '5px';\r\n circle.style.borderRadius = '50%';\r\n circle.style.backgroundColor = color;\r\n circle.style.left = `${x}px`;\r\n circle.style.top = `${y}px`;\r\n document.body.append(circle);\r\n\r\n \/\/ \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05e4\u05e9\u05d5\u05d8\u05d4 \u05dc\u05d3\u05d5\u05d2\u05de\u05d4 - \u05dc\u05e9\u05d9\u05e0\u05d5\u05d9 \u05de\u05d9\u05e7\u05d5\u05dd\/\u05d2\u05d5\u05d3\u05dc\r\n setInterval(() => {\r\n circle.style.transform = `translate(${Math.random() * 10 - 5}px, ${Math.random() * 10 - 5}px)`;\r\n }, 100);\r\n }\r\n\r\n window.addEventListener('load', async () => {\r\n await loadModels();\r\n await detectFace();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\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>Talking Cat<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"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-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-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-gradient":""}},"ast-content-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-gradient":""},"tablet":{"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-gradient":""},"mobile":{"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-gradient":""}},"footnotes":""},"class_list":["post-3850","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3850"}],"version-history":[{"count":91,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3850\/revisions"}],"predecessor-version":[{"id":4986,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3850\/revisions\/4986"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3850"}],"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\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Talking Cat<\/title>\r\n <style>\r\n .cat-container {\r\n position: relative;\r\n width: 300px;\r\n height: 300px;\r\n }\r\n\r\n #cat-image {\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .speech-bubble {\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: white;\r\n border: 2px solid black;\r\n border-radius: 20px;\r\n padding: 10px;\r\n display: none;\r\n }\r\n\r\n #speech-text {\r\n font-family: Arial, sans-serif;\r\n font-size: 16px;\r\n }\r\n <\/style>\r\n <script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs@2.0.0\"><\/script>\r\n <script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/face-api.js@0.22.2\/dist\/face-api.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div class=\"cat-container\">\r\n <img decoding=\"async\" id=\"cat-image\" src=\"human_face.png\" alt=\"Cat\">\r\n <div class=\"speech-bubble\">\r\n <div id=\"speech-text\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n const catImage = document.getElementById('cat-image');\r\n const speechBubble = document.querySelector('.speech-bubble');\r\n const speechText = document.getElementById('speech-text');\r\n\r\n \/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d4\u05e6\u05d2\u05ea \u05d3\u05d9\u05d1\u05d5\u05e8\r\n function speak(message) {\r\n speechText.innerText = message;\r\n speechBubble.style.display = 'block';\r\n setTimeout(() => {\r\n speechBubble.style.display = 'none';\r\n }, 3000); \/\/ \u05de\u05e1\u05e4\u05e8 \u05d4\u05de\u05d9\u05dc\u05d9\u05e9\u05d9\u05d5\u05ea \u05e2\u05d3 \u05e9\u05d4\u05d3\u05d9\u05d1\u05d5\u05e8 \u05e0\u05e1\u05d2\u05e8 \u05d0\u05d5\u05d8\u05d5\u05de\u05d8\u05d9\u05ea\r\n }\r\n\r\n \/\/ \u05d3\u05d5\u05d2\u05de\u05d4 \u05dc\u05e7\u05e8\u05d9\u05d0\u05d4 \u05dc\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d4 \u05dc\u05d3\u05d9\u05d1\u05d5\u05e8\r\n speak('\u05de\u05d4 \u05e0\u05e9\u05de\u05e2? \u05d0\u05e0\u05d9 \u05d7\u05ea\u05d5\u05dc \u05de\u05d3\u05d1\u05e8!');\r\n\r\n async function loadModels() {\r\n await faceapi.nets.tinyFaceDetector.loadFromUri('\/models');\r\n await faceapi.nets.faceLandmark68Net.loadFromUri('\/models');\r\n }\r\n\r\n async function detectFace() {\r\n const detections = await faceapi.detectAllFaces(catImage, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks();\r\n const resizedDetections = faceapi.resizeResults(detections, {\r\n width: catImage.width,\r\n height: catImage.height\r\n });\r\n\r\n \/\/ \u05dc\u05e6\u05d9\u05d9\u05e8 \u05d0\u05ea \u05d4\u05d6\u05d9\u05d4\u05d5\u05d9 \u05e2\u05dc \u05d4\u05e7\u05e0\u05d1\u05e1\r\n const canvas = faceapi.createCanvasFromMedia(catImage);\r\n document.body.append(canvas);\r\n faceapi.matchDimensions(canvas, { width: catImage.width, height: catImage.height });\r\n faceapi.draw.drawDetections(canvas, resizedDetections);\r\n faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);\r\n\r\n \/\/ \u05d6\u05d9\u05d4\u05d5\u05d9 \u05e2\u05d9\u05e0\u05d9\u05d9\u05dd \u05d5\u05e4\u05d4 \u05d5\u05d4\u05e0\u05e4\u05e9\u05d4\r\n if (resizedDetections.length > 0) {\r\n const landmarks = resizedDetections[0].landmarks;\r\n const leftEye = landmarks.getLeftEye();\r\n const rightEye = landmarks.getRightEye();\r\n const mouth = landmarks.getMouth();\r\n\r\n animateEyesAndMouth(leftEye, rightEye, mouth);\r\n }\r\n }\r\n\r\n function animateEyesAndMouth(leftEye, rightEye, mouth) {\r\n \/\/ \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05dc\u05e2\u05d9\u05e0\u05d9\u05d9\u05dd \u05d5\u05dc\u05e4\u05d4\r\n console.log('Left Eye:', leftEye);\r\n console.log('Right Eye:', rightEye);\r\n console.log('Mouth:', mouth);\r\n\r\n \/\/ \u05dc\u05d3\u05d5\u05d2\u05de\u05d4, \u05e0\u05d9\u05ea\u05df \u05dc\u05d4\u05d6\u05d9\u05d6 \u05d0\u05ea \u05d4\u05e2\u05d9\u05e0\u05d9\u05d9\u05dd \u05d5\u05d4\u05e4\u05d4 \u05dc\u05e4\u05d9 \u05de\u05d9\u05e7\u05d5\u05de\u05dd\r\n leftEye.forEach(point => {\r\n createAnimationCircle(point.x, point.y, 'blue');\r\n });\r\n\r\n rightEye.forEach(point => {\r\n createAnimationCircle(point.x, point.y, 'green');\r\n });\r\n\r\n mouth.forEach(point => {\r\n createAnimationCircle(point.x, point.y, 'red');\r\n });\r\n }\r\n\r\n function createAnimationCircle(x, y, color) {\r\n const circle = document.createElement('div');\r\n circle.style.position = 'absolute';\r\n circle.style.width = '5px';\r\n circle.style.height = '5px';\r\n circle.style.borderRadius = '50%';\r\n circle.style.backgroundColor = color;\r\n circle.style.left = `${x}px`;\r\n circle.style.top = `${y}px`;\r\n document.body.append(circle);\r\n\r\n \/\/ \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05e4\u05e9\u05d5\u05d8\u05d4 \u05dc\u05d3\u05d5\u05d2\u05de\u05d4 - \u05dc\u05e9\u05d9\u05e0\u05d5\u05d9 \u05de\u05d9\u05e7\u05d5\u05dd\/\u05d2\u05d5\u05d3\u05dc\r\n setInterval(() => {\r\n circle.style.transform = `translate(${Math.random() * 10 - 5}px, ${Math.random() * 10 - 5}px)`;\r\n }, 100);\r\n }\r\n\r\n window.addEventListener('load', async () => {\r\n await loadModels();\r\n await detectFace();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\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>Talking Cat<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"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-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-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-gradient":""}},"ast-content-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-gradient":""},"tablet":{"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-gradient":""},"mobile":{"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-gradient":""}},"footnotes":""},"class_list":["post-3850","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3850"}],"version-history":[{"count":91,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3850\/revisions"}],"predecessor-version":[{"id":4986,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3850\/revisions\/4986"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}