| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Delta AI Voice & Text Chat</title> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> |
| <style> |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| font-family: 'Inter', sans-serif; |
| } |
| |
| body { |
| background: linear-gradient(135deg, #dbeafe, #f0f9ff); |
| color: #333; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: flex-start; |
| padding: 20px; |
| } |
| |
| #header { |
| width: 100%; |
| text-align: center; |
| background-color: #3b82f6; |
| color: white; |
| padding: 15px 0; |
| font-size: 24px; |
| font-weight: 600; |
| border-radius: 12px; |
| margin-bottom: 20px; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| } |
| |
| #chatbox { |
| width: 100%; |
| max-width: 800px; |
| background: #ffffffd4; |
| backdrop-filter: blur(8px); |
| border-radius: 16px; |
| padding: 25px; |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); |
| } |
| |
| #chatbox h1 { |
| font-size: 28px; |
| margin-bottom: 20px; |
| color: #1e3a8a; |
| } |
| |
| #output { |
| height: 300px; |
| overflow-y: auto; |
| padding: 15px; |
| background-color: #f9fafb; |
| border-radius: 12px; |
| border: 1px solid #e5e7eb; |
| margin-bottom: 20px; |
| } |
| |
| .input-row { |
| display: flex; |
| gap: 10px; |
| } |
| |
| #userInput { |
| flex: 1; |
| padding: 12px 14px; |
| border-radius: 10px; |
| border: 1px solid #d1d5db; |
| font-size: 16px; |
| background-color: #fff; |
| transition: 0.3s ease; |
| } |
| |
| #userInput:focus { |
| outline: none; |
| border-color: #60a5fa; |
| box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3); |
| } |
| |
| #submitBtn, #micBtn { |
| padding: 12px; |
| border: none; |
| border-radius: 10px; |
| background-color: #3b82f6; |
| color: white; |
| font-size: 18px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: background-color 0.3s ease; |
| } |
| |
| #submitBtn:hover, #micBtn:hover { |
| background-color: #2563eb; |
| } |
| |
| #micBtn { |
| font-size: 20px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| p { |
| margin: 8px 0; |
| line-height: 1.5; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="header"> |
| <div id="clock">Loading time...</div> |
| </div> |
| <div id="chatbox"> |
| <h1>Delta AI Voice & Text Chat</h1> |
| <div id="output"></div> |
| <div class="input-row"> |
| <input type="text" id="userInput" placeholder="Ask Delta anything..."> |
| <button id="micBtn">🎤</button> |
| <button id="submitBtn">Send</button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function updateClock() { |
| const now = new Date(); |
| const hours = String(now.getHours()).padStart(2, '0'); |
| const minutes = String(now.getMinutes()).padStart(2, '0'); |
| const seconds = String(now.getSeconds()).padStart(2, '0'); |
| document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`; |
| } |
| setInterval(updateClock, 1000); |
| updateClock(); |
| |
| |
| function typeWriter(text, element, delay = 20, callback) { |
| let i = 0; |
| function type() { |
| if (i < text.length) { |
| element.innerHTML += text.charAt(i); |
| i++; |
| setTimeout(type, delay); |
| } else if (callback) { |
| callback(); |
| } |
| } |
| type(); |
| } |
| |
| |
| function speakText(text) { |
| const speech = new SpeechSynthesisUtterance(text); |
| speech.lang = 'en-US'; |
| window.speechSynthesis.speak(speech); |
| } |
| |
| |
| function displayWithTypewriter(role, message) { |
| const output = document.getElementById('output'); |
| const p = document.createElement('p'); |
| p.innerHTML = `<strong>${role}:</strong> `; |
| output.appendChild(p); |
| typeWriter(message, p, 40, () => { |
| if (role === 'Delta') { |
| speakText(message); |
| } |
| }); |
| output.scrollTop = output.scrollHeight; |
| } |
| |
| |
| let recognition; |
| if ('webkitSpeechRecognition' in window) { |
| recognition = new webkitSpeechRecognition(); |
| recognition.continuous = false; |
| recognition.interimResults = false; |
| recognition.lang = 'en-US'; |
| |
| recognition.onresult = function(event) { |
| const userInput = event.results[0][0].transcript; |
| document.getElementById('userInput').value = userInput; |
| sendMessage(userInput); |
| }; |
| |
| recognition.onerror = function(event) { |
| console.error('Speech recognition error', event); |
| }; |
| } |
| |
| |
| async function sendMessage(userInput) { |
| if (!userInput) return; |
| |
| displayWithTypewriter("You", userInput); |
| |
| const response = await fetch('https://api.openai.com/v1/chat/completions', { |
| method: 'POST', |
| headers: { |
| 'Authorization': 'Bearer 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', |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify({ |
| model: "gpt-3.5-turbo", |
| messages: [{ role: "user", content: userInput }], |
| max_tokens: 150 |
| }) |
| }); |
| const data = await response.json(); |
| const aiMessage = data.choices[0].message.content; |
| displayWithTypewriter("Delta", aiMessage); |
| } |
| |
| |
| document.getElementById('submitBtn').addEventListener('click', () => { |
| const userInput = document.getElementById('userInput').value; |
| sendMessage(userInput); |
| }); |
| |
| |
| document.getElementById('micBtn').addEventListener('click', () => { |
| recognition.start(); |
| }); |
| </script> |
| </body> |
| </html> |
