Spaces:
Running
Running
File size: 23,600 Bytes
33155bb | 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 396 397 398 399 400 401 402 403 404 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thought Interpreter</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>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
background-color: #f8f9fa;
color: #333;
transition: background-color 0.5s ease;
min-height: 100vh;
}
.title-font {
font-family: 'Playfair Display', serif;
}
.fade-in {
animation: fadeIn 1.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.interpretation-card {
transition: all 0.3s ease;
transform: translateY(20px);
opacity: 0;
}
.interpretation-card.show {
transform: translateY(0);
opacity: 1;
}
.music-control {
transition: all 0.3s ease;
}
.music-control:hover {
transform: scale(1.1);
}
textarea {
resize: none;
min-height: 120px;
}
.bg-gradient {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
</style>
</head>
<body class="bg-gradient">
<div class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Header -->
<header class="text-center mb-12 fade-in">
<h1 class="title-font text-4xl md:text-5xl font-bold text-gray-800 mb-4">Thought Interpreter</h1>
<p class="text-lg text-gray-600">Share your thought and discover its hidden dimensions</p>
<!-- Music Control -->
<div class="mt-6 flex justify-center items-center space-x-4">
<button id="musicToggle" class="music-control bg-white p-3 rounded-full shadow-md hover:shadow-lg">
<i class="fas fa-music text-purple-600"></i>
</button>
<span id="musicStatus" class="text-sm text-gray-600">Background music: Off</span>
<audio id="ambientMusic" loop>
<source src="https://assets.mixkit.co/music/preview/mixkit-forest-flow-1380.mp3" type="audio/mpeg">
</audio>
</div>
</header>
<!-- Main Content -->
<main>
<!-- Input Section -->
<section class="mb-12 fade-in">
<div class="bg-white rounded-xl shadow-md p-6 md:p-8">
<h2 class="title-font text-2xl font-semibold text-gray-800 mb-4">What's on your mind?</h2>
<textarea id="thoughtInput" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Type your thought here..."></textarea>
<div class="flex justify-between items-center mt-4">
<span id="charCount" class="text-sm text-gray-500">0/200 characters</span>
<button id="interpretBtn" class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
Understand Me
</button>
</div>
</div>
</section>
<!-- Results Section (Initially Hidden) -->
<section id="resultsSection" class="hidden">
<h2 class="title-font text-2xl md:text-3xl font-semibold text-gray-800 mb-6 text-center">Your Thought Interpreted</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Rational Interpretation -->
<div id="rationalCard" class="interpretation-card bg-white rounded-xl shadow-md p-6 border-t-4 border-blue-500">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-3">
<i class="fas fa-brain text-blue-600"></i>
</div>
<h3 class="title-font text-xl font-semibold text-gray-800">Rational</h3>
</div>
<p id="rationalText" class="text-gray-700">Your logical interpretation will appear here...</p>
</div>
<!-- Emotional Interpretation -->
<div id="emotionalCard" class="interpretation-card bg-white rounded-xl shadow-md p-6 border-t-4 border-red-500">
<div class="flex items-center mb-4">
<div class="bg-red-100 p-3 rounded-full mr-3">
<i class="fas fa-heart text-red-600"></i>
</div>
<h3 class="title-font text-xl font-semibold text-gray-800">Emotional</h3>
</div>
<p id="emotionalText" class="text-gray-700">Your emotional interpretation will appear here...</p>
</div>
<!-- Poetic Interpretation -->
<div id="poeticCard" class="interpretation-card bg-white rounded-xl shadow-md p-6 border-t-4 border-yellow-500">
<div class="flex items-center mb-4">
<div class="bg-yellow-100 p-3 rounded-full mr-3">
<i class="fas fa-feather-alt text-yellow-600"></i>
</div>
<h3 class="title-font text-xl font-semibold text-gray-800">Poetic</h3>
</div>
<p id="poeticText" class="text-gray-700">Your poetic interpretation will appear here...</p>
</div>
</div>
<div class="text-center mt-8">
<button id="resetBtn" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition duration-300">
Start Over
</button>
</div>
</section>
</main>
<!-- Footer -->
<footer class="text-center mt-16 text-sm text-gray-500 fade-in">
<p>All interpretations are generated in your browser. No data is collected or stored.</p>
<p class="mt-2">© 2023 Thought Interpreter</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM Elements
const thoughtInput = document.getElementById('thoughtInput');
const interpretBtn = document.getElementById('interpretBtn');
const charCount = document.getElementById('charCount');
const resultsSection = document.getElementById('resultsSection');
const rationalText = document.getElementById('rationalText');
const emotionalText = document.getElementById('emotionalText');
const poeticText = document.getElementById('poeticText');
const resetBtn = document.getElementById('resetBtn');
const musicToggle = document.getElementById('musicToggle');
const musicStatus = document.getElementById('musicStatus');
const ambientMusic = document.getElementById('ambientMusic');
// Interpretation databases
const rationalResponses = {
keywords: {
'work': ["This seems to be related to productivity and career aspirations.", "Work-related thoughts often stem from a desire for achievement or security.", "Professional concerns typically involve weighing costs and benefits."],
'love': ["Romantic considerations involve complex social and biological factors.", "Relationships can be analyzed through attachment theory frameworks.", "Love is a powerful motivator with measurable psychological effects."],
'future': ["Future-oriented thinking engages the prefrontal cortex's planning functions.", "Anticipating outcomes is a key survival mechanism in humans.", "Projection into the future involves probabilistic reasoning."],
'past': ["Nostalgia activates the brain's memory consolidation pathways.", "Reflection on past events helps with pattern recognition.", "Historical analysis can inform present decision-making."],
'money': ["Financial considerations trigger risk-assessment neural pathways.", "Economic decisions involve opportunity cost calculations.", "Monetary concerns often relate to Maslow's hierarchy of needs."],
'family': ["Kin relationships are fundamental to human social structures.", "Family dynamics follow established psychological patterns.", "Genetic and environmental factors shape familial bonds."],
'friend': ["Friendship satisfies the human need for social connection.", "Peer relationships follow reciprocity principles.", "Social bonds have measurable health benefits."],
'time': ["Time perception is a complex neurological phenomenon.", "Temporal concerns relate to resource allocation strategies.", "Chronological thinking is uniquely human."],
'dream': ["Dream analysis reveals subconscious processing mechanisms.", "Sleep states facilitate memory consolidation.", "Aspirations follow goal-setting theory principles."],
'change': ["Change management involves cognitive adaptation processes.", "Transition periods activate stress response systems.", "Neurological plasticity enables behavioral modification."]
},
generic: [
"From a logical perspective, this thought appears to be about fundamental human needs.",
"Rational analysis suggests this relates to basic decision-making processes.",
"This seems to involve cognitive processes common to most individuals.",
"A systematic approach would examine this through established psychological frameworks.",
"Objectively speaking, this thought pattern follows predictable neural pathways."
]
};
const emotionalResponses = {
emotions: {
'happy': ["Your joy radiates from this thought like sunshine!", "This happiness speaks to your fulfilled spirit.", "What a beautiful expression of contentment!"],
'sad': ["This sorrow weighs heavy on your heart.", "Your pain is valid and understandable.", "Grief moves through you like a slow river."],
'angry': ["This fury burns with righteous energy!", "Your anger points to something that needs to change.", "Strong emotions demand to be heard."],
'fear': ["This anxiety wraps around you like fog.", "Your fear protects you, but don't let it control you.", "Uncertainty can be terrifying, but also transformative."],
'love': ["Your heart overflows with tender affection!", "This love connects you to something greater.", "What a powerful expression of connection!"],
'confused': ["This uncertainty leaves you feeling untethered.", "Not knowing can be its own kind of wisdom.", "The maze of your mind has many turns."],
'hopeful': ["Your optimism shines like a beacon!", "This hope carries the seeds of possibility.", "What wonderful anticipation fills your spirit!"],
'lonely': ["This isolation feels vast and empty.", "Your longing for connection is deeply human.", "Even in solitude, you're part of something larger."],
'excited': ["Your enthusiasm bubbles over with energy!", "This thrill courses through you like electricity!", "What vibrant anticipation you're experiencing!"],
'peaceful': ["This serenity flows through you like calm water.", "Your tranquility is a rare and precious gift.", "What beautiful stillness you've found."]
},
generic: [
"This touches something deep within your emotional core.",
"Your feelings about this are valid and important.",
"This thought carries significant emotional weight.",
"There's profound feeling behind these words.",
"Emotionally, this resonates on multiple levels."
]
};
const poeticResponses = {
fragments: {
start: [
"Like a whisper of dawn,",
"As autumn leaves dancing,",
"With the patience of mountains,",
"Like a river carving stone,",
"As stars tracing ancient paths,",
"With the fragility of spider's silk,",
"Like fire transforming all it touches,",
"As tides obeying the moon's call,",
"With the persistence of roots through rock,",
"Like a melody half-remembered,"
],
middle: [
"your thought lingers",
"your words take flight",
"the meaning unfolds",
"truth reveals itself",
"understanding blossoms",
"the heart responds",
"silence speaks volumes",
"light finds its way",
"shadows grow shorter",
"time stands still"
],
end: [
"in the garden of the mind.",
"between what is and what could be.",
"where all rivers meet the sea.",
"as the world turns toward morning.",
"in the space between breaths.",
"while the universe listens.",
"beneath the surface of things.",
"where endings become beginnings.",
"as the veil grows thin.",
"in the language of the soul."
]
},
full: [
"Your thought is a feather drifting on the wind of consciousness.",
"These words form constellations in the night sky of your mind.",
"Like raindrops on a pond, your idea ripples outward.",
"This is the song your heart sings when no one is listening.",
"Your thought blooms like a flower in the desert after rain.",
"These words are footprints in the sand of your psyche.",
"Like a key turning in a long-forgotten lock, your idea opens doors.",
"Your thought is a bridge between worlds seen and unseen.",
"This is the color of your mind at this exact moment.",
"Your words weave tapestries in the loom of understanding."
]
};
// Emotion detection words
const emotionWords = {
'happy': ['happy', 'joy', 'delight', 'pleasure', 'cheer', 'glad', 'content'],
'sad': ['sad', 'grief', 'sorrow', 'mourn', 'heartbreak', 'melancholy', 'blue'],
'angry': ['angry', 'mad', 'fury', 'rage', 'irritated', 'frustrated', 'annoyed'],
'fear': ['fear', 'scared', 'afraid', 'anxious', 'worried', 'nervous', 'terror'],
'love': ['love', 'adore', 'cherish', 'passion', 'affection', 'devotion', 'romance'],
'confused': ['confused', 'uncertain', 'doubt', 'puzzled', 'bewildered', 'perplexed', 'mystified'],
'hopeful': ['hope', 'optimistic', 'expect', 'anticipate', 'wish', 'faith', 'confidence'],
'lonely': ['lonely', 'alone', 'isolated', 'abandoned', 'forsaken', 'solitary', 'detached'],
'excited': ['excited', 'thrilled', 'eager', 'enthused', 'pumped', 'elated', 'animated'],
'peaceful': ['peace', 'calm', 'serene', 'tranquil', 'relaxed', 'placid', 'composed']
};
// Music control
let musicPlaying = false;
musicToggle.addEventListener('click', function() {
if (musicPlaying) {
ambientMusic.pause();
musicStatus.textContent = 'Background music: Off';
musicToggle.innerHTML = '<i class="fas fa-music text-purple-600"></i>';
} else {
ambientMusic.play();
musicStatus.textContent = 'Background music: On';
musicToggle.innerHTML = '<i class="fas fa-pause text-purple-600"></i>';
}
musicPlaying = !musicPlaying;
});
// Character count and button enable/disable
thoughtInput.addEventListener('input', function() {
const count = this.value.length;
charCount.textContent = `${count}/200 characters`;
interpretBtn.disabled = count < 10 || count > 200;
});
// Interpretation function
interpretBtn.addEventListener('click', function() {
const thought = thoughtInput.value.toLowerCase();
// Generate Rational interpretation
let rationalInterpretation = generateRationalInterpretation(thought);
// Generate Emotional interpretation
let emotionalInterpretation = generateEmotionalInterpretation(thought);
// Generate Poetic interpretation
let poeticInterpretation = generatePoeticInterpretation();
// Display results
rationalText.textContent = rationalInterpretation;
emotionalText.textContent = emotionalInterpretation;
poeticText.textContent = poeticInterpretation;
// Show results section
resultsSection.classList.remove('hidden');
// Animate cards
setTimeout(() => {
document.getElementById('rationalCard').classList.add('show');
}, 200);
setTimeout(() => {
document.getElementById('emotionalCard').classList.add('show');
}, 400);
setTimeout(() => {
document.getElementById('poeticCard').classList.add('show');
}, 600);
// Scroll to results
setTimeout(() => {
resultsSection.scrollIntoView({ behavior: 'smooth' });
}, 800);
});
// Reset function
resetBtn.addEventListener('click', function() {
thoughtInput.value = '';
charCount.textContent = '0/200 characters';
interpretBtn.disabled = true;
resultsSection.classList.add('hidden');
// Reset cards animation
document.getElementById('rationalCard').classList.remove('show');
document.getElementById('emotionalCard').classList.remove('show');
document.getElementById('poeticCard').classList.remove('show');
// Scroll to top
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Helper functions
function generateRationalInterpretation(text) {
// Check for keywords
for (const [keyword, responses] of Object.entries(rationalResponses.keywords)) {
if (text.includes(keyword)) {
return responses[Math.floor(Math.random() * responses.length)];
}
}
// Fallback to generic
return rationalResponses.generic[Math.floor(Math.random() * rationalResponses.generic.length)];
}
function generateEmotionalInterpretation(text) {
// Detect emotion
let detectedEmotion = null;
for (const [emotion, words] of Object.entries(emotionWords)) {
for (const word of words) {
if (text.includes(word)) {
detectedEmotion = emotion;
break;
}
}
if (detectedEmotion) break;
}
// Use specific response if emotion detected
if (detectedEmotion && emotionalResponses.emotions[detectedEmotion]) {
const responses = emotionalResponses.emotions[detectedEmotion];
return responses[Math.floor(Math.random() * responses.length)];
}
// Fallback to generic
return emotionalResponses.generic[Math.floor(Math.random() * emotionalResponses.generic.length)];
}
function generatePoeticInterpretation() {
// 50% chance for full poem or constructed one
if (Math.random() > 0.5) {
return poeticResponses.full[Math.floor(Math.random() * poeticResponses.full.length)];
} else {
const start = poeticResponses.fragments.start[Math.floor(Math.random() * poeticResponses.fragments.start.length)];
const middle = poeticResponses.fragments.middle[Math.floor(Math.random() * poeticResponses.fragments.middle.length)];
const end = poeticResponses.fragments.end[Math.floor(Math.random() * poeticResponses.fragments.end.length)];
return `${start} ${middle} ${end}`;
}
}
});
</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=dhishooooom/interpretor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |