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 height: 100vh;\r\n margin: 0;\r\n padding-top: 20px;\r\n background: url('https:\/\/digitalrise.art\/wp-content\/uploads\/2024\/04\/\u05e2\u05d9\u05e6\u05d5\u05d1-\u05dc\u05dc\u05d0-\u05e9\u05dd-17.png') no-repeat center center fixed;\r\n background-size: cover;\r\n overflow: auto;\r\n }\r\n\r\n .container {\r\n text-align: center;\r\n background: rgba(255, 255, 255, 0.3);\r\n padding: 20px;\r\n border-radius: 30px;\r\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);\r\n width: 100%;\r\n max-width: 600px;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n #character-container {\r\n position: relative;\r\n width: 400px;\r\n height: 500px;\r\n margin: 0 auto;\r\n overflow: hidden;\r\n }\r\n\r\n #mirror-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n #character-svg {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .chat-history {\r\n max-height: 200px;\r\n overflow-y: auto;\r\n border: 1px solid rgba(204, 204, 204, 0.5);\r\n padding: 10px;\r\n margin-bottom: 20px;\r\n background: rgba(255, 255, 255, 0.5);\r\n border-radius: 20px;\r\n text-align: right;\r\n }\r\n\r\n .input-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n #message-input {\r\n width: 100%;\r\n padding: 10px;\r\n border: 1px solid rgba(204, 204, 204, 0.5);\r\n border-radius: 15px;\r\n resize: vertical;\r\n background: rgba(255, 255, 255, 0.5);\r\n text-align: right;\r\n }\r\n\r\n .styled-button, #file-label {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 15px;\r\n background: linear-gradient(45deg, rgba(107, 35, 224, 0.7), rgba(168, 85, 247, 0.7), rgba(217, 70, 239, 0.7), rgba(244, 114, 182, 0.7));\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .styled-button:hover, #file-label:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n #status-message {\r\n font-style: italic;\r\n margin-top: 10px;\r\n color: rgba(102, 102, 102, 0.8);\r\n }\r\n\r\n #file-input {\r\n display: none;\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.7);\r\n padding: 20px;\r\n border-radius: 20px;\r\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);\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 input {\r\n flex-grow: 1;\r\n margin-right: 10px;\r\n padding: 5px;\r\n border: 1px solid rgba(204, 204, 204, 0.5);\r\n border-radius: 10px;\r\n background: rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .history-entry button {\r\n padding: 5px 10px;\r\n margin-left: 5px;\r\n border: none;\r\n border-radius: 10px;\r\n background-color: rgba(107, 35, 224, 0.7);\r\n color: white;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .history-entry button:hover {\r\n background-color: rgba(74, 14, 178, 0.7);\r\n }\r\n\r\n #history-button {\r\n position: fixed;\r\n top: 20px;\r\n left: 20px;\r\n z-index: 101;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <button id=\"history-button\" class=\"styled-button\">\u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05e9\u05d9\u05d7\u05d4<\/button>\r\n <div class=\"history-container\" id=\"history-container\"><\/div>\r\n <div class=\"container\">\r\n <div id=\"character-container\">\r\n <img decoding=\"async\" id=\"character-image\" src=\"https:\/\/digitalrise.art\/wp-content\/uploads\/2024\/06\/\u05e2\u05d9\u05e6\u05d5\u05d1-\u05dc\u05dc\u05d0-\u05e9\u05dd-30.png\" alt=\"Character\">\r\n <\/div>\r\n <div id=\"chat-history\" class=\"chat-history\"><\/div>\r\n <div id=\"status-message\">\u05de\u05de\u05ea\u05d9\u05df \u05dc\u05e4\u05e2\u05d5\u05dc\u05d4...<\/div>\r\n <div class=\"input-container\">\r\n <button id=\"record-button\" class=\"styled-button\">\u05d4\u05e7\u05dc\u05d8<\/button>\r\n <textarea id=\"message-input\" class=\"styled-input\" placeholder=\"\u05db\u05ea\u05d5\u05d1 \u05d0\u05ea \u05d4\u05d4\u05d5\u05d3\u05e2\u05d4 \u05db\u05d0\u05df...\"><\/textarea>\r\n <label for=\"file-input\" id=\"file-label\" class=\"styled-button\">\u05d1\u05d7\u05e8 \u05e7\u05d5\u05d1\u05e5<\/label>\r\n <input type=\"file\" id=\"file-input\" class=\"styled-input\">\r\n <div id=\"file-name\"><\/div>\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 <\/div>\r\n\r\n <script>\r\n \/\/ Constants\r\n const CHARACTER_IMAGE_URL = 'https:\/\/digitalrise.art\/wp-content\/uploads\/2024\/06\/\u05e2\u05d9\u05e6\u05d5\u05d1-\u05dc\u05dc\u05d0-\u05e9\u05dd-30.png';\r\n const EMOTIONS = {\r\n NEUTRAL: 'neutral',\r\n HAPPY: 'happy',\r\n SAD: 'sad',\r\n SURPRISED: 'surprised',\r\n CONFUSED: 'confused'\r\n };\r\n\r\n \/\/ Global variables\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 isSpeaking = false;\r\n let currentEmotion = EMOTIONS.NEUTRAL;\r\n\r\n \/\/ DOM Elements\r\n const characterContainer = document.getElementById('character-container');\r\n const characterImage = document.getElementById('character-image');\r\n const chatHistory = document.getElementById('chat-history');\r\n const messageInput = document.getElementById('message-input');\r\n const fileInput = document.getElementById('file-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 statusMessage = document.getElementById('status-message');\r\n const historyButton = document.getElementById('history-button');\r\n const historyContainer = document.getElementById('history-container');\r\n const fileName = document.getElementById('file-name');\r\n\r\n \/\/ Character Animation Functions\r\n function initializeCharacter() {\r\n characterImage.src = CHARACTER_IMAGE_URL;\r\n characterImage.onload = () => {\r\n animateBreathing();\r\n };\r\n characterImage.onerror = function() {\r\n console.error('Failed to load character image:', CHARACTER_IMAGE_URL);\r\n };\r\n }\r\n\r\n function animateBreathing() {\r\n let breatheIn = true;\r\n let breatheAmount = 0;\r\n const maxBreathe = 5;\r\n\r\n function breathe() {\r\n if (breatheIn) {\r\n breatheAmount += 0.1;\r\n if (breatheAmount >= maxBreathe) breatheIn = false;\r\n } else {\r\n breatheAmount -= 0.1;\r\n if (breatheAmount <= 0) breatheIn = true;\r\n }\r\n\r\n characterImage.style.transform = `translateZ(${breatheAmount}px)`;\r\n requestAnimationFrame(breathe);\r\n }\r\n\r\n breathe();\r\n }\r\n\r\n function animateTalking() {\r\n if (!isSpeaking) return;\r\n\r\n let talkAmount = 0;\r\n const maxTalk = 10;\r\n let openingMouth = true;\r\n\r\n function talk() {\r\n if (!isSpeaking) return;\r\n\r\n if (openingMouth) {\r\n talkAmount += 1;\r\n if (talkAmount >= maxTalk) openingMouth = false;\r\n } else {\r\n talkAmount -= 1;\r\n if (talkAmount <= 0) openingMouth = true;\r\n }\r\n\r\n characterImage.style.transform = `rotateY(${talkAmount}deg) rotateX(${talkAmount \/ 2}deg)`;\r\n requestAnimationFrame(talk);\r\n }\r\n\r\n talk();\r\n }\r\n\r\n function setEmotion(emotion) {\r\n currentEmotion = emotion;\r\n \/\/ Here you would adjust the character's expression\r\n \/\/ This is a simplified example and would need to be expanded based on your specific image\r\n switch(emotion) {\r\n case EMOTIONS.HAPPY:\r\n characterImage.style.filter = 'brightness(1.2)';\r\n break;\r\n case EMOTIONS.SAD:\r\n characterImage.style.filter = 'brightness(0.8)';\r\n break;\r\n case EMOTIONS.SURPRISED:\r\n characterImage.style.transform = 'scale(1.1)';\r\n break;\r\n case EMOTIONS.CONFUSED:\r\n characterImage.style.transform = 'rotate(5deg)';\r\n break;\r\n default:\r\n characterImage.style.filter = 'none';\r\n characterImage.style.transform = 'none';\r\n }\r\n }\r\n\r\n \/\/ Chat Functions\r\n function sendMessage() {\r\n const message = messageInput.value.trim();\r\n const file = fileInput.files[0];\r\n if (message || file) {\r\n if (message) {\r\n displayMessage(message, 'user');\r\n setStatusMessage('\u05de\u05e0\u05ea\u05d7 \u05e0\u05ea\u05d5\u05e0\u05d9\u05dd...');\r\n }\r\n if (file) {\r\n setStatusMessage('\u05e7\u05d5\u05e8\u05d0 \u05e7\u05d5\u05d1\u05e5...');\r\n displayMessage(`\u05e7\u05d5\u05d1\u05e5 \u05e0\u05d1\u05d7\u05e8: ${file.name}`, 'user');\r\n }\r\n\r\n const formData = new FormData();\r\n formData.append('message', message);\r\n if (file) {\r\n formData.append('file', file);\r\n }\r\n\r\n messageInput.value = '';\r\n fileInput.value = '';\r\n fileName.textContent = '';\r\n\r\n fetch('https:\/\/digitalrise.art\/bot-d\/api.php', {\r\n method: 'POST',\r\n body: formData\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 setStatusMessage('');\r\n if (data.response) {\r\n const filteredResponse = data.response.replace(\/[\\*\\#]\/g, '');\r\n displayResponseMessage(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 saveChatHistory();\r\n })\r\n .catch(error => {\r\n setStatusMessage('');\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 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 displayResponseMessage(message, sender) {\r\n const messageElement = document.createElement('div');\r\n messageElement.textContent = `${sender === 'user' ? '\u05d0\u05ea\/\u05d4' : '\u05d1\u05d5\u05d8'}: `;\r\n chatHistory.appendChild(messageElement);\r\n\r\n const updateMessage = (text) => {\r\n messageElement.textContent += text;\r\n chatHistory.scrollTop = chatHistory.scrollHeight;\r\n };\r\n\r\n let i = 0;\r\n const interval = setInterval(() => {\r\n if (i < message.length) {\r\n updateMessage(message.charAt(i));\r\n i++;\r\n } else {\r\n clearInterval(interval);\r\n }\r\n }, 50);\r\n }\r\n\r\n \/\/ Speech Recognition Functions\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 = true;\r\n recognition.interimResults = true;\r\n\r\n recognition.onresult = (event) => {\r\n const transcript = Array.from(event.results)\r\n .map(result => result[0])\r\n .map(result => result.transcript)\r\n .join('');\r\n\r\n messageInput.value = transcript;\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 speakMessage(message) {\r\n stopSpeaking();\r\n const filteredMessage = message.replace(\/[\\*\\#]\/g, '');\r\n const utterance = new SpeechSynthesisUtterance(filteredMessage);\r\n utterance.lang = 'he-IL';\r\n if (!message.match(\/[\\u0590-\\u05FF]\/)) {\r\n utterance.lang = 'en-US';\r\n }\r\n utterance.voice = speechSynthesis.getVoices().find(voice => voice.lang === utterance.lang && voice.name.includes('Wavenet') && voice.gender === 'female');\r\n \r\n const emotion = analyzeResponse(filteredMessage);\r\n setEmotion(emotion);\r\n\r\n utterance.onstart = () => {\r\n startTalking();\r\n };\r\n \r\n utterance.onend = () => {\r\n stopTalking();\r\n setEmotion(EMOTIONS.NEUTRAL);\r\n };\r\n \r\n speechSynthesis.speak(utterance);\r\n utterance.onpause = () => {\r\n pausedUtterance = utterance;\r\n stopTalking();\r\n };\r\n }\r\n\r\n function playAudio(base64Audio) {\r\n stopSpeaking();\r\n if (audio) {\r\n audio.pause();\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.onplay = () => {\r\n startTalking();\r\n setEmotion(EMOTIONS.NEUTRAL); \/\/ Default to neutral for audio playback\r\n };\r\n audio.onended = () => {\r\n stopTalking();\r\n setEmotion(EMOTIONS.NEUTRAL);\r\n };\r\n audio.onpause = () => {\r\n pausedAudioTime = audio.currentTime;\r\n stopTalking();\r\n };\r\n }\r\n\r\n function startTalking() {\r\n isSpeaking = true;\r\n animateTalking();\r\n }\r\n\r\n function stopTalking() {\r\n isSpeaking = false;\r\n \/\/ Reset character image transform\r\n characterImage.style.transform = 'none';\r\n }\r\n\r\n function pauseSpeaking() {\r\n speechSynthesis.pause();\r\n if (audio) {\r\n audio.pause();\r\n }\r\n stopTalking();\r\n stopSpeakingButton.style.display = 'none';\r\n continueSpeakingButton.style.display = 'inline-block';\r\n }\r\n\r\n function resumeSpeaking() {\r\n speechSynthesis.resume();\r\n if (audio && pausedAudioTime) {\r\n audio.currentTime = pausedAudioTime;\r\n audio.play().catch(error => {\r\n console.error('Audio playback error:', error);\r\n });\r\n }\r\n startTalking();\r\n continueSpeakingButton.style.display = 'none';\r\n stopSpeakingButton.style.display = 'inline-block';\r\n }\r\n\r\n function stopSpeaking() {\r\n speechSynthesis.cancel();\r\n if (audio) {\r\n audio.pause();\r\n audio.currentTime = 0;\r\n }\r\n stopTalking();\r\n pausedAudioTime = 0;\r\n pausedUtterance = null;\r\n continueSpeakingButton.style.display = 'none';\r\n stopSpeakingButton.style.display = 'inline-block';\r\n }\r\n\r\n \/\/ Emotion Analysis\r\n function analyzeResponse(response) {\r\n const lowerResponse = response.toLowerCase();\r\n if (lowerResponse.includes('sorry') || lowerResponse.includes('unfortunate')) {\r\n return EMOTIONS.SAD;\r\n } else if (lowerResponse.includes('great') || lowerResponse.includes('excellent')) {\r\n return EMOTIONS.HAPPY;\r\n } else if (lowerResponse.includes('surprised') || lowerResponse.includes('wow')) {\r\n return EMOTIONS.SURPRISED;\r\n } else if (lowerResponse.includes('not sure') || lowerResponse.includes('maybe')) {\r\n return EMOTIONS.CONFUSED;\r\n }\r\n return EMOTIONS.NEUTRAL;\r\n }\r\n\r\n \/\/ Chat History Functions\r\n function toggleHistory() {\r\n const isVisible = historyContainer.style.display === 'block';\r\n historyContainer.style.display = isVisible ? 'none' : 'block';\r\n if (!isVisible) {\r\n loadChatHistory();\r\n }\r\n }\r\n\r\n function saveChatHistory() {\r\n const messages = Array.from(chatHistory.children).map(child => child.textContent);\r\n const history = JSON.parse(localStorage.getItem('chatHistory')) || [];\r\n history.push({ id: Date.now(), messages });\r\n localStorage.setItem('chatHistory', JSON.stringify(history));\r\n }\r\n\r\n function loadChatHistory() {\r\n historyContainer.innerHTML = '';\r\n const history = JSON.parse(localStorage.getItem('chatHistory')) || [];\r\n history.forEach(entry => {\r\n const div = document.createElement('div');\r\n div.classList.add('history-entry');\r\n const nameInput = document.createElement('input');\r\n nameInput.type = 'text';\r\n nameInput.value = `\u05e9\u05d9\u05d7\u05d4 ${new Date(entry.id).toLocaleString()}`;\r\n const loadButton = document.createElement('button');\r\n loadButton.textContent = '\u05e4\u05ea\u05d7';\r\n loadButton.addEventListener('click', () => loadChat(entry.id));\r\n const deleteButton = document.createElement('button');\r\n deleteButton.textContent = '\u05de\u05d7\u05e7';\r\n deleteButton.addEventListener('click', () => deleteChat(entry.id));\r\n div.appendChild(nameInput);\r\n div.appendChild(loadButton);\r\n div.appendChild(deleteButton);\r\n historyContainer.appendChild(div);\r\n });\r\n }\r\n\r\n function loadChat(id) {\r\n const history = JSON.parse(localStorage.getItem('chatHistory')) || [];\r\n const entry = history.find(h => h.id === id);\r\n if (entry) {\r\n chatHistory.innerHTML = '';\r\n entry.messages.forEach(message => {\r\n const div = document.createElement('div');\r\n div.textContent = message;\r\n chatHistory.appendChild(div);\r\n });\r\n }\r\n }\r\n\r\n function deleteChat(id) {\r\n let history = JSON.parse(localStorage.getItem('chatHistory')) || [];\r\n history = history.filter(h => h.id !== id);\r\n localStorage.setItem('chatHistory', JSON.stringify(history));\r\n loadChatHistory();\r\n }\r\n\r\n \/\/ Utility Functions\r\n function updateFileName() {\r\n const file = fileInput.files[0];\r\n if (file) {\r\n fileName.textContent = `\u05e7\u05d5\u05d1\u05e5 \u05e0\u05d1\u05d7\u05e8: ${file.name}`;\r\n } else {\r\n fileName.textContent = '';\r\n }\r\n }\r\n\r\n function setStatusMessage(message) {\r\n statusMessage.textContent = message;\r\n statusMessage.style.display = message ? 'block' : 'none';\r\n }\r\n\r\n \/\/ Event Listeners\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 historyButton.addEventListener('click', toggleHistory);\r\n fileInput.addEventListener('change', updateFileName);\r\n\r\n \/\/ Initialize\r\n initializeCharacter();\r\n\r\n \/\/ Ensure voices are loaded\r\n speechSynthesis.onvoiceschanged = () => {\r\n speechSynthesis.getVoices();\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\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 \u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05e9\u05d9\u05d7\u05d4 \u05de\u05de\u05ea\u05d9\u05df \u05dc\u05e4\u05e2\u05d5\u05dc\u05d4… \u05d4\u05e7\u05dc\u05d8 \u05d1\u05d7\u05e8 \u05e7\u05d5\u05d1\u05e5 \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-5653","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/5653","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=5653"}],"version-history":[{"count":1234,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/5653\/revisions"}],"predecessor-version":[{"id":6931,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/5653\/revisions\/6931"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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 height: 100vh;\r\n margin: 0;\r\n padding-top: 20px;\r\n background: url('https:\/\/digitalrise.art\/wp-content\/uploads\/2024\/04\/\u05e2\u05d9\u05e6\u05d5\u05d1-\u05dc\u05dc\u05d0-\u05e9\u05dd-17.png') no-repeat center center fixed;\r\n background-size: cover;\r\n overflow: auto;\r\n }\r\n\r\n .container {\r\n text-align: center;\r\n background: rgba(255, 255, 255, 0.3);\r\n padding: 20px;\r\n border-radius: 30px;\r\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);\r\n width: 100%;\r\n max-width: 600px;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n #character-container {\r\n position: relative;\r\n width: 400px;\r\n height: 500px;\r\n margin: 0 auto;\r\n overflow: hidden;\r\n }\r\n\r\n #mirror-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n #character-svg {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .chat-history {\r\n max-height: 200px;\r\n overflow-y: auto;\r\n border: 1px solid rgba(204, 204, 204, 0.5);\r\n padding: 10px;\r\n margin-bottom: 20px;\r\n background: rgba(255, 255, 255, 0.5);\r\n border-radius: 20px;\r\n text-align: right;\r\n }\r\n\r\n .input-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n #message-input {\r\n width: 100%;\r\n padding: 10px;\r\n border: 1px solid rgba(204, 204, 204, 0.5);\r\n border-radius: 15px;\r\n resize: vertical;\r\n background: rgba(255, 255, 255, 0.5);\r\n text-align: right;\r\n }\r\n\r\n .styled-button, #file-label {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 15px;\r\n background: linear-gradient(45deg, rgba(107, 35, 224, 0.7), rgba(168, 85, 247, 0.7), rgba(217, 70, 239, 0.7), rgba(244, 114, 182, 0.7));\r\n color: white;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .styled-button:hover, #file-label:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n #status-message {\r\n font-style: italic;\r\n margin-top: 10px;\r\n color: rgba(102, 102, 102, 0.8);\r\n }\r\n\r\n #file-input {\r\n display: none;\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.7);\r\n padding: 20px;\r\n border-radius: 20px;\r\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);\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 input {\r\n flex-grow: 1;\r\n margin-right: 10px;\r\n padding: 5px;\r\n border: 1px solid rgba(204, 204, 204, 0.5);\r\n border-radius: 10px;\r\n background: rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .history-entry button {\r\n padding: 5px 10px;\r\n margin-left: 5px;\r\n border: none;\r\n border-radius: 10px;\r\n background-color: rgba(107, 35, 224, 0.7);\r\n color: white;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .history-entry button:hover {\r\n background-color: rgba(74, 14, 178, 0.7);\r\n }\r\n\r\n #history-button {\r\n position: fixed;\r\n top: 20px;\r\n left: 20px;\r\n z-index: 101;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <button id=\"history-button\" class=\"styled-button\">\u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05e9\u05d9\u05d7\u05d4<\/button>\r\n <div class=\"history-container\" id=\"history-container\"><\/div>\r\n <div class=\"container\">\r\n <div id=\"character-container\">\r\n <img decoding=\"async\" id=\"character-image\" src=\"https:\/\/digitalrise.art\/wp-content\/uploads\/2024\/06\/\u05e2\u05d9\u05e6\u05d5\u05d1-\u05dc\u05dc\u05d0-\u05e9\u05dd-30.png\" alt=\"Character\">\r\n <\/div>\r\n <div id=\"chat-history\" class=\"chat-history\"><\/div>\r\n <div id=\"status-message\">\u05de\u05de\u05ea\u05d9\u05df \u05dc\u05e4\u05e2\u05d5\u05dc\u05d4...<\/div>\r\n <div class=\"input-container\">\r\n <button id=\"record-button\" class=\"styled-button\">\u05d4\u05e7\u05dc\u05d8<\/button>\r\n <textarea id=\"message-input\" class=\"styled-input\" placeholder=\"\u05db\u05ea\u05d5\u05d1 \u05d0\u05ea \u05d4\u05d4\u05d5\u05d3\u05e2\u05d4 \u05db\u05d0\u05df...\"><\/textarea>\r\n <label for=\"file-input\" id=\"file-label\" class=\"styled-button\">\u05d1\u05d7\u05e8 \u05e7\u05d5\u05d1\u05e5<\/label>\r\n <input type=\"file\" id=\"file-input\" class=\"styled-input\">\r\n <div id=\"file-name\"><\/div>\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 <\/div>\r\n\r\n <script>\r\n \/\/ Constants\r\n const CHARACTER_IMAGE_URL = 'https:\/\/digitalrise.art\/wp-content\/uploads\/2024\/06\/\u05e2\u05d9\u05e6\u05d5\u05d1-\u05dc\u05dc\u05d0-\u05e9\u05dd-30.png';\r\n const EMOTIONS = {\r\n NEUTRAL: 'neutral',\r\n HAPPY: 'happy',\r\n SAD: 'sad',\r\n SURPRISED: 'surprised',\r\n CONFUSED: 'confused'\r\n };\r\n\r\n \/\/ Global variables\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 isSpeaking = false;\r\n let currentEmotion = EMOTIONS.NEUTRAL;\r\n\r\n \/\/ DOM Elements\r\n const characterContainer = document.getElementById('character-container');\r\n const characterImage = document.getElementById('character-image');\r\n const chatHistory = document.getElementById('chat-history');\r\n const messageInput = document.getElementById('message-input');\r\n const fileInput = document.getElementById('file-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 statusMessage = document.getElementById('status-message');\r\n const historyButton = document.getElementById('history-button');\r\n const historyContainer = document.getElementById('history-container');\r\n const fileName = document.getElementById('file-name');\r\n\r\n \/\/ Character Animation Functions\r\n function initializeCharacter() {\r\n characterImage.src = CHARACTER_IMAGE_URL;\r\n characterImage.onload = () => {\r\n animateBreathing();\r\n };\r\n characterImage.onerror = function() {\r\n console.error('Failed to load character image:', CHARACTER_IMAGE_URL);\r\n };\r\n }\r\n\r\n function animateBreathing() {\r\n let breatheIn = true;\r\n let breatheAmount = 0;\r\n const maxBreathe = 5;\r\n\r\n function breathe() {\r\n if (breatheIn) {\r\n breatheAmount += 0.1;\r\n if (breatheAmount >= maxBreathe) breatheIn = false;\r\n } else {\r\n breatheAmount -= 0.1;\r\n if (breatheAmount <= 0) breatheIn = true;\r\n }\r\n\r\n characterImage.style.transform = `translateZ(${breatheAmount}px)`;\r\n requestAnimationFrame(breathe);\r\n }\r\n\r\n breathe();\r\n }\r\n\r\n function animateTalking() {\r\n if (!isSpeaking) return;\r\n\r\n let talkAmount = 0;\r\n const maxTalk = 10;\r\n let openingMouth = true;\r\n\r\n function talk() {\r\n if (!isSpeaking) return;\r\n\r\n if (openingMouth) {\r\n talkAmount += 1;\r\n if (talkAmount >= maxTalk) openingMouth = false;\r\n } else {\r\n talkAmount -= 1;\r\n if (talkAmount <= 0) openingMouth = true;\r\n }\r\n\r\n characterImage.style.transform = `rotateY(${talkAmount}deg) rotateX(${talkAmount \/ 2}deg)`;\r\n requestAnimationFrame(talk);\r\n }\r\n\r\n talk();\r\n }\r\n\r\n function setEmotion(emotion) {\r\n currentEmotion = emotion;\r\n \/\/ Here you would adjust the character's expression\r\n \/\/ This is a simplified example and would need to be expanded based on your specific image\r\n switch(emotion) {\r\n case EMOTIONS.HAPPY:\r\n characterImage.style.filter = 'brightness(1.2)';\r\n break;\r\n case EMOTIONS.SAD:\r\n characterImage.style.filter = 'brightness(0.8)';\r\n break;\r\n case EMOTIONS.SURPRISED:\r\n characterImage.style.transform = 'scale(1.1)';\r\n break;\r\n case EMOTIONS.CONFUSED:\r\n characterImage.style.transform = 'rotate(5deg)';\r\n break;\r\n default:\r\n characterImage.style.filter = 'none';\r\n characterImage.style.transform = 'none';\r\n }\r\n }\r\n\r\n \/\/ Chat Functions\r\n function sendMessage() {\r\n const message = messageInput.value.trim();\r\n const file = fileInput.files[0];\r\n if (message || file) {\r\n if (message) {\r\n displayMessage(message, 'user');\r\n setStatusMessage('\u05de\u05e0\u05ea\u05d7 \u05e0\u05ea\u05d5\u05e0\u05d9\u05dd...');\r\n }\r\n if (file) {\r\n setStatusMessage('\u05e7\u05d5\u05e8\u05d0 \u05e7\u05d5\u05d1\u05e5...');\r\n displayMessage(`\u05e7\u05d5\u05d1\u05e5 \u05e0\u05d1\u05d7\u05e8: ${file.name}`, 'user');\r\n }\r\n\r\n const formData = new FormData();\r\n formData.append('message', message);\r\n if (file) {\r\n formData.append('file', file);\r\n }\r\n\r\n messageInput.value = '';\r\n fileInput.value = '';\r\n fileName.textContent = '';\r\n\r\n fetch('https:\/\/digitalrise.art\/bot-d\/api.php', {\r\n method: 'POST',\r\n body: formData\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 setStatusMessage('');\r\n if (data.response) {\r\n const filteredResponse = data.response.replace(\/[\\*\\#]\/g, '');\r\n displayResponseMessage(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 saveChatHistory();\r\n })\r\n .catch(error => {\r\n setStatusMessage('');\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 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 displayResponseMessage(message, sender) {\r\n const messageElement = document.createElement('div');\r\n messageElement.textContent = `${sender === 'user' ? '\u05d0\u05ea\/\u05d4' : '\u05d1\u05d5\u05d8'}: `;\r\n chatHistory.appendChild(messageElement);\r\n\r\n const updateMessage = (text) => {\r\n messageElement.textContent += text;\r\n chatHistory.scrollTop = chatHistory.scrollHeight;\r\n };\r\n\r\n let i = 0;\r\n const interval = setInterval(() => {\r\n if (i < message.length) {\r\n updateMessage(message.charAt(i));\r\n i++;\r\n } else {\r\n clearInterval(interval);\r\n }\r\n }, 50);\r\n }\r\n\r\n \/\/ Speech Recognition Functions\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 = true;\r\n recognition.interimResults = true;\r\n\r\n recognition.onresult = (event) => {\r\n const transcript = Array.from(event.results)\r\n .map(result => result[0])\r\n .map(result => result.transcript)\r\n .join('');\r\n\r\n messageInput.value = transcript;\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 speakMessage(message) {\r\n stopSpeaking();\r\n const filteredMessage = message.replace(\/[\\*\\#]\/g, '');\r\n const utterance = new SpeechSynthesisUtterance(filteredMessage);\r\n utterance.lang = 'he-IL';\r\n if (!message.match(\/[\\u0590-\\u05FF]\/)) {\r\n utterance.lang = 'en-US';\r\n }\r\n utterance.voice = speechSynthesis.getVoices().find(voice => voice.lang === utterance.lang && voice.name.includes('Wavenet') && voice.gender === 'female');\r\n \r\n const emotion = analyzeResponse(filteredMessage);\r\n setEmotion(emotion);\r\n\r\n utterance.onstart = () => {\r\n startTalking();\r\n };\r\n \r\n utterance.onend = () => {\r\n stopTalking();\r\n setEmotion(EMOTIONS.NEUTRAL);\r\n };\r\n \r\n speechSynthesis.speak(utterance);\r\n utterance.onpause = () => {\r\n pausedUtterance = utterance;\r\n stopTalking();\r\n };\r\n }\r\n\r\n function playAudio(base64Audio) {\r\n stopSpeaking();\r\n if (audio) {\r\n audio.pause();\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.onplay = () => {\r\n startTalking();\r\n setEmotion(EMOTIONS.NEUTRAL); \/\/ Default to neutral for audio playback\r\n };\r\n audio.onended = () => {\r\n stopTalking();\r\n setEmotion(EMOTIONS.NEUTRAL);\r\n };\r\n audio.onpause = () => {\r\n pausedAudioTime = audio.currentTime;\r\n stopTalking();\r\n };\r\n }\r\n\r\n function startTalking() {\r\n isSpeaking = true;\r\n animateTalking();\r\n }\r\n\r\n function stopTalking() {\r\n isSpeaking = false;\r\n \/\/ Reset character image transform\r\n characterImage.style.transform = 'none';\r\n }\r\n\r\n function pauseSpeaking() {\r\n speechSynthesis.pause();\r\n if (audio) {\r\n audio.pause();\r\n }\r\n stopTalking();\r\n stopSpeakingButton.style.display = 'none';\r\n continueSpeakingButton.style.display = 'inline-block';\r\n }\r\n\r\n function resumeSpeaking() {\r\n speechSynthesis.resume();\r\n if (audio && pausedAudioTime) {\r\n audio.currentTime = pausedAudioTime;\r\n audio.play().catch(error => {\r\n console.error('Audio playback error:', error);\r\n });\r\n }\r\n startTalking();\r\n continueSpeakingButton.style.display = 'none';\r\n stopSpeakingButton.style.display = 'inline-block';\r\n }\r\n\r\n function stopSpeaking() {\r\n speechSynthesis.cancel();\r\n if (audio) {\r\n audio.pause();\r\n audio.currentTime = 0;\r\n }\r\n stopTalking();\r\n pausedAudioTime = 0;\r\n pausedUtterance = null;\r\n continueSpeakingButton.style.display = 'none';\r\n stopSpeakingButton.style.display = 'inline-block';\r\n }\r\n\r\n \/\/ Emotion Analysis\r\n function analyzeResponse(response) {\r\n const lowerResponse = response.toLowerCase();\r\n if (lowerResponse.includes('sorry') || lowerResponse.includes('unfortunate')) {\r\n return EMOTIONS.SAD;\r\n } else if (lowerResponse.includes('great') || lowerResponse.includes('excellent')) {\r\n return EMOTIONS.HAPPY;\r\n } else if (lowerResponse.includes('surprised') || lowerResponse.includes('wow')) {\r\n return EMOTIONS.SURPRISED;\r\n } else if (lowerResponse.includes('not sure') || lowerResponse.includes('maybe')) {\r\n return EMOTIONS.CONFUSED;\r\n }\r\n return EMOTIONS.NEUTRAL;\r\n }\r\n\r\n \/\/ Chat History Functions\r\n function toggleHistory() {\r\n const isVisible = historyContainer.style.display === 'block';\r\n historyContainer.style.display = isVisible ? 'none' : 'block';\r\n if (!isVisible) {\r\n loadChatHistory();\r\n }\r\n }\r\n\r\n function saveChatHistory() {\r\n const messages = Array.from(chatHistory.children).map(child => child.textContent);\r\n const history = JSON.parse(localStorage.getItem('chatHistory')) || [];\r\n history.push({ id: Date.now(), messages });\r\n localStorage.setItem('chatHistory', JSON.stringify(history));\r\n }\r\n\r\n function loadChatHistory() {\r\n historyContainer.innerHTML = '';\r\n const history = JSON.parse(localStorage.getItem('chatHistory')) || [];\r\n history.forEach(entry => {\r\n const div = document.createElement('div');\r\n div.classList.add('history-entry');\r\n const nameInput = document.createElement('input');\r\n nameInput.type = 'text';\r\n nameInput.value = `\u05e9\u05d9\u05d7\u05d4 ${new Date(entry.id).toLocaleString()}`;\r\n const loadButton = document.createElement('button');\r\n loadButton.textContent = '\u05e4\u05ea\u05d7';\r\n loadButton.addEventListener('click', () => loadChat(entry.id));\r\n const deleteButton = document.createElement('button');\r\n deleteButton.textContent = '\u05de\u05d7\u05e7';\r\n deleteButton.addEventListener('click', () => deleteChat(entry.id));\r\n div.appendChild(nameInput);\r\n div.appendChild(loadButton);\r\n div.appendChild(deleteButton);\r\n historyContainer.appendChild(div);\r\n });\r\n }\r\n\r\n function loadChat(id) {\r\n const history = JSON.parse(localStorage.getItem('chatHistory')) || [];\r\n const entry = history.find(h => h.id === id);\r\n if (entry) {\r\n chatHistory.innerHTML = '';\r\n entry.messages.forEach(message => {\r\n const div = document.createElement('div');\r\n div.textContent = message;\r\n chatHistory.appendChild(div);\r\n });\r\n }\r\n }\r\n\r\n function deleteChat(id) {\r\n let history = JSON.parse(localStorage.getItem('chatHistory')) || [];\r\n history = history.filter(h => h.id !== id);\r\n localStorage.setItem('chatHistory', JSON.stringify(history));\r\n loadChatHistory();\r\n }\r\n\r\n \/\/ Utility Functions\r\n function updateFileName() {\r\n const file = fileInput.files[0];\r\n if (file) {\r\n fileName.textContent = `\u05e7\u05d5\u05d1\u05e5 \u05e0\u05d1\u05d7\u05e8: ${file.name}`;\r\n } else {\r\n fileName.textContent = '';\r\n }\r\n }\r\n\r\n function setStatusMessage(message) {\r\n statusMessage.textContent = message;\r\n statusMessage.style.display = message ? 'block' : 'none';\r\n }\r\n\r\n \/\/ Event Listeners\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 historyButton.addEventListener('click', toggleHistory);\r\n fileInput.addEventListener('change', updateFileName);\r\n\r\n \/\/ Initialize\r\n initializeCharacter();\r\n\r\n \/\/ Ensure voices are loaded\r\n speechSynthesis.onvoiceschanged = () => {\r\n speechSynthesis.getVoices();\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\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 \u05d4\u05d9\u05e1\u05d8\u05d5\u05e8\u05d9\u05d9\u05ea \u05e9\u05d9\u05d7\u05d4 \u05de\u05de\u05ea\u05d9\u05df \u05dc\u05e4\u05e2\u05d5\u05dc\u05d4… \u05d4\u05e7\u05dc\u05d8 \u05d1\u05d7\u05e8 \u05e7\u05d5\u05d1\u05e5 \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-5653","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/5653","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=5653"}],"version-history":[{"count":1234,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/5653\/revisions"}],"predecessor-version":[{"id":6931,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/5653\/revisions\/6931"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}