Spaces:

Zakomako4567
/

Deepdev-ai

Running

App Files Files Community

Zakomako4567 commited on Sep 1, 2025

Commit

c33c598

verified ·

1 Parent(s): afaf6ef

Update index.html

Browse files

Files changed (1) hide show

index.html +661 -18

index.html CHANGED Viewed

@@ -1,19 +1,662 @@
-<!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>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>