Spaces:

secutorpro
/

memory-void

Running

App Files Files Community

secutorpro commited on 14 days ago

Commit

07ea14f

verified ·

1 Parent(s): 057e8b6

🐳 18/08 - 21:05 - cree un systeme pour ree des application ave qwen. import os from openai import OpenAI client = OpenAI( base_url="https://router.huggingface.co/v1", api_key=os.environ[

Browse files

Files changed (3) hide show

builder.html +151 -0
builder.js +139 -0
index.html +3 -0

builder.html ADDED Viewed

	@@ -0,0 +1,151 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Qwen App Builder — Memory Void</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        'undefined': {
+                            500: '#6366f1',
+                            600: '#4f46e5',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300 min-h-screen flex flex-col font-mono">
+    <!-- Navigation -->
+    <nav class="border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16 items-center">
+                <div class="flex items-center space-x-2">
+                    <i data-feather="lock" class="text-undefined-500 w-6 h-6"></i>
+                    <span class="font-bold text-xl tracking-tight">Memory Void</span>
+                    <span class="ml-2 text-xs text-gray-500 hidden sm:inline">/ Qwen App Builder</span>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <a href="index.html" class="text-sm text-gray-600 dark:text-gray-400 hover:text-undefined-500 transition-colors flex items-center">
+                        <i data-feather="home" class="w-4 h-4 mr-1"></i> Home
+                    </a>
+                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-undefined-500" aria-label="Toggle Theme">
+                        <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
+                        <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="flex-grow max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full flex flex-col">
+        <!-- Hero -->
+        <div class="text-center mb-8">
+            <h1 class="text-3xl md:text-5xl font-extrabold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-undefined-500 to-purple-600">
+                Qwen App Builder
+            </h1>
+            <p class="text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+                Generate applications with Qwen via Hugging Face Router. Send text prompts and images to build apps in real-time.
+            </p>
+        </div>
+        <!-- API Config Bar -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-4 mb-6">
+            <div class="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
+                <div class="flex items-center gap-2 text-sm font-semibold whitespace-nowrap">
+                    <i data-feather="key" class="w-4 h-4 text-undefined-500"></i>
+                    HF_TOKEN
+                </div>
+                <input id="api-key" type="password" placeholder="hf_xxxxxxxxxxxxxxxxxxxxxx"
+                    class="flex-grow bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-undefined-500 font-mono"
+                    value="">
+                <select id="model-select" class="bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-undefined-500 font-mono">
+                    <option value="trohrbaugh/Qwen3.8-27B-heretic-ara:featherless-ai">Qwen3.8-27B-heretic-ara</option>
+                    <option value="Qwen/Qwen2.5-72B-Instruct">Qwen2.5-72B-Instruct</option>
+                    <option value="Qwen/Qwen2.5-VL-72B-Instruct">Qwen2.5-VL-72B-Instruct</option>
+                    <option value="Qwen/Qwen2.5-Coder-32B-Instruct">Qwen2.5-Coder-32B-Instruct</option>
+                </select>
+                <button id="save-key" class="bg-undefined-500 hover:bg-undefined-600 text-white text-sm font-bold py-2 px-4 rounded-lg transition-colors whitespace-nowrap">
+                    Save
+                </button>
+            </div>
+        </div>
+        <!-- Chat Container -->
+        <div class="flex-grow flex flex-col bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <!-- Messages Area -->
+            <div id="chat-messages" class="flex-grow overflow-y-auto p-4 sm:p-6 space-y-4 min-h-[300px] max-h-[55vh]">
+                <!-- Welcome message -->
+                <div class="flex justify-start">
+                    <div class="bg-gray-100 dark:bg-gray-700 rounded-2xl rounded-tl-sm px-4 py-3 max-w-[85%]">
+                        <div class="flex items-center gap-2 mb-1 text-xs text-gray-500">
+                            <i data-feather="cpu" class="w-3 h-3"></i> Qwen
+                        </div>
+                        <p class="text-sm">👋 Hello! I'm your Qwen-powered app builder. Describe the app you want to create, and I'll generate the code for you. You can also attach an image for vision-based tasks!</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Image Preview Area -->
+            <div id="image-preview" class="hidden px-4 pt-3">
+                <div class="inline-flex items-center gap-2 bg-gray-100 dark:bg-gray-700 rounded-lg p-2 pr-3">
+                    <img id="preview-img" class="w-16 h-16 object-cover rounded-md" alt="preview">
+                    <div class="text-xs text-gray-500">
+                        <div id="preview-name">image.jpg</div>
+                        <button id="remove-image" class="text-red-500 hover:text-red-600 mt-1 flex items-center gap-1">
+                            <i data-feather="x" class="w-3 h-3"></i> Remove
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Input Area -->
+            <div class="border-t border-gray-200 dark:border-gray-700 p-4">
+                <div class="flex items-end gap-2">
+                    <button id="attach-btn" class="p-3 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex-shrink-0" title="Attach Image">
+                        <i data-feather="image" class="w-5 h-5 text-gray-500"></i>
+                    </button>
+                    <input type="file" id="file-input" accept="image/*" class="hidden">
+                    <textarea id="prompt-input" rows="1" placeholder="Describe the app you want to build..."
+                        class="flex-grow resize-none bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-undefined-500 max-h-32"></textarea>
+                    <button id="send-btn" class="p-3 rounded-lg bg-undefined-500 hover:bg-undefined-600 text-white transition-colors flex-shrink-0 shadow-lg shadow-undefined-500/30 disabled:opacity-50 disabled:cursor-not-allowed" title="Send">
+                        <i data-feather="send" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <div class="flex items-center justify-between mt-2 text-xs text-gray-400">
+                    <span class="flex items-center gap-1">
+                        <i data-feather="info" class="w-3 h-3"></i> Press Enter to send, Shift+Enter for new line
+                    </span>
+                    <button id="clear-chat" class="hover:text-red-500 transition-colors flex items-center gap-1">
+                        <i data-feather="trash-2" class="w-3 h-3"></i> Clear
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="border-t border-gray-200 dark:border-gray-800 mt-auto py-6">
+        <div class="max-w-7xl mx-auto px-4 text-center text-gray-500 text-sm">
+            <p>&copy; 2023 Memory Void. Powered by Qwen on Hugging Face Router.</p>
+        </div>
+    </footer>
+    <script src="script.js"></script>
+    <script src="builder.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

builder.js ADDED Viewed

	@@ -0,0 +1,139 @@

+// === Qwen App Builder Logic ===
+document.addEventListener('DOMContentLoaded', () => {
+    const chatMessages = document.getElementById('chat-messages');
+    const promptInput = document.getElementById('prompt-input');
+    const sendBtn = document.getElementById('send-btn');
+    const attachBtn = document.getElementById('attach-btn');
+    const fileInput = document.getElementById('file-input');
+    const imagePreview = document.getElementById('image-preview');
+    const previewImg = document.getElementById('preview-img');
+    const previewName = document.getElementById('preview-name');
+    const removeImageBtn = document.getElementById('remove-image');
+    const apiKeyInput = document.getElementById('api-key');
+    const saveKeyBtn = document.getElementById('save-key');
+    const modelSelect = document.getElementById('model-select');
+    const clearChatBtn = document.getElementById('clear-chat');
+    let attachedImage = null; // { base64, name }
+    let isStreaming = false;
+    // Load saved API key
+    const savedKey = localStorage.getItem('hf_token');
+    if (savedKey) apiKeyInput.value = savedKey;
+    const savedModel = localStorage.getItem('hf_model');
+    if (savedModel) modelSelect.value = savedModel;
+    // Save API key
+    saveKeyBtn.addEventListener('click', () => {
+        localStorage.setItem('hf_token', apiKeyInput.value.trim());
+        localStorage.setItem('hf_model', modelSelect.value);
+        saveKeyBtn.textContent = 'Saved!';
+        setTimeout(() => { saveKeyBtn.textContent = 'Save'; }, 1500);
+    });
+    // Auto-resize textarea
+    promptInput.addEventListener('input', () => {
+        promptInput.style.height = 'auto';
+        promptInput.style.height = Math.min(promptInput.scrollHeight, 128) + 'px';
+    });
+    // Enter to send
+    promptInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+    sendBtn.addEventListener('click', sendMessage);
+    // Image attachment
+    attachBtn.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+        if (file.size > 4 * 1024 * 1024) {
+            alert('Image too large. Max 4MB for base64 encoding.');
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            attachedImage = { base64: event.target.result, name: file.name };
+            previewImg.src = event.target.result;
+            previewName.textContent = file.name;
+            imagePreview.classList.remove('hidden');
+            feather.replace();
+        };
+        reader.readAsDataURL(file);
+    });
+    removeImageBtn.addEventListener('click', () => {
+        attachedImage = null;
+        imagePreview.classList.add('hidden');
+        fileInput.value = '';
+    });
+    // Clear chat
+    clearChatBtn.addEventListener('click', () => {
+        chatMessages.innerHTML = '';
+        addMessage('bot', '👋 Chat cleared. What app shall we build next?');
+    });
+    // Add message to chat
+    function addMessage(role, content, isCode = false) {
+        const wrapper = document.createElement('div');
+        wrapper.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;
+        const bubble = document.createElement('div');
+        bubble.className = role === 'user'
+            ? 'bg-undefined-500 text-white rounded-2xl rounded-tr-sm px-4 py-3 max-w-[85%]'
+            : 'bg-gray-100 dark:bg-gray-700 rounded-2xl rounded-tl-sm px-4 py-3 max-w-[85%]';
+        if (role === 'bot') {
+            const header = document.createElement('div');
+            header.className = 'flex items-center gap-2 mb-1 text-xs text-gray-500';
+            header.innerHTML = '<i data-feather="cpu" class="w-3 h-3"></i> Qwen';
+            bubble.appendChild(header);
+        }
+        const textDiv = document.createElement('div');
+        textDiv.className = 'text-sm whitespace-pre-wrap break-words';
+        textDiv.textContent = content;
+        bubble.appendChild(textDiv);
+        wrapper.appendChild(bubble);
+        chatMessages.appendChild(wrapper);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        feather.replace();
+        return textDiv;
+    }
+    // Add streaming message (returns the text element to update)
+    function addStreamingMessage() {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'flex justify-start';
+        const bubble = document.createElement('div');
+        bubble.className = 'bg-gray-100 dark:bg-gray-700 rounded-2xl rounded-tl-sm px-4 py-3 max-w-[85%]';
+        const header = document.createElement('div');
+        header.className = 'flex items-center gap-2 mb-1 text-xs text-gray-500';
+        header.innerHTML = '<i data-feather="cpu" class="w-3 h-3"></i> Qwen <span class="animate-pulse">●</span>';
+        bubble.appendChild(header);
+        const textDiv = document.createElement('div');
+        textDiv.className = 'text-sm whitespace-pre-wrap break-words';
+        bubble.appendChild(textDiv);
+        wrapper.appendChild(bubble);
+        chatMessages.appendChild(wrapper);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        feather.replace();
+        return textDiv;
+    }
+    // Format code blocks in text
+    function formatContent(element, text) {
+        element.innerHTML = '';
+        const codeRegex = /

index.html CHANGED Viewed

@@ -36,6 +36,9 @@
                     <span class="font-bold text-xl tracking-tight">Memory Void</span>
                 </div>
                 <div class="flex items-center space-x-4">
                     <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-undefined-500" aria-label="Toggle Theme">
                         <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
                         <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>

                     <span class="font-bold text-xl tracking-tight">Memory Void</span>
                 </div>
                 <div class="flex items-center space-x-4">
+                    <a href="builder.html" class="text-sm text-gray-600 dark:text-gray-400 hover:text-undefined-500 transition-colors flex items-center" aria-label="Qwen App Builder">
+                        <i data-feather="cpu" class="w-4 h-4 mr-1"></i> <span class="hidden sm:inline">App Builder</span>
+                    </a>
                     <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-undefined-500" aria-label="Toggle Theme">
                         <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
                         <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>