[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_169":170,"_171":172},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_104":-7,"_105":106,"_90":-7,"_107":-5,"_15":108,"_109":110,"_111":112,"_113":114,"_115":116,"_117":-5,"_118":-5,"_119":120,"_121":20,"_122":123,"_124":53,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.remixes",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26},"handle","EmulatedAndie","name","forEmulated1","project",{"_27":64,"_13":14,"_54":65,"_66":-5,"_67":20,"_31":40,"_41":40,"_29":-5,"_30":-5,"_42":68,"_50":69,"_52":53,"_70":-5,"_71":-5,"_56":22,"_44":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_33":86,"_48":87,"_88":89,"_46":20},"forks",[38],"hasNext",false,"page",0,"forkCount",1,"upstream",{"_27":28,"_13":14,"_29":-5,"_30":-5,"_31":32,"_33":34},"id","75fe844c-2783-11f0-b46e-569c3dd06744","description","imageUrl","privacy","unlisted","user",{"_11":35,"_36":37},"andiebuk","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJwQlE1YWJ4dTg5TGhBZG5tRTFMTHViamNYVCJ9",{"_27":39,"_13":14,"_29":-5,"_30":-5,"_31":40,"_41":40,"_42":43,"_44":45,"_46":20,"_33":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":22},"29a82672-26cd-11f0-9439-569c3dd06744","public","httpPrivacy","userId","11a006cf-aeab-4156-a932-83df54e7ef3d","orgId","11b582b8-f839-42d5-ba29-49c4922cc77a","isOwned",{"_11":57,"_36":60},"org",{"_11":57,"_58":-5,"_59":60,"_42":43,"_61":62,"_63":20},"pinnedFileId","29acb7dc-26cd-11f0-9439-569c3dd06744","pinPreview",true,"createdAt",["D",1746132305749],"likeCount","manyone","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycDFBVGp4VFZhajRoZHRFT3M1eE1aMWdtQ0UifQ","tier","free","canRestrictVals","3fd10ac4-277a-11f0-b46e-569c3dd06744",["D",1746206645862],"deletedAt","legacyEnvVars","7cb36bbd-7188-4e9b-bad4-01a8377ef540","3fd55bd8-277a-11f0-b46e-569c3dd06744","pinMigrated","screenshotVersion","18c6b49c-e900-421f-b2f2-b5bdbd59d88e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_36":103},{"_11":12,"_58":-5,"_59":103,"_42":68,"_61":62,"_63":20},"branch",{"_90":24,"_13":91,"_27":92,"_93":64,"_94":95,"_96":22,"_97":32,"_98":28,"_99":100,"_101":14,"_102":12},"version","main","3fd1586c-277a-11f0-b46e-569c3dd06744","projectId","forkedBranchId","75fed514-2783-11f0-b46e-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","924a5b4c-8689-40a1-b891-b32f6630dae6","projectName","userHandle","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJwT3A0dXNkU1Zpb2cyU0lNbE1uQ2MwQVVWTCJ9","branchName","path","","adoptOrgId",{"_27":64,"_13":14,"_54":165,"_66":-5,"_67":20,"_31":40,"_41":40,"_29":-5,"_30":-5,"_42":68,"_50":69,"_52":53,"_70":-5,"_71":-5,"_56":22,"_44":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_33":166,"_48":167,"_88":168,"_46":20},"tree",[160],"files",[160],"counts",{"_151":22,"_152":24,"_17":24,"_153":154,"_155":156},"contents",[135],"file","upstreamProject","upstreamBranch",{"_27":95,"_54":129,"_130":131,"_13":91,"_93":28,"_90":24,"_94":132,"_96":22,"_133":134,"_66":-5,"_46":20,"_31":32,"_102":35,"_44":100,"_101":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",{"_27":136,"_13":137,"_138":69,"_139":-5,"_140":92,"_141":24,"_142":53,"_54":143,"_90":22,"_144":145,"_146":147,"_148":20,"_149":-5,"_105":150},"3fd55b38-277a-11f0-b46e-569c3dd06744","main.tsx","fileId","parentId","branchId","branchVersion","latest",["D",1732659639735],"fileType","http","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

Remixes1

Remixes
1