Update index.html

index.html

@@ -16,6 +16,61 @@
 			<p>
 				hello, i got a new dog, i got a new cat
 			</p>
+			
+			<!-- User input -->
+			<textarea id="userInput" placeholder="Type your message here"></textarea>
+			<button id="sendButton">Send</button>
+
+			<!-- AI response -->
+			<p id="aiResponse"></p>
 		</div>
+
+		<script>
+			// Replace with your Hugging Face model endpoint
+			const transformerAPIUrl = "https://api-inference.huggingface.co/models/electric-otter/AutoV1";
+
+			// Handle button click event
+			document.getElementById('sendButton').addEventListener('click', async function() {
+				// Get user input
+				const userInput = document.getElementById('userInput').value;
+				
+				// Check if there's input
+				if (userInput.trim() === "") {
+					alert("Please enter a message.");
+					return;
+				}
+
+				// Prepare the request body
+				const requestBody = {
+					"inputs": userInput
+				};
+
+				// Send POST request to Hugging Face API
+				try {
+					const response = await fetch(transformerAPIUrl, {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+							// No API key needed for public models
+						},
+						body: JSON.stringify(requestBody)
+					});
+
+					// Check if the response is successful
+					if (!response.ok) {
+						throw new Error("Failed to fetch response from API.");
+					}
+
+					// Parse the response from Hugging Face
+					const data = await response.json();
+
+					// Display AI response
+					document.getElementById('aiResponse').innerText = "AI says: " + data[0].generated_text;
+				} catch (error) {
+					console.error("Error:", error);
+					document.getElementById('aiResponse').innerText = "Error occurred. Please try again.";
+				}
+			});
+		</script>
 	</body>
 </html>