CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
ScreenshotToComponent-D0tkjdp-.js5 linesDownload Raw Back to assets
1import{r as i,j as e}from"./react-CIdJ77ke.js";import{W as j,J as y,L as w,M as N,Y as C}from"./index-CX7Qxd1D.js";import{d as v,b as I,f as k}from"./fileUtils-DLahR3l0.js";import"./accessibilityService-PX6aNbbc.js";import"./workspaceConnectorService-KhhKdOYD.js";import"./@braintree-DzxiOROe.js";import"./react-dom-R9L8nDNe.js";import"./scheduler-CoSDG3-6.js";import"./@google-CcUHq7Ay.js";import"./idb-Dob3nYDb.js";import"./marked-BrGMJkBT.js";import"./mermaid-KwKZWwy0.js";import"./dayjs-CeEF-NGT.js";import"./d3-transition-CiCB8KJE.js";import"./d3-timer-DdKHrDhs.js";import"./d3-dispatch-kxCwF96_.js";import"./d3-interpolate-CtIaNujU.js";import"./d3-color-amxIadob.js";import"./d3-selection-C52G7wmG.js";import"./d3-ease-DRPgKoYJ.js";import"./d3-zoom-BYoC3mS3.js";import"./dompurify-J5RlrwSC.js";import"./dagre-d3-es-CTpFWynZ.js";import"./lodash-es-Dt6r0yiR.js";import"./d3-shape-CX8xTzfR.js";import"./d3-path-CimkQT29.js";import"./d3-fetch-BOsq7VnW.js";import"./khroma-DUX6PT6k.js";import"./uuid-DhYbOkY1.js";import"./d3-scale-DRZz3QW5.js";import"./internmap-BkD7Hj8s.js";import"./d3-array-DGRYoJHh.js";import"./d3-format-CzD4bSOQ.js";import"./d3-time-format-CUNN4Ell.js";import"./d3-time-6cSPyVSY.js";import"./d3-axis-DSWTncID.js";import"./elkjs-oKFFZvz7.js";import"./cytoscape-DtBltrT8.js";import"./cytoscape-cose-bilkent-Cgr1thlj.js";import"./cose-base-CwCxnKwh.js";import"./layout-base-CMXQqlmj.js";import"./d3-sankey-DgqkLiUE.js";import"./d3-scale-chromatic-B-NsZVaP.js";import"./ts-dedent-DrFu-skq.js";import"./stylis-D5iaQeiq.js";import"./mdast-util-from-markdown-CLAsVoWb.js";import"./micromark-CTBPIv-_.js";import"./micromark-util-combine-extensions-Bka6Sc1c.js";import"./micromark-util-chunked-DrRIdSP-.js";import"./micromark-factory-space-x2vfxbz5.js";import"./micromark-util-character-Bcm1tP9o.js";import"./micromark-core-commonmark-AH8VCgT7.js";import"./micromark-util-classify-character-Cq7Fg3xE.js";import"./micromark-util-resolve-all-PQCKh0dx.js";import"./decode-named-character-reference-C3-224fz.js";import"./micromark-util-subtokenize-QwsxNXk2.js";import"./micromark-factory-destination-CypD_wgM.js";import"./micromark-factory-label-CRHH4ZHP.js";import"./micromark-factory-title-B7kCBvC9.js";import"./micromark-factory-whitespace-B322EA6O.js";import"./micromark-util-normalize-identifier-C9ANKk3v.js";import"./micromark-util-html-tag-name-DbKNfynz.js";import"./micromark-util-decode-numeric-character-reference-DRnCnno4.js";import"./micromark-util-decode-string-DJl8Y_PO.js";import"./unist-util-stringify-position-Ch_qCilz.js";import"./mdast-util-to-string-C_aolqmU.js";import"./jszip-CFFhfFtd.js";import"./octokit-B6bKu3NB.js";import"./@octokit-MBEWYTsi.js";import"./bottleneck-D_vuF9V7.js";import"./universal-user-agent-CLgqIJsR.js";import"./before-after-hook-y8XtM9xW.js";import"./fast-content-type-parse-3SwieiST.js";import"./axe-core-Cc5paZPx.js";const ze=()=>{const[c,h]=i.useState(null),[s,p]=i.useState(""),[a,d]=i.useState(!1),[n,l]=i.useState(""),x=i.useRef(null),u=async r=>{d(!0),l(""),p("");try{const t=C(r);let o="";for await(const m of t)o+=m,p(o.replace(/^```(?:\w+\n)?/,"").replace(/```$/,""))}catch(t){l(t instanceof Error?t.message:"An unknown error occurred.")}finally{d(!1)}},f=async r=>{try{const[t,o]=await Promise.all([I(r),k(r)]);h(t),u(o)}catch{l("Could not process the image.")}},g=i.useCallback(async r=>{const t=r.clipboardData.items;for(const o of t)if(o.type.indexOf("image")!==-1){const m=o.getAsFile();m&&await f(m);return}},[]),b=async r=>{const t=r.target.files?.[0];t&&await f(t)};return e.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary",children:[e.jsxs("header",{className:"mb-6",children:[e.jsxs("h1",{className:"text-3xl font-bold flex items-center",children:[e.jsx(j,{}),e.jsx("span",{className:"ml-3",children:"AI Screenshot-to-Component"})]}),e.jsx("p",{className:"text-text-secondary 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-surface p-6 rounded-lg border-2 border-dashed border-border focus:outline-none focus:border-primary overflow-y-auto",tabIndex:0,children:c?e.jsx("img",{src:c,alt:"Pasted content",className:"max-w-full max-h-full object-contain rounded-md shadow-lg"}):e.jsxs("div",{className:"text-center text-text-secondary",children:[e.jsx("h2",{className:"text-xl font-bold text-text-primary",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:()=>x.current?.click(),className:"mt-2 btn-primary px-4 py-2 text-sm",children:"Upload File"}),e.jsx("input",{type:"file",ref:x,onChange:b,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-text-secondary",children:"Generated Code"}),s&&!a&&e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("button",{onClick:()=>navigator.clipboard.writeText(s),className:"px-3 py-1 bg-gray-100 text-xs rounded-md hover:bg-gray-200",children:"Copy Code"}),e.jsxs("button",{onClick:()=>v(s,"Component.tsx","text/typescript"),className:"flex items-center gap-1 px-3 py-1 bg-gray-100 text-xs rounded-md hover:bg-gray-200",children:[e.jsx(y,{className:"w-4 h-4"})," Download"]})]})]}),e.jsxs("div",{className:"flex-grow bg-background border border-border rounded-md overflow-y-auto",children:[a&&e.jsx("div",{className:"flex items-center justify-center h-full",children:e.jsx(w,{})}),n&&e.jsx("p",{className:"p-4 text-red-500",children:n}),s&&!a&&e.jsx(N,{content:`\`\`\`tsx2${s}3\`\`\``}),!a&&!s&&!n&&e.jsx("div",{className:"text-text-secondary h-full flex items-center justify-center",children:"Generated component code will appear here."})]})]})]})]})};export{ze as ScreenshotToComponent};4//# sourceMappingURL=ScreenshotToComponent-D0tkjdp-.js.map5