Interactive Character Chatbot<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n min-height: 100vh;\r\n margin: 0;\r\n padding-top: 20px;\r\n background: url('https:\/\/digitalrise.art\/wp-content\/uploads\/2024\/06\/\u05e2\u05d9\u05e6\u05d5\u05d1-\u05dc\u05dc\u05d0-\u05e9\u05dd-27.png');\r\n background-size: cover;\r\n overflow: center;\r\n }\r\n\r\n .container {\r\n text-align: center;\r\n background: rgba(255, 255, 255, 0);\r\n padding: 20px;\r\n border-radius: 20px;\r\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);\r\n backdrop-filter: blur(10px);\r\n width: 100%;\r\n max-width: 600px;\r\n transition: height 0.3s ease;\r\n }\r\n\r\n #character-canvas {\r\n width: 100%;\r\n height: auto;\r\n border-radius: 10px;\r\n }\r\n\r\n .chat-history {\r\n max-height: 200px;\r\n overflow-y: auto;\r\n border: 1px solid #ccc;\r\n padding: 10px;\r\n margin-bottom: 20px;\r\n background: rgba(255, 255, 255, 0.6);\r\n border-radius: 10px;\r\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\r\n color: black;\r\n transition: max-height 0.3s ease;\r\n }\r\n\r\n .input-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 10px;\r\n flex-wrap: wrap; \/* \u05de\u05d0\u05e4\u05e9\u05e8 \u05dc\u05de\u05e8\u05db\u05d9\u05d1\u05d9\u05dd \u05dc\u05d4\u05e1\u05ea\u05d3\u05e8 \u05d1\u05e9\u05d5\u05e8\u05d5\u05ea \u05d1\u05de\u05d5\u05d1\u05d9\u05d9\u05dc *\/\r\n }\r\n\r\n #message-input, #url-input {\r\n width: 100%;\r\n max-width: 200px;\r\n padding: 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 10px;\r\n background: rgba(255, 255, 255, 0.1);\r\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\r\n color: black;\r\n font-size: 16px;\r\n }\r\n\r\n .styled-button {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 10px;\r\n background: linear-gradient(45deg, #6b23e0, #a855f7, #d946ef, #f472b6);\r\n color: white;\r\n cursor: pointer;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n font-size: 16px;\r\n text-shadow: 1px 1px 2px black;\r\n width: 100%;\r\n max-width: 200px;\r\n }\r\n\r\n .styled-button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n #thinking-message {\r\n display: none;\r\n font-style: italic;\r\n margin-top: 10px;\r\n color: green;\r\n font-weight: bold;\r\n animation: pulse 1s infinite;\r\n text-align: center;\r\n }\r\n\r\n @keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 50% {\r\n transform: scale(1.1);\r\n 100% {\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n .history-container {\r\n position: fixed;\r\n top: 20px;\r\n left: 20px;\r\n background: rgba(255, 255, 255, 0.9);\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n display: none;\r\n z-index: 100;\r\n }\r\n\r\n .history-entry {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .history-entry button {\r\n margin-left: 10px;\r\n }\r\n\r\n #history-button {\r\n position: fixed;\r\n top: 20px;\r\n left: 20px;\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 10px;\r\n background: linear-gradient(45deg, #6b23e0, #a855f7, #d946ef, #f472b6);\r\n color: white;\r\n cursor: pointer;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n font-size: 16px;\r\n text-shadow: 1px 1px 2px black;\r\n z-index: 101;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .container {\r\n border-radius: 10px;\r\n padding: 10px;\r\n }\r\n\r\n .input-container {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n\r\n #message-input, #url-input {\r\n max-width: 100%;\r\n }\r\n\r\n .styled-button {\r\n max-width: 100%;\r\n margin-bottom: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <canvas id=\"character-canvas\" width=\"400\" height=\"500\"><\/canvas>\r\n <div id=\"chat-history\" class=\"chat-history\"><\/div>\r\n <div id=\"thinking-message\">\u05d7\u05d5\u05e9\u05d1...<\/div>\r\n <div class=\"input-container\">\r\n <button id=\"record-button\" class=\"styled-button\">\u05d4\u05e7\u05dc\u05d8<\/button>\r\n <input type=\"text\" id=\"message-input\" class=\"styled-input\" placeholder=\"\u05db\u05ea\u05d5\u05d1 \u05d0\u05ea \u05d4\u05d4\u05d5\u05d3\u05e2\u05d4 \u05db\u05d0\u05df...\">\r\n <button id=\"send-button\" class=\"styled-button\">\u05e9\u05dc\u05d7<\/button>\r\n <\/div>\r\n <button id=\"stop-speaking-button\" class=\"styled-button\">\u05d4\u05e4\u05e1\u05e7 \u05d3\u05d9\u05d1\u05d5\u05e8<\/button>\r\n <button id=\"continue-speaking-button\" class=\"styled-button\" style=\"display:none;\">\u05d4\u05de\u05e9\u05da \u05d3\u05d9\u05d1\u05d5\u05e8<\/button>\r\n \r\n <\/div>\r\n <script src=\"https:\/\/digitalrise.art\/bot\/anime.min.js\"><\/script>\r\n <script>\r\n let isRecording = false;\r\n let recognition;\r\n let audio = null;\r\n let pausedAudioTime = 0;\r\n let pausedUtterance = null;\r\n let lipMovement, eyeMovement, headMovement;\r\n const characterCanvas = document.getElementById('character-canvas');\r\n const context = characterCanvas.getContext('2d');\r\n const characterImage = new Image();\r\n characterImage.src = 'https:\/\/digitalrise.art\/wp-content\/uploads\/2024\/06\/\u05e2\u05d9\u05e6\u05d5\u05d1-\u05dc\u05dc\u05d0-\u05e9\u05dd-30.png';\r\n\r\n characterImage.onload = () => {\r\n characterCanvas.width = characterImage.width;\r\n characterCanvas.height = characterImage.height;\r\n context.drawImage(characterImage, 0, 0, characterCanvas.width, characterCanvas.height);\r\n };\r\n\r\n const chatHistory = document.getElementById('chat-history');\r\n const messageInput = document.getElementById('message-input');\r\n const sendButton = document.getElementById('send-button');\r\n const recordButton = document.getElementById('record-button');\r\n const stopSpeakingButton = document.getElementById('stop-speaking-button');\r\n const continueSpeakingButton = document.getElementById('continue-speaking-button');\r\n const thinkingMessage = document.getElementById('thinking-message');\r\n \r\n\r\n sendButton.addEventListener('click', sendMessage);\r\n recordButton.addEventListener('click', toggleRecording);\r\n stopSpeakingButton.addEventListener('click', pauseSpeaking);\r\n continueSpeakingButton.addEventListener('click', resumeSpeaking);\r\n \r\n\r\n function sendMessage() {\r\n const message = messageInput.value.trim();\r\n if (message) {\r\n displayMessage(message, 'user');\r\n messageInput.value = '';\r\n thinkingMessage.style.display = 'block'; \/\/ Show the thinking message\r\n fetch('https:\/\/digitalrise.art\/bot\/api.php', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({ message })\r\n })\r\n .then(response => {\r\n if (!response.ok) {\r\n throw new Error(`Network response was not ok: ${response.statusText}`);\r\n }\r\n return response.json();\r\n })\r\n .then(data => {\r\n thinkingMessage.style.display = 'none'; \/\/ Hide the thinking message\r\n if (data.response) {\r\n const filteredResponse = data.response.replace(\/\\*\/g, ''); \/\/ Remove asterisks\r\n displayMessage(filteredResponse, 'bot');\r\n if (data.audioContent) {\r\n playAudio(data.audioContent);\r\n } else {\r\n speakMessage(filteredResponse);\r\n }\r\n } else if (data.error) {\r\n console.error('Error:', data.error);\r\n displayMessage('Error: ' + data.error, 'bot');\r\n }\r\n })\r\n .catch(error => {\r\n thinkingMessage.style.display = 'none'; \/\/ Hide the thinking message\r\n console.error('Fetch error:', error);\r\n displayMessage('Error: ' + error.message, 'bot');\r\n });\r\n }\r\n }\r\n\r\n function toggleRecording() {\r\n if (isRecording) {\r\n stopRecording();\r\n } else {\r\n startRecording();\r\n }\r\n }\r\n\r\n function startRecording() {\r\n if (!('webkitSpeechRecognition' in window)) {\r\n alert('\u05d3\u05e4\u05d3\u05e4\u05df \u05d6\u05d4 \u05d0\u05d9\u05e0\u05d5 \u05ea\u05d5\u05de\u05da \u05d1\u05d4\u05e7\u05dc\u05d8\u05ea \u05e7\u05d5\u05dc.');\r\n return;\r\n }\r\n recognition = new webkitSpeechRecognition();\r\n recognition.lang = 'he-IL';\r\n recognition.continuous = false;\r\n recognition.interimResults = false;\r\n\r\n recognition.onresult = (event) => {\r\n const transcript = event.results[0][0].transcript;\r\n document.getElementById('message-input').value = transcript;\r\n sendMessage();\r\n };\r\n\r\n recognition.onerror = (event) => {\r\n console.error('Error during speech recognition:', event.error);\r\n alert(`Error during speech recognition: ${event.error}`);\r\n isRecording = false;\r\n recordButton.textContent = '\u05d4\u05e7\u05dc\u05d8';\r\n };\r\n\r\n recognition.onend = () => {\r\n isRecording = false;\r\n recordButton.textContent = '\u05d4\u05e7\u05dc\u05d8';\r\n };\r\n\r\n recognition.start();\r\n isRecording = true;\r\n recordButton.textContent = '\u05e2\u05e6\u05d5\u05e8 \u05d4\u05e7\u05dc\u05d8\u05d4';\r\n }\r\n\r\n function stopRecording() {\r\n if (recognition) {\r\n recognition.stop();\r\n }\r\n isRecording = false;\r\n recordButton.textContent = '\u05d4\u05e7\u05dc\u05d8';\r\n }\r\n\r\n function displayMessage(message, sender) {\r\n const messageElement = document.createElement('div');\r\n messageElement.textContent = `${sender === 'user' ? '\u05d0\u05ea\/\u05d4' : '\u05d1\u05d5\u05d8'}: ${message}`;\r\n chatHistory.appendChild(messageElement);\r\n chatHistory.scrollTop = chatHistory.scrollHeight;\r\n }\r\n\r\n function speakMessage(message) {\r\n stopSpeaking(); \/\/ Ensure any ongoing speech is stopped before starting a new one\r\n const filteredMessage = message.replace(\/\\*\/g, ''); \/\/ Remove asterisks for speech\r\n const utterance = new SpeechSynthesisUtterance(filteredMessage);\r\n utterance.lang = \/[a-zA-Z]\/.test(message) ? 'en-US' : 'he-IL'; \/\/ Detect language by content\r\n utterance.voice = speechSynthesis.getVoices().find(voice => voice.lang === utterance.lang && voice.name.includes('Wavenet') && voice.gender === 'female');\r\n speechSynthesis.speak(utterance);\r\n utterance.onpause = () => pausedUtterance = utterance; \/\/ Store the paused utterance\r\n animateSpeaking();\r\n }\r\n\r\n function playAudio(base64Audio) {\r\n if (audio) {\r\n audio.pause(); \/\/ Stop any currently playing audio\r\n audio.currentTime = 0;\r\n }\r\n audio = new Audio(`data:audio\/mp3;base64,${base64Audio}`);\r\n audio.play().catch(error => {\r\n console.error('Audio playback error:', error);\r\n });\r\n audio.onpause = () => pausedAudioTime = audio.currentTime; \/\/ Store the paused time\r\n }\r\n\r\n function pauseSpeaking() {\r\n speechSynthesis.pause(); \/\/ Pause speech synthesis\r\n if (audio) {\r\n audio.pause(); \/\/ Pause any currently playing audio\r\n }\r\n stopSpeakingButton.style.display = 'none';\r\n continueSpeakingButton.style.display = 'inline-block';\r\n stopAnimations();\r\n }\r\n\r\n function resumeSpeaking() {\r\n speechSynthesis.resume(); \/\/ Resume speech synthesis\r\n if (audio && pausedAudioTime) {\r\n audio.currentTime = pausedAudioTime; \/\/ Resume audio from the paused time\r\n audio.play().catch(error => {\r\n console.error('Audio playback error:', error);\r\n });\r\n }\r\n continueSpeakingButton.style.display = 'none';\r\n stopSpeakingButton.style.display = 'inline-block';\r\n animateSpeaking();\r\n }\r\n\r\n function stopSpeaking() {\r\n speechSynthesis.cancel(); \/\/ Stop any ongoing speech synthesis\r\n if (audio) {\r\n audio.pause(); \/\/ Stop any currently playing audio\r\n audio.currentTime = 0;\r\n }\r\n pausedAudioTime = 0;\r\n pausedUtterance = null;\r\n continueSpeakingButton.style.display = 'none';\r\n stopSpeakingButton.style.display = 'inline-block';\r\n stopAnimations();\r\n }\r\n\r\n function handleFileUpload(event) {\r\n const file = event.target.files[0];\r\n if (file) {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n const content = e.target.result;\r\n fetch('https:\/\/digitalrise.art\/bot\/api.php', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({ content })\r\n })\r\n .then(response => response.json())\r\n .then(data => {\r\n if (data.response) {\r\n const filteredResponse = data.response.replace(\/\\*\/g, ''); \/\/ Remove asterisks\r\n displayMessage(filteredResponse, 'bot');\r\n speakMessage(filteredResponse);\r\n }\r\n })\r\n .catch(error => console.error('Error:', error));\r\n };\r\n reader.readAsText(file);\r\n }\r\n }\r\n\r\n function animateSpeaking() {\r\n console.log(\"Starting animations\");\r\n lipMovement = anime({\r\n targets: '#character-canvas',\r\n translateY: [\r\n { value: -2, duration: 100 },\r\n { value: 2, duration: 100 }\r\n ],\r\n easing: 'easeInOutSine',\r\n loop: true\r\n });\r\n\r\n eyeMovement = anime({\r\n targets: '#character-canvas',\r\n translateX: [\r\n { value: -2, duration: 500 },\r\n { value: 2, duration: 500 }\r\n ],\r\n easing: 'easeInOutSine',\r\n loop: true\r\n });\r\n\r\n headMovement = anime({\r\n targets: '#character-canvas',\r\n rotate: [\r\n { value: -0.02, duration: 1000 },\r\n { value: 0.02, duration: 1000 }\r\n ],\r\n easing: 'easeInOutSine',\r\n loop: true\r\n });\r\n }\r\n\r\n function stopAnimations() {\r\n console.log(\"Stopping animations\");\r\n if (lipMovement) lipMovement.pause();\r\n if (eyeMovement) eyeMovement.pause();\r\n if (headMovement) headMovement.pause();\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>Interactive Character Chatbot \u05d7\u05d5\u05e9\u05d1… \u05d4\u05e7\u05dc\u05d8 \u05e9\u05dc\u05d7 \u05d4\u05e4\u05e1\u05e7 \u05d3\u05d9\u05d1\u05d5\u05e8 \u05d4\u05de\u05e9\u05da \u05d3\u05d9\u05d1\u05d5\u05e8<\/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-3910","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3910","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=3910"}],"version-history":[{"count":462,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3910\/revisions"}],"predecessor-version":[{"id":7705,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3910\/revisions\/7705"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3910"}],"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 Interactive Character Chatbot<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n min-height: 100vh;\r\n margin: 0;\r\n padding-top: 20px;\r\n background: url('https:\/\/digitalrise.art\/wp-content\/uploads\/2024\/06\/\u05e2\u05d9\u05e6\u05d5\u05d1-\u05dc\u05dc\u05d0-\u05e9\u05dd-27.png');\r\n background-size: cover;\r\n overflow: center;\r\n }\r\n\r\n .container {\r\n text-align: center;\r\n background: rgba(255, 255, 255, 0);\r\n padding: 20px;\r\n border-radius: 20px;\r\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);\r\n backdrop-filter: blur(10px);\r\n width: 100%;\r\n max-width: 600px;\r\n transition: height 0.3s ease;\r\n }\r\n\r\n #character-canvas {\r\n width: 100%;\r\n height: auto;\r\n border-radius: 10px;\r\n }\r\n\r\n .chat-history {\r\n max-height: 200px;\r\n overflow-y: auto;\r\n border: 1px solid #ccc;\r\n padding: 10px;\r\n margin-bottom: 20px;\r\n background: rgba(255, 255, 255, 0.6);\r\n border-radius: 10px;\r\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\r\n color: black;\r\n transition: max-height 0.3s ease;\r\n }\r\n\r\n .input-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 10px;\r\n flex-wrap: wrap; \/* \u05de\u05d0\u05e4\u05e9\u05e8 \u05dc\u05de\u05e8\u05db\u05d9\u05d1\u05d9\u05dd \u05dc\u05d4\u05e1\u05ea\u05d3\u05e8 \u05d1\u05e9\u05d5\u05e8\u05d5\u05ea \u05d1\u05de\u05d5\u05d1\u05d9\u05d9\u05dc *\/\r\n }\r\n\r\n #message-input, #url-input {\r\n width: 100%;\r\n max-width: 200px;\r\n padding: 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 10px;\r\n background: rgba(255, 255, 255, 0.1);\r\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\r\n color: black;\r\n font-size: 16px;\r\n }\r\n\r\n .styled-button {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 10px;\r\n background: linear-gradient(45deg, #6b23e0, #a855f7, #d946ef, #f472b6);\r\n color: white;\r\n cursor: pointer;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n font-size: 16px;\r\n text-shadow: 1px 1px 2px black;\r\n width: 100%;\r\n max-width: 200px;\r\n }\r\n\r\n .styled-button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n #thinking-message {\r\n display: none;\r\n font-style: italic;\r\n margin-top: 10px;\r\n color: green;\r\n font-weight: bold;\r\n animation: pulse 1s infinite;\r\n text-align: center;\r\n }\r\n\r\n @keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 50% {\r\n transform: scale(1.1);\r\n 100% {\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n .history-container {\r\n position: fixed;\r\n top: 20px;\r\n left: 20px;\r\n background: rgba(255, 255, 255, 0.9);\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n display: none;\r\n z-index: 100;\r\n }\r\n\r\n .history-entry {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .history-entry button {\r\n margin-left: 10px;\r\n }\r\n\r\n #history-button {\r\n position: fixed;\r\n top: 20px;\r\n left: 20px;\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 10px;\r\n background: linear-gradient(45deg, #6b23e0, #a855f7, #d946ef, #f472b6);\r\n color: white;\r\n cursor: pointer;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n font-size: 16px;\r\n text-shadow: 1px 1px 2px black;\r\n z-index: 101;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .container {\r\n border-radius: 10px;\r\n padding: 10px;\r\n }\r\n\r\n .input-container {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n\r\n #message-input, #url-input {\r\n max-width: 100%;\r\n }\r\n\r\n .styled-button {\r\n max-width: 100%;\r\n margin-bottom: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <canvas id=\"character-canvas\" width=\"400\" height=\"500\"><\/canvas>\r\n <div id=\"chat-history\" class=\"chat-history\"><\/div>\r\n <div id=\"thinking-message\">\u05d7\u05d5\u05e9\u05d1...<\/div>\r\n <div class=\"input-container\">\r\n <button id=\"record-button\" class=\"styled-button\">\u05d4\u05e7\u05dc\u05d8<\/button>\r\n <input type=\"text\" id=\"message-input\" class=\"styled-input\" placeholder=\"\u05db\u05ea\u05d5\u05d1 \u05d0\u05ea \u05d4\u05d4\u05d5\u05d3\u05e2\u05d4 \u05db\u05d0\u05df...\">\r\n <button id=\"send-button\" class=\"styled-button\">\u05e9\u05dc\u05d7<\/button>\r\n <\/div>\r\n <button id=\"stop-speaking-button\" class=\"styled-button\">\u05d4\u05e4\u05e1\u05e7 \u05d3\u05d9\u05d1\u05d5\u05e8<\/button>\r\n <button id=\"continue-speaking-button\" class=\"styled-button\" style=\"display:none;\">\u05d4\u05de\u05e9\u05da \u05d3\u05d9\u05d1\u05d5\u05e8<\/button>\r\n \r\n <\/div>\r\n <script src=\"https:\/\/digitalrise.art\/bot\/anime.min.js\"><\/script>\r\n <script>\r\n let isRecording = false;\r\n let recognition;\r\n let audio = null;\r\n let pausedAudioTime = 0;\r\n let pausedUtterance = null;\r\n let lipMovement, eyeMovement, headMovement;\r\n const characterCanvas = document.getElementById('character-canvas');\r\n const context = characterCanvas.getContext('2d');\r\n const characterImage = new Image();\r\n characterImage.src = 'https:\/\/digitalrise.art\/wp-content\/uploads\/2024\/06\/\u05e2\u05d9\u05e6\u05d5\u05d1-\u05dc\u05dc\u05d0-\u05e9\u05dd-30.png';\r\n\r\n characterImage.onload = () => {\r\n characterCanvas.width = characterImage.width;\r\n characterCanvas.height = characterImage.height;\r\n context.drawImage(characterImage, 0, 0, characterCanvas.width, characterCanvas.height);\r\n };\r\n\r\n const chatHistory = document.getElementById('chat-history');\r\n const messageInput = document.getElementById('message-input');\r\n const sendButton = document.getElementById('send-button');\r\n const recordButton = document.getElementById('record-button');\r\n const stopSpeakingButton = document.getElementById('stop-speaking-button');\r\n const continueSpeakingButton = document.getElementById('continue-speaking-button');\r\n const thinkingMessage = document.getElementById('thinking-message');\r\n \r\n\r\n sendButton.addEventListener('click', sendMessage);\r\n recordButton.addEventListener('click', toggleRecording);\r\n stopSpeakingButton.addEventListener('click', pauseSpeaking);\r\n continueSpeakingButton.addEventListener('click', resumeSpeaking);\r\n \r\n\r\n function sendMessage() {\r\n const message = messageInput.value.trim();\r\n if (message) {\r\n displayMessage(message, 'user');\r\n messageInput.value = '';\r\n thinkingMessage.style.display = 'block'; \/\/ Show the thinking message\r\n fetch('https:\/\/digitalrise.art\/bot\/api.php', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({ message })\r\n })\r\n .then(response => {\r\n if (!response.ok) {\r\n throw new Error(`Network response was not ok: ${response.statusText}`);\r\n }\r\n return response.json();\r\n })\r\n .then(data => {\r\n thinkingMessage.style.display = 'none'; \/\/ Hide the thinking message\r\n if (data.response) {\r\n const filteredResponse = data.response.replace(\/\\*\/g, ''); \/\/ Remove asterisks\r\n displayMessage(filteredResponse, 'bot');\r\n if (data.audioContent) {\r\n playAudio(data.audioContent);\r\n } else {\r\n speakMessage(filteredResponse);\r\n }\r\n } else if (data.error) {\r\n console.error('Error:', data.error);\r\n displayMessage('Error: ' + data.error, 'bot');\r\n }\r\n })\r\n .catch(error => {\r\n thinkingMessage.style.display = 'none'; \/\/ Hide the thinking message\r\n console.error('Fetch error:', error);\r\n displayMessage('Error: ' + error.message, 'bot');\r\n });\r\n }\r\n }\r\n\r\n function toggleRecording() {\r\n if (isRecording) {\r\n stopRecording();\r\n } else {\r\n startRecording();\r\n }\r\n }\r\n\r\n function startRecording() {\r\n if (!('webkitSpeechRecognition' in window)) {\r\n alert('\u05d3\u05e4\u05d3\u05e4\u05df \u05d6\u05d4 \u05d0\u05d9\u05e0\u05d5 \u05ea\u05d5\u05de\u05da \u05d1\u05d4\u05e7\u05dc\u05d8\u05ea \u05e7\u05d5\u05dc.');\r\n return;\r\n }\r\n recognition = new webkitSpeechRecognition();\r\n recognition.lang = 'he-IL';\r\n recognition.continuous = false;\r\n recognition.interimResults = false;\r\n\r\n recognition.onresult = (event) => {\r\n const transcript = event.results[0][0].transcript;\r\n document.getElementById('message-input').value = transcript;\r\n sendMessage();\r\n };\r\n\r\n recognition.onerror = (event) => {\r\n console.error('Error during speech recognition:', event.error);\r\n alert(`Error during speech recognition: ${event.error}`);\r\n isRecording = false;\r\n recordButton.textContent = '\u05d4\u05e7\u05dc\u05d8';\r\n };\r\n\r\n recognition.onend = () => {\r\n isRecording = false;\r\n recordButton.textContent = '\u05d4\u05e7\u05dc\u05d8';\r\n };\r\n\r\n recognition.start();\r\n isRecording = true;\r\n recordButton.textContent = '\u05e2\u05e6\u05d5\u05e8 \u05d4\u05e7\u05dc\u05d8\u05d4';\r\n }\r\n\r\n function stopRecording() {\r\n if (recognition) {\r\n recognition.stop();\r\n }\r\n isRecording = false;\r\n recordButton.textContent = '\u05d4\u05e7\u05dc\u05d8';\r\n }\r\n\r\n function displayMessage(message, sender) {\r\n const messageElement = document.createElement('div');\r\n messageElement.textContent = `${sender === 'user' ? '\u05d0\u05ea\/\u05d4' : '\u05d1\u05d5\u05d8'}: ${message}`;\r\n chatHistory.appendChild(messageElement);\r\n chatHistory.scrollTop = chatHistory.scrollHeight;\r\n }\r\n\r\n function speakMessage(message) {\r\n stopSpeaking(); \/\/ Ensure any ongoing speech is stopped before starting a new one\r\n const filteredMessage = message.replace(\/\\*\/g, ''); \/\/ Remove asterisks for speech\r\n const utterance = new SpeechSynthesisUtterance(filteredMessage);\r\n utterance.lang = \/[a-zA-Z]\/.test(message) ? 'en-US' : 'he-IL'; \/\/ Detect language by content\r\n utterance.voice = speechSynthesis.getVoices().find(voice => voice.lang === utterance.lang && voice.name.includes('Wavenet') && voice.gender === 'female');\r\n speechSynthesis.speak(utterance);\r\n utterance.onpause = () => pausedUtterance = utterance; \/\/ Store the paused utterance\r\n animateSpeaking();\r\n }\r\n\r\n function playAudio(base64Audio) {\r\n if (audio) {\r\n audio.pause(); \/\/ Stop any currently playing audio\r\n audio.currentTime = 0;\r\n }\r\n audio = new Audio(`data:audio\/mp3;base64,${base64Audio}`);\r\n audio.play().catch(error => {\r\n console.error('Audio playback error:', error);\r\n });\r\n audio.onpause = () => pausedAudioTime = audio.currentTime; \/\/ Store the paused time\r\n }\r\n\r\n function pauseSpeaking() {\r\n speechSynthesis.pause(); \/\/ Pause speech synthesis\r\n if (audio) {\r\n audio.pause(); \/\/ Pause any currently playing audio\r\n }\r\n stopSpeakingButton.style.display = 'none';\r\n continueSpeakingButton.style.display = 'inline-block';\r\n stopAnimations();\r\n }\r\n\r\n function resumeSpeaking() {\r\n speechSynthesis.resume(); \/\/ Resume speech synthesis\r\n if (audio && pausedAudioTime) {\r\n audio.currentTime = pausedAudioTime; \/\/ Resume audio from the paused time\r\n audio.play().catch(error => {\r\n console.error('Audio playback error:', error);\r\n });\r\n }\r\n continueSpeakingButton.style.display = 'none';\r\n stopSpeakingButton.style.display = 'inline-block';\r\n animateSpeaking();\r\n }\r\n\r\n function stopSpeaking() {\r\n speechSynthesis.cancel(); \/\/ Stop any ongoing speech synthesis\r\n if (audio) {\r\n audio.pause(); \/\/ Stop any currently playing audio\r\n audio.currentTime = 0;\r\n }\r\n pausedAudioTime = 0;\r\n pausedUtterance = null;\r\n continueSpeakingButton.style.display = 'none';\r\n stopSpeakingButton.style.display = 'inline-block';\r\n stopAnimations();\r\n }\r\n\r\n function handleFileUpload(event) {\r\n const file = event.target.files[0];\r\n if (file) {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n const content = e.target.result;\r\n fetch('https:\/\/digitalrise.art\/bot\/api.php', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({ content })\r\n })\r\n .then(response => response.json())\r\n .then(data => {\r\n if (data.response) {\r\n const filteredResponse = data.response.replace(\/\\*\/g, ''); \/\/ Remove asterisks\r\n displayMessage(filteredResponse, 'bot');\r\n speakMessage(filteredResponse);\r\n }\r\n })\r\n .catch(error => console.error('Error:', error));\r\n };\r\n reader.readAsText(file);\r\n }\r\n }\r\n\r\n function animateSpeaking() {\r\n console.log(\"Starting animations\");\r\n lipMovement = anime({\r\n targets: '#character-canvas',\r\n translateY: [\r\n { value: -2, duration: 100 },\r\n { value: 2, duration: 100 }\r\n ],\r\n easing: 'easeInOutSine',\r\n loop: true\r\n });\r\n\r\n eyeMovement = anime({\r\n targets: '#character-canvas',\r\n translateX: [\r\n { value: -2, duration: 500 },\r\n { value: 2, duration: 500 }\r\n ],\r\n easing: 'easeInOutSine',\r\n loop: true\r\n });\r\n\r\n headMovement = anime({\r\n targets: '#character-canvas',\r\n rotate: [\r\n { value: -0.02, duration: 1000 },\r\n { value: 0.02, duration: 1000 }\r\n ],\r\n easing: 'easeInOutSine',\r\n loop: true\r\n });\r\n }\r\n\r\n function stopAnimations() {\r\n console.log(\"Stopping animations\");\r\n if (lipMovement) lipMovement.pause();\r\n if (eyeMovement) eyeMovement.pause();\r\n if (headMovement) headMovement.pause();\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>Interactive Character Chatbot \u05d7\u05d5\u05e9\u05d1… \u05d4\u05e7\u05dc\u05d8 \u05e9\u05dc\u05d7 \u05d4\u05e4\u05e1\u05e7 \u05d3\u05d9\u05d1\u05d5\u05e8 \u05d4\u05de\u05e9\u05da \u05d3\u05d9\u05d1\u05d5\u05e8<\/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-3910","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3910","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=3910"}],"version-history":[{"count":462,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3910\/revisions"}],"predecessor-version":[{"id":7705,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/3910\/revisions\/7705"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}