<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jarvis Style Voice Bot</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
.spinner {
border: 4px solid rgba(190, 183, 164, 0.3);
border-top: 4px solid #3b82f6;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.holographic-face {
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(0, 204, 255, 0.4), rgba(0, 204, 255, 0.1));
border-radius: 50%;
border: 2px solid rgba(0, 204, 255, 0.8);
box-shadow: 0 0 15px 5px rgba(0, 204, 255, 0.5), inset 0 0 15px rgba(0, 204, 255, 0.5);
margin: 0 auto;
position: relative;
}
.holographic-face::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, rgba(0, 204, 255, 0.1));
transform: translate(-50%, -50%);
animation: pulse 3s infinite alternate;
}
@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(1); }
100% { transform: translate(-50%, -50%) scale(1.2); }
}
</style>
</head>
<body class="bg-black text-white flex items-center justify-center h-screen">
<div class="text-center p-8 rounded-lg shadow-lg">
<h1 class="text-4xl font-bold mb-4">Jarvis Voice Bot</h1>
<div class="holographic-face mb-4"></div>
<button id="start-btn" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded">🎙 Start Listening</button>
<p id="status" class="mt-3 text-gray-400"></p>
<p id="transcript" class="mt-4 p-2 text-blue-300"></p>
<p id="response" class="mt-4 p-2 text-green-300"></p>
<div id="spinner" class="mt-4 hidden spinner"></div>
</div>
<script>
const startBtn = document.getElementById('start-btn');
const transcriptDiv = document.getElementById('transcript');
const responseDiv = document.getElementById('response');
const spinner = document.getElementById('spinner');
const statusDiv = document.getElementById('status');
let recognition;
if ('webkitSpeechRecognition' in window) {
recognition = new webkitSpeechRecognition();
recognition.lang = 'en-US';
recognition.continuous = false;
recognition.interimResults = false;
recognition.onstart = function() {
statusDiv.innerText = "🎧 Listening...";
};
recognition.onresult = function(event) {
const transcript = event.results[0][0].transcript;
transcriptDiv.innerText = 'You said: ' + transcript;
statusDiv.innerText = "";
processCommand(transcript);
};
recognition.onerror = function(event) {
statusDiv.innerText = '⚠ Error: ' + event.error;
};
recognition.onend = function() {
statusDiv.innerText = "";
};
} else {
statusDiv.innerText = 'Speech recognition not supported in this browser. Use Chrome.';
}
startBtn.addEventListener('click', () => {
if (recognition) {
recognition.start();
}
});
function processCommand(transcript) {
responseDiv.innerText = '';
spinner.classList.remove('hidden');
fetch("https://api.openai.com/v1/chat/completions", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer 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
'
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: transcript }]
})
})
.then(response => response.json())
.then(data => {
spinner.classList.add('hidden');
if (data.choices && data.choices.length > 0) {
let reply = data.choices[0].message.content;
responseDiv.innerText = 'Jarvis: ' + reply;
speak(reply);
} else {
responseDiv.innerText = '❌ API error or empty response';
}
})
.catch(error => {
spinner.classList.add('hidden');
responseDiv.innerText = '❌ Network error';
});
}
function speak(text) {
const synth = window.speechSynthesis;
const utterThis = new SpeechSynthesisUtterance(text);
utterThis.pitch = 1.2;
utterThis.rate = 1;
utterThis.voice = synth.getVoices().find(voice => voice.name.includes('Google US English')) || null;
synth.speak(utterThis);
}
</script>
</body>
</html>