@deenruv/replicate-simple-bg-plugin 1.0.0

package/dist/plugin-ui/locales/pl/index.js

@@ -0,0 +1,2 @@
+import badges from "./simpleBg.json";
+export default [badges];

package/dist/plugin-ui/locales/pl/simpleBg.json

@@ -0,0 +1,66 @@
+{
+    "input": "Wejście",
+    "output": "Wyjście",
+    "run_model": "Uruchom Model",
+    "upload_furniture_image": "Prześlij zdjęcie mebla",
+    "original_room": "Oryginalny Pokój",
+    "choose_room_type_and_theme": "Wybierz pomieszczenie i styl pokoju",
+    "select_room_type": "Wybierz pomieszczenie",
+    "select_room_theme": "Wybierz styl",
+    "generated_room": "Wygenerowany Pokój",
+    "loading": "Oczekiwanie na wynik... (ok. 2min)",
+    "download_image": "Pobierz Obraz",
+    "bedroom": "Sypialnia",
+    "living_room": "Salon",
+    "dining_room": "Jadalnia",
+    "kitchen": "Kuchnia",
+    "bathroom": "Łazienka",
+    "office": "Biuro",
+    "modern": "Nowoczesny",
+    "summer": "Letni",
+    "professional": "Profesjonalny",
+    "tropical": "Tropikalny",
+    "coastal": "Nadmorski",
+    "vintage": "Vintage",
+    "industrial": "Industrialny",
+    "neoclassic": "Neoklasyczny",
+    "choose_file": "Wybierz plik",
+    "no_file_chosen": "Nie wybrano pliku",
+    "previous_predictions": "Poprzednie Predykcje",
+    "starting": "W trakcie",
+    "preprocessing": "Przetwarzanie",
+    "succeeded": "Zakończono",
+    "failed": "Niepowodzenie",
+    "generate_new_background": "Wygeneruj nowe tło",
+    "no_room_style": "Brak stylu pomieszczenia",
+    "no_room_type": "Brak rodzaju pomieszczenia",
+    "no_file": "Brak pliku",
+    "refresh": "Odśwież liste",
+    "status": "Status",
+    "room_type": "Rodzaj pokoju",
+    "room_style": "Styl pokoju",
+    "prediction": "Predykcja",
+    "prediction_details": "Szczególy predykcji",
+    "generating_asset": "Generenowanie zdjęcia..",
+    "asset_assigned": "Zdjęcie przypisane do produktu",
+    "prompt_placeholder": "Czy chcesz coś zmienić? Opisz to tutaj!",
+    "prompt": "Zapytanie",
+    "error": {
+        "loading": "Trwa generowanie zdjęcia.."
+    },
+    "modal": {
+        "title": "Predykcja",
+        "choose_room_type": "Wybierz pomieszczenie",
+        "choose_room_theme": "Wybierz styl",
+        "generate_new": "Wygeneruj nowy",
+        "close": "Wyjdź",
+        "add_to_product": "Dodaj do produktu",
+        "assign_prediction_to_product": "Przypisz predykcję do produktu",
+        "product_name": "Nazwa",
+        "product_sku": "SKU",
+        "product_action": "Akcja",
+        "product_assign": "Przypisz",
+        "run_model_again": "Uruchom model ponownie",
+        "input_prompt": "Czy chcesz coś zmienić? Opisz to tutaj!"
+    }
+}

package/dist/plugin-ui/pages/ReplicatePage.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ReplicatePage: () => React.JSX.Element;

package/dist/plugin-ui/pages/ReplicatePage.js

