Spaces:

awacke1
/

JBP-Wisdom-Visualizer

Running

App Files Files Community

awacke1 commited on 17 days ago

Commit

8358f59

verified ·

1 Parent(s): 32960ac

Update index.html

Browse files

Files changed (1) hide show

index.html +525 -195

index.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>SVG Transcript Time Series with Teleprompter</title>
   <style>
     body {
       margin: 0;
@@ -13,7 +13,7 @@
     }
     .container {
-      max-width: 1200px;
       margin: 0 auto;
     }
@@ -65,6 +65,8 @@
       border-radius: 15px;
       padding: 30px;
       box-shadow: 0 20px 40px rgba(0,0,0,0.1);
     }
     .cluster-legend {
@@ -83,15 +85,18 @@
       color: #333;
     }
-    .legend-color {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
     }
     .controls {
       text-align: center;
       margin: 20px 0;
     }
     button {
@@ -99,11 +104,13 @@
       border: none;
       color: white;
       padding: 12px 24px;
-      margin: 0 10px;
       border-radius: 25px;
       cursor: pointer;
       font-size: 16px;
       transition: transform 0.2s;
     }
     button:hover {
@@ -116,6 +123,10 @@
       transform: none;
     }
     .progress-bar {
       width: 100%;
       height: 6px;
@@ -132,6 +143,42 @@
       transition: width 0.3s ease;
       border-radius: 3px;
     }
   </style>
 </head>
 <body>
@@ -140,7 +187,7 @@
       <div class="timestamp" id="timestamp">5:48</div>
       <div class="teleprompter-text">
         <div class="current-text" id="current-text">
-          It's a very good way of understanding how we communicate <span class="highlighted-word">linguistically</span>.
         </div>
       </div>
       <div class="progress-bar">
@@ -149,167 +196,225 @@
     </div>
     <div class="controls">
-      <button onclick="togglePlayPause()" id="playButton">⏸️ Pause</button>
-      <button onclick="restart()">🔄 Restart</button>
-      <button onclick="changeSpeed(-0.5)">🐌 Slower</button>
-      <button onclick="changeSpeed(0.5)">🐰 Faster</button>
     </div>
     <div class="chart-container">
       <div class="cluster-legend">
         <div class="legend-item">
-          <div class="legend-color" style="background: #ff4757;"></div>
-          <span>👁️ Vision/Perception</span>
         </div>
         <div class="legend-item">
-          <div class="legend-color" style="background: #2ed573;"></div>
-          <span>💪 Action</span>
         </div>
         <div class="legend-item">
-          <div class="legend-color" style="background: #3742fa;"></div>
-          <span>🤔 Thought</span>
         </div>
         <div class="legend-item">
-          <div class="legend-color" style="background: #ffa502;"></div>
-          <span>🌍 Context</span>
         </div>
       </div>
-      <svg id="chart" width="100%" height="400" viewBox="0 0 800 400">
-        <!-- Background grid -->
         <defs>
-          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
-            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#e0e0e0" stroke-width="1"/>
           </pattern>
-          <!-- Gradients for lines -->
-          <linearGradient id="visionGradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" style="stop-color:#ff4757;stop-opacity:0.3" />
-            <stop offset="100%" style="stop-color:#ff4757;stop-opacity:1" />
           </linearGradient>
-          <linearGradient id="actionGradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" style="stop-color:#2ed573;stop-opacity:0.3" />
-            <stop offset="100%" style="stop-color:#2ed573;stop-opacity:1" />
           </linearGradient>
-          <linearGradient id="thoughtGradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" style="stop-color:#3742fa;stop-opacity:0.3" />
-            <stop offset="100%" style="stop-color:#3742fa;stop-opacity:1" />
           </linearGradient>
-          <linearGradient id="contextGradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" style="stop-color:#ffa502;stop-opacity:0.3" />
-            <stop offset="100%" style="stop-color:#ffa502;stop-opacity:1" />
           </linearGradient>
         </defs>
-        <rect width="800" height="400" fill="url(#grid)" opacity="0.5"/>
-        <!-- Axes -->
-        <line x1="80" y1="50" x2="80" y2="350" stroke="#333" stroke-width="2"/>
-        <line x1="80" y1="350" x2="720" y2="350" stroke="#333" stroke-width="2"/>
-        <!-- Y-axis labels -->
-        <text x="70" y="350" text-anchor="end" font-size="12" fill="#666">0</text>
-        <text x="70" y="290" text-anchor="end" font-size="12" fill="#666">1</text>
-        <text x="70" y="230" text-anchor="end" font-size="12" fill="#666">2</text>
-        <text x="70" y="170" text-anchor="end" font-size="12" fill="#666">3</text>
-        <text x="70" y="110" text-anchor="end" font-size="12" fill="#666">4</text>
-        <text x="70" y="50" text-anchor="end" font-size="12" fill="#666">5</text>
-        <!-- Axis labels -->
-        <text x="400" y="390" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">Time (MM:SS)</text>
-        <text x="30" y="200" text-anchor="middle" font-size="14" font-weight="bold" fill="#333" transform="rotate(-90 30 200)">Word Frequency</text>
-        <!-- Time markers will be added by JavaScript -->
-        <g id="time-markers"></g>
-        <!-- Chart lines -->
-        <g id="chart-lines"></g>
-        <!-- Peak labels -->
-        <g id="peak-labels"></g>
         <!-- Current time indicator -->
