Spaces:
Running
Running
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> |