Spaces:
Sleeping
Sleeping
File size: 5,960 Bytes
5b2b9b0 4cb09ae 5b2b9b0 4cb09ae 5b2b9b0 4cb09ae 5b2b9b0 4cb09ae 5b2b9b0 4cb09ae 5b2b9b0 4cb09ae 0bd46d0 4cb09ae f418bc1 4cb09ae f418bc1 5b2b9b0 4cb09ae 5b2b9b0 4cb09ae 5b2b9b0 |
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 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LaMini-LM Text Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.spinner {
display: none;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #3b82f6;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center px-4">
<div class="max-w-lg w-full bg-white rounded-xl shadow-lg p-6">
<h1 class="text-2xl font-bold text-center text-gray-800 mb-6">LaMini-LM Text Generator</h1>
<form id="generate-form" class="space-y-4">
<div>
<label for="instruction" class="block text-sm font-medium text-gray-700">Instruction</label>
<textarea
id="instruction"
class="mt-1 w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
rows="4"
placeholder="e.g., Tell me about camels"
required
></textarea>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="max-length" class="block text-sm font-medium text-gray-700">Max Length (10–500)</label>
<input
id="max-length"
type="number"
min="10"
max="500"
value="100"
class="mt-1 w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
required
/>
</div>
<div>
<label for="temperature" class="block text-sm font-medium text-gray-700">Temperature (0–2)</label>
<input
id="temperature"
type="number"
step="0.1"
min="0"
max="2"
value="1.0"
class="mt-1 w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
required
/>
</div>
<div>
<label for="top-p" class="block text-sm font-medium text-gray-700">Top P (0–1)</label>
<input
id="top-p"
type="number"
step="0.1"
min="0"
max="1"
value="0.9"
class="mt-1 w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
required
/>
</div>
</div>
<button
type="submit"
class="w-full py-2 px-4 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-semibold rounded-md hover:from-blue-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center justify-center"
>
<span id="button-text">Generate Text</span>
<span id="spinner" class="spinner ml-2"></span>
</button>
</form>
<div id="error" class="mt-4 hidden p-3 bg-red-100 text-red-700 rounded-md"></div>
<div id="result" class="mt-4 hidden p-4 bg-gray-50 rounded-md">
<h2 class="text-lg font-semibold text-gray-800">Generated Text:</h2>
<p id="generated-text" class="mt-2 text-gray-600"></p>
</div>
</div>
<script>
const form = document.getElementById('generate-form');
const errorDiv = document.getElementById('error');
const resultDiv = document.getElementById('result');
const generatedText = document.getElementById('generated-text');
const buttonText = document.getElementById('button-text');
const spinner = document.getElementById('spinner');
form.addEventListener('submit', async (e) => {
e.preventDefault();
errorDiv.classList.add('hidden');
resultDiv.classList.add('hidden');
buttonText.textContent = 'Generating...';
spinner.style.display = 'block';
const instruction = document.getElementById('instruction').value;
const maxLength = Number(document.getElementById('max-length').value);
const temperature = Number(document.getElementById('temperature').value);
const topP = Number(document.getElementById('top-p').value);
if (!instruction.trim()) {
showError('Instruction cannot be empty.');
return;
}
if (maxLength < 10 || maxLength > 500) {
showError('Max length must be between 10 and 500.');
return;
}
if (temperature <= 0 || temperature > 2) {
showError('Temperature must be between 0 and 2.');
return;
}
if (topP <= 0 || topP > 1) {
showError('Top P must be between 0 and 1.');
return;
}
try {
const response = await fetch('/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
// Add Authorization header if Space is private
// 'Authorization': 'Bearer <your_hf_token>'
},
body: JSON.stringify({
instruction,
max_length: maxLength,
temperature,
top_p: topP,
}),
});
const data = await response.json();
if (response.ok) {
resultDiv.classList.remove('hidden');
generatedText.textContent = data.generated_text;
} else {
showError(data.detail?.[0]?.msg || data.detail || 'Failed to generate text.');
}
} catch (err) {
showError('Error connecting to the API. Please try again.');
} finally {
buttonText.textContent = 'Generate Text';
spinner.style.display = 'none';
}
});
function showError(message) {
errorDiv.textContent = message;
errorDiv.classList.remove('hidden');
buttonText.textContent = 'Generate Text';
spinner.style.display = 'none';
}
</script>
</body>
</html>
|