/** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef, useEffect, useCallback } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import debounce from "https://esm.sh/lodash.debounce"; import imageCompression from "https://esm.sh/browser-image-compression"; function App() { const [generatedCode, setGeneratedCode] = useState(''); const [codeHistory, setCodeHistory] = useState([]); const [isLoading, setIsLoading] = useState(false); const [editPrompt, setEditPrompt] = useState(''); const [isRefining, setIsRefining] = useState(false); const [lastUploadedImage, setLastUploadedImage] = useState(null); const [showCopiedMessage, setShowCopiedMessage] = useState(false); const [theme, setTheme] = useState(() => { const savedTheme = localStorage.getItem('theme'); return savedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); }); const fileInputRef = useRef(null); const toggleTheme = () => { const newTheme = theme === 'light' ? 'dark' : 'light'; setTheme(newTheme); localStorage.setItem('theme', newTheme); }; useEffect(() => { const root = document.documentElement; if (theme === 'dark') { root.classList.add('dark'); } else { root.classList.remove('dark'); } }, [theme]); useEffect(() => { const savedLandingPage = localStorage.getItem('lastGeneratedLandingPage'); if (savedLandingPage) { setGeneratedCode(savedLandingPage); } }, []); const generateLandingPage = async (isInitial = true, imageBase64 = null, existingCode = '', editPrompt = '') => { setIsLoading(true); setIsRefining(isInitial ? false : true); try { const response = await fetch('/generate-landing-page', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ isInitial, imageBase64, existingCode, editPrompt }) }); const data = await response.json(); if (data.error) { throw new Error(data.error); } setCodeHistory(prevHistory => [...prevHistory, generatedCode]); setGeneratedCode(data.code); localStorage.setItem('lastGeneratedLandingPage', data.code); } catch (error) { console.error('Error generating landing page:', error); alert(`Error: ${error.message}`); } finally { setIsLoading(false); setIsRefining(false); } }; const compressImage = async (file) => { const options = { maxSizeMB: 1, maxWidthOrHeight: 1920, useWebWorker: true }; try { const compressedFile = await imageCompression(file, options); return compressedFile; } catch (error) { console.error("Error compressing image:", error); return file; } }; const handleImageUpload = async (event) => { const file = event.target.files[0]; if (file) { const compressedFile = await compressImage(file); const reader = new FileReader(); reader.onloadend = () => { const base64 = reader.result.split(',')[1]; setLastUploadedImage(base64); generateLandingPage(true, base64); }; reader.readAsDataURL(compressedFile); } }; const handleRegenerate = () => { if (lastUploadedImage) { generateLandingPage(true, lastUploadedImage); } else { alert("Please upload an image first before regenerating."); } }; const debouncedRefineDesign = useCallback( debounce((prompt) => { if (prompt.trim()) { generateLandingPage(false, null, generatedCode, prompt); } }, 1000), [generatedCode] ); const handleRefineDesign = (e) => { setEditPrompt(e.target.value); }; const triggerRefineDesign = () => { if (editPrompt.trim()) { debouncedRefineDesign(editPrompt); } }; const handleUndo = () => { if (codeHistory.length > 0) { const previousCode = codeHistory[codeHistory.length - 1]; setGeneratedCode(previousCode); setCodeHistory(prevHistory => prevHistory.slice(0, -1)); localStorage.setItem('lastGeneratedLandingPage', previousCode); } }; const handleDownloadHTML = () => { const blob = new Blob([generatedCode], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'generated_landing_page.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; const handleCopyToClipboard = () => { navigator.clipboard.writeText(generatedCode).then(() => { setShowCopiedMessage(true); setTimeout(() => { setShowCopiedMessage(false); }, 2000); }).catch(err => { console.error('Failed to copy text: ', err); alert('Failed to copy text. Please try again.'); }); }; const handleCodeEdit = (e) => { const newCode = e.target.value; setGeneratedCode(newCode); localStorage.setItem('lastGeneratedLandingPage', newCode); }; const debouncedUpdatePreview = useCallback( debounce((code) => { const iframe = document.getElementById('preview-iframe'); if (iframe) { iframe.srcdoc = code; } }, 500), [] ); useEffect(() => { debouncedUpdatePreview(generatedCode); }, [generatedCode, debouncedUpdatePreview]); return (

Landing Page Generator

{codeHistory.length > 0 && ( )}

{generatedCode && (

Landing Page Generator

Generated Landing Page

LandingPageBuilderFromImage