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