[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_176":177,"_178":179},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_115":116,"_33":-7,"_117":-5,"_17":118,"_119":120,"_121":122,"_123":124,"_125":126,"_47":-5,"_127":128,"_129":130,"_131":24,"_132":133,"_134":69,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.history",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":-5},"handle","manyone","name","forEmulated1","branchName","main","project",{"_27":65,"_13":14,"_31":66,"_67":-5,"_68":69,"_70":71,"_72":71,"_73":-5,"_74":-5,"_25":62,"_75":57,"_76":69,"_77":-5,"_78":-5,"_79":20,"_35":36,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_45":93,"_94":95,"_96":97,"_98":24},"page",0,"history",[26],"hasNext",false,"userId",{"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":-5,"_38":-5,"_39":-5,"_40":-5,"_41":-5,"_42":-5,"_43":-5,"_44":-5,"_45":46,"_47":48,"_49":-5,"_50":-5,"_51":-5,"_52":-5,"_53":54},"id","29af466e-26cd-11f0-9439-569c3dd06744","branchId","29a88b26-26cd-11f0-9439-569c3dd06744","createdAt",["D",1746132305774],"version",1,"orgId","11b582b8-f839-42d5-ba29-49c4922cc77a","parentId","incomingCommitId","aiChatMessageId","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle","source","clientLabel","user",{"_27":62,"_35":36,"_11":12,"_63":64},"file",{"_56":57,"_13":58,"_59":60,"_61":24},"pull","merge","revert","multiple","commits",[55],{"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":-5,"_38":-5,"_39":-5,"_40":-5,"_41":-5,"_42":-5,"_43":-5,"_44":-5,"_45":46,"_47":48,"_49":-5,"_50":-5,"_51":-5},"fileId","29acb7dc-26cd-11f0-9439-569c3dd06744","main.tsx","fileType","http","deleted","11a006cf-aeab-4156-a932-83df54e7ef3d","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycDFBVGp4VFZhajRoZHRFT3M1eE1aMWdtQ0UifQ","29a82672-26cd-11f0-9439-569c3dd06744",["D",1746132305749],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_114":64},"org",{"_11":12,"_110":-5,"_63":64,"_25":62,"_111":112,"_113":24},"branch",{"_33":34,"_13":16,"_27":30,"_99":65,"_100":101,"_102":20,"_103":71,"_104":105,"_106":107,"_108":14,"_109":12},"isOwned","projectId","forkedBranchId","3fd1586c-277a-11f0-b46e-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","3fd10ac4-277a-11f0-b46e-569c3dd06744","forkedProjectOrgId","18c6b49c-e900-421f-b2f2-b5bdbd59d88e","projectName","userHandle","displayName","tier","free","canRestrictVals","profileImageUrl","path","","adoptOrgId",{"_27":65,"_13":14,"_31":172,"_67":-5,"_68":69,"_70":71,"_72":71,"_73":-5,"_74":-5,"_25":62,"_75":57,"_76":69,"_77":-5,"_78":-5,"_79":20,"_35":36,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_45":173,"_94":174,"_96":175,"_98":24},"tree",[167],"files",[167],"counts",{"_157":20,"_158":34,"_159":20,"_160":161,"_162":163},"contents",[148],"upstreamProject",{"_27":105,"_13":14,"_73":-5,"_74":-5,"_70":71,"_45":146},"upstreamBranch",{"_27":101,"_31":139,"_140":141,"_13":16,"_99":105,"_33":34,"_100":142,"_102":20,"_143":144,"_67":-5,"_98":24,"_70":71,"_109":145,"_35":107,"_108":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746206645862],"updatedAt",["D",1732659639735],"75fed514-2783-11f0-b46e-569c3dd06744","lockfileKey","1763831251747-esm.town_v_EmulatedAndie_forEmulated1@1-main","EmulatedAndie",{"_11":145,"_114":147},"https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJwT3A0dXNkU1Zpb2cyU0lNbE1uQ2MwQVVWTCJ9",{"_27":149,"_13":58,"_56":57,"_37":-5,"_29":30,"_150":34,"_151":69,"_31":152,"_33":20,"_59":60,"_153":154,"_61":24,"_155":-5,"_115":156},"29acb732-26cd-11f0-9439-569c3dd06744","branchVersion","latest",["D",1733305027490],"content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useRef, useEffect, useCallback } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport debounce from \"https://esm.sh/lodash.debounce\";\nimport imageCompression from \"https://esm.sh/browser-image-compression\";\n\nfunction App() {\n const [generatedCode, setGeneratedCode] = useState('');\n const [codeHistory, setCodeHistory] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [editPrompt, setEditPrompt] = useState('');\n const [isRefining, setIsRefining] = useState(false);\n const [lastUploadedImage, setLastUploadedImage] = useState(null);\n const [showCopiedMessage, setShowCopiedMessage] = useState(false);\n const [theme, setTheme] = useState(() => {\n const savedTheme = localStorage.getItem('theme');\n return savedTheme || \n (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');\n });\n const fileInputRef = useRef(null);\n\n const toggleTheme = () => {\n const newTheme = theme === 'light' ? 'dark' : 'light';\n setTheme(newTheme);\n localStorage.setItem('theme', newTheme);\n };\n\n useEffect(() => {\n const root = document.documentElement;\n if (theme === 'dark') {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n }, [theme]);\n\n useEffect(() => {\n const savedLandingPage = localStorage.getItem('lastGeneratedLandingPage');\n if (savedLandingPage) {\n setGeneratedCode(savedLandingPage);\n }\n }, []);\n\n const generateLandingPage = async (isInitial = true, imageBase64 = null, existingCode = '', editPrompt = '') => {\n setIsLoading(true);\n setIsRefining(isInitial ? false : true);\n try {\n const response = await fetch('/generate-landing-page', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n isInitial,\n imageBase64,\n existingCode,\n editPrompt\n })\n });\n\n const data = await response.json();\n \n if (data.error) {\n throw new Error(data.error);\n }\n\n setCodeHistory(prevHistory => [...prevHistory, generatedCode]);\n setGeneratedCode(data.code);\n\n localStorage.setItem('lastGeneratedLandingPage', data.code);\n } catch (error) {\n console.error('Error generating landing page:', error);\n alert(`Error: ${error.message}`);\n } finally {\n setIsLoading(false);\n setIsRefining(false);\n }\n };\n\n const compressImage = async (file) => {\n const options = {\n maxSizeMB: 1,\n maxWidthOrHeight: 1920,\n useWebWorker: true\n };\n try {\n const compressedFile = await imageCompression(file, options);\n return compressedFile;\n } catch (error) {\n console.error(\"Error compressing image:\", error);\n return file;\n }\n };\n\n const handleImageUpload = async (event) => {\n const file = event.target.files[0];\n if (file) {\n const compressedFile = await compressImage(file);\n const reader = new FileReader();\n reader.onloadend = () => {\n const base64 = reader.result.split(',')[1];\n setLastUploadedImage(base64);\n generateLandingPage(true, base64);\n };\n reader.readAsDataURL(compressedFile);\n }\n };\n\n const handleRegenerate = () => {\n if (lastUploadedImage) {\n generateLandingPage(true, lastUploadedImage);\n } else {\n alert(\"Please upload an image first before regenerating.\");\n }\n };\n\n const debouncedRefineDesign = useCallback(\n debounce((prompt) => {\n if (prompt.trim()) {\n generateLandingPage(false, null, generatedCode, prompt);\n }\n }, 1000),\n [generatedCode]\n );\n\n const handleRefineDesign = (e) => {\n setEditPrompt(e.target.value);\n };\n\n const triggerRefineDesign = () => {\n if (editPrompt.trim()) {\n debouncedRefineDesign(editPrompt);\n }\n };\n\n const handleUndo = () => {\n if (codeHistory.length > 0) {\n const previousCode = codeHistory[codeHistory.length - 1];\n setGeneratedCode(previousCode);\n setCodeHistory(prevHistory => prevHistory.slice(0, -1));\n localStorage.setItem('lastGeneratedLandingPage', previousCode);\n }\n };\n\n const handleDownloadHTML = () => {\n const blob = new Blob([generatedCode], { type: 'text/html' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'generated_landing_page.html';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n };\n\n const handleCopyToClipboard = () => {\n navigator.clipboard.writeText(generatedCode).then(() => {\n setShowCopiedMessage(true);\n setTimeout(() => {\n setShowCopiedMessage(false);\n }, 2000);\n }).catch(err => {\n console.error('Failed to copy text: ', err);\n alert('Failed to copy text. Please try again.');\n });\n };\n\n const handleCodeEdit = (e) => {\n const newCode = e.target.value;\n setGeneratedCode(newCode);\n localStorage.setItem('lastGeneratedLandingPage', newCode);\n };\n\n const debouncedUpdatePreview = useCallback(\n debounce((code) => {\n const iframe = document.getElementById('preview-iframe');\n if (iframe) {\n iframe.srcdoc = code;\n }\n }, 500),\n []\n );\n\n useEffect(() => {\n debouncedUpdatePreview(generatedCode);\n }, [generatedCode, debouncedUpdatePreview]);\n\n return (\n

\n

\n

Landing Page Generator

\n \n

\n \n

\n \n \n \n {codeHistory.length > 0 && (\n \n )}\n

\n\n {generatedCode && (\n

\n

Generated Landing Page

\n