Face exploration working even better
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
parent
99d8c927ee
commit
17fbb4e21c
@ -21,6 +21,7 @@ div {
|
||||
|
||||
.Resizer {
|
||||
width: 0.5rem;
|
||||
background-color: #ccc;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
@ -36,6 +37,8 @@ div {
|
||||
|
||||
.Identities {
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
gap: 0.25rem;
|
||||
overflow-y: scroll;
|
||||
flex-direction: column;
|
||||
border: 1px solid green;
|
||||
@ -46,16 +49,13 @@ div {
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
border: 2px solid #444;
|
||||
}
|
||||
|
||||
.Face:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Face .Image {
|
||||
border: 0.25rem solid transparent;
|
||||
}
|
||||
|
||||
.ClusterEditor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -82,12 +82,17 @@ div {
|
||||
background-position: 50% 50% !important;
|
||||
}
|
||||
|
||||
.Face:hover .Image {
|
||||
border: 0.25rem solid yellow;
|
||||
.Active {
|
||||
filter: brightness(1.25);
|
||||
border-color: orange !important;
|
||||
}
|
||||
|
||||
.Face.Selected .Image {
|
||||
border: 0.25rem solid blue;
|
||||
.Face:hover {
|
||||
border-color: yellow;
|
||||
}
|
||||
|
||||
.Face.Selected {
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
.Face .Title {
|
||||
@ -129,5 +134,6 @@ div {
|
||||
|
||||
.Cluster .Faces {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
@ -12,7 +12,7 @@ import './App.css';
|
||||
|
||||
const base = process.env.PUBLIC_URL; /* /identities -- set in .env */
|
||||
|
||||
const makeFaceBoxes = (photo: any, dimensions: any): any => {
|
||||
const makeFaceBoxes = (photo: any, dimensions: any, onFaceClick: any): any => {
|
||||
const faces: FaceData[] = photo.faces;
|
||||
|
||||
let width: number, height: number, offsetLeft = 0, offsetTop = 0;
|
||||
@ -32,20 +32,29 @@ const makeFaceBoxes = (photo: any, dimensions: any): any => {
|
||||
offsetTop = 0;
|
||||
}
|
||||
|
||||
return faces.map((face: FaceData) => (
|
||||
<div className="FaceBox"
|
||||
key={face.faceId}
|
||||
style={{
|
||||
left: offsetLeft + Math.floor(face.left * width) + "px",
|
||||
top: offsetTop + Math.floor(face.top * height) + "px",
|
||||
width: Math.floor((face.right - face.left) * width) + "px",
|
||||
height: Math.floor((face.bottom - face.top) * height) + "px"
|
||||
}}
|
||||
/>
|
||||
));
|
||||
return faces.map((face: FaceData) => {
|
||||
const faceId = face.faceId;
|
||||
const identityId = face.identityId;
|
||||
return (
|
||||
<div className="FaceBox"
|
||||
key={faceId}
|
||||
data-identity-id={identityId}
|
||||
data-face-id={faceId}
|
||||
style={{
|
||||
left: offsetLeft + Math.floor(face.left * width) + "px",
|
||||
top: offsetTop + Math.floor(face.top * height) + "px",
|
||||
width: Math.floor((face.right - face.left) * width) + "px",
|
||||
height: Math.floor((face.bottom - face.top) * height) + "px"
|
||||
}}
|
||||
onClick={(e) => { onFaceClick(e, face) }}
|
||||
onMouseEnter={(e) => { onFaceMouseEnter(e, face) }}
|
||||
onMouseLeave={(e) => { onFaceMouseLeave(e, face) }}
|
||||
/>
|
||||
)
|
||||
});
|
||||
};
|
||||
|
||||
const Photo = ({ photoId }: any) => {
|
||||
const Photo = ({ photoId, onFaceClick }: any) => {
|
||||
const [image, setImage] = useState<any>(undefined);
|
||||
const ref = useRef(null);
|
||||
const [dimensions, setDimensions] = React.useState({width: 0, height: 0});
|
||||
@ -54,8 +63,8 @@ const Photo = ({ photoId }: any) => {
|
||||
if (image === undefined || dimensions.height === 0) {
|
||||
return <></>;
|
||||
}
|
||||
return makeFaceBoxes(image, dimensions);
|
||||
}, [image, dimensions]);
|
||||
return makeFaceBoxes(image, dimensions, onFaceClick);
|
||||
}, [image, dimensions, onFaceClick]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) {
|
||||
@ -92,19 +101,56 @@ const Photo = ({ photoId }: any) => {
|
||||
return (<div className="Image"
|
||||
ref={ref}
|
||||
style={{
|
||||
background: `url(../${image.path}thumbs/scaled/${image.filename})`.replace(/ /g, '%20')
|
||||
background: `url("${base}/../${image.path}thumbs/scaled/${image.filename}")`.replace(/ /g, '%20')
|
||||
}}>{ faces }</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Face = ({ faceId, onClick, title, ...rest }: any) => {
|
||||
const onFaceMouseEnter = (e: any, face: FaceData) => {
|
||||
const faceId = face.faceId;
|
||||
const els = [...document.querySelectorAll(`[data-face-id="${faceId}"]`)];
|
||||
|
||||
if (face.identity) {
|
||||
const identityId = face.identity.identityId;
|
||||
els.splice(0, 0,
|
||||
...document.querySelectorAll(`[data-identity-id="${identityId}"]`));
|
||||
}
|
||||
|
||||
els.forEach(el => {
|
||||
el.classList.add('Active');
|
||||
})
|
||||
};
|
||||
|
||||
const onFaceMouseLeave = (e: any, face: FaceData) => {
|
||||
const faceId = face.faceId;
|
||||
const els = [...document.querySelectorAll(`[data-face-id="${faceId}"]`)];
|
||||
|
||||
if (face.identity) {
|
||||
const identityId = face.identity.identityId;
|
||||
els.splice(0, 0,
|
||||
...document.querySelectorAll(`[data-identity-id="${identityId}"]`));
|
||||
}
|
||||
|
||||
els.forEach(el => {
|
||||
el.classList.remove('Active');
|
||||
})
|
||||
};
|
||||
|
||||
const Face = ({ face, onFaceClick, title, ...rest }: any) => {
|
||||
const faceId = face.faceId;
|
||||
const idPath = String(faceId % 100).padStart(2, '0');
|
||||
return (
|
||||
<div {...rest} onClick={(e) => { onClick(e, faceId) }}
|
||||
<div
|
||||
data-face-id={face.faceId}
|
||||
data-identity-id={face.identityId}
|
||||
{...rest}
|
||||
onClick={(e) => { onFaceClick(e, face) }}
|
||||
onMouseEnter={(e) => { onFaceMouseEnter(e, face) }}
|
||||
onMouseLeave={(e) => { onFaceMouseLeave(e, face) }}
|
||||
className='Face'>
|
||||
<div className='Image'
|
||||
style={{
|
||||
background: `url("/faces/${idPath}/${faceId}.jpg")`,
|
||||
background: `url("${base}/../faces/${idPath}/${faceId}.jpg")`,
|
||||
}}>
|
||||
<div className='Title'>{title}</div>
|
||||
</div>
|
||||
@ -113,47 +159,54 @@ const Face = ({ faceId, onClick, title, ...rest }: any) => {
|
||||
};
|
||||
|
||||
type ClusterProps = {
|
||||
identity: Identity,
|
||||
identity: IdentityData,
|
||||
setImage(image: number): void,
|
||||
setSelected(selected: number[]): void,
|
||||
setIdentity(identity: Identity): void
|
||||
setIdentity(identity: IdentityData): void
|
||||
};
|
||||
|
||||
const Cluster = ({ identity, setIdentity, setImage, setSelected }: ClusterProps) => {
|
||||
const relatedFacesJSX = useMemo(() => {
|
||||
const faceClicked = async (e: any, id: any) => {
|
||||
const faceClicked = async (e: any, face: FaceData) => {
|
||||
if (!identity) {
|
||||
return;
|
||||
}
|
||||
const el = e.currentTarget;
|
||||
const face = identity.relatedFaces.find(item => item.faceId === id);
|
||||
if (!face) {
|
||||
|
||||
/* Control -- select / deselect single item */
|
||||
if (e.ctrlKey) {
|
||||
el.classList.toggle('Selected');
|
||||
const selected = [...el.parentElement
|
||||
.querySelectorAll('.Selected')]
|
||||
.map((face: any) => face.getAttribute('data-face-id'));
|
||||
setSelected(selected);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/* Shift -- select groups */
|
||||
if (e.shiftKey) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setImage(face.photoId);
|
||||
return;
|
||||
}
|
||||
el.classList.toggle('Selected');
|
||||
const selected = [...el.parentElement
|
||||
.querySelectorAll('.Selected')]
|
||||
.map((face: any) => face.getAttribute('data-face-id'));
|
||||
setSelected(selected);
|
||||
console.log(face);
|
||||
|
||||
/* Default to load image */
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setImage(face.photoId);
|
||||
}
|
||||
if (identity === undefined) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return identity.relatedFaces.map(face =>
|
||||
<Face
|
||||
data-face-id={face.faceId}
|
||||
<div
|
||||
key={face.faceId}
|
||||
faceId={face.faceId}
|
||||
onClick={faceClicked}
|
||||
title={face.distance}/>
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center"}}>
|
||||
<Face
|
||||
face={face}
|
||||
onFaceClick={faceClicked}
|
||||
title={face.distance}/>
|
||||
</div>
|
||||
);
|
||||
}, [identity, setImage, setSelected]);
|
||||
|
||||
@ -233,6 +286,7 @@ type FaceData = {
|
||||
firstName: string,
|
||||
middleName: string,
|
||||
displayName: string,
|
||||
identity: IdentityData,
|
||||
identityId: number,
|
||||
distance: number,
|
||||
descriptors: any[],
|
||||
@ -242,40 +296,33 @@ type FaceData = {
|
||||
left: number,
|
||||
};
|
||||
|
||||
type Identity = {
|
||||
type IdentityData = {
|
||||
lastName: string,
|
||||
middleName: string,
|
||||
firstName: string,
|
||||
descriptors: number[],
|
||||
id: number
|
||||
identityId: number
|
||||
displayName: string,
|
||||
relatedFaces: FaceData[]
|
||||
};
|
||||
|
||||
interface IdentitiesProps {
|
||||
setIdentity(identity: Identity): void,
|
||||
identities: Identity[]
|
||||
identities: IdentityData[],
|
||||
onFaceClick(e: any, face: FaceData): void
|
||||
};
|
||||
|
||||
const Identities = ({ identities, setIdentity } : IdentitiesProps) => {
|
||||
const Identities = ({ identities, onFaceClick } : IdentitiesProps) => {
|
||||
const identitiesJSX = useMemo(() => {
|
||||
const loadIdentity = async (id: number) => {
|
||||
const res = await window.fetch(`${base}/api/v1/identities/${id}`);
|
||||
const data = await res.json();
|
||||
setIdentity(data[0]);
|
||||
};
|
||||
|
||||
return identities.map((identity) => {
|
||||
const face = identity.relatedFaces[0];
|
||||
return (
|
||||
<Face key={face.faceId}
|
||||
data-face-id={face.faceId}
|
||||
faceId={face.faceId}
|
||||
onClick={() => loadIdentity(identity.id)}
|
||||
face={face}
|
||||
onFaceClick={onFaceClick}
|
||||
title={identity.displayName}/>
|
||||
);
|
||||
});
|
||||
}, [ setIdentity, identities ]);
|
||||
}, [ identities, onFaceClick ]);
|
||||
|
||||
return (
|
||||
<div className='Identities'>
|
||||
@ -293,27 +340,50 @@ const Button = ({ onClick, children }: any) => {
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
const [identities, setIdentities] = useState<Identity[]>([]);
|
||||
const [identities, setIdentities] = useState<IdentityData[]>([]);
|
||||
const { identityId, faceId } = useParams();
|
||||
const [identity, setIdentity] = useState<any>(undefined);
|
||||
const [image, setImage] = useState<number>(0);
|
||||
const { loading, data } = useApi(
|
||||
`${base}/api/v1/identities`
|
||||
);
|
||||
const [selected, setSelected] = useState<number[]>([]);
|
||||
const { identityId, faceId } = useParams();
|
||||
|
||||
console.log({ identityId, faceId});
|
||||
const loadIdentity = async (identityId: number) => {
|
||||
try {
|
||||
const res = await window.fetch(`${base}/api/v1/identities/${identityId}`);
|
||||
const data = await res.json();
|
||||
setIdentity(data[0]);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (identityId !== undefined && !isNaN(+identityId)) {
|
||||
loadIdentity(+identityId);
|
||||
}
|
||||
|
||||
if (faceId !== undefined && !isNaN(+faceId)) {
|
||||
setImage(+faceId);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (data && data.length) {
|
||||
setIdentities(data as Identity[]);
|
||||
data.forEach((identity: IdentityData) => {
|
||||
identity.relatedFaces.forEach(face => {
|
||||
face.identity = identity;
|
||||
});
|
||||
});
|
||||
setIdentities(data as IdentityData[]);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const removeSelected = async () => {
|
||||
try {
|
||||
const res = await window.fetch(
|
||||
`${base}/api/v1/identities/faces/remove/${identity.id}`, {
|
||||
`${base}/api/v1/identities/faces/remove/${identity.identityId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ faces: selected })
|
||||
@ -333,6 +403,30 @@ const App = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const onFaceClick = (e: any, face: FaceData) => {
|
||||
if (!face.identity) {
|
||||
console.log(`Face ${face.faceId} does not have an Identity`);
|
||||
return;
|
||||
}
|
||||
const identityId = face.identity.identityId;
|
||||
console.log(face.identity);
|
||||
const identitiesEl = document.querySelector('.Identities');
|
||||
if (!identitiesEl) {
|
||||
return;
|
||||
}
|
||||
const faceIdentity = identitiesEl.querySelector(
|
||||
`[data-identity-id="${identityId}"]`);
|
||||
if (!faceIdentity) {
|
||||
return;
|
||||
}
|
||||
faceIdentity.scrollIntoView()
|
||||
};
|
||||
|
||||
const identitiesOnFaceClick = (e: any, face: FaceData) => {
|
||||
const identityId = face.identity.identityId;
|
||||
loadIdentity(identityId);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<div className="Worksheet">
|
||||
@ -357,10 +451,11 @@ const App = () => {
|
||||
<PanelResizeHandle className="Resizer"/>
|
||||
<Panel>
|
||||
{image === 0 && <div style={{ margin: '1rem' }}>Select image to view</div>}
|
||||
{image !== 0 && <Photo photoId={image}/> }
|
||||
{image !== 0 && <Photo onFaceClick={onFaceClick} photoId={image}/> }
|
||||
</Panel>
|
||||
</PanelGroup>
|
||||
{ !loading && <Identities {... {identities, setIdentity }}/> }
|
||||
{ !loading && <Identities
|
||||
{... { onFaceClick: identitiesOnFaceClick, identities }}/> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -16,6 +16,7 @@ const useApi = (_url: string, _options?: {}) : UseApi => {
|
||||
if (_url === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchApi = async () => {
|
||||
console.log(`Fetching ${_url}...`);
|
||||
try {
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
# DEVELOPMENT -- use npm development server on port 3000 (entrypoint.sh)
|
||||
location /identities/api/v1/ {
|
||||
rewrite ^/identities/api/v1/(.*)$ https://${host}/api/v1/$1 permanent;
|
||||
}
|
||||
|
||||
location /identities {
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
@ -12,11 +16,3 @@ location /identities {
|
||||
proxy_set_header Connection "Upgrade";
|
||||
proxy_pass https://localhost:3000;
|
||||
}
|
||||
|
||||
location /wsapp/ {
|
||||
proxy_pass http://wsbackend;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "Upgrade";
|
||||
proxy_set_header Host $host;
|
||||
}
|
||||
@ -1,4 +1,8 @@
|
||||
# PRODUCTION -- pre-built source
|
||||
location /identities/api/v1/ {
|
||||
rewrite ^/identities/api/v1/(.*)$ https://${host}/api/v1/$1 permanent;
|
||||
}
|
||||
|
||||
location /identities {
|
||||
try_files $uri $uri/ =404;
|
||||
alias /website/client/build;
|
||||
|
||||
@ -174,6 +174,7 @@ router.get("/:id?", async (req, res) => {
|
||||
identity[key] = '';
|
||||
}
|
||||
});
|
||||
identity.identityId = identity.id;
|
||||
|
||||
const relatedFaces = identity.relatedFaceIds.split(","),
|
||||
relatedFacePhotos = identity.relatedFacePhotoIds.split(",");
|
||||
@ -197,6 +198,7 @@ router.get("/:id?", async (req, res) => {
|
||||
);
|
||||
|
||||
return {
|
||||
identityId: identity.id,
|
||||
faceId,
|
||||
photoId: relatedFacePhotos[index],
|
||||
distance
|
||||
@ -215,6 +217,7 @@ router.get("/:id?", async (req, res) => {
|
||||
identity.relatedFaces = [ identity.relatedFaces[0] ];
|
||||
}
|
||||
|
||||
delete identity.id;
|
||||
delete identity.descriptors;
|
||||
delete identity.relatedFaceIds;
|
||||
delete identity.relatedFacePhotoIds;
|
||||
|
||||
@ -1127,8 +1127,8 @@ router.get("/:id", async (req, res) => {
|
||||
if (face.identityId) {
|
||||
const results = await photoDB.sequelize.query(
|
||||
`
|
||||
SELECT displayName,firstName,lastName,middleName FROM identities
|
||||
WHERE id=:id
|
||||
SELECT id AS identityId,displayName,firstName,lastName,middleName FROM identities
|
||||
WHERE identityId=:id
|
||||
`, {
|
||||
replacements: { id: face.identityId },
|
||||
type: photoDB.Sequelize.QueryTypes.SELECT
|
||||
@ -1136,7 +1136,6 @@ router.get("/:id", async (req, res) => {
|
||||
);
|
||||
face.identity = results[0];
|
||||
}
|
||||
delete face.identityId;
|
||||
});
|
||||
|
||||
return res.status(200).json(photo);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user