function MainComponent() { const [activeTab, setActiveTab] = React.useState("generate"); const [prompt, setPrompt] = React.useState(""); const [generatedCode, setGeneratedCode] = React.useState(""); const [alias, setAlias] = React.useState(""); const [files, setFiles] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(""); const [success, setSuccess] = React.useState(""); const [publishedLink, setPublishedLink] = React.useState(""); // Handle file upload const handleFileUpload = (event)=>{ const uploadedFiles = Array.from(event.target.files); setFiles(uploadedFiles); }; // Read file as base64 const readFileAsBase64 = (file)=>{ return new Promise((resolve, reject)=>{ const reader = new FileReader(); reader.onload = ()=>resolve({ name: file.name, content: reader.result }); reader.onerror = ()=>reject("Error reading file: " + file.name); reader.readAsDataURL(file); }); }; // Generate code using AI const generateCode = async ()=>{ if (!prompt.trim()) { setError("Please enter a description of what you want to create"); return; } setLoading(true); setError(""); try { const response = await fetch("/api/generate-code", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt }) }); const data = await response.json(); if (data.error) { setError(data.error); } else { setGeneratedCode(data.code); setActiveTab("publish"); } } catch (err) { setError("Failed to generate code"); } finally{ setLoading(false); } }; // Publish code to live website const publishCode = async ()=>{ if (!alias.trim()) { setError("Please enter an alias for your website"); return; } if (!/^[A-Za-z0-9-_]+$/.test(alias)) { setError("Alias can only contain letters, numbers, hyphens, and underscores"); return; } let codeToPublish = generatedCode; // If files are uploaded, process them if (files.length > 0) { const mainHTML = files.find((f)=>f.name.toLowerCase().endsWith(".html")); if (!mainHTML) { setError("Please include at least one .html file"); return; } try { const allFiles = await Promise.all(files.map(readFileAsBase64)); let rawHTML = atob(allFiles.find((f)=>f.name === mainHTML.name).content.split(",")[1]); let processedHTML = rawHTML; // Process CSS, JS, and image files for (const f of allFiles){ if (f.name === mainHTML.name) continue; const ext = f.name.split(".").pop().toLowerCase(); const decoded = atob(f.content.split(",")[1]); if (ext === "css") { processedHTML = processedHTML.replace(new RegExp(`]+href=["'].*?${f.name}["'][^>]*>`, "gi"), ``); } else if (ext === "js") { processedHTML = processedHTML.replace(new RegExp(`]+src=["'].*?${f.name}["'][^>]*><\\/script>`, "gi"), `

AI Software Engineer

AI-Powered Generation

Instant Publishing

Download Source