Spaces:
Runtime error
Runtime error
| if (document.location.search.includes("dark-theme=true")) { | |
| document.body.classList.add("dark-theme"); | |
| } | |
| const textToImage = async (text) => { | |
| const inferenceResponse = await fetch(`infer_biggan?input=${text}`); | |
| const inferenceBlob = await inferenceResponse.blob(); | |
| return URL.createObjectURL(inferenceBlob); | |
| }; | |
| const translateText = async (text) => { | |
| const inferResponse = await fetch(`infer_t5?input=${text}`); | |
| const inferJson = await inferResponse.json(); | |
| return inferJson.output; | |
| }; | |
| const queryDataset = async (start, end) => { | |
| const queryResponse = await fetch(`query_emotion?start=${start}&end=${end}`); | |
| const queryJson = await queryResponse.json(); | |
| return queryJson.output; | |
| }; | |
| const updateTable = async (cursor, range = 5) => { | |
| const table = document.querySelector(".dataset-output"); | |
| const fragment = new DocumentFragment(); | |
| const observations = await queryDataset(cursor, cursor + range); | |
| for (const observation of observations) { | |
| let row = document.createElement("tr"); | |
| let text = document.createElement("td"); | |
| let emotion = document.createElement("td"); | |
| text.textContent = observation.text; | |
| emotion.textContent = observation.emotion; | |
| row.appendChild(text); | |
| row.appendChild(emotion); | |
| fragment.appendChild(row); | |
| } | |
| table.innerHTML = ""; | |
| table.appendChild(fragment); | |
| table.insertAdjacentHTML( | |
| "afterbegin", | |
| `<thead> | |
| <tr> | |
| <td>text</td> | |
| <td>emotion</td> | |
| </tr> | |
| </thead>` | |
| ); | |
| }; | |
| const imageGenSelect = document.getElementById("image-gen-input"); | |
| const imageGenImage = document.querySelector(".image-gen-output"); | |
| const textGenForm = document.querySelector(".text-gen-form"); | |
| const tableButtonPrev = document.querySelector(".table-previous"); | |
| const tableButtonNext = document.querySelector(".table-next"); | |
| let cursor = 0; | |
| const RANGE = 5; | |
| const LIMIT = 16_000; | |
| imageGenSelect.addEventListener("change", async (event) => { | |
| const value = event.target.value; | |
| try { | |
| imageGenImage.src = await textToImage(value); | |
| } catch (err) { | |
| console.error(err); | |
| } | |
| }); | |
| textGenForm.addEventListener("submit", async (event) => { | |
| event.preventDefault(); | |
| const textGenInput = document.getElementById("text-gen-input"); | |
| const textGenParagraph = document.querySelector(".text-gen-output"); | |
| try { | |
| textGenParagraph.textContent = await translateText(textGenInput.value); | |
| } catch (err) { | |
| console.error(err); | |
| } | |
| }); | |
| tableButtonPrev.addEventListener("click", () => { | |
| cursor = cursor > RANGE ? cursor - RANGE : 0; | |
| if (cursor < RANGE) { | |
| tableButtonPrev.classList.add("hidden"); | |
| } | |
| if (cursor < LIMIT - RANGE) { | |
| tableButtonNext.classList.remove("hidden"); | |
| } | |
| updateTable(cursor); | |
| }); | |
| tableButtonNext.addEventListener("click", () => { | |
| cursor = cursor < LIMIT - RANGE ? cursor + RANGE : cursor; | |
| if (cursor >= RANGE) { | |
| tableButtonPrev.classList.remove("hidden"); | |
| } | |
| if (cursor >= LIMIT - RANGE) { | |
| tableButtonNext.classList.add("hidden"); | |
| } | |
| updateTable(cursor); | |
| }); | |
| textToImage(imageGenSelect.value) | |
| .then((image) => (imageGenImage.src = image)) | |
| .catch(console.error); | |
| updateTable(cursor) | |
| .then((image) => (imageGenImage.src = image)) | |
| .catch(console.error); | |