Merge pull request 'hoan thien search image' (#2) from hotfix/fix-search-img into dev
Reviewed-on: huyt/fsi_project#2
This commit is contained in:
commit
f12c0f7239
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 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: [],
|
||||
// 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 (
|
||||
<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="" />
|
||||
{/* <div style={this.state.outline}></div> */}
|
||||
<img src="./img/photo-placeholder.png" id="previewImagePerson" className="text-center" style={{width: '100%', height: 'auto'}} alt="" />
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user