diff --git a/web/packages/new/photos/components/gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx index b3fc5dee9f..d55b9add5b 100644 --- a/web/packages/new/photos/components/gallery/PeopleHeader.tsx +++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx @@ -1,14 +1,20 @@ +import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator"; import { useModalVisibility, type ModalVisibilityProps, } from "@/base/components/utils/modal"; import { useIsSmallWidth } from "@/base/hooks"; import { pt } from "@/base/i18n"; -import { deleteCGroup, renameCGroup } from "@/new/photos/services/ml"; +import { + deleteCGroup, + renameCGroup, + suggestionsForPerson, +} from "@/new/photos/services/ml"; import { type CGroupPerson, type ClusterPerson, type Person, + type PersonSuggestion, } from "@/new/photos/services/ml/people"; import OverflowMenu from "@ente/shared/components/OverflowMenu/menu"; import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option"; @@ -26,12 +32,11 @@ import { } from "@mui/material"; import { ClearIcon } from "@mui/x-date-pickers"; import { t } from "i18next"; -import React from "react"; +import React, { useEffect, useState } from "react"; import { useAppContext } from "../../types/context"; import { AddPersonDialog } from "../AddPersonDialog"; import { SpaceBetweenFlex } from "../mui"; import { SingleInputDialog } from "../SingleInputForm"; -import { usePeople } from "../utils/ml"; import type { GalleryBarImplProps } from "./BarImpl"; import { GalleryItemsHeaderAdapter, GalleryItemsSummary } from "./ListHeader"; @@ -234,16 +239,32 @@ type SuggestionsDialogProps = ModalVisibilityProps & { }; const SuggestionsDialog: React.FC = ({ + open, + onClose, person, - ...rest }) => { - const people = usePeople(); + const [suggestions, setSuggestions] = useState< + PersonSuggestion[] | undefined + >(); + const isSmallWidth = useIsSmallWidth(); - console.log({ open: rest.open, person, people }); + useEffect(() => { + if (!open) return; + + let ignore = false; + void suggestionsForPerson(person).then((suggestions) => { + if (!ignore) setSuggestions(suggestions); + }); + return () => { + ignore = true; + }; + }, [open, person]); + + console.log({ open, person }); return ( = ({ {pt(`${person.name}?`)} - Test + + {!suggestions ? ( + + ) : ( +
    + {suggestions.map((suggestion) => ( +
  • {`${suggestion.faces.length} faces`}
  • + ))} +
+ )} +
); }; diff --git a/web/packages/new/photos/services/ml/people.ts b/web/packages/new/photos/services/ml/people.ts index 9a02670dc6..be693b6c0c 100644 --- a/web/packages/new/photos/services/ml/people.ts +++ b/web/packages/new/photos/services/ml/people.ts @@ -307,6 +307,8 @@ export const filterNamedPeople = (people: Person[]): NamedPerson[] => { return namedPeople; }; +export type PersonSuggestion = FaceCluster; + /** * Returns suggestions for the given person. */