From 348e8e23f5dfe58d8eefada5be9c65bdfaefa19d Mon Sep 17 00:00:00 2001 From: huyt Date: Tue, 11 Jan 2022 09:28:18 +0700 Subject: [PATCH] hoan thien search image --- app/src/App.css | 24 ++- app/src/components/SearchImg/SearchImage.js | 181 +++++++------------- 2 files changed, 83 insertions(+), 122 deletions(-) diff --git a/app/src/App.css b/app/src/App.css index 476589c..33ac719 100644 --- a/app/src/App.css +++ b/app/src/App.css @@ -317,4 +317,26 @@ button.close:hover { .carousel-control-next-icon, .carousel-control-prev-icon { background-image: none; -} \ No newline at end of file +} + +.ant-image-mask-info { + display: none; +} + +.percent-simular, .input-percent { + position: relative; + display: block; + +} + +.percent-simular::after { + content: '' attr(data-input); + position: absolute; + top: 6px; + left: 33px; + font-family: arial, helvetica, sans-serif; + font-size: 12px; + display: block; + color: rgba(0, 0, 0, 0.6); + font-weight: bold; +} diff --git a/app/src/components/SearchImg/SearchImage.js b/app/src/components/SearchImg/SearchImage.js index dc8e250..3d44e56 100644 --- a/app/src/components/SearchImg/SearchImage.js +++ b/app/src/components/SearchImg/SearchImage.js @@ -1,27 +1,13 @@ -import React, { Component } from 'react'; -import swal from 'sweetalert'; -import { Redirect } from 'react-router-dom'; -import $ from 'jquery'; -import Pagination from "react-js-pagination"; -import moment from 'moment'; -import { Row, Col, Image, ProgressBar } from 'react-bootstrap'; -import { PulseLoader } from 'react-spinners'; -// import { css } from '@emotion/core'; -import DatePicker from "react-datepicker"; -import "react-datepicker/dist/react-datepicker.css"; -// import ReactTooltip from 'react-tooltip' -import ReactFileReader from 'react-file-reader'; +import { Card, Image as ImageAntd } from 'antd'; import Parser from 'html-react-parser'; +import $ from 'jquery'; +import React, { Component } from 'react'; +import "react-datepicker/dist/react-datepicker.css"; +import ReactFileReader from 'react-file-reader'; +import Pagination from "react-js-pagination"; +import { PulseLoader } from 'react-spinners'; +import swal from 'sweetalert'; import { HOST } from '../../config/index'; -import { Card, Avatar, Image as ImageAntd } from 'antd'; -import { UserOutlined } from '@ant-design/icons'; -// import ModalViewHistory from '../../modal/ModalViewHistory'; - -// const override = css` -// display: block; -// margin: 0 auto; -// border-color: red; -// `; class SearchImage extends Component { @@ -29,9 +15,6 @@ class SearchImage extends Component { super(props); this.state = { - // isLogin: Store.getState().isLogin.isLogin, - // access_token: Store.getState().isLogin.access_token, - // box_engine_cf: Store.getState().boxai.box_engine_cf[0], loading: false, listHistory: [], crrHistory: [], @@ -40,9 +23,7 @@ class SearchImage extends Component { page_num: 1, page_size: 10, total_count: 0, - // startDate: new Date(moment().format("YYYY-MM-DD") + ' 00:00:00'), - // endDate: new Date(moment().format("YYYY-MM-DD") + ' 23:59:59'), - valueRes: 1, + valueRes: 100, threshold: 50, similarity: 70, value: 0, @@ -52,8 +33,6 @@ class SearchImage extends Component { encodings: [], plugins: [], nimages: [], - startDate: new Date(), - endDate: new Date(), showModal: false, crrdatainfo: null, offset: 0, @@ -71,33 +50,6 @@ class SearchImage extends Component { itemsPerPage = 6 } this.itemsPerPage = itemsPerPage; - // Store.subscribe(() => { - // if (Store.getState().boxai.box_engine_cf.length !== 0) { - // this.setState({ - // ...this.state, - // loading: false, - // valueRes: 1, - // listHistory: [], - // crrHistory: [], - // // isLogin: Store.getState().isLogin.isLogin, - // // access_token: Store.getState().isLogin.access_token, - // // box_engine_cf: Store.getState().boxai.box_engine_cf[0], - // dataImageMoveChange: null, - // }); - // } else { - // this.setState({ - // ...this.state, - // loading: false, - // valueRes: 1, - // listHistory: [], - // crrHistory: [], - // // isLogin: Store.getState().isLogin.isLogin, - // // access_token: Store.getState().isLogin.access_token, - // // box_engine_cf: Store.getState().boxai.box_engine_cf[0], - // dataImageMoveChange: null, - // }); - // } - // }); } componentDidMount() { @@ -130,37 +82,25 @@ class SearchImage extends Component { handlePrevChange() { var index = this.state.value; index = index - 1 - if (index > 0) + if (index >= 0) this.setState({ - pageNumber: 1, value: index, selectedEncoding: this.state.encodings[index], - - }, () => { - this.getPerson() }) - - } handleNextChange() { var index = this.state.value; if (index < (this.state.encodings.length - 1)) index = index + 1 this.setState({ - pageNumber: 1, value: index, selectedEncoding: this.state.encodings[index], - - }, () => { - this.getPerson() }) } changeFace(index) { - this.setState({ - pageNumber: 1, value: index, selectedEncoding: this.state.encodings[index], @@ -172,7 +112,6 @@ class SearchImage extends Component { getPerson() { - // if (this.state.box_engine_cf === undefined || !this.state.filesImagePerson) return; if (!this.state.valueRes || !this.state.threshold) { return swal('Cảnh báo!', 'Vui lòng điền đầy đủ các trường', 'warning'); } @@ -196,7 +135,6 @@ class SearchImage extends Component { }).then((response) => { return response.json() }).then((rs) => { - console.log(rs) if (rs.status === 10000) { var data = rs.data; this.setState({ @@ -205,13 +143,29 @@ class SearchImage extends Component { // total_count: rs.count, }); this.FilterSearch(this.state.page_num) - } - else { + } else if (rs.status === 10003) { + if (rs.message === 'No face in image') { + swal("Lỗi", "Ảnh không có khuôn mặt!", "error"); + } else if (rs.message === 'Too many face') { + swal("Lỗi", "Ảnh có quá nhiều khuôn mặt!", "error"); + } else { + swal("Lỗi", "Ảnh không đạt yêu cầu!", "error"); + } + this.setState({ + listHistory: [], + loading: false, + }); + } else if (rs.status === 10002) { + swal("Lỗi", "Lỗi hệ thống!", "error"); + this.setState({ + listHistory: [], + loading: false, + }); + } else { swal("Lỗi!", "Ảnh không hợp lệ!", "error"); this.setState({ listHistory: [], loading: false, - total_count: 0, }); } }).catch((error) => { @@ -249,7 +203,6 @@ class SearchImage extends Component { }).then((rs) => { if (rs.status === 10000) { var boxs = [] - var slides = [] var item = "" var encodings = [] rs.imgs.map((value, index) => { @@ -267,7 +220,6 @@ class SearchImage extends Component { else if (index % 2 === 0) { item += "
" } - console.log("index % 2", index % 2) if (index !== 0 && (index % 2 === 0)) { item += "" @@ -278,7 +230,6 @@ class SearchImage extends Component { } item = item_active - var id_image = "img_" + index boxs.push(rs.boxes[index]) encodings.push(rs.encodings[index]) }); @@ -291,7 +242,7 @@ class SearchImage extends Component { listHistory: [], nimages: rs.imgs, total_count: 0, - + page_num: 1, numbershow: (rs.imgs.length > 3 ? 3 : rs.imgs.length), }, () => { if (this.state.encodings.length === 1) { @@ -307,7 +258,6 @@ class SearchImage extends Component { this.changeFace(0) }) - //console.log("numbershow", this.state.numbershow) } else { swal("Lỗi!", "Ảnh không hợp lệ!", "error"); @@ -334,7 +284,10 @@ class SearchImage extends Component { document.getElementById('previewImagePerson').src = files.base64; this.setState({ filesImagePerson: files.base64, + crrHistory: [], + nimages: [], loading: false, + totalLength: 0, plugins: [] }); this.getFaces(); @@ -343,33 +296,22 @@ class SearchImage extends Component { isChangeRes = (event) => { this.setState({ - // listHistory: [], - // loading: true, - pageNumber: 1, valueRes: event.target.value, - }, () => { - //this.getPerson() }) } isChangeThreshold = (event) => { + let val = event.target.value + let maxLength = 3 + let newValue = val < maxLength ? val : parseInt(val.toString().substring(0, maxLength)); this.setState({ - // listHistory: [], - // loading: true, - pageNumber: 1, - threshold: event.target.value, - }, () => { - //this.getPerson() + threshold: newValue, }) } FilterSearch = (activePage) => { const offset = (activePage - 1) * this.itemsPerPage; - console.log(offset) - console.log(offset + this.itemsPerPage) - - console.log("base",this.state.listHistory) const crrHistory = this.state.listHistory.slice(offset, offset + this.itemsPerPage); this.setState({ @@ -384,7 +326,6 @@ class SearchImage extends Component { handlePageChange = (pageNumber) => { this.setState({ ...this.state, - // loading: true, page_num: pageNumber, }, () => { this.FilterSearch(pageNumber); @@ -428,18 +369,25 @@ class SearchImage extends Component { let bulletedImg = this.state.crrHistory.map((value, index) => { + let layoutImg = "col-md-4" + if ($(window).width() >= 1400 && $(window).width() < 1750) { + layoutImg = "col-md-4" + } else if ($(window).width() <= 1280 ) { + layoutImg = "col-md-4" + } else { + layoutImg = "col-md-3" + } return ( -
+
} cover={} > -

facebookID: {value.person_id}

+

facebookID: {value.person_id}

ImageID: {value.image_id}
@@ -466,14 +414,13 @@ class SearchImage extends Component {
- - {/*
*/} +
@@ -506,11 +453,11 @@ class SearchImage extends Component { Tỷ lệ giống: - - this.isChangeThreshold(event)} aria-controls="m_table_1" /> - + @@ -539,7 +486,8 @@ class SearchImage extends Component {
-
+
+
+
+
+
Tổng kết quả {this.state.totalLength}
+
+
{bulletedImg}
- {/*
- -
*/} - {/* */}