Spaces:

awacke1
/

JBP-Wisdom-Visualizer

Running

App Files Files Community

awacke1 commited on Jul 20

Commit

32960ac

verified ·

1 Parent(s): ba8ed62

Update index.html

Browse files

Files changed (1) hide show

index.html +495 -18

index.html CHANGED Viewed

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

+<!DOCTYPE html>
 <html>
+<head>
+  <title>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: 1200px;
+      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);
+    }
+    .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-color {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+    }
+    .controls {
+      text-align: center;
+      margin: 20px 0;
+    }
+    button {
+      background: linear-gradient(45deg, #667eea, #764ba2);
+      border: none;
+      color: white;
+      padding: 12px 24px;
+      margin: 0 10px;
+      border-radius: 25px;
+      cursor: pointer;
+      font-size: 16px;
+      transition: transform 0.2s;
+    }
+    button:hover {
+      transform: translateY(-2px);
+    }
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none;
+    }
+    .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;
+    }
+  </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 <span class="highlighted-word">linguistically</span>.
+        </div>
+      </div>
+      <div class="progress-bar">
+        <div class="progress-fill" id="progress-fill"></div>
+      </div>
+    </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',
+  thought: '#3742fa',
+  context: '#ffa502'
+};
+// Animation state
+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');
+      label.textContent = entry.time;
+      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() {
+  if (currentIndex >= processedData.length) return;
+  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;
+  }
+}
+function togglePlayPause() {
+  isPlaying = !isPlaying;
+  const button = document.getElementById('playButton');
+  if (isPlaying) {
+    button.textContent = '⏸️ Pause';
+    if (currentIndex < processedData.length) {
+      animate();
+    }
+  } else {
+    button.textContent = '▶️ Play';
+    clearTimeout(animationTimer);
+  }
+}
+function restart() {
+  currentIndex = 0;
+  isPlaying = true;
+  clearTimeout(animationTimer);
+  document.getElementById('playButton').textContent = '⏸️ Pause';
+  document.getElementById('playButton').onclick = togglePlayPause;
+  animate();
+}
+function changeSpeed(delta) {
+  animationSpeed = Math.max(0.5, Math.min(3.0, animationSpeed + delta));
+}
+// Initialize
+createTimeSeries();
+animate();
+</script>
+</body>
+</html>