Spaces:

AiCoderv2
/

anycoder-9955a3db

Running

App Files Files Community

AiCoderv2 commited on 17 days ago

Commit

3333f4a

verified ·

1 Parent(s): 6bc27ae

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +749 -19

index.html CHANGED Viewed

@@ -1,19 +1,749 @@
-<!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>DeepSeek ChatBot</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        :root {
+            --primary: #4361ee;
+            --secondary: #3a0ca3;
+            --accent: #7209b7;
+            --light: #f8f9fa;
+            --dark: #212529;
+            --success: #4cc9f0;
+            --warning: #f72585;
+            --gray: #6c757d;
+            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        .app-container {
+            width: 100%;
+            max-width: 1200px;
+            height: 90vh;
+            background: white;
+            border-radius: 20px;
+            box-shadow: var(--shadow);
+            display: flex;
+            overflow: hidden;
+        }
+        .sidebar {
+            width: 300px;
+            background: var(--dark);
+            color: white;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+        }
+        .header {
+            padding-bottom: 20px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            margin-bottom: 20px;
+        }
+        .header h1 {
+            font-size: 1.5rem;
+            margin-bottom: 5px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .header h1 i {
+            color: var(--success);
+        }
+        .built-with {
+            font-size: 0.8rem;
+            color: var(--gray);
+            margin-top: 10px;
+        }
+        .built-with a {
+            color: var(--success);
+            text-decoration: none;
+        }
+        .built-with a:hover {
+            text-decoration: underline;
+        }
+        .api-info {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+        }
+        .api-info h3 {
+            font-size: 1rem;
+            margin-bottom: 10px;
+            color: var(--success);
+        }
+        .api-info p {
+            font-size: 0.9rem;
+            margin-bottom: 5px;
+            color: #ccc;
+        }
+        .model-selector {
+            margin-bottom: 20px;
+        }
+        .model-selector h3 {
+            font-size: 1rem;
+            margin-bottom: 10px;
+            color: white;
+        }
+        .model-options {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .model-option {
+            padding: 12px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .model-option:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .model-option.active {
+            background: var(--primary);
+        }
+        .usage-stats {
+            margin-top: auto;
+            background: rgba(255, 255, 255, 0.1);
+            padding: 15px;
+            border-radius: 10px;
+        }
+        .usage-stats h3 {
+            font-size: 1rem;
+            margin-bottom: 10px;
+            color: white;
+        }
+        .usage-bar {
+            height: 8px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            margin-bottom: 10px;
+            overflow: hidden;
+        }
+        .usage-progress {
+            height: 100%;
+            background: var(--success);
+            border-radius: 4px;
+            width: 0%;
+            transition: width 0.5s ease;
+        }
+        .usage-text {
+            font-size: 0.9rem;
+            color: #ccc;
+            display: flex;
+            justify-content: space-between;
+        }
+        .chat-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .chat-header {
+            padding: 20px;
+            background: white;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .chat-header h2 {
+            font-size: 1.5rem;
+            color: var(--dark);
+        }
+        .chat-messages {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+            background: #f8f9fa;
+        }
+        .message {
+            margin-bottom: 20px;
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+            animation: fadeIn 0.3s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message.user {
+            flex-direction: row-reverse;
+        }
+        .avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: white;
+            flex-shrink: 0;
+        }
+        .user .avatar {
+            background: var(--primary);
+        }
+        .bot .avatar {
+            background: var(--accent);
+        }
+        .message-content {
+            max-width: 70%;
+            padding: 12px 16px;
+            border-radius: 18px;
+            box-shadow: var(--shadow);
+        }
+        .user .message-content {
+            background: var(--primary);
+            color: white;
+            border-bottom-right-radius: 4px;
+        }
+        .bot .message-content {
+            background: white;
+            color: var(--dark);
+            border-bottom-left-radius: 4px;
+            border: 1px solid #eee;
+        }
+        .chat-input {
+            padding: 20px;
+            background: white;
+            border-top: 1px solid #eee;
+            display: flex;
+            gap: 10px;
+        }
+        .chat-input input {
+            flex: 1;
+            padding: 12px 16px;
+            border: 1px solid #ddd;
+            border-radius: 25px;
+            outline: none;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+        .chat-input input:focus {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
+        }
+        .chat-input button {
+            padding: 12px 20px;
+            background: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 25px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .chat-input button:hover {
+            background: var(--secondary);
+            transform: translateY(-2px);
+        }
+        .chat-input button:disabled {
+            background: var(--gray);
+            cursor: not-allowed;
+            transform: none;
+        }
+        .typing-indicator {
+            display: none;
+            padding: 12px 16px;
+            background: white;
+            border-radius: 18px;
+            border-bottom-left-radius: 4px;
+            margin-bottom: 20px;
+            border: 1px solid #eee;
+            align-items: center;
+            gap: 10px;
+            width: fit-content;
+        }
+        .typing-dots {
+            display: flex;
+            gap: 4px;
+        }
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--gray);
+            border-radius: 50%;
+            animation: typing 1.4s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(1) { animation-delay: 0s; }
+        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-5px); }
+        }
+        .welcome-message {
+            text-align: center;
+            padding: 40px 20px;
+            color: var(--gray);
+        }
+        .welcome-message i {
+            font-size: 3rem;
+            margin-bottom: 20px;
+            color: var(--primary);
+        }
+        .welcome-message h3 {
+            font-size: 1.5rem;
+            margin-bottom: 10px;
+        }
+        @media (max-width: 768px) {
+            .app-container {
+                flex-direction: column;
+                height: 95vh;
+            }
+            .sidebar {
+                width: 100%;
+                height: auto;
+                max-height: 40%;
+            }
+            .chat-container {
+                height: 60%;
+            }
+            .message-content {
+                max-width: 85%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <div class="header">
+                <h1><i class="fas fa-robot"></i> DeepSeek ChatBot</h1>
+                <p>AI-powered conversations with DeepSeek models</p>
+                <div class="built-with">
+                    Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
+                </div>
+            </div>
+            <div class="api-info">
+                <h3><i class="fas fa-key"></i> API Information</h3>
+                <p>Your API key is securely saved</p>
+                <p>Requests per hour: <span id="requests-limit">20</span></p>
+                <p>Used requests: <span id="requests-used">0</span></p>
+            </div>
+            <div class="model-selector">
+                <h3><i class="fas fa-brain"></i> Select Model</h3>
+                <div class="model-options">
+                    <div class="model-option active" data-model="deepseek-chat">
+                        <i class="fas fa-comments"></i>
+                        <div>
+                            <div>DeepSeek Chat</div>
+                            <small>General purpose model</small>
+                        </div>
+                    </div>
+                    <div class="model-option" data-model="deepseek-coder">
+                        <i class="fas fa-code"></i>
+                        <div>
+                            <div>DeepSeek Coder</div>
+                            <small>Programming focused</small>
+                        </div>
+                    </div>
+                    <div class="model-option" data-model="deepseek-math">
+                        <i class="fas fa-square-root-variable"></i>
+                        <div>
+                            <div>DeepSeek Math</div>
+                            <small>Mathematics focused</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="usage-stats">
+                <h3><i class="fas fa-chart-bar"></i> Usage Statistics</h3>
+                <div class="usage-bar">
+                    <div class="usage-progress" id="usage-progress"></div>
+                </div>
+                <div class="usage-text">
+                    <span>Remaining: <span id="requests-remaining">20</span></span>
+                    <span>Reset in: <span id="reset-time">60</span> min</span>
+                </div>
+            </div>
+        </div>
+        <!-- Chat Container -->
+        <div class="chat-container">
+            <div class="chat-header">
+                <h2>Chat with DeepSeek</h2>
+                <div id="current-model">DeepSeek Chat</div>
+            </div>
+            <div class="chat-messages" id="chat-messages">
+                <div class="welcome-message">
+                    <i class="fas fa-robot"></i>
+                    <h3>Welcome to DeepSeek ChatBot</h3>
+                    <p>Select a model and start chatting! Your API key is saved and usage is tracked automatically.</p>
+                </div>
+            </div>
+            <div class="typing-indicator" id="typing-indicator">
+                <div class="avatar">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <div class="typing-dots">
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                </div>
+            </div>
+            <div class="chat-input">
+                <input type="text" id="message-input" placeholder="Type your message here..." autocomplete="off">
+                <button id="send-button">
+                    <i class="fas fa-paper-plane"></i> Send
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Configuration
+        const API_KEY = "sk-3afb9d162afe4f75881648a03667847b";
+        const REQUESTS_PER_HOUR = 20;
+        const MODELS = {
+            'deepseek-chat': 'DeepSeek Chat',
+            'deepseek-coder': 'DeepSeek Coder',
+            'deepseek-math': 'DeepSeek Math'
+        };
+        // State
+        let currentModel = 'deepseek-chat';
+        let requestCount = 0;
+        let resetTimer = 60; // minutes
+        // DOM Elements
+        const chatMessages = document.getElementById('chat-messages');
+        const messageInput = document.getElementById('message-input');
+        const sendButton = document.getElementById('send-button');
+        const typingIndicator = document.getElementById('typing-indicator');
+        const requestsUsedEl = document.getElementById('requests-used');
+        const requestsRemainingEl = document.getElementById('requests-remaining');
+        const usageProgress = document.getElementById('usage-progress');
+        const resetTimeEl = document.getElementById('reset-time');
+        const currentModelEl = document.getElementById('current-model');
+        // Initialize from localStorage
+        function initializeApp() {
+            const savedData = localStorage.getItem('deepseek-chatbot');
+            if (savedData) {
+                const data = JSON.parse(savedData);
+                requestCount = data.requestCount || 0;
+                currentModel = data.currentModel || 'deepseek-chat';
+                resetTimer = data.resetTimer || 60;
+                // Update UI with saved data
+                updateUsageStats();
+                setActiveModel(currentModel);
+                currentModelEl.textContent = MODELS[currentModel];
+                // Load chat history if exists
+                if (data.chatHistory) {
+                    loadChatHistory(data.chatHistory);
+                }
+            }
+            // Start countdown timer
+            startResetTimer();
+        }
+        // Save to localStorage
+        function saveAppState() {
+            const chatHistory = [];
+            const messageElements = chatMessages.querySelectorAll('.message');
+            messageElements.forEach(element => {
+                if (element.classList.contains('user')) {
+                    chatHistory.push({
+                        type: 'user',
+                        content: element.querySelector('.message-content').textContent
+                    });
+                } else if (element.classList.contains('bot') && !element.querySelector('.welcome-message')) {
+                    chatHistory.push({
+                        type: 'bot',
+                        content: element.querySelector('.message-content').textContent
+                    });
+                }
+            });
+            const data = {
+                requestCount,
+                currentModel,
+                resetTimer,
+                chatHistory,
+                lastSave: new Date().toISOString()
+            };
+            localStorage.setItem('deepseek-chatbot', JSON.stringify(data));
+        }
+        // Update usage statistics
+        function updateUsageStats() {
+            requestsUsedEl.textContent = requestCount;
+            const remaining = REQUESTS_PER_HOUR - requestCount;
+            requestsRemainingEl.textContent = remaining > 0 ? remaining : 0;
+            const usagePercentage = (requestCount / REQUESTS_PER_HOUR) * 100;
+            usageProgress.style.width = `${Math.min(usagePercentage, 100)}%`;
+            // Update progress bar color based on usage
+            if (usagePercentage >= 90) {
+                usageProgress.style.background = 'var(--warning)';
+            } else if (usagePercentage >= 75) {
+                usageProgress.style.background = 'orange';
+            } else {
+                usageProgress.style.background = 'var(--success)';
+            }
+        }
+        // Set active model
+        function setActiveModel(model) {
+            document.querySelectorAll('.model-option').forEach(option => {
+                option.classList.remove('active');
+                if (option.dataset.model === model) {
+                    option.classList.add('active');
+                }
+            });
+            currentModel = model;
+            currentModelEl.textContent = MODELS[model];
+            saveAppState();
+        }
+        // Load chat history
+        function loadChatHistory(history) {
+            // Clear welcome message
+            const welcomeMessage = chatMessages.querySelector('.welcome-message');
+            if (welcomeMessage) {
+                welcomeMessage.remove();
+            }
+            // Add messages from history
+            history.forEach(msg => {
+                addMessage(msg.content, msg.type);
+            });
+        }
+        // Add message to chat
+        function addMessage(content, type) {
+            // Remove welcome message if it's the first real message
+            if (chatMessages.querySelector('.welcome-message') && type === 'user') {
+                chatMessages.querySelector('.welcome-message').remove();
+            }
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${type}`;
+            const avatarDiv = document.createElement('div');
+            avatarDiv.className = 'avatar';
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'message-content';
+            if (type === 'user') {
+                avatarDiv.innerHTML = '<i class="fas fa-user"></i>';
+                contentDiv.textContent = content;
+            } else {
+                avatarDiv.innerHTML = '<i class="fas fa-robot"></i>';
+                contentDiv.textContent = content;
+            }
+            messageDiv.appendChild(avatarDiv);
+            messageDiv.appendChild(contentDiv);
+            chatMessages.appendChild(messageDiv);
+            // Scroll to bottom
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        // Show typing indicator
+        function showTypingIndicator() {
+            typingIndicator.style.display = 'flex';
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        // Hide typing indicator
+        function hideTypingIndicator() {
+            typingIndicator.style.display = 'none';
+        }
+        // Send message to API
+        async function sendMessage(message) {
+            if (requestCount >= REQUESTS_PER_HOUR) {
+                addMessage("You've reached your hourly request limit. Please try again later.", 'bot');
+                return;
+            }
+            showTypingIndicator();
+            try {
+                // Simulate API call (in a real implementation, this would be the actual API call)
+                // For demonstration purposes, we'll simulate a response
+                setTimeout(() => {
+                    hideTypingIndicator();
+                    // Generate a simulated response based on the model
+                    let response = generateSimulatedResponse(message, currentModel);
+                    addMessage(response, 'bot');
+                    requestCount++;
+                    updateUsageStats();
+                    saveAppState();
+                }, 1500);
+            } catch (error) {
+                hideTypingIndicator();
+                addMessage("Sorry, I encountered an error. Please try again.", 'bot');
+                console.error("API Error:", error);
+            }
+        }
+        // Generate simulated response (for demo purposes)
+        function generateSimulatedResponse(message, model) {
+            const responses = {
+                'deepseek-chat': [
+                    "I understand your question about '" + message + "'. As an AI assistant, I can help you with various topics.",
+                    "That's an interesting point about '" + message + "'. Let me share some insights on that topic.",
+                    "Regarding '" + message + "', I can provide information and assistance on this subject."
+                ],
+                'deepseek-coder': [
+                    "Looking at your code-related question about '" + message + "', I can help you with programming concepts and solutions.",
+                    "For your programming inquiry '" + message + "', I can offer code examples and best practices.",
+                    "As a coding assistant, I can help you with '" + message + "' by providing code snippets and explanations."
+                ],
+                'deepseek-math': [
+                    "Your mathematical question about '" + message + "' is interesting. Let me break it down for you.",
+                    "Regarding the math problem '" + message + "', I can guide you through the solution step by step.",
+                    "For your mathematics inquiry '" + message + "', I can provide formulas, calculations, and explanations."
+                ]
+            };
+            const modelResponses = responses[model] || responses['deepseek-chat'];
+            return modelResponses[Math.floor(Math.random() * modelResponses.length)];
+        }
+        // Start reset timer
+        function startResetTimer() {
+            setInterval(() => {
+                resetTimer--;
+                resetTimeEl.textContent = resetTimer;
+                if (resetTimer <= 0) {
+                    // Reset request count
+                    requestCount = 0;
+                    resetTimer = 60;
+                    updateUsageStats();
+                    saveAppState();
+                }
+            }, 60000); // Update every minute
+        }
+        // Event Listeners
+        document.querySelectorAll('.model-option').forEach(option => {
+            option.addEventListener('click', () => {
+                setActiveModel(option.dataset.model);
+            });
+        });
+        sendButton.addEventListener('click', () => {
+            const message = messageInput.value.trim();
+            if (message) {
+                addMessage(message, 'user');
+                messageInput.value = '';
+                sendMessage(message);
+            }
+        });
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendButton.click();
+            }
+        });
+        // Initialize the application
+        initializeApp();
+    </script>
+</body>
+</html>