-        <line id="time-indicator" x1="80" y1="50" x2="80" y2="350" stroke="#ff6b6b" stroke-width="3" opacity="0.8">
-          <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite"/>
-        </line>
       </svg>
     </div>
   </div>
 <script>
-// Transcript data with enhanced parsing
 const transcriptData = [
-  { time: "5:48", seconds: 348, text: "It's a very good way of understanding how we communicate 🗣️linguistically🗣️." },
-  { time: "5:55", seconds: 355, text: "So if the words 🌊spring🌊 to the 👁️visual👁️, full 👁️visual👁️ 🌈complexity🌈 and then that can then 🌟transform🌟 itself into 💪action💪." },
-  { time: "6:02", seconds: 362, text: "Well those are both relevant and it's an important thing to understand because the classic empiricists make the 🤔presumption🤔," },
-  { time: "6:10", seconds: 370, text: "and it's an erroneous 🤔presumption🤔, that 👁️perception👁️ is a value free enterprise." },
-  { time: "6:16", seconds: 376, text: "And they 🌫️assume🌫️ that partly because they 🤔think🤔 of 👁️perception👁️ as something passive. You know, you just turn your head" },
-  { time: "6:21", seconds: 381, text: "and you 👀look👀 at the 🌍world🌍 and there it is. It's like 👁️perception👁️ is not passive. There is no 👁️perception👁️ without 💪action💪, ever, ever." },
-  { time: "6:29", seconds: 389, text: "And that's a weird thing to understand because even when you're 👀looking👀 at something like your 👁️eyes👁️ are moving back and forth, if they ever stop moving" },
-  { time: "6:35", seconds: 395, text: "for a 10th of a second, you stop being able to 👀see👀. So your 👁️eyes👁️ are jiggling back and forth, just to keep them active." },
-  { time: "6:41", seconds: 401, text: "And then there's involuntary movements of your 👁️eyes👁️, and then there's voluntary movements of your 👁️eyes👁️. Like what you're doing with your 👁️eyes👁️ is very much like" },
-  { time: "6:48", seconds: 408, text: "what a blind person would do if they were feeling out the contours of a object. You're 🌟sampling🌟 and you're only 🌟sampling🌟" },
-  { time: "6:56", seconds: 416, text: "a small element of the space that's in front of you. And the element that you 🌟choose🌟" },
-  { time: "7:01", seconds: 421, text: "to 🌟sample🌟 is dependent on your 🎯aims🎯 and your 🎯goals🎯. So it's value saturated. And so all your 👁️perceptions👁️ are 💪action💪 predicated." },
-  { time: "7:09", seconds: 429, text: "And partly what you're doing when you're 🗣️communicating🗣️ is therefore not only changing people's 💪actions💪, let's say, but you're also changing the strategy" },
-  { time: "7:18", seconds: 438, text: "that they use to 👁️perceive👁️. And so you change the way the 🌍world🌍 reveals itself for them. See, this is why it's such a profound experience" },
-  { time: "7:25", seconds: 445, text: "to read a particularly deep 🤔thinker🤔 because you could also 🤔think🤔 of your 👁️perceptions👁️" },
-  { time: "7:30", seconds: 450, text: "as the axioms of your 🤔thought🤔. That's a good way of 🤔thinking🤔 about it. A 👁️perception👁️ is like a, what would you say?" },
-  { time: "7:36", seconds: 456, text: "It's a 🤔thought🤔 that's so set in concrete that you now 👀see👀 it rather than conceptualize it." },
-  { time: "7:42", seconds: 462, text: "A really profound 🤔thinker🤔 changes the way you 👁️perceive👁️ the 🌍world🌍. That's way deeper than just how you 🤔think🤔 about it" },
-  { time: "7:47", seconds: 467, text: "or how you feel about it. What about not just profound 🤔thinkers🤔, but 🤔thinkers🤔 that deliver a powerful 💡idea💡?" }
 ];
