Spaces:

akhaliq
/

Kimi-K2.6

Running

App Files Files Community

akhaliq HF Staff commited on 15 days ago

Commit

f28c8d2

1 Parent(s): fe4bc04

feat: implement Kimi-K2.6 chat interface with Gradio backend and image support

Browse files

Files changed (2) hide show

app.py +76 -0
index.html +252 -0

app.py ADDED Viewed

	@@ -0,0 +1,76 @@

+import os
+import base64
+import typing
+from openai import OpenAI
+from gradio import Server
+from gradio.data_classes import FileData
+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"
+    }
+)
+def encode_image(image_path):
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode('utf-8')
+@app.api()
+def chat(message: str, history: typing.List[typing.List[str]], image: typing.Optional[FileData] = None):
+    messages = []
+    # Reconstruct history
+    for user_msg, assistant_msg in history:
+        if user_msg:
+            messages.append({"role": "user", "content": [{"type": "text", "text": user_msg}]})
+        if assistant_msg:
+            messages.append({"role": "assistant", "content": [{"type": "text", "text": assistant_msg}]})
+    # Add new message
+    content = []
+    if message:
+        content.append({"type": "text", "text": message})
+    else:
+        if image:
+            content.append({"type": "text", "text": "Describe this image."})
+    if image:
+        base64_image = encode_image(image.path)
+        img_type = "image/png"
+        if image.path.lower().endswith("jpg") or image.path.lower().endswith("jpeg"):
+            img_type = "image/jpeg"
+        content.append({
+            "type": "image_url",
+            "image_url": {
+                "url": f"data:{img_type};base64,{base64_image}"
+            }
+        })
+    messages.append({
+        "role": "user",
+        "content": content
+    })
+    try:
+        completion = client.chat.completions.create(
+            model="moonshotai/Kimi-K2.6:fireworks-ai",
+            messages=messages,
+            stream=False
+        )
+        return completion.choices[0].message.content
+    except Exception as e:
+        return f"Error: {str(e)}"
+@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(f.read())
+if __name__ == "__main__":
+    app.launch()

index.html ADDED Viewed

	@@ -0,0 +1,252 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kimi-K2.6 Chat</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f7f7f8; margin: 0; }
