{"id":4240,"date":"2025-02-10T06:51:10","date_gmt":"2025-02-10T06:51:10","guid":{"rendered":"https:\/\/mbinalpisga.com\/?page_id=4240"},"modified":"2025-02-10T06:52:34","modified_gmt":"2025-02-10T06:52:34","slug":"elementor-4240","status":"publish","type":"page","link":"https:\/\/mbinalpisga.com\/?page_id=4240","title":{"rendered":"Elementor #4240"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4240\" class=\"elementor elementor-4240\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e86dbab e-flex e-con-boxed e-con e-parent\" data-id=\"e86dbab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e16a06f elementor-widget elementor-widget-html\" data-id=\"e16a06f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Interactive AI Character<\/title>\r\n    <style>\r\n        body {\r\n            font-family: Arial, sans-serif;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            height: 100vh;\r\n            background-color: #f0f0f0;\r\n        }\r\n        #chat-container {\r\n            width: 400px;\r\n            background: white;\r\n            border-radius: 10px;\r\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n            overflow: hidden;\r\n        }\r\n        #chat-box {\r\n            height: 300px;\r\n            overflow-y: auto;\r\n            padding: 10px;\r\n            border-bottom: 1px solid #ccc;\r\n        }\r\n        #user-input {\r\n            display: flex;\r\n        }\r\n        #user-input input {\r\n            flex: 1;\r\n            padding: 10px;\r\n            border: none;\r\n            border-top: 1px solid #ccc;\r\n        }\r\n        #user-input button {\r\n            padding: 10px;\r\n            border: none;\r\n            background: #007bff;\r\n            color: white;\r\n            cursor: pointer;\r\n        }\r\n        #animated-character {\r\n            width: 100px;\r\n            height: 100px;\r\n            background: url('https:\/\/via.placeholder.com\/100') no-repeat center\/cover;\r\n            margin-bottom: 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div id=\"animated-character\"><\/div>\r\n    <div id=\"chat-container\">\r\n        <div id=\"chat-box\"><\/div>\r\n        <div id=\"user-input\">\r\n            <input type=\"text\" id=\"input-field\" placeholder=\"Ask me anything...\">\r\n            <button onclick=\"sendMessage()\">Send<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        async function sendMessage() {\r\n            const inputField = document.getElementById('input-field');\r\n            const userMessage = inputField.value;\r\n            if (!userMessage) return;\r\n            \r\n            displayMessage('You: ' + userMessage);\r\n            inputField.value = '';\r\n\r\n            const response = await fetch('https:\/\/api.openai.com\/v1\/chat\/completions', {\r\n                method: 'POST',\r\n                headers: {\r\n                    'Content-Type': 'application\/json',\r\n                    'Authorization': 'Bearer YOUR_OPENAI_API_KEY'\r\n                },\r\n                body: JSON.stringify({\r\n                    model: 'gpt-4',\r\n                    messages: [{ role: 'user', content: userMessage }]\r\n                })\r\n            });\r\n\r\n            const data = await response.json();\r\n            const aiMessage = data.choices[0].message.content;\r\n\r\n            displayMessage('AI: ' + aiMessage);\r\n            speak(aiMessage);\r\n        }\r\n\r\n        function displayMessage(message) {\r\n            const chatBox = document.getElementById('chat-box');\r\n            const messageElement = document.createElement('div');\r\n            messageElement.textContent = message;\r\n            chatBox.appendChild(messageElement);\r\n            chatBox.scrollTop = chatBox.scrollHeight;\r\n        }\r\n\r\n        function speak(text) {\r\n            const utterance = new SpeechSynthesisUtterance(text);\r\n            speechSynthesis.speak(utterance);\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 AI Character Send<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4240","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/pages\/4240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4240"}],"version-history":[{"count":5,"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/pages\/4240\/revisions"}],"predecessor-version":[{"id":4246,"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/pages\/4240\/revisions\/4246"}],"wp:attachment":[{"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}