them search image
This commit is contained in:
parent
669089a6a5
commit
2391215e7d
|
|
@ -9,11 +9,15 @@
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"antd": "^4.18.2",
|
"antd": "^4.18.2",
|
||||||
"axios": "^0.24.0",
|
"axios": "^0.24.0",
|
||||||
|
"html-react-parser": "^1.4.5",
|
||||||
|
"jquery": "^3.6.0",
|
||||||
"moment": "^2.29.1",
|
"moment": "^2.29.1",
|
||||||
"node-sass": "^7.0.1",
|
"node-sass": "^7.0.1",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-bootstrap": "1.0.1",
|
"react-bootstrap": "1.0.1",
|
||||||
|
"react-datepicker": "^4.6.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
|
"react-file-reader": "^1.1.4",
|
||||||
"react-js-pagination": "^3.0.3",
|
"react-js-pagination": "^3.0.3",
|
||||||
"react-router-dom": "^6.2.1",
|
"react-router-dom": "^6.2.1",
|
||||||
"react-scripts": "5.0.0",
|
"react-scripts": "5.0.0",
|
||||||
|
|
|
||||||
9387
app/public/css/core.css
Normal file
9387
app/public/css/core.css
Normal file
File diff suppressed because it is too large
Load Diff
3
app/public/css/semantic.min.css
vendored
Normal file
3
app/public/css/semantic.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
app/public/img/photo-placeholder.png
Normal file
BIN
app/public/img/photo-placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -33,6 +33,7 @@
|
||||||
<link href="%PUBLIC_URL%/assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
|
<link href="%PUBLIC_URL%/assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
|
||||||
<!--RTL version:<link href="assets/vendors/base/vendors.bundle.rtl.css" rel="stylesheet" type="text/css" />-->
|
<!--RTL version:<link href="assets/vendors/base/vendors.bundle.rtl.css" rel="stylesheet" type="text/css" />-->
|
||||||
<link href="%PUBLIC_URL%/assets/demo/demo9/base/style.bundle.css" rel="stylesheet" type="text/css" />
|
<link href="%PUBLIC_URL%/assets/demo/demo9/base/style.bundle.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link rel="stylesheet" href="%PUBLIC_URL%/css/core.css">
|
||||||
<title>FSI</title>
|
<title>FSI</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -276,3 +276,45 @@ button.close:hover {
|
||||||
height: 50px !important;
|
height: 50px !important;
|
||||||
font-weight: bold !important;
|
font-weight: bold !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1400px) {
|
||||||
|
.col_xxl-4 {
|
||||||
|
-webkit-box-flex: 0!important;
|
||||||
|
flex: 0 0 33.33333%!important;
|
||||||
|
max-width: 33.33333%!important;
|
||||||
|
}
|
||||||
|
.col_xxl-6 {
|
||||||
|
-webkit-box-flex: 0!important;
|
||||||
|
flex: 0 0 50%!important;
|
||||||
|
max-width: 50%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .box {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-block {
|
||||||
|
padding: 1.25rem;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.ant-card-body {
|
||||||
|
padding: 10px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.hide_desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modal-90w {
|
||||||
|
width: 90%;
|
||||||
|
max-width: none!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-next-icon, .carousel-control-prev-icon {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ListItem from './components/List/ListItem';
|
import ListItem from './components/List/ListItem';
|
||||||
import Login from './components/Login/Login';
|
import Login from './components/Login/Login';
|
||||||
|
import SearchImage from './components/SearchImg/SearchImage';
|
||||||
import 'antd/dist/antd.css';
|
import 'antd/dist/antd.css';
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
|
import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
|
||||||
|
|
@ -13,6 +14,7 @@ function App() {
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Navigate replace to="/list-famous" />} />
|
<Route path="/" element={<Navigate replace to="/list-famous" />} />
|
||||||
<Route path='/login' element={<Login />} />
|
<Route path='/login' element={<Login />} />
|
||||||
|
<Route path='/search-image' element={<SearchImage />} />
|
||||||
<Route path="/list-famous" element={<ListItem />} />
|
<Route path="/list-famous" element={<ListItem />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
|
|
|
||||||
591
app/src/components/SearchImg/SearchImage.js
Normal file
591
app/src/components/SearchImg/SearchImage.js
Normal file
|
|
@ -0,0 +1,591 @@
|
||||||
|
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 Parser from 'html-react-parser';
|
||||||
|
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 {
|
||||||
|
constructor(props) {
|
||||||
|
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: [],
|
||||||
|
dataVerification: null,
|
||||||
|
filesImagePerson: "",
|
||||||
|
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,
|
||||||
|
threshold: 50,
|
||||||
|
similarity: 70,
|
||||||
|
value: 0,
|
||||||
|
selectedEncoding: [],
|
||||||
|
boxs: [],
|
||||||
|
slides: [],
|
||||||
|
encodings: [],
|
||||||
|
plugins: [],
|
||||||
|
nimages: [],
|
||||||
|
startDate: new Date(),
|
||||||
|
endDate: new Date(),
|
||||||
|
showModal: false,
|
||||||
|
crrdatainfo: null,
|
||||||
|
offset: 0,
|
||||||
|
showFirst: 0,
|
||||||
|
showLast: 0,
|
||||||
|
totalLength: 0,
|
||||||
|
};
|
||||||
|
this.onchange = this.onchange.bind(this);
|
||||||
|
this.closeModal = this.closeModal.bind(this);
|
||||||
|
|
||||||
|
var itemsPerPage = 1;
|
||||||
|
if ($(window).width() < 768) {
|
||||||
|
itemsPerPage = 6
|
||||||
|
} else {
|
||||||
|
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() {
|
||||||
|
window.$('.carousel').carousel({
|
||||||
|
interval: false,
|
||||||
|
wrap: false
|
||||||
|
}).on('slid.bs.carousel', function () {
|
||||||
|
var curSlide = window.$('.active');
|
||||||
|
if (curSlide.is(':first-child')) {
|
||||||
|
window.$('.carousel-control-prev').hide();
|
||||||
|
window.$('.carousel-control-next').show();
|
||||||
|
} else if (curSlide.is(':last-child')) {
|
||||||
|
window.$('.carousel-control-prev').show();
|
||||||
|
window.$('.carousel-control-next').hide();
|
||||||
|
} else {
|
||||||
|
window.$('.carousel-control-prev').show();
|
||||||
|
window.$('.carousel-control-next').show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
onchange(value) {
|
||||||
|
this.setState({ value });
|
||||||
|
}
|
||||||
|
closeModal() {
|
||||||
|
this.setState({
|
||||||
|
showModal: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
handlePrevChange() {
|
||||||
|
var index = this.state.value;
|
||||||
|
index = index - 1
|
||||||
|
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],
|
||||||
|
|
||||||
|
}, () => {
|
||||||
|
this.getPerson()
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
loading: true,
|
||||||
|
});
|
||||||
|
fetch(`${HOST}/api/search_people`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJjbGFzc2lmeS9sb2dpbiJdLCJleHAiOjE2NDE5NzQ5NjV9.2F2PAUKjpfjPJKzgvzgCDtyBuTXDRl86EnJJGdYgWTM'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
encodings: this.state.selectedEncoding,
|
||||||
|
image: "",
|
||||||
|
threshold: parseInt(this.state.threshold) / 100,
|
||||||
|
result_number: this.state.valueRes,
|
||||||
|
})
|
||||||
|
}).then((response) => {
|
||||||
|
return response.json()
|
||||||
|
}).then((rs) => {
|
||||||
|
console.log(rs)
|
||||||
|
if (rs.status === 10000) {
|
||||||
|
var data = rs.data;
|
||||||
|
this.setState({
|
||||||
|
listHistory: data,
|
||||||
|
loading: false,
|
||||||
|
// total_count: rs.count,
|
||||||
|
});
|
||||||
|
this.FilterSearch(this.state.page_num)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
swal("Lỗi!", "Ảnh không hợp lệ!", "error");
|
||||||
|
this.setState({
|
||||||
|
listHistory: [],
|
||||||
|
loading: false,
|
||||||
|
total_count: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error) {
|
||||||
|
console.log(error)
|
||||||
|
swal("Lỗi!", "Ảnh không hợp lệ!", "error");
|
||||||
|
this.setState({
|
||||||
|
listHistory: [],
|
||||||
|
loading: false,
|
||||||
|
total_count: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
getFaces() {
|
||||||
|
var image_base64;
|
||||||
|
image_base64 = this.state.filesImagePerson.replace('data:image/png;base64,', '');
|
||||||
|
image_base64 = image_base64.replace('data:image/jpg;base64,', '');
|
||||||
|
image_base64 = image_base64.replace('data:image/jpeg;base64,', '');
|
||||||
|
|
||||||
|
fetch(`${HOST}/api/face_images/faces`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
image: image_base64
|
||||||
|
})
|
||||||
|
}).then((response) => {
|
||||||
|
return response.json()
|
||||||
|
}).then((rs) => {
|
||||||
|
if (rs.status === 10000) {
|
||||||
|
var boxs = []
|
||||||
|
var slides = []
|
||||||
|
var item = ""
|
||||||
|
var encodings = []
|
||||||
|
rs.imgs.map((value, index) => {
|
||||||
|
var item_active = "<div class='carousel-item active pt-3'>"
|
||||||
|
+ "<img style='margin-left: 5px;width: 75px; opacity: 1;cursor: pointer;' src=" + `data:image/png;base64,` + " dangerouslySetInnerHTML={{__html:this.state.userText}} onClick={this.toggleTranspose()} />"
|
||||||
|
+ "</div>"
|
||||||
|
// var item_inactive = "<div class='carousel-item'>"
|
||||||
|
// + "<img src="+`data:image/png;base64,${value} `+ "style={{ marginLeft: '5px', width: '75px', opacity: 1, cursor: 'pointer' }} alt='...' />"
|
||||||
|
// + "</div>"
|
||||||
|
if (index === 0) {
|
||||||
|
item += "<div class='carousel-item active pt-3'>"
|
||||||
|
item += "<img style='margin-left: 5px;width: 75px; opacity: 1;cursor: pointer;' alt='...' src=" + `data:image/png;base64,${value} ` + " />"
|
||||||
|
|
||||||
|
}
|
||||||
|
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} ` + " />"
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (index !== 0) {
|
||||||
|
item += "<img style='margin-left: 5px;width: 75px; opacity: 1;cursor: pointer;' src=" + `data:image/png;base64,${value} ` + " />"
|
||||||
|
item += "</div>"
|
||||||
|
}
|
||||||
|
|
||||||
|
item = item_active
|
||||||
|
var id_image = "img_" + index
|
||||||
|
boxs.push(rs.boxes[index])
|
||||||
|
encodings.push(rs.encodings[index])
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
encodings: encodings,
|
||||||
|
slides: Parser(item),
|
||||||
|
boxs: boxs,
|
||||||
|
value: 0,
|
||||||
|
selectedEncoding: encodings[0],
|
||||||
|
listHistory: [],
|
||||||
|
nimages: rs.imgs,
|
||||||
|
total_count: 0,
|
||||||
|
|
||||||
|
numbershow: (rs.imgs.length > 3 ? 3 : rs.imgs.length),
|
||||||
|
}, () => {
|
||||||
|
if (this.state.encodings.length === 1) {
|
||||||
|
window.$('.carousel-control-prev').hide();
|
||||||
|
window.$('.carousel-control-next').hide();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
window.$('.carousel-control-prev').show();
|
||||||
|
window.$('.carousel-control-next').show();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.state.encodings.length >= 1)
|
||||||
|
this.changeFace(0)
|
||||||
|
})
|
||||||
|
|
||||||
|
//console.log("numbershow", this.state.numbershow)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
swal("Lỗi!", "Ảnh không hợp lệ!", "error");
|
||||||
|
this.setState({
|
||||||
|
listHistory: [],
|
||||||
|
loading: false,
|
||||||
|
total_count: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error) {
|
||||||
|
console.log(error)
|
||||||
|
swal("Lỗi!", "Ảnh không hợp lệ!", "error");
|
||||||
|
this.setState({
|
||||||
|
listHistory: [],
|
||||||
|
loading: false,
|
||||||
|
total_count: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onFilesChangeImagePerson = async (files) => {
|
||||||
|
document.getElementById('previewImagePerson').src = files.base64;
|
||||||
|
this.setState({
|
||||||
|
filesImagePerson: files.base64,
|
||||||
|
loading: false,
|
||||||
|
plugins: []
|
||||||
|
});
|
||||||
|
this.getFaces();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
isChangeRes = (event) => {
|
||||||
|
this.setState({
|
||||||
|
// listHistory: [],
|
||||||
|
// loading: true,
|
||||||
|
pageNumber: 1,
|
||||||
|
valueRes: event.target.value,
|
||||||
|
}, () => {
|
||||||
|
//this.getPerson()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
isChangeThreshold = (event) => {
|
||||||
|
this.setState({
|
||||||
|
// listHistory: [],
|
||||||
|
// 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({
|
||||||
|
crrHistory,
|
||||||
|
offset,
|
||||||
|
showFirst: offset + 1,
|
||||||
|
showLast: crrHistory.length + offset,
|
||||||
|
totalLength: this.state.listHistory.length
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePageChange = (pageNumber) => {
|
||||||
|
this.setState({
|
||||||
|
...this.state,
|
||||||
|
// loading: true,
|
||||||
|
page_num: pageNumber,
|
||||||
|
}, () => {
|
||||||
|
this.FilterSearch(pageNumber);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
// if (this.state.isLogin === false) {
|
||||||
|
// return (
|
||||||
|
// <Redirect to={'/login'} />
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
let rsImages = this.state.nimages.map((value, index) => {
|
||||||
|
var item_active = ""
|
||||||
|
if (index === 0) {
|
||||||
|
|
||||||
|
item_active =
|
||||||
|
(
|
||||||
|
<div key={value} class={"carousel-item active pt-3"}>
|
||||||
|
<img alt="" src={`data:image/png;base64,${value} `} style={{ marginLeft: '5px', width: '75px', opacity: 1, cursor: 'pointer' }} onClick={() => this.changeFace(index)} class={"img-responsive"} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (index > 0) {
|
||||||
|
item_active =
|
||||||
|
(
|
||||||
|
<div key={value} class={"carousel-item pt-3"}>
|
||||||
|
<img alt="" src={`data:image/png;base64,${value} `} style={{ marginLeft: '5px', width: '75px', opacity: 1, cursor: 'pointer' }} onClick={() => this.changeFace(index)} class={"img-responsive"} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return item_active
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let bulletedImg = this.state.crrHistory.map((value, index) => {
|
||||||
|
return (
|
||||||
|
<div className="col-md-4 mb-4">
|
||||||
|
<Card
|
||||||
|
style={{ width: 300 }}
|
||||||
|
// cover={<img style={{ height: '250px' }} alt="example" src={value.image_url} />}
|
||||||
|
cover={<ImageAntd
|
||||||
|
// width={200}
|
||||||
|
src={value.image_url}
|
||||||
|
/>}
|
||||||
|
>
|
||||||
|
<p style={{wordWrap: "break-word"}}><strong>facebookID: </strong>{value.person_id}</p>
|
||||||
|
<p style={{wordWrap: "break-word"}}><strong>ImageID: </strong>{value.image_id}</p>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="m-portlet m-portlet--mobile pb-3">
|
||||||
|
<div className="m-portlet__head">
|
||||||
|
<div className="m-portlet__head-caption">
|
||||||
|
<div className="m-portlet__head-title">
|
||||||
|
<h3 className="m-portlet__head-text">
|
||||||
|
Tìm kiếm ảnh
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="m-portlet__body pt-2">
|
||||||
|
<div className="m-grid__item m-grid__item--fluid m-wrapper" style={{ backgroundColor: 'white' }}>
|
||||||
|
<div className="m-content mt-3-phone pd_phone_0 p-3">
|
||||||
|
<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> */}
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
</ReactFileReader>
|
||||||
|
|
||||||
|
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||||
|
<div class="carousel-inner" data-interval="false">
|
||||||
|
{rsImages}
|
||||||
|
</div>
|
||||||
|
<a className={`carousel-control-prev ${rsImages.length <= 1 ? "d-none" : ""}`} href="#carouselExampleControls" role="button" data-slide="prev" onClick={() => this.handlePrevChange()}>
|
||||||
|
<span class="carousel-control-prev-icon fa fa-chevron-left" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a className={`carousel-control-next ${rsImages.length <= 1 ? "d-none" : ""}`} href="#carouselExampleControls" role="button" data-slide="next" onClick={() => this.handleNextChange()}>
|
||||||
|
<span class="carousel-control-next-icon fa fa-chevron-right" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginTop: '10px', textAlign: 'left' }}>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<span>Số kết quả: </span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input className="form-control form-control-sm" type="number" step="1" min="1" name="m_table_1_length" value={this.state.valueRes} onChange={(event) => this.isChangeRes(event)} aria-controls="m_table_1" />
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<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" />
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style={{ marginTop: '10px' }} className="ml-2 mb-mobile-10">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
this.setState({
|
||||||
|
page_num: 1,
|
||||||
|
listHistory: []
|
||||||
|
}, () => {
|
||||||
|
this.getPerson();
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
className="btn btn-accent m-btn m-btn--icon">
|
||||||
|
<span>
|
||||||
|
<i className="la la-search" />
|
||||||
|
<span>Tìm kiếm</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className="col-md-10">
|
||||||
|
<div className="pl-2 row">
|
||||||
|
<Pagination
|
||||||
|
prevPageText='Trang trước'
|
||||||
|
nextPageText='Trang sau'
|
||||||
|
firstPageText='Trang đầu'
|
||||||
|
lastPageText='Trang cuối'
|
||||||
|
activePage={this.state.page_num}
|
||||||
|
itemsCountPerPage={this.itemsPerPage}
|
||||||
|
totalItemsCount={this.state.totalLength}
|
||||||
|
pageRangeDisplayed={5}
|
||||||
|
onChange={this.handlePageChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='row-sm row pl-3 pr-3 pb-3'>
|
||||||
|
{bulletedImg}
|
||||||
|
<PulseLoader
|
||||||
|
// css={override}
|
||||||
|
sizeUnit={"px"}
|
||||||
|
size={12}
|
||||||
|
margin={'2px'}
|
||||||
|
color={'#36D7B7'}
|
||||||
|
loading={this.state.loading}
|
||||||
|
/>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SearchImage;
|
||||||
15124
app/yarn.lock
15124
app/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user