Spaces:

Fdgg55
/

chat-app

Running

App Files Files Community

Fdgg55 commited on Apr 26, 2025

Commit

9f1ba64

verified ·

1 Parent(s): 45ae9e5

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +463 -19
prompts.txt +6 -0

README.md CHANGED Viewed

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

 ---
+title: chat-app
+emoji: 🐳
 colorFrom: green
+colorTo: purple
 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,463 @@
-<!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>Real-Time Chat App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
+    <style>
+        .message-container {
+            scrollbar-width: thin;
+            scrollbar-color: #4B5563 #1F2937;
+        }
+        .message-container::-webkit-scrollbar {
+            width: 8px;
+        }
+        .message-container::-webkit-scrollbar-track {
+            background: #1F2937;
+        }
+        .message-container::-webkit-scrollbar-thumb {
+            background-color: #4B5563;
+            border-radius: 4px;
+        }
+        .typing-indicator::after {
+            content: "...";
+            animation: typing 1.5s infinite;
+        }
+        @keyframes typing {
+            0% { content: "."; }
+            33% { content: ".."; }
+            66% { content: "..."; }
+        }
+        .fade-in {
+            animation: fadeIn 0.3s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
+    <!-- Firebase Configuration -->
+    <script>
+        // Your Firebase configuration
+        const firebaseConfig = {
+            apiKey: "AIzaSyB5XQ7j5X5X5X5X5X5X5X5X5X5X5X5X5X5",
+            authDomain: "realtime-chat-app-12345.firebaseapp.com",
+            databaseURL: "https://realtime-chat-app-12345.firebaseio.com",
+            projectId: "realtime-chat-app-12345",
+            storageBucket: "realtime-chat-app-12345.appspot.com",
+            messagingSenderId: "123456789012",
+            appId: "1:123456789012:web:5X5X5X5X5X5X5X5X5X5X5X"
+        };
+        // Initialize Firebase
+        firebase.initializeApp(firebaseConfig);
+        const database = firebase.database();
+    </script>
+    <header class="bg-gray-800 py-4 px-6 shadow-lg">
+        <div class="container mx-auto flex justify-between items-center">
+            <h1 class="text-2xl font-bold text-blue-400">Real-Time Chat</h1>
+            <div id="connection-status" class="flex items-center">
+                <span class="h-3 w-3 rounded-full bg-red-500 mr-2"></span>
+                <span>Disconnected</span>
+            </div>
+        </div>
+    </header>
+    <main class="flex-1 container mx-auto p-4 flex flex-col md:flex-row gap-6">
+        <!-- Connection Panel -->
+        <div class="bg-gray-800 rounded-lg p-6 w-full md:w-1/3 lg:w-1/4 shadow-lg">
+            <div class="mb-6">
+                <h2 class="text-xl font-semibold mb-4">Your Profile</h2>
+                <div class="space-y-4">
+                    <div>
+                        <label for="user-id" class="block text-sm font-medium mb-1">Your Unique ID</label>
+                        <div class="flex">
+                            <input type="text" id="user-id" readonly class="bg-gray-700 text-gray-200 rounded-l-md px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <button onclick="copyUserId()" class="bg-blue-600 hover:bg-blue-700 px-3 rounded-r-md flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div>
+                        <label for="display-name" class="block text-sm font-medium mb-1">Display Name</label>
+                        <input type="text" id="display-name" placeholder="Enter your name" class="bg-gray-700 text-gray-200 rounded-md px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <button onclick="generateUserId()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-200">
+                        Generate New ID
+                    </button>
+                </div>
+            </div>
+            <div>
+                <h2 class="text-xl font-semibold mb-4">Connect to Friend</h2>
+                <div class="space-y-4">
+                    <div>
+                        <label for="friend-id" class="block text-sm font-medium mb-1">Friend's ID</label>
+                        <input type="text" id="friend-id" placeholder="Enter friend's ID" class="bg-gray-700 text-gray-200 rounded-md px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <button onclick="connectToFriend()" id="connect-button" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md transition duration-200">
+                        Connect
+                    </button>
+                    <button onclick="disconnectFromFriend()" id="disconnect-button" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-md transition duration-200 hidden">
+                        Disconnect
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Chat Panel -->
+        <div class="bg-gray-800 rounded-lg p-6 flex-1 shadow-lg flex flex-col">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold">Chat</h2>
+                <div id="chat-status" class="text-sm text-gray-400">
+                    Not connected to anyone
+                </div>
+            </div>
+            <div id="message-container" class="message-container flex-1 overflow-y-auto mb-4 space-y-3 p-2 bg-gray-700 rounded-lg">
+                <div class="text-center text-gray-400 py-10">
+                    Connect with a friend to start chatting
+                </div>
+            </div>
+            <div id="typing-indicator" class="typing-indicator text-sm text-gray-400 mb-2 h-5 hidden">
+                Friend is typing
+            </div>
+            <div class="flex gap-2">
+                <input type="text" id="message-input" placeholder="Type a message..." disabled class="flex-1 bg-gray-700 text-gray-200 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <button onclick="sendMessage()" id="send-button" disabled class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-200 disabled:opacity-50">
+                    Send
+                </button>
+            </div>
+        </div>
+    </main>
+    <script>
+        // Global variables
+        let userId = '';
+        let friendId = '';
+        let displayName = 'Anonymous';
+        let isConnected = false;
+        let typingTimeout;
+        let chatRef;
+        let typingRef;
+        let userRef;
+        // Initialize the app
+        function init() {
+            // Check if user ID exists in localStorage
+            if (localStorage.getItem('chatUserId')) {
+                userId = localStorage.getItem('chatUserId');
+                document.getElementById('user-id').value = userId;
+            } else {
+                generateUserId();
+            }
+            // Check if display name exists
+            if (localStorage.getItem('chatDisplayName')) {
+                displayName = localStorage.getItem('chatDisplayName');
+                document.getElementById('display-name').value = displayName;
+            }
+            // Set up event listeners
+            document.getElementById('display-name').addEventListener('input', function() {
+                displayName = this.value || 'Anonymous';
+                localStorage.setItem('chatDisplayName', displayName);
+                if (isConnected) {
+                    // Update display name in the database
+                    userRef.update({
+                        name: displayName
+                    });
+                }
+            });
+            document.getElementById('message-input').addEventListener('input', function() {
+                if (isConnected) {
+                    // User is typing
+                    typingRef.set(true);
+                    // Clear previous timeout if it exists
+                    if (typingTimeout) clearTimeout(typingTimeout);
+                    // Set timeout to indicate typing stopped
+                    typingTimeout = setTimeout(() => {
+                        typingRef.set(false);
+                    }, 1000);
+                }
+            });
+            document.getElementById('message-input').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+        }
+        // Generate a new user ID
+        function generateUserId() {
+            userId = 'user-' + Math.random().toString(36).substr(2, 9);
+            document.getElementById('user-id').value = userId;
+            localStorage.setItem('chatUserId', userId);
+            // Disconnect if currently connected
+            if (isConnected) {
+                disconnectFromFriend();
+            }
+        }
+        // Copy user ID to clipboard
+        function copyUserId() {
+            const userIdInput = document.getElementById('user-id');
+            userIdInput.select();
+            document.execCommand('copy');
+            // Show feedback
+            const copyButton = userIdInput.nextElementSibling;
+            copyButton.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+            `;
+            setTimeout(() => {
+                copyButton.innerHTML = `
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                    </svg>
+                `;
+            }, 2000);
+        }
+        // Connect to a friend
+        function connectToFriend() {
+            friendId = document.getElementById('friend-id').value.trim();
+            if (!friendId) {
+                alert('Please enter your friend\'s ID');
+                return;
+            }
+            if (friendId === userId) {
+                alert('You cannot connect to yourself');
+                return;
+            }
+            // Check if friend exists
+            const friendRef = database.ref('users/' + friendId);
+            friendRef.once('value').then((snapshot) => {
+                if (snapshot.exists()) {
+                    // Friend exists, establish connection
+                    isConnected = true;
+                    // Update UI
+                    document.getElementById('connect-button').classList.add('hidden');
+                    document.getElementById('disconnect-button').classList.remove('hidden');
+                    document.getElementById('message-input').disabled = false;
+                    document.getElementById('send-button').disabled = false;
+                    document.getElementById('friend-id').disabled = true;
+                    // Update status
+                    document.getElementById('connection-status').innerHTML = `
+                        <span class="h-3 w-3 rounded-full bg-green-500 mr-2"></span>
+                        <span>Connected to ${snapshot.val().name || 'Friend'}</span>
+                    `;
+                    document.getElementById('chat-status').textContent = `Chatting with ${snapshot.val().name || 'Friend'}`;
+                    // Clear message container
+                    document.getElementById('message-container').innerHTML = '';
+                    // Create chat reference
+                    const chatId = [userId, friendId].sort().join('-');
+                    chatRef = database.ref('chats/' + chatId);
+                    // Create typing reference
+                    typingRef = database.ref('typing/' + chatId + '/' + userId);
+                    // Create user reference
+                    userRef = database.ref('users/' + userId);
+                    // Set user data
+                    userRef.set({
+                        name: displayName,
+                        connectedTo: friendId,
+                        lastSeen: firebase.database.ServerValue.TIMESTAMP
+                    });
+                    // Listen for messages
+                    chatRef.limitToLast(100).on('child_added', (snapshot) => {
+                        const message = snapshot.val();
+                        addMessageToChat(message);
+                    });
+                    // Listen for typing indicators from friend
+                    database.ref('typing/' + chatId + '/' + friendId).on('value', (snapshot) => {
+                        const isTyping = snapshot.val();
+                        const typingIndicator = document.getElementById('typing-indicator');
+                        if (isTyping) {
+                            typingIndicator.classList.remove('hidden');
+                        } else {
+                            typingIndicator.classList.add('hidden');
+                        }
+                    });
+                    // Listen for friend disconnection
+                    database.ref('users/' + friendId + '/connectedTo').on('value', (snapshot) => {
+                        if (snapshot.val() !== userId) {
+                            // Friend disconnected
+                            disconnectFromFriend();
+                            alert('Your friend has disconnected');
+                        }
+                    });
+                } else {
+                    alert('Friend not found. Please check the ID and try again.');
+                }
+            }).catch((error) => {
+                console.error('Error connecting to friend:', error);
+                alert('Error connecting to friend. Please try again.');
+            });
+        }
+        // Disconnect from friend
+        function disconnectFromFriend() {
+            if (!isConnected) return;
+            isConnected = false;
+            // Update UI
+            document.getElementById('connect-button').classList.remove('hidden');
+            document.getElementById('disconnect-button').classList.add('hidden');
+            document.getElementById('message-input').disabled = true;
+            document.getElementById('send-button').disabled = true;
+            document.getElementById('friend-id').disabled = false;
+            // Update status
+            document.getElementById('connection-status').innerHTML = `
+                <span class="h-3 w-3 rounded-full bg-red-500 mr-2"></span>
+                <span>Disconnected</span>
+            `;
+            document.getElementById('chat-status').textContent = 'Not connected to anyone';
+            document.getElementById('typing-indicator').classList.add('hidden');
+            // Add disconnect message to chat
+            addSystemMessage('Disconnected from chat');
+            // Clean up Firebase references
+            if (chatRef) chatRef.off();
+            if (typingRef) typingRef.off();
+            if (userRef) {
+                userRef.update({
+                    connectedTo: null,
+                    lastSeen: firebase.database.ServerValue.TIMESTAMP
+                });
+            }
+            // Clear typing status
+            if (typingRef) typingRef.set(false);
+        }
+        // Send a message
+        function sendMessage() {
+            const messageInput = document.getElementById('message-input');
+            const messageText = messageInput.value.trim();
+            if (!messageText || !isConnected) return;
+            // Create message object
+            const message = {
+                sender: userId,
+                senderName: displayName,
+                text: messageText,
+                timestamp: firebase.database.ServerValue.TIMESTAMP
+            };
+            // Push message to database
+            chatRef.push(message);
+            // Clear input
+            messageInput.value = '';
+            // Stop typing indicator
+            typingRef.set(false);
+        }
+        // Add message to chat UI
+        function addMessageToChat(message) {
+            const messageContainer = document.getElementById('message-container');
+            // Remove "not connected" message if it exists
+            if (messageContainer.children.length === 1 && messageContainer.children[0].classList.contains('text-center')) {
+                messageContainer.innerHTML = '';
+            }
+            const messageElement = document.createElement('div');
+            messageElement.classList.add('fade-in');
+            if (message.sender === userId) {
+                // Your message
+                messageElement.innerHTML = `
+                    <div class="flex justify-end">
+                        <div class="bg-blue-600 text-white rounded-l-lg rounded-br-lg px-4 py-2 max-w-xs md:max-w-md lg:max-w-lg">
+                            <div class="text-xs text-blue-200 mb-1">You</div>
+                            <div>${message.text}</div>
+                        </div>
+                    </div>
+                `;
+            } else if (message.sender === 'system') {
+                // System message
+                messageElement.innerHTML = `
+                    <div class="text-center text-gray-400 text-sm py-2">
+                        ${message.text}
+                    </div>
+                `;
+            } else {
+                // Friend's message
+                messageElement.innerHTML = `
+                    <div class="flex justify-start">
+                        <div class="bg-gray-700 text-white rounded-r-lg rounded-bl-lg px-4 py-2 max-w-xs md:max-w-md lg:max-w-lg">
+                            <div class="text-xs text-gray-300 mb-1">${message.senderName || 'Friend'}</div>
+                            <div>${message.text}</div>
+                        </div>
+                    </div>
+                `;
+            }
+            messageContainer.appendChild(messageElement);
+            messageContainer.scrollTop = messageContainer.scrollHeight;
+        }
+        // Add system message
+        function addSystemMessage(text) {
+            addMessageToChat({
+                sender: 'system',
+                text: text,
+                timestamp: firebase.database.ServerValue.TIMESTAMP
+            });
+        }
+        // Initialize the app when the page loads
+        window.onload = init;
+    </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=Fdgg55/chat-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+Prompt: Create an open-world game set in a fictional South Asian town where the player starts as a broke mechanic. The game should include a mix of urban, rural, and hidden areas like jungles and abandoned forts. The core gameplay revolves around building and customizing vehicles, completing odd jobs (like deliveries, races, or shady tasks), and interacting with dynamic NPCs that speak in local dialects. Add a day/night cycle, weather effects, street mini-games (like cricket and ludo), and a dramatic storyline involving underground racing, betrayal, and a lost family member. Include multiplayer elements where other players can appear in your world as ghostly challengers or allies. Style: gritty, funny, and emotional. Think GTA meets Need for Speed, but desi.
+rustyroadsdesidriftmechanicopenworldsouthasiantownracingbetrayalcustomcarsminigamesnpcweather
+Create a game Ghostline Urban Haunt Detective Openworld Spirits Quests Puzzles Secrets Ghostcam Dialogue Mystery
+Create a open world game where a player create a world and live in it
+Create a 3d shooting game with smooth fps guns and named Talha shooting
+Real time chatting app that works rally 2 people can contact by their ids