File size: 21,533 Bytes
dcebed4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a492e53
dcebed4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
<!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 -->
        <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>

        <!-- Interactive Definition Section -->
        <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>

        <!-- AI vs Human Creativity Comparison -->
        <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>

        <!-- The Future of Creativity -->
        <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>

        <!-- Interactive Reflection -->
        <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');
            
            // Simple validation
            if (textarea.value.trim() === '' && checkboxes.length === 0) {
                alert('Please share your thoughts or select at least one option');
                return;
            }
            
            // In a real app, you would send this data to a server
            console.log('User reflection:', textarea.value);
            checkboxes.forEach(cb => console.log('Selected:', cb.id));
            
            // Show thank you message
            submitBtn.classList.add('hidden');
            thankYou.classList.remove('hidden');
            
            // Scroll to thank you message
            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>