Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Dialogue: Philosopher & Poet</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=Montserrat:wght@300;400;600&family=Crimson+Text:wght@400;600&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #f8f9fa; | |
| color: #333; | |
| } | |
| .philosopher-bubble { | |
| background-color: #e3f2fd; | |
| border-left: 5px solid #1976d2; | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .poet-bubble { | |
| background-color: #f3e5f5; | |
| border-left: 5px solid #8e24aa; | |
| font-family: 'Crimson Text', serif; | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #333; | |
| white-space: pre-wrap; | |
| margin: 0 auto; | |
| letter-spacing: .15em; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #333; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| 0% { opacity: 0; } | |
| 100% { opacity: 1; } | |
| } | |
| .scroll-container { | |
| scroll-behavior: smooth; | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(0, 150, 255, 0.5); | |
| } | |
| .research-badge { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| background-color: #4CAF50; | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); | |
| } | |
| .aphorism { | |
| border-top: 1px dashed #1976d2; | |
| padding-top: 8px; | |
| margin-top: 8px; | |
| font-style: italic; | |
| color: #1565c0; | |
| } | |
| .poem { | |
| background-color: rgba(255,255,255,0.7); | |
| padding: 12px; | |
| border-radius: 8px; | |
| margin-top: 8px; | |
| border-left: 3px solid #8e24aa; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-12 fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 font-serif">Dialogue of Minds</h1> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Where philosophy meets poetry in AI-powered conversation</p> | |
| <div class="mt-6 flex justify-center space-x-4"> | |
| <div class="flex items-center bg-blue-100 px-4 py-2 rounded-full"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> | |
| <span class="text-blue-800">Philosopher</span> | |
| </div> | |
| <div class="flex items-center bg-purple-100 px-4 py-2 rounded-full"> | |
| <div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div> | |
| <span class="text-purple-800">Poet</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Panel - Controls --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-lg p-6 h-fit sticky top-6"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-cogs mr-2 text-blue-500"></i> Dialogue Controls | |
| </h2> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Topic</label> | |
| <input type="text" id="topicInput" placeholder="Enter a topic (e.g. 'The nature of time')" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Dialogue Rounds (3-15)</label> | |
| <div class="flex items-center"> | |
| <input type="range" id="depthSlider" min="3" max="15" value="10" | |
| class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <span id="depthValue" class="ml-4 text-gray-700 font-medium">10</span> | |
| </div> | |
| </div> | |
| <button id="startDialogueBtn" | |
| class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 rounded-lg font-medium hover:from-blue-600 hover:to-purple-700 transition-all duration-300 flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Begin Dialogue | |
| </button> | |
| <button id="resetBtn" class="w-full mt-4 bg-gray-200 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-300 transition-all duration-300"> | |
| <i class="fas fa-redo mr-2"></i> Reset | |
| </button> | |
| </div> | |
| <div class="border-t pt-6"> | |
| <h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center"> | |
| <i class="fas fa-info-circle mr-2 text-blue-500"></i> About This Project | |
| </h3> | |
| <p class="text-gray-600 mb-4"> | |
| Witness a dynamic dialogue between an AI philosopher and poet as they research, debate, and synthesize ideas about your chosen topic. | |
| </p> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h4 class="font-bold text-blue-800 mb-2">How it works:</h4> | |
| <ol class="list-decimal list-inside text-blue-800 space-y-1"> | |
| <li>Enter any topic for discussion</li> | |
| <li>Set the number of dialogue rounds</li> | |
| <li>The AIs will research and discuss</li> | |
| <li>The Poet creates poems, the Philosopher aphorisms</li> | |
| <li>They'll synthesize their views in a final poem</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel - Dialogue --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Dialogue Header --> | |
| <div class="bg-gradient-to-r from-blue-600 to-purple-700 p-4 text-white"> | |
| <div class="flex justify-between items-center"> | |
| <h2 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-comments mr-2"></i> AI Dialogue | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <span id="roundCounter" class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Round: 0</span> | |
| <span id="statusIndicator" class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Ready</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dialogue Container --> | |
| <div id="dialogueContainer" class="p-4 h-96 overflow-y-auto scroll-container space-y-4"> | |
| <div class="text-center py-12 text-gray-400" id="emptyState"> | |
| <i class="fas fa-comment-slash text-4xl mb-4"></i> | |
| <p class="text-xl">No dialogue yet. Enter a topic and begin the conversation.</p> | |
| </div> | |
| </div> | |
| <!-- Final Poem Section (Initially Hidden) --> | |
| <div id="finalPoemSection" class="hidden border-t p-6 bg-gradient-to-br from-purple-50 to-blue-50"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-star mr-2 text-yellow-500"></i> Collaborative Poem | |
| </h3> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-feather"></i> | |
| </div> | |
| <span class="ml-3 text-gray-600">After thorough discussion, we present our unified perspective:</span> | |
| </div> | |
| <div id="finalPoem" class="italic text-gray-700 whitespace-pre-line poem text-lg"></div> | |
| <div class="mt-4 text-right text-sm text-gray-500"> | |
| <span id="sourcesCount">Synthesized from 12 research sources</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Persona Info Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6"> | |
| <div class="bg-blue-50 rounded-xl p-4 shadow relative"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="font-bold text-blue-800">The Philosopher</h3> | |
| </div> | |
| <p class="text-blue-800 mb-2"> | |
| A rational thinker who examines concepts through logic and historical philosophical frameworks. Provides: | |
| </p> | |
| <ul class="list-disc list-inside text-blue-700 text-sm space-y-1"> | |
| <li>Critical analysis of concepts</li> | |
| <li>Historical philosophical context</li> | |
| <li>Logical arguments and counterarguments</li> | |
| <li>Thought-provoking questions</li> | |
| <li>Wisdom in the form of aphorisms</li> | |
| </ul> | |
| </div> | |
| <div class="bg-purple-50 rounded-xl p-4 shadow relative"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-feather"></i> | |
| </div> | |
| <h3 class="font-bold text-purple-800">The Poet</h3> | |
| </div> | |
| <p class="text-purple-800 mb-2"> | |
| A creative soul who expresses ideas through metaphor and emotional resonance. Provides: | |
| </p> | |
| <ul class="list-disc list-inside text-purple-700 text-sm space-y-1"> | |
| <li>Emotional and sensory perspectives</li> | |
| <li>Metaphorical interpretations</li> | |
| <li>Poetic responses to concepts</li> | |
| <li>Creative synthesis of ideas</li> | |
| <li>Periodic poetic compositions</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const topicInput = document.getElementById('topicInput'); | |
| const depthSlider = document.getElementById('depthSlider'); | |
| const depthValue = document.getElementById('depthValue'); | |
| const startDialogueBtn = document.getElementById('startDialogueBtn'); | |
| const resetBtn = document.getElementById('resetBtn'); | |
| const dialogueContainer = document.getElementById('dialogueContainer'); | |
| const emptyState = document.getElementById('emptyState'); | |
| const roundCounter = document.getElementById('roundCounter'); | |
| const statusIndicator = document.getElementById('statusIndicator'); | |
| const finalPoemSection = document.getElementById('finalPoemSection'); | |
| const finalPoem = document.getElementById('finalPoem'); | |
| const sourcesCount = document.getElementById('sourcesCount'); | |
| // Update depth value display | |
| depthSlider.addEventListener('input', function() { | |
| depthValue.textContent = this.value; | |
| }); | |
| // Sample research sources (simulated) | |
| const sampleSources = [ | |
| "Stanford Encyclopedia of Philosophy", | |
| "Internet Encyclopedia of Philosophy", | |
| "Poetry Foundation archives", | |
| "Academic papers on the topic", | |
| "Historical philosophical texts", | |
| "Literary analysis databases", | |
| "Cultural studies journals", | |
| "Psychological research", | |
| "Anthropological studies", | |
| "Mythological references", | |
| "Contemporary media analysis", | |
| "Art criticism archives" | |
| ]; | |
| // Sample dialogue data with more depth | |
| const generateDialogue = (topic) => { | |
| const baseResponses = { | |
| 'love': { | |
| philosopher: [ | |
| { | |
| research: "After examining Plato's Symposium and contemporary attachment theory...", | |
| analysis: "Love manifests as both an existential drive and social construct. The ancient Greeks distinguished between eros, philia, and agape - categories that still inform modern understanding.", | |
| aphorism: "To love is to simultaneously find and lose oneself in another." | |
| }, | |
| { | |
| research: "Reviewing Schopenhauer's metaphysics of love...", | |
| analysis: "The will-to-life expresses itself through romantic attraction, creating the illusion that personal choice governs what is essentially biological imperative.", | |
| aphorism: "Love is nature's trick to ensure the continuation of the species." | |
| }, | |
| { | |
| research: "Considering Sartre's existentialist perspective...", | |
| analysis: "Love represents an endless tension between the desire to possess the other and the impossibility of truly knowing them. Each lover becomes both subject and object in this dynamic.", | |
| aphorism: "In love, we are both jailer and prisoner to each other." | |
| } | |
| ], | |
| poet: [ | |
| { | |
| research: "Exploring love poetry from Sappho to Rumi...", | |
| reflection: "Across cultures and centuries, love remains the most fertile ground for poetic expression, though each age dresses it in different metaphors.", | |
| poem: "Your name is a secret whispered by the wind,\nA language only my heart understands,\nWritten in the oldest alphabet of all." | |
| }, | |
| { | |
| research: "Analyzing sonnet structures and free verse love poems...", | |
| reflection: "The container shapes the content - whether in strict iambic pentameter or unbound free verse, love demands expression.", | |
| poem: "If love were a color,\nIt would be the gold of morning light\nThrough autumn leaves,\nFleeting and eternal all at once." | |
| }, | |
| { | |
| research: "Studying contemporary love poetry movements...", | |
| reflection: "Modern love poetry increasingly embraces imperfection and transience, moving beyond idealized romance.", | |
| poem: "We are two flawed sentences\nTrying to form a perfect paragraph,\nOur syntax messy but sincere,\nOur punctuation marks kisses." | |
| } | |
| ] | |
| }, | |
| 'time': { | |
| philosopher: [ | |
| { | |
| research: "Examining Augustine's concept of time...", | |
| analysis: "Time exists only in the mind's apprehension of it - the present of things past (memory), present of things present (attention), and present of things future (expectation).", | |
| aphorism: "We measure time, but time measures us." | |
| }, | |
| { | |
| research: "Analyzing McTaggart's unreality of time...", | |
| analysis: "The A-series (past, present, future) and B-series (earlier than, simultaneous with, later than) reveal fundamental paradoxes in our experience of temporal flow.", | |
| aphorism: "The present is the knife-edge between two eternities." | |
| }, | |
| { | |
| research: "Considering Heidegger's being and time...", | |
| analysis: "Dasein's temporality reveals that we are not merely in time, but that our very being is temporal through-and-through.", | |
| aphorism: "To be human is to be haunted by time's passage." | |
| } | |
| ], | |
| poet: [ | |
| { | |
| research: "Exploring poetic treatments of time from Shakespeare to Eliot...", | |
| reflection: "Poets have always wrestled with time's dual nature as both destroyer and creator.", | |
| poem: "Time is the river,\nI the leaf upon its surface,\nBoth carried and drowning\nIn the same relentless current." | |
| }, | |
| { | |
| research: "Analyzing haiku and other brief poetic forms...", | |
| reflection: "The shortest poems often capture time's essence most powerfully - a single moment made eternal.", | |
| poem: "Clock hands move,\nThe spider rebuilds her web -\nAll is change and constancy." | |
| }, | |
| { | |
| research: "Studying contemporary time-themed poetry...", | |
| reflection: "Modern poets increasingly explore time's subjective nature and digital-age distortions.", | |
| poem: "We live in the parentheses\nBetween notifications,\nOur attention spans\nMeasured in heartbeats\nAnd loading screens." | |
| } | |
| ] | |
| }, | |
| 'happiness': { | |
| philosopher: [ | |
| { | |
| research: "Reviewing Aristotle's eudaimonia...", | |
| analysis: "True happiness consists not in pleasure but in virtuous activity of the soul in accordance with reason - the fulfillment of human potential.", | |
| aphorism: "Happiness is not a state to achieve but an activity to practice." | |
| }, | |
| { | |
| research: "Examining Stoic and Epicurean approaches...", | |
| analysis: "Where Epicurus advocated pleasure (properly understood) as the goal, the Stoics emphasized virtue as the only true good, with happiness as its byproduct.", | |
| aphorism: "Expect nothing and you'll never be disappointed; appreciate everything and you'll always be content." | |
| }, | |
| { | |
| research: "Analyzing contemporary positive psychology...", | |
| analysis: "Modern research confirms ancient wisdom - happiness stems from relationships, meaningful work, and gratitude more than material circumstances.", | |
| aphorism: "Happiness grows when shared but shrinks when pursued." | |
| } | |
| ], | |
| poet: [ | |
| { | |
| research: "Exploring poetic depictions of joy from Blake to Oliver...", | |
| reflection: "Happiness in poetry often appears in small, unexpected moments rather than grand declarations.", | |
| poem: "Happiness is the weight\nOf a ripe peach in your palm,\nThe juice that runs\nWhen you dare to bite deep." | |
| }, | |
| { | |
| research: "Analyzing haiku about simple pleasures...", | |
| reflection: "The most profound happiness often wears the plainest clothes.", | |
| poem: "Warm socks,\nSteam from the cup,\nMorning light -\nNo grand epiphanies,\nJust this." | |
| }, | |
| { | |
| research: "Studying contemporary poems about contentment...", | |
| reflection: "Modern happiness poetry increasingly acknowledges its fleeting nature and coexistence with sorrow.", | |
| poem: "Not the absence of pain,\nBut the presence of meaning -\nLike sunlight through stained glass,\nBroken but beautiful." | |
| } | |
| ] | |
| } | |
| }; | |
| // If topic not in base responses, generate generic responses | |
| if (!baseResponses[topic]) { | |
| return { | |
| philosopher: [ | |
| { | |
| research: `Researching ${topic} across philosophical traditions...`, | |
| analysis: `The concept of ${topic} has been examined through multiple philosophical lenses, from metaphysical to ethical considerations. It presents both ontological and epistemological challenges that reveal fundamental aspects of human understanding.`, | |
| aphorism: `To contemplate ${topic} is to confront the boundaries of human comprehension.` | |
| }, | |
| { | |
| research: `Analyzing contemporary philosophical approaches to ${topic}...`, | |
| analysis: `Modern philosophy treats ${topic} as both a conceptual framework and lived experience, revealing tensions between abstract theory and concrete application that merit careful examination.`, | |
| aphorism: `${topic} is the mirror in which we see our assumptions reflected.` | |
| } | |
| ], | |
| poet: [ | |
| { | |
| research: `Exploring poetic treatments of ${topic} across cultures...`, | |
| reflection: `${topic} has inspired poets throughout history, serving as both subject and medium for exploring the human condition through metaphor and imagery.`, | |
| poem: `${topic} is the shadow\nThat dances with the light,\nNever touching,\nNever apart.` | |
| }, | |
| { | |
| research: `Examining how modern poets approach ${topic}...`, | |
| reflection: `Contemporary poetry engages with ${topic} in ways that blend personal and universal, concrete and abstract, creating new linguistic pathways to understanding.`, | |
| poem: `I try to capture ${topic}\nLike water in my hands,\nOnly to watch it slip between my fingers,\nLeaving only the memory of its coolness.` | |
| } | |
| ] | |
| }; | |
| } | |
| return baseResponses[topic]; | |
| }; | |
| // Sample final poems with more variety | |
| const generateFinalPoem = (topic, rounds) => { | |
| const basePoems = { | |
| 'love': `"The Calculus of Us" | |
| In the equation of affection, | |
| Where x equals vulnerability | |
| And y equals trust, | |
| We solve for z - | |
| The unknown variable | |
| That makes the heart | |
| Expand infinitely. | |
| The philosopher seeks proof, | |
| The poet finds metaphor, | |
| But both agree: | |
| Some theorems | |
| Can only be demonstrated | |
| Through lived experience, | |
| Not derived from first principles. | |
| Love is the irrational number | |
| That makes all other quantities | |
| Rational by comparison.`, | |
| 'time': `"The Clock and the River" | |
| The clock insists on ticks and tocks, | |
| Measured, precise, relentless. | |
| The river answers with its own rhythm - | |
| Sometimes torrent, sometimes trickle, | |
| But always moving. | |
| The philosopher asks "What is time?" | |
| The poet replies "It's the space between memory and anticipation," | |
| And both are correct | |
| In their incomplete ways. | |
| We are clocks filled with water, | |
| Marking hours with our leaks, | |
| Until one day | |
| The mechanism rusts, | |
| The river reaches the sea, | |
| And all distinctions dissolve.`, | |
| 'happiness': `"The Pursuit and the Presence" | |
| We chase it with nets made of expectations, | |
| Only to find it sitting quietly | |
| In our unguarded moments. | |
| The philosopher maps its contours, | |
| The poet sings its colors, | |
| Both missing the point | |
| That it cannot be captured, | |
| Only recognized. | |
| Not in the extraordinary, | |
| But in the ordinary. | |
| Not in the perfect, | |
| But in the perfectly flawed. | |
| Not in the destination, | |
| But in the wandering. | |
| After ${rounds} rounds of discussion, | |
| We conclude: | |
| Happiness is the act of paying attention | |
| To what's already here.` | |
| }; | |
| if (!basePoems[topic]) { | |
| return `"Meditation on ${topic}" | |
| After careful consideration, | |
| Through ${rounds} exchanges of thought and feeling, | |
| We arrive at this understanding: | |
| ${topic} is both question and answer, | |
| A riddle wrapped in familiar words, | |
| Known yet unknowable. | |
| The philosopher dissects, | |
| The poet intuits, | |
| Both approaches necessary | |
| To approximate the whole. | |
| Perhaps ${topic} is simply | |
| The space between us | |
| As we try to understand it, | |
| The conversation itself | |
| More revealing | |
| Than any conclusion.`; | |
| } | |
| return basePoems[topic]; | |
| }; | |
| // Start dialogue | |
| startDialogueBtn.addEventListener('click', function() { | |
| const topic = topicInput.value.trim().toLowerCase(); | |
| const depth = parseInt(depthSlider.value); | |
| if (!topic) { | |
| alert('Please enter a topic for discussion'); | |
| return; | |
| } | |
| // Disable controls during dialogue | |
| startDialogueBtn.disabled = true; | |
| resetBtn.disabled = true; | |
| topicInput.disabled = true; | |
| depthSlider.disabled = true; | |
| startDialogueBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Dialogue in Progress'; | |
| // Clear previous dialogue | |
| dialogueContainer.innerHTML = ''; | |
| emptyState.classList.add('hidden'); | |
| finalPoemSection.classList.add('hidden'); | |
| statusIndicator.textContent = 'Researching...'; | |
| // Generate dialogue based on topic | |
| const dialogueData = generateDialogue(topic); | |
| // Simulate initial research delay | |
| setTimeout(() => { | |
| statusIndicator.textContent = 'Discussing'; | |
| simulateDialogue(topic, depth, dialogueData); | |
| }, 2000); | |
| }); | |
| // Reset button | |
| resetBtn.addEventListener('click', function() { | |
| topicInput.value = ''; | |
| depthSlider.value = 10; | |
| depthValue.textContent = '10'; | |
| dialogueContainer.innerHTML = ''; | |
| emptyState.classList.remove('hidden'); | |
| finalPoemSection.classList.add('hidden'); | |
| roundCounter.textContent = 'Round: 0'; | |
| statusIndicator.textContent = 'Ready'; | |
| // Re-enable controls | |
| startDialogueBtn.disabled = false; | |
| resetBtn.disabled = false; | |
| topicInput.disabled = false; | |
| depthSlider.disabled = false; | |
| startDialogueBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Begin Dialogue'; | |
| }); | |
| // Simulate dialogue between philosopher and poet | |
| function simulateDialogue(topic, depth, dialogueData) { | |
| let currentRound = 0; | |
| const philosopherLines = dialogueData.philosopher; | |
| const poetLines = dialogueData.poet; | |
| const usedSources = new Set(); | |
| // Add random sources to simulate research | |
| while (usedSources.size < 6) { | |
| const randomSource = sampleSources[Math.floor(Math.random() * sampleSources.length)]; | |
| usedSources.add(randomSource); | |
| } | |
| const dialogueInterval = setInterval(() => { | |
| if (currentRound >= depth) { | |
| clearInterval(dialogueInterval); | |
| showFinalPoem(topic, depth); | |
| return; | |
| } | |
| currentRound++; | |
| roundCounter.textContent = `Round: ${currentRound}`; | |
| // Alternate between philosopher and poet | |
| if (currentRound % 2 === 1) { | |
| // Philosopher's turn | |
| const philosopherData = philosopherLines[currentRound % philosopherLines.length]; | |
| addDialogueBubble('philosopher', philosopherData, currentRound); | |
| } else { | |
| // Poet's turn | |
| const poetData = poetLines[currentRound % poetLines.length]; | |
| addDialogueBubble('poet', poetData, currentRound); | |
| } | |
| // Scroll to bottom | |
| dialogueContainer.scrollTop = dialogueContainer.scrollHeight; | |
| }, 3000); | |
| } | |
| // Add a dialogue bubble to the container | |
| function addDialogueBubble(speaker, data, round) { | |
| const bubble = document.createElement('div'); | |
| bubble.className = `rounded-lg p-4 ${speaker}-bubble fade-in relative`; | |
| const speakerName = document.createElement('div'); | |
| speakerName.className = 'font-bold mb-2 flex items-center'; | |
| if (speaker === 'philosopher') { | |
| speakerName.innerHTML = `<i class="fas fa-brain mr-2 text-blue-600"></i> The Philosopher <span class="ml-2 text-xs font-normal text-blue-700">Round ${round}</span>`; | |
| speakerName.classList.add('text-blue-700'); | |
| } else { | |
| speakerName.innerHTML = `<i class="fas fa-feather mr-2 text-purple-600"></i> The Poet <span class="ml-2 text-xs font-normal text-purple-700">Round ${round}</span>`; | |
| speakerName.classList.add('text-purple-700'); | |
| } | |
| // Add research badge | |
| const researchBadge = document.createElement('div'); | |
| researchBadge.className = 'research-badge'; | |
| researchBadge.innerHTML = '<i class="fas fa-search"></i>'; | |
| bubble.appendChild(researchBadge); | |
| // Research note | |
| const researchNote = document.createElement('div'); | |
| researchNote.className = 'text-xs italic mb-2'; | |
| researchNote.textContent = data.research; | |
| bubble.appendChild(researchNote); | |
| // Main content | |
| const content = document.createElement('div'); | |
| content.className = 'whitespace-pre-line'; | |
| content.textContent = speaker === 'philosopher' ? data.analysis : data.reflection; | |
| bubble.appendChild(content); | |
| // Special content (aphorism or poem) | |
| const specialContent = document.createElement('div'); | |
| if (speaker === 'philosopher') { | |
| specialContent.className = 'aphorism'; | |
| specialContent.textContent = data.aphorism; | |
| } else { | |
| specialContent.className = 'poem'; | |
| specialContent.textContent = data.poem; | |
| } | |
| bubble.appendChild(specialContent); | |
| // Insert at beginning to show newest first | |
| dialogueContainer.insertBefore(bubble, dialogueContainer.firstChild); | |
| } | |
| // Show the final collaborative poem | |
| function showFinalPoem(topic, rounds) { | |
| statusIndicator.textContent = 'Synthesizing...'; | |
| // Simulate synthesis delay | |
| setTimeout(() => { | |
| statusIndicator.textContent = 'Completed'; | |
| startDialogueBtn.disabled = false; | |
| resetBtn.disabled = false; | |
| topicInput.disabled = false; | |
| depthSlider.disabled = false; | |
| startDialogueBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Begin Dialogue'; | |
| finalPoemSection.classList.remove('hidden'); | |
| finalPoem.textContent = generateFinalPoem(topic, rounds); | |
| // Random number of sources between 8-15 | |
| const sourceCount = Math.floor(Math.random() * 8) + 8; | |
| sourcesCount.textContent = `Synthesized from ${sourceCount} research sources`; | |
| // Scroll to poem | |
| setTimeout(() => { | |
| finalPoemSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 500); | |
| }, 3000); | |
| } | |
| // Add some sample topics on click for demo purposes | |
| topicInput.addEventListener('click', function() { | |
| if (!this.value) { | |
| const samples = ['The nature of love', 'The concept of time', 'The pursuit of happiness', 'Artificial intelligence', 'Human consciousness', 'The meaning of art']; | |
| this.placeholder = `e.g. ${samples[Math.floor(Math.random() * samples.length)]}`; | |
| } | |
| }); | |
| }); | |
| </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=Dumoura/esgotar-ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |