54 lines
1.5 KiB
HTML
54 lines
1.5 KiB
HTML
<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>
|
|
<img id="img" src="" />
|
|
|
|
<p id="statusline">submit an image to get started!</p>
|
|
<form id="form" action="https://glass.alv.cx/submit" method="post">
|
|
<input type="file" id="job" name="image" accept="image/png,image/jpeg" /><br>
|
|
<button type="submit" id="submit">submit</button>
|
|
</form>
|
|
|
|
<p> built with ❤ and adequate amounts of care by <a href="https://alv.cx">alv</a></p>
|
|
|
|
<script>
|
|
const form = document.getElementById("form");
|
|
const img = document.getElementById("img");
|
|
const statusline = document.getElementById("statusline");
|
|
|
|
async function handleSubmit(ev) {
|
|
statusline.innerHTML = "SUBMITTING"
|
|
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) {
|
|
const resp = await fetch('https://glass.alv.cx/state/' + id);
|
|
const state = (await resp.json()).state;
|
|
statusline.innerHTML = state;
|
|
if (state == "READY") {
|
|
img.src = 'https://glass.alv.cx/result/' + id
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
form.addEventListener('submit', handleSubmit)
|
|
</script>
|
|
</body>
|