/* UGC Product Video Generator — input renderer (hand-authored). * * Exposes the interactive inputs: one mutually exclusive creator source * (curated character or user photo), one product source (URL or photos with * optional notes), and creative direction. * File inputs are handled by ; the platform merges * uploads into the run input by field name (NOT via onRun). * * STYLING CONSTRAINT: restricted to the Tailwind class vocabulary + the * ConstantsUI component set the scaffolded form was compiled with, so the * server-compiled toolCss styles it. Compiled into frontend_bundle.input by * scripts/install-ugc-backend.mjs. */ const { useState } = React; const { Button, Input, Label, Textarea, FilePicker, } = ConstantsUI; const AVATARS = [{"name":"Amara","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/89c1c4b5f5ca45529390ab10b43e3c8840068d664bc4ab9289f3cf329733a551","gender":"female","age_band":"mid 20s","look":"Warm medium-brown skin with long black braids, stylized swirled forehead baby hairs, bleached eyebrows, and a small face gem.","vibe":"artistic editorial cool","tier_fit":"premium"},{"name":"Audrey","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/fcf345c306a38cf743ec64095bd071f6974c68b3ff29dd7e5b1da5d47cde1fad","gender":"female","age_band":"early 20s","look":"A young woman with a short dark brown pixie cut, fair skin, prominent dark eyebrows, and a neutral expression.","vibe":"edgy minimalist chic","tier_fit":"premium"},{"name":"Elena","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/ad7cff42a53874ec42ce4bc33ac273fbfa8aa5b783b0288ceca8ce615e4436c3","gender":"female","age_band":"mid 20s","look":"Fair-skinned woman with straight, slicked-back auburn hair, defined cheekbones, and dark lipstick.","vibe":"chic minimalist edge","tier_fit":"premium"},{"name":"Erik","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/b376f9d97876d8492905f71a890d49483d9791c4bc0de57310f6b30d8b3e31e4","gender":"male","age_band":"early 20s","look":"Fair-skinned young man with shoulder-length, center-parted light brown hair, sharp facial features, and light eyes.","vibe":"understated minimalist cool","tier_fit":"premium"},{"name":"Felix","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/7f7cc33ac4fd9f435507410cef34c6f7a088c2d3005aa17c50a540b0f9e05a5a","gender":"male","age_band":"early 20s","look":"A young man with fair skin, a sharp jawline, and light brown hair styled under a light green bandana.","vibe":"trendy streetwear casual","tier_fit":"premium"},{"name":"Hana","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/1c568f0bc9844fa5069b3491f866ee6e3344b5a09e56c9a085d1f09309968119","gender":"female","age_band":"mid 20s","look":"An East Asian woman with long, messy, wavy dark brown hair, fair skin, full lips, and a soft, natural makeup look.","vibe":"relaxed premium elegance","tier_fit":"premium"},{"name":"Jayden","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/a7a2296749edff4ad1a37464fe2501c66803f0aaa0394cdad674584cfba30044","gender":"male","age_band":"early 20s","look":"A young Black man with medium-brown skin, short black twists framing his forehead, and a calm, direct expression.","vibe":"relaxed urban cool","tier_fit":"premium"},{"name":"Jia","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/f42c5e3798cef92f2b59cbe93a8516749b88d1a78d046a44375b96d0b48a1d74","gender":"female","age_band":"early 20s","look":"East Asian female with fair skin, short wavy dark hair under a pink cap, and distinctive chunky silver hoop earrings.","vibe":"trendy streetwear chic","tier_fit":"premium"},{"name":"Jin","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/71e8ae79343b490434cdb2f9c512a93d92847574d64d304d81d86dd29f76aed3","gender":"male","age_band":"mid 20s","look":"East Asian man with wavy, middle-parted black hair, fair skin, a sharp jawline, and subtle silver hoop earrings.","vibe":"cool urban minimalist","tier_fit":"premium"},{"name":"Joon","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/eec073839c221e193286938f5dd44e6ede78ab1779b462051c4546d644f9e74a","gender":"male","age_band":"mid 20s","look":"East Asian man with messy, short dark hair, fair skin, sharp jawline, and monolid eyes.","vibe":"relaxed editorial cool","tier_fit":"premium"},{"name":"Kai","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/f2f5e2bc9f999342a57da4471dc0793e6dafd6c850be61efc5fb31352b132b73","gender":"male","age_band":"early 20s","look":"East Asian male with messy, short dark brown hair parted down the middle, fair skin, and a slender build.","vibe":"casual streetwear cool","tier_fit":"premium"},{"name":"Liam","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/8ca3bf742144fcf6a07c917435aad21866b93ba3c81cce295f3adc2cb581731c","gender":"male","age_band":"mid 20s","look":"A young man with short, curly dark brown hair, light olive skin, and a defined jawline.","vibe":"trendy streetwear cool","tier_fit":"premium"},{"name":"Lily","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/115f967b3eedcf7f71ae8cf3140531efc9aae791ab45eda4f22f93aef23a7807","gender":"female","age_band":"mid 20s","look":"East Asian woman with long, straight dark brown hair, wispy bangs, warm light-medium skin, and a small line-art tattoo on her left bicep.","vibe":"warm girl-next-door charm","tier_fit":"premium"},{"name":"Lucas","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/18a380fa1495696d73170256e92fec5e51c0963a1b9efd193448a45518916e99","gender":"male","age_band":"mid 20s","look":"A young man with messy, dark brown wavy hair, light skin, striking blue eyes, and a sharp jawline.","vibe":"chic minimalist cool","tier_fit":"premium"},{"name":"Malik","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/c659fa41e07debe920fd48c91818d604a67d94308ff4fd9cd3043d662c28b509","gender":"male","age_band":"mid 20s","look":"A Black man with deep brown skin, neat braids parted down the middle, and sharp, symmetrical facial features.","vibe":"cool urban minimalist","tier_fit":"premium"},{"name":"Marco","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/a6a998fc223e726cab52a795bad3151316092ea8530d3d82e8e0fa7bc4620abe","gender":"male","age_band":"mid 20s","look":"A young man with warm olive skin, short wavy dark brown hair parted down the middle, and a defined, clean-shaven jawline.","vibe":"effortless minimalist prep","tier_fit":"premium"},{"name":"Maria","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/6b7bcf01e970fbeebf09eeeaa5572385930a51778c128feb416da4f6e8eddf7a","gender":"female","age_band":"mid 20s","look":"An East Asian woman with short, curly black hair, light-medium skin, and soft, delicate facial features.","vibe":"trendy urban fashionista","tier_fit":"premium"},{"name":"Megan","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/dcfec2ab7befada06772849b14d3b319dbd2193b0c9798d33273d5139244e57e","gender":"female","age_band":"mid 20s","look":"East Asian woman with a sleek, middle-parted black bob, light skin, and sharp, elegant facial features.","vibe":"polished vintage intellectual","tier_fit":"premium"},{"name":"Mei","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/d06d5d2d7aa4af7994da87a65a544532d2a7ccb9214b4591f4a2f3487e525116","gender":"female","age_band":"early 20s","look":"East Asian woman with long, wavy black hair, fair skin, and soft, delicate facial features.","vibe":"soft youthful chic","tier_fit":"premium"},{"name":"Minji","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/9ff5dce2e0d68cdf52713222f0af123f538776ab502789fd1098aa1adffbe3f7","gender":"female","age_band":"mid 20s","look":"East Asian woman with long, wavy dark brown hair styled with a white clip, fair skin, and soft, natural makeup.","vibe":"soft cozy minimalist","tier_fit":"premium"},{"name":"Miso","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/9d246e1377a8bf92de2bbb693c65797f71f8be23927cb8cba4ae2a04b6d94db6","gender":"female","age_band":"early 20s","look":"East Asian woman with long, wavy dark brown hair, fair skin, wearing round black-rimmed glasses and silver hoop earrings.","vibe":"casual indie academic","tier_fit":"premium"},{"name":"Naomi","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/bc2f39d12ed446376f1b18446113b939babbb6248ac2263e80baa9eedbdfefaa","gender":"female","age_band":"early 20s","look":"A young woman with long, wavy dark brown hair, warm olive skin, full lips, and dark, expressive eyes.","vibe":"sultry clean girl","tier_fit":"premium"},{"name":"Nia","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/8bcf418cfd7b706312fb3a45d6ef427afceec7171dd377041b10fc2b127f46b6","gender":"female","age_band":"mid 20s","look":"She has deep dark skin, voluminous shoulder-length black curly hair, and defined high cheekbones with full lips.","vibe":"polished resort elegance","tier_fit":"premium"},{"name":"Niko","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/398f6e4d549b369a0ad0921291cfdd5891d57e338e4da5e60949aa680487e0aa","gender":"male","age_band":"mid 20s","look":"A young man with fair skin, slicked-back short dark brown hair, sharp jawline, and neutral expression.","vibe":"relaxed upscale casual","tier_fit":"premium"},{"name":"Omar","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/25cc2bcbbb54d8adb8dbb8368bb1a5c8a077e49c647668b3d9e19de377672c3c","gender":"male","age_band":"mid 20s","look":"A young Black man with dark skin, shoulder-length black locs, and rectangular black-framed glasses.","vibe":"minimalist avant-garde intellectual","tier_fit":"premium"},{"name":"Priya","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/98036069e2a8c4de8350d5877188177a160dcf175e69705f13554f1e9b797413","gender":"female","age_band":"mid 20s","look":"She has long, wavy dark brown hair, a light olive complexion, defined natural eyebrows, and full lips.","vibe":"effortless chic casual","tier_fit":"premium"},{"name":"Ren","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/f5699056c2c86e99b5cbdcbca2090da466f7813abb5c8cebb703a65e7f317f26","gender":"male","age_band":"early 20s","look":"An East Asian young man with messy, wavy dark brown hair, fair skin, and a slender build.","vibe":"effortless youthful cool","tier_fit":"premium"},{"name":"Ryu","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/b6375407cf2166b7590008e39f8975461970fbdf268794612738af32050f624e","gender":"male","age_band":"mid 20s","look":"Young East Asian man with short, styled dark brown hair, clear light skin, and soft, defined facial features.","vibe":"minimalist modern elegance","tier_fit":"premium"},{"name":"Scarlett","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/6231bc60a5e01d1868b300fecf6c986a06470e21e79278818451c486a2bd05a8","gender":"female","age_band":"mid 20s","look":"A woman with light-medium skin, shoulder-length wavy magenta-red hair with short bangs, prominent dark eyebrows, and full pink lips.","vibe":"quirky indie chic","tier_fit":"premium"},{"name":"Sora","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/7b045506a62874efc9307ff260588cc3a275691bc5b1a71bd84918d6542da23d","gender":"female","age_band":"early 20s","look":"East Asian woman with fair skin, dark hair in a wispy high bun, and soft pink-toned makeup.","vibe":"soft elegant charm","tier_fit":"premium"},{"name":"Stefan","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/d686fb4271c5b46238c2be77067ed80e4a14fa0a004a2196a9284a8dd9fcca91","gender":"male","age_band":"mid 20s","look":"A man with messy, wavy dark brown hair, light olive skin, a sharp jawline, and an athletic, muscular build.","vibe":"athletic confident casual","tier_fit":"premium"},{"name":"Tae","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/e888ad44825483d88891b4e2c753e35b0e62e038fe2d5c3b9876c9e030f8c254","gender":"male","age_band":"mid 20s","look":"East Asian man with short, parted black hair, fair skin, and a slender build.","vibe":"relaxed minimalist chic","tier_fit":"premium"},{"name":"Yuki","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/3b685c1011d493e98ddc6dca80f18cbda106120cad0ef8b162fb55f529715ee0","gender":"female","age_band":"mid 20s","look":"East Asian woman with straight, shoulder-length black hair, wispy bangs, warm light skin, and soft, natural facial features.","vibe":"relaxed minimalist warmth","tier_fit":"premium"},{"name":"Yuna","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/16952289ede691e4cedc6ab039368dee4b1d9482bccd58795ac248f4631c50b5","gender":"female","age_band":"mid 20s","look":"An East Asian woman with long, straight black hair, light-medium skin tone, and thin-framed black rectangular glasses.","vibe":"studious chic minimalist","tier_fit":"premium"},{"name":"Zara","url":"https://auth.constants.io/storage/v1/object/public/worker-files/6da30066-3bbf-46a0-8898-c4670a408693/blobs/f20d359893a3d486642f67fbdac916250e563851e9a863ced14e422c2c7f684d","gender":"female","age_band":"early 20s","look":"A young Black woman with voluminous, shoulder-length curly black hair, warm brown skin, and full lips.","vibe":"edgy trendy confidence","tier_fit":"premium"}]; // @@INPUT_AVATARS_MANIFEST@@ const FEATURED_AVATAR_NAMES = ["Amara", "Hana", "Jayden", "Nia", "Marco"]; const SORTED_AVATARS = [...AVATARS].sort((left, right) => { const leftIndex = FEATURED_AVATAR_NAMES.indexOf(left.name); const rightIndex = FEATURED_AVATAR_NAMES.indexOf(right.name); if (leftIndex === -1 && rightIndex === -1) return left.name.localeCompare(right.name); if (leftIndex === -1) return 1; if (rightIndex === -1) return -1; return leftIndex - rightIndex; }); function Field({ label, hint, children }) { return (

