@pylonsync/create-pylon 0.3.275 → 0.3.276

package/templates/ai-studio/app/studio-client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { siteConfig } from "@/lib/site.config";
 import type { GenerationKind, GenerationRow } from "@/lib/studio";
@@ -26,17 +26,19 @@ function StudioInner() {
   const [kind, setKind] = useState<GenerationKind>("image");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [openId, setOpenId] = useState<string | null>(null);
 
-  async function generate() {
-    const p = prompt.trim();
-    if (!p || busy) return;
+  // Keep the open modal pointed at the live row so it reflects status changes.
+  const open = generations.find((g) => g.id === openId) ?? null;
+
+  async function generate(p = prompt, k = kind) {
+    const text = p.trim();
+    if (!text || busy) return;
     setBusy(true);
     setError(null);
     setPrompt("");
-    // Fire the action: the pending card shows up live via useQuery while it runs;
-    // we only await to surface input errors + re-enable the button.
     try {
-      await callFn("generate", { kind, prompt: p });
+      await callFn("generate", { kind: k, prompt: text });
     } catch (e) {
       const msg = e instanceof Error ? e.message : "Couldn't start the generation.";
       setError(/INVALID_ARGS/.test(msg) ? "Enter a prompt (up to 1000 characters)." : msg);
@@ -45,6 +47,22 @@ function StudioInner() {
     }
   }
 
+  function reuse(g: GenerationRow) {
+    setPrompt(g.prompt);
+    setKind((["image", "audio", "video"].includes(g.kind) ? g.kind : "image") as GenerationKind);
+    setOpenId(null);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+
+  async function remove(id: string) {
+    setOpenId(null);
+    try {
+      await db.delete("Generation", id);
+    } catch {
+      /* ignore — the row may already be gone */
+    }
+  }
+
   return (
     <div className="mx-auto max-w-5xl px-4 py-8">
       {/* Prompt bar */}
@@ -76,13 +94,12 @@ function StudioInner() {
                 }
               >
                 {k.label}
-                {!k.wired ? <span className="ml-1 text-[10px] text-zinc-400">stub</span> : null}
               </button>
             ))}
           </div>
           <button
             type="button"
-            onClick={generate}
+            onClick={() => generate()}
             disabled={busy || !prompt.trim()}
             className="inline-flex h-9 items-center gap-1.5 rounded-full bg-brand px-5 text-[13.5px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-40"
           >
@@ -93,7 +110,6 @@ function StudioInner() {
 
       {error ? <p className="mt-3 text-[13px] text-red-600">{error}</p> : null}
 
-      {/* Examples (only before anything's been made) */}
       {generations.length === 0 ? (
         <div className="mt-5 flex flex-wrap gap-2">
           {studio.examples.map((ex) => (
@@ -109,22 +125,35 @@ function StudioInner() {
         </div>
       ) : null}
 
-      {/* Gallery */}
       <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {generations.map((g) => (
-          <GenerationCard key={g.id} g={g} />
+          <GenerationCard key={g.id} g={g} onOpen={() => setOpenId(g.id)} />
         ))}
       </div>
+
+      {open ? (
+        <GenerationModal
+          g={open}
+          onClose={() => setOpenId(null)}
+          onReuse={() => reuse(open)}
+          onDelete={() => remove(open.id)}
+        />
+      ) : null}
     </div>
   );
 }
 
-function GenerationCard({ g }: { g: GenerationRow }) {
+function GenerationCard({ g, onOpen }: { g: GenerationRow; onOpen: () => void }) {
+  const done = g.status === "done";
   return (
-    <div className="overflow-hidden rounded-2xl border border-zinc-200 bg-white">
+    <button
+      type="button"
+      onClick={onOpen}
+      className="group block overflow-hidden rounded-2xl border border-zinc-200 bg-white text-left transition-shadow hover:shadow-md focus:outline-none focus:ring-2 focus:ring-brand/30"
+    >
       <div className="relative grid aspect-square place-items-center bg-paper">
         <Media g={g} />
-        {g.demo && g.status === "done" ? (
+        {g.demo && done ? (
           <span className="absolute left-2 top-2 rounded-full border border-dashed border-zinc-300 bg-white/80 px-2 py-0.5 text-[10px] font-medium text-zinc-500">
             demo
           </span>
@@ -133,37 +162,125 @@ function GenerationCard({ g }: { g: GenerationRow }) {
           {g.kind}
         </span>
       </div>
-      <div className="p-3">
-        <p className="line-clamp-2 text-[13px] leading-snug text-zinc-600">{g.prompt}</p>
+      <div className="flex items-center justify-between gap-2 p-3">
+        <p className="line-clamp-1 text-[13px] text-zinc-600">{g.prompt}</p>
+        <span className="shrink-0 text-[11px] text-zinc-400">{relativeTime(g.createdAt)}</span>
+      </div>
+    </button>
+  );
+}
+
+function GenerationModal({
+  g,
+  onClose,
+  onReuse,
+  onDelete,
+}: {
+  g: GenerationRow;
+  onClose: () => void;
+  onReuse: () => void;
+  onDelete: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  // Close on Escape.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  async function copyPrompt() {
+    try {
+      await navigator.clipboard.writeText(g.prompt);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable */
+    }
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-zinc-900/50 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="grid max-h-[55vh] place-items-center overflow-hidden bg-paper">
+          <Media g={g} full />
+        </div>
+        <div className="flex-1 overflow-y-auto p-5">
+          <div className="flex items-center gap-2">
+            <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-zinc-500">
+              {g.kind}
+            </span>
+            <StatusPill status={g.status} demo={g.demo} />
+            <span className="text-[12px] text-zinc-400">{relativeTime(g.createdAt)}</span>
+          </div>
+          <p className="mt-3 text-[14px] leading-relaxed text-zinc-800">{g.prompt}</p>
+          {g.error ? <p className="mt-2 text-[13px] text-red-600">{g.error}</p> : null}
+
+          <div className="mt-5 flex flex-wrap gap-2">
+            {g.status === "done" && g.resultUrl ? (
+              <a
+                href={g.resultUrl}
+                download
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex h-9 items-center gap-1.5 rounded-lg bg-brand px-4 text-[13px] font-medium text-white transition-opacity hover:opacity-90"
+              >
+                Download
+              </a>
+            ) : null}
+            <button
+              type="button"
+              onClick={copyPrompt}
+              className="inline-flex h-9 items-center rounded-lg border border-zinc-300 px-4 text-[13px] font-medium text-zinc-700 transition-colors hover:bg-zinc-50"
+            >
+              {copied ? "Copied ✓" : "Copy prompt"}
+            </button>
+            <button
+              type="button"
+              onClick={onReuse}
+              className="inline-flex h-9 items-center rounded-lg border border-zinc-300 px-4 text-[13px] font-medium text-zinc-700 transition-colors hover:bg-zinc-50"
+            >
+              Reuse prompt
+            </button>
+            <button
+              type="button"
+              onClick={onDelete}
+              className="ml-auto inline-flex h-9 items-center rounded-lg border border-zinc-200 px-4 text-[13px] font-medium text-zinc-500 transition-colors hover:border-red-300 hover:text-red-600"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );
 }
 
-function Media({ g }: { g: GenerationRow }) {
+function Media({ g, full }: { g: GenerationRow; full?: boolean }) {
   if (g.status === "pending" || g.status === "processing") {
     return (
-      <div className="flex flex-col items-center gap-2 text-zinc-400">
+      <div className="flex flex-col items-center gap-2 py-10 text-zinc-400">
         <Spinner />
         <span className="text-[12px]">{g.status === "processing" ? "Generating…" : "Queued…"}</span>
       </div>
     );
   }
   if (g.status === "failed") {
-    return (
-      <div className="px-5 text-center text-[12px] text-red-500">
-        {g.error || "Generation failed."}
-      </div>
-    );
+    return <div className="px-5 py-10 text-center text-[12px] text-red-500">{g.error || "Generation failed."}</div>;
   }
-  // done
   if (g.kind === "image" && g.resultUrl) {
     // eslint-disable-next-line @next/next/no-img-element
-    return <img src={g.resultUrl} alt={g.prompt} className="size-full object-cover" />;
+    return <img src={g.resultUrl} alt={g.prompt} className={full ? "max-h-[55vh] w-auto object-contain" : "size-full object-cover"} />;
   }
   if (g.kind === "audio") {
     return g.resultUrl ? (
-      <div className="w-full px-4">
+      <div className="w-full px-5 py-8">
         <AudioWave />
         <audio controls src={g.resultUrl} className="mt-3 w-full" />
       </div>
@@ -173,7 +290,7 @@ function Media({ g }: { g: GenerationRow }) {
   }
   if (g.kind === "video") {
     return g.resultUrl ? (
-      <video controls src={g.resultUrl} className="size-full object-cover" />
+      <video controls src={g.resultUrl} className={full ? "max-h-[55vh] w-auto" : "size-full object-cover"} />
     ) : (
       <DemoNote text="Add REPLICATE_API_TOKEN to generate real video." />
     );
@@ -181,9 +298,23 @@ function Media({ g }: { g: GenerationRow }) {
   return <DemoNote text="No result." />;
 }
 
+function StatusPill({ status, demo }: { status: string; demo: boolean }) {
+  if (status === "done") {
+    return demo ? (
+      <span className="rounded-full border border-dashed border-zinc-300 px-2 py-0.5 text-[10px] font-medium text-zinc-500">demo</span>
+    ) : (
+      <span className="rounded-full bg-green-50 px-2 py-0.5 text-[10px] font-medium text-green-700">done</span>
+    );
+  }
+  if (status === "failed") {
+    return <span className="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-medium text-red-600">failed</span>;
+  }
+  return <span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-medium capitalize text-amber-700">{status}</span>;
+}
+
 function DemoNote({ text }: { text: string }) {
   return (
-    <div className="flex flex-col items-center gap-2 px-5 text-center text-zinc-400">
+    <div className="flex flex-col items-center gap-2 px-5 py-10 text-center text-zinc-400">
       <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
         <rect x="3" y="3" width="18" height="18" rx="2" />
         <path d="M3 9h18M9 21V9" />
@@ -212,3 +343,15 @@ function Spinner() {
   );
 }
 
+// "just now" / "5m ago" / "3h ago" / "2d ago" from an ISO timestamp.
+function relativeTime(iso: string): string {
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return "";
+  const s = Math.max(0, Math.floor((Date.now() - t) / 1000));
+  if (s < 45) return "just now";
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}

package/templates/ai-studio/app.ts

@@ -20,10 +20,10 @@ import {
 //                  can't insert), and read live via `db.useQuery`.
 //   • User       — the account (email/password is built in).
 //
-// Multi-user: every signed-in (or guest) visitor gets their own private studio.
-// Image + audio call OpenAI when OPENAI_API_KEY is set; with no key the studio
-// returns a clearly-labeled placeholder so the whole flow + live gallery work
-// with zero config. Video is a stubbed extension point — see functions/generate.ts.
+// Multi-user: every signed-in visitor gets their own private studio. Image,
+// audio, AND video generate via Replicate when REPLICATE_API_TOKEN is set; with
+// no token the studio returns a clearly-labeled placeholder so the whole flow +
+// background job + live gallery work with zero config (see functions/).
 // ---------------------------------------------------------------------------
 
 const Generation = entity(
@@ -76,9 +76,9 @@ const generationPolicy = policy({
   name: "generation_owner_read",
   entity: "Generation",
   allowRead: "auth.userId == data.userId",
-  allowInsert: "false",
-  allowUpdate: "false",
-  allowDelete: "false",
+  allowInsert: "false", // created only by the generate pipeline (server-side)
+  allowUpdate: "false", // updated only by the pollGeneration job
+  allowDelete: "auth.userId == data.userId", // you can delete your own from the gallery
 });
 
 const userPolicy = policy({

package/templates/ai-studio/lib/studio.ts

@@ -31,10 +31,10 @@ function escapeXml(s: string): string {
     .replace(/'/g, "'");
 }
 
-// A self-contained SVG "image" data URL — used when no OPENAI_API_KEY is set, so
-// the gallery + realtime flow work with zero config. Clearly a placeholder (it
-// renders the prompt over a gradient), not a fake photo. Returns a `data:` URL
-// that drops straight into an <img>.
+// A self-contained SVG "image" data URL — used when no REPLICATE_API_TOKEN is
+// set, so the gallery + realtime flow work with zero config. Clearly a
+// placeholder (it renders the prompt over a gradient), not a fake photo. Returns
+// a `data:` URL that drops straight into an <img>.
 export function placeholderImage(prompt: string): string {
   const hue = hashHue(prompt);
   const hue2 = (hue + 60) % 360;
@@ -46,7 +46,7 @@ export function placeholderImage(prompt: string): string {
   </linearGradient></defs>
   <rect width="640" height="640" fill="url(#g)"/>
   <text x="50%" y="44%" fill="rgba(255,255,255,0.95)" font-family="system-ui,sans-serif" font-size="26" font-weight="600" text-anchor="middle">${text}</text>
-  <text x="50%" y="54%" fill="rgba(255,255,255,0.7)" font-family="system-ui,sans-serif" font-size="15" text-anchor="middle">placeholder · set OPENAI_API_KEY for real images</text>
+  <text x="50%" y="54%" fill="rgba(255,255,255,0.7)" font-family="system-ui,sans-serif" font-size="15" text-anchor="middle">placeholder · set REPLICATE_API_TOKEN for real images</text>
 </svg>`;
   return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
 }