hoan thien search image

app/src/App.css

@@ -318,3 +318,25 @@ button.close:hover {
 .carousel-control-next-icon, .carousel-control-prev-icon {
   background-image: none;
 }
+
+.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;
+}

app/src/components/SearchImg/SearchImage.js

@@ -1,27 +1,13 @@
-import React, { Component } from 'react';
+import { Card, Image as ImageAntd } from 'antd';
-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 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'),
+            valueRes: 100,
-            // endDate: new Date(moment().format("YYYY-MM-DD") + ' 23:59:59'),
-            valueRes: 1,
             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 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");
                 }
-            else {
+                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 += "<div class='carousel-item pt-3'>"
                     }
-                    console.log("index % 2", index % 2)
                     if (index !== 0 && (index % 2 === 0)) {
                         item += "<img style='margin-left: 5px;width: 75px; opacity: 1;cursor: pointer;' src=" + `data:image/png;base64,${value} ` + " />"
 
@@ -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: [],
+            threshold: newValue,
-            // loading: true,
-            pageNumber: 1,
-            threshold: event.target.value,
-        }, () => {
-            //this.getPerson()
         })
     }
 
 
     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 (
-                <div className="col-md-4 mb-4">
+                <div className={`${layoutImg} mb-4`}>
                     <Card
                         style={{ width: 300 }}
-                        // cover={<img style={{ height: '250px' }} alt="example" src={value.image_url} />}
                         cover={<ImageAntd
+                            style={{ objectFit: 'contain', maxHeight: '200px'}}
                             // width={200}
-                            preview={false}
                             src={value.image_url} 
                           />}
                     >
-                        <p style={{wordWrap: "break-word"}}><strong>facebookID: </strong>{value.person_id}</p>
+                        <p style={{wordWrap: "break-word", marginBottom: "0px"}}><strong>facebookID: </strong>{value.person_id}</p>
                         <p style={{wordWrap: "break-word"}}><strong>ImageID: </strong>{value.image_id}</p>
                     </Card>
                 </div>
@@ -466,14 +414,13 @@ class SearchImage extends Component {
                             <div className="m-form m-form--fit m-form--label-align-right">
                                 <div className="row m-0">
                                     <div className="col-md-2 px-0">
-                                        <img src="./img/photo-placeholder.png" id="previewImagePerson" className="text-center" height="350px" width='100%' alt="" />
+                                        <img src="./img/photo-placeholder.png" id="previewImagePerson" className="text-center" style={{width: '100%', height: 'auto'}} alt="" />
-                                        {/* <div style={this.state.outline}></div> */}
                                         <div className="text-center p-8">
                                             <ReactFileReader fileTypes={['image/png', 'image/jpg', 'image/jpeg']} base64={true} multipleFiles={false} handleFiles={this.onFilesChangeImagePerson}  >
                                                 <button style={{ marginTop: '10px' }} className={'btn m-btn--icon m-btn btn-default m-loader--success m-loader--right'}>
                                                     <span >
                                                         <i className="la la-cloud-upload"></i>
-                                                        <span>Tải lên ảnh chân dung</span>
+                                                        <span>Chọn ảnh</span>
                                                     </span>
                                                 </button>
                                             </ReactFileReader>
@@ -506,11 +453,11 @@ class SearchImage extends Component {
                                                         <tr>
                                                             <td>
                                                                 <span>Tỷ lệ giống:</span>
-
                                                             </td>
                                                             <td>
-                                                                <input className="form-control form-control-sm" type="number" min="1" max="100" step="1" name="m_table_1_length" value={this.state.threshold} onChange={(event) => this.isChangeThreshold(event)} aria-controls="m_table_1" />
+                                                                <label className="percent-simular" data-input="%">
-
+                                                                <input className="input-percent form-control form-control-sm" type="number" min="1" max="100" step="1" name="m_table_1_length" value={this.state.threshold} onChange={(event) => this.isChangeThreshold(event)} aria-controls="m_table_1" />
+                                                                </label>
                                                             </td>
                                                         </tr>
                                                     </tbody>
@@ -539,7 +486,8 @@ class SearchImage extends Component {
 
                                     </div>
                                     <div className="col-md-10">
-                                        <div className="pl-2 row">
+                                        <div className="pl-2 row d-flex justify-content-between">
+                                            <div>
                                             <Pagination
                                                 prevPageText='Trang trước'
                                                 nextPageText='Trang sau'
@@ -552,6 +500,11 @@ class SearchImage extends Component {
                                                 onChange={this.handlePageChange}
                                             />
                                             </div>
+                                             <div className="pull-right">
+                                                <div>Tổng kết quả <b>{this.state.totalLength}</b></div>
+                                            </div>
+                                        </div>
+                                       
                                         <div className='row-sm row pl-3 pr-3 pb-3'>
                                             {bulletedImg}
                                             <PulseLoader
@@ -564,20 +517,6 @@ class SearchImage extends Component {
                                             />
                                         </div>
 
-                                        {/* <div className="hide_desktop pl-2" style={{ 'paddingBottom': '50px' }}>
-                                            <Pagination
-                                                prevPageText='Trang trước'
-                                                nextPageText='Trang sau'
-                                                firstPageText='Trang đầu'
-                                                lastPageText='Trang cuối'
-                                                activePage={this.state.page_num}
-                                                itemsCountPerPage={this.state.page_size}
-                                                totalItemsCount={this.state.total_count}
-                                                pageRangeDisplayed={pageRangeDisplayed}
-                                                onChange={this.handlePageChange}
-                                            />
-                                        </div> */}
-                                        {/* <ModalViewHistory show={this.state.showModal} onHide={this.closeModal} box_engine_cf={this.state.box_engine_cf} crrdatainfo={this.state.crrdatainfo} /> */}
                                     </div>
                                 </div>
                             </div>