Hugging Face's logo

Spaces:
BeveledCube
/
bevelapi
Sleeping

App Files Community
bevelapi
File size: 3,298 Bytes 
503bcd5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8e724ea
 
 
 
 
 
 
 
 
 
503bcd5
8e724ea
503bcd5
 
 
8e724ea
 
503bcd5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8e724ea
503bcd5
 
 
 
 
e8caf01
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
<!DOCTYPE html>
<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>