alv.cx-glass/index.html

54 lines
1.5 KiB
HTML
Raw Normal View History

2023-12-27 23:36:47 +00:00
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://alv.cx/styles.css" />
<title>glass | alv.cx</title>
</head>
<body>
<h1>find glass in an image!</h1>
2023-12-27 23:26:15 +00:00
<img id="img" src="" />
<p id="statusline">submit an image to get started!</p>
2023-12-27 23:59:40 +00:00
<form id="form" action="https://glass.alv.cx/submit" method="post">
2023-12-27 23:26:15 +00:00
<input type="file" id="job" name="image" accept="image/png,image/jpeg" /><br>
<button type="submit" id="submit">submit</button>
</form>
2023-12-27 23:36:47 +00:00
<p> built with ❤ and adequate amounts of care by <a href="https://alv.cx">alv</a></p>
2023-12-27 23:26:15 +00:00
<script>
const form = document.getElementById("form");
const img = document.getElementById("img");
const statusline = document.getElementById("statusline");
async function handleSubmit(ev) {
2023-12-27 23:36:47 +00:00
statusline.innerHTML = "SUBMITTING"
2023-12-27 23:26:15 +00:00
ev.preventDefault();
const form = ev.currentTarget;
const data = new FormData(form);
const url = form.action;
const fetchOptions = {
method: form.method,
body: data
}
const resp = await fetch(url, fetchOptions);
const id = (await resp.json()).id;
console.log(id);
while (true) {
2023-12-27 23:59:40 +00:00
const resp = await fetch('https://glass.alv.cx/state/' + id);
2023-12-27 23:26:15 +00:00
const state = (await resp.json()).state;
statusline.innerHTML = state;
if (state == "READY") {
2023-12-27 23:59:40 +00:00
img.src = 'https://glass.alv.cx/result/' + id
2023-12-27 23:26:15 +00:00
return;
}
}
}
form.addEventListener('submit', handleSubmit)
</script>
2023-12-27 23:36:47 +00:00
</body>