function CodeOutputSidebar({ isCollapsed, toggleSidebar, selectedOutput, onChangeOutput, generatedCode, isLoading, onCopy }) { return /*#__PURE__*/ React.createElement("div", { className: `fixed left-0 top-0 h-full ${isCollapsed ? 'w-0' : 'w-[300px]'} bg-white border-r border-[#d1d5db] transition-all duration-300 ease-in-out`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleSidebar, className: "absolute top-5 right-[-25px] bg-gray-200 rounded-full p-2 transition-transform duration-300 ease-in-out", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${isCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'}`, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), !isCollapsed && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "codeOutput", value: selectedOutput, onChange: onChangeOutput, className: "w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "html-tailwind", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, "HTML + Tailwind"), /*#__PURE__*/ React.createElement("option", { value: "react-tailwind", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, "React + Tailwind"))), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex-1 overflow-auto", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-full", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner animate-spin", __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this })) : /*#__PURE__*/ React.createElement("textarea", { readOnly: true, name: "generatedCode", value: generatedCode, placeholder: "Generated code will appear here", className: "w-full h-full p-2 border border-gray-300 rounded-md bg-[#f5f5f5] text-[#333] overflow-auto", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onCopy, className: "w-full p-2 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Copy Code")))); } function CodeOutputSidebarStory() { const [isCollapsed, setIsCollapsed] = React.useState(false); const [selectedOutput, setSelectedOutput] = React.useState('html-tailwind'); const [generatedCode, setGeneratedCode] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const toggleSidebar = ()=>setIsCollapsed(!isCollapsed); const onChangeOutput = (e)=>setSelectedOutput(e.target.value); const onCopy = ()=>navigator.clipboard.writeText(generatedCode); return /*#__PURE__*/ React.createElement("div", { className: "h-screen", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CodeOutputSidebar, { isCollapsed: isCollapsed, toggleSidebar: toggleSidebar, selectedOutput: selectedOutput, onChangeOutput: onChangeOutput, generatedCode: generatedCode, isLoading: isLoading, onCopy: onCopy, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this })); } function FileDropCta() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-[70%] space-y-[12px] mx-auto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#bdbdbd] p-4 rounded-full w-[64px] h-[64px] flex items-center justify-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-picture-o text-[#424242] text-[32px]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-[#9e9e9e] text-[32px] font-roboto text-center", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "Drag & drop a screenshot here,", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 7, columnNumber: 103 }, __self: this }), " or paste from clipboard,", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 7, columnNumber: 134 }, __self: this }), " or click to upload")); } function FileDropCtaStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FileDropCta, { __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function FileDrop({ onFileChange, filePreview, onRemoveFile }) { const handleDragOver = (e)=>{ e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy'; }; const handleDragEnter = (e)=>{ e.preventDefault(); e.stopPropagation(); }; const handleDragLeave = (e)=>{ e.preventDefault(); e.stopPropagation(); }; const handleDrop = (e)=>{ e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.files && e.dataTransfer.files[0]) { const file = e.dataTransfer.files[0]; if (/image\/(jpeg|jpg|png|gif|webp)$/.test(file.type)) { onFileChange(file); } } }; const handlePaste = (e)=>{ const items = (e.clipboardData || window.clipboardData).items; for (const item of items){ if (/image\/(jpeg|jpg|png|gif|webp)$/.test(item.type)) { const blob = item.getAsFile(); onFileChange(blob); } } }; const handleClick = ()=>{ const fileInput = document.createElement("input"); fileInput.type = "file"; fileInput.accept = "image/jpeg,image/jpg,image/png,image/gif,image/webp"; fileInput.onchange = (e)=>{ onFileChange(e.target.files[0]); }; fileInput.click(); }; const borderColor = filePreview ? 'border-blue-500' : 'border-gray-300 hover:border-blue-500'; return /*#__PURE__*/ React.createElement("div", { className: "w-full py-12", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg mx-4 my-4 p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${borderColor} border-dotted w-full h-full rounded-lg bg-[#f5f5f5] py-12 flex justify-center items-center cursor-pointer`, style: { transition: 'border 0.2s ease-in-out' }, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, onPaste: handlePaste, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, filePreview ? /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full p-4", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: filePreview, alt: "Preview of uploaded file", className: "rounded-lg object-cover w-full h-full", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute top-0 right-0 text-red-500 text-2xl p-2 bg-white rounded-full", onClick: onRemoveFile, __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "✖")) : /*#__PURE__*/ React.createElement(FileDropCta, { __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this })))); } function FileDropStory() { const [filePreview, setFilePreview] = React.useState(null); const onFileChange = (file)=>{ const reader = new FileReader(); reader.onload = (e)=>{ setFilePreview(e.target.result); }; reader.readAsDataURL(file); }; const onRemoveFile = ()=>{ setFilePreview(null); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 w-full", style: { maxWidth: '1200px' }, __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FileDrop, { onFileChange: onFileChange, filePreview: filePreview, onRemoveFile: onRemoveFile, __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isSidebarCollapsed, setIsSidebarCollapsed] = React.useState(false); const [selectedOutput, setSelectedOutput] = React.useState('react-tailwind'); const [generatedCode, setGeneratedCode] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [filePreview, setFilePreview] = React.useState(null); const toggleSidebar = ()=>setIsSidebarCollapsed(!isSidebarCollapsed); const handleFileChange = (file)=>{ setIsLoading(true); setFilePreview(URL.createObjectURL(file)); const framework = selectedOutput.split('-')[0].charAt(0).toUpperCase() + selectedOutput.split('-')[0].slice(1); const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = ()=>{ const base64Img = reader.result; const promptMessage = `You are an expert ${framework} developer. You will be given an image and your job is to reproduce it in ${framework}. Write only the code. Do not add comments. You must return only the code`; fetch('/integrations/gpt-vision/', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": [ { "type": "text", "text": promptMessage }, { "type": "image_url", "image_url": { "url": base64Img } } ] } ] }), headers: { 'Content-Type': 'application/json' } }).then((response)=>response.json()).then((data)=>{ const codeResult = data.choices[0].message.content; setGeneratedCode(codeResult); setIsLoading(false); }); }; }; const onRemoveFile = ()=>{ setFilePreview(null); setGeneratedCode(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CodeOutputSidebar, { isCollapsed: isSidebarCollapsed, toggleSidebar: toggleSidebar, selectedOutput: selectedOutput, onChangeOutput: (e)=>{ setSelectedOutput(e.target.value); if (filePreview) { handleFileChange(filePreview); } }, generatedCode: generatedCode, isLoading: isLoading, onCopy: ()=>navigator.clipboard.writeText(generatedCode), __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `flex-1 ${isSidebarCollapsed ? 'pl-0' : 'pl-[332px]'} bg-[#f5f5f5] transition-all duration-300 ease-in-out md:pl-0`, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(FileDrop, { onFileChange: handleFileChange, filePreview: filePreview, onRemoveFile: onRemoveFile, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, ` @keyframes scanner { 0% {top: -100%;} 50% {top: 100%;} 100% {top: -100%;} } .scanning-animation::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 2px; background-color: red; animation: scanner 4s linear infinite; } `), isLoading && filePreview && /*#__PURE__*/ React.createElement("div", { className: "scanning-animation absolute top-0 left-0 w-full h-full", __source: { fileName: "", lineNumber: 91, columnNumber: 36 }, __self: this })); }