Spaces:

zdhpeter
/

art

Running

App Files Files Community

zdhpeter commited on Jun 24

Commit

0da1f93

verified ·

1 Parent(s): 2797d9d

improve it - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +526 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Art
-emoji: 🏃
-colorFrom: purple
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: art
+emoji: 🐳
+colorFrom: yellow
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,526 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ArtGenius | AI-Powered Art Design</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#8B5CF6',
+                        secondary: '#EC4899',
+                        dark: '#1F2937',
+                        light: '#F9FAFB'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            color: #f3f4f6;
+            min-height: 100vh;
+        }
+        .drop-zone {
+            border: 2px dashed #8B5CF6;
+            border-radius: 1rem;
+            transition: all 0.3s ease;
+            background: rgba(30, 41, 59, 0.5);
+            backdrop-filter: blur(10px);
+        }
+        .drop-zone.active {
+            border-color: #EC4899;
+            background: rgba(139, 92, 246, 0.1);
+        }
+        .card {
+            background: rgba(30, 41, 59, 0.7);
+            border-radius: 1rem;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
+        }
+        .tool-item {
+            transition: all 0.2s ease;
+            cursor: grab;
+        }
+        .tool-item:active {
+            cursor: grabbing;
+        }
+        .generated-art {
+            transition: all 0.3s ease;
+        }
+        .generated-art:hover {
+            transform: scale(1.03);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .animate-fade-in-up {
+            animation: fadeInUp 0.8s ease-out forwards;
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        .delay-100 {
+            animation-delay: 0.1s;
+        }
+        .delay-200 {
+            animation-delay: 0.2s;
+        }
+        @keyframes fadeInUp {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
+            70% { box-shadow: 0 0 0 15px rgba(139, 92, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
+        }
+        .artwork-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1.5rem;
+        }
+        @media (max-width: 768px) {
+            .artwork-grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header class="py-4 px-6 md:px-12">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+                    <i class="fas fa-palette text-white text-xl"></i>
+                </div>
+                <h1 class="text-2xl font-bold">Art<span class="gradient-text">Genius</span></h1>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#" class="nav-link font-medium">Home</a>
+                <a href="#" class="nav-link font-medium">Gallery</a>
+                <a href="#" class="nav-link font-medium">Tools</a>
+                <a href="#" class="nav-link font-medium">Pricing</a>
+                <a href="#" class="nav-link font-medium">About</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <button class="px-4 py-2 rounded-full bg-primary hover:bg-purple-700 transition-colors">
+                    <i class="fas fa-sign-in-alt mr-2"></i>Sign In
+                </button>
+                <button class="md:hidden text-2xl">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="py-20 px-6 md:px-12">
+        <div class="container mx-auto text-center max-w-4xl">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-fade-in-up">Transform Your <span class="gradient-text">Creativity</span> with AI</h1>
+            <p class="text-xl text-gray-300 mb-12 max-w-2xl mx-auto animate-fade-in-up delay-100">
+                Drag, drop, and create stunning artworks with the power of AI. Integrates with Open Router and Fal for limitless creative possibilities.
+            </p>
+            <div class="flex flex-wrap justify-center gap-4 mb-16">
+                <button class="px-8 py-3 bg-gradient-to-r from-primary to-secondary rounded-full font-bold hover:opacity-90 transition-opacity">
+                    Start Creating
+                </button>
+                <button class="px-8 py-3 bg-gray-800 rounded-full font-bold hover:bg-gray-700 transition-colors">
+                    View Gallery
+                </button>
+            </div>
+            <div class="relative">
+                <div class="drop-zone p-10 mb-8">
+                    <div class="flex flex-col items-center justify-center h-64">
+                        <i class="fas fa-cloud-upload-alt text-4xl text-primary mb-4"></i>
+                        <h3 class="text-2xl font-bold mb-2">Drag & Drop Here</h3>
+                        <p class="text-gray-400 mb-4">Images, text, or videos to transform</p>
+                        <button class="px-6 py-2 bg-gray-700 rounded-full hover:bg-gray-600 transition-colors">
+                            Or Browse Files
+                        </button>
+                    </div>
+                </div>
+                <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gray-800 px-4 py-2 rounded-full text-sm">
+                    Try it now - it's free!
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Tools Section -->
+    <section class="py-16 px-6 md:px-12 bg-gray-900/50">
+        <div class="container mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Creative <span class="gradient-text">Tools</span></h2>
+            <p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto">
+                Drag these tools onto the canvas to start creating amazing artwork with AI assistance
+            </p>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
+                <div class="card p-6 text-center tool-item group hover:bg-gray-800/70 transition-all duration-300">
+                    <div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+                        <i class="fas fa-image text-2xl text-white"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2 group-hover:text-white">Image Generator</h3>
+                    <p class="text-gray-400 text-sm group-hover:text-gray-300">Create visuals from text prompts</p>
+                </div>
+                <div class="card p-6 text-center tool-item">
+                    <div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-text-height text-2xl text-white"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2">Text Styling</h3>
+                    <p class="text-gray-400 text-sm">Transform text into artistic elements</p>
+                </div>
+                <div class="card p-6 text-center tool-item">
+                    <div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-video text-2xl text-white"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2">Video Effects</h3>
+                    <p class="text-gray-400 text-sm">Apply AI filters to videos</p>
+                </div>
+                <div class="card p-6 text-center tool-item">
+                    <div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-magic text-2xl text-white"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2">Style Transfer</h3>
+                    <p class="text-gray-400 text-sm">Apply artistic styles to your media</p>
+                </div>
+            </div>
+            <div class="bg-gray-800/50 rounded-2xl p-8 max-w-4xl mx-auto">
+                <div class="flex flex-col md:flex-row items-center">
+                    <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
+                        <h3 class="text-2xl font-bold mb-4">Integrated with <span class="gradient-text">Open Router</span> & <span class="gradient-text">Fal</span></h3>
+                        <p class="text-gray-300 mb-4">
+                            Access the most powerful AI models through our seamless integrations. Generate stunning artwork with state-of-the-art technology.
+                        </p>
+                        <ul class="space-y-2">
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-primary mr-2"></i>
+                                <span>Real-time generation</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-primary mr-2"></i>
+                                <span>Multiple AI models</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-primary mr-2"></i>
+                                <span>High-resolution output</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="md:w-1/2 relative">
+                        <div class="bg-gray-700 rounded-xl p-4 mb-4">
+                            <div class="flex justify-between items-center mb-3">
+                                <div class="flex items-center">
+                                    <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
+                                    <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
+                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                                </div>
+                                <span class="text-sm text-gray-400">AI Model Console</span>
+                            </div>
+                            <div class="bg-gray-900 p-4 rounded">
+                                <code class="text-green-400 text-sm">
+                                    $ artgen generate --prompt "surreal landscape"<br>
+                                    > Using model: fal-ai/dreamshaper<br>
+                                    > Generating high-res artwork...<br>
+                                    > Artwork generated in 4.2s
+                                </code>
+                            </div>
+                        </div>
+                        <div class="absolute -right-4 -top-4 bg-gradient-to-r from-primary to-secondary text-white px-4 py-2 rounded-full text-sm font-bold">
+                            Powered by AI
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Gallery Section -->
+    <section class="py-16 px-6 md:px-12">
+        <div class="container mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">AI-Generated <span class="gradient-text">Gallery</span></h2>
+            <p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto">
+                Explore artwork created by our community using ArtGenius and AI models
+            </p>
+            <div class="artwork-grid gap-6">
+                <div class="generated-art rounded-xl overflow-hidden group relative">
+                    <div class="bg-gradient-to-br from-purple-500 to-pink-500 aspect-square"></div>
+                    <div class="p-4 bg-gray-800 group-hover:bg-gray-700 transition-colors">
+                        <h4 class="font-bold group-hover:text-primary transition-colors">Surreal Dreamscape</h4>
+                        <p class="text-gray-400 text-sm group-hover:text-gray-300 transition-colors">Created with Stable Diffusion</p>
+                    </div>
+                    <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
+                        <button class="px-4 py-2 bg-primary rounded-full hover:bg-purple-700 transition-colors">
+                            <i class="fas fa-download mr-2"></i>Download
+                        </button>
+                    </div>
+                </div>
+                <div class="generated-art rounded-xl overflow-hidden">
+                    <div class="bg-gradient-to-br from-blue-400 to-teal-500 aspect-square"></div>
+                    <div class="p-4 bg-gray-800">
+                        <h4 class="font-bold">Oceanic Abyss</h4>
+                        <p class="text-gray-400 text-sm">Created with Fal Model</p>
+                    </div>
+                </div>
+                <div class="generated-art rounded-xl overflow-hidden">
+                    <div class="bg-gradient-to-br from-yellow-400 to-red-500 aspect-square"></div>
+                    <div class="p-4 bg-gray-800">
+                        <h4 class="font-bold">Desert Mirage</h4>
+                        <p class="text-gray-400 text-sm">Created with Open Router</p>
+                    </div>
+                </div>
+                <div class="generated-art rounded-xl overflow-hidden">
+                    <div class="bg-gradient-to-br from-green-400 to-emerald-600 aspect-square"></div>
+                    <div class="p-4 bg-gray-800">
+                        <h4 class="font-bold">Enchanted Forest</h4>
+                        <p class="text-gray-400 text-sm">Created with DALL-E</p>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <button class="px-8 py-3 bg-gradient-to-r from-primary to-secondary rounded-full font-bold hover:opacity-90 transition-opacity">
+                    Explore Full Gallery
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-24 px-6 md:px-12 bg-gradient-to-r from-primary/20 to-secondary/20">
+        <div class="container mx-auto text-center max-w-3xl">
+            <h2 class="text-4xl md:text-5xl font-bold mb-6">Start Creating <span class="gradient-text">Today</span></h2>
+            <p class="text-xl text-gray-300 mb-12 max-w-2xl mx-auto">
+                Join thousands of artists and designers transforming their creative process with AI
+            </p>
+            <div class="bg-gray-800 rounded-2xl p-8 inline-block">
+                <div class="flex flex-col md:flex-row items-center justify-center gap-6">
+                    <div class="bg-white text-gray-800 font-bold px-6 py-3 rounded-full pulse">
+                        <i class="fas fa-bolt text-yellow-500 mr-2"></i>Free Forever Plan
+                    </div>
+                    <div>
+                        <p class="text-lg">No credit card required</p>
+                        <p class="text-gray-400">Get started in seconds</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 px-6 md:px-12 border-t border-gray-800">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+                            <i class="fas fa-palette text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Art<span class="gradient-text">Genius</span></h2>
+                    </div>
+                    <p class="text-gray-400 mb-4">
+                        AI-powered art creation platform for designers, artists, and creatives.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
+                            <i class="fab fa-discord"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
+                            <i class="fab fa-github"></i>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Product</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Features</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Integrations</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Pricing</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Changelog</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Resources</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Tutorials</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Community</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Subscribe</h3>
+                    <p class="text-gray-400 mb-4">Get the latest updates and news</p>
+                    <div class="flex">
+                        <input type="email" placeholder="Your email" class="bg-gray-800 rounded-l-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-primary">
+                        <button class="bg-primary rounded-r-lg px-4 hover:bg-purple-700 transition-colors">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
+                <p>&copy; 2023 ArtGenius. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Drag and drop functionality
+        const dropZone = document.querySelector('.drop-zone');
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, preventDefaults, false);
+        });
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, highlight, false);
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, unhighlight, false);
+        });
+        function highlight() {
+            dropZone.classList.add('active');
+        }
+        function unhighlight() {
+            dropZone.classList.remove('active');
+        }
+        dropZone.addEventListener('drop', handleDrop, false);
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            if (files.length) {
+                processFiles(files);
+            }
+        }
+        function processFiles(files) {
+            alert(`Processing ${files.length} file(s)...\n\nThis would be sent to Open Router/Fal for AI processing in a real application.`);
+            // In a real app, you would upload files to your server/AI APIs here
+        }
+        // Tool drag functionality
+        const toolItems = document.querySelectorAll('.tool-item');
+        toolItems.forEach(item => {
+            item.setAttribute('draggable', 'true');
+            item.addEventListener('dragstart', (e) => {
+                e.dataTransfer.setData('text/plain', item.querySelector('h3').textContent);
+                item.classList.add('opacity-50');
+            });
+            item.addEventListener('dragend', () => {
+                item.classList.remove('opacity-50');
+            });
+        });
+        // Drop zone also accepts tools
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+        });
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            const toolName = e.dataTransfer.getData('text/plain');
+            if (toolName) {
+                alert(`Adding ${toolName} to canvas...`);
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=zdhpeter/art" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>