Spaces:
Running
Running
create a random idea generator (a real random, not a pool of strings to get circulated and repeated, but random words that would go together in sentences, can make a call to a device's entropy pool for the random data gen). this random idea generator will output its ideas in form of a LLM prompt. the user can will be able to choose the categories before generating ideas according to the category that's been selected. Categories: 10k business startup with under 100 dollars; Creative niche website ideas; Cracking the Code; Learning programming and Code review; Loose your mind to gain a dime (investing); Stock market sitcom (stocks); What to Build (name the parts list, get build ideas). So the user will select one of these categories, and in return should get a randomly generated prompt to be used with AI LMM later on, this is just to generate the prompts. if the user wants another prompt under the same category then just clicking the category again will generate a new prompt. if the user wants the save the prompt, there should be an option that collects users prompts that he or she clicks to save, the prompts that are decided to be saved by the user, will be combined together in a list right below the generative categories stack. user clicks on save option and visually the prompt makes its way down to the embedded list below and remains visible and editable like a text editor. When the prompt is moved to the saved area, the prompt saved should have description to go with it, and that is, the category it was picked from. this must be a fully functional website ready to be deployed, do NOT use simulated answers and code that will need to be filled in later with "real world" information or parameters. must work as is and use actual randomness to put prompts together based on chosen category. This cannot have prompts that after a while will start to repeat themselves over and over.
7f0af6b
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PromptCraft Oracle - AI Prompt Generator</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%); | |
| } | |
| .prompt-card { | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .saved-prompt { | |
| border-left: 4px solid #f97316; | |
| } | |
| .category-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .category-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-900 text-white"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <div class="relative z-10 container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 floating">PromptCraft Oracle 🎯</h1> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto">Generate truly random AI prompts with cryptographic entropy. No repeats, just infinite creativity.</p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid lg:grid-cols-2 gap-8 max-w-6xl mx-auto"> | |
| <!-- Left Column - Categories & Generator --> | |
| <div class="space-y-8"> | |
| <!-- Category Selection --> | |
| <div class="bg-gray-800/50 rounded-2xl p-6 backdrop-blur-lg border border-gray-700"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-feather="grid" class="mr-3 text-orange-500"></i> | |
| Choose Your Creative Domain | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <button onclick="generatePrompt('business')" class="category-btn bg-orange-500 hover:bg-orange-600 text-white p-4 rounded-xl text-left transition-all duration-300"> | |
| <i data-feather="dollar-sign" class="inline mr-2"></i> | |
| 10k Business Startup | |
| </button> | |
| <button onclick="generatePrompt('website')" class="category-btn bg-sky-500 hover:bg-sky-600 text-white p-4 rounded-xl text-left transition-all duration-300"> | |
| <i data-feather="globe" class="inline mr-2"></i> | |
| Creative Niche Websites | |
| </button> | |
| <button onclick="generatePrompt('coding')" class="category-btn bg-orange-500 hover:bg-orange-600 text-white p-4 rounded-xl text-left transition-all duration-300"> | |
| <i data-feather="code" class="inline mr-2"></i> | |
| Cracking the Code | |
| </button> | |
| <button onclick="generatePrompt('learning')" class="category-btn bg-sky-500 hover:bg-sky-600 text-white p-4 rounded-xl text-left transition-all duration-300"> | |
| <i data-feather="book" class="inline mr-2"></i> | |
| Learning Programming | |
| </button> | |
| <button onclick="generatePrompt('investing')" class="category-btn bg-orange-500 hover:bg-orange-600 text-white p-4 rounded-xl text-left transition-all duration-300"> | |
| <i data-feather="trending-up" class="inline mr-2"></i> | |
| Loose Your Mind to Gain a Dime | |
| </button> | |
| <button onclick="generatePrompt('stocks')" class="category-btn bg-sky-500 hover:bg-sky-600 text-white p-4 rounded-xl text-left transition-all duration-300"> | |
| <i data-feather="bar-chart" class="inline mr-2"></i> | |
| Stock Market Sitcom | |
| </button> | |
| <button onclick="generatePrompt('build')" class="category-btn bg-orange-500 hover:bg-orange-600 text-white p-4 rounded-xl text-left transition-all duration-300 col-span-2"> | |
| <i data-feather="tool" class="inline mr-2"></i> | |
| What to Build (Parts List) | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Generated Prompt Display --> | |
| <div id="promptDisplay" class="bg-gray-800/50 rounded-2xl p-6 backdrop-blur-lg border border-gray-700 hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold flex items-center"> | |
| <i data-feather="zap" class="mr-2 text-yellow-400"></i> | |
| Your AI Prompt | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button onclick="copyPrompt()" class="bg-sky-500 hover:bg-sky-600 text-white px-4 py-2 rounded-lg transition-colors"> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| </button> | |
| <button onclick="savePrompt()" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg transition-colors"> | |
| <i data-feather="save" class="w-4 h-4"></i> Save | |
| </button> | |
| <button onclick="regeneratePrompt()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-600"> | |
| <p id="generatedPrompt" class="text-lg leading-relaxed"></p> | |
| <small id="promptCategory" class="text-gray-400 mt-2 block"></small> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Saved Prompts --> | |
| <div class="bg-gray-800/50 rounded-2xl p-6 backdrop-blur-lg border border-gray-700"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-feather="bookmark" class="mr-3 text-sky-500"></i> | |
| Saved Prompts Collection | |
| </h2> | |
| <div id="savedPrompts" class="space-y-4 max-h-96 overflow-y-auto"> | |
| <div class="text-center text-gray-500 py-8"> | |
| <i data-feather="archive" class="w-12 h-12 mx-auto mb-2"></i> | |
| <p>Your saved prompts will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="text-center mt-12 text-gray-400"> | |
| <p>Powered by cryptographic entropy • No repeats, ever • Built with 💻</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xf97316, | |
| backgroundColor: 0x111827, | |
| size: 0.8 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Word banks for each category | |
| const wordBanks = { | |
| business: { | |
| verbs: ['launch', 'scale', 'disrupt', 'monetize', 'automate', 'optimize', 'pivot', 'streamline', 'franchise', 'syndicate'], | |
| nouns: ['SaaS platform', 'subscription box', 'digital agency', 'e-commerce store', 'consulting service', 'online course', 'membership site', 'affiliate network', 'dropshipping business', 'content creation studio'], | |
| adjectives: ['profitable', 'scalable', 'sustainable', 'automated', 'remote-first', 'AI-powered', 'blockchain-based', 'eco-friendly', 'hyper-local', 'global'], | |
| markets: ['digital nomads', 'small businesses', 'students', 'creators', 'parents', 'fitness enthusiasts', 'foodies', 'gamers', 'developers', 'investors'], | |
| constraints: ['under $100 budget', 'using only free tools', 'within 30 days', 'with no coding', 'using AI automation', 'through social media', 'with viral marketing', 'using existing platforms'] | |
| }, | |
| website: { | |
| themes: ['minimalist', 'dark mode', 'brutalist', 'neomorphic', 'glassmorphism', 'cyberpunk', 'retro', 'futuristic', 'organic', 'abstract'], | |
| niches: ['AI art gallery', 'cryptocurrency tracker', 'mental health journal', 'sustainable living guide', 'indie game database', 'local event finder', 'recipe sharing platform', 'book club community', 'fitness challenge tracker', 'digital nomad hub'], | |
| features: ['real-time collaboration', 'AI recommendations', 'blockchain integration', 'AR/VR experiences', 'progressive web app', 'voice interface', 'machine learning', 'social features', 'gamification', 'subscription model'], | |
| tech: ['Next.js', 'React', 'Vue', 'Svelte', 'Node.js', 'Python', 'Web3', 'GraphQL', 'TypeScript', 'Tailwind CSS'] | |
| }, | |
| coding: { | |
| challenges: ['algorithm optimization', 'system design', 'bug fixing', 'performance tuning', 'security hardening', 'API development', 'database scaling', 'microservices architecture', 'real-time features', 'mobile development'], | |
| languages: ['Python', 'JavaScript', 'Rust', 'Go', 'Swift', 'Kotlin', 'Java', 'C++', 'TypeScript', 'Solidity'], | |
| domains: ['web development', 'mobile apps', 'AI/ML', 'blockchain', 'game development', 'data science', 'cloud computing', 'cybersecurity', 'IoT', 'AR/VR'], | |
| approaches: ['test-driven development', 'pair programming', 'agile methodology', 'clean architecture', 'domain-driven design', 'functional programming', 'object-oriented design', 'reactive programming', 'concurrent programming', 'distributed systems'] | |
| }, | |
| learning: { | |
| topics: ['machine learning fundamentals', 'web3 development', 'cloud architecture', 'mobile app design', 'data structures', 'system administration', 'UI/UX principles', 'backend engineering', 'frontend frameworks', 'database design'], | |
| methods: ['project-based learning', 'pair programming', 'code review sessions', 'algorithm challenges', 'open source contributions', 'technical interviews', 'portfolio building', 'mentorship programs', 'online courses', 'bootcamps'], | |
| resources: ['interactive tutorials', 'video courses', 'coding challenges', 'documentation reading', 'community forums', 'technical blogs', 'podcasts', 'books', 'workshops', 'conferences'] | |
| }, | |
| investing: { | |
| strategies: ['value investing', 'growth investing', 'momentum trading', 'dividend harvesting', 'index fund strategy', 'sector rotation', 'options trading', 'crypto arbitrage', 'real estate crowdfunding', 'angel investing'], | |
| assets: ['tech stocks', 'cryptocurrencies', 'real estate', 'precious metals', 'collectibles', 'startup equity', 'REITs', 'ETFs', 'bonds', 'commodities'], | |
| approaches: ['long-term holding', 'swing trading', 'day trading', 'dollar-cost averaging', 'market timing', 'fundamental analysis', 'technical analysis', 'quantitative models', 'social sentiment', 'AI predictions'] | |
| }, | |
| stocks: { | |
| companies: ['Tech giants', 'Biotech startups', 'EV manufacturers', 'Social media platforms', 'Cloud providers', 'Fintech disruptors', 'Gaming companies', 'Streaming services', 'E-commerce leaders', 'AI pioneers'], | |
| scenarios: ['earnings season drama', 'merger acquisition rumors', 'regulatory crackdowns', 'short squeeze madness', 'insider trading scandals', 'CEO controversies', 'product launch failures', 'market crashes', 'bull run euphoria', 'IPO mania'], | |
| characters: ['day trader', 'fund manager', 'retail investor', 'financial analyst', 'market maker', 'hedge fund whale', 'algorithmic bot', 'financial influencer', 'SEC regulator', 'company executive'] | |
| }, | |
| build: { | |
| components: ['Raspberry Pi', 'Arduino', 'sensors', 'motors', 'cameras', 'displays', 'batteries', 'solar panels', 'wireless modules', 'AI chips', 'robotic arms'], | |
| projects: ['smart home automation', 'DIY drone', '3D printer', 'weather station', 'robot vacuum', 'fitness tracker', 'plant monitoring system', 'security camera', 'voice assistant', 'gaming console'], | |
| integrations: ['mobile app control', 'voice commands', 'cloud connectivity', 'machine learning', 'computer vision', 'IoT platform', 'blockchain', 'AR interface', 'biometric sensors', 'renewable energy'] | |
| } | |
| }; | |
| let currentCategory = ''; | |
| let currentPrompt = ''; | |
| // Cryptographic random number generator using device entropy | |
| function getCryptoRandom() { | |
| const array = new Uint32Array(1); | |
| window.crypto.getRandomValues(array); | |
| return array[0] / (0xFFFFFFFF + 1); | |
| } | |
| function getRandomElement(array) { | |
| return array[Math.floor(getCryptoRandom() * array.length)]; | |
| } | |
| function generatePrompt(category) { | |
| currentCategory = category; | |
| const bank = wordBanks[category]; | |
| let prompt = ''; | |
| switch(category) { | |
| case 'business': | |
| prompt = `Create a comprehensive business plan for a ${getRandomElement(bank.adjectives)} ${getRandomElement(bank.nouns)} targeting ${getRandomElement(bank.markets)}, ${getRandomElement(bank.constraints)}. Include market analysis, revenue model, marketing strategy, and operational plan.`; | |
| break; | |
| case 'website': | |
| prompt = `Design a ${getRandomElement(bank.themes)} ${getRandomElement(bank.niches)} website using ${getRandomElement(bank.tech)} with ${getRandomElement(bank.features)}. Provide detailed specifications for user experience, technical architecture, and monetization strategy.`; | |
| break; | |
| case 'coding': | |
| prompt = `Solve this ${getRandomElement(bank.challenges)} problem in ${getRandomElement(bank.languages)} for ${getRandomElement(bank.domains)} using ${getRandomElement(bank.approaches)}. Include code implementation, testing strategy, and performance optimization.`; | |
| break; | |
| case 'learning': | |
| prompt = `Design a ${getRandomElement(bank.methods)} curriculum for learning ${getRandomElement(bank.topics)} using ${getRandomElement(bank.resources)}. Include learning objectives, milestones, and assessment methods.`; | |
| break; | |
| case 'investing': | |
| prompt = `Develop a ${getRandomElement(bank.strategies)} portfolio focused on ${getRandomElement(bank.assets)} using ${getRandomElement(bank.approaches)}. Provide risk analysis, diversification strategy, and performance metrics.`; | |
| break; | |
| case 'stocks': | |
| prompt = `Write a sitcom episode script about ${getRandomElement(bank.characters)} dealing with ${getRandomElement(bank.scenarios)} involving ${getRandomElement(bank.companies)}. Include character development, comedic elements, and financial insights.`; | |
| break; | |
| case 'build': | |
| prompt = `Create detailed build instructions for a ${getRandomElement(bank.projects)} using ${getRandomElement(bank.components)} with ${getRandomElement(bank.integrations)}. Include parts list, assembly steps, programming requirements, and testing procedures.`; | |
| break; | |
| } | |
| currentPrompt = prompt; | |
| document.getElementById('generatedPrompt').textContent = prompt; | |
| document.getElementById('promptCategory').textContent = `Category: ${getCategoryName(category)}`; | |
| document.getElementById('promptDisplay').classList.remove('hidden'); | |
| // Add visual feedback | |
| document.querySelectorAll('.category-btn').forEach(btn => { | |
| btn.classList.remove('ring-2', 'ring-orange-400'); | |
| }); | |
| event.target.classList.add('ring-2', 'ring-orange-400'); | |
| } | |
| function getCategoryName(category) { | |
| const names = { | |
| business: '10k Business Startup', | |
| website: 'Creative Niche Websites', | |
| coding: 'Cracking the Code', | |
| learning: 'Learning Programming', | |
| investing: 'Loose Your Mind to Gain a Dime', | |
| stocks: 'Stock Market Sitcom', | |
| build: 'What to Build' | |
| }; | |
| return names[category]; | |
| } | |
| function copyPrompt() { | |
| navigator.clipboard.writeText(currentPrompt).then(() => { | |
| // Visual feedback | |
| const btn = event.target.closest('button'); | |
| const originalHTML = btn.innerHTML; | |
| btn.innerHTML = '<i data-feather="check" class="w-4 h-4"></i> Copied!'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| btn.innerHTML = originalHTML; | |
| feather.replace(); | |
| }, 2000); | |
| }); | |
| } | |
| function savePrompt() { | |
| const savedPrompts = document.getElementById('savedPrompts'); | |
| const emptyState = savedPrompts.querySelector('.text-center'); | |
| if (emptyState) { | |
| emptyState.remove(); | |
| } | |
| const promptId = 'prompt-' + Date.now(); | |
| const promptElement = document.createElement('div'); | |
| promptElement.className = 'saved-prompt bg-gray-900/70 rounded-lg p-4 border border-gray-600'; | |
| promptElement.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm text-orange-400 bg-orange-400/20 px-2 py-1 rounded-full"> | |
| ${getCategoryName(currentCategory)} | |
| </span> | |
| <button onclick="deletePrompt('${promptId}')" class="text-gray-400 hover:text-red-400 transition-colors"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div contenteditable="true" class="text-white bg-transparent outline-none min-h-[60px]">${currentPrompt}</div> | |
| <div class="text-xs text-gray-500 mt-2">Click to edit • Double click to delete</div> | |
| `; | |
| // Add double click to delete | |
| promptElement.addEventListener('dblclick', function() { | |
| deletePrompt(promptId); | |
| }); | |
| promptElement.id = promptId; | |
| savedPrompts.insertBefore(promptElement, savedPrompts.firstChild); | |
| // Visual feedback | |
| const saveBtn = event.target.closest('button'); | |
| saveBtn.innerHTML = '<i data-feather="check" class="w-4 h-4"></i> Saved!'; | |
| setTimeout(() => { | |
| saveBtn.innerHTML = '<i data-feather="save" class="w-4 h-4"></i> Save'; | |
| feather.replace(); | |
| }, 2000); | |
| feather.replace(); | |
| } | |
| function deletePrompt(id) { | |
| document.getElementById(id).remove(); | |
| // Show empty state if no prompts left | |
| const savedPrompts = document.getElementById('savedPrompts'); | |
| if (savedPrompts.children.length === 0) { | |
| savedPrompts.innerHTML = ` | |
| <div class="text-center text-gray-500 py-8"> | |
| <i data-feather="archive" class="w-12 h-12 mx-auto mb-2"></i> | |
| <p>Your saved prompts will appear here</p> | |
| </div> | |
| `; | |
| feather.replace(); | |
| } | |
| } | |
| function regeneratePrompt() { | |
| if (currentCategory) { | |
| generatePrompt(currentCategory); | |
| } | |
| } | |
| // Add keyboard shortcuts | |
| document.addEventListener('keydown', (e) => { | |
| if (e.ctrlKey || e.metaKey) { | |
| switch(e.key) { | |
| case 'c': | |
| e.preventDefault(); | |
| copyPrompt(); | |
| break; | |
| case 's': | |
| e.preventDefault(); | |
| savePrompt(); | |
| break; | |
| case 'r': | |
| e.preventDefault(); | |
| regeneratePrompt(); | |
| break; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |