Spaces:

Kamocodes
/

k

Running

App Files Files Community

Kamocodes commited on Aug 17, 2025

Commit

a1a0b7b

verified ·

1 Parent(s): 7905a5a

RECORD MY SPECH - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +385 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: K
-emoji: 🐠
-colorFrom: indigo
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: k
+emoji: 🐳
+colorFrom: purple
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,385 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Typing indicator animation */
+        @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;
+        }
+        /* Message fade-in animation */
+        @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 -->
+    <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>
+    <!-- Chat container -->
+    <div class="flex-1 overflow-y-auto p-4 space-y-6" id="chat-container">
+        <!-- Welcome message -->
+        <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>
+    <!-- Recording overlay -->
+    <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>
+    <!-- Mic button area -->
+    <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;
+            // Speech recognition setup
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            const recognition = new SpeechRecognition();
+            recognition.continuous = false;
+            recognition.interimResults = false;
+            recognition.lang = 'en-US';
+            // Handle mic button click
+            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');
+                    // Show visual feedback
+                    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();
+                // Show processing indicator
+                showTypingIndicator();
+                // Add user message to chat
+                addMessageToChat('user', transcript);
+                // Generate and play response using the API
+                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;
+                }
+            });
+            // Handle suggestion buttons
+            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 {
+                    // Generate response
+                    const response = generateResponse(message);
+                    // Remove typing indicator
+                    removeTypingIndicator();
+                    // Add AI response to chat
+                    addMessageToChat('ai', response);
+                    // Call the text-to-speech API
+                    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,  // Text to speak
+                                "alloy",  // Voice model
+                                "",       // Empty string (not sure what this is for)
+                                true,     // Streaming
+                                3         // Quality level
+                            ]
+                        })
+                    });
+                    const data = await response.json();
+                    const eventId = data.data[0];
+                    // Stream the audio response
+                    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();
+                    // Scroll to bottom
+                    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) {
+                // Simple response generation - in a real app, this would call an API
+                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)];
+                // Sometimes add a follow-up question
+                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;
+            }
+            // Focus input on page load
+            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>