Spaces:

dhishooooom
/

interpretor

Running

App Files Files Community

dhishooooom commited on Jun 28, 2025

Commit

33155bb

verified ·

1 Parent(s): eee34af

A single-page website where users type a personal thought. When they click ‘Understand Me’, the site displays 3 interpretations: Rational, Emotional, and Poetic. These are generated using keyword-matching, emotion categories, and random combinations of prewritten responses in JavaScript. No backend, no AI, no data leaves the browser. Optional ambient background music and slow fade-in for drama. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +404 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Interpretor
-emoji: 📊
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: interpretor
+emoji: 🐳
+colorFrom: yellow
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,404 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>