[{"_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,"_68":128,"_39":-7,"_129":-5,"_17":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":-5,"_140":141,"_142":143,"_144":48,"_145":146,"_147":25,"_148":-5,"_149":-5,"_150":151},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":20,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5},"handle","manyone","name","forEmulated1","branchName","main","project",{"_31":57,"_13":14,"_33":90,"_46":-5,"_91":25,"_49":50,"_92":50,"_93":-5,"_94":-5,"_95":96,"_97":75,"_98":25,"_99":-5,"_100":-5,"_101":43,"_53":102,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":108,"_109":108,"_110":111,"_112":111,"_113":111,"_114":108,"_115":108,"_116":117,"_118":119,"_120":27,"_47":48},"ahead",1,"behind","diff",{"_61":62,"_63":64,"_65":66},"hasChanges",true,"sourceBranch",{"_39":20,"_13":16,"_31":56,"_37":57,"_40":32,"_42":43,"_58":50,"_59":38,"_60":54,"_55":14,"_51":12},"targetBranch",{"_31":32,"_33":34,"_35":36,"_13":16,"_37":38,"_39":20,"_40":41,"_42":43,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":14},"pull","id","3fd1586c-277a-11f0-b46e-569c3dd06744","createdAt",["D",1746206645862],"updatedAt",["D",1732659639735],"projectId","3fd10ac4-277a-11f0-b46e-569c3dd06744","version","forkedBranchId","75fed514-2783-11f0-b46e-569c3dd06744","forkedBranchVersion",0,"lockfileKey","1763831251747-esm.town_v_EmulatedAndie_forEmulated1@1-main","deletedAt","isOwned",false,"privacy","public","userHandle","EmulatedAndie","orgId","18c6b49c-e900-421f-b2f2-b5bdbd59d88e","projectName","29a88b26-26cd-11f0-9439-569c3dd06744","29a82672-26cd-11f0-9439-569c3dd06744","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[67],"deleted",[],"modified",[],{"_68":69,"_70":-7,"_71":72},"path","main.tsx","targetFile","sourceFile",{"_31":73,"_13":69,"_74":75,"_76":-5,"_77":56,"_78":20,"_79":25,"_33":80,"_39":43,"_81":82,"_83":84,"_63":48,"_85":-5,"_86":-7,"_68":87,"_88":89},"29acb732-26cd-11f0-9439-569c3dd06744","fileId","29acb7dc-26cd-11f0-9439-569c3dd06744","parentId","branchId","branchVersion","latest",["D",1733305027490],"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

Compare

Mergemanyone/mainintoEmulatedAndie/main

Hmain.tsx+476-0