@@ -0,0 +1,282 @@
+"use client";
+import { apiClient, apiUploadClient, Button, Card, CardContent, CardFooter, CardHeader, CardTitle, cn, DialogProductPicker, Label, PageBlock, ScrollArea, useLazyQuery, useMutation, useQuery, useTranslation, } from "@deenruv/react-ui-devkit";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { translationNS } from "../translation-ns.js";
+import { getPredictionSimpleBGIDQuery, getSimpleBgItemQuery, getSimpleBgPredictionsQuery, getSimpleBgRoomOptions, } from "../graphql/queries.js";
+import { SortOrder } from "../zeus/index.js";
+import React from "react";
+import { FileUpload } from "../components/FileUpload.js";
+import { getPredictionAssetMutation, startGenerateSimpleBgMutation, } from "../graphql/mutations.js";
+import { $ } from "@deenruv/admin-types";
+import { Loader2 } from "lucide-react";
+import { useSearchParams } from "react-router-dom";
+import { toast } from "sonner";
+import { RoomStyleSelect } from "../components/RoomStyleSelect.js";
+import { RoomTypeSelect } from "../components/RoomTypeSelect.js";
+export const ReplicatePage = () => {
+    const { t } = useTranslation(translationNS);
+    const [uploadState, setUploadState] = useState({
+        file: null,
+        room_style_enum: undefined,
+        room_type_enum: undefined,
+    });
+    const { data } = useQuery(getSimpleBgRoomOptions);
+    const [getPredictionID] = useLazyQuery(getPredictionSimpleBGIDQuery);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const predictionEntityID = searchParams.get("predictionId");
+    const [getPredictionItem, { data: predictionItem }] = useLazyQuery(getSimpleBgItemQuery);
+    const [loading, setLoading] = useState(false);
+    const [uploadLoading, setUploadLoading] = useState(false);
+    const [startGenerateSimpleBg] = useMutation(startGenerateSimpleBgMutation);
+    const [predictions, setPredictions] = useState();
+    const [getReplicatePredictions, { loading: loadingPredictions }] = useLazyQuery(getSimpleBgPredictionsQuery);
+    const [getPredictionAsset] = useMutation(getPredictionAssetMutation);
+    const [page, setPage] = useState(1);
+    const [filters] = useState({
+        sort: { finishedAt: SortOrder.DESC },
+        filter: { status: { eq: "succeeded" } },
+    });
+    useEffect(() => {
+        getReplicatePredictions({
+            options: {
+                ...filters,
+                take: page * 10,
+                skip: (page - 1) * 10,
+            },
+        }).then((res) => {
+            setPredictions((prev) => [...(prev || []), ...res.getSimpleBgPredictions.items].filter((p, i, a) => a.findIndex((t) => t.id === p.id) === i));
+        });
+    }, []);
+    const intervalRef = useRef(null);
+    useEffect(() => {
+        if (predictionEntityID &&
+            predictionItem?.getSimpleBgItem.status !== "succeeded") {
+            setLoading(true);
+            intervalRef.current = setInterval(() => {
+                getPredictionID({
+                    prediction_simple_bg_entity_id: predictionEntityID,
+                }).then((res) => {
+                    const predictionID = res.getSimpleBgID;
+                    if (predictionID) {
+                        getPredictionItem({ id: predictionID });
+                    }
+                });
+            }, 5000);
+        }
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [predictionEntityID]);
+    useEffect(() => {
+        if (predictionItem?.getSimpleBgItem.status === "succeeded" &&
+            intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+            setLoading(false);
+            setPage(1);
+            getReplicatePredictions({
+                options: { ...filters, take: 10, skip: 0 },
+            }).then((res) => {
+                setPredictions(res.getSimpleBgPredictions.items);
+            });
+        }
+    }, [predictionItem?.getSimpleBgItem.status]);
+    const getReplicateItem = async (id) => {
+        const scrollToElement = document.getElementById("scrollto");
+        if (scrollToElement) {
+            scrollToElement.scrollIntoView({
+                behavior: "smooth",
+                block: "start",
+            });
+        }
+        await getPredictionItem({ id });
+    };
+    const generateSimpleBg = async () => {
+        try {
+            const { file, room_style_enum, room_type_enum } = uploadState;
+            switch (true) {
+                case !room_style_enum: {
+                    toast.error(t("no_room_style"));
+                    break;
+                }
+                case !room_type_enum: {
+                    toast.error(t("no_room_type"));
+                    break;
+                }
+                case !file: {
+                    toast.error(t("no_file"));
+                    break;
+                }
+                default: {
+                    setUploadLoading(true);
+                    const { createAssets } = await apiUploadClient("mutation")({
+                        createAssets: [
+                            { input: $("input", "[CreateAssetInput!]!") },
+                            {
+                                __typename: true,
+                                "...on Asset": { id: true, source: true },
+                                "...on MimeTypeError": {
+                                    fileName: true,
+                                    mimeType: true,
+                                    errorCode: true,
+                                    message: true,
+                                },
+                            },
+                        ],
+                    }, { variables: { input: [{ file }] } });
+                    const asset = createAssets[0];
+                    if (!asset || asset.__typename !== "Asset")
+                        throw new Error("Cannot upload image");
+                    const response = await startGenerateSimpleBg({
+                        input: {
+                            assetId: asset.id,
+                            roomStyle: room_style_enum,
+                            roomType: room_type_enum,
+                        },
+                    });
+                    setSearchParams({ predictionId: response.startGenerateSimpleBg });
+                }
+            }
+        }
+        catch {
+        }
+        finally {
+            setUploadLoading(false);
+        }
+    };
+    const uploadButtonDisabled = useMemo(() => !uploadState.file ||
+        !uploadState.room_style_enum ||
+        !uploadState.room_type_enum, [uploadState.file, uploadState.room_style_enum, uploadState.room_type_enum]);
+    return (React.createElement(PageBlock, null,
+        React.createElement("div", { className: "flex justify-between gap-4" },
+            React.createElement(Card, { className: "w-full h-full" },
+                React.createElement(CardHeader, null,
+                    React.createElement(CardTitle, null, t("input"))),
+                React.createElement(CardContent, null,
+                    React.createElement("div", { className: "flex flex-col gap-4" },
+                        React.createElement(RoomTypeSelect, { roomTypes: data?.getSimpleBgOptions.roomTypes, selectedValue: uploadState.room_type_enum, onValueChange: (newValue) => setUploadState((prev) => ({
+                                ...prev,
+                                room_type_enum: newValue,
+                            })) }),
+                        React.createElement(RoomStyleSelect, { selectedValue: uploadState.room_style_enum, roomThemes: data?.getSimpleBgOptions.roomThemes, onSelect: (value) => setUploadState((prev) => ({
+                                ...prev,
+                                room_style_enum: value,
+                            })) }),
+                        React.createElement("div", null,
+                            React.createElement(Label, { className: "block text-sm font-medium mb-2" }, t("upload_image")),
+                            React.createElement(FileUpload, { value: uploadState.file, onChange: (file) => {
+                                    setUploadState((prev) => ({
+                                        ...prev,
+                                        file,
+                                    }));
+                                } })))),
+                React.createElement(CardFooter, { className: "flex justify-end items-center w-full" },
+                    React.createElement(Button, { className: "relative", type: "button", onClick: generateSimpleBg, disabled: uploadButtonDisabled || uploadLoading || loading },
+                        React.createElement("span", { className: cn("transition-opacity", uploadLoading && "opacity-0") }, t("run_model")),
+                        uploadLoading && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center" },
+                            React.createElement(Loader2, { className: "animate-spin", size: 16, strokeWidth: 2 })))))),
+            React.createElement(Card, { className: "w-full h-[500px]" },
+                React.createElement(CardHeader, null,
+                    React.createElement("div", { className: "flex w-full flex-row items-center justify-between" },
+                        React.createElement(CardTitle, null, t("previous_predictions")))),
+                React.createElement(CardContent, null,
+                    React.createElement(ScrollArea, { className: "h-[350px] pr-4", id: "scrollable" }, predictions?.length === 0 ? (React.createElement("div", { className: "flex items-center justify-center h-full" },
+                        React.createElement("p", { className: "text-muted-foreground" }, t("no_predictions")))) : (React.createElement("div", { className: "flex flex-col gap-2" }, predictions?.map((prediction) => (React.createElement(Card, { key: prediction.id, className: cn("flex items-center justify-between p-2 cursor-pointer", predictionItem?.getSimpleBgItem.id === prediction.id
+                            ? "bg-primary text-primary-foreground"
+                            : "hover:bg-secondary hover:text-secondary-foreground", loading ? "pointer-events-none" : ""), onClick: async () => {
+                            if (loading)
+                                return;
+                            await getReplicateItem(prediction.id);
+                        } },
+                        prediction.id,
+                        " - ",
+                        prediction.status,
+                        " -",
+                        " ",
+                        prediction.finishedAt))))))),
+                React.createElement(CardFooter, { className: "flex justify-end items-center w-full" },
+                    React.createElement(Button, { type: "button", disabled: loadingPredictions || loading, onClick: () => {
+                            setPage((prev) => prev + 1);
+                            getReplicatePredictions({
+                                options: {
+                                    ...filters,
+                                    take: page * 10,
+                                    skip: (page - 1) * 10,
+                                },
+                            }).then((res) => {
+                                const scrollableElement = document.getElementById("scrollable");
+                                if (scrollableElement) {
+                                    scrollableElement.scrollTop = 0;
+                                }
+                                setPredictions((prev) => [
+                                    ...(prev || []),
+                                    ...res.getSimpleBgPredictions.items,
+                                ].filter((p, i, a) => a.findIndex((t) => t.id === p.id) === i));
+                            });
+                        } }, t("refresh"))))),
+        React.createElement(Card, { className: "w-full mt-4" },
+            React.createElement(CardHeader, null,
+                React.createElement("div", { className: "flex w-full flex-row items-center justify-between" },
+                    React.createElement(CardTitle, null, t("output")))),
+            React.createElement(CardContent, null, loading ? (React.createElement("div", { className: "flex flex-col gap-2 items-center justify-center h-[350px] w-full" },
+                React.createElement(Loader2, { className: "animate-spin text-primary", size: 24, strokeWidth: 2 }),
+                React.createElement("p", { className: "text-muted-foreground" }, t("loading")))) : predictionItem?.getSimpleBgItem?.image ? (React.createElement("div", { className: "h-[450px] w-full flex justify-between items-start gap-8" },
+                React.createElement("div", { className: "relative w-full h-full overflow-hidden rounded-lg" },
+                    React.createElement("img", { className: "absolute inset-0 w-full h-full object-cover rounded-md", src: predictionItem.getSimpleBgItem.image || "/placeholder.svg", alt: "Generated Room" })),
+                React.createElement(Card, { className: "w-full h-full flex-col flex justify-between" },
+                    React.createElement("div", { className: "flex flex-col gap-2" },
+                        React.createElement(CardHeader, null,
+                            React.createElement(CardTitle, null, t("prediction_details"))),
+                        React.createElement(CardContent, null,
+                            predictionItem.getSimpleBgItem.roomType && (React.createElement("div", null,
+                                React.createElement("p", { className: "text-sm font-semibold" },
+                                    t("room_type"),
+                                    ":"),
+                                React.createElement("p", { className: "text-sm text-muted-foreground" }, predictionItem.getSimpleBgItem.roomType))),
+                            predictionItem.getSimpleBgItem.roomStyle && (React.createElement("div", null,
+                                React.createElement("p", { className: "text-sm font-semibold" },
+                                    t("room_style"),
+                                    ":"),
+                                React.createElement("p", { className: "text-sm text-muted-foreground" }, predictionItem.getSimpleBgItem.roomStyle))),
+                            predictionItem.getSimpleBgItem.status && (React.createElement("div", null,
+                                React.createElement("p", { className: "text-sm font-semibold" },
+                                    t("status"),
+                                    ":"),
+                                React.createElement("p", { className: "text-sm text-muted-foreground" }, predictionItem.getSimpleBgItem.status))))),
+                    React.createElement(CardFooter, null,
+                        React.createElement(DialogProductPicker, { initialValue: "", mode: "product", onSubmit: async ({ productId }) => {
+                                const response = await apiClient("query")({
+                                    product: [{ id: productId }, { assets: { id: true } }],
+                                });
+                                const asset = await getPredictionAsset({
+                                    input: {
+                                        predictionId: predictionEntityID ?? "",
+                                        productId,
+                                    },
+                                });
+                                const assetIds = response.product?.assets
+                                    .map((asset) => asset.id)
+                                    .concat(asset.getPredictionAsset.id);
+                                const { updateProduct } = await apiClient("mutation")({
+                                    updateProduct: [
+                                        { input: { id: productId, assetIds } },
+                                        { id: true },
+                                    ],
+                                });
+                                // toast(
+                                //   <div className="flex gap-2 items-center">
+                                //     <p className="text-sm font-semibold">
+                                //       {t("prediction_assigned")}
+                                //     </p>
+                                //     <Link to={Routes.products.to(updateProduct.id)}>
+                                //       {t("view_product")}
+                                //     </Link>
+                                //   </div>,
+                                // );
+                            } }))))) : (React.createElement("div", { className: "flex items-center justify-center h-[350px]" },
+                React.createElement("p", { className: "text-muted-foreground" }, t("no_output")))))),
+        React.createElement("div", { id: "scrollto", className: "h-[50px]" })));
+};