{label} {children} {hint &&

{hint}

}

); } function SectionToggle({ open, onClick, children }) { return (

{open ? "▾ " : "▸ "} {children}

); } function CreatorSourcePicker({ value, onChange }) { const options = [ { value: "character", label: "Character", hint: "Auto or curated" }, { value: "user_photo", label: "User photo", hint: "Use your portrait" }, ]; return (

{options.map((option) => { const selected = option.value === value; return ( ); })}

); } function ProductSourcePicker({ value, onChange }) { const options = [ { value: "url", label: "Product URL" }, { value: "photos", label: "Product photos" }, ]; return (

{options.map((option) => { const selected = option.value === value; return ( ); })}

); } function AvatarPicker({ value, onChange }) { const [showAll, setShowAll] = useState(false); const options = [{ name: "auto", label: "Auto", vibe: "Choose the best match" }, ...SORTED_AVATARS]; const visible = showAll ? options : options.slice(0, 6); return (

{visible.map((avatar) => { const selected = avatar.name === value; return ( ); })}

{options.length > 6 && ( )} ); } function Tool({ onRun }) { const [creatorSource, setCreatorSource] = useState("character"); const [avatar, setAvatar] = useState("auto"); const [productSource, setProductSource] = useState("url"); const [productUrl, setProductUrl] = useState(""); const [hasProductPhoto, setHasProductPhoto] = useState(false); const [hasUserPhoto, setHasUserPhoto] = useState(false); const [creatorBrief, setCreatorBrief] = useState(""); const [productNotes, setProductNotes] = useState(""); const [addCaptions, setAddCaptions] = useState(true); const [showMoreOptions, setShowMoreOptions] = useState(false); const [loading, setLoading] = useState(false); const selectProductSource = (nextSource) => { if (nextSource === "url") { const platformFiles = window.__platformInputs?.files; if (platformFiles) delete platformFiles.productPhoto; setHasProductPhoto(false); setProductNotes(""); } else { setProductUrl(""); } setProductSource(nextSource); }; const handleRun = async () => { if (loading) return; if (productSource === "url" && !productUrl.trim()) { showError("Add a product URL."); return; } if (productSource === "photos" && !hasProductPhoto) { showError("Add at least one product photo."); return; } if (creatorSource === "user_photo" && !hasUserPhoto) { showError("Add a user photo or choose another creator source."); return; } setLoading(true); showLoading("Filming your UGC video…"); try { await onRun({ creatorSource, ...(creatorSource === "character" ? { avatar } : {}), productSource, ...(productSource === "url" ? { productUrl: productUrl.trim() } : { productNotes: productNotes.trim() }), creatorBrief: creatorBrief.trim(), addCaptions, }); } catch (err) { showError(err.message || "Something went wrong generating the video."); } finally { hideLoading(); setLoading(false); } }; return (

UGC Product Video

Provide a product URL or upload product photos. Wearables become try-on videos; other products become talking-head reviews.

{productSource === "url" ? (

setProductUrl(e.target.value)}
            placeholder="https://store.com/products/the-dress"
            rows={2}
          />
        </Field>
      ) : (
        <>
          <Field
            label="Product photos"
            hint="Upload up to 5 reference images for an exact product match."
          >
            <FilePicker
              fieldName="productPhoto"
              accept={[".png", ".jpg", ".jpeg", ".webp"]}
              multiple
              onChange={(files) => setHasProductPhoto(files.length > 0)}
            />
          </Field>

<Field
            label="Product notes (optional)"
            hint="Add details that may not be obvious from the photos."
          >
            <Textarea
              value={productNotes}
              onChange={(e) => setProductNotes(e.target.value)}
              placeholder="Premium non-slip yoga mat with extra-thick cushioning"
              rows={3}
            />
          </Field>
        </>
      )}

<label className="flex cursor-pointer items-start gap-3 rounded-xl border border-gray-200 bg-gray-50 p-4 text-sm text-gray-700">
        <input
          type="checkbox"
          checked={addCaptions}
          onChange={(event) => setAddCaptions(event.target.checked)}
          className="mt-0.5 h-4 w-4"
        />
        <span>
          Add animated captions
          <span className="mt-0.5 block text-xs text-gray-400">
            Automatically transcribe the voiceover and burn synchronized captions into the finished video.
          </span>
        </span>
      </label>

<div className="space-y-3">
        <SectionToggle open={showMoreOptions} onClick={() => setShowMoreOptions((v) => !v)}>
          More options
        </SectionToggle>
        {showMoreOptions && (
          <div className="space-y-6">
            <CreatorSourcePicker value={creatorSource} onChange={setCreatorSource} />
            {creatorSource === "character" && (
              <AvatarPicker value={avatar} onChange={setAvatar} />
            )}
            {creatorSource === "user_photo" && (
              <Field
                label="Your photo"
                hint="Lock this face as the creator throughout the video."
              >
                <FilePicker
                  fieldName="userPhoto"
                  accept={[".png", ".jpg", ".jpeg", ".webp"]}
                  onChange={(files) => setHasUserPhoto(files.length > 0)}
                />
              </Field>
            )}
            <Field
              label="Creator direction (optional)"
              hint="e.g. 'warm, excited, mid-20s, soft curls' — shapes the AI creator."
            >
              <Input
                value={creatorBrief}
                onChange={(e) => setCreatorBrief(e.target.value)}
                placeholder="warm and excited, twenty-something"
              />
            </Field>
          </div>
        )}
      </div>

<Button onClick={handleRun} disabled={loading} className="w-full">
        {loading ? "Generating…" : "Generate Video →"}
      </Button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  React.createElement(Tool, { onRun: window.__onRun })
);
</article></body></html>

UGC Try-On Video Generatora Constants tool made by Constants