Spaces:

Maximelat
/

test

Running

App Files Files Community

Maximelat commited on Apr 6, 2025

Commit

c6cfe5a

verified ·

1 Parent(s): c15476c

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: test
+emoji: 🐳
+colorFrom: gray
+colorTo: red
 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,548 @@
-<!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>MCP CyberChat Interface</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">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto+Mono:wght@300;400;600&display=swap');
+        :root {
+            --primary: #00ff9d;
+            --secondary: #00b4ff;
+            --dark: #0a0a0a;
+            --darker: #050505;
+            --light: #f0f0f0;
+            --neon-glow: 0 0 10px rgba(0, 255, 157, 0.7);
+        }
+        body {
+            font-family: 'Roboto Mono', monospace;
+            background-color: var(--dark);
+            color: var(--light);
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        .cyber-font {
+            font-family: 'Orbitron', sans-serif;
+        }
+        .cyber-border {
+            border: 1px solid var(--primary);
+            box-shadow: var(--neon-glow);
+        }
+        .cyber-btn {
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            color: var(--dark);
+            border: none;
+            transition: all 0.3s ease;
+        }
+        .cyber-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 0 15px rgba(0, 255, 157, 0.9);
+        }
+        .cyber-input {
+            background-color: rgba(15, 15, 15, 0.8);
+            border: 1px solid var(--secondary);
+            color: var(--light);
+            transition: all 0.3s ease;
+        }
+        .cyber-input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: var(--neon-glow);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(0, 255, 157, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(0, 255, 157, 0);
+            }
+        }
+        .chat-container {
+            height: 65vh;
+            background: linear-gradient(135deg, rgba(10, 10, 10, 0.9), rgba(5, 5, 5, 0.95));
+            backdrop-filter: blur(5px);
+        }
+        .message {
+            max-width: 80%;
+            border-radius: 8px;
+            padding: 12px 16px;
+            margin-bottom: 12px;
+            position: relative;
+            word-wrap: break-word;
+        }
+        .user-message {
+            background: linear-gradient(45deg, rgba(0, 180, 255, 0.2), rgba(0, 255, 157, 0.2));
+            border-left: 3px solid var(--secondary);
+            margin-left: auto;
+        }
+        .bot-message {
+            background: linear-gradient(45deg, rgba(0, 255, 157, 0.1), rgba(0, 180, 255, 0.1));
+            border-right: 3px solid var(--primary);
+            margin-right: auto;
+        }
+        .typing-indicator::after {
+            content: '...';
+            display: inline-block;
+            animation: typing 1.5s infinite;
+        }
+        @keyframes typing {
+            0% { content: '.'; }
+            33% { content: '..'; }
+            66% { content: '...'; }
+        }
+        .status-connected {
+            background-color: rgba(0, 255, 157, 0.2);
+            color: var(--primary);
+        }
+        .status-disconnected {
+            background-color: rgba(255, 0, 0, 0.2);
+            color: #ff0000;
+        }
+        .glitch {
+            position: relative;
+        }
+        .glitch::before, .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--dark);
+        }
+        .glitch::before {
+            left: 2px;
+            text-shadow: -2px 0 #ff00c1;
+            clip: rect(24px, 550px, 90px, 0);
+            animation: glitch-anim-1 2s infinite linear alternate-reverse;
+        }
+        .glitch::after {
+            left: -2px;
+            text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
+            clip: rect(85px, 550px, 140px, 0);
+            animation: glitch-anim-2 2s infinite linear alternate-reverse;
+        }
+        @keyframes glitch-anim-1 {
+            0% { clip: rect(32px, 9999px, 72px, 0); }
+            20% { clip: rect(48px, 9999px, 115px, 0); }
+            40% { clip: rect(15px, 9999px, 95px, 0); }
+            60% { clip: rect(78px, 9999px, 130px, 0); }
+            80% { clip: rect(63px, 9999px, 92px, 0); }
+            100% { clip: rect(39px, 9999px, 108px, 0); }
+        }
+        @keyframes glitch-anim-2 {
+            0% { clip: rect(102px, 9999px, 76px, 0); }
+            20% { clip: rect(145px, 9999px, 53px, 0); }
+            40% { clip: rect(120px, 9999px, 24px, 0); }
+            60% { clip: rect(86px, 9999px, 15px, 0); }
+            80% { clip: rect(67px, 9999px, 32px, 0); }
+            100% { clip: rect(91px, 9999px, 58px, 0); }
+        }
+        .scanline {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                to bottom,
+                transparent 0%,
+                rgba(0, 255, 157, 0.05) 50%,
+                transparent 100%
+            );
+            background-size: 100% 8px;
+            animation: scanline 8s linear infinite;
+            pointer-events: none;
+            z-index: 10;
+        }
+        @keyframes scanline {
+            0% { background-position: 0 0; }
+            100% { background-position: 0 100vh; }
+        }
+    </style>
+</head>
+<body class="relative overflow-hidden">
+    <!-- Scanline effect -->
+    <div class="scanline"></div>
+    <!-- Main container -->
+    <div class="container mx-auto px-4 py-8 max-w-6xl">
+        <!-- Header -->
+        <header class="flex flex-col md:flex-row justify-between items-center mb-8">
+            <div class="flex items-center mb-4 md:mb-0">
+                <div class="w-12 h-12 rounded-full cyber-border flex items-center justify-center mr-4">
+                    <i class="fas fa-robot text-2xl text-primary"></i>
+                </div>
+                <h1 class="cyber-font text-3xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">
+                    <span class="glitch" data-text="MCP CHAT INTERFACE">MCP CHAT INTERFACE</span>
+                </h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="flex items-center">
+                    <div class="w-3 h-3 rounded-full bg-primary pulse mr-2"></div>
+                    <span id="connection-status" class="status-connected px-3 py-1 rounded-full text-xs font-bold">CONNECTED</span>
+                </div>
+                <button id="settings-btn" class="cyber-btn px-4 py-2 rounded-md text-sm font-bold">
+                    <i class="fas fa-cog mr-2"></i>SETTINGS
+                </button>
+            </div>
+        </header>
+        <!-- Main content -->
+        <main class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+            <!-- Side panel -->
+            <div class="lg:col-span-1 cyber-border rounded-lg p-4 hidden lg:block">
+                <h2 class="cyber-font text-xl font-bold mb-4 text-primary">SYSTEM STATUS</h2>
+                <div class="space-y-4">
+                    <div class="bg-darker rounded-md p-3">
+                        <div class="flex justify-between items-center mb-1">
+                            <span class="text-xs text-gray-400">MCP PROTOCOL</span>
+                            <span class="text-xs text-primary font-bold">ACTIVE</span>
+                        </div>
+                        <div class="w-full bg-dark rounded-full h-2">
+                            <div class="bg-primary rounded-full h-2" style="width: 92%"></div>
+                        </div>
+                    </div>
+                    <div class="bg-darker rounded-md p-3">
+                        <div class="flex justify-between items-center mb-1">
+                            <span class="text-xs text-gray-400">ENCRYPTION</span>
+                            <span class="text-xs text-secondary font-bold">AES-256</span>
+                        </div>
+                        <div class="w-full bg-dark rounded-full h-2">
+                            <div class="bg-secondary rounded-full h-2" style="width: 100%"></div>
+                        </div>
+                    </div>
+                    <div class="bg-darker rounded-md p-3">
+                        <div class="flex justify-between items-center mb-1">
+                            <span class="text-xs text-gray-400">BANDWIDTH</span>
+                            <span class="text-xs text-primary font-bold">4.7 MB/s</span>
+                        </div>
+                        <div class="w-full bg-dark rounded-full h-2">
+                            <div class="bg-gradient-to-r from-primary to-secondary rounded-full h-2" style="width: 65%"></div>
+                        </div>
+                    </div>
+                </div>
+                <h2 class="cyber-font text-xl font-bold mt-6 mb-4 text-primary">QUICK COMMANDS</h2>
+                <div class="grid grid-cols-2 gap-2">
+                    <button class="cyber-input text-xs py-2 px-2 rounded hover:bg-primary hover:text-dark transition-colors">
+                        /status
+                    </button>
+                    <button class="cyber-input text-xs py-2 px-2 rounded hover:bg-primary hover:text-dark transition-colors">
+                        /help
+                    </button>
+                    <button class="cyber-input text-xs py-2 px-2 rounded hover:bg-primary hover:text-dark transition-colors">
+                        /clear
+                    </button>
+                    <button class="cyber-input text-xs py-2 px-2 rounded hover:bg-primary hover:text-dark transition-colors">
+                        /ping
+                    </button>
+                    <button class="cyber-input text-xs py-2 px-2 rounded hover:bg-primary hover:text-dark transition-colors">
+                        /debug
+                    </button>
+                    <button class="cyber-input text-xs py-2 px-2 rounded hover:bg-primary hover:text-dark transition-colors">
+                        /encrypt
+                    </button>
+                </div>
+                <div class="mt-6 text-xs text-gray-400">
+                    <p>MCP v3.2.1</p>
+                    <p>Last sync: <span id="last-sync">just now</span></p>
+                </div>
+            </div>
+            <!-- Chat container -->
+            <div class="lg:col-span-3">
+                <div class="chat-container cyber-border rounded-lg p-4 overflow-y-auto mb-4">
+                    <div id="chat-messages" class="space-y-3">
+                        <!-- Messages will be inserted here -->
+                        <div class="message bot-message">
+                            <div class="flex items-start">
+                                <div class="w-6 h-6 rounded-full bg-dark border border-primary flex items-center justify-center mr-2 flex-shrink-0">
+                                    <i class="fas fa-robot text-xs text-primary"></i>
+                                </div>
+                                <div>
+                                    <p class="font-bold text-primary text-xs mb-1">MCP SYSTEM</p>
+                                    <p>Connection established. MCP protocol initialized. How can I assist you today?</p>
+                                </div>
+                            </div>
+                            <div class="text-right mt-1">
+                                <span class="text-xs text-gray-500">just now</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex space-x-2">
+                    <input
+                        id="message-input"
+                        type="text"
+                        placeholder="Type your message..."
+                        class="cyber-input flex-grow rounded-md px-4 py-3 focus:outline-none"
+                        autocomplete="off"
+                    >
+                    <button
+                        id="send-btn"
+                        class="cyber-btn px-6 py-3 rounded-md font-bold"
+                    >
+                        <i class="fas fa-paper-plane mr-2"></i>SEND
+                    </button>
+                </div>
+                <div class="flex justify-between items-center mt-3 text-xs text-gray-400">
+                    <div>
+                        <span>Press <span class="text-primary font-bold">Enter</span> to send</span>
+                    </div>
+                    <div class="flex items-center">
+                        <i class="fas fa-lock mr-1"></i>
+                        <span>End-to-end encrypted</span>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    <!-- Settings modal -->
+    <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
+        <div class="cyber-border rounded-lg p-6 w-full max-w-md relative">
+            <button id="close-settings" class="absolute top-4 right-4 text-gray-400 hover:text-primary">
+                <i class="fas fa-times"></i>
+            </button>
+            <h2 class="cyber-font text-2xl font-bold mb-6 text-primary">SYSTEM SETTINGS</h2>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-sm font-bold mb-2 text-gray-300">MCP Server</label>
+                    <input type="text" class="cyber-input w-full px-3 py-2 rounded" value="mcp.cybernet.io:443">
+                </div>
+                <div>
+                    <label class="block text-sm font-bold mb-2 text-gray-300">Encryption Level</label>
+                    <select class="cyber-input w-full px-3 py-2 rounded">
+                        <option>AES-256 (Recommended)</option>
+                        <option>ChaCha20-Poly1305</option>
+                        <option>Twofish</option>
+                    </select>
+                </div>
+                <div class="flex items-center">
+                    <input type="checkbox" id="dark-mode" class="mr-2" checked>
+                    <label for="dark-mode" class="text-sm text-gray-300">Dark Mode</label>
+                </div>
+                <div class="flex items-center">
+                    <input type="checkbox" id="typing-indicator" class="mr-2" checked>
+                    <label for="typing-indicator" class="text-sm text-gray-300">Show Typing Indicator</label>
+                </div>
+                <div class="pt-4">
+                    <button class="cyber-btn w-full py-2 rounded-md font-bold">
+                        SAVE SETTINGS
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM elements
+            const messageInput = document.getElementById('message-input');
+            const sendBtn = document.getElementById('send-btn');
+            const chatMessages = document.getElementById('chat-messages');
+            const settingsBtn = document.getElementById('settings-btn');
+            const settingsModal = document.getElementById('settings-modal');
+            const closeSettings = document.getElementById('close-settings');
+            const connectionStatus = document.getElementById('connection-status');
+            // Simulate MCP connection
+            let isConnected = true;
+            // Event listeners
+            messageInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+            sendBtn.addEventListener('click', sendMessage);
+            settingsBtn.addEventListener('click', function() {
+                settingsModal.classList.remove('hidden');
+            });
+            closeSettings.addEventListener('click', function() {
+                settingsModal.classList.add('hidden');
+            });
+            // Function to send message
+            function sendMessage() {
+                const messageText = messageInput.value.trim();
+                if (messageText === '') return;
+                // Add user message to chat
+                addMessage(messageText, 'user');
+                messageInput.value = '';
+                // Simulate typing indicator
+                const typingIndicator = document.createElement('div');
+                typingIndicator.className = 'message bot-message typing-indicator';
+                typingIndicator.innerHTML = `
+                    <div class="flex items-start">
+                        <div class="w-6 h-6 rounded-full bg-dark border border-primary flex items-center justify-center mr-2 flex-shrink-0">
+                            <i class="fas fa-robot text-xs text-primary"></i>
+                        </div>
+                        <div>
+                            <p class="font-bold text-primary text-xs mb-1">MCP SYSTEM</p>
+                            <p>Processing request</p>
+                        </div>
+                    </div>
+                `;
+                chatMessages.appendChild(typingIndicator);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                // Simulate bot response after delay
+                setTimeout(() => {
+                    // Remove typing indicator
+                    const indicators = document.querySelectorAll('.typing-indicator');
+                    indicators.forEach(indicator => indicator.remove());
+                    // Generate bot response
+                    const botResponse = generateBotResponse(messageText);
+                    addMessage(botResponse, 'bot');
+                }, 1000 + Math.random() * 2000);
+            }
+            // Function to add message to chat
+            function addMessage(text, sender) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `message ${sender}-message`;
+                const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                messageDiv.innerHTML = `
+                    <div class="flex items-start">
+                        <div class="w-6 h-6 rounded-full bg-dark border ${sender === 'bot' ? 'border-primary' : 'border-secondary'} flex items-center justify-center mr-2 flex-shrink-0">
+                            <i class="fas ${sender === 'bot' ? 'fa-robot text-primary' : 'fa-user text-secondary'} text-xs"></i>
+                        </div>
+                        <div>
+                            <p class="font-bold ${sender === 'bot' ? 'text-primary' : 'text-secondary'} text-xs mb-1">${sender === 'bot' ? 'MCP SYSTEM' : 'YOU'}</p>
+                            <p>${text}</p>
+                        </div>
+                    </div>
+                    <div class="text-right mt-1">
+                        <span class="text-xs text-gray-500">${timestamp}</span>
+                    </div>
+                `;
+                chatMessages.appendChild(messageDiv);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+            // Function to generate bot responses
+            function generateBotResponse(userMessage) {
+                const lowerMsg = userMessage.toLowerCase();
+                if (lowerMsg.includes('hello') || lowerMsg.includes('hi')) {
+                    return "Greetings, user. MCP protocol engaged. How may I assist you today?";
+                } else if (lowerMsg.includes('status')) {
+                    return "System status: Optimal\nProtocol: MCP v3.2.1\nEncryption: AES-256 active\nBandwidth: 4.7MB/s";
+                } else if (lowerMsg.includes('help')) {
+                    return "Available commands:\n/status - Check system status\n/help - Display this message\n/clear - Clear chat history\n/ping - Test connection\n/debug - Show debug info";
+                } else if (lowerMsg.includes('ping')) {
+                    return "PONG! Latency: " + Math.floor(Math.random() * 50) + "ms";
+                } else if (lowerMsg.includes('time')) {
+                    return "Current system time: " + new Date().toLocaleTimeString();
+                } else if (lowerMsg.includes('date')) {
+                    return "Current date: " + new Date().toLocaleDateString();
+                } else if (lowerMsg.includes('encrypt')) {
+                    return "Encryption protocol confirmed. All communications are secured with AES-256 bit encryption.";
+                } else if (lowerMsg.includes('disconnect')) {
+                    // Simulate disconnection
+                    isConnected = false;
+                    connectionStatus.textContent = "DISCONNECTED";
+                    connectionStatus.className = "status-disconnected px-3 py-1 rounded-full text-xs font-bold";
+                    return "Warning: Connection terminated. Attempting to reconnect...";
+                } else if (lowerMsg.includes('reconnect')) {
+                    // Simulate reconnection
+                    isConnected = true;
+                    connectionStatus.textContent = "CONNECTED";
+                    connectionStatus.className = "status-connected px-3 py-1 rounded-full text-xs font-bold";
+                    return "Connection re-established. MCP protocol resumed.";
+                } else {
+                    const randomResponses = [
+                        "Processing request... Command understood.",
+                        "Affirmative. Request logged in system.",
+                        "MCP protocol confirms receipt of your message.",
+                        "Understood. Further parameters required?",
+                        "Command executed. Awaiting next instruction.",
+                        "System acknowledges your input.",
+                        "Data received. Processing complete.",
+                        "Directive confirmed. Standing by."
+                    ];
+                    return randomResponses[Math.floor(Math.random() * randomResponses.length)];
+                }
+            }
+            // Simulate initial connection status
+            setInterval(() => {
+                if (isConnected) {
+                    // Randomly change bandwidth display
+                    const bandwidthElements = document.querySelectorAll('.bg-gradient-to-r.from-primary.to-secondary');
+                    bandwidthElements.forEach(el => {
+                        const newWidth = Math.floor(30 + Math.random() * 70);
+                        el.style.width = `${newWidth}%`;
+                    });
+                    // Update last sync time
+                    const lastSync = document.getElementById('last-sync');
+                    const minutesAgo = Math.floor(Math.random() * 5);
+                    lastSync.textContent = minutesAgo === 0 ? 'just now' : `${minutesAgo} min ago`;
+                }
+            }, 5000);
+        });
+    </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=Maximelat/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>