Spaces:
Sleeping
Sleeping
File size: 3,462 Bytes
0481514 eb0ceee 0481514 eb0ceee 0481514 eb0ceee 0481514 eb0ceee 0481514 | 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 | // API Configuration
const API_URL = window.location.origin; // Use same origin (works locally and on HF Spaces)
// DOM Elements
const promptEl = document.getElementById('prompt');
const generateBtn = document.getElementById('generateBtn');
const statusEl = document.getElementById('status');
const outputEl = document.getElementById('output');
const maxTokensEl = document.getElementById('maxTokens');
const temperatureEl = document.getElementById('temperature');
const topPEl = document.getElementById('topP');
const maxTokensValueEl = document.getElementById('maxTokensValue');
const temperatureValueEl = document.getElementById('temperatureValue');
const topPValueEl = document.getElementById('topPValue');
// Update slider value displays
maxTokensEl.addEventListener('input', (e) => {
maxTokensValueEl.textContent = e.target.value;
});
temperatureEl.addEventListener('input', (e) => {
temperatureValueEl.textContent = parseFloat(e.target.value).toFixed(1);
});
topPEl.addEventListener('input', (e) => {
topPValueEl.textContent = parseFloat(e.target.value).toFixed(2);
});
// Generate button click handler
generateBtn.addEventListener('click', async () => {
const prompt = promptEl.value.trim();
if (!prompt) {
outputEl.textContent = 'Please enter a prompt';
outputEl.className = 'output error';
return;
}
// Disable button and show loading with animation
generateBtn.disabled = true;
generateBtn.textContent = '⏳ Generating...';
statusEl.textContent = '⏳';
outputEl.textContent = '🔄 Your model is thinking...\n\nThis may take 10-30 seconds on CPU.\nPlease wait...';
outputEl.className = 'output';
try {
const response = await fetch(`${API_URL}/api/generate`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
prompt: prompt,
max_new_tokens: parseInt(maxTokensEl.value),
temperature: parseFloat(temperatureEl.value),
top_p: parseFloat(topPEl.value)
})
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || `HTTP ${response.status}`);
}
// Display result
outputEl.textContent = data.generated_text;
outputEl.className = 'output';
statusEl.textContent = '✅';
} catch (error) {
console.error('Error:', error);
outputEl.textContent = `Error: ${error.message}`;
outputEl.className = 'output error';
statusEl.textContent = '❌';
} finally {
generateBtn.disabled = false;
generateBtn.textContent = '✨ Generate';
}
});
// Allow Enter key to trigger generation (Ctrl+Enter)
promptEl.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'Enter') {
generateBtn.click();
}
});
// Health check on load
async function checkHealth() {
try {
const response = await fetch(`${API_URL}/api/health`);
const data = await response.json();
console.log('API Health:', data);
} catch (error) {
console.warn('API health check failed:', error);
}
}
// Run health check when page loads
checkHealth();
|