CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
ScreenshotToComponent-S_UZI9HE.js5 linesDownload Raw Back to assets
1import{r,j as e}from"./react-DKy9e2uO.js";import{a as b}from"./geminiService-Cgwdboli.js";import{P as w,A as N,M as y}from"./index-Ck8YGBbR.js";import{L as C}from"./LoadingSpinner-B20BJ_HS.js";import{d as v,b as I,f as P}from"./fileUtils-Bw7t6Hrv.js";import"./bottleneck-Cpj98o6Y.js";import"./@google-D80DdW2m.js";import"./react-dom-CpxHE_eW.js";import"./scheduler-DYLXRpC5.js";import"./idb-Dob3nYDb.js";import"./marked-CesSW9Du.js";import"./jszip-s56H2EZ-.js";const M=()=>{const[d,h]=r.useState(null),[l,m]=r.useState(""),[o,x]=r.useState(!1),[c,i]=r.useState(""),p=r.useRef(null),u=async t=>{x(!0),i(""),m("");try{const s=b(t);let a="";for await(const n of s)a+=n,m(a.replace(/^```(?:\w+\n)?/,"").replace(/```$/,""))}catch(s){i(s instanceof Error?s.message:"An unknown error occurred.")}finally{x(!1)}},f=async t=>{try{const[s,a]=await Promise.all([I(t),P(t)]);h(s),u(a)}catch{i("Could not process the image.")}},g=r.useCallback(async t=>{const s=t.clipboardData.items;for(const a of s)if(a.type.indexOf("image")!==-1){const n=a.getAsFile();n&&await f(n);return}},[]),j=async t=>{var a;const s=(a=t.target.files)==null?void 0:a[0];s&&await f(s)};return e.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8",children:[e.jsxs("header",{className:"mb-6",children:[e.jsxs("h1",{className:"text-3xl font-bold text-slate-100 flex items-center",children:[e.jsx(w,{}),e.jsx("span",{className:"ml-3",children:"AI Screenshot-to-Component"})]}),e.jsx("p",{className:"text-slate-400 mt-1",children:"Paste or upload a screenshot of a UI element to generate React/Tailwind code."})]}),e.jsxs("div",{className:"flex-grow grid grid-cols-1 lg:grid-cols-2 gap-6 min-h-0",children:[e.jsx("div",{onPaste:g,className:"flex flex-col items-center justify-center bg-slate-800/50 p-6 rounded-lg border-2 border-dashed border-slate-700 focus:outline-none focus:border-cyan-500 overflow-y-auto",tabIndex:0,children:d?e.jsx("img",{src:d,alt:"Pasted content",className:"max-w-full max-h-full object-contain rounded-md shadow-lg"}):e.jsxs("div",{className:"text-center text-slate-400",children:[e.jsx("h2",{className:"text-xl font-bold",children:"Paste an image here"}),e.jsx("p",{className:"mb-2",children:"(Cmd/Ctrl + V)"}),e.jsx("p",{className:"text-sm",children:"or"}),e.jsx("button",{onClick:()=>{var t;return(t=p.current)==null?void 0:t.click()},className:"mt-2 btn-primary px-4 py-2 text-sm",children:"Upload File"}),e.jsx("input",{type:"file",ref:p,onChange:j,accept:"image/*",className:"hidden"})]})}),e.jsxs("div",{className:"flex flex-col h-full",children:[e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[e.jsx("label",{className:"text-sm font-medium text-slate-400",children:"Generated Code"}),l&&!o&&e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("button",{onClick:()=>navigator.clipboard.writeText(l),className:"px-3 py-1 bg-slate-700 text-xs rounded-md hover:bg-slate-600",children:"Copy Code"}),e.jsxs("button",{onClick:()=>v(l,"Component.tsx","text/typescript"),className:"flex items-center gap-1 px-3 py-1 bg-slate-700 text-xs rounded-md hover:bg-slate-600",children:[e.jsx(N,{className:"w-4 h-4"})," Download"]})]})]}),e.jsxs("div",{className:"flex-grow bg-slate-900 border border-slate-700 rounded-md overflow-y-auto",children:[o&&e.jsx("div",{className:"flex items-center justify-center h-full",children:e.jsx(C,{})}),c&&e.jsx("p",{className:"p-4 text-red-400",children:c}),l&&!o&&e.jsx(y,{content:`\`\`\`tsx2${l}3\`\`\``}),!o&&!l&&!c&&e.jsx("div",{className:"text-slate-500 h-full flex items-center justify-center",children:"Generated component code will appear here."})]})]})]})]})};export{M as ScreenshotToComponent};4//# sourceMappingURL=ScreenshotToComponent-S_UZI9HE.js.map5