Spaces:
Running
Running
| <html> | |
| <head> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>AutoVChat - talk to AutoV Models</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <h1>AutoVChat</h1> | |
| <p>You can say:</p> | |
| <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> | |