Spaces:
Running
Running
| <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> |