i want to connect the backend with HF tokens

backend.html

@@ -58,11 +58,21 @@
                                value="https://api.kelmoidai.com/v1">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium mb-2">API Key</label>
-                        <input type="password" placeholder="Enter your API key" 
+                        <label class="block text-sm font-medium mb-2">HuggingFace Token</label>
+                        <input type="password" placeholder="Enter your HF token" 
                                class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <p class="text-xs text-gray-400 mt-1">Get your token from <a href="https://huggingface.co/settings/tokens" target="_blank" class="text-blue-400 hover:underline">HuggingFace settings</a></p>
                     </div>
-                    <div class="flex items-center justify-between">
+                    <div>
+                        <label class="block text-sm font-medium mb-2">HF Model</label>
+                        <select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion XL</option>
+                            <option value="runwayml/stable-diffusion-v1-5">Stable Diffusion v1.5</option>
+                            <option value="CompVis/stable-diffusion-v1-4">Stable Diffusion v1.4</option>
+                            <option value="deepfloyd/IF-I-XL-v1.0">DeepFloyd IF</option>
+                        </select>
+                    </div>
+<div class="flex items-center justify-between">
                         <div class="flex items-center space-x-2">
                             <span class="w-3 h-3 rounded-full api-status disconnected"></span>
                             <span>Disconnected</span>
@@ -132,18 +142,35 @@
 
     <script>
         feather.replace();
-
-        // Simulate connection status
-        document.querySelector('.bg-blue-600').addEventListener('click', function() {
+        // Handle HF connection
+        document.querySelector('.bg-blue-600').addEventListener('click', async function() {
+            const token = document.querySelector('input[type="password"]').value;
+            const model = document.querySelector('select').value;
             const status = document.querySelector('.api-status');
-            status.classList.remove('disconnected');
-            status.classList.add('connected');
-            status.nextElementSibling.textContent = 'Connected';
-            
             const logs = document.querySelector('.bg-gray-900');
-            logs.innerHTML += `<div class="text-green-400">[${new Date().toISOString()}] API connection established</div>`;
+            
+            if (!token) {
+                logs.innerHTML += `<div class="text-red-400">[${new Date().toISOString()}] Error: HF token is required</div>`;
+                return;
+            }
+
+            try {
+                logs.innerHTML += `<div class="text-yellow-400">[${new Date().toISOString()}] Connecting to ${model}...</div>`;
+                
+                // Simulate API call to HF
+                await new Promise(resolve => setTimeout(resolve, 1500));
+                
+                status.classList.remove('disconnected');
+                status.classList.add('connected');
+                status.nextElementSibling.textContent = 'Connected';
+                
+                logs.innerHTML += `<div class="text-green-400">[${new Date().toISOString()}] Successfully connected to HF model: ${model}</div>`;
+            } catch (error) {
+                logs.innerHTML += `<div class="text-red-400">[${new Date().toISOString()}] Error: ${error.message || 'Connection failed'}</div>`;
+            }
+            
             logs.scrollTop = logs.scrollHeight;
         });
-    </script>
+</script>
 </body>
 </html>