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 ( CS4185 Course Project
CS4185 Course Project
1. please select image here {/* */}
2. Most similar {hide_result ? (
{status_text}
 ) : ( {result["similar"].replace("public/", "")} )}
3. related {revalent_image_hit_pct}% {hide_result ? (
{status_text}
 ) : ( {result["revalent"].map((item, idx) => ( {item.replace("public/", "")} ))} )}
); } 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", ], };