|
|
<!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> |
|
|
|
