320 lines
9.2 KiB
JavaScript
320 lines
9.2 KiB
JavaScript
import { Box, Card, Grid, Typography, Button } from "@mui/material";
|
|
import Head from "next/head";
|
|
import Image from "next/image";
|
|
import styled from "styled-components";
|
|
import * as React from "react";
|
|
import { useEffect, useState } from "react";
|
|
import Paper from "@mui/material/Paper";
|
|
|
|
import styles from "./index.css";
|
|
|
|
const PLEASE_SELECT_IMAGE = "please select a photo on the left";
|
|
const RUNNING = "running";
|
|
|
|
const HomeWrapper = styled.div`
|
|
${styles}
|
|
`;
|
|
|
|
const Item = styled(Paper)(({ theme }) => ({
|
|
backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
|
|
...theme.typography.body2,
|
|
padding: theme.spacing(1),
|
|
textAlign: "center",
|
|
color: theme.palette.text.secondary,
|
|
}));
|
|
|
|
export default function Home() {
|
|
const [result, setResult] = useState({ similar: "", revalent: [] });
|
|
const [revalent_image_hit_pct, setRevalentImageHitPct] = useState(1);
|
|
const [loading, setLoading] = useState(false);
|
|
const [hide_result, setHideResult] = useState(true);
|
|
const [status_text, setStatusText] = useState(PLEASE_SELECT_IMAGE);
|
|
const [disable_upload_button, setDisableUploadButton] = useState(true);
|
|
|
|
async function onSubmit(event) {
|
|
event.preventDefault();
|
|
setLoading(true);
|
|
setStatusText(RUNNING);
|
|
setHideResult(true);
|
|
setDisableUploadButton(true);
|
|
|
|
const formData = new FormData(event.currentTarget);
|
|
|
|
await fetch("http://localhost:5000/uploader", {
|
|
method: "POST",
|
|
body: formData,
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res_json) => {
|
|
setResult(res_json);
|
|
setLoading(false);
|
|
setHideResult(false);
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (result != {}) {
|
|
let j = 0;
|
|
let len_revalent = result["revalent"].length;
|
|
for (let i = 0; i < len_revalent; i++) {
|
|
let first_char = result["revalent"][i].replace("public/", "")[0];
|
|
let expected_category = result["image_to_test"][0];
|
|
console.log(expected_category);
|
|
console.log(result["image_to_test"]);
|
|
|
|
if (first_char == expected_category) j += 1;
|
|
}
|
|
setRevalentImageHitPct(j);
|
|
}
|
|
}, [result]);
|
|
|
|
return (
|
|
<HomeWrapper>
|
|
<Head>
|
|
<title>CS4185 Course Project</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
|
|
<main className="main" style={{ justifyContent: "flex-start" }}>
|
|
<Box sx={{ marginTop: "1rem", marginBottom: "1rem" }}>
|
|
<Typography variant={"h4"}>CS4185 Course Project</Typography>
|
|
</Box>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} md={4}>
|
|
<Item elevation={0}>
|
|
<form onSubmit={onSubmit}>
|
|
<Box>
|
|
<Typography variant={"h6"}>
|
|
1. please select image here
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{ marginTop: "1rem" }}>
|
|
<Button
|
|
variant="contained"
|
|
component="label"
|
|
disabled={loading}
|
|
>
|
|
Select image
|
|
<input
|
|
type="file"
|
|
name="file"
|
|
hidden
|
|
onChange={(e) => {
|
|
if (e.target.files[0]) {
|
|
setDisableUploadButton(false);
|
|
}
|
|
}}
|
|
/>
|
|
</Button>
|
|
</Box>
|
|
<Box sx={{ marginTop: "1rem" }}>
|
|
{/* <button type="submit">Submit</button> */}
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
disabled={disable_upload_button}
|
|
>
|
|
Upload
|
|
</Button>
|
|
</Box>
|
|
</form>
|
|
</Item>
|
|
</Grid>
|
|
<Grid item xs={12} md={4}>
|
|
<Item elevation={0}>
|
|
<div>
|
|
<Typography variant="h5">2. Most similar</Typography>
|
|
<Box sx={{ marginTop: "1rem" }}>
|
|
{hide_result ? (
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
minHeight: "150px",
|
|
display: "inline-flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div>{status_text}</div>
|
|
</Box>
|
|
) : (
|
|
<Grid item xs={12}>
|
|
<Item
|
|
sx={{
|
|
backgroundImage:
|
|
"url(" +
|
|
"http://localhost:5000/" +
|
|
result["similar"] +
|
|
")",
|
|
backgroundPosition: "center",
|
|
backgroundSize: "contain",
|
|
backgroundRepeat: "no-repeat",
|
|
width: "100%",
|
|
minHeight: "500px",
|
|
}}
|
|
elevation={1}
|
|
></Item>
|
|
<Box>{result["similar"].replace("public/", "")}</Box>
|
|
</Grid>
|
|
)}
|
|
</Box>
|
|
</div>
|
|
</Item>
|
|
</Grid>
|
|
<Grid item xs={12} md={4}>
|
|
<Item elevation={0}>
|
|
<Typography variant="h5">
|
|
3. related {revalent_image_hit_pct}%
|
|
</Typography>
|
|
<Box sx={{ marginTop: "1rem" }}>
|
|
{hide_result ? (
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
minHeight: "150px",
|
|
display: "inline-flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div>{status_text}</div>
|
|
</Box>
|
|
) : (
|
|
<Box sx={{ flexGrow: 1 }}>
|
|
<Grid container spacing={2}>
|
|
{result["revalent"].map((item, idx) => (
|
|
<Grid item key={idx} xs={4}>
|
|
<Item
|
|
sx={{
|
|
backgroundImage: `url(http://localhost:5000/${item})`,
|
|
backgroundPosition: "center",
|
|
backgroundSize: "contain",
|
|
backgroundRepeat: "no-repeat",
|
|
//
|
|
width: "100%",
|
|
minHeight: "150px",
|
|
}}
|
|
elevation={1}
|
|
></Item>
|
|
<Box>{item.replace("public/", "")}</Box>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Item>
|
|
</Grid>
|
|
</Grid>
|
|
</main>
|
|
|
|
<footer className="footer"></footer>
|
|
</HomeWrapper>
|
|
);
|
|
}
|
|
|
|
const test_json = {
|
|
similar: "public/654.jpg",
|
|
revalent: [
|
|
"public/695.jpg",
|
|
"public/640.jpg",
|
|
"public/648.jpg",
|
|
"public/641.jpg",
|
|
"public/693.jpg",
|
|
"public/644.jpg",
|
|
"public/698.jpg",
|
|
"public/670.jpg",
|
|
"public/639.jpg",
|
|
"public/703.jpg",
|
|
"public/72.jpg",
|
|
"public/657.jpg",
|
|
"public/650.jpg",
|
|
"public/652.jpg",
|
|
"public/687.jpg",
|
|
"public/20.jpg",
|
|
"public/674.jpg",
|
|
"public/666.jpg",
|
|
"public/697.jpg",
|
|
"public/67.jpg",
|
|
"public/643.jpg",
|
|
"public/672.jpg",
|
|
"public/683.jpg",
|
|
"public/25.jpg",
|
|
"public/653.jpg",
|
|
"public/663.jpg",
|
|
"public/719.jpg",
|
|
"public/655.jpg",
|
|
"public/710.jpg",
|
|
"public/660.jpg",
|
|
"public/673.jpg",
|
|
"public/190.jpg",
|
|
"public/700.jpg",
|
|
"public/671.jpg",
|
|
"public/691.jpg",
|
|
"public/677.jpg",
|
|
"public/676.jpg",
|
|
"public/679.jpg",
|
|
"public/665.jpg",
|
|
"public/229.jpg",
|
|
"public/26.jpg",
|
|
"public/696.jpg",
|
|
"public/668.jpg",
|
|
"public/237.jpg",
|
|
"public/662.jpg",
|
|
"public/238.jpg",
|
|
"public/221.jpg",
|
|
"public/195.jpg",
|
|
"public/688.jpg",
|
|
"public/267.jpg",
|
|
"public/266.jpg",
|
|
"public/255.jpg",
|
|
"public/716.jpg",
|
|
"public/704.jpg",
|
|
"public/680.jpg",
|
|
"public/204.jpg",
|
|
"public/659.jpg",
|
|
"public/259.jpg",
|
|
"public/70.jpg",
|
|
"public/711.jpg",
|
|
"public/206.jpg",
|
|
"public/7.jpg",
|
|
"public/230.jpg",
|
|
"public/271.jpg",
|
|
"public/720.jpg",
|
|
"public/701.jpg",
|
|
"public/707.jpg",
|
|
"public/219.jpg",
|
|
"public/202.jpg",
|
|
"public/193.jpg",
|
|
"public/248.jpg",
|
|
"public/239.jpg",
|
|
"public/705.jpg",
|
|
"public/233.jpg",
|
|
"public/708.jpg",
|
|
"public/241.jpg",
|
|
"public/21.jpg",
|
|
"public/272.jpg",
|
|
"public/198.jpg",
|
|
"public/251.jpg",
|
|
"public/243.jpg",
|
|
"public/249.jpg",
|
|
"public/192.jpg",
|
|
"public/270.jpg",
|
|
"public/277.jpg",
|
|
"public/22.jpg",
|
|
"public/242.jpg",
|
|
"public/727.jpg",
|
|
"public/725.jpg",
|
|
"public/678.jpg",
|
|
"public/709.jpg",
|
|
"public/19.jpg",
|
|
"public/232.jpg",
|
|
"public/236.jpg",
|
|
"public/658.jpg",
|
|
"public/694.jpg",
|
|
"public/261.jpg",
|
|
"public/205.jpg",
|
|
"public/263.jpg",
|
|
],
|
|
};
|