Merge pull request #14 from gohdong/woowang_feat_#5

Woowang feat #5

back/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+checks/*

back/package.json

@@ -19,6 +19,7 @@
     "@types/express": "^4.17.13",
     "@types/multer": "^1.4.7",
     "@types/mysql": "^2.15.21",
+    "cors": "^2.8.5",
     "express": "^4.17.3",
     "multer": "^1.4.4",
     "mysql": "^2.18.1"

back/run_tf_model/test.js

@@ -54,18 +54,20 @@ sub2.set("female", "gender");
 sub2.set("unisex", "gender");
 
 // male", "female", "unisex
-
-var res = new Map();
-res.set("top", { value: 0, subcate: [] })
-res.set("bottom", { value: 0, subcate: [] })
-res.set("one", { value: 0, subcate: [] })
-res.set("outer", { value: 0, subcate: [] })
-res.set("shoes", { value: 0, subcate: [] })
-res.set("acc", { value: 0, subcate: [] })
-res.set("bag", { value: 0, subcate: [] })
-
-res.set('gender', { value: 0, subcate: [] });
-res.set("color", { value: 0, subcate: [] });
+function createRes() {
+	var res = new Map();
+	res.set("top", { value: 0, subcate: [] })
+	res.set("bottom", { value: 0, subcate: [] })
+	res.set("one", { value: 0, subcate: [] })
+	res.set("outer", { value: 0, subcate: [] })
+	res.set("shoes", { value: 0, subcate: [] })
+	res.set("acc", { value: 0, subcate: [] })
+	res.set("bag", { value: 0, subcate: [] })
+
+	res.set('gender', { value: 0, subcate: [] });
+	res.set("color", { value: 0, subcate: [] });
+	return res;
+}
 
 
 
@@ -93,7 +95,7 @@ function processImage(path) {
 function toJson(data) {
 	var ob = new Object();
 
-	var map = new Map(res);
+	var map = createRes();
 
 	for (let [index, element] of data.entries()) {
 		if (main.includes(classes[index])) {
@@ -119,14 +121,15 @@ function toJson(data) {
 	// console.log(map)
 	// ob.probs = arr;
 	ob.probs = [];
-	new Array(map).sort((a, b) => -1 * (a.value - b.vlaue));
+	new Array(map).sort((a, b) => -1.0 * (a.value - b.value));
 	map.forEach((value, key) => {
-		value.subcate.sort((a, b) => -1 * (a.value - b.value));
+		value.subcate.sort((a, b) => -1.0 * (a.value - b.value));
 		ob.probs.push({
 			"class": key,
 			"value": value.value,
 			"subcate": value.subcate
 		})
+		console.log
 	})
 
 	return ob;

back/src/index.ts

@@ -4,29 +4,36 @@ import path from "path";
 import {createConnection} from "mysql"
 import {excuteModel} from "../run_tf_model/test"
 
+const cors = require('cors');
+const corsOptions = {
+  origin: "http://localhost:3000",
+  credentials: true
+}
+
 class App {
-  public application : express.Application;
-  constructor(){
+  public application: express.Application;
+  constructor() {
     this.application = express();
   }
 }
 const con = createConnection({
-  host     : '127.0.0.1',
-  user     : 'root',
-  password : 'Xptmxm1212!@',
-  database : 'clothes_tag'
+  host: '127.0.0.1',
+  user: 'root',
+  password: 'Xptmxm1212!@',
+  database: 'clothes_tag'
 });
 
 const app = new App().application;
 app.use(express.json());
-app.use(express.urlencoded({ extended: true}));
+app.use(express.urlencoded({extended: true}));
 
 
-app.get("/",(req : express.Request , res : express.Response) =>{
+app.get("/", (req: express.Request, res: express.Response) => {
+  res.header("Access-Control-Allow-Origin", "*");
   res.send("server start");
 })
 
-const check =  multer({
+const check = multer({
   storage: multer.diskStorage({
     destination: function (req, file, cb) {
       cb(null, 'checks/');
@@ -37,14 +44,16 @@ const check =  multer({
   }),
 });
 
-app.post('/check', check.single('img'), async(req, res) => {  //유저가 사진을 보내면 판단후 리턴
-  console.log(req.file); 
+app.post('/check', check.single('img'), async (req, res) => {  //유저가 사진을 보내면 판단후 리턴
+  res.header("Access-Control-Allow-Origin", "*");
+  console.log(req.body);
   let file = req.file;
   var tmp = await excuteModel(file?.path);
+  console.log(tmp);
   res.json(tmp);
 });
 
-const upload =  multer({
+const upload = multer({
   storage: multer.diskStorage({
     destination: function (req, file, cb) {
       cb(null, 'uploads/');
@@ -54,7 +63,8 @@ const upload =  multer({
     }
   }),
 });
-app.post('/upload', upload.single('img'), async(req, res) => {  //유저가 태그를 수정하고 업로드하면 다시 저장
+app.post('/upload', upload.single('img'), async (req, res) => {  //유저가 태그를 수정하고 업로드하면 다시 저장
+  res.header("Access-Control-Allow-Origin", "*");
   console.log(req.file);
   let file = req.file;
   console.log(req.body['tags'])
@@ -70,5 +80,5 @@ app.post('/upload', upload.single('img'), async(req, res) => {  //유저가 태
 });
 
 
-
-app.listen(4000,()=>console.log("start"));
+app.use(cors(corsOptions));
+app.listen(4000, () => console.log("start"));

front/src/left_sidebar/LeftSidebar.tsx

@@ -21,7 +21,7 @@ export default function LeftSidebar() {
 
 		result.addEventListener("change", ev => {
 			ev.preventDefault();
-			const tempFiles:File[] = [];
+			const tempFiles: File[] = [];
 
 
 			Array.prototype.forEach.call(result.files, file => {
@@ -44,7 +44,7 @@ export default function LeftSidebar() {
 		};
 	}
 
-	function clickItem(id:string) {
+	function clickItem(id: string) {
 		return () => {
 			setCurrentID(id);
 		};
@@ -63,7 +63,7 @@ export default function LeftSidebar() {
 					<div id="left-sidebar-item-wrapper">
 						{Array.from(images).map((value, index) =>
 							<div key={value[1].id} className={`left-sidebar-item ${value[1].id === currentID ? "selected-item" : ""}`} onClick={clickItem(value[0])}>
-								<img src={URL.createObjectURL(value[1].file)} alt={`uploaded_image_${index}`}/>
+								<img src={URL.createObjectURL(value[1].file)} alt={`uploaded_image_${index}`} />
 								<p className="item-title">{value[1].file.name}</p>
 							</div>,
 						)}

front/src/main/MainContents.tsx

@@ -1,5 +1,5 @@
 import {useDropzone} from "react-dropzone";
-import React, {useCallback} from "react";
+import {useCallback} from "react";
 import {useRecoilState, useRecoilValue} from "recoil";
 import {Image, imagesSizeState, imageState, selectedItemID} from "../recoil/imageState";
 import "./MainContents.scss";
@@ -19,12 +19,44 @@ export function onDropHandler(images: Map<string, Image>,
 
 			const tempMap = new Map<string, Image>();
 
+			const modelResultTag = new Map();
+			const modelProbs = new Map();
+			const formData = new FormData();
+			let check = false;
+
+			formData.append("img", item);
+			fetch("http://localhost:4000/check", {
+				method: "POST",
+				body: formData,
+			})
+				.then(response => response.json())
+				.then(data => {
+					for (let i = 0; i < data.probs.length; i++) {
+						modelProbs.set(data.probs[i].class, new Map());
+						for (let j = 0; j < data.probs[i].subcate.length; j++) {
+							modelProbs.get(data.probs[i].class).set(data.probs[i].subcate[j].class,
+								data.probs[i].subcate[j].value);
+						}
+						if (data.probs[i].class === "gender") {
+							modelResultTag.set("gender", data.probs[i].subcate[0].class);
+						} else if (data.probs[i].class === "color") {
+							modelResultTag.set("color", data.probs[i].subcate[0].class);
+						} else if (!check) {
+							modelResultTag.set(data.probs[i].class, data.probs[i].subcate[0].class === null ? "" : data.probs[i].subcate[0].class);
+							check = true;
+						}
+					}
+					console.log(modelResultTag);
+					/* 콘솔에 표시 */
+				});
+
 			tempMap.set(fileID, {
 				id: fileID,
 				file: item,
 				edited: false,
 				usersTag: [],
-				modelResultTag: [],
+				modelResultTag,
+				modelProbs,
 			});
 
 			setImages((prev: Map<string, Image>) => new Map<string, Image>(
@@ -56,14 +88,14 @@ export default function MainContents() {
 
 	return (
 		<div id="main-contents" className={isDragActive ? "drag-on" : ""} {...getRootProps()}>
-			<input {...getInputProps()}/>
+			<input {...getInputProps()} />
 			<>
 				{
 					imagesCount > 0 && images.has(currentItemID) ?
 						<div id="main-contents-wrap">
 							<img src={
 								URL.createObjectURL(images.get(currentItemID)!.file)
-							} alt=""/>
+							} alt="" />
 							<div id="category-area">
 								<ul>
 									<li>대분류</li>
@@ -75,7 +107,7 @@ export default function MainContents() {
 						</div> :
 						<>
 							<div id="placeholder">
-								<div/>
+								<div />
 							</div>
 							{
 								isDragActive ?

front/src/recoil/imageState.tsx

@@ -2,11 +2,12 @@ import {atom, selector} from "recoil";
 
 
 export interface Image {
-	id:string,
+	id: string,
 	file: File,
-	edited : boolean,
-	usersTag : Array<String>,
-	modelResultTag : Array<String>,
+	edited: boolean,
+	usersTag: Array<String>,
+	modelResultTag: Map<String, String>,
+	modelProbs: Map<String, Map<String, Number>>,
 }
 
 

front/src/right_sidebar/RightSideBar.tsx

@@ -1,14 +1,33 @@
-import React from "react";
 import {useRecoilValue} from "recoil";
 import "./RightSideBar.scss";
 import {sidebarState} from "../recoil/sidebarState";
+import {imageState, selectedItemID} from "../recoil/imageState";
+
+export function convertValue(data: Map<String, Map<String, Number>> | undefined) {
+	if (data === undefined) return null;
+	return (
+		<div>
+			{Array.from(data).map(([mainKey, mainValue], i) => (
+				<div key={i}>
+					<p>{mainKey}</p>
+					<ul>{Array.from(mainValue).map(([subKey, subValue], j) => (
+						<li key={j}>{subKey} : {subValue}</li>
+					))}</ul>
+				</div>
+			))}
+		</div>
+	);
+}
 
 export default function RightSideBar() {
 	const isSideBarOpen = useRecoilValue(sidebarState);
-
+	const currentItemID = useRecoilValue(selectedItemID);
+	const images = useRecoilValue(imageState);
 
 	return (
 		<div id="right-sidebar" className={isSideBarOpen ? "right-sidebar-on" : "right-sidebar-off"}>
+			{convertValue(images.get(currentItemID)?.modelProbs)}
 		</div>
 	);
 }
+