package/dist/plugin-ui/pages/ReplicateProductSidebar.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ReplicateProductSidebar: React.FC;

package/dist/plugin-ui/pages/ReplicateProductSidebar.js

@@ -0,0 +1,186 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Card, CardHeader, Button, useDetailView, useMutation, Dialog, useTranslation, CardContent, cn, useQuery, DialogContent, DialogHeader, DialogTitle, CardTitle, useLazyQuery, Textarea, } from "@deenruv/react-ui-devkit";
+import { translationNS } from "../translation-ns";
+import { getPredictionAssetMutation, startGenerateSimpleBgMutation, } from "../graphql/mutations.js";
+import { ChevronDown, Image, Loader2 } from "lucide-react";
+import { getPredictionSimpleBGIDQuery, getSimpleBgItemQuery, getSimpleBgRoomOptions, } from "../graphql/queries.js";
+import { toast } from "sonner";
+import { RoomStyleSelect } from "../components/RoomStyleSelect.js";
+import { RoomTypeSelect } from "../components/RoomTypeSelect.js";
+export const ReplicateProductSidebar = () => {
+    const { t } = useTranslation(translationNS);
+    const { id: productId, entity, markAsDirty, form: { base: { state, setField }, }, } = useDetailView("products-detail-view");
+    const [form, setForm] = useState({ roomType: undefined, roomStyle: undefined, prompt: null });
+    const { data } = useQuery(getSimpleBgRoomOptions);
+    const [getPredictionItem, { data: predictionItem, setData: setPredictionItem },] = useLazyQuery(getSimpleBgItemQuery);
+    const [getPredictionID] = useLazyQuery(getPredictionSimpleBGIDQuery);
+    const [getPredictionAsset] = useMutation(getPredictionAssetMutation);
+    const [startGenerateSimpleBg, { loading: gettingInitialID }] = useMutation(startGenerateSimpleBgMutation);
+    const [predictionEntityID, setPredictionEntityID] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [isDialogVisible, setIsDialogVisible] = useState(false);
+    const [isOpen, setIsOpen] = useState(true);
+    const [height, setHeight] = useState(undefined);
+    const contentRef = useRef(null);
+    const intervalRef = useRef(null);
+    useEffect(() => {
+        if (predictionEntityID &&
+            predictionItem?.getSimpleBgItem.status !== "succeeded") {
+            setLoading(true);
+            intervalRef.current = setInterval(() => {
+                getPredictionID({
+                    prediction_simple_bg_entity_id: predictionEntityID,
+                }).then((res) => {
+                    const predictionID = res.getSimpleBgID;
+                    if (predictionID) {
+                        getPredictionItem({ id: predictionID });
+                    }
+                });
+            }, 5000);
+        }
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [predictionEntityID]);
+    useEffect(() => {
+        if (predictionItem?.getSimpleBgItem.status === "succeeded" &&
+            intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+            setIsDialogVisible(true);
+            setLoading(false);
+        }
+    }, [predictionItem?.getSimpleBgItem.status]);
+    const handleClose = () => {
+        if (loading) {
+            toast.error(t("error.loading"));
+            return;
+        }
+        setIsDialogVisible(false);
+        setPredictionEntityID(null);
+        setForm({ roomType: undefined, roomStyle: undefined, prompt: null });
+    };
+    useEffect(() => {
+        if (contentRef.current) {
+            setHeight(isOpen ? contentRef.current.scrollHeight : 0);
+        }
+    }, [isOpen, contentRef.current, data?.getSimpleBgOptions]);
+    const runModel = async () => {
+        const assetId = entity?.featuredAsset?.id;
+        if (assetId) {
+            const { roomStyle, roomType, prompt } = form;
+            const response = await startGenerateSimpleBg({
+                input: { assetId, roomType, roomStyle, prompt },
+            });
+            const id = response.startGenerateSimpleBg;
+            if (!id) {
+                toast.error(t("error.start_model_run"));
+                return;
+            }
+            setPredictionEntityID(id);
+        }
+    };
+    const assignPredictionToProduct = async () => {
+        if (!productId || !predictionEntityID)
+            return;
+        const asset = await getPredictionAsset({
+            input: { predictionId: predictionEntityID, productId: productId },
+        });
+        if (!asset || !entity)
+            return;
+        const newAsset = asset.getPredictionAsset;
+        if (state.assetIds?.value) {
+            setField("assetIds", [...state.assetIds.value, newAsset.id]);
+        }
+        markAsDirty();
+        setIsDialogVisible(false);
+        setPredictionEntityID(null);
+        setForm({ roomType: undefined, roomStyle: undefined, prompt: null });
+        setLoading(false);
+        toast.success(t("success.asset_assigned"));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "w-full flex flex-col gap-4" },
+            React.createElement(Card, { className: "overflow-hidden rounded-lg border bg-card border-l-orange-200 duration-200 hover:shadow h-full border-l-4" },
+                React.createElement(CardHeader, { className: "p-4 flex flex-row items-center justify-between cursor-pointer select-none", onClick: () => setIsOpen(!isOpen) },
+                    React.createElement("div", { className: "flex items-center gap-2" },
+                        React.createElement(Image, { className: "w-5 h-5 text-white/70" }),
+                        React.createElement("span", { className: "font-semibold tracking-tight text-lg" }, t("generate_new_background"))),
+                    React.createElement(ChevronDown, { className: cn("h-5 w-5 text-white/70 transition-transform duration-300 ease-in-out", isOpen && "transform -rotate-180") })),
+                React.createElement("div", { ref: contentRef, style: { height: height !== undefined ? `${height}px` : undefined }, className: cn("transition-all duration-300 ease-in-out p-2", !isOpen && "opacity-0") },
+                    React.createElement(CardContent, { className: "pt-0 pb-4 px-4" },
+                        React.createElement("div", { className: "flex flex-col gap-4" },
+                            React.createElement(RoomStyleSelect, { selectedValue: form.roomStyle, roomThemes: data?.getSimpleBgOptions.roomThemes, onSelect: (value) => setForm((prev) => ({
+                                    ...prev,
+                                    roomStyle: value,
+                                })) }),
+                            React.createElement(RoomTypeSelect, { roomTypes: data?.getSimpleBgOptions.roomTypes, selectedValue: form.roomType, onValueChange: (newValue) => {
+                                    setForm((prev) => ({
+                                        ...prev,
+                                        roomType: newValue,
+                                    }));
+                                } }),
+                            React.createElement(Button, { className: "mt-2 relative", disabled: (!form.roomType || !form.roomStyle || loading) &&
+                                    !isDialogVisible, onClick: runModel },
+                                React.createElement("span", { className: cn("transition-opacity", loading && "opacity-0") }, t("run_model")),
+                                loading && (React.createElement("div", { className: "absolute inset-0 flex items-center gap-2 justify-center" },
+                                    React.createElement(Loader2, { className: "animate-spin", size: 16, strokeWidth: 2 }),
+                                    React.createElement("span", null, t("generating_asset")))))))))),
+        React.createElement(Dialog, { open: isDialogVisible, onOpenChange: handleClose },
+            React.createElement(DialogContent, { className: "w-full lg:max-w-[900px] xl:max-w-[1100px] h-[600px] grid-rows-[auto_1fr_auto]", onInteractOutside: (e) => e.preventDefault() },
+                React.createElement(DialogHeader, null,
+                    React.createElement(DialogTitle, null, t("modal.title"))),
+                React.createElement("div", { className: "w-full h-full relative grid md:grid-cols-[1fr_auto] gap-2" },
+                    React.createElement("div", { className: "flex flex-col gap-2 h-full" },
+                        React.createElement("div", { className: "relative w-full min-h-[300px] grow overflow-hidden rounded-lg" }, predictionItem?.getSimpleBgItem.image ? (React.createElement("img", { className: "absolute inset-0 w-full h-full object-contain rounded-md", src: predictionItem?.getSimpleBgItem.image, alt: "Generated Room" })) : (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center" },
+                            React.createElement(Image, { className: "w-10 h-10 text-muted-foreground" }))))),
+                    React.createElement("div", { className: "flex flex-col gap-2 w-[300px]" },
+                        React.createElement(Card, { className: "w-full h-full flex-col flex justify-between" },
+                            React.createElement("div", { className: "flex flex-col gap-2 h-full" },
+                                React.createElement(CardHeader, null,
+                                    React.createElement(CardTitle, null, t("prediction_details"))),
+                                React.createElement(CardContent, { className: "flex flex-col justify-between h-full" },
+                                    React.createElement("div", { className: "flex flex-col gap-2 h-full" },
+                                        React.createElement("div", { className: "flex flex-col gap-1" },
+                                            React.createElement("p", { className: "text-sm font-semibold" },
+                                                t("room_type"),
+                                                ":"),
+                                            React.createElement("p", { className: "text-sm text-muted-foreground" }, t(form.roomType?.toLowerCase() ||
+                                                predictionItem?.getSimpleBgItem.roomType ||
+                                                ""))),
+                                        React.createElement("div", { className: "flex flex-col gap-1" },
+                                            React.createElement("p", { className: "text-sm font-semibold" },
+                                                t("room_style"),
+                                                ":"),
+                                            React.createElement("p", { className: "text-sm text-muted-foreground" }, t(form.roomStyle?.toLowerCase() ||
+                                                predictionItem?.getSimpleBgItem.roomStyle ||
+                                                ""))),
+                                        React.createElement("div", { className: "flex flex-col gap-1" },
+                                            React.createElement("p", { className: "text-sm font-semibold" },
+                                                t("status"),
+                                                ":"),
+                                            React.createElement("p", { className: "text-sm text-muted-foreground" }, t(form.roomType?.toLowerCase() ||
+                                                predictionItem?.getSimpleBgItem.status ||
+                                                ""))),
+                                        React.createElement("div", { className: "flex flex-col gap-1" },
+                                            React.createElement("p", { className: "text-sm font-semibold" },
+                                                t("prompt"),
+                                                ":"),
+                                            React.createElement(Textarea, { className: "w-full h-24 resize-none", value: form.prompt || "", onChange: (e) => setForm((prev) => ({
+                                                    ...prev,
+                                                    prompt: e.target.value,
+                                                })), placeholder: t("modal.prompt_placeholder"), disabled: loading })),
+                                        React.createElement("div", { className: "w-full h-full flex flex-col justify-end" },
+                                            React.createElement(Button, { variant: "secondary", onClick: async () => {
+                                                    setPredictionEntityID(null);
+                                                    setPredictionItem(null);
+                                                    await runModel();
+                                                }, disabled: loading || gettingInitialID }, loading ? (React.createElement("div", { className: "flex items-center gap-2" },
+                                                React.createElement(Loader2, { className: "animate-spin", size: 16, strokeWidth: 2 }),
+                                                t("generating_asset"))) : (t("modal.run_model_again")))))))),
+                        React.createElement("div", { className: "flex justify-end" },
+                            React.createElement(Button, { onClick: assignPredictionToProduct, disabled: !predictionItem?.getSimpleBgItem.image }, t("modal.assign_prediction_to_product")))))))));
+};

