Update index.html

index.html

@@ -371,8 +371,8 @@
     </div>
     
     <div class="spaces-info">
-        <h3>🚀 Optimized for HuggingFace Spaces</h3>
-        <p><strong>Model:</strong> bigcode/starcoder2-3b (specialized coding AI) • <strong>Strategy:</strong> Single mutation per generation (API efficient) • <strong>Hosting:</strong> Free on HF Spaces</p>
+        <h3>🚀 HuggingFace Spaces Deployment</h3>
+        <p><strong>Model:</strong> bigcode/starcoder2-3b (specialized coding AI) • <strong>Strategy:</strong> Single mutation per generation • <strong>Auth:</strong> Add your HF token above or get one free at <a href="https://huggingface.co/settings/tokens" target="_blank" style="color: #667eea;">huggingface.co/settings/tokens</a></p>
     </div>
     
     <div class="container">
@@ -381,8 +381,19 @@
             <h2>🎯 Problem Configuration</h2>
             
             <div class="model-info">
-                <h4>🤖 AI Model: StarCoder2-3B</h4>
-                <p>Specialized coding model by BigCode. Excellent at JavaScript generation and code understanding.</p>
+                <h4>🤖 AI Model Selection</h4>
+                <select id="modelSelect" style="width: 100%; padding: 8px; border: 2px solid #e0e0e0; border-radius: 6px; margin-bottom: 10px;">
+                    <option value="starcoder2-3b">StarCoder2-3B (Recommended)</option>
+                    <option value="starcoder2-7b">StarCoder2-7B (Better quality)</option>
+                    <option value="codellama-7b">CodeLlama-7B (Alternative)</option>
+                    <option value="codebert-base">CodeBERT-Base (Fallback)</option>
+                </select>
+                <p style="margin-bottom: 10px;">Specialized coding models by BigCode and Meta. Excellent at JavaScript generation.</p>
+                <div style="margin-top: 10px;">
+                    <label for="hfToken" style="font-weight: bold; display: block; margin-bottom: 5px;">HuggingFace Token:</label>
+                    <input type="password" id="hfToken" placeholder="hf_xxxxx... (required for API access)" style="width: 100%; padding: 8px; border: 2px solid #e0e0e0; border-radius: 6px;">
+                    <small style="color: #666;">Get a free token at <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a></small>
+                </div>
             </div>
             
             <div class="problem-selector">
@@ -480,8 +491,16 @@
     </div>
 
     <script>
-        // StarCoder2-3B - Excellent coding model, Spaces-friendly
-        const MODEL_URL = 'https://api-inference.huggingface.co/models/bigcode/starcoder2-3b';
+        // Model options for different scenarios
+        const MODELS = {
+            'starcoder2-3b': 'https://api-inference.huggingface.co/models/bigcode/starcoder2-3b',
+            'starcoder2-7b': 'https://api-inference.huggingface.co/models/bigcode/starcoder2-7b', 
+            'codellama-7b': 'https://api-inference.huggingface.co/models/codellama/CodeLlama-7b-Instruct-hf',
+            'codebert-base': 'https://api-inference.huggingface.co/models/microsoft/codebert-base'
+        };
+        
+        // Default model
+        let MODEL_URL = MODELS['starcoder2-3b'];
         
         // Problem definitions optimized for StarCoder2
         const PROBLEMS = {
@@ -654,6 +673,12 @@
             startBtn.addEventListener('click', startEvolution);
             stopBtn.addEventListener('click', stopEvolution);
             
+            // Model selector
+            document.getElementById('modelSelect').addEventListener('change', (e) => {
+                MODEL_URL = MODELS[e.target.value];
+                log(`Model changed to: ${e.target.options[e.target.selectedIndex].text}`);
+            });
+            
             // Update estimated API calls when generations change
             document.getElementById('maxGenerations').addEventListener('input', (e) => {
                 estimatedCalls.textContent = e.target.value;
@@ -695,6 +720,18 @@
                 return;
             }
             
+            // Check for HF token
+            const hfToken = document.getElementById('hfToken').value.trim();
+            if (!hfToken) {
+                alert('Please add your HuggingFace token above. Get a free one at: https://huggingface.co/settings/tokens');
+                return;
+            }
+            
+            if (!hfToken.startsWith('hf_')) {
+                alert('Invalid token format. HuggingFace tokens start with "hf_"');
+                return;
+            }
+            
             isRunning = true;
             currentGeneration = 0;
             maxGenerations = parseInt(document.getElementById('maxGenerations').value);
@@ -878,11 +915,15 @@ Write an optimized version of the JavaScript function:`;
             const maxTokens = parseInt(document.getElementById('maxTokens').value);
             const temperature = parseFloat(document.getElementById('temperature').value);
             
+            // Get HF token from user input
+            const hfToken = document.getElementById('hfToken').value.trim();
+            
             try {
                 const response = await fetch(MODEL_URL, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${hfToken}`
                     },
                     body: JSON.stringify({
                         inputs: prompt,
@@ -897,11 +938,17 @@ Write an optimized version of the JavaScript function:`;
                 });
                 
                 if (!response.ok) {
+                    if (response.status === 401) {
+                        throw new Error('Authentication failed. Please add a valid HuggingFace token above.');
+                    }
                     if (response.status === 503) {
                         log('⚠️ Model loading, retrying in 10s...');
                         await new Promise(resolve => setTimeout(resolve, 10000));
                         return await callStarCoder(prompt);
                     }
+                    if (response.status === 429) {
+                        throw new Error('Rate limit exceeded. Please wait and try again, or use your own HF token.');
+                    }
                     throw new Error(`API request failed: ${response.status} ${response.statusText}`);
                 }
                 
@@ -1060,4 +1107,4 @@ Write an optimized version of the JavaScript function:`;
         log('');
     </script>
 </body>
-</html>
+</html>