Spaces:
Running
Running
Commit
·
503bcd5
1
Parent(s):
fa7aadc
yes
Browse files- templates/index.html +128 -0
templates/index.html
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
|
|
@@ -123,4 +124,131 @@
|
|
| 123 |
</script>
|
| 124 |
</body>
|
| 125 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 126 |
</html>
|
|
|
|
| 1 |
+
<<<<<<< HEAD
|
| 2 |
<!DOCTYPE html>
|
| 3 |
<html lang="en">
|
| 4 |
|
|
|
|
| 124 |
</script>
|
| 125 |
</body>
|
| 126 |
|
| 127 |
+
=======
|
| 128 |
+
<!DOCTYPE html>
|
| 129 |
+
<html lang="en">
|
| 130 |
+
|
| 131 |
+
<head>
|
| 132 |
+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
| 133 |
+
<title>AI API</title>
|
| 134 |
+
<style>
|
| 135 |
+
body {
|
| 136 |
+
font-family: Arial, sans-serif;
|
| 137 |
+
margin: 20px;
|
| 138 |
+
background-color: rgb(50, 50, 50);
|
| 139 |
+
}
|
| 140 |
+
|
| 141 |
+
button {
|
| 142 |
+
cursor: pointer;
|
| 143 |
+
|
| 144 |
+
border-style: solid;
|
| 145 |
+
border-width: 3px;
|
| 146 |
+
border-style: solid;
|
| 147 |
+
border-radius: 5px;
|
| 148 |
+
|
| 149 |
+
text-align: center;
|
| 150 |
+
|
| 151 |
+
margin: 3px;
|
| 152 |
+
margin-top: 0;
|
| 153 |
+
margin-bottom: 0;
|
| 154 |
+
}
|
| 155 |
+
|
| 156 |
+
input {
|
| 157 |
+
width: 200px;
|
| 158 |
+
padding: 10px;
|
| 159 |
+
border: 1px solid #ccc;
|
| 160 |
+
background-color: #6b6e7266;
|
| 161 |
+
color: #e9e9e9;
|
| 162 |
+
border-radius: 4px;
|
| 163 |
+
|
| 164 |
+
transition: all, 0.35s;
|
| 165 |
+
}
|
| 166 |
+
|
| 167 |
+
input:focus {
|
| 168 |
+
outline: none;
|
| 169 |
+
}
|
| 170 |
+
|
| 171 |
+
.img {
|
| 172 |
+
width: 40vh;
|
| 173 |
+
height: 40vh;
|
| 174 |
+
margin: 30px;
|
| 175 |
+
display: inline-block;
|
| 176 |
+
}
|
| 177 |
+
|
| 178 |
+
.video {
|
| 179 |
+
width: 40vh;
|
| 180 |
+
height: 40vh;
|
| 181 |
+
margin: 30px;
|
| 182 |
+
display: inline-block;
|
| 183 |
+
}
|
| 184 |
+
|
| 185 |
+
.text {
|
| 186 |
+
color: rgb(223, 223, 223);
|
| 187 |
+
}
|
| 188 |
+
</style>
|
| 189 |
+
</head>
|
| 190 |
+
|
| 191 |
+
<body>
|
| 192 |
+
<h1 class="text">Chat with me</h1>
|
| 193 |
+
<div id="responses"></div>
|
| 194 |
+
|
| 195 |
+
<input class="input" type="text" id="prompt" placeholder="bake a cake">
|
| 196 |
+
<button class="send-button" id="send-prompt">
|
| 197 |
+
<i class="material-icons">send</i>
|
| 198 |
+
</button>
|
| 199 |
+
|
| 200 |
+
<script>
|
| 201 |
+
const apiUrl = `https://beveledcube-bevelapi.hf.space/api`;
|
| 202 |
+
const sendPromptButton = document.getElementById("send-prompt");
|
| 203 |
+
const responseContainer = document.getElementById("responses");
|
| 204 |
+
|
| 205 |
+
sendPromptButton.addEventListener("click", async () => {
|
| 206 |
+
console.log("Sending prompt")
|
| 207 |
+
|
| 208 |
+
const responseElement = document.createElement("div");
|
| 209 |
+
const requestData = { prompt: getValue("prompt") };
|
| 210 |
+
|
| 211 |
+
responseElement.classList.add("response-container");
|
| 212 |
+
|
| 213 |
+
responseElement.innerHTML = `<span class="text"><p><strong>You<br></strong>${requestData.prompt}</p>`;
|
| 214 |
+
|
| 215 |
+
responseContainer.appendChild(responseElement);
|
| 216 |
+
|
| 217 |
+
fetch(apiUrl, {
|
| 218 |
+
method: "POST",
|
| 219 |
+
headers: {
|
| 220 |
+
"Content-Type": "application/json"
|
| 221 |
+
},
|
| 222 |
+
body: JSON.stringify(requestData)
|
| 223 |
+
})
|
| 224 |
+
.then(response => {
|
| 225 |
+
if (!response.ok) {
|
| 226 |
+
throw new Error("Network response was " + response.status.toString());
|
| 227 |
+
}
|
| 228 |
+
|
| 229 |
+
return response.json();
|
| 230 |
+
})
|
| 231 |
+
.then(data => {
|
| 232 |
+
console.log("Response from API:", data);
|
| 233 |
+
const responseElement = document.createElement("div");
|
| 234 |
+
|
| 235 |
+
responseElement.classList.add("response-container");
|
| 236 |
+
|
| 237 |
+
responseElement.innerHTML = `<span class="text"><p><strong>AI<br></strong>${data.answer.replace("\n", "<br>")}</p>`;
|
| 238 |
+
|
| 239 |
+
responseContainer.appendChild(responseElement);
|
| 240 |
+
})
|
| 241 |
+
.catch(error => {
|
| 242 |
+
console.error("Error:", error.message);
|
| 243 |
+
});
|
| 244 |
+
|
| 245 |
+
});
|
| 246 |
+
|
| 247 |
+
function getValue(elementId) {
|
| 248 |
+
return document.getElementById(elementId).value;
|
| 249 |
+
}
|
| 250 |
+
</script>
|
| 251 |
+
</body>
|
| 252 |
+
|
| 253 |
+
>>>>>>> 2cb4613 (Modified frontend and added a few models)
|
| 254 |
</html>
|