@tomako/tools-runtime 0.1.0

package/src/features/tools/product-poster-generator/widget/product-poster-generator.tsx

@@ -0,0 +1,663 @@
+"use client";
+
+import { ChevronDown, FileImage } from "lucide-react";
+import {
+    useMemo,
+    useRef,
+    useState,
+    type ChangeEvent,
+    type FormEvent,
+} from "react";
+
+import { Button } from "@tomako/ui/button";
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "@tomako/ui/collapsible";
+import { Input, Textarea } from "@tomako/ui/input";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import {
+    PRODUCT_POSTER_STYLES,
+    productPosterGeneratorInputSchema,
+    type ProductPosterFormat,
+    type ProductPosterStyle,
+} from "../../../../lib/tools/product-poster-generator-schema";
+import { cn } from "@tomako/ui/cn";
+import {
+    fetchProductPosterGenerationTask,
+    submitProductPosterGeneration,
+} from "../../../../host/client";
+
+import {
+    ToolActionBar,
+    ToolEmptyPanel,
+    ToolErrorBanner,
+    ToolErrorPanel,
+    ToolField,
+    ToolFileUpload,
+    ToolLoadingPanel,
+    ToolPreviewPanel,
+    ToolPrimaryButton,
+    ToolResetButton,
+    ToolResultActions,
+    ToolResultHeader,
+    ToolStatusLine,
+    ToolWorkspaceLayout,
+    toolInputClass,
+    toolInvalidControlClass,
+    toolTextareaClass,
+    type ToolLoadingStep,
+} from "../../../../components/tools/workspace";
+import {
+    MAX_TASK_POLL_ATTEMPTS,
+    POSTER_FORMAT_OPTIONS,
+    POSTER_INTENT_OPTIONS,
+    TASK_POLL_INTERVAL_MS,
+    defaultForm,
+    errorCopyKeys,
+} from "./constants";
+import {
+    ColorPaletteField,
+    ImagePreview,
+    ScreenshotUploadField,
+    SelectField,
+} from "./form-controls";
+import {
+    getAssetLine,
+    getBrandColorPresetId,
+    getPosterIntentId,
+    getPosterResultError,
+    getSafeErrorMessage,
+    loadingProgress,
+    loadingStepIndex,
+    readImageAsDataUrl,
+    sleep,
+    toGeneratedPoster,
+} from "./helpers";
+import { ResultNoteCard } from "./result-shell";
+import type {
+    BrandColorPresetId,
+    FieldErrorKey,
+    FieldErrors,
+    FormState,
+    PosterIntentId,
+    ResultState,
+} from "./types";
+
+export function ProductPosterGenerator() {
+  const locale = useLocale();
+  const taskLocale = locale as AppLocale;
+  const t = useTranslations("toolsPages.productPosterGenerator.widget");
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const logoInputRef = useRef<HTMLInputElement | null>(null);
+  const screenshotInputRef = useRef<HTMLInputElement | null>(null);
+  const generationSeqRef = useRef(0);
+  const [form, setForm] = useState<FormState>(defaultForm);
+  const [result, setResult] = useState<ResultState>({ phase: "idle" });
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [formError, setFormError] = useState<string | null>(null);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const formatLabels = t.raw("formatLabels") as Record<ProductPosterFormat, string>;
+  const styleLabels = t.raw("styleLabels") as Record<ProductPosterStyle, string>;
+  const posterIntentLabels = t.raw("posterIntentLabels") as Record<PosterIntentId, string>;
+  const brandPaletteLabels = t.raw("brandPaletteLabels") as Record<BrandColorPresetId, string>;
+  const selectedPosterIntentId = getPosterIntentId(form);
+
+  const posterIntentOptions = useMemo(
+    () =>
+      POSTER_INTENT_OPTIONS.map((option) => ({
+        value: option.id,
+        label: posterIntentLabels[option.id],
+      })),
+    [posterIntentLabels],
+  );
+
+  const formatOptions = useMemo(
+    () => POSTER_FORMAT_OPTIONS.map((value) => ({ value, label: formatLabels[value] })),
+    [formatLabels],
+  );
+
+  const styleOptions = useMemo(
+    () => PRODUCT_POSTER_STYLES.map((value) => ({ value, label: styleLabels[value] })),
+    [styleLabels],
+  );
+
+  const selectedSummary = useMemo(() => {
+    return [
+      posterIntentLabels[selectedPosterIntentId],
+      formatLabels[form.format],
+      styleLabels[form.style],
+    ].join(" / ");
+  }, [
+    form.format,
+    form.style,
+    formatLabels,
+    posterIntentLabels,
+    selectedPosterIntentId,
+    styleLabels,
+  ]);
+
+  const loadingSteps = useMemo(() => {
+    const index =
+      result.phase === "submitting" || result.phase === "polling"
+        ? loadingStepIndex(result.phase, result.phase === "polling" ? result.status : undefined)
+        : 0;
+    return [
+      t("loadingSteps.prepare"),
+      t("loadingSteps.compose"),
+      t("loadingSteps.render"),
+      t("loadingSteps.finish"),
+    ].map<ToolLoadingStep>((title, stepIndex) => ({
+      title,
+      status: stepIndex < index ? "complete" : stepIndex === index ? "active" : "pending",
+    }));
+  }, [result, t]);
+
+  const busy = result.phase === "submitting" || result.phase === "polling";
+
+  function scrollToResult() {
+    window.requestAnimationFrame(() => {
+      resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+  }
+
+  function clearFieldError(key: keyof FormState) {
+    if (key in fieldErrors) {
+      setFieldErrors((current) => {
+        const next = { ...current };
+        delete next[key as FieldErrorKey];
+        return next;
+      });
+    }
+    setFormError(null);
+  }
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    generationSeqRef.current += 1;
+    setForm((current) => ({ ...current, [key]: value }));
+    clearFieldError(key);
+    setResult((current) => {
+      if (current.phase === "submitting" || current.phase === "polling") return { phase: "idle" };
+      if (current.phase === "error" && current.kind === "input") return { phase: "idle" };
+      return current;
+    });
+  }
+
+  function updatePosterIntent(intentId: string) {
+    const option =
+      POSTER_INTENT_OPTIONS.find((item) => item.id === intentId) ?? POSTER_INTENT_OPTIONS[0];
+    generationSeqRef.current += 1;
+    setForm((current) => ({
+      ...current,
+      targetScene: option.targetScene,
+      channel: option.channel,
+    }));
+    setFormError(null);
+    setResult((current) => {
+      if (current.phase === "submitting" || current.phase === "polling") return { phase: "idle" };
+      if (current.phase === "error" && current.kind === "input") return { phase: "idle" };
+      return current;
+    });
+  }
+
+  function chooseLogo() {
+    if (logoInputRef.current) logoInputRef.current.value = "";
+    logoInputRef.current?.click();
+  }
+
+  async function setLogoFromEvent(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.currentTarget.files?.[0];
+    generationSeqRef.current += 1;
+    if (!file) {
+      setForm((current) => ({ ...current, logoName: undefined, logoDataUrl: undefined }));
+      return;
+    }
+
+    const dataUrl = await readImageAsDataUrl(file);
+    setForm((current) => ({ ...current, logoName: file.name, logoDataUrl: dataUrl }));
+  }
+
+  function removeLogo() {
+    generationSeqRef.current += 1;
+    if (logoInputRef.current) logoInputRef.current.value = "";
+    setForm((current) => ({ ...current, logoName: undefined, logoDataUrl: undefined }));
+  }
+
+  function chooseScreenshots() {
+    if (screenshotInputRef.current) screenshotInputRef.current.value = "";
+    screenshotInputRef.current?.click();
+  }
+
+  async function setScreenshotsFromEvent(event: ChangeEvent<HTMLInputElement>) {
+    const selectedFiles = Array.from(event.currentTarget.files ?? []).slice(0, 4);
+    generationSeqRef.current += 1;
+    const screenshotDataUrls = await Promise.all(selectedFiles.map(readImageAsDataUrl));
+    setForm((current) => ({
+      ...current,
+      screenshotNames: selectedFiles.map((file) => file.name),
+      screenshotDataUrls,
+    }));
+  }
+
+  function removeScreenshot(indexToRemove: number) {
+    generationSeqRef.current += 1;
+    setForm((current) => ({
+      ...current,
+      screenshotNames: current.screenshotNames.filter((_, index) => index !== indexToRemove),
+      screenshotDataUrls: current.screenshotDataUrls.filter((_, index) => index !== indexToRemove),
+    }));
+  }
+
+  function setValidationError(field: FieldErrorKey, message: string) {
+    setFieldErrors({ [field]: message });
+    setFormError(message);
+    setResult({
+      phase: "error",
+      kind: "input",
+      field,
+      message,
+    });
+    scrollToResult();
+  }
+
+  async function generatePoster() {
+    const parsed = productPosterGeneratorInputSchema.safeParse(form);
+    if (!parsed.success) {
+      const issue = parsed.error.issues[0];
+      const field = String(issue?.path[0] ?? "form") as FieldErrorKey;
+      const fieldErrorKey: Partial<Record<FieldErrorKey, string>> = {
+        productName: "errors.productName",
+        productContext: "errors.productContext",
+        audience: "errors.audience",
+        primaryCta: "errors.primaryCta",
+        productUrl: "errors.invalidUrl",
+      };
+      const fieldMessageKey = fieldErrorKey[field];
+      const message =
+        issue?.message === "invalid_url"
+          ? t("errors.invalidUrl")
+          : issue?.message === "weak_context"
+            ? t("errors.weakContext")
+            : fieldMessageKey
+              ? t(fieldMessageKey as never)
+              : t("errors.required");
+      setValidationError(field, message);
+      return;
+    }
+
+    setFormError(null);
+    setFieldErrors({});
+    const generationId = generationSeqRef.current + 1;
+    generationSeqRef.current = generationId;
+    const input = {
+      ...parsed.data,
+      logoDataUrl: form.logoDataUrl,
+      screenshotDataUrls: form.screenshotDataUrls,
+    };
+    const posterInput = parsed.data;
+    const posterSettingsSummary = selectedSummary;
+
+    setResult({ phase: "submitting" });
+    scrollToResult();
+
+    let submitted: { taskId: string; status: string };
+    try {
+      submitted = await submitProductPosterGeneration(input, taskLocale);
+    } catch (error) {
+      if (generationSeqRef.current === generationId) {
+        setResult({
+          phase: "error",
+          kind: "submit",
+          message: getSafeErrorMessage(error, t("errors.submitFailed")),
+        });
+      }
+      return;
+    }
+
+    if (generationSeqRef.current !== generationId) return;
+
+    const taskId = submitted.taskId;
+    setResult({ phase: "polling", taskId, status: submitted.status });
+
+    for (let attempt = 0; attempt < MAX_TASK_POLL_ATTEMPTS; attempt += 1) {
+      try {
+        const task = await fetchProductPosterGenerationTask(taskId);
+        if (generationSeqRef.current !== generationId) return;
+
+        if (task.data) {
+          setResult({
+            phase: "ready",
+            data: toGeneratedPoster({
+              result: task.data,
+              taskId,
+              input: posterInput,
+              settingsSummary: posterSettingsSummary,
+            }),
+          });
+          return;
+        }
+
+        if (task.status === "FAILED" || task.status === "RESULT_INVALID") {
+          const errorMeta = getPosterResultError(task.errorCode);
+          setResult({
+            phase: "error",
+            kind: errorMeta.kind,
+            taskId,
+            message: t(`errors.${errorMeta.key}` as never),
+          });
+          return;
+        }
+
+        setResult({ phase: "polling", taskId, status: task.status });
+      } catch (error) {
+        if (generationSeqRef.current !== generationId) return;
+        setResult({
+          phase: "error",
+          kind: "result",
+          taskId,
+          message: getSafeErrorMessage(error, t("errors.pollFailed")),
+        });
+        return;
+      }
+
+      await sleep(TASK_POLL_INTERVAL_MS);
+    }
+
+    if (generationSeqRef.current === generationId) {
+      setResult({
+        phase: "error",
+        kind: "timeout",
+        taskId,
+        message: t("errors.timeout"),
+      });
+    }
+  }
+
+  function downloadPosterPng() {
+    if (result.phase !== "ready") return;
+    const link = document.createElement("a");
+    link.href = result.data.imageUrl;
+    link.download = `${result.data.fileBaseName}-poster.webp`;
+    link.target = "_blank";
+    link.rel = "noreferrer";
+    link.click();
+  }
+
+  function reset() {
+    generationSeqRef.current += 1;
+    if (logoInputRef.current) logoInputRef.current.value = "";
+    if (screenshotInputRef.current) screenshotInputRef.current.value = "";
+    setForm(defaultForm);
+    setResult({ phase: "idle" });
+    setFieldErrors({});
+    setFormError(null);
+    setAdvancedOpen(false);
+  }
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    void generatePoster();
+  }
+
+  const formPanel = (
+    <form className="flex min-h-full flex-col" onSubmit={handleSubmit}>
+      <div className="-mx-1 min-w-0 flex-1 space-y-5 overflow-x-hidden px-1 pb-5">
+        <ToolField label={t("productNameLabel")} required error={fieldErrors.productName}>
+          <Input
+            aria-invalid={Boolean(fieldErrors.productName)}
+            className={cn(toolInputClass, fieldErrors.productName ? toolInvalidControlClass : "")}
+            placeholder={t("productNamePlaceholder")}
+            value={form.productName}
+            onChange={(event) => update("productName", event.target.value)}
+          />
+        </ToolField>
+
+        <ToolField label={t("contextLabel")} required error={fieldErrors.productContext}>
+          <Textarea
+            aria-invalid={Boolean(fieldErrors.productContext)}
+            className={cn(
+              toolTextareaClass,
+              "min-h-32",
+              fieldErrors.productContext ? toolInvalidControlClass : "",
+            )}
+            placeholder={t("contextPlaceholder")}
+            value={form.productContext}
+            onChange={(event) => update("productContext", event.target.value)}
+          />
+        </ToolField>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          <ToolField label={t("audienceLabel")} required error={fieldErrors.audience}>
+            <Input
+              aria-invalid={Boolean(fieldErrors.audience)}
+              className={cn(toolInputClass, fieldErrors.audience ? toolInvalidControlClass : "")}
+              placeholder={t("audiencePlaceholder")}
+              value={form.audience}
+              onChange={(event) => update("audience", event.target.value)}
+            />
+          </ToolField>
+          <ToolField label={t("ctaLabel")} required error={fieldErrors.primaryCta}>
+            <Input
+              aria-invalid={Boolean(fieldErrors.primaryCta)}
+              className={cn(toolInputClass, fieldErrors.primaryCta ? toolInvalidControlClass : "")}
+              placeholder={t("ctaPlaceholder")}
+              value={form.primaryCta}
+              onChange={(event) => update("primaryCta", event.target.value)}
+            />
+          </ToolField>
+        </div>
+
+        <SelectField
+          label={t("posterIntentLabel")}
+          required
+          value={selectedPosterIntentId}
+          options={posterIntentOptions}
+          onValueChange={updatePosterIntent}
+        />
+
+        <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+          <CollapsibleTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              className="h-11 w-full justify-between rounded-lg border-[#E4E9F1] bg-white px-3.5 text-sm font-semibold text-[#111111] shadow-none hover:bg-[#F6F7F8]"
+            >
+              {t("advancedLabel")}
+              <ChevronDown aria-hidden className="size-4 text-[#777777]" />
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="mt-5 grid gap-5">
+            <ToolField label={t("productUrlLabel")} hint={t("optional")} error={fieldErrors.productUrl}>
+              <Input
+                aria-invalid={Boolean(fieldErrors.productUrl)}
+                className={cn(toolInputClass, fieldErrors.productUrl ? toolInvalidControlClass : "")}
+                placeholder={t("productUrlPlaceholder")}
+                type="url"
+                value={form.productUrl ?? ""}
+                onChange={(event) => update("productUrl", event.target.value)}
+              />
+            </ToolField>
+
+            <ToolField label={t("logoUpload")} hint={t("optional")}>
+              <ToolFileUpload
+                inputRef={logoInputRef}
+                hasFile={Boolean(form.logoName)}
+                fileName={form.logoName}
+                chooseLabel={t("logoChoose")}
+                selectedLabel={t("logoReplace")}
+                selectedMeta={t("uploadHint")}
+                removeLabel={t("logoRemove")}
+                preview={<ImagePreview src={form.logoDataUrl} />}
+                onChoose={chooseLogo}
+                onRemove={removeLogo}
+                onChange={setLogoFromEvent}
+              />
+            </ToolField>
+
+            <ScreenshotUploadField
+              inputRef={screenshotInputRef}
+              label={t("screenshotUpload")}
+              hint={t("screenshotUploadHint")}
+              chooseLabel={t("screenshotChoose")}
+              selectedLabel={t("screenshotCount", { count: form.screenshotNames.length })}
+              removeLabel={t("screenshotRemove")}
+              names={form.screenshotNames}
+              previews={form.screenshotDataUrls}
+              onChoose={chooseScreenshots}
+              onChange={setScreenshotsFromEvent}
+              onRemove={removeScreenshot}
+            />
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <SelectField
+                label={t("formatLabel")}
+                value={form.format}
+                options={formatOptions}
+                onValueChange={(value) => update("format", value as ProductPosterFormat)}
+              />
+              <SelectField
+                label={t("styleLabel")}
+                value={form.style}
+                options={styleOptions}
+                onValueChange={(value) => update("style", value as ProductPosterStyle)}
+              />
+            </div>
+
+            <ColorPaletteField
+              label={t("brandColorsLabel")}
+              hint={t("optional")}
+              labels={brandPaletteLabels}
+              value={getBrandColorPresetId(form.brandColors)}
+              onChange={(preset) => update("brandColors", preset.value)}
+            />
+          </CollapsibleContent>
+        </Collapsible>
+
+        {formError ? <ToolErrorBanner>{formError}</ToolErrorBanner> : null}
+        <ToolStatusLine>{t("reviewNote")}</ToolStatusLine>
+      </div>
+
+      <ToolActionBar attached>
+        <ToolPrimaryButton type="submit" disabled={busy}>
+          {busy ? t("submitLoading") : t("submit")}
+        </ToolPrimaryButton>
+        <ToolResetButton onClick={reset}>{t("reset")}</ToolResetButton>
+      </ToolActionBar>
+    </form>
+  );
+
+  const previewPanel = (
+    <ToolPreviewPanel contentClassName="bg-[#FAFAFA]">
+      <div ref={resultRef} className="scroll-mt-24" />
+
+      {result.phase === "idle" ? (
+        <ToolEmptyPanel
+          icon={
+            <span className="mx-auto flex size-12 items-center justify-center rounded-lg bg-white text-[#111111] shadow-sm">
+              <FileImage aria-hidden className="size-5" />
+            </span>
+          }
+          title={t("emptyPreviewTitle")}
+          body={t("emptyPreviewHint")}
+          className="min-h-0 flex-1 border-0 bg-transparent"
+        />
+      ) : null}
+
+      {result.phase === "submitting" || result.phase === "polling" ? (
+        <ToolLoadingPanel
+          label={t("loadingTitle")}
+          progress={loadingProgress(result.phase, result.phase === "polling" ? result.status : undefined)}
+          steps={loadingSteps}
+          tipLabel={t("loadingTipLabel")}
+          tip={t("loadingTip")}
+        />
+      ) : null}
+
+      {result.phase === "error" ? (
+        <div className="flex min-h-0 flex-1 items-center justify-center">
+          <div className="grid w-full max-w-xl gap-4">
+            <ToolErrorPanel
+              title={t(errorCopyKeys[result.kind].title as never)}
+              body={result.message}
+            />
+            <ToolPrimaryButton onClick={() => void generatePoster()}>
+              {t("retry")}
+            </ToolPrimaryButton>
+          </div>
+        </div>
+      ) : null}
+
+      {result.phase === "ready" ? (
+        <div className="min-h-0 flex-1 overflow-y-auto pr-1">
+          <div className="grid gap-5">
+            <ToolResultHeader
+              eyebrow={t("readyKicker")}
+              title={t("readyTitle")}
+              body={result.data.summary ?? t("readyHint")}
+              actions={
+                <ToolResultActions
+                  downloadLabel={t("downloadPng")}
+                  resetLabel={t("reset")}
+                  onDownload={downloadPosterPng}
+                  onReset={reset}
+                />
+              }
+            />
+
+            <figure className="flex min-h-[28rem] items-center justify-center overflow-hidden rounded-[1.25rem] border border-[#E4E9F1] bg-white p-3">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={result.data.imageUrl}
+                alt={t("generatedPosterAlt")}
+                width={result.data.width}
+                height={result.data.height}
+                className="block max-h-[58vh] w-full rounded-lg object-contain"
+              />
+            </figure>
+
+            <div className="grid gap-4 lg:grid-cols-2">
+              <ResultNoteCard title={t("posterDetails")}>
+                <p>{result.data.settingsSummary}</p>
+                <p>{getAssetLine(result.data.assets, result.data.screenshotCount, t)}</p>
+              </ResultNoteCard>
+              <ResultNoteCard title={t("posterChecklist")}>
+                <ul className="grid gap-2">
+                  {(result.data.reviewChecklist.length
+                    ? result.data.reviewChecklist
+                    : (t.raw("posterChecklistItems") as string[])
+                  )
+                    .slice(0, 4)
+                    .map((item) => (
+                      <li key={item} className="flex gap-2">
+                        <span aria-hidden className="mt-2 size-1.5 shrink-0 rounded-full bg-[#111111]" />
+                        <span>{item}</span>
+                      </li>
+                    ))}
+                </ul>
+              </ResultNoteCard>
+            </div>
+
+            {result.data.limitations.length ? (
+              <p className="rounded-lg border border-[#F1C2B8] bg-[#FFF1EC] px-4 py-3 text-sm leading-6 text-[#7A2818]">
+                {result.data.limitations[0]}
+              </p>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </ToolPreviewPanel>
+  );
+
+  return (
+    <ToolWorkspaceLayout
+      form={formPanel}
+      preview={previewPanel}
+      contentClassName="min-h-[calc(100svh-11rem)]"
+      defaultFormWidth={460}
+      maxFormWidth={560}
+    />
+  );
+}

package/src/features/tools/product-poster-generator/widget/result-shell.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+export function ResultNoteCard({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="rounded-[1.25rem] border border-[#E4E9F1] bg-white p-4">
+      <h4 className="text-sm font-semibold text-[#111111]">{title}</h4>
+      <div className="mt-3 grid gap-2 text-sm leading-6 text-[#555555]">{children}</div>
+    </section>
+  );
+}