Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepSeek V3.2 - رابط کاربری پیشرفته</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: #7c3aed; | |
| --primary-dark: #6d28d9; | |
| --secondary: #10b981; | |
| --dark: #1f2937; | |
| --light: #f8fafc; | |
| --gray: #6b7280; | |
| --gray-light: #e5e7eb; | |
| --danger: #ef4444; | |
| --warning: #f59e0b; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| color: var(--dark); | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| } | |
| header { | |
| background: linear-gradient(to right, var(--primary), var(--primary-dark)); | |
| color: white; | |
| padding: 20px 30px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .logo i { | |
| font-size: 2rem; | |
| } | |
| .logo h1 { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| } | |
| .header-badge { | |
| background: var(--secondary); | |
| padding: 5px 15px; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| } | |
| .anycoder-link { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 0.8rem; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .anycoder-link:hover { | |
| color: white; | |
| } | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 1fr 2fr; | |
| gap: 0; | |
| min-height: 600px; | |
| } | |
| .sidebar { | |
| background: var(--light); | |
| padding: 30px; | |
| border-right: 1px solid var(--gray-light); | |
| } | |
| .model-info { | |
| margin-bottom: 30px; | |
| } | |
| .model-info h2 { | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| font-size: 1.5rem; | |
| } | |
| .model-details { | |
| background: white; | |
| padding: 20px; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); | |
| } | |
| .detail-item { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 10px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid var(--gray-light); | |
| } | |
| .detail-item:last-child { | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| border-bottom: none; | |
| } | |
| .detail-label { | |
| font-weight: 600; | |
| color: var(--gray); | |
| } | |
| .detail-value { | |
| color: var(--dark); | |
| font-weight: 500; | |
| } | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .status-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--secondary); | |
| } | |
| .status-dot.active { | |
| background: var(--secondary); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); | |
| } | |
| } | |
| .settings { | |
| margin-top: 30px; | |
| } | |
| .settings h2 { | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| font-size: 1.5rem; | |
| } | |
| .setting-item { | |
| margin-bottom: 15px; | |
| } | |
| .setting-item label { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-weight: 500; | |
| color: var(--gray); | |
| } | |
| .setting-item select, .setting-item input { | |
| width: 100%; | |
| padding: 10px 15px; | |
| border: 1px solid var(--gray-light); | |
| border-radius: 8px; | |
| background: white; | |
| font-size: 1rem; | |
| } | |
| .chat-area { | |
| display: flex; | |
| flex-direction: column; | |
| height: 600px; | |
| } | |
| .chat-header { | |
| padding: 20px 30px; | |
| border-bottom: 1px solid var(--gray-light); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .chat-header h2 { | |
| color: var(--primary); | |
| font-size: 1.5rem; | |
| } | |
| .chat-controls { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .btn { | |
| padding: 8px 16px; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-dark); | |
| } | |
| .btn-secondary { | |
| background: var(--gray-light); | |
| color: var(--dark); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--gray); | |
| color: white; | |
| } | |
| .messages-container { | |
| flex: 1; | |
| padding: 20px 30px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .message { | |
| max-width: 80%; | |
| padding: 15px 20px; | |
| border-radius: 18px; | |
| position: relative; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .user-message { | |
| background: var(--primary); | |
| color: white; | |
| align-self: flex-end; | |
| border-bottom-right-radius: 5px; | |
| } | |
| .bot-message { | |
| background: var(--gray-light); | |
| align-self: flex-start; | |
| border-bottom-left-radius: 5px; | |
| } | |
| .message-sender { | |
| font-size: 0.8rem; | |
| margin-bottom: 5px; | |
| opacity: 0.8; | |
| } | |
| .input-area { | |
| padding: 20px 30px; | |
| border-top: 1px solid var(--gray-light); | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .message-input { | |
| flex: 1; | |
| padding: 15px 20px; | |
| border: 1px solid var(--gray-light); | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| resize: none; | |
| height: 60px; | |
| transition: border 0.3s; | |
| } | |
| .message-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .send-btn { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| width: 60px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| .send-btn:hover { | |
| background: var(--primary-dark); | |
| } | |
| .send-btn i { | |
| font-size: 1.2rem; | |
| } | |
| .typing-indicator { | |
| display: none; | |
| align-self: flex-start; | |
| background: var(--gray-light); | |
| padding: 15px 20px; | |
| border-radius: 18px; | |
| border-bottom-left-radius: 5px; | |
| } | |
| .typing-dots { | |
| display: flex; | |
| gap: 5px; | |
| } | |
| .typing-dots span { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--gray); | |
| animation: typing 1.4s infinite ease-in-out; | |
| } | |
| .typing-dots span:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .typing-dots span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-dots span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes typing { | |
| 0%, 60%, 100% { | |
| transform: translateY(0); | |
| opacity: 0.5; | |
| } | |
| 30% { | |
| transform: translateY(-10px); | |
| opacity: 1; | |
| } | |
| } | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 20px 30px; | |
| text-align: center; | |
| font-size: 0.9rem; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-top: 10px; | |
| } | |
| .footer-links a { | |
| color: var(--gray-light); | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .footer-links a:hover { | |
| color: white; | |
| } | |
| @media (max-width: 768px) { | |
| .main-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| border-right: none; | |
| border-bottom: 1px solid var(--gray-light); | |
| } | |
| .message { | |
| max-width: 90%; | |
| } | |
| header { | |
| flex-direction: column; | |
| gap: 15px; | |
| text-align: center; | |
| } | |
| .anycoder-link { | |
| position: static; | |
| margin-top: 10px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a> | |
| <div class="logo"> | |
| <i class="fas fa-brain"></i> | |
| <h1>DeepSeek V3.2 Experimental</h1> | |
| </div> | |
| <div class="header-badge"> | |
| <div class="status-indicator"> | |
| <div class="status-dot active"></div> | |
| <span>فعال</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="main-content"> | |
| <div class="sidebar"> | |
| <div class="model-info"> | |
| <h2>اطلاعات مدل</h2> | |
| <div class="model-details"> | |
| <div class="detail-item"> | |
| <span class="detail-label">نام مدل:</span> | |
| <span class="detail-value">DeepSeek-V3.2-Exp</span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-label">ارائهدهنده:</span> | |
| <span class="detail-value">Novita</span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-label">وضعیت:</span> | |
| <span class="detail-value">فعال و آماده</span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-label">تعداد پارامترها:</span> | |
| <span class="detail-value">236B</span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-label">تاریخ انتشار:</span> | |
| <span class="detail-value">2024</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="settings"> | |
| <h2>تنظیمات</h2> | |
| <div class="setting-item"> | |
| <label for="temperature">درجه حرارت (Temperature)</label> | |
| <input type="range" id="temperature" min="0" max="1" step="0.1" value="0.7"> | |
| <span id="temp-value">0.7</span> | |
| </div> | |
| <div class="setting-item"> | |
| <label for="max-tokens">حداکثر توکنها</label> | |
| <input type="number" id="max-tokens" value="2048" min="100" max="4096"> | |
| </div> | |
| <div class="setting-item"> | |
| <label for="model-mode">حالت مدل</label> | |
| <select id="model-mode"> | |
| <option value="creative">خلاقانه</option> | |
| <option value="balanced" selected>متعادل</option> | |
| <option value="precise">دقیق</option> | |
| </select> | |
| </div> | |
| <div class="setting-item"> | |
| <button class="btn btn-primary" style="width: 100%; margin-top: 10px;"> | |
| <i class="fas fa-sync-alt"></i> راهاندازی مجدد | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-area"> | |
| <div class="chat-header"> | |
| <h2>چت با DeepSeek</h2> | |
| <div class="chat-controls"> | |
| <button class="btn btn-secondary"> | |
| <i class="fas fa-trash"></i> پاک کردن | |
| </button> | |
| <button class="btn btn-primary"> | |
| <i class="fas fa-history"></i> تاریخچه | |
| </button> | |
| </div> | |
| </div> | |
| <div class="messages-container" id="messages"> | |
| <div class="message bot-message"> | |
| <div class="message-sender">DeepSeek</div> | |
| سلام! من DeepSeek V3.2 هستم. چگونه میتوانم به شما کمک کنم؟ | |
| </div> | |
| </div> | |
| <div class="typing-indicator" id="typing"> | |
| <div class="typing-dots"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| <div class="input-area"> | |
| <textarea class="message-input" id="message-input" placeholder="پیام خود را اینجا تایپ کنید..."></textarea> | |
| <button class="send-btn" id="send-btn"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>DeepSeek V3.2 Experimental - ارائه شده توسط Novita</p> | |
| <div class="footer-links"> | |
| <a href="#"><i class="fas fa-book"></i> مستندات</a> | |
| <a href="#"><i class="fas fa-code"></i> نمونه کد</a> | |
| <a href="#"><i class="fas fa-question-circle"></i> راهنما</a> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const messagesContainer = document.getElementById('messages'); | |
| const messageInput = document.getElementById('message-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const typingIndicator = document.getElementById('typing'); | |
| const temperatureSlider = document.getElementById('temperature'); | |
| const tempValue = document.getElementById('temp-value'); | |
| // Update temperature value display | |
| temperatureSlider.addEventListener('input', function() { | |
| tempValue.textContent = this.value; | |
| }); | |
| // Send message function | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (message === '') return; | |
| // Add user message | |
| addMessage(message, 'user'); | |
| messageInput.value = ''; | |
| // Show typing indicator | |
| typingIndicator.style.display = 'block'; | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| // Simulate bot response after delay | |
| setTimeout(() => { | |
| typingIndicator.style.display = 'none'; | |
| const botResponse = generateBotResponse(message); | |
| addMessage(botResponse, 'bot'); | |
| }, 1500); | |
| } | |
| // Add message to chat | |
| function addMessage(text, sender) { | |
| const messageElement = document.createElement('div'); | |
| messageElement.classList.add('message'); | |
| messageElement.classList.add(sender === 'user' ? 'user-message' : 'bot-message'); | |
| const senderElement = document.createElement('div'); | |
| senderElement.classList.add('message-sender'); | |
| senderElement.textContent = sender === 'user' ? 'شما' : 'DeepSeek'; | |
| messageElement.appendChild(senderElement); | |
| messageElement.appendChild(document.createTextNode(text)); | |
| messagesContainer.appendChild(messageElement); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| } | |
| // Generate bot response based on user message | |
| function generateBotResponse(userMessage) { | |
| const lowerMessage = userMessage.toLowerCase(); | |
| if (lowerMessage.includes('سلام') || lowerMessage.includes('hello')) { | |
| return "سلام! خوش آمدید. من DeepSeek V3.2 هستم، یک مدل زبانی بزرگ. چگونه میتوانم به شما کمک کنم؟"; | |
| } else if (lowerMessage.includes('کمک') || lowerMessage.includes('help')) { | |
| return "من میتوانم در زمینههای مختلفی مانند پاسخ به سوالات، تولید متن، برنامهنویسی، تحلیل و ... به شما کمک کنم. فقط سوال خود را مطرح کنید!"; | |
| } else if (lowerMessage.includes('کد') || lowerMessage.includes('code')) { | |
| return "من میتوانم در نوشتن کد به زبانهای مختلف برنامهنویسی مانند Python, JavaScript, Java و ... به شما کمک کنم. چه نوع کدی نیاز دارید؟"; | |
| } else if (lowerMessage.includes('تشکر') || lowerMessage.includes('thank')) { | |
| return "خوشحالم که توانستهام کمک کنم! اگر سوال دیگری دارید، در خدمت شما هستم."; | |
| } else { | |
| return "این یک پاسخ شبیهسازی شده از DeepSeek V3.2 است. در محیط واقعی، مدل به سوال شما پاسخ دقیق و مرتبط خواهد داد. DeepSeek-V3.2-Exp یک مدل پیشرفته زبانی است که میتواند در کارهای مختلفی به شما کمک کند."; | |
| } | |
| } | |
| // Event listeners | |
| sendBtn.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| // Clear chat button | |
| document.querySelector('.btn-secondary').addEventListener('click', function() { | |
| const messages = messagesContainer.querySelectorAll('.message'); | |
| messages.forEach(msg => { | |
| if (!msg.querySelector('.message-sender').textContent.includes('DeepSeek') || | |
| !msg.textContent.includes('سلام! من DeepSeek V3.2 هستم')) { | |
| msg.remove(); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |