Spaces:

sumitbondd
/

nirmitai

Running

App Files Files Community

sumitbondd commited on Apr 8

Commit

8bb1547

verified ·

1 Parent(s): dcdc6f1

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Nirmitai
-emoji: 💻
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: nirmitai
+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,393 @@
-<!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>NirmitAI - AI Image Generator</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">
+    <style>
+        .dark-card {
+            background: rgba(15, 23, 42, 0.9);
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .darker-bg {
+            background: linear-gradient(135deg, #0b1120, #1e293b);
+        }
+        .btn-subtle {
+            transition: all 0.3s ease;
+        }
+        .btn-subtle:hover {
+            transform: translateY(-1px);
+        }
+        .image-placeholder {
+            background: linear-gradient(45deg, #1e293b, #334155);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #64748b;
+            font-weight: bold;
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: 0;
+            left: 0;
+            background-color: #818cf8;
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.7;
+            }
+        }
+        .animate-pulse {
+            animation: pulse 2s infinite;
+        }
+        .coming-soon {
+            background: rgba(30, 41, 59, 0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 300px;
+            border-radius: 16px;
+            color: white;
+            font-size: 2rem;
+            font-weight: bold;
+        }
+        /* New styles for prompt box */
+        .prompt-container {
+            background: linear-gradient(135deg, #4f46e5, #7c3aed);
+            border-radius: 16px;
+            padding: 2rem;
+            transition: all 0.5s ease;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+        }
+        .hero-section {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .hero-content {
+            display: flex;
+            width: 100%;
+            max-width: 1200px;
+            gap: 2rem;
+            transition: all 0.5s ease;
+        }
+        .prompt-box {
+            flex: 1;
+            min-width: 0;
+            transition: all 0.5s ease;
+        }
+        .image-result-container {
+            flex: 1;
+            min-width: 0;
+            opacity: 0;
+            transform: translateX(50px);
+            transition: all 0.5s ease;
+            display: none;
+        }
+        .image-result-container.show {
+            opacity: 1;
+            transform: translateX(0);
+            display: block;
+        }
+        .prompt-box.shrink {
+            flex: 0.5;
+        }
+        @media (max-width: 768px) {
+            .hero-content {
+                flex-direction: column;
+            }
+            .prompt-box.shrink {
+                flex: 1;
+            }
+            .image-result-container {
+                transform: translateX(0);
+            }
+        }
+    </style>
+</head>
+<body class="darker-bg min-h-screen text-gray-100 font-sans">
+    <!-- Navbar -->
+    <nav class="dark-card mx-auto max-w-7xl px-4 py-4 mt-4">
+        <div class="flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-robot text-3xl text-indigo-400"></i>
+                <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-blue-500">NirmitAI</span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="#services" class="nav-link px-3 py-2">Services</a>
+                <a href="#courses" class="nav-link px-3 py-2">Courses</a>
+                <a href="#community" class="nav-link px-3 py-2">Community</a>
+                <button class="btn-subtle bg-indigo-600 hover:bg-indigo-700 px-6 py-2 rounded-full font-medium">Sign In</button>
+            </div>
+            <button class="md:hidden text-2xl">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="hero-section max-w-7xl mx-auto px-4 py-16 md:py-24">
+        <div class="hero-content">
+            <div class="prompt-box prompt-container">
+                <h3 class="text-xl font-bold mb-4 text-center text-white">Create Stunning AI Art</h3>
+                <div class="mb-4">
+                    <label class="block text-sm font-medium mb-2 text-white">Describe your image</label>
+                    <textarea id="prompt-input" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white" rows="3" placeholder="A futuristic cityscape at sunset with flying cars..."></textarea>
+                </div>
+                <div class="grid grid-cols-2 gap-4 mb-4">
+                    <div>
+                        <label class="block text-sm font-medium mb-2 text-white">Style</label>
+                        <select class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-white">
+                            <option>Digital Art</option>
+                            <option>Photorealistic</option>
+                            <option>Watercolor</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-2 text-white">Aspect Ratio</label>
+                        <select class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-white">
+                            <option>Square (1:1)</option>
+                            <option>Landscape (16:9)</option>
+                            <option>Portrait (9:16)</option>
+                        </select>
+                    </div>
+                </div>
+                <button id="generate-btn" class="w-full btn-subtle bg-white hover:bg-white/90 text-indigo-600 py-3 rounded-lg font-bold mb-4 flex items-center justify-center">
+                    <i class="fas fa-magic mr-2"></i> Generate Image
+                </button>
+                <button id="download-btn" class="w-full bg-white/10 hover:bg-white/20 py-3 rounded-lg font-bold hidden flex items-center justify-center text-white">
+                    <i class="fas fa-download mr-2"></i> Download Image
+                </button>
+            </div>
+            <div id="image-result-container" class="image-result-container dark-card p-6 rounded-2xl">
+                <div id="image-result" class="image-placeholder rounded-xl overflow-hidden h-full w-full">
+                    <img id="generated-image" class="w-full h-full object-cover hidden">
+                    <p id="placeholder-text" class="text-center">Your generated image will appear here</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="max-w-7xl mx-auto px-4 py-16">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500">AI Services</span></h2>
+            <p class="text-xl text-gray-300">Create stunning AI with our powerful tools</p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div class="dark-card p-8 rounded-2xl hover:bg-slate-800/50 transition-all duration-300">
+                <div class="w-14 h-14 bg-indigo-500/20 rounded-xl flex items-center justify-center mb-6">
+                    <i class="fas fa-image text-2xl text-indigo-400"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-3">Image Generation</h3>
+                <p class="text-gray-300 mb-4">Create stunning visuals from text prompts with our state-of-the-art AI models.</p>
+            </div>
+            <div class="dark-card p-8 rounded-2xl hover:bg-slate-800/50 transition-all duration-300">
+                <div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mb-6">
+                    <i class="fas fa-globe text-2xl text-blue-400"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-3">Website Generation</h3>
+                <p class="text-gray-300 mb-4">Generate complete one-page websites from simple descriptions using AI.</p>
+            </div>
+            <div class="dark-card p-8 rounded-2xl hover:bg-slate-800/50 transition-all duration-300">
+                <div class="w-14 h-14 bg-pink-500/20 rounded-xl flex items-center justify-center mb-6">
+                    <i class="fas fa-brain text-2xl text-pink-400"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-3">AI Consulting</h3>
+                <p class="text-gray-300 mb-4">Get expert guidance on implementing AI solutions for your business needs.</p>
+            </div>
+        </div>
+    </section>
+    <!-- Courses Section -->
+    <section id="courses" class="max-w-7xl mx-auto px-4 py-16 bg-slate-800/50 rounded-3xl my-8">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">AI <span class="bg-clip-text text-transparent bg-gradient-to-r from-amber-400 to-orange-500">Courses</span></h2>
+        </div>
+        <div class="coming-soon">
+            <h3>Coming Soon</h3>
+        </div>
+    </section>
+    <!-- Community Section -->
+    <section id="community" class="max-w-7xl mx-auto px-4 py-16">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">AI <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-teal-500">Community</span></h2>
+            <p class="text-xl text-gray-300">Join our growing community of AI enthusiasts and creators</p>
+        </div>
+        <div class="coming-soon">
+            <h3>Coming Soon</h3>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-slate-900/80 mt-16">
+        <div class="max-w-7xl mx-auto px-4 py-12">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <i class="fas fa-robot text-3xl text-indigo-400"></i>
+                        <span class="text-2xl font-bold">NirmitAI</span>
+                    </div>
+                    <p class="text-gray-400 mb-4">Empowering creativity through artificial intelligence.</p>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Services</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">AI Image Generation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Website Generation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">AI Consulting</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Company</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Support</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-slate-500 mb-4 md:mb-0">© 2023 NirmitAI. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Image generation demo functionality
+            const generateBtn = document.getElementById('generate-btn');
+            const promptInput = document.getElementById('prompt-input');
+            const imageResult = document.getElementById('image-result');
+            const generatedImage = document.getElementById('generated-image');
+            const placeholderText = document.getElementById('placeholder-text');
+            const downloadBtn = document.getElementById('download-btn');
+            const imageResultContainer = document.getElementById('image-result-container');
+            const promptBox = document.querySelector('.prompt-box');
+            const heroContent = document.querySelector('.hero-content');
+            // Sample AI-generated images for demo
+            const sampleImages = [
+                'https://source.unsplash.com/random/600x600/?ai,art,futuristic',
+                'https://source.unsplash.com/random/600x600/?ai,art,fantasy',
+                'https://source.unsplash.com/random/600x600/?ai,art,sci-fi',
+                'https://source.unsplash.com/random/600x600/?ai,art,cyberpunk',
+                'https://source.unsplash.com/random/600x600/?ai,art,surreal'
+            ];
+            generateBtn.addEventListener('click', function() {
+                const prompt = promptInput.value.trim();
+                if (!prompt) {
+                    alert('Please enter a prompt to generate an image');
+                    return;
+                }
+                // Show loading state
+                generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...';
+                generateBtn.disabled = true;
+                // Show the image container with animation
+                imageResultContainer.classList.add('show');
+                promptBox.classList.add('shrink');
+                heroContent.style.gap = '1rem';
+                // Simulate API call delay
+                setTimeout(function() {
+                    // Show the image container
+                    placeholderText.classList.add('hidden');
+                    // Get a random sample image
+                    const randomImage = sampleImages[Math.floor(Math.random() * sampleImages.length)];
+                    generatedImage.src = randomImage;
+                    generatedImage.classList.remove('hidden');
+                    // Show download button
+                    downloadBtn.classList.remove('hidden');
+                    // Reset generate button
+                    generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate Image';
+                    generateBtn.disabled = false;
+                }, 2000);
+            });
+            // Download functionality
+            downloadBtn.addEventListener('click', function() {
+                // In a real app, this would download the actual generated image
+                alert('In a real application, this would download your generated image');
+            });
+            // Smooth scrolling for navigation links
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    document.querySelector(this.getAttribute('href')).scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                });
+            });
+        });
+    </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=sumitbondd/nirmitai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>