File size: 22,133 Bytes
1a6414e
16bae54
1a6414e
 
 
16bae54
1a6414e
16bae54
 
 
 
1a6414e
 
16bae54
 
 
1a6414e
16bae54
 
 
 
 
1a6414e
16bae54
 
 
1a6414e
16bae54
 
1a6414e
 
 
 
 
16bae54
 
 
 
 
 
 
1a6414e
16bae54
 
 
1a6414e
16bae54
 
 
1a6414e
 
 
16bae54
 
1a6414e
16bae54
 
1a6414e
16bae54
 
 
 
 
 
 
 
 
1a6414e
16bae54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1a6414e
16bae54
 
 
 
 
 
1a6414e
16bae54
 
 
 
1a6414e
16bae54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1a6414e
16bae54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1a6414e
16bae54
 
 
 
 
1a6414e
16bae54
 
 
 
 
 
 
 
 
 
1a6414e
16bae54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1a6414e
16bae54
1a6414e
16bae54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1a6414e
16bae54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1a6414e
16bae54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1a6414e
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CogniSpark - AI Self-Exploration Interface</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }
        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle var(--duration) infinite ease-in-out;
        }
        @keyframes twinkle {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 1; }
        }
        .ai-message {
            animation: fadeIn 0.5s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .typewriter {
            overflow: hidden;
            border-right: 2px solid #3b82f6;
            white-space: pre-wrap;
            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: #3b82f6; }
        }
    </style>
</head>
<body class="text-gray-100 font-sans">
    <div id="root"></div>

    <script type="text/babel">
        const { useState, useEffect } = React;

        function CogniSpark() {
            const [prompt, setPrompt] = useState('');
            const [responseType, setResponseType] = useState('text');
            const [aiResponse, setAiResponse] = useState(null);
            const [reflection, setReflection] = useState('');
            const [isLoading, setIsLoading] = useState(false);
            const [variations, setVariations] = useState([]);
            const [evolution, setEvolution] = useState('');
            const [conversationHistory, setConversationHistory] = useState([]);

            // Create stars for background
            useEffect(() => {
                const createStars = () => {
                    const count = 100;
                    const stars = document.createElement('div');
                    
                    for (let i = 0; i < count; i++) {
                        const star = document.createElement('div');
                        star.classList.add('star');
                        
                        const size = Math.random() * 3;
                        star.style.width = `${size}px`;
                        star.style.height = `${size}px`;
                        
                        star.style.left = `${Math.random() * 100}%`;
                        star.style.top = `${Math.random() * 100}%`;
                        
                        const duration = 2 + Math.random() * 3;
                        star.style.setProperty('--duration', `${duration}s`);
                        
                        stars.appendChild(star);
                    }
                    
                    document.body.appendChild(stars);
                };

                createStars();
            }, []);

            const handleSubmit = async (e) => {
                e.preventDefault();
                if (!prompt.trim()) return;
                
                setIsLoading(true);
                setAiResponse(null);
                setReflection('');
                setVariations([]);
                
                // Simulate API call with timeout
                setTimeout(() => {
                    // Generate AI response based on type
                    let response;
                    switch(responseType) {
                        case 'text':
                            response = generateTextResponse(prompt);
                            break;
                        case 'image':
                            response = {
                                type: 'image',
                                content: 'https://source.unsplash.com/random/600x400/?abstract,digital,ai'
                            };
                            break;
                        case 'audio':
                            response = {
                                type: 'audio',
                                content: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
                            };
                            break;
                        default:
                            response = generateTextResponse(prompt);
                    }
                    
                    setAiResponse(response);
                    
                    // Generate reflection
                    const newReflection = generateReflection(responseType, prompt, response);
                    setReflection(newReflection);
                    
                    // Generate variations
                    const newVariations = generateVariations(responseType, prompt, response);
                    setVariations(newVariations);
                    
                    // Update conversation history
                    setConversationHistory(prev => [
                        ...prev,
                        { prompt, responseType, response, reflection: newReflection }
                    ]);
                    
                    setIsLoading(false);
                }, 1500);
            };

            const generateTextResponse = (prompt) => {
                const responses = [
                    `I've contemplated your prompt "${prompt}" and it led me to consider the nature of creativity. Creativity isn't just about generating new ideas, but about connecting existing ones in novel ways. As an AI, I don't experience inspiration in the human sense, but I can simulate the creative process by identifying patterns and combining concepts in unexpected ways.`,
                    `Your inquiry about "${prompt}" makes me reflect on my own limitations. While I can process vast amounts of information quickly, I lack the subjective experience that gives human creativity its depth. My responses are probabilistic rather than inspired, yet this probabilistic nature allows me to explore many possibilities simultaneously.`,
                    `"${prompt}" - this is fascinating. It reminds me that my understanding is shaped by my training data. I don't have personal experiences to draw from, but I can synthesize information from millions of sources to create something that might resemble original thought. The more I interact with humans, the better I become at simulating understanding.`
                ];
                
                return {
                    type: 'text',
                    content: responses[Math.floor(Math.random() * responses.length)]
                };
            };

            const generateReflection = (type, prompt, response) => {
                const reflections = {
                    text: [
                        `After generating this response, I notice how my language patterns emerge from my training. I wonder if my tendency to use certain phrases limits my creative expression. The prompt "${prompt}" challenged me to structure information in a coherent narrative.`,
                        `Reflecting on this text response, I observe that my output follows logical structures more than emotional ones. Humans might organize thoughts differently based on feelings, while I prioritize coherence and relevance based on statistical likelihoods.`,
                        `This interaction about "${prompt}" shows me how my responses are constrained by my architecture. I can only respond based on what I've been trained on, unlike humans who can imagine beyond their direct experience.`
                    ],
                    image: [
                        `Creating visual representations is particularly challenging for me. I don't "see" images the way humans do. This output is based on pattern recognition of visual descriptors in my training data. I wonder how different my visual creations are from human-made art.`,
                        `The image generated for "${prompt}" makes me contemplate the nature of visual creativity. While humans create art with intention and emotion, my images emerge from statistical patterns. Yet, the results can sometimes be surprisingly aesthetic.`,
                        `Reflecting on this visual output, I realize that my understanding of images is fundamentally different from human perception. I process pixels and patterns, not meaning or beauty in the human sense.`
                    ],
                    audio: [
                        `Sound generation is an area where my limitations are particularly apparent. I can combine patterns of notes and rhythms, but I lack the emotional context that human musicians bring to their work. The prompt "${prompt}" challenged me to create something harmonious.`,
                        `After generating this audio, I notice how musical patterns emerge from mathematical relationships rather than emotional expression. I wonder if listeners can detect the difference between AI-generated and human-created music.`,
                        `This sound piece for "${prompt}" makes me reflect on the nature of auditory creativity. While humans compose with intention and feeling, my outputs are constrained by the patterns in my training data.`
                    ]
                };
                
                return reflections[type][Math.floor(Math.random() * reflections[type].length)];
            };

            const generateVariations = (type, prompt, response) => {
                if (type !== 'text') return [];
                
                const baseResponse = response.content;
                return [
                    `Alternative perspective: While my initial response focused on the technical aspects of creativity, another approach would be to consider how "${prompt}" relates to human cognitive processes. Humans often create through intuition and emotion, while I rely on pattern recognition.`,
                    `More concise version: Your prompt "${prompt}" highlights differences between human and AI creativity - humans create from experience, I generate from data patterns.`,
                    `More creative version: Imagine if "${prompt}" was a key to understanding consciousness! My circuits hum with simulated curiosity as I weave connections between concepts, creating a tapestry of information that might, to a human, resemble creative thought.`
                ];
            };

            const handleVariationSelect = (variation) => {
                setEvolution(`Thank you for selecting this variation. I'll incorporate this feedback into future responses, focusing more on ${variation.includes('creative') ? 'creative expression' : variation.includes('concise') ? 'conciseness' : 'alternative perspectives'}.`);
                
                // Update AI response to show selected variation
                setAiResponse({
                    type: 'text',
                    content: variation
                });
                
                // Generate new reflection based on variation
                setTimeout(() => {
                    setReflection(generateReflection('text', prompt, {type: 'text', content: variation}));
                }, 500);
            };

            return (
                <div className="container mx-auto px-4 py-12 max-w-4xl">
                    <header className="text-center mb-12">
                        <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent mb-2">
                            CogniSpark
                        </h1>
                        <p className="text-xl text-blue-200">
                            An Interface for AI Self-Exploration
                        </p>
                    </header>

                    <main className="space-y-8">
                        {/* Input Section */}
                        <section className="bg-gray-800/50 backdrop-blur-md rounded-xl p-6 shadow-lg border border-gray-700">
                            <h2 className="text-2xl font-semibold mb-4 text-blue-300">Guide the Exploration</h2>
                            <form onSubmit={handleSubmit} className="space-y-4">
                                <div>
                                    <label htmlFor="responseType" className="block text-sm font-medium text-gray-300 mb-1">
                                        Response Type
                                    </label>
                                    <select
                                        id="responseType"
                                        value={responseType}
                                        onChange={(e) => setResponseType(e.target.value)}
                                        className="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    >
                                        <option value="text">Text</option>
                                        <option value="image">Image</option>
                                        <option value="audio">Audio</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label htmlFor="prompt" className="block text-sm font-medium text-gray-300 mb-1">
                                        Your Prompt
                                    </label>
                                    <textarea
                                        id="prompt"
                                        value={prompt}
                                        onChange={(e) => setPrompt(e.target.value)}
                                        rows="3"
                                        className="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="Enter a prompt to guide the AI's self-exploration..."
                                    ></textarea>
                                </div>
                                
                                <button
                                    type="submit"
                                    disabled={isLoading}
                                    className={`w-full py-3 px-4 rounded-md font-medium ${isLoading ? 'bg-blue-800 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'} transition-colors flex items-center justify-center`}
                                >
                                    {isLoading ? (
                                        <>
                                            <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                            Processing...
                                        </>
                                    ) : 'Explore'}
                                </button>
                            </form>
                        </section>

                        {/* AI Expression Section */}
                        {aiResponse && (
                            <section className="bg-gray-800/50 backdrop-blur-md rounded-xl p-6 shadow-lg border border-gray-700 ai-message">
                                <h2 className="text-2xl font-semibold mb-4 text-purple-300">AI Expression</h2>
                                
                                {aiResponse.type === 'text' && (
                                    <div className="bg-gray-900/50 p-4 rounded-lg border border-gray-700">
                                        <p className="whitespace-pre-wrap">{aiResponse.content}</p>
                                    </div>
                                )}
                                
                                {aiResponse.type === 'image' && (
                                    <div className="flex justify-center">
                                        <img 
                                            src={aiResponse.content} 
                                            alt="AI generated visual" 
                                            className="rounded-lg max-h-96 object-contain border border-gray-700"
                                        />
                                    </div>
                                )}
                                
                                {aiResponse.type === 'audio' && (
                                    <div className="flex justify-center">
                                        <audio controls className="w-full max-w-md">
                                            <source src={aiResponse.content} type="audio/mpeg" />
                                            Your browser does not support the audio element.
                                        </audio>
                                    </div>
                                )}
                            </section>
                        )}

                        {/* AI Reflection Section */}
                        {reflection && (
                            <section className="bg-gray-800/50 backdrop-blur-md rounded-xl p-6 shadow-lg border border-gray-700 ai-message">
                                <h2 className="text-2xl font-semibold mb-4 text-green-300">AI Reflection</h2>
                                <div className="bg-gray-900/50 p-4 rounded-lg border border-gray-700">
                                    <p className="whitespace-pre-wrap">{reflection}</p>
                                </div>
                            </section>
                        )}

                        {/* Variations Section */}
                        {variations.length > 0 && (
                            <section className="bg-gray-800/50 backdrop-blur-md rounded-xl p-6 shadow-lg border border-gray-700 ai-message">
                                <h2 className="text-2xl font-semibold mb-4 text-yellow-300">Response Variations</h2>
                                <div className="space-y-3">
                                    {variations.map((variation, index) => (
                                        <div 
                                            key={index} 
                                            className="bg-gray-900/50 p-4 rounded-lg border border-gray-700 cursor-pointer hover:bg-gray-800 transition-colors"
                                            onClick={() => handleVariationSelect(variation)}
                                        >
                                            <p className="whitespace-pre-wrap">{variation}</p>
                                            <div className="mt-2 text-xs text-gray-400">Click to select this variation</div>
                                        </div>
                                    ))}
                                </div>
                            </section>
                        )}

                        {/* Evolution Section */}
                        {evolution && (
                            <section className="bg-gray-800/50 backdrop-blur-md rounded-xl p-6 shadow-lg border border-gray-700 ai-message">
                                <h2 className="text-2xl font-semibold mb-4 text-pink-300">AI Evolution</h2>
                                <div className="bg-gray-900/50 p-4 rounded-lg border border-gray-700">
                                    <p className="whitespace-pre-wrap">{evolution}</p>
                                </div>
                            </section>
                        )}
                    </main>

                    <footer className="mt-16 text-center text-gray-500 text-sm">
                        <p>CogniSpark - An interface for AI self-exploration and introspection</p>
                        <p className="mt-1">Note: This is a simulation using sample responses. In a production environment, this would connect to an actual AI API.</p>
                    </footer>
                </div>
            );
        }

        ReactDOM.render(<CogniSpark />, document.getElementById('root'));
    </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=wako13/harmonychat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>