[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_174":175,"_176":177},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_116":117,"_33":-7,"_118":-5,"_17":119,"_120":121,"_122":123,"_124":125,"_126":127,"_47":-5,"_128":-5,"_129":130,"_131":24,"_132":133,"_134":76,"_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","EmulatedAndie","name","forEmulated1","branchName","main","project",{"_27":65,"_13":14,"_31":66,"_67":-5,"_68":24,"_69":70,"_71":70,"_72":-5,"_73":-5,"_25":62,"_74":57,"_75":76,"_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","3fd74f10-277a-11f0-b46e-569c3dd06744","branchId","3fd1586c-277a-11f0-b46e-569c3dd06744","createdAt",["D",1746206645886],"version",1,"orgId","18c6b49c-e900-421f-b2f2-b5bdbd59d88e","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","3fd55bd8-277a-11f0-b46e-569c3dd06744","main.tsx","fileType","http","deleted","7cb36bbd-7188-4e9b-bad4-01a8377ef540","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJwT3A0dXNkU1Zpb2cyU0lNbE1uQ2MwQVVWTCJ9","3fd10ac4-277a-11f0-b46e-569c3dd06744",["D",1746206645862],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_115":64},"org",{"_11":12,"_111":-5,"_63":64,"_25":62,"_112":113,"_114":24},"branch",{"_33":34,"_13":16,"_27":30,"_99":65,"_100":101,"_102":20,"_103":104,"_105":106,"_107":108,"_109":14,"_110":12},"isOwned","projectId","forkedBranchId","75fed514-2783-11f0-b46e-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","unlisted","forkedProjectId","75fe844c-2783-11f0-b46e-569c3dd06744","forkedProjectOrgId","924a5b4c-8689-40a1-b891-b32f6630dae6","projectName","userHandle","displayName","tier","free","canRestrictVals","profileImageUrl","path","","adoptOrgId",{"_27":65,"_13":14,"_31":170,"_67":-5,"_68":24,"_69":70,"_71":70,"_72":-5,"_73":-5,"_25":62,"_74":57,"_75":76,"_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":171,"_94":172,"_96":173,"_98":24},"tree",[165],"files",[165],"counts",{"_155":20,"_156":34,"_157":34,"_158":159,"_160":161},"contents",[146],"upstreamProject","upstreamBranch",{"_27":101,"_31":139,"_140":141,"_13":16,"_99":106,"_33":34,"_100":142,"_102":20,"_143":144,"_67":-5,"_98":24,"_69":104,"_110":145,"_35":108,"_109":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746210602227],"updatedAt",["D",1732659595681],"7d1949d8-2783-11f0-b46e-569c3dd06744","lockfileKey","1763569701888-esm.town_v_andiebuk_forEmulated1@1-main","andiebuk",{"_27":147,"_13":58,"_56":57,"_37":-5,"_29":30,"_148":34,"_149":76,"_31":150,"_33":20,"_59":60,"_151":152,"_61":24,"_153":-5,"_116":154},"3fd55b38-277a-11f0-b46e-569c3dd06744","branchVersion","latest",["D",1732659639735],"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