|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Transcript - TranscriptFlow AI</title> |
|
|
<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> |
|
|
<style> |
|
|
.transcript-container { |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #4F46E5 #E5E7EB; |
|
|
} |
|
|
.transcript-container::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
.transcript-container::-webkit-scrollbar-track { |
|
|
background: #E5E7EB; |
|
|
} |
|
|
.transcript-container::-webkit-scrollbar-thumb { |
|
|
background-color: #4F46E5; |
|
|
border-radius: 4px; |
|
|
} |
|
|
[contenteditable="true"] { |
|
|
outline: 1px dashed #E5E7EB; |
|
|
padding: 0.5rem; |
|
|
border-radius: 0.25rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h1 class="text-2xl font-bold text-gray-800">Transcript</h1> |
|
|
<div class="flex gap-2"> |
|
|
<button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg flex items-center gap-2 transition"> |
|
|
<i data-feather="edit-2" class="w-4 h-4"></i> |
|
|
<span>Edit</span> |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg flex items-center gap-2 transition"> |
|
|
<i data-feather="download" class="w-4 h-4"></i> |
|
|
<span>Export</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 bg-gray-50"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="text-sm text-gray-600">Source:</span> |
|
|
<span class="ml-2 text-sm font-medium text-indigo-600">https://youtube.com/watch?v=dQw4w9WgXcQ</span> |
|
|
</div> |
|
|
<div class="flex gap-3"> |
|
|
<div> |
|
|
<span class="text-sm text-gray-600">Duration:</span> |
|
|
<span class="ml-2 text-sm font-medium">3:45</span> |
|
|
</div> |
|
|
<div> |
|
|
<span class="text-sm text-gray-600">Words:</span> |
|
|
<span class="ml-2 text-sm font-medium">742</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="transcript-container p-6 h-[75vh] overflow-y-auto bg-white"> |
|
|
<div class="space-y-6"> |
|
|
<div class="transcript-segment"> |
|
|
<div class="text-sm text-gray-500 mb-1">00:00:00 - 00:00:12</div> |
|
|
<div class="text-gray-800" contenteditable="false"> |
|
|
[Intro music] Welcome everyone to this week's podcast episode. Today we have a very special guest joining us. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="transcript-segment"> |
|
|
<div class="text-sm text-gray-500 mb-1">00:00:12 - 00:00:23</div> |
|
|
<div class="text-gray-800" contenteditable="false"> |
|
|
Uh, so Dr. Smith, thank you for, um, taking the time to be with us today. Could you tell us a little bit about, uh, your research in artificial intelligence? |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="transcript-segment"> |
|
|
<div class="text-sm text-gray-500 mb-1">00:00:23 - 00:00:37</div> |
|
|
<div class="text-gray-800" contenteditable="false"> |
|
|
Well, thank you for having me. The, uh, the field of AI has seen tremendous growth in recent years. My team has been focusing on, um, natural language processing and how we can make these systems more, uh, more human-like in their understanding. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="transcript-segment"> |
|
|
<div class="text-sm text-gray-500 mb-1">00:00:37 - 00:00:52</div> |
|
|
<div class="text-gray-800" contenteditable="false"> |
|
|
That's fascinating. Now, when you say "more human-like," could you, uh, expand on what you mean by that? Because I think our listeners would be very interested to hear about, um, the implications of that kind of advancement. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="transcript-segment"> |
|
|
<div class="text-sm text-gray-500 mb-1">00:00:52 - 00:01:10</div> |
|
|
<div class="text-gray-800" contenteditable="false"> |
|
|
Absolutely. So, uh, current systems are very good at pattern matching, right? But they lack, um, what we might call genuine understanding. My research focuses on, uh, creating models that can grasp context beyond just statistical patterns. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-gray-200 bg-gray-50 flex justify-between"> |
|
|
<div class="flex gap-2"> |
|
|
<button class="p-2 text-gray-500 hover:text-indigo-600 hover:bg-gray-100 rounded transition" title="Increase font"> |
|
|
<i data-feather="plus"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-indigo-600 hover:bg-gray-100 rounded transition" title="Decrease font"> |
|
|
<i data-feather="minus"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-indigo-600 hover:bg-gray-100 rounded transition" title="Toggle word wrap"> |
|
|
<i data-feather="type"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex gap-2"> |
|
|
<button class="p-2 text-gray-500 hover:text-indigo-600 hover:bg-gray-100 rounded transition" title="Copy to clipboard"> |
|
|
<i data-feather="copy"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-indigo-600 hover:bg-gray-100 rounded transition" title="Print"> |
|
|
<i data-feather="printer"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