-// Enhanced word extraction from emoji-marked text
-function extractWords(text) {
-  const emojiPatterns = {
-    vision: /👁️([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)👁️/g,
-    action: /💪([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)💪/g,
-    thought: /🤔([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)🤔/g,
-    context: /(?:🗣️([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)🗣️|🌊([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)🌊|🌈([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)🌈|🌟([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)🌟|🎯([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)🎯|🌍([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)🌍|💡([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)💡|🌫️([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)🌫️|👀([^👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]+)👀)/g
-  };
-  const words = { vision: [], action: [], thought: [], context: [] };
-  Object.keys(emojiPatterns).forEach(category => {
-    let match;
-    while ((match = emojiPatterns[category].exec(text)) !== null) {
-      const word = match.slice(1).filter(Boolean)[0];
-      if (word) {
-        words[category].push(word.trim());
-      }
-    }
-  });
-  return words;
 }
 // Process transcript data
 const processedData = transcriptData.map(entry => {
-  const words = extractWords(entry.text);
-  return {
-    ...entry,
-    words,
-    wordCounts: {
-      vision: words.vision.length,
-      action: words.action.length,
-      thought: words.thought.length,
-      context: words.context.length
-    }
-  };
 });
-// Create time series data
-const timePoints = processedData.map(d => d.seconds);
-const minTime = Math.min(...timePoints);
-const maxTime = Math.max(...timePoints);
 // Chart configuration
-const chartWidth = 640;
-const chartHeight = 300;
-const chartLeft = 80;
-const chartTop = 50;
 const colors = {
   vision: '#ff4757',
   action: '#2ed573',
@@ -322,40 +427,92 @@ let currentIndex = 0;
 let isPlaying = true;
 let animationSpeed = 1.0;
 let animationTimer;
 function timeToX(seconds) {
-  return chartLeft + ((seconds - minTime) / (maxTime - minTime)) * chartWidth;
 }
 function countToY(count) {
-  return chartTop + chartHeight - (count * 60); // Scale factor of 60 pixels per count
 }
-function createTimeSeries() {
-  const svg = document.getElementById('chart');
-  const timeMarkers = document.getElementById('time-markers');
-  const chartLines = document.getElementById('chart-lines');
-  const peakLabels = document.getElementById('peak-labels');
-  // Add time markers
   processedData.forEach((entry, index) => {
-    if (index % 3 === 0) { // Show every 3rd timestamp to avoid crowding
       const x = timeToX(entry.seconds);
-      // Tick mark
       const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-      tick.setAttribute('x1', x);
-      tick.setAttribute('y1', chartTop + chartHeight);
-      tick.setAttribute('x2', x);
-      tick.setAttribute('y2', chartTop + chartHeight + 5);
       tick.setAttribute('stroke', '#666');
-      tick.setAttribute('stroke-width', '1');
       timeMarkers.appendChild(tick);
       // Label
       const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-      label.setAttribute('x', x);
-      label.setAttribute('y', chartTop + chartHeight + 20);
       label.setAttribute('text-anchor', 'middle');
       label.setAttribute('font-size', '10');
       label.setAttribute('fill', '#666');
@@ -363,57 +520,124 @@ function createTimeSeries() {
       timeMarkers.appendChild(label);
     }
   });
-  // Create lines for each category
-  Object.keys(colors).forEach(category => {
-    const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
-    line.setAttribute('fill', 'none');
-    line.setAttribute('stroke', colors[category]);
-    line.setAttribute('stroke-width', '3');
-    line.setAttribute('stroke-linecap', 'round');
-    line.setAttribute('stroke-linejoin', 'round');
-    line.setAttribute('id', `line-${category}`);
-    line.style.filter = 'drop-shadow(2px 2px 4px rgba(0,0,0,0.3))';
-    chartLines.appendChild(line);
-    // Area under curve
-    const area = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-    area.setAttribute('fill', `url(#${category}Gradient)`);
-    area.setAttribute('opacity', '0.3');
-    area.setAttribute('id', `area-${category}`);
-    chartLines.insertBefore(area, line);
-  });
 }
-function updateChart() {
-  if (currentIndex >= processedData.length) return;
   const currentData = processedData.slice(0, currentIndex + 1);
-  Object.keys(colors).forEach(category => {
-    const line = document.getElementById(`line-${category}`);
-    const area = document.getElementById(`area-${category}`);
-    const points = currentData.map(d => `${timeToX(d.seconds)},${countToY(d.wordCounts[category])}`).join(' ');
-    line.setAttribute('points', points);
-    // Create area points
-    if (currentData.length > 0) {
-      const areaPoints = [];
-      areaPoints.push(`${timeToX(currentData[0].seconds)},${chartTop + chartHeight}`);
       currentData.forEach(d => {
-        areaPoints.push(`${timeToX(d.seconds)},${countToY(d.wordCounts[category])}`);
       });
-      areaPoints.push(`${timeToX(currentData[currentData.length - 1].seconds)},${chartTop + chartHeight}`);
-      area.setAttribute('points', areaPoints.join(' '));
     }
   });
   // Update time indicator
-  const timeIndicator = document.getElementById('time-indicator');
   const currentX = timeToX(processedData[currentIndex].seconds);
-  timeIndicator.setAttribute('x1', currentX);
-  timeIndicator.setAttribute('x2', currentX);
 }
 function updateTeleprompter() {
@@ -422,40 +646,79 @@ function updateTeleprompter() {
   const current = processedData[currentIndex];
   document.getElementById('timestamp').textContent = current.time;
-  // Highlight keywords in text
   let highlightedText = current.text;
-  // Remove emojis and highlight the words that were between them
-  const allWords = [...current.words.vision, ...current.words.action, ...current.words.thought, ...current.words.context];
-  allWords.forEach(word => {
-    const regex = new RegExp(`\\b${word}\\b`, 'gi');
-    highlightedText = highlightedText.replace(regex, `<span class="highlighted-word">${word}</span>`);
   });
-  // Remove emoji markers
-  highlightedText = highlightedText.replace(/[👁️🗣️💪🤔🌊🌈🌟🎯🌍💡🌫️👀]/g, '');
-  document.getElementById('current-text').innerHTML = highlightedText;
   // Update progress bar
   const progress = ((currentIndex + 1) / processedData.length) * 100;
   document.getElementById('progress-fill').style.width = `${progress}%`;
 }
 function animate() {
   if (!isPlaying) return;
-  updateChart();
   updateTeleprompter();
   currentIndex++;
   if (currentIndex < processedData.length) {
-    animationTimer = setTimeout(animate, 2000 / animationSpeed); // 2 second intervals
   } else {
-    document.getElementById('playButton').textContent = '🔄 Restart';
-    document.getElementById('playButton').onclick = restart;
   }
 }
@@ -464,13 +727,24 @@ function togglePlayPause() {
   const button = document.getElementById('playButton');
   if (isPlaying) {
-    button.textContent = '⏸️ Pause';
     if (currentIndex < processedData.length) {
       animate();
     }
   } else {
-    button.textContent = '▶️ Play';
     clearTimeout(animationTimer);
   }
 }
@@ -478,7 +752,14 @@ function restart() {
   currentIndex = 0;
   isPlaying = true;
   clearTimeout(animationTimer);
-  document.getElementById('playButton').textContent = '⏸️ Pause';
   document.getElementById('playButton').onclick = togglePlayPause;
   animate();
 }
@@ -487,8 +768,57 @@ function changeSpeed(delta) {
   animationSpeed = Math.max(0.5, Math.min(3.0, animationSpeed + delta));
 }
 // Initialize
-createTimeSeries();
 animate();
 </script>

 <!DOCTYPE html>
 <html>
 <head>
+  <title>3D SVG Transcript Time Series with Teleprompter</title>
   <style>
     body {
       margin: 0;
     }
     .container {
+      max-width: 1400px;
       margin: 0 auto;
     }
       border-radius: 15px;
       padding: 30px;
       box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+      position: relative;
+      overflow: hidden;
     }
     .cluster-legend {
       color: #333;
     }
+    .legend-icon {
+      width: 24px;
+      height: 24px;
     }
     .controls {
       text-align: center;
       margin: 20px 0;
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+      flex-wrap: wrap;
     }
     button {
       border: none;
       color: white;
       padding: 12px 24px;
       border-radius: 25px;
       cursor: pointer;
       font-size: 16px;
       transition: transform 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
     button:hover {
       transform: none;
     }
+    button.active {
+      background: linear-gradient(45deg, #ff6b6b, #ffa500);
+    }
     .progress-bar {
       width: 100%;
       height: 6px;
       transition: width 0.3s ease;
       border-radius: 3px;
     }
+    .chart-3d {
+      perspective: 1000px;
+      transform-style: preserve-3d;
+    }
+    .surface-layer {
+      position: absolute;
+      transform-style: preserve-3d;
+      transition: all 0.5s ease;
+    }
+    .surface-mesh {
+      opacity: 0.7;
+      stroke-width: 1;
+      fill-opacity: 0.3;
+    }
+    .interconnection-surface {
+      opacity: 0.4;
+      transition: opacity 0.5s ease;
+    }
+    .axis-3d {
+      stroke-width: 2;
+      stroke: #333;
+    }
+    .speaking {
+      animation: speaking 0.5s ease-in-out infinite alternate;
+    }
+    @keyframes speaking {
+      from { color: #ff6b6b; }
+      to { color: #ffa500; }
+    }
   </style>
 </head>
 <body>
       <div class="timestamp" id="timestamp">5:48</div>
       <div class="teleprompter-text">
         <div class="current-text" id="current-text">
+          It's a very good way of understanding how we communicate linguistically.
         </div>
       </div>
       <div class="progress-bar">
     </div>
     <div class="controls">
+      <button onclick="togglePlayPause()" id="playButton">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+        </svg>
+        Pause
+      </button>
+      <button onclick="restart()">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+        </svg>
+        Restart
+      </button>
+      <button onclick="changeSpeed(-0.5)">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M13.5 13c-1.5 1.5-1.5 1.5-3 0s-1.5-1.5 0-3 1.5-1.5 3 0 1.5 1.5 0 3zm4.5-5H8l4-4h6z"/>
+        </svg>
+        Slower
+      </button>
+      <button onclick="changeSpeed(0.5)">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M10.5 11c1.5-1.5 1.5-1.5 3 0s1.5 1.5 0 3-1.5 1.5-3 0-1.5-1.5 0-3zM6 6h8l-4 4H6z"/>
+        </svg>
+        Faster
+      </button>
+      <button onclick="toggleAutoRepeat()" id="autoRepeatButton">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+          <circle cx="12" cy="12" r="2"/>
+        </svg>
+        Auto-Repeat
+      </button>
+      <button onclick="toggleReadAloud()" id="readAloudButton">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+        </svg>
+        Read Aloud
+      </button>
     </div>
     <div class="chart-container">
       <div class="cluster-legend">
         <div class="legend-item">
+          <svg class="legend-icon" viewBox="0 0 24 24" fill="#ff4757">
+            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
+          </svg>
+          <span>Vision/Perception</span>
         </div>
         <div class="legend-item">
+          <svg class="legend-icon" viewBox="0 0 24 24" fill="#2ed573">
+            <path d="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z"/>
+          </svg>
+          <span>Action</span>
         </div>
         <div class="legend-item">
+          <svg class="legend-icon" viewBox="0 0 24 24" fill="#3742fa">
+            <path d="M21 4V2h-2v2h-2.5l-.5 2h1.5v1.5c0 .83-.67 1.5-1.5 1.5S15 8.33 15 7.5V6h1.5l-.5-2H13V2h-2v2H9.5l-.5 2H10.5v1.5c0 .83-.67 1.5-1.5 1.5S8 8.33 8 7.5V6h1.5L9 4H6V2H4v2H2v2h2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6h2V4h-1zm-2 14H5V6h14v12z"/>
+          </svg>
+          <span>Thought</span>
         </div>
         <div class="legend-item">
+          <svg class="legend-icon" viewBox="0 0 24 24" fill="#ffa502">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+          </svg>
+          <span>Context</span>
         </div>
       </div>
+      <svg id="chart" width="100%" height="500" viewBox="0 0 1000 500" class="chart-3d">
+        <!-- 3D Grid Background -->
         <defs>
+          <pattern id="grid3d" width="50" height="50" patternUnits="userSpaceOnUse">
+            <path d="M 50 0 L 0 0 0 50" fill="none" stroke="#e0e0e0" stroke-width="1" opacity="0.5"/>
           </pattern>
+          <!-- Gradients for 3D surfaces -->
+          <linearGradient id="visionSurface" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ff4757;stop-opacity:0.8" />
+            <stop offset="50%" style="stop-color:#ff6b6b;stop-opacity:0.6" />
+            <stop offset="100%" style="stop-color:#ff4757;stop-opacity:0.4" />
           </linearGradient>
+          <linearGradient id="actionSurface" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#2ed573;stop-opacity:0.8" />
+            <stop offset="50%" style="stop-color:#55efc4;stop-opacity:0.6" />
+            <stop offset="100%" style="stop-color:#2ed573;stop-opacity:0.4" />
           </linearGradient>
+          <linearGradient id="thoughtSurface" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#3742fa;stop-opacity:0.8" />
+            <stop offset="50%" style="stop-color:#5352ed;stop-opacity:0.6" />
+            <stop offset="100%" style="stop-color:#3742fa;stop-opacity:0.4" />
           </linearGradient>
+          <linearGradient id="contextSurface" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ffa502;stop-opacity:0.8" />
+            <stop offset="50%" style="stop-color:#ffb142;stop-opacity:0.6" />
+            <stop offset="100%" style="stop-color:#ffa502;stop-opacity:0.4" />
           </linearGradient>
+          <!-- Interconnection gradients -->
+          <radialGradient id="interconnection1">
+            <stop offset="0%" style="stop-color:#ff4757;stop-opacity:0.3" />
+            <stop offset="50%" style="stop-color:#2ed573;stop-opacity:0.2" />
+            <stop offset="100%" style="stop-color:#3742fa;stop-opacity:0.1" />
+          </radialGradient>
+          <radialGradient id="interconnection2">
+            <stop offset="0%" style="stop-color:#2ed573;stop-opacity:0.3" />
+            <stop offset="50%" style="stop-color:#ffa502;stop-opacity:0.2" />
+            <stop offset="100%" style="stop-color:#ff4757;stop-opacity:0.1" />
+          </radialGradient>
         </defs>
+        <!-- 3D Background Grid -->
+        <g id="grid-3d" transform="translate(100, 50)">
+          <!-- Base grid -->
+          <rect width="800" height="400" fill="url(#grid3d)" opacity="0.3"/>
+          <!-- 3D depth lines -->
+          <g id="depth-lines">
+            <!-- Will be populated by JavaScript -->
+          </g>
+        </g>
+        <!-- 3D Axes -->
+        <g id="axes-3d" transform="translate(100, 50)">
+          <!-- X-axis (Time) -->
+          <line x1="0" y1="400" x2="800" y2="400" class="axis-3d"/>
+          <line x1="800" y1="400" x2="750" y2="350" class="axis-3d" opacity="0.7"/>
+          <!-- Y-axis (Frequency) -->
+          <line x1="0" y1="400" x2="0" y2="0" class="axis-3d"/>
+          <line x1="0" y1="0" x2="50" y2="50" class="axis-3d" opacity="0.7"/>
+          <!-- Z-axis (Categories) -->
+          <line x1="0" y1="400" x2="200" y2="250" class="axis-3d"/>
+          <!-- Axis labels -->
+          <text x="400" y="440" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">Time (MM:SS)</text>
+          <text x="-20" y="200" text-anchor="middle" font-size="14" font-weight="bold" fill="#333" transform="rotate(-90 -20 200)">Frequency</text>
+          <text x="100" y="320" text-anchor="middle" font-size="14" font-weight="bold" fill="#333" transform="rotate(-45 100 320)">Semantic Clusters</text>
+        </g>
+        <!-- Time markers -->
+        <g id="time-markers-3d"></g>
+        <!-- 3D Surfaces -->
+        <g id="surfaces-3d" transform="translate(100, 50)">
+          <!-- Individual category surfaces -->
+          <g id="vision-surface"></g>
+          <g id="action-surface"></g>
+          <g id="thought-surface"></g>
+          <g id="context-surface"></g>
+          <!-- Interconnection surfaces -->
+          <g id="interconnections"></g>
+        </g>
         <!-- Current time indicator -->
+        <g id="time-indicator-3d" transform="translate(100, 50)">
+          <line x1="0" y1="0" x2="0" y2="400" stroke="#ff6b6b" stroke-width="4" opacity="0.8">
+            <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite"/>
+          </line>
+          <line x1="0" y1="400" x2="50" y2="350" stroke="#ff6b6b" stroke-width="3" opacity="0.6">
+            <animate attributeName="opacity" values="0.3;0.8;0.3" dur="2s" repeatCount="indefinite"/>
+          </line>
+        </g>
       </svg>
     </div>
   </div>
 <script>
+// Enhanced transcript data with better emoji parsing
 const transcriptData = [
+  { time: "5:48", seconds: 348, text: "It's a very good way of understanding how we communicate linguistically." },
+  { time: "5:55", seconds: 355, text: "So if the words spring to the visual, full visual complexity and then that can then transform itself into action." },
+  { time: "6:02", seconds: 362, text: "Well those are both relevant and it's an important thing to understand because the classic empiricists make the presumption," },
+  { time: "6:10", seconds: 370, text: "and it's an erroneous presumption, that perception is a value free enterprise." },
+  { time: "6:16", seconds: 376, text: "And they assume that partly because they think of perception as something passive. You know, you just turn your head" },
+  { time: "6:21", seconds: 381, text: "and you look at the world and there it is. It's like perception is not passive. There is no perception without action, ever, ever." },
+  { time: "6:29", seconds: 389, text: "And that's a weird thing to understand because even when you're looking at something like your eyes are moving back and forth, if they ever stop moving" },
+  { time: "6:35", seconds: 395, text: "for a 10th of a second, you stop being able to see. So your eyes are jiggling back and forth, just to keep them active." },
+  { time: "6:41", seconds: 401, text: "And then there's involuntary movements of your eyes, and then there's voluntary movements of your eyes. Like what you're doing with your eyes is very much like" },
+  { time: "6:48", seconds: 408, text: "what a blind person would do if they were feeling out the contours of a object. You're sampling and you're only sampling" },
+  { time: "6:56", seconds: 416, text: "a small element of the space that's in front of you. And the element that you choose" },
+  { time: "7:01", seconds: 421, text: "to sample is dependent on your aims and your goals. So it's value saturated. And so all your perceptions are action predicated." },
+  { time: "7:09", seconds: 429, text: "And partly what you're doing when you're communicating is therefore not only changing people's actions, let's say, but you're also changing the strategy" },
+  { time: "7:18", seconds: 438, text: "that they use to perceive. And so you change the way the world reveals itself for them. See, this is why it's such a profound experience" },
+  { time: "7:25", seconds: 445, text: "to read a particularly deep thinker because you could also think of your perceptions" },
+  { time: "7:30", seconds: 450, text: "as the axioms of your thought. That's a good way of thinking about it. A perception is like a, what would you say?" },
+  { time: "7:36", seconds: 456, text: "It's a thought that's so set in concrete that you now see it rather than conceptualize it." },
+  { time: "7:42", seconds: 462, text: "A really profound thinker changes the way you perceive the world. That's way deeper than just how you think about it" },
+  { time: "7:47", seconds: 467, text: "or how you feel about it. What about not just profound thinkers, but thinkers that deliver a powerful idea?" }
 ];
+// Enhanced semantic analysis
+function analyzeSemantics(text) {
+  const visionWords = ['visual', 'perception', 'perceptions', 'perceive', 'look', 'looking', 'see', 'eyes', 'reveals'];
+  const actionWords = ['action', 'actions', 'transform', 'sampling', 'sample', 'choose', 'moving', 'active', 'predicated'];
+  const thoughtWords = ['think', 'thinker', 'thinkers', 'thought', 'thinking', 'presumption', 'assume', 'idea', 'axioms', 'conceptualize'];
+  const contextWords = ['linguistically', 'communicating', 'world', 'complexity', 'aims', 'goals', 'strategy', 'enterprise', 'experience'];
+  const words = text.toLowerCase().match(/\b\w+\b/g) || [];
+  return {
+    vision: words.filter(w => visionWords.includes(w)).length,
+    action: words.filter(w => actionWords.includes(w)).length,
+    thought: words.filter(w => thoughtWords.includes(w)).length,
+    context: words.filter(w => contextWords.includes(w)).length
+  };
 }
 // Process transcript data
 const processedData = transcriptData.map(entry => {
+  const wordCounts = analyzeSemantics(entry.text);
+  return { ...entry, wordCounts };
 });
 // Chart configuration
+const chartWidth = 800;
+const chartHeight = 400;
+const depthOffset = 200;
+const categories = ['vision', 'action', 'thought', 'context'];
 const colors = {
   vision: '#ff4757',
   action: '#2ed573',
 let isPlaying = true;
 let animationSpeed = 1.0;
 let animationTimer;
+let autoRepeat = false;
+let readAloud = false;
+let speechSynthesis = window.speechSynthesis;
+let currentUtterance = null;
+// 3D projection helpers
+function project3D(x, y, z, depth = depthOffset) {
+  const perspective = 1000;
+  const scale = perspective / (perspective + z);
+  return {
+    x: x + (z * 0.3),
+    y: y - (z * 0.15),
+    scale: scale
+  };
+}
 function timeToX(seconds) {
+  const minTime = Math.min(...processedData.map(d => d.seconds));
+  const maxTime = Math.max(...processedData.map(d => d.seconds));
+  return (seconds - minTime) / (maxTime - minTime) * chartWidth;
 }
 function countToY(count) {
+  return chartHeight - (count * 80); // Scale factor
+}
+function categoryToZ(categoryIndex) {
+  return categoryIndex * 50;
 }
+function create3DDepthLines() {
+  const depthLines = document.getElementById('depth-lines');
+  // Create depth perception lines
+  for (let i = 0; i <= 10; i++) {
+    for (let j = 0; j <= 8; j++) {
+      const x1 = i * 80;
+      const y1 = j * 50;
+      const projected = project3D(x1, y1, 100);
+      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      line.setAttribute('x1', x1);
+      line.setAttribute('y1', y1);
+      line.setAttribute('x2', projected.x);
+      line.setAttribute('y2', projected.y);
+      line.setAttribute('stroke', '#ddd');
+      line.setAttribute('stroke-width', '0.5');
+      line.setAttribute('opacity', '0.3');
+      depthLines.appendChild(line);
+    }
+  }
+}
+function createTimeMarkers3D() {
+  const timeMarkers = document.getElementById('time-markers-3d');
   processedData.forEach((entry, index) => {
+    if (index % 3 === 0) {
       const x = timeToX(entry.seconds);
+      const projected = project3D(x, chartHeight, 0);
+      // Main tick
       const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      tick.setAttribute('x1', 100 + x);
+      tick.setAttribute('y1', 50 + chartHeight);
+      tick.setAttribute('x2', 100 + x);
+      tick.setAttribute('y2', 50 + chartHeight + 10);
       tick.setAttribute('stroke', '#666');
+      tick.setAttribute('stroke-width', '2');
       timeMarkers.appendChild(tick);
+      // 3D depth tick
+      const depthTick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      depthTick.setAttribute('x1', 100 + x);
+      depthTick.setAttribute('y1', 50 + chartHeight);
+      depthTick.setAttribute('x2', 100 + projected.x);
+      depthTick.setAttribute('y2', 50 + projected.y);
+      depthTick.setAttribute('stroke', '#666');
+      depthTick.setAttribute('stroke-width', '1');
+      depthTick.setAttribute('opacity', '0.7');
+      timeMarkers.appendChild(depthTick);
       // Label
       const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      label.setAttribute('x', 100 + x);
+      label.setAttribute('y', 50 + chartHeight + 25);
       label.setAttribute('text-anchor', 'middle');
       label.setAttribute('font-size', '10');
       label.setAttribute('fill', '#666');
       timeMarkers.appendChild(label);
     }
   });
+}
+function createSurface3D(categoryIndex, points, color) {
+  const surfaceGroup = document.getElementById(`${categories[categoryIndex]}-surface`);
+  surfaceGroup.innerHTML = ''; // Clear existing
+  if (points.length < 2) return;
+  const z = categoryToZ(categoryIndex);
+  // Create surface mesh
+  for (let i = 0; i < points.length - 1; i++) {
+    const curr = points[i];
+    const next = points[i + 1];
+    // Project points to 3D
+    const p1 = project3D(curr.x, curr.y, z);
+    const p2 = project3D(next.x, next.y, z);
+    const p3 = project3D(next.x, chartHeight, z);
+    const p4 = project3D(curr.x, chartHeight, z);
+    // Create surface quad
+    const surface = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+    surface.setAttribute('points', `${p1.x},${p1.y} ${p2.x},${p2.y} ${p3.x},${p3.y} ${p4.x},${p4.y}`);
+    surface.setAttribute('fill', `url(#${categories[categoryIndex]}Surface)`);
+    surface.setAttribute('stroke', color);
+    surface.setAttribute('stroke-width', '1');
+    surface.setAttribute('class', 'surface-mesh');
+    surfaceGroup.appendChild(surface);
+    // Create top edge line
+    const topLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    topLine.setAttribute('x1', p1.x);
+    topLine.setAttribute('y1', p1.y);
+    topLine.setAttribute('x2', p2.x);
+    topLine.setAttribute('y2', p2.y);
+    topLine.setAttribute('stroke', color);
+    topLine.setAttribute('stroke-width', '2');
+    topLine.setAttribute('opacity', '0.8');
+    surfaceGroup.appendChild(topLine);
+  }
 }
+function createInterconnectionSurfaces() {
+  const interconnections = document.getElementById('interconnections');
+  interconnections.innerHTML = '';
+  if (currentIndex < 1) return;
   const currentData = processedData.slice(0, currentIndex + 1);
+  // Create interconnection surfaces between categories
+  for (let i = 0; i < categories.length - 1; i++) {
+    for (let j = i + 1; j < categories.length; j++) {
+      const cat1 = categories[i];
+      const cat2 = categories[j];
+      const z1 = categoryToZ(i);
+      const z2 = categoryToZ(j);
+      // Create interpolated surface between categories
+      const points = [];
       currentData.forEach(d => {
+        const x = timeToX(d.seconds);
+        const y1 = countToY(d.wordCounts[cat1]);
+        const y2 = countToY(d.wordCounts[cat2]);
+        // Create bridge between the two surfaces
+        const midZ = (z1 + z2) / 2;
+        const midY = (y1 + y2) / 2;
+        const p1 = project3D(x, y1, z1);
+        const p2 = project3D(x, y2, z2);
+        const pMid = project3D(x, midY, midZ);
+        points.push({p1, p2, pMid, x});
       });
+      // Create connecting surface
+      for (let k = 0; k < points.length - 1; k++) {
+        const curr = points[k];
+        const next = points[k + 1];
+        const surface = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+        surface.setAttribute('points',
+          `${curr.p1.x},${curr.p1.y} ${curr.pMid.x},${curr.pMid.y} ${next.pMid.x},${next.pMid.y} ${next.p1.x},${next.p1.y}`);
+        surface.setAttribute('fill', `url(#interconnection${(i + j) % 2 + 1})`);
+        surface.setAttribute('class', 'interconnection-surface');
+        interconnections.appendChild(surface);
+      }
     }
+  }
+}
+function update3DChart() {
+  if (currentIndex >= processedData.length) return;
+  const currentData = processedData.slice(0, currentIndex + 1);
+  // Update each category surface
+  categories.forEach((category, index) => {
+    const points = currentData.map(d => ({
+      x: timeToX(d.seconds),
+      y: countToY(d.wordCounts[category])
+    }));
+    createSurface3D(index, points, colors[category]);
   });
+  // Update interconnection surfaces
+  createInterconnectionSurfaces();
   // Update time indicator
+  const timeIndicator = document.getElementById('time-indicator-3d');
   const currentX = timeToX(processedData[currentIndex].seconds);
+  timeIndicator.querySelector('line:first-child').setAttribute('x1', currentX);
+  timeIndicator.querySelector('line:first-child').setAttribute('x2', currentX);
+  timeIndicator.querySelector('line:last-child').setAttribute('x1', currentX);
+  timeIndicator.querySelector('line:last-child').setAttribute('x2', currentX + 50);
 }
 function updateTeleprompter() {
   const current = processedData[currentIndex];
   document.getElementById('timestamp').textContent = current.time;
+  // Highlight key words based on word counts
   let highlightedText = current.text;
+  // Find words to highlight based on semantic analysis
+  const words = current.text.toLowerCase().match(/\b\w+\b/g) || [];
+  const visionWords = ['visual', 'perception', 'perceptions', 'perceive', 'look', 'looking', 'see', 'eyes', 'reveals'];
+  const actionWords = ['action', 'actions', 'transform', 'sampling', 'sample', 'choose', 'moving', 'active', 'predicated'];
+  const thoughtWords = ['think', 'thinker', 'thinkers', 'thought', 'thinking', 'presumption', 'assume', 'idea', 'axioms', 'conceptualize'];
+  const contextWords = ['linguistically', 'communicating', 'world', 'complexity', 'aims', 'goals', 'strategy', 'enterprise', 'experience'];
+  [visionWords, actionWords, thoughtWords, contextWords].forEach(wordList => {
+    wordList.forEach(word => {
+      const regex = new RegExp(`\\b(${word})\\b`, 'gi');
+      highlightedText = highlightedText.replace(regex, '<span class="highlighted-word">$1</span>');
+    });
   });
+  const textElement = document.getElementById('current-text');
+  textElement.innerHTML = highlightedText;
+  // Add speaking class if read aloud is enabled
+  if (readAloud) {
+    textElement.classList.add('speaking');
+    speakText(current.text);
+  } else {
+    textElement.classList.remove('speaking');
+  }
   // Update progress bar
   const progress = ((currentIndex + 1) / processedData.length) * 100;
   document.getElementById('progress-fill').style.width = `${progress}%`;
 }
+function speakText(text) {
+  if (!readAloud || !speechSynthesis) return;
+  // Stop any current speech
+  speechSynthesis.cancel();
+  // Clean text for speech
+  const cleanText = text.replace(/[^\w\s.,!?]/g, '');
+  currentUtterance = new SpeechSynthesisUtterance(cleanText);
+  currentUtterance.rate = 0.8;
+  currentUtterance.pitch = 1.0;
+  currentUtterance.volume = 0.8;
+  speechSynthesis.speak(currentUtterance);
+}
 function animate() {
   if (!isPlaying) return;
+  update3DChart();
   updateTeleprompter();
   currentIndex++;
   if (currentIndex < processedData.length) {
+    animationTimer = setTimeout(animate, 3000 / animationSpeed);
   } else {
+    // Animation finished
+    if (autoRepeat) {
+      restart();
+    } else {
+      document.getElementById('playButton').innerHTML = `
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+        Restart
+      `;
+      document.getElementById('playButton').onclick = restart;
+    }
   }
 }
   const button = document.getElementById('playButton');
   if (isPlaying) {
+    button.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+      </svg>
+      Pause
+    `;
     if (currentIndex < processedData.length) {
       animate();
     }
   } else {
+    button.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M8 5v14l11-7z"/>
+      </svg>
+      Play
+    `;
     clearTimeout(animationTimer);
+    speechSynthesis.cancel();
   }
 }
   currentIndex = 0;
   isPlaying = true;
   clearTimeout(animationTimer);
+  speechSynthesis.cancel();
+  document.getElementById('playButton').innerHTML = `
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+    </svg>
+    Pause
+  `;
   document.getElementById('playButton').onclick = togglePlayPause;
   animate();
 }
   animationSpeed = Math.max(0.5, Math.min(3.0, animationSpeed + delta));
 }
+function toggleAutoRepeat() {
+  autoRepeat = !autoRepeat;
+  const button = document.getElementById('autoRepeatButton');
+  if (autoRepeat) {
+    button.classList.add('active');
+    button.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+        <circle cx="12" cy="12" r="2"/>
+      </svg>
+      Auto-Repeat ON
+    `;
+  } else {
+    button.classList.remove('active');
+    button.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+      </svg>
+      Auto-Repeat
+    `;
+  }
+}
+function toggleReadAloud() {
+  readAloud = !readAloud;
+  const button = document.getElementById('readAloudButton');
+  if (readAloud) {
+    button.classList.add('active');
+    button.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+      </svg>
+      Read Aloud ON
+    `;
+  } else {
+    button.classList.remove('active');
+    button.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+      </svg>
+      Read Aloud
+    `;
+    speechSynthesis.cancel();
+  }
+}
 // Initialize
+create3DDepthLines();
+createTimeMarkers3D();
 animate();
 </script>