|
<!DOCTYPE html>
|
|
<html lang="zh-HK">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>廣東話 Youtube 內容總結工具</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
.summary-content {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
.transcript-content {
|
|
display: none;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
.btn-custom {
|
|
transition: background-color 0.3s;
|
|
}
|
|
.btn-custom:hover {
|
|
opacity: 0.9;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<h1 class="text-3xl font-bold mb-4">廣東話 Youtube 內容總結工具</h1>
|
|
<p class="text-sm text-gray-500 mb-4">by Adam Chan. 2024-10 (Beta-0.8) 😃如果這工具對你有用，歡迎發個訊息👍給作者以示鼓勵。</p>
|
|
<p class="mb-6">這工具能自動下載 YouTube 視頻音頻，轉錄為文字，並生成詳細摘要。它支持長視頻，使用先進的 AI 模型進行轉錄和摘要生成。無論是研究、學習還是內容創作，這工具都能幫您快速掌握視頻核心內容，節省寶貴時間。現在還能利用視頻描述來提高摘要的準確性！</p>
|
|
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-semibold mb-2">選擇處理方式：</h2>
|
|
<div class="flex space-x-4">
|
|
<button id="youtubeBtn" class="btn-custom px-4 py-2 bg-[#E57373] text-white rounded">YouTube 視頻</button>
|
|
<button id="localVideoBtn" class="btn-custom px-4 py-2 bg-[#64B5F6] text-white rounded">本地視頻文件</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="youtubeInput" class="mb-6 hidden">
|
|
<label for="youtubeUrl" class="block mb-2">輸入 YouTube URL：</label>
|
|
<input type="text" id="youtubeUrl" class="w-full p-2 border rounded" placeholder="https://www.youtube.com/watch?v=...">
|
|
</div>
|
|
|
|
<div id="localVideoInput" class="mb-6 hidden">
|
|
<label for="localVideoFile" class="block mb-2">選擇本地視頻文件（僅支持 .mp4）：</label>
|
|
<input type="file" id="localVideoFile" accept=".mp4" class="w-full p-2 border rounded">
|
|
<textarea id="localVideoDescription" class="w-full p-2 border rounded mt-2" rows="4" placeholder="請輸入視頻描述（可選）"></textarea>
|
|
</div>
|
|
|
|
<button id="startProcessing" class="btn-custom px-6 py-3 bg-[#81C784] text-white rounded font-bold">開始處理</button>
|
|
|
|
<div id="videoInfo" class="mt-6 hidden">
|
|
<h3 class="text-lg font-semibold mb-2">📺 視頻信息：</h3>
|
|
<div id="videoInfoContent" class="summary-content p-4 bg-white rounded shadow"></div>
|
|
</div>
|
|
|
|
<div id="status" class="mt-6 p-4 bg-blue-100 rounded hidden"></div>
|
|
|
|
<div id="summary" class="mt-6 hidden">
|
|
<h3 class="text-lg font-semibold mb-2">📍 最終摘要：</h3>
|
|
<div id="finalSummary" class="summary-content p-4 bg-white rounded shadow"></div>
|
|
<div class="mt-4 flex justify-between items-center">
|
|
<button id="refineSummary" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
|
重新生成摘要
|
|
</button>
|
|
<button id="prevVersion" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
|
|
上一個版本
|
|
</button>
|
|
<button id="nextVersion" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
|
|
下一個版本
|
|
</button>
|
|
<span id="summaryVersion">版本：1/1</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="summaryLightbox" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
|
|
<div class="relative top-20 mx-auto p-5 border w-2/3 max-w-2xl shadow-lg rounded-md bg-white">
|
|
<h5 class="text-lg font-bold mb-4">請提供您的反饋意見</h5>
|
|
<textarea id="userFeedback" class="w-full h-32 p-2 border rounded" placeholder="請輸入您的反饋..."></textarea>
|
|
<button id="submitFeedback" class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
|
提交
|
|
</button>
|
|
<div id="feedbackLoading" class="mt-4 text-center hidden">
|
|
⌛️ 新內容製作中...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="segmentSummaries" class="mt-6 hidden">
|
|
<h3 class="text-lg font-semibold mb-2">🔗 段落摘要：</h3>
|
|
<div id="summaries" class="summary-content p-4 bg-white rounded shadow"></div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<button id="toggleTranscript" class="btn-custom px-4 py-2 bg-gray-600 text-white rounded">顯示/隱藏轉錄文本</button>
|
|
<div id="transcript" class="mt-4 p-4 bg-white rounded shadow transcript-content"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/main.js"></script>
|
|
</body>
|
|
</html> |