+        .header { display: flex; align-items: center; justify-content: center; padding: 12px; background: white; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #111827; }
+        .chat-container { max-width: 800px; margin: 0 auto; height: calc(100vh - 49px); display: flex; flex-direction: column; }
+        .messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
+        .message { display: flex; gap: 16px; padding: 0 20px; }
+        .message.assistant { }
+        .avatar { width: 30px; height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; flex-shrink: 0; font-size: 14px; }
+        .avatar.user { background-color: #5436DA; }
+        .avatar.assistant { background-color: #10a37f; }
+        .content { flex: 1; line-height: 1.6; color: #374151; max-width: calc(100% - 46px); }
+        .input-area { padding: 20px; background: #f7f7f8; position: relative; }
+        .input-container { position: relative; display: flex; align-items: flex-end; background: white; border: 1px solid #d1d5db; border-radius: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); padding: 8px 12px; max-width: 800px; margin: 0 auto; }
+        .input-container:focus-within { border-color: #10a37f; box-shadow: 0 0 0 1px #10a37f; }
+        textarea { flex: 1; border: none; outline: none; resize: none; max-height: 200px; min-height: 24px; padding: 8px; font-family: inherit; font-size: 16px; background: transparent; }
+        .btn-container { display: flex; align-items: center; height: 40px; }
+        .btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: #6b7280; cursor: pointer; transition: all 0.2s; }
+        .btn:hover { background: #f3f4f6; color: #374151; }
+        .btn.send { background: #10a37f; color: white; margin-left: 8px; transition: opacity 0.2s; }
+        .btn.send:hover { background: #0e906f; color: white; }
+        .btn.send:disabled { opacity: 0.5; cursor: not-allowed; }
+        .spinner { animation: spin 1s linear infinite; }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
+        .image-preview-container { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; max-width: 800px; margin-left: auto; margin-right: auto; }
+        .image-preview { position: relative; display: inline-block; }
+        .image-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .remove-image { position: absolute; top: -8px; right: -8px; background: white; color: #374151; border: 1px solid #e5e7eb; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .remove-image:hover { background: #f3f4f6; }
+        .markdown { font-size: 16px; }
+        .markdown p { margin-bottom: 12px; }
+        .markdown p:last-child { margin-bottom: 0; }
+        .markdown pre { background: #1e1e1e; color: #d4d4d4; padding: 16px; border-radius: 8px; overflow-x: auto; margin-bottom: 12px; margin-top: 12px; }
+        .markdown code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 14px; background: #e5e7eb; padding: 2px 4px; border-radius: 4px; color: #111827; }
+        .markdown pre code { background: transparent; padding: 0; color: inherit; }
+        .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #6b7280; gap: 16px; }
+        .empty-logo { width: 48px; height: 48px; border-radius: 50%; background: #10a37f; color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; }
+    </style>
+</head>
+<body>
+    <div class="header">
+        Kimi-K2.6 Chat
+    </div>
+    <div class="chat-container">
+        <div class="messages" id="messages">
+            <div class="empty-state" id="empty-state">
+                <div class="empty-logo">K</div>
+                <h2>How can I help you today?</h2>
+            </div>
+        </div>
+        <div class="input-area">
+            <div id="image-preview-area" class="image-preview-container" style="display: none;">
+                <div class="image-preview">
+                    <img id="preview-img" src="" alt="Preview">
+                    <button class="remove-image" onclick="removeImage()">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="input-container">
+                <input type="file" id="file-upload" accept="image/*" style="display: none" onchange="previewImage(event)">
+                <div class="btn-container">
+                    <button class="btn" onclick="document.getElementById('file-upload').click()" title="Upload Image">
+                        <i class="fas fa-image"></i>
+                    </button>
+                </div>
+                <textarea id="user-input" rows="1" placeholder="Message Kimi-K2.6..." onkeydown="handleKeydown(event)" oninput="autoResize(this)"></textarea>
+                <div class="btn-container">
+                    <button class="btn send" id="send-btn" onclick="sendMessage()" disabled>
+                        <i class="fas fa-arrow-up"></i>
+                    </button>
+                </div>
+            </div>
+            <div style="text-align: center; font-size: 12px; color: #9ca3af; margin-top: 12px;">
+                Kimi-K2.6 can make mistakes. Consider verifying important information.
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script type="module">
+        import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+        let client = null;
+        let history = [];
+        let selectedFile = null;
+        async function initClient() {
+            try {
+                client = await Client.connect(window.location.origin);
+                console.log("Connected to Gradio Server");
+            } catch (e) {
+                console.error("Failed to connect:", e);
+                // Optionally show error to user
+            }
+        }
+        initClient();
+        window.autoResize = function(textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
+            const text = textarea.value.trim();
+            const btn = document.getElementById('send-btn');
+            if (text || selectedFile) {
+                btn.disabled = false;
+            } else {
+                btn.disabled = true;
+            }
+        };
+        window.handleKeydown = function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                if (!document.getElementById('send-btn').disabled) {
+                    sendMessage();
+                }
+            }
+        };
+        window.previewImage = function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                selectedFile = file;
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    document.getElementById('preview-img').src = e.target.result;
+                    document.getElementById('image-preview-area').style.display = 'flex';
+                    document.getElementById('send-btn').disabled = false;
+                }
+                reader.readAsDataURL(file);
+            }
+            // Reset input so same file can be selected again
+            e.target.value = '';
+        };
+        window.removeImage = function() {
+            selectedFile = null;
+            document.getElementById('image-preview-area').style.display = 'none';
+            autoResize(document.getElementById('user-input')); // re-evaluate btn state
+        };
+        function addMessage(role, text, imageSrc = null) {
+            const emptyState = document.getElementById('empty-state');
+            if (emptyState) emptyState.style.display = 'none';
+            const messagesDiv = document.getElementById('messages');
+            const msgDiv = document.createElement('div');
+            msgDiv.className = `message ${role}`;
+            let avatar = role === 'user' ? '<div class="avatar user">U</div>' : '<div class="avatar assistant">K</div>';
+            let contentStr = '';
+            if (imageSrc) {
+                contentStr += `<img src="${imageSrc}" style="max-width: 250px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"><br>`;
+            }
+            if (text) {
+                contentStr += `<div class="markdown">${role === 'user' ? text : marked.parse(text)}</div>`;
+            }
+            msgDiv.innerHTML = `
+                ${avatar}
+                <div class="content">${contentStr}</div>
+            `;
+            messagesDiv.appendChild(msgDiv);
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
+            return msgDiv;
+        }
+        window.sendMessage = async function() {
+            if (!client) {
+                // If not connected yet, show visually but don't proceed
+                console.warn("Client not connected yet.");
+            }
+            const input = document.getElementById('user-input');
+            const text = input.value.trim();
+            if (!text && !selectedFile) return;
+            const sendBtn = document.getElementById('send-btn');
+            sendBtn.disabled = true;
+            sendBtn.innerHTML = '<i class="fas fa-spinner spinner"></i>';
+            input.disabled = true;
+            // Display user message
+            let imgSrc = null;
+            if (selectedFile) {
+                imgSrc = document.getElementById('preview-img').src;
+            }
+            addMessage('user', text, imgSrc);
+            const fileToSend = selectedFile;
+            const textToSend = text;
+            // Clear inputs
+            input.value = '';
+            input.style.height = 'auto';
+            removeImage();
+            // Add loading placeholder for assistant
+            const typingDiv = addMessage('assistant', '<i class="fas fa-circle-notch fa-spin type-indicator"></i>');
+            try {
+                let fileData = null;
+                if (fileToSend) {
+                    fileData = handle_file(fileToSend);
+                }
+                // If client disconnect failed earlier, try mapping
+                if (!client) {
+                    await initClient();
+                }
+                const result = await client.predict("/chat", {
+                    message: textToSend,
+                    history: history,
+                    image: fileData
+                });
+                const responseText = result.data[0];
+                // Update history
+                history.push([textToSend, responseText]);
+                // Replace typing element with actual response
+                typingDiv.querySelector('.content').innerHTML = `<div class="markdown">${marked.parse(responseText)}</div>`;
+            } catch (err) {
+                console.error(err);
+                typingDiv.querySelector('.content').innerHTML = `<div class="markdown" style="color: #ef4444;">Sorry, I encountered an error. Please try again.</div>`;
+            } finally {
+                sendBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';
+                input.disabled = false;
+                input.focus();
+                autoResize(input); // will disable button if text is empty
+                const messagesDiv = document.getElementById('messages');
+                messagesDiv.scrollTop = messagesDiv.scrollHeight;
+            }
+        };
+    </script>
+</body>
+</html>