Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepDev AI - Powered by DeepSeek</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; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); | |
| color: #333; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| header { | |
| background: rgba(255, 255, 255, 0.9); | |
| padding: 20px; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); | |
| text-align: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 15px; | |
| margin-bottom: 10px; | |
| } | |
| .logo-icon { | |
| font-size: 2.5rem; | |
| color: #0066ff; | |
| } | |
| h1 { | |
| color: #0066ff; | |
| font-size: 2.5rem; | |
| } | |
| .tagline { | |
| color: #666; | |
| font-size: 1.2rem; | |
| margin-bottom: 15px; | |
| } | |
| .api-key-container { | |
| background: #f8f9fa; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-top: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .api-key-input { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .api-key-input input { | |
| flex: 1; | |
| padding: 10px 15px; | |
| border: 2px solid #ddd; | |
| border-radius: 25px; | |
| font-size: 1rem; | |
| outline: none; | |
| transition: border-color 0.3s; | |
| } | |
| .api-key-input input:focus { | |
| border-color: #0066ff; | |
| } | |
| .api-key-input button { | |
| background: #0066ff; | |
| color: white; | |
| border: none; | |
| border-radius: 25px; | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: background 0.3s; | |
| } | |
| .api-key-input button:hover { | |
| background: #0052cc; | |
| } | |
| .main-content { | |
| display: flex; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .chat-container { | |
| flex: 2; | |
| background: rgba(255, 255, 255, 0.85); | |
| border-radius: 15px; | |
| padding: 20px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 500px; | |
| } | |
| .chat-header { | |
| padding-bottom: 15px; | |
| border-bottom: 2px solid #eee; | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .chat-header i { | |
| color: #0066ff; | |
| font-size: 1.5rem; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 15px; | |
| background: #f9f9f9; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| max-height: 400px; | |
| } | |
| .message { | |
| padding: 12px 15px; | |
| border-radius: 10px; | |
| max-width: 80%; | |
| line-height: 1.5; | |
| } | |
| .user-message { | |
| background: #e3f2fd; | |
| align-self: flex-end; | |
| } | |
| .ai-message { | |
| background: #f5f5f5; | |
| align-self: flex-start; | |
| } | |
| .code-block { | |
| background: #2d2d2d; | |
| color: #f8f8f2; | |
| padding: 12px; | |
| border-radius: 5px; | |
| font-family: 'Courier New', monospace; | |
| margin: 8px 0; | |
| overflow-x: auto; | |
| position: relative; | |
| } | |
| .copy-btn { | |
| position: absolute; | |
| top: 5px; | |
| right: 5px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| color: white; | |
| padding: 3px 8px; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| font-size: 0.8rem; | |
| } | |
| .chat-input { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| padding: 12px 15px; | |
| border: 2px solid #ddd; | |
| border-radius: 25px; | |
| font-size: 1rem; | |
| outline: none; | |
| transition: border-color 0.3s; | |
| } | |
| .chat-input input:focus { | |
| border-color: #0066ff; | |
| } | |
| .chat-input button { | |
| background: #0066ff; | |
| color: white; | |
| border: none; | |
| border-radius: 25px; | |
| padding: 12px 20px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: background 0.3s; | |
| } | |
| .chat-input button:hover { | |
| background: #0052cc; | |
| } | |
| .chat-input button:disabled { | |
| background: #ccc; | |
| cursor: not-allowed; | |
| } | |
| .features { | |
| flex: 1; | |
| background: rgba(255, 255, 255, 0.85); | |
| border-radius: 15px; | |
| padding: 20px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .features h2 { | |
| color: #0066ff; | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .features-list { | |
| list-style: none; | |
| } | |
| .features-list li { | |
| padding: 12px; | |
| background: #f9f9f9; | |
| margin-bottom: 10px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .features-list i { | |
| color: #0066ff; | |
| font-size: 1.2rem; | |
| } | |
| .language-selector { | |
| margin-top: 15px; | |
| } | |
| .language-selector select { | |
| width: 100%; | |
| padding: 10px; | |
| border: 2px solid #ddd; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| outline: none; | |
| transition: border-color 0.3s; | |
| } | |
| .language-selector select:focus { | |
| border-color: #0066ff; | |
| } | |
| .loading { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: #666; | |
| font-style: italic; | |
| } | |
| .loading-dots { | |
| display: flex; | |
| gap: 3px; | |
| } | |
| .loading-dots span { | |
| width: 8px; | |
| height: 8px; | |
| background: #0066ff; | |
| border-radius: 50%; | |
| animation: bounce 1.5s infinite; | |
| } | |
| .loading-dots span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .loading-dots span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 20px; | |
| color: white; | |
| margin-top: auto; | |
| font-size: 0.9rem; | |
| } | |
| @media (max-width: 768px) { | |
| .main-content { | |
| flex-direction: column; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .message { | |
| max-width: 90%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-code logo-icon"></i> | |
| <h1>DeepDev AI</h1> | |
| </div> | |
| <p class="tagline">Powered by DeepSeek - Your intelligent coding assistant</p> | |
| <p>Ask me to code in any programming language!</p> | |
| <div class="api-key-container"> | |
| <p><strong>API Key Required:</strong> To use DeepDev AI, you need a DeepSeek API key.</p> | |
| <div class="api-key-input"> | |
| <input type="password" id="api-key" placeholder="Enter your DeepSeek API key"> | |
| <button id="save-api-key">Save Key</button> | |
| </div> | |
| <p class="api-key-note">Your API key is stored only in your browser and never sent to our servers.</p> | |
| </div> | |
| </header> | |
| <div class="main-content"> | |
| <div class="chat-container"> | |
| <div class="chat-header"> | |
| <i class="fas fa-comments"></i> | |
| <h2>Chat with DeepDev</h2> | |
| </div> | |
| <div class="chat-messages" id="chat-messages"> | |
| <div class="message ai-message"> | |
| <p>Hello! I'm DeepDev, powered by DeepSeek. I can help you code in any programming language. What would you like to create today?</p> | |
| </div> | |
| </div> | |
| <div class="chat-input"> | |
| <input type="text" id="user-input" placeholder="Ask DeepDev to code something..."> | |
| <button id="send-btn">Send <i class="fas fa-paper-plane"></i></button> | |
| </div> | |
| </div> | |
| <div class="features"> | |
| <h2><i class="fas fa-star"></i> DeepDev Capabilities</h2> | |
| <ul class="features-list"> | |
| <li><i class="fas fa-check"></i> Code in Python, JavaScript, Java, C++, and more</li> | |
| <li><i class="fas fa-check"></i> Explain complex programming concepts</li> | |
| <li><i class="fas fa-check"></i> Debug and optimize existing code</li> | |
| <li><i class="fas fa-check"></i> Generate code from natural language descriptions</li> | |
| <li><i class="fas fa-check"></i> Convert code between programming languages</li> | |
| <li><i class="fas fa-check"></i> Write unit tests and documentation</li> | |
| <li><i class="fas fa-check"></i> Suggest algorithms and data structures</li> | |
| <li><i class="fas fa-check"></i> Help with web development frameworks</li> | |
| </ul> | |
| <div class="language-selector"> | |
| <label for="language"><strong>Preferred Language:</strong></label> | |
| <select id="language"> | |
| <option value="auto">Auto-detect</option> | |
| <option value="python">Python</option> | |
| <option value="javascript">JavaScript</option> | |
| <option value="java">Java</option> | |
| <option value="csharp">C#</option> | |
| <option value="cpp">C++</option> | |
| <option value="php">PHP</option> | |
| <option value="ruby">Ruby</option> | |
| <option value="go">Go</option> | |
| <option value="rust">Rust</option> | |
| <option value="swift">Swift</option> | |
| <option value="typescript">TypeScript</option> | |
| <option value="html">HTML/CSS</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>(c) 2025 Zewpol inc. no rights reserved</p> | |
| </footer> | |
| <script> | |
| // DOM Elements | |
| const apiKeyInput = document.getElementById('api-key'); | |
| const saveApiKeyBtn = document.getElementById('save-api-key'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const userInput = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const languageSelect = document.getElementById('language'); | |
| // State | |
| let apiKey = localStorage.getItem('deepseek-api-key') || ''; | |
| let isWaitingForResponse = false; | |
| // Initialize | |
| if (apiKey) { | |
| apiKeyInput.value = '••••••••••••••••'; | |
| } | |
| // Event Listeners | |
| saveApiKeyBtn.addEventListener('click', saveApiKey); | |
| sendBtn.addEventListener('click', sendMessage); | |
| userInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| // Functions | |
| function saveApiKey() { | |
| const key = apiKeyInput.value.trim(); | |
| if (key) { | |
| // If the input is masked, don't override with the mask | |
| if (key !== '••••••••••••••••') { | |
| apiKey = key; | |
| localStorage.setItem('deepseek-api-key', apiKey); | |
| apiKeyInput.value = '••••••••••••••••'; | |
| alert('API key saved successfully!'); | |
| } else { | |
| // Use the already saved key | |
| alert('API key is already saved.'); | |
| } | |
| } else { | |
| alert('Please enter a valid API key.'); | |
| } | |
| } | |
| function sendMessage() { | |
| if (isWaitingForResponse) return; | |
| const message = userInput.value.trim(); | |
| if (!message) return; | |
| if (!apiKey) { | |
| alert('Please enter your DeepSeek API key first.'); | |
| return; | |
| } | |
| // Add user message to chat | |
| addMessage(message, 'user'); | |
| userInput.value = ''; | |
| // Show loading indicator | |
| showLoading(); | |
| // Get selected language | |
| const language = languageSelect.value; | |
| // Call DeepSeek API | |
| callDeepSeekAPI(message, language); | |
| } | |
| function addMessage(text, sender) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message ${sender}-message`; | |
| // Format code blocks if present | |
| const formattedText = formatCodeBlocks(text); | |
| messageDiv.innerHTML = formattedText; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| // Add copy buttons to code blocks | |
| messageDiv.querySelectorAll('.code-block').forEach(block => { | |
| const copyButton = document.createElement('button'); | |
| copyButton.className = 'copy-btn'; | |
| copyButton.innerHTML = '<i class="fas fa-copy"></i> Copy'; | |
| copyButton.addEventListener('click', () => { | |
| const code = block.querySelector('code')?.innerText || block.innerText; | |
| navigator.clipboard.writeText(code).then(() => { | |
| copyButton.innerHTML = '<i class="fas fa-check"></i> Copied!'; | |
| setTimeout(() => { | |
| copyButton.innerHTML = '<i class="fas fa-copy"></i> Copy'; | |
| }, 2000); | |
| }); | |
| }); | |
| block.appendChild(copyButton); | |
| }); | |
| } | |
| function formatCodeBlocks(text) { | |
| // Simple code block formatting - in a real scenario, you might use a library like Highlight.js | |
| return text.replace(/```(\w+)?\s([\s\S]*?)```/g, (match, lang, code) => { | |
| return `<div class="code-block"><code>${escapeHtml(code.trim())}</code></div>`; | |
| }); | |
| } | |
| function escapeHtml(unsafe) { | |
| return unsafe | |
| .replace(/&/g, "&") | |
| .replace(/</g, "<") | |
| .replace(/>/g, ">") | |
| .replace(/"/g, """) | |
| .replace(/'/g, "'"); | |
| } | |
| function showLoading() { | |
| isWaitingForResponse = true; | |
| sendBtn.disabled = true; | |
| const loadingDiv = document.createElement('div'); | |
| loadingDiv.className = 'message ai-message loading'; | |
| loadingDiv.id = 'loading-message'; | |
| loadingDiv.innerHTML = ` | |
| <div class="loading-dots"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| DeepDev is thinking... | |
| `; | |
| chatMessages.appendChild(loadingDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function hideLoading() { | |
| isWaitingForResponse = false; | |
| sendBtn.disabled = false; | |
| const loadingDiv = document.getElementById('loading-message'); | |
| if (loadingDiv) { | |
| loadingDiv.remove(); | |
| } | |
| } | |
| async function callDeepSeekAPI(message, language) { | |
| try { | |
| // This is a simulation since we don't have actual API details | |
| // In a real implementation, you would use the actual DeepSeek API endpoint | |
| // Simulate API delay | |
| await new Promise(resolve => setTimeout(resolve, 2000)); | |
| // Remove loading indicator | |
| hideLoading(); | |
| // Generate a simulated response based on the message | |
| let response = generateResponse(message, language); | |
| // Add AI response to chat | |
| addMessage(response, 'ai'); | |
| } catch (error) { | |
| hideLoading(); | |
| addMessage(`Sorry, I encountered an error: ${error.message}`, 'ai'); | |
| } | |
| } | |
| function generateResponse(message, language) { | |
| // This function simulates the AI response since we don't have actual API access | |
| // In a real implementation, this would be replaced with the actual API call | |
| const lowerMessage = message.toLowerCase(); | |
| let response = ''; | |
| if (lowerMessage.includes('hello') || lowerMessage.includes('hi')) { | |
| response = 'Hello! How can I help you with your coding today?'; | |
| } else if (lowerMessage.includes('fibonacci')) { | |
| response = `Here's a Python function to generate the Fibonacci sequence:\n\n\`\`\`python | |
| def fibonacci(n): | |
| sequence = [] | |
| a, b = 0, 1 | |
| for _ in range(n): | |
| sequence.append(a) | |
| a, b = b, a + b | |
| return sequence | |
| # Example usage | |
| print(fibonacci(10)) # Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] | |
| \`\`\``; | |
| } else if (lowerMessage.includes('sort') || lowerMessage.includes('algorithm')) { | |
| response = `Here's a JavaScript implementation of the quicksort algorithm:\n\n\`\`\`javascript | |
| function quicksort(arr) { | |
| if (arr.length <= 1) return arr; | |
| const pivot = arr[Math.floor(arr.length / 2)]; | |
| const left = arr.filter(x => x < pivot); | |
| const middle = arr.filter(x => x === pivot); | |
| const right = arr.filter(x => x > pivot); | |
| return [...quicksort(left), ...middle, ...quicksort(right)]; | |
| } | |
| // Example usage | |
| console.log(quicksort([3, 6, 8, 10, 1, 2, 1])); // Output: [1, 1, 2, 3, 6, 8, 10] | |
| \`\`\``; | |
| } else if (lowerMessage.includes('react') || lowerMessage.includes('component')) { | |
| response = `Here's a simple React component example:\n\n\`\`\`jsx | |
| import React, { useState } from 'react'; | |
| function Counter() { | |
| const [count, setCount] = useState(0); | |
| return ( | |
| <div> | |
| <p>You clicked {count} times</p> | |
| <button onClick={() => setCount(count + 1)}> | |
| Click me | |
| </button> | |
| </div> | |
| ); | |
| } | |
| export default Counter; | |
| \`\`\``; | |
| } else { | |
| response = `I can help you with "${message}". As an AI assistant powered by DeepSeek, I can generate code for that. In a real implementation, this would connect to the DeepSeek API to generate a proper response.\n\n\`\`\`python | |
| # Example code would appear here based on your request | |
| def example_function(): | |
| print("DeepDev AI is working on your request!") | |
| # Add your specific code here based on the query | |
| return "Solution to your problem" | |
| \`\`\``; | |
| } | |
| return response; | |
| } | |
| </script> | |
| </body> | |
| </html> | |