import React, { useState, useEffect, useRef } from "react"; import { useFireproof } from "use-fireproof"; export default function App() { const { useLiveQuery, database } = useFireproof("puter-apps-v13"); const { docs: apps } = useLiveQuery("type", { key: "app", descending: true }); const { docs: versions } = useLiveQuery("type", { key: "version", descending: true }); const [prompt, setPrompt] = useState(""); const [appName, setAppName] = useState(""); const [appTitle, setAppTitle] = useState(""); const [generating, setGenerating] = useState(false); const [buildStage, setBuildStage] = useState(""); const [buildProgress, setBuildProgress] = useState(0); const [selectedApp, setSelectedApp] = useState(null); const [editCode, setEditCode] = useState(""); const [previewCode, setPreviewCode] = useState(""); const [previewKey, setPreviewKey] = useState(0); const [models, setModels] = useState([]); const [model, setModel] = useState("gpt-4o-mini"); const [provider, setProvider] = useState("All"); const [puter, setPuter] = useState(null); const [user, setUser] = useState(null); const [log, setLog] = useState([]); const [showCode, setShowCode] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [selectedTemplate, setSelectedTemplate] = useState(null); const [showTemplates, setShowTemplates] = useState(false); const [showVersions, setShowVersions] = useState(false); const [sortBy, setSortBy] = useState("date"); const [filterFavorites, setFilterFavorites] = useState(false); const [showExportModal, setShowExportModal] = useState(false); const [showShareModal, setShowShareModal] = useState(false); const [shareLink, setShareLink] = useState(""); const [activeTab, setActiveTab] = useState("build"); const [tags, setTags] = useState([]); const [tagInput, setTagInput] = useState(""); const [selectedTags, setSelectedTags] = useState([]); const [sidebarOpen, setSidebarOpen] = useState(true); const [darkMode, setDarkMode] = useState(true); const [elementSelectMode, setElementSelectMode] = useState(false); const [selectedElement, setSelectedElement] = useState(null); const [elementPath, setElementPath] = useState(""); const [elementOuterHTML, setElementOuterHTML] = useState(""); const [editChatMessages, setEditChatMessages] = useState([]); const [editChatInput, setEditChatInput] = useState(""); const [isEditingElement, setIsEditingElement] = useState(false); const [showSettings, setShowSettings] = useState(false); const iframeRef = useRef(null); const fileInputRef = useRef(null); const htmlFileInputRef = useRef(null); const chatEndRef = useRef(null); useEffect(() => { const saved = localStorage.getItem('puter-dark-mode'); if (saved !== null) setDarkMode(JSON.parse(saved)); }, []); useEffect(() => { localStorage.setItem('puter-dark-mode', JSON.stringify(darkMode)); }, [darkMode]); const templates = [ { id: "todo", name: "Todo App", icon: "✅", desc: "Tasks & priorities", prompt: "A beautiful todo app with categories, priorities, due dates, and local storage" }, { id: "calculator", name: "Calculator", icon: "🔢", desc: "Scientific calc", prompt: "A scientific calculator with history and keyboard support" }, { id: "notes", name: "Notes", icon: "📝", desc: "Markdown notes", prompt: "A notes app with markdown support and auto-save" }, { id: "timer", name: "Pomodoro", icon: "⏱️", desc: "Focus timer", prompt: "A pomodoro timer with customizable intervals and notifications" }, { id: "kanban", name: "Kanban", icon: "📋", desc: "Project board", prompt: "A kanban board with drag-and-drop cards and columns" }, { id: "weather", name: "Weather", icon: "🌤️", desc: "Weather app", prompt: "A weather dashboard with current conditions and forecasts" }, ]; const buildStages = [ { name: "Initializing", progress: 5, icon: "🔧" }, { name: "Analyzing", progress: 15, icon: "🔍" }, { name: "Generating", progress: 40, icon: "⚡" }, { name: "Validating", progress: 60, icon: "✓" }, { name: "Creating", progress: 70, icon: "📁" }, { name: "Deploying", progress: 85, icon: "🚀" }, { name: "Registering", progress: 95, icon: "📝" }, { name: "Complete", progress: 100, icon: "✨" }, ]; const addLog = (msg) => setLog(prev => [...prev.slice(-20), { time: new Date().toLocaleTimeString(), msg }]); useEffect(() => { setPreviewCode(editCode || selectedApp?.code || ""); }, [selectedApp]); useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [editChatMessages]); const addTag = () => { if (tagInput.trim() && !tags.includes(tagInput.trim())) { setTags([...tags, tagInput.trim()]); setTagInput(""); } }; const removeTag = (t) => setTags(tags.filter(tag => tag !== t)); const getAllTags = () => [...new Set(apps.flatMap(app => app.tags || []))].sort(); const toggleTagFilter = (tag) => setSelectedTags(prev => prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]); const filteredApps = apps .filter(app => { if (filterFavorites && !app.favorite) return false; if (searchQuery) { const q = searchQuery.toLowerCase(); return (app.appName?.toLowerCase().includes(q) || app.appTitle?.toLowerCase().includes(q) || app.prompt?.toLowerCase().includes(q)); } if (selectedTags.length > 0) return selectedTags.some(tag => (app.tags || []).includes(tag)); return true; }) .sort((a, b) => { if (sortBy === "date") return (b.createdAt || 0) - (a.createdAt || 0); if (sortBy === "name") return (a.appTitle || a.appName || "").localeCompare(b.appTitle || b.appName || ""); if (sortBy === "views") return (b.views || 0) - (a.views || 0); return 0; }); useEffect(() => { const script = document.createElement("script"); script.src = "https://js.puter.com/v2/"; script.onload = async () => { setPuter(window.puter); addLog("Puter SDK initialized"); if (window.puter.auth.isSignedIn()) { const u = await window.puter.auth.getUser(); setUser(u); addLog(`Signed in as ${u.username}`); } }; document.body.appendChild(script); fetch("https://api.puter.com/puterai/chat/models/") .then(r => r.json()) .then(data => { const list = (Array.isArray(data) ? data : data.models || []).map(m => { const id = typeof m === "string" ? m : m.id; let prov = "Other"; if (/gpt|o1|o3|chatgpt/i.test(id)) prov = "OpenAI"; else if (/claude/i.test(id)) prov = "Anthropic"; else if (/gemini|gemma/i.test(id)) prov = "Google"; else if (/llama/i.test(id)) prov = "Meta"; else if (/mistral|mixtral/i.test(id)) prov = "Mistral"; else if (/deepseek/i.test(id)) prov = "DeepSeek"; return { id, provider: prov }; }); setModels(list); }).catch(() => {}); }, []); const providers = ["All", ...new Set(models.map(m => m.provider))].sort(); const filtered = provider === "All" ? models : models.filter(m => m.provider === provider); const updateBuildStage = (stageName) => { const stage = buildStages.find(s => s.name === stageName); if (stage) { setBuildStage(stageName); setBuildProgress(stage.progress); } }; const refreshPreview = () => { setPreviewCode(editCode || selectedApp?.code || ""); setPreviewKey(prev => prev + 1); setShowCode(false); }; const handleHtmlUpload = async (e) => { const file = e.target.files[0]; if (!file) return; try { const content = await file.text(); if (content.includes(' prev + 1); const fileName = file.name.replace('.html', '').replace(/[^a-z0-9-]/gi, '-').toLowerCase(); setAppName(fileName); setAppTitle(file.name.replace('.html', '')); setPrompt(`Uploaded: ${file.name}`); addLog(`Loaded ${file.name}`); } else { addLog("Invalid HTML file"); } } catch (err) { addLog(`Error: ${err.message}`); } e.target.value = ""; }; const handleDrop = (e) => { e.preventDefault(); const file = e.dataTransfer.files[0]; if (file && (file.name.endsWith('.html') || file.name.endsWith('.htm'))) { const dt = new DataTransfer(); dt.items.add(file); htmlFileInputRef.current.files = dt.files; htmlFileInputRef.current.dispatchEvent(new Event('change', { bubbles: true })); } }; async function signIn() { if (!puter) return; await puter.auth.signIn(); const u = await puter.auth.getUser(); setUser(u); addLog(`Welcome, ${u.username}!`); } async function buildAndDeploy(customPrompt) { const finalPrompt = customPrompt || prompt; if (!finalPrompt.trim() || !puter || !user) return; setGenerating(true); setBuildProgress(0); setBuildStage(""); setSelectedApp(null); setEditCode(""); setLog([]); try { updateBuildStage("Initializing"); addLog(`Using model: ${model}`); updateBuildStage("Analyzing"); await new Promise(r => setTimeout(r, 300)); updateBuildStage("Generating"); addLog("Generating code..."); const systemPrompt = `You are an expert web developer. Create a COMPLETE single HTML file app. Start with . ALL CSS in

Puter Factory

Ready to Build