https://creascale.ai/assets/UgcAvatars-1-DFAoaI.js

1import{a as Q,r as s,k as ee,j as e}from"./vendor-react-P8lhjiYZ.js";import{b as te,j as ae,l as re,g as se,d as le,ac as d}from"./index-CT-iEx2C.js";import{j as ne,Z as oe,a5 as S,f as I,n as ie,af as de,D as g,aj as F,x as z,a4 as T,X as R,Y as ce,aS as xe}from"./icons-B6nh23vN.js";import"./vendor-DYitOafL.js";import"./supabase-CRjsrM3R.js";import"./motion-HdYA6Eca.js";const me=[["female","♀ Female"],["male","♂ Male"]],pe=["North African","Khaleeji","Egyptian","Levantine","Turkish","Sub-Saharan","European"],ve=()=>{const U=Q(),{subscription:O}=te(),A=ae(O),{addNotification:M}=re(),o=t=>{const a=/failed|échec|impossible|can't|not enough|pas assez|invalid|invalide|too|trop|error|erreur|network|réseau|already|déjà/i.test(t);M(a?"Error":"Info",t,a?"error":"info")},[f,D]=s.useState([]),[j,W]=s.useState(!0),[_,B]=s.useState(""),[$,H]=s.useState("all"),[r,m]=s.useState(null),[q,c]=s.useState(!1),[v,G]=ee();s.useEffect(()=>{v.get("new")==="1"&&(c(!0),v.delete("new"),G(v,{replace:!0}))},[v,G]);const[l,i]=s.useState({name:"",gender:"female",ethnicity:"North African",age_range:"20-25",region_preset:"MENA",niche:"beauty",prompt:""}),[n,E]=s.useState(null),[h,b]=s.useState(null),[x,y]=s.useState(null),[N,P]=s.useState(""),u=s.useCallback(async(t,a,p)=>{const Y=await se(),C=await fetch(`${le()}/api/ugc${a}`,{method:t,headers:{"Content-Type":"application/json",Authorization:`Bearer ${Y}`},body:p?JSON.stringify(p):void 0}),L=await C.json().catch(()=>({}));if(!C.ok&&C.status!==201)throw new Error(L.error||`HTTP ${C.status}`);return L},[]),w=s.useCallback(async()=>{try{const t=await u("GET","/avatars");D(Array.isArray(t.data)?t.data:[])}catch{}finally{W(!1)}},[u]);s.useEffect(()=>{w()},[w]);const k=f.filter(t=>($==="all"||t.gender===$)&&(_===""||[t.name,t.region_preset,t.ethnicity,...t.niche_tags||[]].join(" ").toLowerCase().includes(_.toLowerCase()))),V=t=>{if(!t)return;if(!t.type.startsWith("image/")){o("Pick an image (jpg / png / webp).");return}if(t.size>18*1024*1024){o("Photo too large (max 18 MB).");return}const a=new FileReader;a.onload=()=>E({b64:String(a.result||"").replace(/^data:[^;]+;base64,/,""),mime:t.type,name:t.name}),a.readAsDataURL(t)},Z=async()=>{if(A<d){o(`Not enough credits (${d}cr required).`);return}m("gen");try{const t={...l,niche_tags:[l.niche]};n&&(t.image_base64=n.b64,t.mime=n.mime);const a=await u("POST","/avatars/generate",t);c(!1),i(p=>({...p,name:"",prompt:""})),E(null),await w(),a.avatar&&o(n?"Avatar cloned from your photo, saved to your library.":`Avatar "${a.avatar.name}" generated and saved to your library.`)}catch(t){o(`Generation failed: ${t.message}`)}finally{m(null)}},J=t=>{b(t),P(`${t.age_range||"20-25"} years old, ${t.ethnicity||"North African"} ${t.gender==="male"?"man":"woman"}, video creator, looking at camera, iPhone selfie style`)},K=async t=>{if(t.owned){m(`del-${t.id}`);try{await u("DELETE",`/avatars/${t.id}`),D(a=>a.filter(p=>p.id!==t.id)),y(null)}catch(a){o(`Delete failed: ${a.message}`)}finally{m(null)}}},X=async()=>{if(h){if(A<d){o(`Not enough credits (${d}cr required).`);return}m("regen");try{await u("POST",`/avatars/${h.id}/regenerate`,{prompt:N}),b(null),await w()}catch(t){o(`Regeneration failed: ${t.message}`)}finally{m(null)}}};return e.jsxs("div",{className:"min-h-screen bg-bg p-4 sm:p-8",children:[e.jsxs("div",{className:"max-w-7xl mx-auto",children:[e.jsxs("div",{className:"flex items-center justify-between mb-6 flex-wrap gap-3",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("button",{onClick:()=>U("/studio"),className:"text-text-muted hover:text-text",children:e.jsx(ne,{className:"w-5 h-5"})}),e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl sm:text-3xl font-bold text-text",children:"Avatar Library"}),e.jsx("p",{className:"text-text-muted text-sm",children:"AI-generated avatars, reusable across all your campaigns · Edit via prompt"})]})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 rounded-lg bg-card border border-border",children:[e.jsx(oe,{className:"w-4 h-4 text-primary"}),e.jsx("span",{className:"text-sm font-bold text-text",children:A})]}),e.jsxs("button",{onClick:()=>c(!0),className:"flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-accent text-white font-bold",children:[e.jsx(S,{className:"w-4 h-4"})," Generate avatar"]})]})]}),e.jsxs("div",{className:"bg-card border border-border rounded-xl p-4 mb-6 flex items-start gap-3",children:[e.jsx(I,{className:"w-5 h-5 text-primary flex-shrink-0 mt-0.5"}),e.jsxs("div",{className:"text-sm text-text-muted",children:[e.jsx("strong",{className:"text-text",children:"Saved to your account."})," Every AI-generated avatar is stored here and ",e.jsx("strong",{className:"text-text",children:"reusable across all your campaigns"}),", no need to regenerate. ",e.jsx("strong",{className:"text-primary",children:"Regen via prompt"})," to tweak (face, outfit, scene, age), ",d,"cr."]})]}),e.jsxs("div",{className:"bg-card border border-border rounded-xl p-3 mb-6 flex items-center gap-3 flex-wrap",children:[e.jsxs("div",{className:"flex-1 min-w-[200px] relative",children:[e.jsx(ie,{className:"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted"}

1),e.jsx("input",{type:"text",value:_,onChange:t=>B(t.target.value),placeholder:"Search (name, region, ethnicity, niche)",className:"w-full pl-10 pr-4 py-2 rounded-lg bg-bg border border-border text-text text-sm focus:border-primary outline-none"})]}),e.jsx(de,{className:"w-4 h-4 text-text-muted"}),["all","male","female"].map(t=>e.jsx("button",{onClick:()=>H(t),className:`px-4 py-2 rounded-lg text-sm font-bold transition ${$===t?"bg-primary text-white":"bg-bg text-text-muted hover:text-text"}`,children:t==="all"?"All":t==="male"?"♂ Male":"♀ Female"},t)),e.jsxs("div",{className:"text-xs text-text-muted",children:[k.length," / ",f.length]})]}),j&&e.jsx("div",{className:"flex items-center justify-center py-20",children:e.jsx(g,{className:"w-8 h-8 text-primary animate-spin"})}),!j&&f.length===0&&e.jsxs("div",{className:"bg-card border-2 border-dashed border-border rounded-2xl p-12 text-center",children:[e.jsx("div",{className:"text-5xl mb-4",children:"🎭"}),e.jsx("h3",{className:"text-xl font-bold text-text mb-2",children:"No avatars yet"}),e.jsx("p",{className:"text-text-muted text-sm mb-6",children:"Generate a creator avatar, it'll be stored here and usable across all your AI videos."}),e.jsxs("button",{onClick:()=>c(!0),className:"px-6 py-3 rounded-xl bg-gradient-to-r from-primary to-accent text-white font-bold inline-flex items-center gap-2",children:[e.jsx(S,{className:"w-4 h-4"})," Generate avatar"]})]}),!j&&k.length>0&&e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4",children:k.map(t=>e.jsxs("div",{className:"bg-card border-2 border-border hover:border-primary/50 rounded-xl overflow-hidden transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg",children:[e.jsxs("div",{className:"aspect-[9/16] relative overflow-hidden bg-slate-900",children:[t.image_url?e.jsx("img",{src:t.image_url,alt:t.name,className:"absolute inset-0 w-full h-full object-cover"}):e.jsx("div",{className:"absolute inset-0 flex items-center justify-center text-text-muted",children:e.jsx(F,{className:"w-12 h-12"})}),e.jsxs("span",{className:"absolute top-2 left-2 bg-black/70 backdrop-blur-sm text-white text-[10px] px-2 py-1 rounded font-bold",children:[t.gender==="male"?"♂":t.gender==="non_binary"?"⚧":"♀"," ",t.age_range||""]}),e.jsx("span",{className:"absolute top-2 right-2 bg-emerald-500/90 text-white text-[9px] px-2 py-1 rounded font-bold flex items-center gap-1",children:t.is_global_preset?"PRESET":e.jsxs(e.Fragment,{children:[e.jsx(I,{className:"w-2.5 h-2.5"})," AI"]})}),e.jsx("div",{className:"absolute bottom-2 left-2 right-2 text-center",children:e.jsxs("span",{className:"inline-block bg-black/70 backdrop-blur-sm text-white text-[10px] px-2 py-0.5 rounded font-semibold truncate max-w-full",children:[t.ethnicity||"",t.region_preset?` · ${t.region_preset}`:""]})})]}),e.jsxs("div",{className:"p-3 space-y-2",children:[e.jsxs("div",{children:[e.jsx("div",{className:"text-sm font-bold text-text truncate",children:t.name}),e.jsxs("div",{className:"text-[10px] text-text-muted truncate",children:[(t.niche_tags||[]).join(", ")||"general"," · ",t.language_default||""]})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsxs("button",{onClick:()=>J(t),className:"flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg bg-bg border border-border hover:border-primary text-xs font-bold text-text transition group",children:[e.jsx(z,{className:"w-3 h-3 group-hover:rotate-180 transition-transform duration-300"}),"Regen via prompt ",e.jsxs("span",{className:"text-primary",children:[d,"cr"]})]}),t.owned&&!t.is_global_preset&&e.jsx("button",{onClick:()=>y(t),disabled:r===`del-${t.id}`,title:"Delete this avatar",className:"shrink-0 px-2.5 py-2 rounded-lg bg-bg border border-border text-text-muted hover:border-error hover:text-error transition disabled:opacity-50",children:r===`del-${t.id}`?e.jsx(g,{className:"w-3.5 h-3.5 animate-spin"}):e.jsx(T,{className:"w-3.5 h-3.5"})})]})]})]},t.id))}),!j&&k.length===0&&f.length>0&&e.jsx("div",{className:"text-center py-16 text-text-muted",children:"No avatars match, try a different filter."})]}),q&&e.jsx("div",{className:"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4",onClick:()=>!r&&c(!1),children:e.jsxs("div",{onClick:t=>t.stopPropagation(),className:"bg-card border border-border rounded-2xl w-full max-w-2xl overflow-hidden",children:[e.jsxs("div",{className:"px-6 py-4 border-b border-border flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(S,{className:"w-5 h-5 text-primary"}),e.jsx("h2",{className:"font-bold text-text",children:"Generate avatar"})]}),e.jsx("button",{onClick:()=>!r&&c(!1),className:"text-text-muted hover:text-text",children:e.jsx(R,{className:"w-5 h-5"})})]}),e.jsxs("div",{className:"p-6 space-y-4",children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("div",{children:[e.jsx("label",{className:"text-[11px] font-bold text-text-muted uppercase tracking-wide",children:"Name"}),e.jsx("input",{value:l.name,onChange:t=>i(a=>({...a,name:t.target.value})),placeholder:"e.g. Lina",className:"w-full mt-1 px-3 py-2 rounded-lg bg-bg border border-border text-sm text-text focus:border-primary outline-none"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-[11px] font-bold text-text-muted uppercase tracking-wide",children:"Gender"}

1),e.jsx("select",{value:l.gender,onChange:t=>i(a=>({...a,gender:t.target.value})),className:"w-full mt-1 px-3 py-2 rounded-lg bg-bg border border-border text-sm text-text focus:border-primary outline-none",children:me.map(([t,a])=>e.jsx("option",{value:t,children:a},t))})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-[11px] font-bold text-text-muted uppercase tracking-wide",children:"Ethnicity"}),e.jsx("select",{value:l.ethnicity,onChange:t=>i(a=>({...a,ethnicity:t.target.value})),className:"w-full mt-1 px-3 py-2 rounded-lg bg-bg border border-border text-sm text-text focus:border-primary outline-none",children:pe.map(t=>e.jsx("option",{value:t,children:t},t))})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-[11px] font-bold text-text-muted uppercase tracking-wide",children:"Age"}),e.jsx("input",{value:l.age_range,onChange:t=>i(a=>({...a,age_range:t.target.value})),placeholder:"20-25",className:"w-full mt-1 px-3 py-2 rounded-lg bg-bg border border-border text-sm text-text focus:border-primary outline-none"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-[11px] font-bold text-text-muted uppercase tracking-wide",children:"Region"}),e.jsx("input",{value:l.region_preset,onChange:t=>i(a=>({...a,region_preset:t.target.value})),placeholder:"MENA",className:"w-full mt-1 px-3 py-2 rounded-lg bg-bg border border-border text-sm text-text focus:border-primary outline-none"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-[11px] font-bold text-text-muted uppercase tracking-wide",children:"Niche"}),e.jsx("input",{value:l.niche,onChange:t=>i(a=>({...a,niche:t.target.value})),placeholder:"beauty",className:"w-full mt-1 px-3 py-2 rounded-lg bg-bg border border-border text-sm text-text focus:border-primary outline-none"})]})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-[11px] font-bold text-text-muted uppercase tracking-wide",children:"Description (optional)"}),e.jsx("textarea",{value:l.prompt,onChange:t=>i(a=>({...a,prompt:t.target.value})),rows:3,placeholder:"e.g. curly hair, beige sweater, bright bedroom, warm smile…",className:"w-full mt-1 px-3 py-2 rounded-lg bg-bg border border-border text-sm text-text focus:border-primary outline-none resize-none"}),e.jsx("p",{className:"text-[11px] text-text-muted mt-1",children:"The face is always front-facing, mouth visible (talking-head lipsync compatible)."})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-[11px] font-bold text-text-muted uppercase tracking-wide",children:"Photo of a real person (optional)"}),n?e.jsxs("div",{className:"mt-1 flex items-center gap-2 px-3 py-2 rounded-lg bg-bg border border-primary/50",children:[e.jsx("img",{src:`data:${n.mime};base64,${n.b64}`,alt:"",className:"w-9 h-9 rounded object-cover"}),e.jsx("span",{className:"text-xs text-text truncate flex-1",children:n.name}),e.jsx("button",{onClick:()=>E(null),className:"text-text-muted hover:text-text",children:e.jsx(R,{className:"w-4 h-4"})})]}):e.jsxs("label",{className:"mt-1 flex items-center gap-2 px-3 py-2 rounded-lg bg-bg border border-dashed border-border hover:border-primary cursor-pointer text-sm text-text-muted transition",children:[e.jsx(ce,{className:"w-4 h-4 shrink-0"})," Upload a photo → the avatar keeps THEIR face",e.jsx("input",{type:"file",accept:"image/*",className:"hidden",onChange:t=>V(t.target.files?.[0])})]}),e.jsx("p",{className:"text-[11px] text-text-muted mt-1",children:"With a photo → we clone that person (use a photo you have the rights to). Without a photo → synthetic avatar from the traits."})]})]}),e.jsxs("div",{className:"px-6 py-4 border-t border-border flex items-center justify-end gap-3",children:[e.jsx("button",{onClick:()=>!r&&c(!1),className:"px-4 py-2 text-text-muted hover:text-text text-sm font-bold",children:"Cancel"}),e.jsxs("button",{onClick:Z,disabled:!!r,className:"flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-primary to-accent text-white font-bold disabled:opacity-50",children:[r==="gen"?e.jsx(g,{className:"w-4 h-4 animate-spin"}):e.jsx(S,{className:"w-4 h-4"})," ",n?"Clone person":"Generate"," · ",d,"cr"]})]})]})}),h&&e.jsx("div",{className:"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4",onClick:()=>!r&&b(null),children:e.jsxs("div",{onClick:t=>t.stopPropagation(),className:"bg-card border border-border rounded-2xl w-full max-w-2xl overflow-hidden",children:[e.jsxs("div",{className:"px-6 py-4 border-b border-border flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(z,{className:"w-5 h-5 text-primary"}),e.jsxs("div",{children:[e.jsx("h2",{className:"font-bold text-text",children:"Regen avatar via prompt"}),e.jsxs("p",{className:"text-xs text-text-muted",children:[h.name,h.is_global_preset?" · creates a personal copy":""]})]})]}),e.jsx("button",{onClick:()=>!r&&b(null),className:"text-text-muted hover:text-text",children:e.jsx(R,{className:"w-5 h-5"})})]}),e.jsxs("div",{className:"p-6 space-y-4",children:[e.jsxs("div",{children:[e.jsx("label",{className:"text-xs font-black text-text-muted uppercase tracking-widest mb-2 block",children:"Avatar prompt"}),e.jsx("textarea",{value:N,onChange:t=>P(t.target.value),rows:5,maxLength:500,className:"w-full px-4 py-3 rounded-xl bg-bg border border-border text-text text-sm focus:border-primary outline-none resize-none",placeholder:"Describe: nationality, age, outfit, scene, expression, camera angle…"}),e.jsxs("div",{className:"flex justify-between text-xs text-text-muted mt-2",children:[e.jsx("span",{children:'Tip: keep "looking at camera" + "iPhone selfie" for 0 AI tells'}),e.jsxs("span",{children:[N.length,"/500"]})]})]}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:["younger","outdoor scene","different outfit"].map(t=>e.jsxs("button",{onClick:()=>P(a=>`${a}, ${t}`),className:"px-3 py-2 rounded-lg bg-bg border border-border text-xs text-text-muted hover:border-primary hover:text-text transition",children:["+ ",t]},t))})]}),e.jsxs("div",{className:"px-6 py-4 border-t border-border flex items-center justify-end gap-3",children:[e.jsx("button",{onClick:()=>!r&&b(null),className:"px-4 py-2 text-text-muted hover:text-text text-sm font-bold",children:"Cancel"}),e.jsxs("button",{onClick:X,disabled:!!r||N.length<10,className:"flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-primary to-accent text-white font-bold disabled:opacity-40",children:[r==="regen"?e.jsx(g,{className:"w-4 h-4 animate-spin"}):e.jsx(xe,{className:"w-4 h-4"})," Regen · ",d,"cr"]})]})]})}),x&&e.jsx("div",{className:"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4",onClick:()=>!r&&y(null),children:e.jsxs("div",{onClick:t=>t.stopPropagation(),className:"bg-card border border-border rounded-2xl w-full max-w-md overflow-hidden",children:[e.jsxs("div",{className:"p-6 flex items-start gap-4",children:[x.image_url?e.jsx("img",{src:x.image_url,alt:x.name,className:"w-16 h-20 rounded-lg object-cover border border-border shrink-0"}):e.jsx("div",{className:"w-16 h-20 rounded-lg bg-bg border border-border flex items-center justify-center shrink-0",children:e.jsx(F,{className:"w-6 h-6 text-text-muted"})}),e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(T,{className:"w-4 h-4 text-error"}),e.jsx("h2",{className:"font-black text-text",children:"Delete this avatar?"})]}),e.jsxs("p",{className:"text-sm text-text-muted",children:['"',x.name,`" will be permanently removed from your library. Videos you've already generated aren't affected.`]})]})]}),e.jsxs("div",{className:"px-6 py-4 border-t border-border flex items-center justify-end gap-3",children:[e.jsx("button",{onClick:()=>!r&&y(null),className:"px-4 py-2 text-text-muted hover:text-text text-sm font-bold",children:"Cancel"}),e.jsxs("button",{onClick:()=>K(x),disabled:!!r,className:"flex items-center gap-2 px-5 py-2 rounded-lg bg-error text-white font-bold disabled:opacity-50 hover:opacity-90 transition",children:[r===`del-${x.id}`?e.jsx(g,{className:"w-4 h-4 animate-spin"}):e.jsx(T,{className:"w-4 h-4"})," Delete"]})]})]})})]})};export{ve as UgcAvatars,ve as default};