0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Inline

Browse source
This commit is contained in:
Manav Rathi 2024-04-12 15:02:06 +05:30
parent 15b601b0ff
commit 158186290c
No known key found for this signature in database
3 changed files with 67 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
web/apps/photos/src/components/MachineLearning/FaceCropImageView.tsx Normal file
View file

@ -0,0 +1,66 @@
import log from "@/next/log";
import { cached } from "@ente/shared/storage/cache";
import { getData, LS_KEYS } from "@ente/shared/storage/localStorage";
import { User } from "@ente/shared/user/types";
import { Skeleton } from "@mui/material";
import { useEffect, useState } from "react";
import machineLearningService from "services/machineLearning/machineLearningService";
interface FaceCropImageViewProps {
url: string;
faceID: string;
}
export const FaceCropImageView: React.FC<FaceCropImageViewProps> = ({
url,
faceID,
}) => {
const [objectURL, setObjectURL] = useState<string | undefined>();
useEffect(() => {
let didCancel = false;
async function loadImage() {
const user: User = getData(LS_KEYS.USER);
let blob: Blob;
if (!url || !user) {
blob = undefined;
} else {
blob = await cached("face-crops", url, async () => {
try {
log.debug(
() =>
`ImageCacheView: regenerate face crop for ${faceID}`,
);
return machineLearningService.regenerateFaceCrop(
user.token,
user.id,
faceID,
);
} catch (e) {
log.error(
"ImageCacheView: regenerate face crop failed",
e,
);
}
});
}
if (didCancel) return;
setObjectURL(URL.createObjectURL(blob));
}
loadImage();
return () => {
didCancel = true;
if (objectURL) URL.revokeObjectURL(objectURL);
};
}, [url, faceID]);
return objectURL ? (
<img src={objectURL} />
) : (
<Skeleton variant="circular" height={120} width={120} />
);
};

83
web/apps/photos/src/components/MachineLearning/ImageViews.tsx
View file

@ -1,83 +0,0 @@
import log from "@/next/log";
import { cached } from "@ente/shared/storage/cache";
import { getData, LS_KEYS } from "@ente/shared/storage/localStorage";
import { User } from "@ente/shared/user/types";
import { Skeleton } from "@mui/material";
import { useEffect, useState } from "react";
import machineLearningService from "services/machineLearning/machineLearningService";
interface FaceCropImageViewProps {
url: string;
faceID: string;
}
export const FaceCropImageView: React.FC<FaceCropImageViewProps> = ({
url,
faceID,
}) => {
const [imageBlob, setImageBlob] = useState<Blob>();
useEffect(() => {
let didCancel = false;
async function loadImage() {
try {
const user: User = getData(LS_KEYS.USER);
let blob: Blob;
if (!url || !user) {
blob = undefined;
} else {
blob = await cached("face-crops", url, async () => {
try {
log.debug(
() =>
`ImageCacheView: regenerate face crop for ${faceID}`,
);
return machineLearningService.regenerateFaceCrop(
user.token,
user.id,
faceID,
);
} catch (e) {
log.error(
"ImageCacheView: regenerate face crop failed",
e,
);
}
});
}
!didCancel && setImageBlob(blob);
} catch (e) {
log.error("ImageCacheView useEffect failed", e);
}
}
loadImage();
return () => {
didCancel = true;
};
}, [url, faceID]);
return <ImageBlobView blob={imageBlob}></ImageBlobView>;
};
const ImageBlobView = (props: { blob: Blob }) => {
const [imgUrl, setImgUrl] = useState<string>();
useEffect(() => {
try {
setImgUrl(props.blob && URL.createObjectURL(props.blob));
} catch (e) {
console.error(
"ImageBlobView: can not create object url for blob: ",
props.blob,
e,
);
}
}, [props.blob]);
return imgUrl ? (
<img src={imgUrl} />
) : (
<Skeleton variant="circular" height={120} width={120} />
);
};

2
web/apps/photos/src/components/MachineLearning/PeopleList.tsx
View file

@ -10,7 +10,7 @@ import {
getPeopleList,
getUnidentifiedFaces,
} from "utils/machineLearning";
import { FaceCropImageView } from "./ImageViews";
import { FaceCropImageView } from "./FaceCropImageView";
const FaceChipContainer = styled("div")`
display: flex;