Spaces:

awacke1
/

JBP-Wisdom-Visualizer

Running

File size: 30,336 Bytes

<!DOCTYPE html>
<html>
<head>
  <title>3D SVG Transcript Time Series with Teleprompter</title>
  <style>
    body { 
      margin: 0; 
      padding: 20px;
      font-family: Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
    }
    
    .teleprompter {
      background: rgba(0,0,0,0.8);
      border-radius: 15px;
      padding: 30px;
      margin-bottom: 30px;
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255,255,255,0.1);
    }
    
    .teleprompter-text {
      font-size: 24px;
      line-height: 1.6;
      text-align: center;
      min-height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .timestamp {
      color: #ff6b6b;
      font-weight: bold;
      font-size: 28px;
      margin-bottom: 10px;
    }
    
    .current-text {
      opacity: 1;
      transition: opacity 0.5s ease;
    }
    
    .highlighted-word {
      background: linear-gradient(45deg, #ff6b6b, #ffa500);
      padding: 2px 6px;
      border-radius: 4px;
      animation: pulse 1s infinite;
    }
    
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    
    .chart-container {
      background: rgba(255,255,255,0.95);
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
      position: relative;
      overflow: hidden;
    }
    
    .cluster-legend {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    
    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: bold;
      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 {
      background: linear-gradient(45deg, #667eea, #764ba2);
      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: translateY(-2px);
    }
    
    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }
    
    button.active {
      background: linear-gradient(45deg, #ff6b6b, #ffa500);
    }
    
    .progress-bar {
      width: 100%;
      height: 6px;
      background: rgba(255,255,255,0.3);
      border-radius: 3px;
      margin: 20px 0;
      overflow: hidden;
    }
    
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #ff6b6b, #ffa500);
      width: 0%;
      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="container">
    <div class="teleprompter">
      <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 class="progress-fill" id="progress-fill"></div>
      </div>
    </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', 
  thought: '#3742fa',
  context: '#ffa502'
};

// Animation state
let currentIndex = 0;
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');
      label.textContent = entry.time;
      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() {
  if (currentIndex >= processedData.length) return;
  
  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;
    }
  }
}

function togglePlayPause() {
  isPlaying = !isPlaying;
  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();
  }
}

function restart() {
  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();
}

function changeSpeed(delta) {
  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>
</body>
</html>