File size: 1,933 Bytes
a4bef5f 3f5ec46 a4bef5f |
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 |
<!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>
|