|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ChatGPT Clone</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 3px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes typing { |
|
|
0% { opacity: 0.5; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.5; } |
|
|
} |
|
|
|
|
|
.typing-indicator span { |
|
|
animation: typing 1.5s infinite; |
|
|
} |
|
|
.typing-indicator span:nth-child(2) { |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
.typing-indicator span:nth-child(3) { |
|
|
animation-delay: 0.4s; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.message { |
|
|
animation: fadeIn 0.3s ease-out; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-white border-b border-gray-200 py-3 px-4 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold mr-2">AI</div> |
|
|
<h1 class="text-lg font-semibold">ChatGPT</h1> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-sun"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto p-4 space-y-6" id="chat-container"> |
|
|
|
|
|
<div class="message max-w-3xl mx-auto bg-white rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold flex-shrink-0">AI</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">ChatGPT</h3> |
|
|
<p class="text-gray-700 mt-1">Hello! I'm ChatGPT, an AI assistant. How can I help you today?</p> |
|
|
<div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-2"> |
|
|
<button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-3 rounded-md text-sm text-left transition"> |
|
|
"Explain quantum computing in simple terms" |
|
|
</button> |
|
|
<button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-3 rounded-md text-sm text-left transition"> |
|
|
"Give me creative ideas for a 10-year-old's birthday" |
|
|
</button> |
|
|
<button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-3 rounded-md text-sm text-left transition"> |
|
|
"How do I make an HTTP request in JavaScript?" |
|
|
</button> |
|
|
<button class="suggestion-btn bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-3 rounded-md text-sm text-left transition"> |
|
|
"Write a poem about artificial intelligence" |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="recording-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-sm w-full text-center"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-red-500 flex items-center justify-center animate-pulse"> |
|
|
<i class="fas fa-microphone text-white text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold mb-2">Recording...</h3> |
|
|
<p class="text-gray-600 mb-4">Speak now. Click stop when finished.</p> |
|
|
<button id="stop-recording" class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-md"> |
|
|
Stop Recording |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white border-t border-gray-200 p-6 flex flex-col items-center"> |
|
|
<button id="mic-button" class="w-16 h-16 rounded-full bg-green-500 hover:bg-green-600 text-white flex items-center justify-center transition-all transform hover:scale-105"> |
|
|
<i class="fas fa-microphone text-2xl"></i> |
|
|
</button> |
|
|
<p id="recording-status" class="text-sm text-gray-500 mt-2 hidden">Listening...</p> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const chatForm = document.getElementById('chat-form'); |
|
|
const messageInput = document.getElementById('message-input'); |
|
|
const chatContainer = document.getElementById('chat-container'); |
|
|
const sendButton = document.getElementById('send-button'); |
|
|
const micButton = document.getElementById('mic-button'); |
|
|
const recordingOverlay = document.getElementById('recording-overlay'); |
|
|
const stopRecordingBtn = document.getElementById('stop-recording'); |
|
|
|
|
|
let isRecording = false; |
|
|
|
|
|
|
|
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; |
|
|
const recognition = new SpeechRecognition(); |
|
|
recognition.continuous = false; |
|
|
recognition.interimResults = false; |
|
|
recognition.lang = 'en-US'; |
|
|
|
|
|
|
|
|
micButton.addEventListener('click', toggleSpeechRecognition); |
|
|
|
|
|
function toggleSpeechRecognition() { |
|
|
if (isRecording) { |
|
|
stopSpeechRecognition(); |
|
|
} else { |
|
|
startSpeechRecognition(); |
|
|
} |
|
|
} |
|
|
|
|
|
function startSpeechRecognition() { |
|
|
try { |
|
|
recognition.start(); |
|
|
isRecording = true; |
|
|
document.getElementById('recording-status').classList.remove('hidden'); |
|
|
recordingOverlay.classList.remove('hidden'); |
|
|
micButton.classList.add('animate-pulse', 'bg-red-500', 'hover:bg-red-600'); |
|
|
micButton.classList.remove('bg-green-500', 'hover:bg-green-600'); |
|
|
|
|
|
|
|
|
micButton.innerHTML = '<i class="fas fa-stop text-2xl"></i>'; |
|
|
} catch (err) { |
|
|
console.error('Speech recognition error:', err); |
|
|
addMessageToChat('ai', "Couldn't access microphone. Please check permissions and try again."); |
|
|
resetMicButton(); |
|
|
} |
|
|
} |
|
|
|
|
|
function stopSpeechRecognition() { |
|
|
try { |
|
|
recognition.stop(); |
|
|
} catch (e) { |
|
|
console.log('Recognition already stopped'); |
|
|
} |
|
|
resetMicButton(); |
|
|
} |
|
|
|
|
|
function resetMicButton() { |
|
|
isRecording = false; |
|
|
document.getElementById('recording-status').classList.add('hidden'); |
|
|
recordingOverlay.classList.add('hidden'); |
|
|
micButton.classList.remove('animate-pulse', 'bg-red-500', 'hover:bg-red-600'); |
|
|
micButton.classList.add('bg-green-500', 'hover:bg-green-600'); |
|
|
micButton.innerHTML = '<i class="fas fa-microphone text-2xl"></i>'; |
|
|
} |
|
|
|
|
|
recognition.onresult = async (event) => { |
|
|
const transcript = event.results[0][0].transcript; |
|
|
stopSpeechRecognition(); |
|
|
|
|
|
|
|
|
showTypingIndicator(); |
|
|
|
|
|
|
|
|
addMessageToChat('user', transcript); |
|
|
|
|
|
|
|
|
await generateAndPlayResponse(transcript); |
|
|
}; |
|
|
|
|
|
recognition.onerror = (event) => { |
|
|
console.error('Speech recognition error:', event.error); |
|
|
let errorMessage = "Sorry, I couldn't understand your speech. Please try again."; |
|
|
|
|
|
switch(event.error) { |
|
|
case 'no-speech': |
|
|
errorMessage = "No speech detected. Please try speaking louder or closer to the microphone."; |
|
|
break; |
|
|
case 'audio-capture': |
|
|
errorMessage = "Couldn't access microphone. Please check your microphone settings."; |
|
|
break; |
|
|
case 'not-allowed': |
|
|
errorMessage = "Microphone access was denied. Please enable microphone permissions."; |
|
|
break; |
|
|
} |
|
|
|
|
|
resetMicButton(); |
|
|
addMessageToChat('ai', errorMessage); |
|
|
}; |
|
|
|
|
|
recognition.onend = () => { |
|
|
if (isRecording) { |
|
|
stopSpeechRecognition(); |
|
|
} |
|
|
}; |
|
|
|
|
|
stopRecordingBtn.addEventListener('click', function() { |
|
|
if (mediaRecorder && isRecording) { |
|
|
mediaRecorder.stop(); |
|
|
isRecording = false; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.suggestion-btn').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
messageInput.value = this.textContent.trim(); |
|
|
messageInput.focus(); |
|
|
messageInput.dispatchEvent(new Event('input')); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
async function generateAndPlayResponse(message) { |
|
|
try { |
|
|
|
|
|
const response = generateResponse(message); |
|
|
|
|
|
|
|
|
removeTypingIndicator(); |
|
|
|
|
|
|
|
|
addMessageToChat('ai', response); |
|
|
|
|
|
|
|
|
const response = await fetch('https://nihalgazi-text-to-speech-unlimited.hf.space/gradio_api/call/text_to_speech_app', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json' |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
data: [ |
|
|
response, |
|
|
"alloy", |
|
|
"", |
|
|
true, |
|
|
3 |
|
|
] |
|
|
}) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
const eventId = data.data[0]; |
|
|
|
|
|
|
|
|
const audioStream = await fetch(`https://nihalgazi-text-to-speech-unlimited.hf.space/gradio_api/call/text_to_speech_app/${eventId}`); |
|
|
const audioBlob = await audioStream.blob(); |
|
|
const audioUrl = URL.createObjectURL(audioBlob); |
|
|
const audio = new Audio(audioUrl); |
|
|
audio.play(); |
|
|
|
|
|
|
|
|
scrollToBottom(); |
|
|
} catch (error) { |
|
|
console.error('Error generating response:', error); |
|
|
removeTypingIndicator(); |
|
|
addMessageToChat('ai', "Sorry, I encountered an error processing your request."); |
|
|
scrollToBottom(); |
|
|
} |
|
|
} |
|
|
|
|
|
function addMessageToChat(sender, message) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'message max-w-3xl mx-auto bg-white rounded-lg p-4 shadow-sm'; |
|
|
|
|
|
if (sender === 'user') { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3 justify-end"> |
|
|
<div class="text-right"> |
|
|
<p class="text-gray-700">${message}</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold flex-shrink-0">Y</div> |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold flex-shrink-0">AI</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">ChatGPT</h3> |
|
|
<p class="text-gray-700 mt-1">${message}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
chatContainer.appendChild(messageDiv); |
|
|
} |
|
|
|
|
|
function showTypingIndicator() { |
|
|
const typingDiv = document.createElement('div'); |
|
|
typingDiv.className = 'message max-w-3xl mx-auto'; |
|
|
typingDiv.id = 'typing-indicator'; |
|
|
typingDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold flex-shrink-0">AI</div> |
|
|
<div class="typing-indicator bg-white rounded-lg p-4 shadow-sm"> |
|
|
<span class="inline-block w-2 h-2 bg-gray-400 rounded-full mx-0.5"></span> |
|
|
<span class="inline-block w-2 h-2 bg-gray-400 rounded-full mx-0.5"></span> |
|
|
<span class="inline-block w-2 h-2 bg-gray-400 rounded-full mx-0.5"></span> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
chatContainer.appendChild(typingDiv); |
|
|
} |
|
|
|
|
|
function removeTypingIndicator() { |
|
|
const typingIndicator = document.getElementById('typing-indicator'); |
|
|
if (typingIndicator) { |
|
|
typingIndicator.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
function scrollToBottom() { |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
function generateResponse(message) { |
|
|
|
|
|
const responses = [ |
|
|
"I understand you're asking about: " + message + ". Here's what I can tell you about that topic...", |
|
|
"That's an interesting question! " + message + " is something that can be explored from multiple perspectives...", |
|
|
"Regarding " + message + ", I'd be happy to help. The key points to consider are...", |
|
|
"I've analyzed your query about " + message + " and here's my response...", |
|
|
message + " is a fascinating subject. Let me break it down for you..." |
|
|
]; |
|
|
|
|
|
const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
|
|
|
|
|
|
|
|
if (Math.random() > 0.5) { |
|
|
const followUps = [ |
|
|
" Would you like me to go into more detail about any specific aspect?", |
|
|
" Did that answer your question or would you like more information?", |
|
|
" I can provide examples if that would be helpful. Would you like some?", |
|
|
" Is there anything else related to this you'd like to know?" |
|
|
]; |
|
|
return randomResponse + followUps[Math.floor(Math.random() * followUps.length)]; |
|
|
} |
|
|
|
|
|
return randomResponse; |
|
|
} |
|
|
|
|
|
|
|
|
messageInput.focus(); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Kamocodes/k" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
