AI Chat Interface<\/title>\n <style>\n body {\n font-family: 'Courier New', Courier, monospace;\n background-color: #2c2c2c;\n color: #ffffff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n }\n #chat-container { \/* New container for better layout *\/\n width: 100%; \/* Wider chat *\/\n max-width: 1000px; \/* Limit max width *\/\n display: flex;\n flex-direction: column;\n }\n #chat-box {\n border: 1px solid #4d4d4d;\n padding: 10px;\n height: 320px;\n overflow-y: auto;\n background-color: #1e1e1e;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\n flex-grow: 1; \/* Allow chat-box to grow *\/\n }\n #input-area { \/* New container for input elements *\/\n display: flex;\n margin-top: 10px;\n }\n #user-input {\n flex-grow: 1; \/* Allow input to take up remaining space *\/\n padding: 10px;\n border: 1px solid #4d4d4d;\n background-color: #1e1e1e;\n color: #ffffff;\n font-family: 'Courier New', Courier, monospace;\n }\n #send-btn, #clear-btn {\n background-color: #4caf50;\n color: white;\n border: none;\n padding: 10px;\n cursor: pointer;\n margin-left: 5px;\n }\n #send-btn:hover, #clear-btn:hover {\n background-color: #45a049;\n }\n #timer {\n margin-top: 10px;\n color: #aaaaaa; \/* Lighter timer color *\/\n text-align: right; \/* Align timer to the right *\/\n }\n a { \/* Style links *\/\n color: #00ccff;\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"chat-container\">\n <div id=\"chat-box\"><\/div>\n <div id=\"input-area\">\n <input type=\"text\" id=\"user-input\" placeholder=\"Type your question...\" \/>\n <button id=\"send-btn\">Send<\/button>\n <button id=\"clear-btn\">Clear<\/button>\n <\/div>\n <div id=\"timer\">Waiting for response: <span id=\"elapsed-time\">0.0<\/span>s<\/div>\n<\/div>\n\n<script>\n let conversationId = getCookie(\"conversation_id\") || generateConversationId();\n let timerInterval;\n\n function setCookie(name, value) {\n document.cookie = name + \"=\" + value + \"; path=\/; max-age=\" + 365 * 24 * 60 * 60;\n }\n\n function getCookie(name) {\n const value = `; ${document.cookie}`;\n const parts = value.split(`; ${name}=`);\n if (parts.length === 2) return parts.pop().split(';').shift();\n }\n\n function deleteCookie(name) {\n document.cookie = name + \"=; path=\/; expires=Thu, 01 Jan 1970 00:00:01 GMT;\";\n }\n\n function generateConversationId() {\n return 'conv_' + Math.random().toString(36).substr(2, 9);\n }\n\n if (!getCookie(\"conversation_id\")) {\n setCookie(\"conversation_id\", conversationId);\n }\n\n document.getElementById(\"send-btn\").addEventListener(\"click\", sendMessage);\n document.getElementById(\"user-input\").addEventListener(\"keypress\", function(event) {\n if (event.key === \"Enter\") {\n sendMessage();\n }\n });\n\n document.getElementById(\"clear-btn\").addEventListener(\"click\", clearConversation);\n\n async function sendMessage() {\n const message = document.getElementById(\"user-input\").value;\n if (!message) return;\n\n appendMessage(\"You: \" + message);\n document.getElementById(\"user-input\").value = '';\n startTimer();\n\n const payload = {\n message: message,\n mode: \"normal\",\n conversation_id: conversationId\n };\n\n try {\n const response = await fetch(\"https:\/\/makulu.online:6003\/api\/ask\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application\/json\"\n },\n body: JSON.stringify(payload)\n });\n\n const data = await response.json();\n stopTimer();\n appendMessage(\"Electra: \" + data.response);\n } catch (error) {\n console.error(\"Error:\", error);\n stopTimer();\n appendMessage(\"Electra: Sorry, something went wrong.\");\n }\n }\n\n function appendMessage(message) {\n const chatBox = document.getElementById(\"chat-box\");\n message = message.replace(\/(https?:\\\/\\\/[^\\s]+)\/g, '<a href=\"$1\" target=\"_blank\">$1<\/a>');\n chatBox.innerHTML += message + \"<br>\";\n chatBox.scrollTop = chatBox.scrollHeight;\n }\n\n function startTimer() {\n let elapsedTime = 0;\n document.getElementById(\"elapsed-time\").textContent = elapsedTime.toFixed(1);\n\n timerInterval = setInterval(() => {\n elapsedTime += 0.1;\n document.getElementById(\"elapsed-time\").textContent = elapsedTime.toFixed(1);\n }, 100);\n }\n\n function stopTimer() {\n clearInterval(timerInterval);\n }\n\n\n function clearConversation() {\n document.getElementById(\"chat-box\").innerHTML = '';\n deleteCookie(\"conversation_id\");\n conversationId = generateConversationId();\n setCookie(\"conversation_id\", conversationId);\n document.getElementById(\"elapsed-time\").textContent = '0.0';\n }\n\n\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>AI Chat Interface Send Clear Waiting for response: 0.0s<\/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-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":23,"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/pages\/60\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/media?parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":60,"date":"2024-10-26T18:43:27","date_gmt":"2024-10-26T18:43:27","guid":{"rendered":"https:\/\/makulu.online\/?page_id=60"},"modified":"2024-11-16T12:29:14","modified_gmt":"2024-11-16T12:29:14","slug":"electra","status":"publish","type":"page","link":"https:\/\/makulu.online\/index.php\/electra\/","title":{"rendered":"Electra AI"},"content":{"rendered":"\n\n\n\n \n \n AI Chat Interface<\/title>\n <style>\n body {\n font-family: 'Courier New', Courier, monospace;\n background-color: #2c2c2c;\n color: #ffffff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n }\n #chat-container { \/* New container for better layout *\/\n width: 100%; \/* Wider chat *\/\n max-width: 1000px; \/* Limit max width *\/\n display: flex;\n flex-direction: column;\n }\n #chat-box {\n border: 1px solid #4d4d4d;\n padding: 10px;\n height: 320px;\n overflow-y: auto;\n background-color: #1e1e1e;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\n flex-grow: 1; \/* Allow chat-box to grow *\/\n }\n #input-area { \/* New container for input elements *\/\n display: flex;\n margin-top: 10px;\n }\n #user-input {\n flex-grow: 1; \/* Allow input to take up remaining space *\/\n padding: 10px;\n border: 1px solid #4d4d4d;\n background-color: #1e1e1e;\n color: #ffffff;\n font-family: 'Courier New', Courier, monospace;\n }\n #send-btn, #clear-btn {\n background-color: #4caf50;\n color: white;\n border: none;\n padding: 10px;\n cursor: pointer;\n margin-left: 5px;\n }\n #send-btn:hover, #clear-btn:hover {\n background-color: #45a049;\n }\n #timer {\n margin-top: 10px;\n color: #aaaaaa; \/* Lighter timer color *\/\n text-align: right; \/* Align timer to the right *\/\n }\n a { \/* Style links *\/\n color: #00ccff;\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"chat-container\">\n <div id=\"chat-box\"><\/div>\n <div id=\"input-area\">\n <input type=\"text\" id=\"user-input\" placeholder=\"Type your question...\" \/>\n <button id=\"send-btn\">Send<\/button>\n <button id=\"clear-btn\">Clear<\/button>\n <\/div>\n <div id=\"timer\">Waiting for response: <span id=\"elapsed-time\">0.0<\/span>s<\/div>\n<\/div>\n\n<script>\n let conversationId = getCookie(\"conversation_id\") || generateConversationId();\n let timerInterval;\n\n function setCookie(name, value) {\n document.cookie = name + \"=\" + value + \"; path=\/; max-age=\" + 365 * 24 * 60 * 60;\n }\n\n function getCookie(name) {\n const value = `; ${document.cookie}`;\n const parts = value.split(`; ${name}=`);\n if (parts.length === 2) return parts.pop().split(';').shift();\n }\n\n function deleteCookie(name) {\n document.cookie = name + \"=; path=\/; expires=Thu, 01 Jan 1970 00:00:01 GMT;\";\n }\n\n function generateConversationId() {\n return 'conv_' + Math.random().toString(36).substr(2, 9);\n }\n\n if (!getCookie(\"conversation_id\")) {\n setCookie(\"conversation_id\", conversationId);\n }\n\n document.getElementById(\"send-btn\").addEventListener(\"click\", sendMessage);\n document.getElementById(\"user-input\").addEventListener(\"keypress\", function(event) {\n if (event.key === \"Enter\") {\n sendMessage();\n }\n });\n\n document.getElementById(\"clear-btn\").addEventListener(\"click\", clearConversation);\n\n async function sendMessage() {\n const message = document.getElementById(\"user-input\").value;\n if (!message) return;\n\n appendMessage(\"You: \" + message);\n document.getElementById(\"user-input\").value = '';\n startTimer();\n\n const payload = {\n message: message,\n mode: \"normal\",\n conversation_id: conversationId\n };\n\n try {\n const response = await fetch(\"https:\/\/makulu.online:6003\/api\/ask\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application\/json\"\n },\n body: JSON.stringify(payload)\n });\n\n const data = await response.json();\n stopTimer();\n appendMessage(\"Electra: \" + data.response);\n } catch (error) {\n console.error(\"Error:\", error);\n stopTimer();\n appendMessage(\"Electra: Sorry, something went wrong.\");\n }\n }\n\n function appendMessage(message) {\n const chatBox = document.getElementById(\"chat-box\");\n message = message.replace(\/(https?:\\\/\\\/[^\\s]+)\/g, '<a href=\"$1\" target=\"_blank\">$1<\/a>');\n chatBox.innerHTML += message + \"<br>\";\n chatBox.scrollTop = chatBox.scrollHeight;\n }\n\n function startTimer() {\n let elapsedTime = 0;\n document.getElementById(\"elapsed-time\").textContent = elapsedTime.toFixed(1);\n\n timerInterval = setInterval(() => {\n elapsedTime += 0.1;\n document.getElementById(\"elapsed-time\").textContent = elapsedTime.toFixed(1);\n }, 100);\n }\n\n function stopTimer() {\n clearInterval(timerInterval);\n }\n\n\n function clearConversation() {\n document.getElementById(\"chat-box\").innerHTML = '';\n deleteCookie(\"conversation_id\");\n conversationId = generateConversationId();\n setCookie(\"conversation_id\", conversationId);\n document.getElementById(\"elapsed-time\").textContent = '0.0';\n }\n\n\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>AI Chat Interface Send Clear Waiting for response: 0.0s<\/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-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":23,"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/pages\/60\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/makulu.online\/index.php\/wp-json\/wp\/v2\/media?parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}