Spaces:

Zakomako4567
/

Deepdev-ai

Running

File size: 21,656 Bytes

<!DOCTYPE html>
<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, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
        
        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>