Agente de IA Interactivo Avanzado<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n background-color: #f4f4f4;\r\n }\r\n #chat-container {\r\n background-color: white;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n display: flex;\r\n flex-direction: column;\r\n height: 600px;\r\n }\r\n #chat-messages {\r\n flex-grow: 1;\r\n overflow-y: auto;\r\n padding: 15px;\r\n }\r\n .message {\r\n max-width: 80%;\r\n margin: 10px;\r\n padding: 10px;\r\n border-radius: 10px;\r\n clear: both;\r\n }\r\n .user-message {\r\n background-color: #007bff;\r\n color: white;\r\n align-self: flex-end;\r\n float: right;\r\n }\r\n .ai-message {\r\n background-color: #e9ecef;\r\n color: black;\r\n align-self: flex-start;\r\n float: left;\r\n }\r\n #input-container {\r\n display: flex;\r\n padding: 15px;\r\n gap: 10px;\r\n border-top: 1px solid #e0e0e0;\r\n }\r\n #message-input {\r\n flex-grow: 1;\r\n padding: 10px;\r\n border: 1px solid #ced4da;\r\n border-radius: 5px;\r\n }\r\n #attachment-preview {\r\n display: flex;\r\n gap: 10px;\r\n padding: 10px;\r\n overflow-x: auto;\r\n }\r\n .thumbnail, .file-preview {\r\n position: relative;\r\n max-width: 100px;\r\n max-height: 100px;\r\n border-radius: 5px;\r\n }\r\n .remove-attachment {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n background: rgba(255,0,0,0.7);\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n width: 20px;\r\n height: 20px;\r\n cursor: pointer;\r\n }\r\n .attachment-container {\r\n position: relative;\r\n display: inline-block;\r\n }\r\n #voice-conversation {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px;\r\n background-color: #f8f9fa;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"chat-container\">\r\n <div id=\"chat-messages\"><\/div>\r\n <div id=\"attachment-preview\"><\/div>\r\n <div id=\"voice-conversation\" style=\"display:none;\">\r\n <span id=\"voice-status\">Conversaci\u00f3n de voz iniciada<\/span>\r\n <button id=\"stop-voice-conversation\">Detener<\/button>\r\n <\/div>\r\n <div id=\"input-container\">\r\n <input type=\"text\" id=\"message-input\" placeholder=\"Escribe tu mensaje...\">\r\n <button onclick=\"sendMessage()\">Enviar<\/button>\r\n <input type=\"file\" id=\"file-input\" multiple style=\"display:none;\" onchange=\"handleFileUpload(event)\">\r\n <input type=\"file\" id=\"image-input\" accept=\"image\/*\" multiple style=\"display:none;\" onchange=\"handleImageUpload(event)\">\r\n <button onclick=\"document.getElementById('file-input').click()\">\ud83d\udcce Archivo<\/button>\r\n <button onclick=\"document.getElementById('image-input').click()\">\ud83d\uddbc\ufe0f Imagen<\/button>\r\n <button id=\"voice-input\">\ud83c\udf99\ufe0f Dictar<\/button>\r\n <button id=\"voice-conversation-btn\">\ud83d\udde3\ufe0f Conversaci\u00f3n de Voz<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const chatMessages = document.getElementById('chat-messages');\r\n const messageInput = document.getElementById('message-input');\r\n const attachmentPreview = document.getElementById('attachment-preview');\r\n const voiceInputButton = document.getElementById('voice-input');\r\n const voiceConversationBtn = document.getElementById('voice-conversation-btn');\r\n const voiceConversationContainer = document.getElementById('voice-conversation');\r\n const stopVoiceConversationBtn = document.getElementById('stop-voice-conversation');\r\n\r\n let attachments = [];\r\n\r\n \/\/ Simulaci\u00f3n de respuesta de IA (reemplazar con tu API real)\r\n function mockAIResponse(userMessage, attachments = []) {\r\n return {\r\n text: `Procesando: \"${userMessage}\"`,\r\n attachments: []\r\n };\r\n }\r\n\r\n function createMessageElement(message, type, attachments = []) {\r\n const messageElement = document.createElement('div');\r\n messageElement.classList.add('message', `${type}-message`);\r\n \r\n \/\/ A\u00f1adir texto del mensaje\r\n const textSpan = document.createElement('div');\r\n textSpan.textContent = message;\r\n messageElement.appendChild(textSpan);\r\n\r\n \/\/ A\u00f1adir archivos adjuntos\r\n if (attachments.length > 0) {\r\n const attachmentContainer = document.createElement('div');\r\n attachments.forEach(attachment => {\r\n if (attachment.type.startsWith('image\/')) {\r\n const img = document.createElement('img');\r\n img.src = URL.createObjectURL(attachment);\r\n img.classList.add('thumbnail');\r\n attachmentContainer.appendChild(img);\r\n } else {\r\n const fileIcon = document.createElement('div');\r\n fileIcon.textContent = '\ud83d\udcc4 ' + attachment.name;\r\n fileIcon.classList.add('file-preview');\r\n attachmentContainer.appendChild(fileIcon);\r\n }\r\n });\r\n messageElement.appendChild(attachmentContainer);\r\n }\r\n\r\n return messageElement;\r\n }\r\n\r\n function sendMessage() {\r\n const message = messageInput.value.trim();\r\n if (message || attachments.length > 0) {\r\n \/\/ Mensaje del usuario\r\n const userMessageElement = createMessageElement(message, 'user', attachments);\r\n chatMessages.appendChild(userMessageElement);\r\n\r\n \/\/ Respuesta de IA\r\n const aiResponse = mockAIResponse(message, attachments);\r\n const aiMessageElement = createMessageElement(aiResponse.text, 'ai', aiResponse.attachments);\r\n chatMessages.appendChild(aiMessageElement);\r\n\r\n \/\/ Limpiar input y adjuntos\r\n messageInput.value = '';\r\n attachments = [];\r\n attachmentPreview.innerHTML = '';\r\n chatMessages.scrollTop = chatMessages.scrollHeight;\r\n }\r\n }\r\n\r\n function handleImageUpload(event) {\r\n const files = event.target.files;\r\n for (let file of files) {\r\n attachments.push(file);\r\n const container = document.createElement('div');\r\n container.classList.add('attachment-container');\r\n\r\n const img = document.createElement('img');\r\n img.src = URL.createObjectURL(file);\r\n img.classList.add('thumbnail');\r\n\r\n const removeBtn = document.createElement('button');\r\n removeBtn.textContent = '\u2716';\r\n removeBtn.classList.add('remove-attachment');\r\n removeBtn.onclick = () => {\r\n attachments = attachments.filter(f => f !== file);\r\n container.remove();\r\n };\r\n\r\n container.appendChild(img);\r\n container.appendChild(removeBtn);\r\n attachmentPreview.appendChild(container);\r\n }\r\n }\r\n\r\n function handleFileUpload(event) {\r\n const files = event.target.files;\r\n for (let file of files) {\r\n attachments.push(file);\r\n const container = document.createElement('div');\r\n container.classList.add('attachment-container');\r\n\r\n const fileIcon = document.createElement('div');\r\n fileIcon.textContent = '\ud83d\udcc4 ' + file.name;\r\n fileIcon.classList.add('file-preview');\r\n\r\n const removeBtn = document.createElement('button');\r\n removeBtn.textContent = '\u2716';\r\n removeBtn.classList.add('remove-attachment');\r\n removeBtn.onclick = () => {\r\n attachments = attachments.filter(f => f !== file);\r\n container.remove();\r\n };\r\n\r\n container.appendChild(fileIcon);\r\n container.appendChild(removeBtn);\r\n attachmentPreview.appendChild(container);\r\n }\r\n }\r\n\r\n \/\/ Dictado de voz para mensaje\r\n function initVoiceInput() {\r\n const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\r\n recognition.lang = 'es-ES';\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 messageInput.value = transcript;\r\n sendMessage(); \/\/ Enviar autom\u00e1ticamente despu\u00e9s de dictar\r\n };\r\n\r\n recognition.onerror = (event) => {\r\n console.error('Error de reconocimiento de voz:', event.error);\r\n };\r\n\r\n voiceInputButton.onclick = () => {\r\n recognition.start();\r\n };\r\n }\r\n\r\n \/\/ Conversaci\u00f3n de voz completa\r\n function initVoiceConversation() {\r\n const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\r\n const synthesis = window.speechSynthesis;\r\n \r\n recognition.lang = 'es-ES';\r\n recognition.continuous = true;\r\n recognition.interimResults = false;\r\n\r\n voiceConversationContainer.style.display = 'flex';\r\n\r\n recognition.onresult = (event) => {\r\n const transcript = event.results[event.results.length - 1][0].transcript;\r\n \r\n \/\/ Simular respuesta de IA\r\n const aiResponse = mockAIResponse(transcript);\r\n \r\n \/\/ Crear elementos de mensaje\r\n const userMessageElement = createMessageElement(transcript, 'user');\r\n const aiMessageElement = createMessageElement(aiResponse.text, 'ai');\r\n \r\n chatMessages.appendChild(userMessageElement);\r\n chatMessages.appendChild(aiMessageElement);\r\n chatMessages.scrollTop = chatMessages.scrollHeight;\r\n\r\n \/\/ Hablar la respuesta de la IA\r\n const utterance = new SpeechSynthesisUtterance(aiResponse.text);\r\n utterance.lang = 'es-ES';\r\n synthesis.speak(utterance);\r\n };\r\n\r\n recognition.onerror = (event) => {\r\n console.error('Error de reconocimiento de voz:', event.error);\r\n };\r\n\r\n voiceConversationBtn.onclick = () => {\r\n recognition.start();\r\n };\r\n\r\n stopVoiceConversationBtn.onclick = () => {\r\n recognition.stop();\r\n voiceConversationContainer.style.display = 'none';\r\n };\r\n }\r\n\r\n \/\/ Inicializar funcionalidades de voz si son soportadas\r\n if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {\r\n initVoiceInput();\r\n initVoiceConversation();\r\n } else {\r\n voiceInputButton.disabled = true;\r\n voiceConversationBtn.disabled = true;\r\n voiceInputButton.title = 'Dictado de voz no soportado';\r\n voiceConversationBtn.title = 'Conversaci\u00f3n de voz no soportada';\r\n }\r\n\r\n \/\/ Enviar mensaje con Enter\r\n messageInput.addEventListener('keypress', (e) => {\r\n if (e.key === 'Enter') {\r\n sendMessage();\r\n }\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Neo 2.0.6 Beta (Base Claude) Agente de IA Interactivo Avanzado Conversaci\u00f3n de voz iniciada Detener Enviar \ud83d\udcce Archivo \ud83d\uddbc\ufe0f Imagen […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","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":"default","ast-page-background-enabled":"default","ast-page-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-opacity":"","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-opacity":"","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-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-542","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/neocloud05.com\/neo\/wp-json\/wp\/v2\/pages\/542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/neocloud05.com\/neo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/neocloud05.com\/neo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/neocloud05.com\/neo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/neocloud05.com\/neo\/wp-json\/wp\/v2\/comments?post=542"}],"version-history":[{"count":13,"href":"https:\/\/neocloud05.com\/neo\/wp-json\/wp\/v2\/pages\/542\/revisions"}],"predecessor-version":[{"id":569,"href":"https:\/\/neocloud05.com\/neo\/wp-json\/wp\/v2\/pages\/542\/revisions\/569"}],"wp:attachment":[{"href":"https:\/\/neocloud05.com\/neo\/wp-json\/wp\/v2\/media?parent=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}