| <!DOCTYPE html> |
| <html> |
|
|
| <head> |
| <style> |
| .container { |
| max-width: 768px; |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| margin: 0 auto; |
| } |
| |
| .color-picker { |
| position: sticky; |
| top: 20px; |
| height: 50px; |
| } |
| |
| .img-img { |
| width: 128px; |
| } |
| </style> |
|
|
| <script> |
| let mClient; |
| async function preload() { |
| const Gradio = await import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"); |
| mClient = await Gradio.Client.connect("visualizedata/PSAM5020-ColorSort-Gradio"); |
| document.getElementById("color-picker").dispatchEvent(new Event('change')); |
| } |
| preload(); |
| |
| const IMGS_URL = "https://raw.githubusercontent.com/PSAM-5020-2025F-A/5020-utils/main/datasets/image/flowers"; |
| |
| function orderImages(imageFiles) { |
| const container = document.getElementById('main-container'); |
| container.innerHTML = ""; |
| |
| imageFiles.forEach((fname, i) => { |
| const imgDivEl = document.createElement("div"); |
| imgDivEl.classList.add("img-container"); |
| container.appendChild(imgDivEl); |
| |
| const imgEl = document.createElement("img"); |
| imgEl.setAttribute("src", `${IMGS_URL}/${fname}`); |
| imgEl.classList.add("img-img"); |
| imgDivEl.appendChild(imgEl); |
| }); |
| } |
| |
| window.addEventListener("load", (event) => { |
| const colorEl = document.getElementById("color-picker"); |
| colorEl.addEventListener("change", async (event) => { |
| document.getElementById('main-container').innerHTML = "Loading..."; |
| const result = await mClient.predict("/order_by_color", { |
| center_color_str: event.target.value |
| }); |
| orderImages(result.data[0].files); |
| }); |
| }); |
| </script> |
| </head> |
|
|
| <body> |
| <input type="color" id="color-picker" class="color-picker" value="#fffffe"> |
| <div id="main-container" class="container"></div> |
| </body> |
|
|
| </html> |
|
|
