Hugging Face's logo

Spaces:
adamchanadam
/
canton_yt-summary-space
Paused

App Files Community
canton_yt-summary-space
File size: 5,457 Bytes 
4abfe80
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
<!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>

        <!-- 添加 Lightbox -->
        <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>