ml-frontend/index.html
2023-01-09 21:06:29 +08:00

99 lines
3.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Minified version -->
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
<title>Automated Garbage Segregation</title>
<style>
body {
grid-template-columns: 1fr min(75rem, 90%) 1fr;
}
body, html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#main {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 2fr;
}
#main > div {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
</style>
</head>
<body>
<div id="main" v-scope @mounted="mounted()" @unmounted="unmounted()">
<div id="image">
<img v-if="state =='put'" :src="placeholder" alt="placeholder">
<img v-else-if="state =='camera'" :src="loader" alt="loader">
<img v-else :src="imageUrl" alt="item">
</div>
<div id="status">
<h1>{{ status }}</h1>
</div>
</div>
<script src="https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js"></script>
<script>
let app = PetiteVue.createApp({
intervalId: -1,
pollingInterval: 500,
placeholder: "/static/scroll-down.gif",
loader: "/static/loader.gif",
imageUrl: "/photo",
type: "未知",
state: "put",
get status() {
let data = {
"put": "請放置垃圾",
"camera": "拍照中,請勿移動",
"identify": "辨識中",
"identified": this.type,
}
return data[this.state];
},
mounted() {
console.log("mounted");
if (this.intervalId < 0) this.intervalId = setInterval(() => { this.polling(); }, this.pollingInterval);
},
unmounted() {
console.log("unmounted");
if (this.intervalId >= 0) {
clearInterval(this.intervalId);
}
},
update(data) {
let state = data.state;
if (state == "identified") this.type = data.type;
this.state = state;
},
async polling() {
let res, data;
try {
res = await fetch("/poll");
data = await res.json();
} catch (error) {
console.error(error);
return;
}
this.update(data);
}
});
app.mount("#main");
</script>
</body>
</html>