Spaces:
Sleeping
Sleeping
def format_transcript_to_html(formatted_transcript):
Browse files
app.py
CHANGED
@@ -317,13 +317,93 @@ def process_youtube_link(link):
|
|
317 |
html_content,
|
318 |
|
319 |
def format_transcript_to_html(formatted_transcript):
|
320 |
-
html_content = ""
|
321 |
-
for entry in formatted_transcript:
|
322 |
-
|
323 |
-
|
324 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
325 |
return html_content
|
326 |
|
|
|
327 |
def get_embedded_youtube_link(video_id, start_time):
|
328 |
embed_url = f"https://www.youtube.com/embed/{video_id}?start={start_time}&autoplay=1"
|
329 |
return embed_url
|
|
|
317 |
html_content,
|
318 |
|
319 |
def format_transcript_to_html(formatted_transcript):
|
320 |
+
# html_content = ""
|
321 |
+
# for entry in formatted_transcript:
|
322 |
+
# html_content += f"<h3>{entry['start_time']} - {entry['end_time']}</h3>"
|
323 |
+
# html_content += f"<p>{entry['text']}</p>"
|
324 |
+
# html_content += f"<img src='{entry['screenshot_path']}' width='500px' />"
|
325 |
+
# return html_content
|
326 |
+
|
327 |
+
# 将逐字稿数据转换为 JavaScript 对象数组
|
328 |
+
entries_js_array = ',\n '.join([
|
329 |
+
json.dumps({
|
330 |
+
"start_time": entry['start_time'],
|
331 |
+
"end_time": entry['end_time'],
|
332 |
+
"text": entry['text'],
|
333 |
+
"screenshot_path": entry['screenshot_path']
|
334 |
+
}, ensure_ascii=False) for entry in formatted_transcript
|
335 |
+
])
|
336 |
+
|
337 |
+
# 创建 HTML 内容
|
338 |
+
html_content = f"""
|
339 |
+
<!DOCTYPE html>
|
340 |
+
<html>
|
341 |
+
<head>
|
342 |
+
<title>Transcript Viewer</title>
|
343 |
+
<style>
|
344 |
+
#contentDisplay {{
|
345 |
+
width: 500px;
|
346 |
+
margin: auto;
|
347 |
+
text-align: center;
|
348 |
+
}}
|
349 |
+
#imageDisplay {{
|
350 |
+
width: 500px;
|
351 |
+
height: 300px;
|
352 |
+
background-color: #f0f0f0;
|
353 |
+
background-size: contain;
|
354 |
+
background-position: center center;
|
355 |
+
background-repeat: no-repeat;
|
356 |
+
margin-bottom: 20px;
|
357 |
+
}}
|
358 |
+
</style>
|
359 |
+
</head>
|
360 |
+
<body>
|
361 |
+
|
362 |
+
<div id="contentDisplay">
|
363 |
+
<div id="imageDisplay"></div>
|
364 |
+
<h3 id="timeDisplay"></h3>
|
365 |
+
<p id="textDisplay"></p>
|
366 |
+
</div>
|
367 |
+
<button id="prevButton">Previous</button>
|
368 |
+
<button id="nextButton">Next</button>
|
369 |
+
|
370 |
+
<script>
|
371 |
+
var entries = [
|
372 |
+
{entries_js_array}
|
373 |
+
];
|
374 |
+
var currentIndex = 0;
|
375 |
+
|
376 |
+
function updateContentDisplay(index) {{
|
377 |
+
var entry = entries[index];
|
378 |
+
document.getElementById('imageDisplay').style.backgroundImage = 'url(' + entry.screenshot_path + ')';
|
379 |
+
document.getElementById('timeDisplay').innerText = entry.start_time + " - " + entry.end_time;
|
380 |
+
document.getElementById('textDisplay').innerText = entry.text;
|
381 |
+
}}
|
382 |
+
|
383 |
+
updateContentDisplay(currentIndex);
|
384 |
+
|
385 |
+
document.getElementById('prevButton').addEventListener('click', function() {{
|
386 |
+
if (currentIndex > 0) {{
|
387 |
+
currentIndex -= 1;
|
388 |
+
updateContentDisplay(currentIndex);
|
389 |
+
}}
|
390 |
+
}});
|
391 |
+
|
392 |
+
document.getElementById('nextButton').addEventListener('click', function() {{
|
393 |
+
if (currentIndex < entries.length - 1) {{
|
394 |
+
currentIndex += 1;
|
395 |
+
updateContentDisplay(currentIndex);
|
396 |
+
}}
|
397 |
+
}});
|
398 |
+
</script>
|
399 |
+
|
400 |
+
</body>
|
401 |
+
</html>
|
402 |
+
"""
|
403 |
+
|
404 |
return html_content
|
405 |
|
406 |
+
|
407 |
def get_embedded_youtube_link(video_id, start_time):
|
408 |
embed_url = f"https://www.youtube.com/embed/{video_id}?start={start_time}&autoplay=1"
|
409 |
return embed_url
|