/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, createContext, useContext } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // ... (previous AuthContext, AuthProvider, and useAuth remain the same) function App() { // ... (App component remains the same) } function Home({ theme }) { const { user } = useAuth(); const isDark = theme === 'dark'; const [generatedColor, setGeneratedColor] = useState('#000000'); const generateArt = () => { const randomColor = Math.floor(Math.random()*16777215).toString(16); setGeneratedColor(`#${randomColor}`); }; return (

{user ? `Welcome back, ${user.username}!` : 'Welcome to AI Art Hub'}

Explore the fascinating world of AI-generated art, learn about cutting-edge tools, and join a community of AI artists and enthusiasts.

AI Art Generator Demo

Generated Art

Featured Artwork

Artwork Placeholder

"Digital Dreams" by AI Picasso

Latest News

AI Artist Wins Major Competition

An AI-generated artwork has won first place in a prestigious international art competition, sparking debates about the future of art.

); } function PromptGenerator() { const [prompt, setPrompt] = useState(''); const generatePrompt = () => { const subjects = ['landscape', 'portrait', 'still life', 'abstract composition', 'cityscape', 'fantasy creature']; const styles = ['impressionist', 'surrealist', 'cubist', 'minimalist', 'cyberpunk', 'art nouveau']; const elements = ['vibrant colors', 'dramatic lighting', 'geometric shapes', 'organic forms', 'futuristic elements', 'nostalgic atmosphere']; const randomSubject = subjects[Math.floor(Math.random() * subjects.length)]; const randomStyle = styles[Math.floor(Math.random() * styles.length)]; const randomElement = elements[Math.floor(Math.random() * elements.length)]; setPrompt(`Create a ${randomStyle} ${randomSubject} with ${randomElement}.`); }; return (

AI Art Prompt Generator

{prompt && (

Your Prompt:

{prompt}

)}

); } function Tools({ theme }) { const isDark = theme === 'dark'; const tools = [ { name: 'MidJourney', description: 'Create stunning artwork with text prompts' }, { name: 'DALL-E', description: 'Generate images from textual descriptions' }, { name: 'Stable Diffusion', description: 'Open-source image generation model' }, ]; return (

AI Art Tools

Discover powerful tools for creating AI-generated art:

{tools.map((tool, index) => (

{tool.name}

{tool.description}

))}

); } function Gallery({ theme }) { const isDark = theme === 'dark'; const [filter, setFilter] = useState('all'); const artworks = [ { title: 'Abstract Harmony', artist: 'AI Picasso', style: 'abstract' }, { title: 'Digital Dreamscape', artist: 'Neural Rembrandt', style: 'landscape' }, { title: 'Quantum Portrait', artist: 'Deep Learning da Vinci', style: 'portrait' }, { title: 'Neon Nights', artist: 'CyberArtist', style: 'abstract' }, { title: 'Surreal Serenity', artist: 'DreamWeaver AI', style: 'landscape' }, { title: 'Pixel Persona', artist: 'BitBrush', style: 'portrait' }, ]; const filteredArtworks = filter === 'all' ? artworks : artworks.filter(art => art.style === filter); return (

AI Art Gallery

Explore a collection of stunning AI-generated artworks:

Filter by style:

{filteredArtworks.map((artwork, index) => (

Artwork

{artwork.title}

By {artwork.artist}

))}

); } // ... (Login and Profile components remain the same) const styles = { // ... (existing styles) promptGenerator: { marginTop: '30px', }, promptResult: { marginTop: '15px', padding: '15px', backgroundColor: 'rgba(0, 0, 0, 0.05)', borderRadius: '5px', }, promptText: { fontSize: '18px', fontWeight: 'bold', }, generateButton: { padding: '10px 20px', fontSize: '16px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginTop: '10px', }, toolCard: { padding: '15px', marginBottom: '15px', borderRadius: '5px', }, toolTitle: { fontSize: '20px', marginBottom: '10px', }, filterContainer: { marginBottom: '20px', }, filterSelect: { padding: '5px', fontSize: '16px', marginLeft: '10px', }, artworkGrid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '20px', marginTop: '20px', }, artworkCard: { padding: '15px', borderRadius: '5px', textAlign: 'center', }, artworkTitle: { fontSize: '18px', marginTop: '10px', marginBottom: '5px', }, artworkArtist: { fontStyle: 'italic', }, }; // ... (client and server functions remain the same)

rasputinkaiser