[{"_1":2,"_171":-5,"_172":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","77fda040d260e43e66e3017d68686b51ac04eda6","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_152":153,"_168":169,"_170":-5},"handle","EmulatedAndie","name","forEmulated1","path","main.tsx","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":20,"_107":108,"_109":-5,"_110":-5,"_12":111,"_112":113,"_114":115,"_116":-5,"_117":32,"_14":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":128,"_131":132,"_134":135,"_151":20},"id","3fd10ac4-277a-11f0-b46e-569c3dd06744","createdAt",["D",1746206645862],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","7cb36bbd-7188-4e9b-bad4-01a8377ef540","pinnedFileId","3fd55bd8-277a-11f0-b46e-569c3dd06744","pinPreview",true,"screenshotVersion","likeCount","18c6b49c-e900-421f-b2f2-b5bdbd59d88e","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_129":130},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJwT3A0dXNkU1Zpb2cyU0lNbE1uQ2MwQVVWTCJ9","org",{"_93":94,"_133":130},"avatar","branch",{"_136":137,"_95":43,"_101":138,"_139":102,"_140":141,"_142":32,"_143":144,"_145":146,"_147":148,"_149":96,"_150":94},"version",1,"3fd1586c-277a-11f0-b46e-569c3dd06744","projectId","forkedBranchId","75fed514-2783-11f0-b46e-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","unlisted","forkedProjectId","75fe844c-2783-11f0-b46e-569c3dd06744","forkedProjectOrgId","924a5b4c-8689-40a1-b891-b32f6630dae6","projectName","userHandle","isOwned","file",{"_101":154,"_95":98,"_155":113,"_156":-5,"_157":138,"_158":137,"_159":115,"_103":160,"_136":32,"_161":162,"_163":164,"_165":20,"_166":-5,"_97":167},"3fd55b38-277a-11f0-b46e-569c3dd06744","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