Spaces:
Running
Running
File size: 8,731 Bytes
07ea14f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 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>© 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> |