Spaces:

akhaliq
/

DeepSeek-V4-Pro

Running

App Files Files Community

akhaliq HF Staff commited on 15 days ago

Commit

826ae84

1 Parent(s): cfbcf09

feat: initialize DeepSeek V4 Pro project with a Gradio-backed web chat interface

Browse files

Files changed (3) hide show

app.py +40 -0
index.html +470 -0
requirements.txt +3 -0

app.py ADDED Viewed

	@@ -0,0 +1,40 @@

+import os
+from openai import OpenAI
+from gradio import Server
+from fastapi.responses import HTMLResponse
+app = Server()
+client = OpenAI(
+    base_url="https://router.huggingface.co/v1",
+    api_key=os.environ.get("HF_TOKEN", ""),
+    default_headers={
+        "X-HF-Bill-To": "huggingface"
+    }
+)
+@app.api("/chat")
+def chat(message: str, history_json: list):
+    # history_json should be a list of dictionaries like [{"role": "user", "content": "..."}, {"role": "assistant", "content": "..."}]
+    messages = history_json + [{"role": "user", "content": message}]
+    completion = client.chat.completions.create(
+        model="deepseek-ai/DeepSeek-V4-Pro:together",
+        messages=messages,
+        stream=True
+    )
+    full_response = ""
+    for chunk in completion:
+        if chunk.choices and chunk.choices[0].delta.content:
+            full_response += chunk.choices[0].delta.content
+            yield full_response
+@app.get("/")
+async def homepage():
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return HTMLResponse(content=f.read())
+if __name__ == "__main__":
+    app.launch(show_error=True)

