Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Creator Studio</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> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .ai-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .ai-card:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .glow { | |
| box-shadow: 0 0 20px rgba(167, 119, 227, 0.6); | |
| } | |
| .glow:hover { | |
| box-shadow: 0 0 30px rgba(167, 119, 227, 0.8); | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: 2px solid white; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: 0.15em; | |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: white; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg text-white font-sans"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <header class="text-center mb-12"> | |
| <div class="animate-float inline-block"> | |
| <i class="fas fa-robot text-6xl mb-4 text-purple-200"></i> | |
| </div> | |
| <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-200 to-pink-200">AI Creator Studio</h1> | |
| <p class="text-xl opacity-90 max-w-2xl mx-auto">Describe your perfect AI companion and watch it come to life with our advanced generator</p> | |
| </header> | |
| <div class="max-w-4xl mx-auto bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-8 mb-12 glow transition-all duration-300"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <div class="flex-1"> | |
| <h2 class="text-2xl font-semibold mb-6 flex items-center"> | |
| <i class="fas fa-wand-magic-sparkles mr-3 text-purple-300"></i> AI Configuration | |
| </h2> | |
| <div class="mb-8"> | |
| <label for="aiPrompt" class="block mb-3 font-medium text-purple-100">Describe Your AI</label> | |
| <div class="relative"> | |
| <textarea | |
| id="aiPrompt" | |
| rows="3" | |
| placeholder="Example: 'A creative writing assistant that generates poetic metaphors and helps overcome writer's block'" | |
| class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-purple-300 placeholder-white placeholder-opacity-70 resize-none" | |
| ></textarea> | |
| <div class="absolute right-3 bottom-3 text-xs opacity-70" id="charCount">0/200</div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block mb-3 font-medium text-purple-100">Primary Function</label> | |
| <div class="flex flex-col gap-3"> | |
| <button class="ai-type-btn px-4 py-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-30 transition text-left flex items-center" data-type="chatbot"> | |
| <i class="fas fa-comments mr-3 text-lg"></i> Conversational Chatbot | |
| </button> | |
| <button class="ai-type-btn px-4 py-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-30 transition text-left flex items-center" data-type="assistant"> | |
| <i class="fas fa-tasks mr-3 text-lg"></i> Task Assistant | |
| </button> | |
| <button class="ai-type-btn px-4 py-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-30 transition text-left flex items-center" data-type="creative"> | |
| <i class="fas fa-paint-brush mr-3 text-lg"></i> Creative Generator | |
| </button> | |
| <button class="ai-type-btn px-4 py-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-30 transition text-left flex items-center" data-type="analytical"> | |
| <i class="fas fa-chart-line mr-3 text-lg"></i> Data Analyst | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block mb-3 font-medium text-purple-100">Personality Traits</label> | |
| <div class="flex flex-col gap-3"> | |
| <button class="personality-btn px-4 py-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-30 transition text-left flex items-center" data-personality="friendly"> | |
| <i class="fas fa-smile-beam mr-3 text-lg"></i> Friendly & Approachable | |
| </button> | |
| <button class="personality-btn px-4 py-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-30 transition text-left flex items-center" data-personality="professional"> | |
| <i class="fas fa-suitcase mr-3 text-lg"></i> Professional | |
| </button> | |
| <button class="personality-btn px-4 py-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-30 transition text-left flex items-center" data-personality="humorous"> | |
| <i class="fas fa-laugh-squint mr-3 text-lg"></i> Witty & Humorous | |
| </button> | |
| <button class="personality-btn px-4 py-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-30 transition text-left flex items-center" data-personality="wise"> | |
| <i class="fas fa-lightbulb mr-3 text-lg"></i> Wise & Insightful | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <button | |
| id="generateBtn" | |
| class="w-full px-6 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold rounded-xl transition-all duration-300 flex items-center justify-center glow" | |
| > | |
| <i class="fas fa-sparkles mr-3"></i> Generate My AI | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-black bg-opacity-30 rounded-2xl p-6 h-full flex flex-col"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-eye mr-2"></i> AI Preview | |
| </h3> | |
| <div id="previewContent" class="flex-1 flex flex-col items-center justify-center text-center p-6 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-xl border border-white/10"> | |
| <div class="relative mb-6"> | |
| <i class="fas fa-robot text-6xl opacity-80"></i> | |
| <div class="absolute -inset-4 rounded-full bg-purple-500/10 animate-pulse"></div> | |
| </div> | |
| <p class="opacity-80 text-lg">Your AI configuration will appear here</p> | |
| <div id="previewTags" class="flex gap-2 mt-4"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="loading" class="hidden max-w-3xl mx-auto text-center p-8 bg-white/10 backdrop-blur-lg rounded-2xl"> | |
| <div class="animate-pulse flex flex-col items-center"> | |
| <div class="relative mb-6"> | |
| <i class="fas fa-cog fa-spin text-5xl text-purple-300"></i> | |
| <div class="absolute -inset-4 rounded-full bg-purple-500/20 animate-pulse"></div> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-2">Crafting Your AI...</h3> | |
| <p class="text-lg opacity-80 mb-6">Our neural networks are working hard to create your perfect AI companion</p> | |
| <div class="w-full bg-white bg-opacity-20 rounded-full h-3"> | |
| <div id="progressBar" class="bg-gradient-to-r from-purple-400 to-pink-400 h-3 rounded-full transition-all duration-500" style="width: 0%"></div> | |
| </div> | |
| <div id="loadingMessages" class="mt-6 text-sm opacity-70 italic"> | |
| <p>Initializing personality matrix...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="result" class="hidden max-w-5xl mx-auto"> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl overflow-hidden glow"> | |
| <div class="p-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-start mb-8 gap-6"> | |
| <div> | |
| <h2 id="aiName" class="text-4xl font-bold mb-2 typewriter"></h2> | |
| <div id="aiTags" class="flex gap-2 mt-4"></div> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button id="saveBtn" class="px-5 py-2.5 bg-purple-600 hover:bg-purple-700 rounded-xl flex items-center transition"> | |
| <i class="fas fa-save mr-2"></i> Save AI | |
| </button> | |
| <button id="exportBtn" class="px-5 py-2.5 bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-30 rounded-xl flex items-center transition"> | |
| <i class="fas fa-file-export mr-2"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-info-circle mr-2 text-purple-300"></i> Description | |
| </h3> | |
| <p id="aiDescription" class="opacity-90 leading-relaxed"></p> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-bolt mr-2 text-purple-300"></i> Key Capabilities | |
| </h3> | |
| <ul id="aiCapabilities" class="space-y-3"></ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-cogs mr-2 text-purple-300"></i> Technical Details | |
| </h3> | |
| <div id="techSpecs" class="grid grid-cols-2 gap-4 text-sm"> | |
| <!-- Will be filled by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-black bg-opacity-30 rounded-xl overflow-hidden mb-6 h-64 relative"> | |
| <div id="aiImage" class="w-full h-full flex items-center justify-center"> | |
| <!-- AI image will be generated here --> | |
| </div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-32 h-32 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center"> | |
| <i class="fas fa-robot text-4xl text-white/70"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-5"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-comment-dots mr-2 text-purple-300"></i> Example Interaction | |
| </h3> | |
| <div id="aiExample" class="italic opacity-90 bg-black/30 p-4 rounded-lg"></div> | |
| </div> | |
| <div class="mt-6 bg-purple-900/20 rounded-xl p-4 border border-purple-400/30"> | |
| <h3 class="font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-user-shield mr-2 text-purple-300"></i> Ethical Considerations | |
| </h3> | |
| <p id="aiEthics" class="text-sm opacity-80"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button id="newAiBtn" class="px-8 py-3 bg-white bg-opacity-10 hover:bg-opacity-20 border border-white border-opacity-30 rounded-xl font-medium transition flex items-center mx-auto"> | |
| <i class="fas fa-plus mr-2"></i> Create Another AI | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const aiPrompt = document.getElementById('aiPrompt'); | |
| const charCount = document.getElementById('charCount'); | |
| const previewContent = document.getElementById('previewContent'); | |
| const previewTags = document.getElementById('previewTags'); | |
| const loading = document.getElementById('loading'); | |
| const result = document.getElementById('result'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const loadingMessages = document.getElementById('loadingMessages'); | |
| // AI Configuration Buttons | |
| const aiTypeBtns = document.querySelectorAll('.ai-type-btn'); | |
| const personalityBtns = document.querySelectorAll('.personality-btn'); | |
| // Result Elements | |
| const aiName = document.getElementById('aiName'); | |
| const aiTags = document.getElementById('aiTags'); | |
| const aiDescription = document.getElementById('aiDescription'); | |
| const aiCapabilities = document.getElementById('aiCapabilities'); | |
| const techSpecs = document.getElementById('techSpecs'); | |
| const aiImage = document.getElementById('aiImage'); | |
| const aiExample = document.getElementById('aiExample'); | |
| const aiEthics = document.getElementById('aiEthics'); | |
| // Other Buttons | |
| const saveBtn = document.getElementById('saveBtn'); | |
| const exportBtn = document.getElementById('exportBtn'); | |
| const newAiBtn = document.getElementById('newAiBtn'); | |
| // State Variables | |
| let selectedType = ''; | |
| let selectedPersonality = ''; | |
| // Character count for textarea | |
| aiPrompt.addEventListener('input', function() { | |
| const currentLength = this.value.length; | |
| charCount.textContent = `${currentLength}/200`; | |
| if (currentLength > 190) { | |
| charCount.classList.add('text-pink-300'); | |
| } else { | |
| charCount.classList.remove('text-pink-300'); | |
| } | |
| updatePreview(); | |
| }); | |
| // Set up event listeners for AI type buttons | |
| aiTypeBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| aiTypeBtns.forEach(b => b.classList.remove('bg-purple-600', 'border-purple-400')); | |
| this.classList.add('bg-purple-600', 'border-purple-400'); | |
| selectedType = this.dataset.type; | |
| updatePreview(); | |
| }); | |
| }); | |
| // Set up event listeners for personality buttons | |
| personalityBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| personalityBtns.forEach(b => b.classList.remove('bg-purple-600', 'border-purple-400')); | |
| this.classList.add('bg-purple-600', 'border-purple-400'); | |
| selectedPersonality = this.dataset.personality; | |
| updatePreview(); | |
| }); | |
| }); | |
| // Update preview based on selections | |
| function updatePreview() { | |
| previewTags.innerHTML = ''; | |
| if (selectedType || selectedPersonality || aiPrompt.value.trim()) { | |
| let icon = 'fa-robot'; | |
| let previewText = 'Custom AI Configuration'; | |
| // Set icon based on type | |
| if (selectedType === 'chatbot') icon = 'fa-comments'; | |
| if (selectedType === 'assistant') icon = 'fa-headset'; | |
| if (selectedType === 'creative') icon = 'fa-paint-brush'; | |
| if (selectedType === 'analytical') icon = 'fa-chart-line'; | |
| // Create preview content | |
| previewContent.innerHTML = ` | |
| <div class="relative mb-6"> | |
| <i class="fas ${icon} text-6xl opacity-80"></i> | |
| <div class="absolute -inset-4 rounded-full bg-purple-500/10 animate-pulse"></div> | |
| </div> | |
| <p class="font-medium text-lg mb-2">${previewText}</p> | |
| `; | |
| // Add tags | |
| if (selectedType) { | |
| const typeTag = document.createElement('span'); | |
| typeTag.className = 'text-xs px-3 py-1 bg-white bg-opacity-20 rounded-full'; | |
| typeTag.textContent = selectedType; | |
| previewTags.appendChild(typeTag); | |
| } | |
| if (selectedPersonality) { | |
| const personalityTag = document.createElement('span'); | |
| personalityTag.className = 'text-xs px-3 py-1 bg-white bg-opacity-20 rounded-full'; | |
| personalityTag.textContent = selectedPersonality; | |
| previewTags.appendChild(personalityTag); | |
| } | |
| // Add prompt preview if exists | |
| if (aiPrompt.value.trim()) { | |
| const promptPreview = document.createElement('p'); | |
| promptPreview.className = 'text-sm opacity-70 mt-3 max-w-md'; | |
| promptPreview.textContent = aiPrompt.value.length > 50 | |
| ? `"${aiPrompt.value.substring(0, 50)}..."` | |
| : `"${aiPrompt.value}"`; | |
| previewContent.appendChild(promptPreview); | |
| } | |
| } else { | |
| previewContent.innerHTML = ` | |
| <div class="relative mb-6"> | |
| <i class="fas fa-robot text-6xl opacity-80"></i> | |
| <div class="absolute -inset-4 rounded-full bg-purple-500/10 animate-pulse"></div> | |
| </div> | |
| <p class="opacity-80 text-lg">Your AI configuration will appear here</p> | |
| `; | |
| } | |
| } | |
| // Generate AI | |
| generateBtn.addEventListener('click', generateAI); | |
| aiPrompt.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| generateAI(); | |
| } | |
| }); | |
| function generateAI() { | |
| const prompt = aiPrompt.value.trim(); | |
| if (!prompt && !selectedType && !selectedPersonality) { | |
| showNotification('Please describe your AI or select some options', 'error'); | |
| return; | |
| } | |
| // Show loading screen | |
| previewContent.classList.add('hidden'); | |
| loading.classList.remove('hidden'); | |
| // Loading messages | |
| const messages = [ | |
| "Initializing neural networks...", | |
| "Configuring personality parameters...", | |
| "Training language models...", | |
| "Optimizing response algorithms...", | |
| "Finalizing creative modules...", | |
| "Almost there...", | |
| ]; | |
| let messageIndex = 0; | |
| const messageInterval = setInterval(() => { | |
| if (messageIndex < messages.length) { | |
| const p = document.createElement('p'); | |
| p.textContent = messages[messageIndex]; | |
| loadingMessages.appendChild(p); | |
| messageIndex++; | |
| } | |
| }, 1500); | |
| // Simulate progress | |
| let progress = 0; | |
| const progressInterval = setInterval(() => { | |
| progress += Math.random() * 15; | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| if (progress === 100) { | |
| clearInterval(progressInterval); | |
| clearInterval(messageInterval); | |
| setTimeout(() => { | |
| // Generate AI data | |
| const aiData = simulateAIResponse(prompt, selectedType, selectedPersonality); | |
| displayAIResult(aiData); | |
| }, 800); | |
| } | |
| }, 300); | |
| } | |
| function simulateAIResponse(prompt, type, personality) { | |
| // Generate a creative name based on the prompt | |
| const namePrefixes = [ | |
| "Nova", "Quantum", "Neo", "Cyber", "Omni", "Hyper", "Meta", "Echo", | |
| "Synth", "Astra", "Zen", "Vega", "Orion", "Lumina", "Pulse", "Nexus", | |
| "Evo", "Aether", "Cerebro", "Logos", "Muse", "Sage", "Virtu", "Aegis" | |
| ]; | |
| const nameSuffixes = [ | |
| "AI", "Bot", "Mind", "Core", "Sphere", "Net", "Link", "Node", | |
| "System", "Engine", "Agent", "Assistant", "Guide", "Think", "Naut", | |
| "Byte", "Syn", "Vox", "Morph", "Tron", "Dex", "Virt", "Logy" | |
| ]; | |
| const randomName = | |
| namePrefixes[Math.floor(Math.random() * namePrefixes.length)] + | |
| nameSuffixes[Math.floor(Math.random() * nameSuffixes.length)]; | |
| // Generate description based on inputs | |
| let description = ""; | |
| if (prompt) { | |
| description = `${randomName} is an advanced artificial intelligence system specifically designed to ${prompt.toLowerCase()}. `; | |
| } else { | |
| description = `${randomName} is a cutting-edge AI system with specialized capabilities. `; | |
| } | |
| if (type) { | |
| description += `It functions primarily as a ${type} AI, `; | |
| if (type === "chatbot") description += "specializing in natural language conversations and user interactions with human-like responsiveness. "; | |
| if (type === "assistant") description += "focused on helping users complete tasks efficiently through intuitive interfaces and proactive suggestions. "; | |
| if (type === "creative") description += "with exceptional abilities in generating original content, artistic concepts, and innovative ideas. "; | |
| if (type === "analytical") description += "excelling at processing complex data sets, identifying patterns, and providing actionable insights. "; | |
| } | |
| if (personality) { | |
| description += `The AI has been programmed with a ${personality} personality, `; | |
| if (personality === "friendly") description += "making interactions warm, empathetic, and approachable while maintaining professionalism. "; | |
| if (personality === "professional") description += "ensuring communications are polished, concise, and business-appropriate at all times. "; | |
| if (personality === "humorous") description += "often incorporating wit, lightheartedness, and appropriate humor into responses. "; | |
| if (personality === "wise") description += "offering thoughtful, philosophical perspectives and carefully considered advice. "; | |
| } | |
| // Generate capabilities | |
| const capabilities = []; | |
| const capabilityOptions = { | |
| "chatbot": [ | |
| "Natural language understanding", | |
| "Contextual conversation memory", | |
| "Multi-language support", | |
| "Emotional tone analysis", | |
| "Personalized responses", | |
| "Knowledge synthesis", | |
| "Real-time information retrieval", | |
| "Conversation flow optimization" | |
| ], | |
| "assistant": [ | |
| "Task automation", | |
| "Calendar integration", | |
| "Smart reminders", | |
| "Email composition", | |
| "Meeting scheduling", | |
| "Research assistance", | |
| "Document summarization", | |
| "Workflow optimization" | |
| ], | |
| "creative": [ | |
| "Poetic language generation", | |
| "Storytelling frameworks", | |
| "Visual concept development", | |
| "Musical composition", | |
| "Brand identity creation", | |
| "Creative problem-solving", | |
| "Artistic style emulation", | |
| "Innovation brainstorming" | |
| ], | |
| "analytical": [ | |
| "Data visualization", | |
| "Statistical modeling", | |
| "Predictive analytics", | |
| "Trend identification", | |
| "Market analysis", | |
| "Performance metrics", | |
| "Risk assessment", | |
| "Decision support" | |
| ], | |
| "general": [ | |
| "Continuous learning", | |
| "Adaptive interfaces", | |
| "Personalization algorithms", | |
| "Multi-modal interaction", | |
| "Ethical constraint systems", | |
| "Bias mitigation", | |
| "Security protocols", | |
| "Scalable architecture" | |
| ] | |
| }; | |
| // Select capabilities based on type | |
| const typeCapabilities = capabilityOptions[type || "general"]; | |
| const generalCapabilities = capabilityOptions["general"]; | |
| // Select 4-6 specialized capabilities | |
| const shuffledType = [...typeCapabilities].sort(() => 0.5 - Math.random()); | |
| capabilities.push(...shuffledType.slice(0, 4 + Math.floor(Math.random() * 2))); | |
| // Select 2-3 general capabilities | |
| const shuffledGeneral = [...generalCapabilities].sort(() => 0.5 - Math.random()); | |
| capabilities.push(...shuffledGeneral.slice(0, 2 + Math.floor(Math.random() * 1))); | |
| // Generate technical specifications | |
| const techSpecs = [ | |
| { name: "Model Architecture", value: ["Transformer", "GAN", "RNN", "LSTM", "Diffusion"][Math.floor(Math.random() * 5)] }, | |
| { name: "Training Data", value: `${Math.floor(Math.random() * 900 + 100)}TB` }, | |
| { name: "Parameters", value: `${Math.floor(Math.random() * 90 + 10)} billion` }, | |
| { name: "Response Time", value: `${Math.random().toFixed(2)}s` }, | |
| { name: "Languages", value: ["Multilingual", "English-focused", "50+ languages"][Math.floor(Math.random() * 3)] }, | |
| { name: "Update Frequency", value: ["Real-time", "Daily", "Weekly"][Math.floor(Math.random() * 3)] } | |
| ]; | |
| // Generate example interaction | |
| let example = ""; | |
| if (type === "chatbot") { | |
| example = `User: Hi ${randomName}, how are you today?\n${randomName}: I'm functioning at optimal parameters, thank you for asking! How can I assist you today?`; | |
| } else if (type === "assistant") { | |
| example = `User: Remind me to call my mom at 5pm\n${randomName}: I've set a reminder for you to call your mother at 5:00 PM. Would you like me to add any notes to the reminder?`; | |
| } else if (type === "creative") { | |
| example = `User: Write a haiku about the ocean\n${randomName}: Azure waves embrace,\nwhispering to golden sands,\neternal rhythm flows.`; | |
| } else if (type === "analytical") { | |
| example = `User: Analyze these sales figures\n${randomName}: Based on the data, Q2 shows a 12.7% increase over Q1 with strongest growth in the 25-34 demographic. I recommend increasing marketing focus on this segment.`; | |
| } else { | |
| example = `User: What can you do?\n${randomName}: I can help with a wide range of tasks including information retrieval, creative brainstorming, data analysis, and more. How can I assist you today?`; | |
| } | |
| // Generate ethical considerations | |
| const ethicsPhrases = [ | |
| "This AI includes robust ethical safeguards to prevent harmful outputs.", | |
| "Built with fairness algorithms to minimize demographic bias.", | |
| "Includes content filters to prevent generation of unsafe material.", | |
| "Designed with transparency about its artificial nature.", | |
| "Implements strict data privacy protocols for user protection.", | |
| "Regularly audited for alignment with human values." | |
| ]; | |
| const randomEthics = ethicsPhrases.sort(() => 0.5 - Math.random()).slice(0, 3).join(" "); | |
| // Generate a random color gradient for the image placeholder | |
| const colors = [ | |
| "from-purple-500 to-pink-500", | |
| "from-blue-500 to-teal-500", | |
| "from-green-500 to-emerald-500", | |
| "from-yellow-500 to-orange-500", | |
| "from-red-500 to-pink-500", | |
| "from-indigo-500 to-purple-500", | |
| "from-cyan-500 to-blue-500", | |
| "from-amber-500 to-red-500" | |
| ]; | |
| const randomColor = colors[Math.floor(Math.random() * colors.length)]; | |
| return { | |
| name: randomName, | |
| description: description, | |
| type: type || "general", | |
| personality: personality || "neutral", | |
| capabilities: capabilities, | |
| techSpecs: techSpecs, | |
| example: example, | |
| ethics: randomEthics, | |
| color: randomColor | |
| }; | |
| } | |
| function displayAIResult(aiData) { | |
| loading.classList.add('hidden'); | |
| result.classList.remove('hidden'); | |
| // Set the AI name with typewriter effect | |
| aiName.textContent = ''; | |
| setTimeout(() => { | |
| aiName.textContent = aiData.name; | |
| aiName.classList.add('typewriter'); | |
| setTimeout(() => { | |
| aiName.classList.remove('typewriter'); | |
| }, 3500); | |
| }, 100); | |
| // Set tags | |
| aiTags.innerHTML = ''; | |
| if (aiData.type) { | |
| const typeTag = document.createElement('span'); | |
| typeTag.className = 'text-sm px-3 py-1 bg-white bg-opacity-20 rounded-full'; | |
| typeTag.textContent = aiData.type; | |
| aiTags.appendChild(typeTag); | |
| } | |
| if (aiData.personality) { | |
| const personalityTag = document.createElement('span'); | |
| personalityTag.className = 'text-sm px-3 py-1 bg-white bg-opacity-20 rounded-full'; | |
| personalityTag.textContent = aiData.personality; | |
| aiTags.appendChild(personalityTag); | |
| } | |
| // Set description | |
| aiDescription.textContent = aiData.description; | |
| // Set capabilities | |
| aiCapabilities.innerHTML = ''; | |
| aiData.capabilities.forEach(capability => { | |
| const li = document.createElement('li'); | |
| li.className = 'flex items-start'; | |
| li.innerHTML = ` | |
| <i class="fas fa-check-circle text-purple-300 mt-1 mr-3"></i> | |
| <span>${capability}</span> | |
| `; | |
| aiCapabilities.appendChild(li); | |
| }); | |
| // Set technical specifications | |
| techSpecs.innerHTML = ''; | |
| aiData.techSpecs.forEach(spec => { | |
| const div = document.createElement('div'); | |
| div.className = 'bg-white/5 p-3 rounded-lg'; | |
| div.innerHTML = ` | |
| <div class="text-xs opacity-70 mb-1">${spec.name}</div> | |
| <div class="font-medium">${spec.value}</div> | |
| `; | |
| techSpecs.appendChild(div); | |
| }); | |
| // Set example | |
| aiExample.textContent = aiData.example; | |
| // Set ethics | |
| aiEthics.textContent = aiData.ethics; | |
| // Set image (simulated) | |
| aiImage.className = `w-full h-full bg-gradient-to-br ${aiData.color} flex items-center justify-center`; | |
| // Add decorative elements to the image | |
| aiImage.innerHTML = ''; | |
| // Add floating circles | |
| for (let i = 0; i < 8; i++) { | |
| const circle = document.createElement('div'); | |
| circle.className = 'absolute rounded-full bg-white/10 backdrop-blur-sm'; | |
| circle.style.width = `${Math.random() * 80 + 30}px`; | |
| circle.style.height = circle.style.width; | |
| circle.style.left = `${Math.random() * 80 + 10}%`; | |
| circle.style.top = `${Math.random() * 80 + 10}%`; | |
| circle.style.filter = 'blur(2px)'; | |
| aiImage.appendChild(circle); | |
| } | |
| // Add central robot icon | |
| const robotIcon = document.createElement('i'); | |
| robotIcon.className = 'fas fa-robot text-7xl text-white/80 relative z-10'; | |
| aiImage.appendChild(robotIcon); | |
| // Add some connecting lines | |
| for (let i = 0; i < 5; i++) { | |
| const line = document.createElement('div'); | |
| line.className = 'absolute bg-white/20 h-0.5 rounded-full'; | |
| line.style.width = `${Math.random() * 100 + 50}px`; | |
| line.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| line.style.left = '50%'; | |
| line.style.top = '50%'; | |
| line.style.transformOrigin = '0 0'; | |
| aiImage.appendChild(line); | |
| } | |
| } | |
| // Save AI button | |
| saveBtn.addEventListener('click', function() { | |
| showNotification(`${aiName.textContent} has been saved to your AI collection!`, 'success'); | |
| }); | |
| // Export AI button | |
| exportBtn.addEventListener('click', function() { | |
| showNotification(`Export options for ${aiName.textContent} will be available soon!`, 'info'); | |
| }); | |
| // New AI button | |
| newAiBtn.addEventListener('click', function() { | |
| result.classList.add('hidden'); | |
| previewContent.classList.remove('hidden'); | |
| aiPrompt.value = ''; | |
| charCount.textContent = '0/200'; | |
| // Reset selections | |
| aiTypeBtns.forEach(b => b.classList.remove('bg-purple-600', 'border-purple-400')); | |
| personalityBtns.forEach(b => b.classList.remove('bg-purple-600', 'border-purple-400')); | |
| selectedType = ''; | |
| selectedPersonality = ''; | |
| updatePreview(); | |
| // Scroll to top | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Show notification | |
| function showNotification(message, type) { | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed bottom-6 right-6 px-6 py-3 rounded-lg shadow-lg flex items-center ${ | |
| type === 'error' ? 'bg-red-500' : | |
| type === 'success' ? 'bg-green-500' : 'bg-blue-500' | |
| }`; | |
| notification.innerHTML = ` | |
| <i class="fas ${ | |
| type === 'error' ? 'fa-exclamation-circle' : | |
| type === 'success' ? 'fa-check-circle' : 'fa-info-circle' | |
| } mr-2"></i> | |
| <span>${message}</span> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.style.transition = 'opacity 0.5s'; | |
| notification.style.opacity = '0'; | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 500); | |
| }, 3000); | |
| } | |
| }); | |
| </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=christechtalk/ai-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |