Spaces:

MBilal-72
/

Gen_AI_ideas

Running

App Files Files Community

MBilal-72 commited on Jul 3, 2025

Commit

e4f6ace

verified ·

1 Parent(s): 35fefcc

Update index.html

Browse files

Files changed (1) hide show

index.html +406 -19

index.html CHANGED Viewed

@@ -1,19 +1,406 @@
-<!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>Generative AI Project Ideas</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>
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .category-chip {
+            transition: all 0.2s ease;
+        }
+        .category-chip:hover {
+            transform: scale(1.05);
+        }
+        #ideas-container::-webkit-scrollbar {
+            width: 6px;
+        }
+        #ideas-container::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        #ideas-container::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 3px;
+        }
+        #ideas-container::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-indigo-50 to-purple-50 min-h-screen">
+    <div class="container mx-auto px-4 py-12">
+        <!-- Header Section -->
+        <header class="text-center mb-16">
+            <h1 class="text-4xl md:text-5xl font-bold text-indigo-900 mb-4">Generative AI Project Showcase</h1>
+            <p class="text-xl text-gray-600 max-w-3xl mx-auto">Explore innovative project ideas harnessing the power of generative AI with descriptions, tech stacks, and difficulty levels</p>
+        </header>
+        <!-- Filter Controls -->
+        <div class="flex flex-wrap justify-center gap-4 mb-12">
+            <div class="relative w-full md:w-auto">
+                <select id="difficulty-filter" class="appearance-none bg-white border border-indigo-200 rounded-full py-3 px-6 pr-10 text-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                    <option value="all">All Difficulties</option>
+                    <option value="beginner">Beginner</option>
+                    <option value="intermediate">Intermediate</option>
+                    <option value="advanced">Advanced</option>
+                </select>
+                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                    <i class="fas fa-chevron-down"></i>
+                </div>
+            </div>
+            <div class="relative w-full md:w-auto">
+                <select id="category-filter" class="appearance-none bg-white border border-indigo-200 rounded-full py-3 px-6 pr-10 text-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                    <option value="all">All Categories</option>
+                    <option value="text">Text Generation</option>
+                    <option value="image">Image Generation</option>
+                    <option value="audio">Audio Generation</option>
+                    <option value="video">Video Generation</option>
+                    <option value="creative">Creative</option>
+                    <option value="productivity">Productivity</option>
+                </select>
+                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                    <i class="fas fa-chevron-down"></i>
+                </div>
+            </div>
+            <button id="random-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full flex items-center gap-2 transition duration-200">
+                <i class="fas fa-random"></i> Random Idea
+            </button>
+        </div>
+        <!-- Project Cards Container -->
+        <div id="ideas-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-h-[70vh] overflow-y-auto p-2">
+            <!-- Projects will be loaded here dynamically -->
+        </div>
+        <!-- Idea Submission Form -->
+        <div class="mt-20 bg-white rounded-2xl shadow-lg p-8 max-w-4xl mx-auto">
+            <h2 class="text-2xl font-bold text-indigo-900 mb-6">Submit Your Own AI Project Idea</h2>
+            <form id="idea-form" class="space-y-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label for="project-name" class="block text-sm font-medium text-gray-700 mb-1">Project Name</label>
+                        <input type="text" id="project-name" class="w-full px-4 py-2 border border-indigo-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g. AI Recipe Generator">
+                    </div>
+                    <div>
+                        <label for="project-category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
+                        <select id="project-category" class="w-full px-4 py-2 border border-indigo-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                            <option value="text">Text Generation</option>
+                            <option value="image">Image Generation</option>
+                            <option value="audio">Audio Generation</option>
+                            <option value="video">Video Generation</option>
+                            <option value="creative">Creative</option>
+                            <option value="productivity">Productivity</option>
+                            <option value="other">Other</option>
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <label for="project-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                    <textarea id="project-description" rows="3" class="w-full px-4 py-2 border border-indigo-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Describe your project in detail..."></textarea>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label for="project-difficulty" class="block text-sm font-medium text-gray-700 mb-1">Difficulty Level</label>
+                        <select id="project-difficulty" class="w-full px-4 py-2 border border-indigo-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                            <option value="beginner">Beginner</option>
+                            <option value="intermediate">Intermediate</option>
+                            <option value="advanced">Advanced</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label for="project-tech" class="block text-sm font-medium text-gray-700 mb-1">Tech Stack (comma separated)</label>
+                        <input type="text" id="project-tech" class="w-full px-4 py-2 border border-indigo-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g. Python, TensorFlow, GPT-3">
+                    </div>
+                </div>
+                <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg flex items-center gap-2 transition duration-200 w-full justify-center">
+                    <i class="fas fa-lightbulb"></i> Submit Idea
+                </button>
+            </form>
+        </div>
+    </div>
+    <script>
+        // Sample Data for AI Project Ideas
+        const projects = [
+            {
+                id: 1,
+                name: "AI Poetry Generator",
+                description: "Create a system that generates original poetry based on user-input themes or emotions. Use GPT or similar models trained specifically on poetic structures.",
+                category: "text",
+                difficulty: "intermediate",
+                techStack: ["Python", "Transformers", "GPT-3", "Flask"],
+                icon: "fa-feather-alt"
+            },
+            {
+                id: 2,
+                name: "Portrait Style Transfer",
+                description: "Develop an application that applies artistic styles (Van Gogh, Picasso, etc.) to user-uploaded portraits in real-time using neural style transfer techniques.",
+                category: "image",
+                difficulty: "advanced",
+                techStack: ["PyTorch", "OpenCV", "FastAPI", "React"],
+                icon: "fa-portrait"
+            },
+            {
+                id: 3,
+                name: "AI Music Composer",
+                description: "Build a tool that generates original music compositions in different genres based on mood selections or simple humming inputs.",
+                category: "audio",
+                difficulty: "advanced",
+                techStack: ["TensorFlow", "Magenta", "MIDI.js", "Node.js"],
+                icon: "fa-music"
+            },
+            {
+                id: 4,
+                name: "Dream Interpretation Bot",
+                description: "Create a chatbot that interprets dreams by analyzing user descriptions and providing symbolic explanations using NLP techniques.",
+                category: "text",
+                difficulty: "intermediate",
+                techStack: ["GPT-3", "Dialogflow", "Firebase", "JavaScript"],
+                icon: "fa-cloud-moon"
+            },
+            {
+                id: 5,
+                name: "Virtual Interior Designer",
+                description: "Develop an app that generates room designs based on user preferences (colors, styles) and allows virtual furniture placement using GANs.",
+                category: "image",
+                difficulty: "advanced",
+                techStack: ["GANs", "Three.js", "Django", "React"],
+                icon: "fa-couch"
+            },
+            {
+                id: 6,
+                name: "AI Dungeon Master",
+                description: "Create an AI-powered Dungeons & Dragons game master that dynamically generates storylines, NPCs, and challenges based on player actions.",
+                category: "text",
+                difficulty: "intermediate",
+                techStack: ["GPT-3", "Python", "WebSockets", "Vue.js"],
+                icon: "fa-dice-d20"
+            },
+            {
+                id: 7,
+                name: "Historical Figure Chatbot",
+                description: "Build interactive chatbots that emulate historical figures using their writings and speeches as training data.",
+                category: "text",
+                difficulty: "beginner",
+                techStack: ["ChatGPT API", "Python", "Flask"],
+                icon: "fa-landmark"
+            },
+            {
+                id: 8,
+                name: "Automated Meme Generator",
+                description: "Develop a system that automatically generates memes based on trending topics or user-provided images/captions.",
+                category: "image",
+                difficulty: "beginner",
+                techStack: ["Python", "Pillow", "Meme API", "Flask"],
+                icon: "fa-laugh-squint"
+            },
+            {
+                id: 9,
+                name: "AI Fashion Consultant",
+                description: "Create an app that suggests complete outfits based on user preferences, weather data, and clothing items in their wardrobe (photos).",
+                category: "image",
+                difficulty: "advanced",
+                techStack: ["Computer Vision", "GANs", "React Native", "Node.js"],
+                icon: "fa-tshirt"
+            },
+            {
+                id: 10,
+                name: "AI Storybook Creator",
+                description: "Build a tool that generates illustrated children's stories with coherent plotlines matching user-selected themes and character preferences.",
+                category: "creative",
+                difficulty: "intermediate",
+                techStack: ["GPT-3", "Stable Diffusion", "DALL-E", "Flask"],
+                icon: "fa-book-open"
+            },
+            {
+                id: 11,
+                name: "Personalized Cooking Assistant",
+                description: "Develop an AI that generates recipes based on available ingredients, dietary restrictions, and personal taste preferences.",
+                category: "text",
+                difficulty: "intermediate",
+                techStack: ["GPT-3", "Python", "Nutrition API", "React"],
+                icon: "fa-utensils"
+            },
+            {
+                id: 12,
+                name: "AI-Generated Podcasts",
+                description: "Create a system that produces audio podcasts on trending topics with human-like narration by combining text generation with voice synthesis.",
+                category: "audio",
+                difficulty: "advanced",
+                techStack: ["TTS Models", "GPT-3", "FFmpeg", "Node.js"],
+                icon: "fa-podcast"
+            }
+        ];
+        // DOM Elements
+        const ideasContainer = document.getElementById('ideas-container');
+        const difficultyFilter = document.getElementById('difficulty-filter');
+        const categoryFilter = document.getElementById('category-filter');
+        const randomBtn = document.getElementById('random-btn');
+        const ideaForm = document.getElementById('idea-form');
+        // Render Projects Function
+        function renderProjects(filteredProjects = projects) {
+            ideasContainer.innerHTML = '';
+            if (filteredProjects.length === 0) {
+                ideasContainer.innerHTML = `
+                    <div class="col-span-full text-center py-10">
+                        <i class="fas fa-search fa-3x text-indigo-300 mb-4"></i>
+                        <h3 class="text-xl font-medium text-gray-700">No projects found matching your filters</h3>
+                        <p class="text-gray-500">Try adjusting your search criteria</p>
+                    </div>
+                `;
+                return;
+            }
+            filteredProjects.forEach(project => {
+                const difficultyColors = {
+                    beginner: 'bg-green-100 text-green-800',
+                    intermediate: 'bg-yellow-100 text-yellow-800',
+                    advanced: 'bg-red-100 text-red-800'
+                };
+                const categoryIcons = {
+                    text: 'fa-font',
+                    image: 'fa-image',
+                    audio: 'fa-volume-up',
+                    video: 'fa-video',
+                    creative: 'fa-palette',
+                    productivity: 'fa-bolt'
+                };
+                const card = document.createElement('div');
+                card.className = 'bg-white rounded-xl shadow-md overflow-hidden card-hover';
+                card.innerHTML = `
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="flex items-center">
+                                <div class="bg-indigo-100 p-3 rounded-lg text-indigo-600 mr-4">
+                                    <i class="fas ${project.icon || categoryIcons[project.category]} fa-lg"></i>
+                                </div>
+                                <h3 class="text-xl font-bold text-gray-800">${project.name}</h3>
+                            </div>
+                            <span class="px-3 py-1 rounded-full text-xs font-semibold ${difficultyColors[project.difficulty]}">
+                                ${project.difficulty.charAt(0).toUpperCase() + project.difficulty.slice(1)}
+                            </span>
+                        </div>
+                        <p class="text-gray-600 mb-6">${project.description}</p>
+                        <div class="flex flex-wrap gap-2 mb-6">
+                            ${project.techStack.map(tech => `
+                                <span class="px-3 py-1 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-full category-chip">${tech}</span>
+                            `).join('')}
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-full flex items-center">
+                                <i class="fas ${categoryIcons[project.category]} mr-1"></i>
+                                ${project.category.charAt(0).toUpperCase() + project.category.slice(1)}
+                            </span>
+                            <button class="text-indigo-600 hover:text-indigo-800 font-medium text-sm flex items-center">
+                                View Details <i class="fas fa-arrow-right ml-2"></i>
+                            </button>
+                        </div>
+                    </div>
+                `;
+                ideasContainer.appendChild(card);
+            });
+        }
+        // Filter Projects Function
+        function filterProjects() {
+            const difficultyValue = difficultyFilter.value;
+            const categoryValue = categoryFilter.value;
+            let filtered = projects;
+            if (difficultyValue !== 'all') {
+                filtered = filtered.filter(project => project.difficulty === difficultyValue);
+            }
+            if (categoryValue !== 'all') {
+                filtered = filtered.filter(project => project.category === categoryValue);
+            }
+            renderProjects(filtered);
+        }
+        // Random Project Function
+        function showRandomProject() {
+            const randomIndex = Math.floor(Math.random() * projects.length);
+            const randomProject = [projects[randomIndex]];
+            renderProjects(randomProject);
+            // Scroll to the top
+            ideasContainer.scrollTo(0, 0);
+        }
+        // Form Submission Handler
+        function handleFormSubmit(e) {
+            e.preventDefault();
+            const name = document.getElementById('project-name').value;
+            const description = document.getElementById('project-description').value;
+            const category = document.getElementById('project-category').value;
+            const difficulty = document.getElementById('project-difficulty').value;
+            const techStack = document.getElementById('project-tech').value.split(',').map(item => item.trim());
+            if (!name || !description) {
+                alert('Please fill in all required fields');
+                return;
+            }
+            const newProject = {
+                id: projects.length + 1,
+                name,
+                description,
+                category,
+                difficulty,
+                techStack,
+                icon: getIconForCategory(category)
+            };
+            projects.unshift(newProject);
+            renderProjects();
+            // Reset form
+            ideaForm.reset();
+            // Show success message
+            alert('Your project idea has been submitted successfully!');
+        }
+        // Helper function to get icon based on category
+        function getIconForCategory(category) {
+            const icons = {
+                text: 'fa-font',
+                image: 'fa-image',
+                audio: 'fa-volume-up',
+                video: 'fa-video',
+                creative: 'fa-palette',
+                productivity: 'fa-bolt',
+                other: 'fa-lightbulb'
+            };
+            return icons[category] || 'fa-lightbulb';
+        }
+        // Event Listeners
+        difficultyFilter.addEventListener('change', filterProjects);
+        categoryFilter.addEventListener('change', filterProjects);
+        randomBtn.addEventListener('click', showRandomProject);
+        ideaForm.addEventListener('submit', handleFormSubmit);
+        // Initial Render
+        renderProjects();
+    </script>
+</body>
+</html>