Spaces:

velobot
/

poddialogue-visualizer

Running

App Files Files Community

velobot commited on Nov 25, 2025

Commit

87e1e4c

verified ·

1 Parent(s): fcc0928

Create a professional video between a women and a men in regards to the podcast that is attached: /Users/orbital/Desktop/Velocity folder/Velocity_Plotter_Specs_Deployment_and_Throughput_Secrets.m4a

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +162 -19
script.js +88 -0
style.css +35 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Poddialogue Visualizer
-emoji: 🐠
-colorFrom: indigo
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: PodDialogue Visualizer 🎙️
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,162 @@
-<!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 lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PodDialogue Visualizer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="mb-10">
+            <h1 class="text-4xl font-bold text-center text-gray-800">PodDialogue Visualizer 🎙️</h1>
+            <p class="text-lg text-center text-gray-600 mt-2">Visualizing conversations from your favorite podcasts</p>
+        </header>
+        <main class="bg-white rounded-xl shadow-lg p-6 md:p-8">
+            <div class="flex flex-col md:flex-row gap-8">
+                <!-- Video Player Section -->
+                <div class="flex-1">
+                    <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden">
+                        <div class="w-full h-full flex items-center justify-center">
+                            <div class="text-center">
+                                <i data-feather="play-circle" class="w-16 h-16 text-gray-400 mx-auto"></i>
+                                <p class="mt-2 text-gray-500">Podcast visualization will appear here</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-6 space-y-4">
+                        <h2 class="text-2xl font-semibold text-gray-800">Velocity Plotter: Specs, Deployment and Throughput Secrets</h2>
+                        <p class="text-gray-600">A professional discussion between industry experts</p>
+                        <div class="flex items-center space-x-4">
+                            <div class="flex -space-x-2">
+                                <img src="http://static.photos/people/200x200/1" alt="Speaker 1" class="w-10 h-10 rounded-full border-2 border-white">
+                                <img src="http://static.photos/people/200x200/2" alt="Speaker 2" class="w-10 h-10 rounded-full border-2 border-white">
+                            </div>
+                            <div>
+                                <p class="font-medium text-gray-700">Hosted by Sarah & Michael</p>
+                                <p class="text-sm text-gray-500">45 min • Technology Podcast</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Transcript Section -->
+                <div class="flex-1">
+                    <div class="bg-gray-50 rounded-lg p-5 h-full">
+                        <div class="flex justify-between items-center mb-4">
+                            <h3 class="text-xl font-semibold text-gray-800">Conversation Transcript</h3>
+                            <button class="text-blue-500 hover:text-blue-700 flex items-center">
+                                <i data-feather="download" class="w-4 h-4 mr-1"></i>
+                                <span>Download</span>
+                            </button>
+                        </div>
+                        <div class="space-y-6 overflow-y-auto max-h-96">
+                            <!-- Conversation bubble 1 -->
+                            <div class="flex items-start space-x-3">
+                                <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">Today we're discussing the Velocity Plotter specifications and the secrets behind its deployment and throughput...</p>
+                                    <p class="text-xs text-gray-500 mt-2">00:45</p>
+                                </div>
+                            </div>
+                            <!-- Conversation bubble 2 -->
+                            <div class="flex items-start space-x-3">
+                                <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">That's right, Sarah. The deployment architecture is particularly interesting because it uses a novel approach to resource allocation...</p>
+                                    <p class="text-xs text-gray-500 mt-2">01:20</p>
+                                </div>
+                            </div>
+                            <!-- Conversation bubble 3 -->
+                            <div class="flex items-start space-x-3">
+                                <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">Could you elaborate on the throughput optimization techniques? Our listeners would love to hear about that.</p>
+                                    <p class="text-xs text-gray-500 mt-2">02:15</p>
+                                </div>
+                            </div>
+                            <!-- Placeholder for more conversation -->
+                            <div class="text-center py-4">
+                                <p class="text-gray-400">More conversation will appear as the podcast plays</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Audio Controls -->
+            <div class="mt-8 bg-gray-50 rounded-lg p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <span class="text-sm text-gray-500">00:45</span>
+                    <span class="text-sm text-gray-500">45:22</span>
+                </div>
+                <div class="relative pt-1">
+                    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200">
+                        <div style="width: 10%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"></div>
+                    </div>
+                </div>
+                <div class="flex items-center justify-center space-x-6">
+                    <button class="p-2 rounded-full bg-gray-200 hover:bg-gray-300">
+                        <i data-feather="skip-back" class="w-5 h-5 text-gray-700"></i>
+                    </button>
+                    <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 text-white">
+                        <i data-feather="play" class="w-6 h-6"></i>
+                    </button>
+                    <button class="p-2 rounded-full bg-gray-200 hover:bg-gray-300">
+                        <i data-feather="skip-forward" class="w-5 h-5 text-gray-700"></i>
+                    </button>
+                    <div class="flex items-center space-x-2">
+                        <i data-feather="volume-2" class="w-4 h-4 text-gray-500"></i>
+                        <div class="w-20 bg-gray-200 rounded-full h-1"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Related Content -->
+            <div class="mt-12">
+                <h3 class="text-xl font-semibold text-gray-800 mb-4">More Episodes</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <div class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition">
+                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded mb-3"></div>
+                        <h4 class="font-medium text-gray-800">Performance Metrics Deep Dive</h4>
+                        <p class="text-sm text-gray-500 mt-1">Sarah & Michael • 38 min</p>
+                    </div>
+                    <div class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition">
+                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded mb-3"></div>
+                        <h4 class="font-medium text-gray-800">Cloud Deployment Strategies</h4>
+                        <p class="text-sm text-gray-500 mt-1">Sarah & Michael • 42 min</p>
+                    </div>
+                    <div class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition">
+                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded mb-3"></div>
+                        <h4 class="font-medium text-gray-800">The Future of Data Throughput</h4>
+                        <p class="text-sm text-gray-500 mt-1">Sarah & Michael • 51 min</p>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <footer class="mt-16 text-center text-gray-500 text-sm">
+            <p>© 2023 PodDialogue Visualizer. All rights reserved.</p>
+        </footer>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,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);
+});

style.css CHANGED Viewed

@@ -1,28 +1,45 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar for transcript */
+::-webkit-scrollbar {
+    width: 6px;
 }
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 10px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #a1a1a1;
 }
+/* Animation for conversation bubbles */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+.flex.items-start.space-x-3 {
+    animation: fadeIn 0.3s ease-out forwards;
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .flex-col.md\:flex-row {
+        flex-direction: column;
+    }
+    .max-w-\[80\%\] {
+        max-width: 100%;
+    }
+}