Apppublic
BeveledCube/bevelapi

sourceHugging Faceupdated 2y agoView on Hugging Face
1likes
index.html134 linesDownload Raw Back to templates
1<!DOCTYPE html>2<html lang="en">3 4<head>5  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">6  <title>AI API</title>7  <style>8    body {9      font-family: Arial, sans-serif;10      margin: 20px;11      background-color: rgb(50, 50, 50);12    }13 14    button {15      cursor: pointer;16 17      border-style: solid;18      border-width: 3px;19      border-style: solid;20      border-radius: 5px;21 22      text-align: center;23 24      margin: 3px;25      margin-top: 0;26      margin-bottom: 0;27    }28 29    input {30      width: 200px;31      padding: 10px;32      border: 1px solid #ccc;33      background-color: #6b6e7266;34      color: #e9e9e9;35      border-radius: 4px;36 37      transition: all, 0.35s;38    }39 40    input:focus {41      outline: none;42    }43 44    .img {45      width: 40vh;46      height: 40vh;47      margin: 30px;48      display: inline-block;49    }50 51    .video {52      width: 40vh;53      height: 40vh;54      margin: 30px;55      display: inline-block;56    }57 58    .text {59      color: rgb(223, 223, 223);60    }61  </style>62</head>63 64<body>65  <h1 class="text">Chat with me</h1>66  <div id="responses"></div>67 68  <input class="input" type="text" id="prompt" placeholder="bake a cake">69  <button class="send-button" id="send-prompt">70    <i class="material-icons">send</i>71  </button>72 73  <script>74    const apiUrl = `https://beveledcube-bevelapi.hf.space/api`;75    const sendPromptButton = document.getElementById("send-prompt");76    const responseContainer = document.getElementById("responses");77    let promptInput = document.getElementById("prompt")78 79    sendPromptButton.addEventListener("click", () => sendPrompt());80    promptInput.addEventListener("keydown", (event) => {81      if (event.key === "Enter") {82        // Prevent the default action if needed (e.g., form submission)83        event.preventDefault();84        sendPrompt()85      }86    });87 88    function sendPrompt() {89      console.log("Sending prompt")90 91      const responseElement = document.createElement("div");92      const requestData = { prompt: promptInput.value };93      promptInput.value = "";94 95      responseElement.classList.add("response-container");96 97      responseElement.innerHTML = `<span class="text"><p><strong>You<br></strong>${requestData.prompt}</p>`;98 99      responseContainer.appendChild(responseElement);100 101      fetch(apiUrl, {102        method: "POST",103        headers: {104          "Content-Type": "application/json"105        },106        body: JSON.stringify(requestData)107      })108        .then(response => {109          if (!response.ok) {110            throw new Error("Network response was " + response.status.toString());111          }112 113          return response.json();114        })115        .then(data => {116          console.log("Response from API:", data);117          const responseElement = document.createElement("div");118 119          responseElement.classList.add("response-container");120 121          responseElement.innerHTML = `<span class="text"><p><strong>AI<br></strong>${data.answer.replace("\n", "<br>")}</p>`;122 123          responseContainer.appendChild(responseElement);124        })125        .catch(error => {126          console.error("Error:", error.message);127        });128    }129 130    function getValue(elementId) {131      return document.getElementById(elementId).value;132    }133  </script>134</body>