adding api required

index.html

@@ -45,6 +45,7 @@
 					: 'w-full md:w-6/6'">
 						<div x-show="openModal" class="bg-gray-400 p-6 rounded-lg shadow-md w-full md:w-1/2 lg:w-1/3">
 							<h2 class="text-lg font-semibold mb-4">Choose Model</h2>
+							<input type="text">
 							<div class="space-y-4">
 								<button
 									@click="selectModel('mistralai/Mistral-7B-Instruct-v0.1', 'https://mistral.ai/news/announcing-mistral-7b')"
@@ -103,7 +104,10 @@
 								<textarea id="prompt-input" rows="4"
 									class="w-full border-0 bg-slate-50 px-0 text-base text-slate-900 focus:outline-none "
 									placeholder="Describe your web app" required></textarea>
+									
 							</div>
+							<label for="api-token" class="sr-only">API Token:</label>
+<input class="rounded-lg border border-slate-300 bg-slate-50 w-[90%] px-2 py-2" type="text" id="api-token" placeholder="Enter your huggingface API" required>
 							<div class="ml-2 flex items-center py-2">
 								<div>
 									<button type="submit"
@@ -159,6 +163,8 @@
 							</button>
 						</div>
 					</form>
+					
+
 
 				</div>
 
@@ -289,16 +295,17 @@
 					}
 					this.loading = !this.loading;
 					const userPrompt = document.getElementById('prompt-input').value;
-
+					const apiToken = document.getElementById('api-token').value;
 					const htmlFormatPrompt = `Generate HTML code with proper formatting: ${userPrompt}`;
 					try {
 						const response = await axios.post(`https://api-inference.huggingface.co/models/${this.selectedModel}`, {
-							inputs: htmlFormatPrompt,
-						}, {
-							headers: {
-								'Authorization': 'Bearer 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',
-							},
-						});
+										    inputs: htmlFormatPrompt,
+										}, {
+										    headers: {
+										        'Authorization': `Bearer ${apiToken}`,
+										    },
+										});
+
 						let extractedCode = '';
 
 						try {