| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Creativity in the Age of AI</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| } |
| .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); |
| } |
| .ai-pulse { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { opacity: 0.8; } |
| 50% { opacity: 1; } |
| 100% { opacity: 0.8; } |
| } |
| .human-pulse { |
| animation: humanPulse 3s infinite; |
| } |
| @keyframes humanPulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| </style> |
| </head> |
| <body class="gradient-bg min-h-screen font-sans"> |
| <div class="container mx-auto px-4 py-12"> |
| |
| <header class="text-center mb-16"> |
| <h1 class="text-5xl md:text-6xl font-bold text-gray-800 mb-6"> |
| <span class="text-indigo-600">Creativity</span> in the |
| <span class="ai-pulse text-purple-600">Age of AI</span> |
| </h1> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Exploring what it means to be creative when machines can generate art. |
| </p> |
| </header> |
|
|
| |
| <section class="mb-20"> |
| <div class="bg-white rounded-2xl shadow-xl p-8 max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-6 flex items-center"> |
| <i class="fas fa-lightbulb text-yellow-400 mr-4"></i> |
| What is Creativity Now? |
| </h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div class="bg-indigo-50 rounded-xl p-6 card-hover"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-robot text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-indigo-800">AI Creativity</h3> |
| </div> |
| <p class="text-gray-700"> |
| AI can generate novel combinations, patterns, and outputs based on vast datasets. It excels at |
| <span class="font-medium text-indigo-600">recombination</span> and |
| <span class="font-medium text-indigo-600">variation</span> of existing ideas. |
| </p> |
| </div> |
| |
| <div class="bg-purple-50 rounded-xl p-6 card-hover human-pulse"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-heart text-purple-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-purple-800">Human Creativity</h3> |
| </div> |
| <p class="text-gray-700"> |
| Humans bring <span class="font-medium text-purple-600">intentionality</span>, |
| <span class="font-medium text-purple-600">emotional depth</span>, and |
| <span class="font-medium text-purple-600">contextual understanding</span> |
| that AI cannot replicate (yet). |
| </p> |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-gray-50 rounded-xl p-6"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">The New Creative Paradigm</h3> |
| <p class="text-gray-700 mb-4"> |
| In the AI age, creativity becomes less about raw output and more about: |
| </p> |
| <ul class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Meaningful curation</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Purposeful direction</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span>Emotional resonance</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-20"> |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12"> |
| <i class="fas fa-balance-scale-left mr-4 text-gray-500"></i> |
| The Creative Spectrum |
| </h2> |
| |
| <div class="max-w-4xl mx-auto"> |
| <div class="relative h-2 bg-gray-200 rounded-full mb-12"> |
| <div class="absolute left-0 right-0 h-full flex justify-between items-center px-4"> |
| <div class="bg-indigo-600 h-4 w-4 rounded-full"></div> |
| <div class="bg-purple-600 h-4 w-4 rounded-full"></div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <div class="bg-white p-6 rounded-xl shadow-md mb-6 card-hover"> |
| <h3 class="text-xl font-semibold text-indigo-800 mb-3">AI Strengths</h3> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-bolt text-yellow-500 mr-3 mt-1"></i> |
| <span>Rapid iteration and variation</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-database text-blue-500 mr-3 mt-1"></i> |
| <span>Vast knowledge synthesis</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-cogs text-gray-500 mr-3 mt-1"></i> |
| <span>Pattern recognition at scale</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> |
| <h3 class="text-xl font-semibold text-indigo-800 mb-3">AI Limitations</h3> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-exclamation-triangle text-red-500 mr-3 mt-1"></i> |
| <span>No true understanding or intent</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-heart-broken text-pink-500 mr-3 mt-1"></i> |
| <span>Lacks emotional authenticity</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-question text-gray-500 mr-3 mt-1"></i> |
| <span>Cannot ask why something matters</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div> |
| <div class="bg-white p-6 rounded-xl shadow-md mb-6 card-hover"> |
| <h3 class="text-xl font-semibold text-purple-800 mb-3">Human Strengths</h3> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-brain text-purple-500 mr-3 mt-1"></i> |
| <span>Conceptual thinking and abstraction</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-heart text-red-500 mr-3 mt-1"></i> |
| <span>Emotional intelligence</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-globe-americas text-green-500 mr-3 mt-1"></i> |
| <span>Cultural and contextual understanding</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover"> |
| <h3 class="text-xl font-semibold text-purple-800 mb-3">Human Limitations</h3> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-tired text-yellow-600 mr-3 mt-1"></i> |
| <span>Cognitive biases and blind spots</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-hourglass-half text-blue-500 mr-3 mt-1"></i> |
| <span>Limited working memory</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-bolt text-gray-500 mr-3 mt-1"></i> |
| <span>Slower at processing large datasets</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16"> |
| <div class="bg-white rounded-2xl shadow-xl p-8 max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-6 flex items-center"> |
| <i class="fas fa-crystal-ball text-teal-500 mr-4"></i> |
| The Future Creative Process |
| </h2> |
| |
| <div class="mb-8"> |
| <div class="relative pt-1"> |
| <div class="flex mb-2 items-center justify-between"> |
| <div> |
| <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200"> |
| Emerging Model |
| </span> |
| </div> |
| <div class="text-right"> |
| <span class="text-xs font-semibold inline-block text-teal-600"> |
| Human-AI Collaboration |
| </span> |
| </div> |
| </div> |
| <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200"> |
| <div style="width:75%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"></div> |
| </div> |
| </div> |
| |
| <p class="text-gray-700 mb-6"> |
| The most powerful creative work will come from <span class="font-medium text-teal-600">collaboration</span> between human intuition and AI capabilities: |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="bg-teal-50 p-4 rounded-lg"> |
| <div class="text-teal-600 mb-2"> |
| <i class="fas fa-user-edit text-2xl"></i> |
| </div> |
| <h4 class="font-semibold text-teal-800 mb-2">Human Initiates</h4> |
| <p class="text-sm text-gray-700"> |
| Define the creative vision, purpose, and emotional goals |
| </p> |
| </div> |
| |
| <div class="bg-teal-50 p-4 rounded-lg"> |
| <div class="text-teal-600 mb-2"> |
| <i class="fas fa-robot text-2xl"></i> |
| </div> |
| <h4 class="font-semibold text-teal-800 mb-2">AI Expands</h4> |
| <p class="text-sm text-gray-700"> |
| Generates variations, suggests alternatives, handles execution |
| </p> |
| </div> |
| |
| <div class="bg-teal-50 p-4 rounded-lg"> |
| <div class="text-teal-600 mb-2"> |
| <i class="fas fa-hands-helping text-2xl"></i> |
| </div> |
| <h4 class="font-semibold text-teal-800 mb-2">Human Curates</h4> |
| <p class="text-sm text-gray-700"> |
| Selects, refines, and adds meaning to the final output |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-exclamation-circle text-yellow-500 mt-1 mr-3"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-yellow-800">Key Insight</h4> |
| <p class="text-gray-700"> |
| Creativity in the AI age becomes more about <span class="font-medium">asking the right questions</span> than providing all the answers. The human role shifts from creator to creative director. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="max-w-2xl mx-auto"> |
| <div class="bg-white rounded-2xl shadow-xl p-8"> |
| <h2 class="text-2xl font-bold text-center text-gray-800 mb-6"> |
| <i class="fas fa-comment-dots text-blue-500 mr-3"></i> |
| Your Creative Perspective |
| </h2> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2" for="creativity"> |
| How do you see creativity evolving with AI? |
| </label> |
| <textarea |
| id="creativity" |
| rows="4" |
| class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" |
| placeholder="Share your thoughts..."></textarea> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2"> |
| Where do you see the most potential for human-AI creative collaboration? |
| </label> |
| <div class="space-y-2"> |
| <div class="flex items-center"> |
| <input id="art" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
| <label for="art" class="ml-2 block text-gray-700">Art and Design</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="writing" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
| <label for="writing" class="ml-2 block text-gray-700">Writing and Storytelling</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="music" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
| <label for="music" class="ml-2 block text-gray-700">Music Composition</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="science" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
| <label for="science" class="ml-2 block text-gray-700">Scientific Discovery</label> |
| </div> |
| </div> |
| </div> |
| |
| <button |
| id="submitBtn" |
| class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center" |
| onclick="submitReflection()"> |
| <i class="fas fa-paper-plane mr-2"></i> Share Your Perspective |
| </button> |
| |
| <div id="thankYou" class="hidden mt-4 p-4 bg-green-50 text-green-700 rounded-lg text-center"> |
| <i class="fas fa-check-circle text-green-500 text-2xl mb-2"></i> |
| <p>Thank you for sharing your thoughts on creativity in the AI age!</p> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <footer class="bg-gray-800 text-white py-8"> |
| <div class="container mx-auto px-4 text-center"> |
| <p class="mb-4"> |
| <i class="fas fa-brain mr-2"></i> |
| Creativity in the Age of AI - An Interactive Exploration |
| </p> |
| <div class="flex justify-center space-x-6 mb-4"> |
| <a href="#" class="text-gray-300 hover:text-white"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white"> |
| <i class="fab fa-linkedin text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| </div> |
| <p class="text-sm text-gray-400"> |
| © 2023 Exploring Human and Machine Creativity |
| </p> |
| </div> |
| </footer> |
|
|
| <script> |
| function submitReflection() { |
| const textarea = document.getElementById('creativity'); |
| const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked'); |
| const thankYou = document.getElementById('thankYou'); |
| const submitBtn = document.getElementById('submitBtn'); |
| |
| |
| if (textarea.value.trim() === '' && checkboxes.length === 0) { |
| alert('Please share your thoughts or select at least one option'); |
| return; |
| } |
| |
| |
| console.log('User reflection:', textarea.value); |
| checkboxes.forEach(cb => console.log('Selected:', cb.id)); |
| |
| |
| submitBtn.classList.add('hidden'); |
| thankYou.classList.remove('hidden'); |
| |
| |
| thankYou.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=spatialresearch/generative-age-creativity" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
