Spaces:
Running
Running
File size: 3,550 Bytes
87e1e4c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | document.addEventListener('DOMContentLoaded', function() {
// Simulate playback progress
const progressBar = document.querySelector('.bg-blue-500');
let progress = 10;
const progressInterval = setInterval(() => {
progress += 0.1;
if (progress > 100) {
clearInterval(progressInterval);
return;
}
progressBar.style.width = `${progress}%`;
}, 1000);
// Play/pause button functionality
const playButton = document.querySelector('button[aria-label="Play"]');
playButton.addEventListener('click', function() {
const icon = this.querySelector('i');
if (icon.dataset.feather === 'play') {
icon.dataset.feather = 'pause';
feather.replace();
} else {
icon.dataset.feather = 'play';
feather.replace();
}
});
// Simulate conversation loading
const transcriptContainer = document.querySelector('.overflow-y-auto');
const conversation = [
{
speaker: "Michael",
text: "The key to throughput optimization lies in the parallel processing architecture we've developed. It allows for simultaneous data streams without resource contention.",
time: "03:45"
},
{
speaker: "Sarah",
text: "That's fascinating! How does this compare to traditional sequential processing models?",
time: "05:12"
},
{
speaker: "Michael",
text: "We're seeing about 3.2x improvement in benchmark tests, with even greater gains in real-world deployment scenarios.",
time: "06:30"
},
{
speaker: "Sarah",
text: "Our listeners in enterprise environments will be particularly interested in the deployment specifications. Can you walk us through those?",
time: "08:45"
}
];
let currentIndex = 0;
const conversationInterval = setInterval(() => {
if (currentIndex >= conversation.length) {
clearInterval(conversationInterval);
return;
}
const message = conversation[currentIndex];
const bubble = document.createElement('div');
bubble.className = `flex items-start space-x-3`;
if (message.speaker === "Michael") {
bubble.innerHTML = `
<img src="http://static.photos/people/200x200/2" alt="Michael" class="w-8 h-8 rounded-full mt-1">
<div class="bg-green-50 rounded-lg p-3 max-w-[80%]">
<p class="font-medium text-green-800">Michael</p>
<p class="text-gray-700 mt-1">${message.text}</p>
<p class="text-xs text-gray-500 mt-2">${message.time}</p>
</div>
`;
} else {
bubble.innerHTML = `
<img src="http://static.photos/people/200x200/1" alt="Sarah" class="w-8 h-8 rounded-full mt-1">
<div class="bg-blue-50 rounded-lg p-3 max-w-[80%]">
<p class="font-medium text-blue-800">Sarah</p>
<p class="text-gray-700 mt-1">${message.text}</p>
<p class="text-xs text-gray-500 mt-2">${message.time}</p>
</div>
`;
}
transcriptContainer.insertBefore(bubble, transcriptContainer.lastElementChild);
transcriptContainer.scrollTop = transcriptContainer.scrollHeight;
currentIndex++;
}, 8000);
}); |