|
<!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> |
