From 8cbdd22b46e00d400c540f406ba61bb4e80b5405 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 4 Apr 2025 18:32:43 +0700 Subject: [PATCH] activity popover for generations (#478) --- .../app/components/reusable/Button/Button.tsx | 2 +- .../components/reusable/Popover/Popover.tsx | 47 ++++++++++-- .../app/components/signaled/TopBar/TopBar.tsx | 15 ++-- frontend/editor3d/app/enums/JobStatus.ts | 1 + .../comps/GenerateModals/Activity.tsx | 75 +++++++++++++++++++ .../comps/GenerateModals/CompletedCard.tsx | 25 ++++--- .../comps/GenerateModals/InProgressCard.tsx | 12 +-- .../PageEnigma/comps/SidePanel/SidePanel.tsx | 2 +- .../comps/SidePanelMenu/SidePanelMenu.tsx | 6 +- frontend/editor3d/app/signals/activeJobs.ts | 9 +++ 10 files changed, 162 insertions(+), 32 deletions(-) create mode 100644 frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/Activity.tsx diff --git a/frontend/editor3d/app/components/reusable/Button/Button.tsx b/frontend/editor3d/app/components/reusable/Button/Button.tsx index a7ab3f4b43..70bcd4e1e8 100644 --- a/frontend/editor3d/app/components/reusable/Button/Button.tsx +++ b/frontend/editor3d/app/components/reusable/Button/Button.tsx @@ -28,7 +28,7 @@ export const Button = ({ function getVariantClassNames(variant: string) { switch (variant) { case "secondary": { - return "bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary"; + return "bg-brand-secondary hover:bg-brand-secondary-700 text-white focus-visible:outline-brand-secondary"; } case "action": { return "bg-action hover:bg-action-900 text-white focus-visible:outline-action"; diff --git a/frontend/editor3d/app/components/reusable/Popover/Popover.tsx b/frontend/editor3d/app/components/reusable/Popover/Popover.tsx index cc8889b2d2..c5c9ca46b8 100644 --- a/frontend/editor3d/app/components/reusable/Popover/Popover.tsx +++ b/frontend/editor3d/app/components/reusable/Popover/Popover.tsx @@ -25,6 +25,8 @@ interface PopoverMenuProps { panelClassName?: string; onAction?: (action: string) => void; panelTitle?: string; + position?: "top" | "bottom"; + align?: "start" | "center" | "end"; } export const PopoverMenu = ({ @@ -38,8 +40,11 @@ export const PopoverMenu = ({ triggerLabel, children, buttonClassName, + panelClassName, onAction, panelTitle, + position = "top", + align = "start", }: PopoverMenuProps) => { const selectedItem = items.find((item) => item.selected); @@ -61,6 +66,17 @@ export const PopoverMenu = ({ buttonClassName, ); + const positionClasses = { + top: "bottom-full", + bottom: "top-full", + }; + + const alignClasses = { + start: "left-0", + center: "left-1/2 -translate-x-1/2", + end: "right-0", + }; + return ( {({ close }) => ( @@ -71,19 +87,40 @@ export const PopoverMenu = ({ {mode === "default" && triggerLabel ? triggerLabel : null} -
+
- +
{panelTitle && ( diff --git a/frontend/editor3d/app/components/signaled/TopBar/TopBar.tsx b/frontend/editor3d/app/components/signaled/TopBar/TopBar.tsx index 659ab1c8a4..016984f03a 100644 --- a/frontend/editor3d/app/components/signaled/TopBar/TopBar.tsx +++ b/frontend/editor3d/app/components/signaled/TopBar/TopBar.tsx @@ -1,10 +1,10 @@ import { useLocation, useParams } from "@remix-run/react"; -import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons"; -import { ButtonLink } from "~/components"; +import { faChevronLeft, faImages } from "@fortawesome/pro-solid-svg-icons"; +import { Button, ButtonLink } from "~/components"; import { AuthButtons } from "./AuthButtons"; import { SceneTitleInput } from "./SceneTitleInput"; -import { MyMoviesButton } from "./MyMoviesButton"; import { getCurrentLocationWithoutParams } from "~/utilities"; +import { Activity } from "~/pages/PageEnigma/comps/GenerateModals/Activity"; function isEditorPath(path: string) { if (path === "/") return true; @@ -47,8 +47,13 @@ export const TopBar = ({ pageName }: Props) => {
-
- +
+
+ + +
diff --git a/frontend/editor3d/app/enums/JobStatus.ts b/frontend/editor3d/app/enums/JobStatus.ts index 7b1099de11..700640e131 100644 --- a/frontend/editor3d/app/enums/JobStatus.ts +++ b/frontend/editor3d/app/enums/JobStatus.ts @@ -13,4 +13,5 @@ export enum JobType { TextToSpeech = "text_to_speech", VoiceConversion = "voice_conversion", VideoStyleTransfer = "workflow", + ImageGeneration = "image_generation", } diff --git a/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/Activity.tsx b/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/Activity.tsx new file mode 100644 index 0000000000..fa019c03f6 --- /dev/null +++ b/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/Activity.tsx @@ -0,0 +1,75 @@ +import { useSignals } from "@preact/signals-react/runtime"; +import { faBell, faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { PopoverMenu } from "~/components/reusable/Popover/Popover"; +import { CompletedCard } from "./CompletedCard"; +import { InProgressCard } from "./InProgressCard"; +import { H3, P, Tooltip } from "~/components"; +import { activeImageGenerationJobs, userMovies } from "~/signals"; + +export function Activity() { + useSignals(); + + return ( + + + + {activeImageGenerationJobs.value && + activeImageGenerationJobs.value.length > 0 && ( +
+ )} +
+ } + > +
+ {/* In progress */} + {activeImageGenerationJobs.value && + activeImageGenerationJobs.value.length > 0 && ( +
+ {activeImageGenerationJobs.value.map((movieJob) => ( + + ))} +
+ )} + + {!userMovies.value && !activeImageGenerationJobs.value ? ( +
+ +

Retrieving Activities

+
+ ) : userMovies.value && + userMovies.value.length === 0 && + !activeImageGenerationJobs.value ? ( +
+

No activities yet

+

+ Try generating something new from the featured scenes +

+
+ ) : ( +
+ {/* Completed */} +
+ {userMovies.value?.map((movie) => ( + + ))} +
+
+ )} +
+ + + ); +} diff --git a/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx b/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx index 4337a50c54..cd69bb7a65 100644 --- a/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx +++ b/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx @@ -19,7 +19,7 @@ export function getStyleName(typeInput: string) { interface Props { movie: MediaInfo; - setMovieId: (id: string) => void; + setMovieId?: (id: string) => void; } export function CompletedCard({ movie, setMovieId }: Props) { @@ -37,20 +37,23 @@ export function CompletedCard({ movie, setMovieId }: Props) { ); const styleName = movie.maybe_style_name && getStyleName(movie.maybe_style_name); + + const handleClick = () => { + setMovieId?.(movie.token); + }; + return (
{ - setMovieId(movie.token); - }} + className="flex w-full items-center justify-between rounded-lg p-2 text-start transition-all duration-150 hover:cursor-pointer hover:bg-white/10" + onClick={handleClick} >
-
+
{movie.maybe_title setLoadError(true)} @@ -60,16 +63,16 @@ export function CompletedCard({ movie, setMovieId }: Props) {
{movie.maybe_title || "Untitled"}
- {styleName && ( + {/* {styleName && (
{styleName}
- )} + )} */}
{dayjs(movie.updated_at).format("MMM D, YYYY HH:mm:ss")}
-
+ {/*
-
+
*/}
); } diff --git a/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/InProgressCard.tsx b/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/InProgressCard.tsx index 4f88e6660c..843105dc54 100644 --- a/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/InProgressCard.tsx +++ b/frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/InProgressCard.tsx @@ -58,19 +58,19 @@ export function InProgressCard({ movie }: Props) { }, []); return ( -
+
-
+
{(movie.status.status === JobState.STARTED || movie.status.status === JobState.PENDING) && ( - + )} {(movie.status.status === JobState.COMPLETE_FAILURE || movie.status.status === JobState.ATTEMPT_FAILED) && ( - + )}
-
+
{movie.request.maybe_model_title || "Untitled"}
@@ -94,7 +94,7 @@ export function InProgressCard({ movie }: Props) { diff --git a/frontend/editor3d/app/pages/PageEnigma/comps/SidePanel/SidePanel.tsx b/frontend/editor3d/app/pages/PageEnigma/comps/SidePanel/SidePanel.tsx index dd44f544c4..32f07c0730 100644 --- a/frontend/editor3d/app/pages/PageEnigma/comps/SidePanel/SidePanel.tsx +++ b/frontend/editor3d/app/pages/PageEnigma/comps/SidePanel/SidePanel.tsx @@ -27,7 +27,7 @@ export const SidePanel = () => { <>
{ }); }); +export const activeImageGenerationJobs = computed(() => { + if (!activeJobs.value) { + return undefined; + } + return activeJobs.value.filter((job) => { + return job.request.inference_category === JobType.ImageGeneration; + }); +}); + export const activeAudioJobs = computed(() => { if (!activeJobs.value) { return undefined;