index.html ADDED Viewed

	@@ -0,0 +1,470 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DeepSeek V4 Pro</title>
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <!-- Marked.js for Markdown parsing -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <!-- Gradio Client -->
+    <script type="module">
+        import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+        window.GradioClient = Client;
+    </script>
+    <style>
+        :root {
+            --bg-color: #0b0f19;
+            --chat-bg: #151a2a;
+            --user-msg: #3b82f6;
+            --bot-msg: #1e293b;
+            --text-color: #e2e8f0;
+            --text-muted: #94a3b8;
+            --border-color: #334155;
+            --input-bg: #0f172a;
+            --glow: 0 0 20px rgba(59, 130, 246, 0.15);
+            --gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            display: flex;
+            justify-content: center;
+            height: 100vh;
+            overflow: hidden;
+        }
+        #app {
+            width: 100%;
+            max-width: 1000px;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            position: relative;
+        }
+        /* Glassmorphism Header */
+        header {
+            padding: 20px 30px;
+            background: rgba(15, 23, 42, 0.7);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            align-items: center;
+            z-index: 10;
+        }
+        .title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            background: var(--gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.02em;
+        }
+        /* Chat Container */
+        #chat-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 30px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            scroll-behavior: smooth;
+        }
+        /* Scrollbar */
+        #chat-container::-webkit-scrollbar {
+            width: 8px;
+        }
+        #chat-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        #chat-container::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 4px;
+        }
+        /* Messages */
+        .message {
+            display: flex;
+            flex-direction: column;
+            max-width: 85%;
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message.user {
+            align-self: flex-end;
+        }
+        .message.bot {
+            align-self: flex-start;
+        }
+        .message-content {
+            padding: 16px 20px;
+            border-radius: 20px;
+            font-size: 0.95rem;
+            line-height: 1.6;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .message.user .message-content {
+            background: var(--user-msg);
+            color: white;
+            border-bottom-right-radius: 4px;
+        }
+        .message.bot .message-content {
+            background: var(--bot-msg);
+            border: 1px solid var(--border-color);
+            border-bottom-left-radius: 4px;
+            overflow-x: auto;
+        }
+        /* Markdown Styles in Bot Message */
+        .message.bot .message-content p {
+            margin-bottom: 0.75em;
+        }
+        .message.bot .message-content p:last-child {
+            margin-bottom: 0;
+        }
+        .message.bot .message-content pre {
+            background: #0f172a;
+            padding: 12px;
+            border-radius: 8px;
+            overflow-x: auto;
+            margin: 10px 0;
+            border: 1px solid var(--border-color);
+        }
+        .message.bot .message-content code {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.85em;
+            background: rgba(0, 0, 0, 0.2);
+            padding: 2px 4px;
+            border-radius: 4px;
+        }
+        .message.bot .message-content pre code {
+            background: transparent;
+            padding: 0;
+        }
+        /* Input Area */
+        #input-container {
+            padding: 24px 30px;
+            background: var(--chat-bg);
+            border-top: 1px solid var(--border-color);
+            box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
+            position: relative;
+        }
+        .input-wrapper {
+            display: flex;
+            align-items: flex-end;
+            background: var(--input-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 24px;
+            padding: 8px 16px;
+            transition: border-color 0.2s, box-shadow 0.2s;
+        }
+        .input-wrapper:focus-within {
+            border-color: #3b82f6;
+            box-shadow: var(--glow);
+        }
+        #user-input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            color: white;
+            font-size: 1rem;
+            font-family: 'Inter', sans-serif;
+            resize: none;
+            padding: 10px 0;
+            max-height: 150px;
+            min-height: 24px;
+            outline: none;
+            line-height: 1.5;
+        }
+        #user-input::placeholder {
+            color: var(--text-muted);
+        }
+        #send-btn {
+            background: var(--gradient);
+            border: none;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            margin-bottom: 4px;
+            margin-left: 12px;
+            transition: transform 0.2s, box-shadow 0.2s;
+            color: white;
+            flex-shrink: 0;
+        }
+        #send-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
+        }
+        #send-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        #send-btn svg {
+            width: 18px;
+            height: 18px;
+            fill: currentColor;
+            margin-left: 2px;
+        }
+        /* Loading Indicator */
+        .typing-indicator {
+            display: none;
+            align-items: center;
+            gap: 4px;
+            padding: 12px 16px;
+            background: var(--bot-msg);
+            border-radius: 16px;
+            border-bottom-left-radius: 4px;
+            width: fit-content;
+            border: 1px solid var(--border-color);
+        }
+        .dot {
+            width: 6px;
+            height: 6px;
+            background: var(--text-muted);
+            border-radius: 50%;
+            animation: bounce 1.4s infinite ease-in-out both;
+        }
+        .dot:nth-child(1) { animation-delay: -0.32s; }
+        .dot:nth-child(2) { animation-delay: -0.16s; }
+        @keyframes bounce {
+            0%, 80%, 100% { transform: scale(0); }
+            40% { transform: scale(1); }
+        }
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-muted);
+            text-align: center;
+        }
+        .empty-state h2 {
+            font-size: 2rem;
+            margin-bottom: 12px;
+            background: var(--gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .empty-state p {
+            max-width: 400px;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <header>
+            <div class="title">DeepSeek-V4-Pro</div>
+        </header>
+        <div id="chat-container">
+            <div class="empty-state" id="empty-state">
+                <h2>What can I help you with?</h2>
+                <p>Experience the power of DeepSeek V4 Pro, ready to answer your questions and assist with complex tasks.</p>
+            </div>
+            <div class="message bot" style="display:none;" id="typing-indicator-wrapper">
+                <div class="typing-indicator" id="typing-indicator">
+                    <div class="dot"></div>
+                    <div class="dot"></div>
+                    <div class="dot"></div>
+                </div>
+            </div>
+        </div>
+        <div id="input-container">
+            <div class="input-wrapper">
+                <textarea id="user-input" rows="1" placeholder="Type a message..."></textarea>
+                <button id="send-btn" disabled>
+                    <svg viewBox="0 0 24 24">
+                        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        let client;
+        let history = [];
+        const chatContainer = document.getElementById('chat-container');
+        const userInput = document.getElementById('user-input');
+        const sendBtn = document.getElementById('send-btn');
+        const emptyState = document.getElementById('empty-state');
+        const typingIndicatorWrapper = document.getElementById('typing-indicator-wrapper');
+        const typingIndicator = document.getElementById('typing-indicator');
+        // Initialize Gradio Client
+        async function initClient() {
+            try {
+                client = await window.GradioClient.connect(window.location.origin);
+                console.log("Connected to Gradio Server");
+                userInput.placeholder = "Message DeepSeek-V4-Pro...";
+            } catch (err) {
+                console.error("Failed to connect to Gradio Server:", err);
+                userInput.placeholder = "Failed to connect to server.";
+            }
+        }
+        // Auto-resize textarea
+        userInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = Math.min(this.scrollHeight, 150) + 'px';
+            sendBtn.disabled = this.value.trim().length === 0;
+        });
+        // Handle Enter key (Shift+Enter for newline)
+        userInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                if (!sendBtn.disabled) {
+                    sendMessage();
+                }
+            }
+        });
+        sendBtn.addEventListener('click', sendMessage);
+        function addMessage(role, content, isStreaming = false) {
+            if (emptyState && emptyState.style.display !== 'none') {
+                emptyState.style.display = 'none';
+            }
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${role}`;
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'message-content';
+            if (role === 'bot') {
+                contentDiv.innerHTML = marked.parse(content);
+            } else {
+                contentDiv.textContent = content;
+            }
+            messageDiv.appendChild(contentDiv);
+            // Insert before typing indicator wrapper if it's there
+            chatContainer.insertBefore(messageDiv, typingIndicatorWrapper);
+            scrollToBottom();
+            return contentDiv;
+        }
+        function scrollToBottom() {
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        async function sendMessage() {
+            const text = userInput.value.trim();
+            if (!text || !client) return;
+            // Reset input
+            userInput.value = '';
+            userInput.style.height = 'auto';
+            sendBtn.disabled = true;
+            userInput.disabled = true;
+            // Add user message to UI
+            addMessage('user', text);
+            // Show typing indicator
+            typingIndicatorWrapper.style.display = 'flex';
+            typingIndicator.style.display = 'flex';
+            scrollToBottom();
+            // Setup streaming bot message
+            const botContentDiv = addMessage('bot', '', true);
+            let fullResponse = "";
+            try {
+                const submission = client.submit("/chat", {
+                    message: text,
+                    history_json: history
+                });
+                for await (const event of submission) {
+                    if (event.type === "data") {
+                        if (typingIndicatorWrapper.style.display !== 'none') {
+                            typingIndicatorWrapper.style.display = 'none';
+                            typingIndicator.style.display = 'none';
+                        }
+                        fullResponse = event.data[0];
+                        botContentDiv.innerHTML = marked.parse(fullResponse);
+                        scrollToBottom();
+                    }
+                    if (event.type === "status") {
+                        if (event.stage === "error") {
+                            throw new Error(event.message);
+                        }
+                    }
+                }
+                // Update history
+                history.push({"role": "user", "content": text});
+                history.push({"role": "assistant", "content": fullResponse});
+            } catch (err) {
+                console.error("Error during generation:", err);
+                typingIndicatorWrapper.style.display = 'none';
+                typingIndicator.style.display = 'none';
+                botContentDiv.innerHTML = `<span style="color: #ef4444;">Error: ${err.message || 'Something went wrong.'}</span>`;
+            } finally {
+                userInput.disabled = false;
+                userInput.focus();
+            }
+        }
+        // Run init
+        initClient();
+    </script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+fastapi
+gradio
+openai