package/dist/plugin-ui/translation-ns.d.ts

@@ -0,0 +1 @@
+export declare const translationNS: string;

package/dist/plugin-ui/translation-ns.js

@@ -0,0 +1 @@
+export const translationNS = Symbol("replicate-simple-bg-plugin").toString();

package/dist/plugin-ui/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "target": "ES2020",
+        "jsx": "react",
+        "outDir": "../../dist/plugin-ui",
+        "importHelpers": true,
+        "declaration": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noImplicitAny": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["./**/*.tsx", "./**/*.json", "./**/*.ts"]
+}

package/dist/plugin-ui/types.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { z } from "zod";
+export declare const formSchema: z.ZodObject<{
+    file: z.ZodUnion<[z.ZodType<File, z.ZodTypeDef, File>, z.ZodNull]>;
+    room_type_enum: z.ZodString;
+    room_style_enum: z.ZodString;
+    prompt: z.ZodNullable<z.ZodOptional<z.ZodString>>;
+}, "strip", z.ZodTypeAny, {
+    file: File | null;
+    room_style_enum: string;
+    room_type_enum: string;
+    prompt?: string | null | undefined;
+}, {
+    file: File | null;
+    room_style_enum: string;
+    room_type_enum: string;
+    prompt?: string | null | undefined;
+}>;
+export type FormValues = z.infer<typeof formSchema>;
+export declare const useReplicateForm: () => import("react-hook-form").UseFormReturn<{
+    file: File | null;
+    room_style_enum: string;
+    room_type_enum: string;
+    prompt?: string | null | undefined;
+}, any, {
+    file: File | null;
+    room_style_enum: string;
+    room_type_enum: string;
+    prompt?: string | null | undefined;
+}>;
+export interface CustomFileInputProps {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    accept?: string;
+    className?: string;
+}

package/dist/plugin-ui/types.js

@@ -0,0 +1,15 @@
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+export const formSchema = z.object({
+    file: z.union([z.instanceof(File), z.null()]),
+    room_type_enum: z.string().min(1),
+    room_style_enum: z.string().min(1),
+    prompt: z.string().optional().nullable(),
+});
+export const useReplicateForm = () => {
+    // zodResolver type constraint mismatches due to zod v3/v4 compat layer;
+    // cast through unknown to bridge the incompatible ZodType definitions.
+    const resolver = zodResolver(formSchema);
+    return useForm({ resolver });
+};

package/dist/plugin-ui/zeus/const.d.ts

@@ -0,0 +1,6 @@
+export declare const AllTypesProps: Record<string, any>;
+export declare const ReturnTypes: Record<string, any>;
+export declare const Ops: {
+    query: "Query";
+    mutation: "Mutation";
+};