Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <title>AI API</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 20px; | |
| background-color: rgb(50, 50, 50); | |
| } | |
| button { | |
| cursor: pointer; | |
| border-style: solid; | |
| border-width: 3px; | |
| border-style: solid; | |
| border-radius: 5px; | |
| text-align: center; | |
| margin: 3px; | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| input { | |
| width: 200px; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| background-color: #6b6e7266; | |
| color: #e9e9e9; | |
| border-radius: 4px; | |
| transition: all, 0.35s; | |
| } | |
| input:focus { | |
| outline: none; | |
| } | |
| .img { | |
| width: 40vh; | |
| height: 40vh; | |
| margin: 30px; | |
| display: inline-block; | |
| } | |
| .video { | |
| width: 40vh; | |
| height: 40vh; | |
| margin: 30px; | |
| display: inline-block; | |
| } | |
| .text { | |
| color: rgb(223, 223, 223); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 class="text">Chat with me</h1> | |
| <div id="responses"></div> | |
| <input class="input" type="text" id="prompt" placeholder="bake a cake"> | |
| <button class="send-button" id="send-prompt"> | |
| <i class="material-icons">send</i> | |
| </button> | |
| <script> | |
| const apiUrl = `https://beveledcube-bevelapi.hf.space/api`; | |
| const sendPromptButton = document.getElementById("send-prompt"); | |
| const responseContainer = document.getElementById("responses"); | |
| let promptInput = document.getElementById("prompt") | |
| sendPromptButton.addEventListener("click", () => sendPrompt()); | |
| promptInput.addEventListener("keydown", (event) => { | |
| if (event.key === "Enter") { | |
| // Prevent the default action if needed (e.g., form submission) | |
| event.preventDefault(); | |
| sendPrompt() | |
| } | |
| }); | |
| function sendPrompt() { | |
| console.log("Sending prompt") | |
| const responseElement = document.createElement("div"); | |
| const requestData = { prompt: promptInput.value }; | |
| promptInput.value = ""; | |
| responseElement.classList.add("response-container"); | |
| responseElement.innerHTML = `<span class="text"><p><strong>You<br></strong>${requestData.prompt}</p>`; | |
| responseContainer.appendChild(responseElement); | |
| fetch(apiUrl, { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify(requestData) | |
| }) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error("Network response was " + response.status.toString()); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| console.log("Response from API:", data); | |
| const responseElement = document.createElement("div"); | |
| responseElement.classList.add("response-container"); | |
| responseElement.innerHTML = `<span class="text"><p><strong>AI<br></strong>${data.answer.replace("\n", "<br>")}</p>`; | |
| responseContainer.appendChild(responseElement); | |
| }) | |
| .catch(error => { | |
| console.error("Error:", error.message); | |
| }); | |
| } | |
| function getValue(elementId) { | |
| return document.getElementById(elementId).value; | |
| } | |
| </script> | |
| </body> |