function changeImage(direction, count, galleryIndex) {

app.py

@@ -437,7 +437,6 @@ def generate_transcription(video_id):
 
     return transcription
  
-
 def process_transcript_and_screenshots(video_id):
     print("====process_transcript_and_screenshots====")
 
@@ -611,6 +610,9 @@ def process_youtube_link(password, link):
     formatted_transcript_json = json.dumps(formatted_transcript, ensure_ascii=False, indent=2)
     summary_json = get_video_id_summary(video_id, formatted_simple_transcript, source)
     summary = summary_json["summary"]
+    key_moments_json = get_key_moments(video_id, formatted_simple_transcript, formatted_transcript, source)
+    key_moments = key_moments_json["key_moments"]
+    key_moments_html = get_key_moments_html(key_moments)
     html_content = format_transcript_to_html(formatted_transcript)
     simple_html_content = format_simple_transcript_to_html(formatted_simple_transcript)
     first_image = formatted_transcript[0]['screenshot_path']
@@ -632,6 +634,7 @@ def process_youtube_link(password, link):
         questions[2] if len(questions) > 2 else "", \
         formatted_transcript_json, \
         summary, \
+        key_moments_html, \
         mind_map, \
         mind_map_html, \
         html_content, \
@@ -1057,6 +1060,169 @@ def change_questions(password, df_string):
     print("=====get_questions=====")
     return q1, q2, q3
 
+# 「關鍵時刻」另外獨立成一個 tab，時間戳記和文字的下方附上對應的截圖，重點摘要的「關鍵時刻」加上截圖資訊
+def get_key_moments(video_id, formatted_simple_transcript, formatted_transcript, source):
+    if source == "gcs":
+        print("===get_key_moments on gcs===")
+        gcs_client = GCS_CLIENT
+        bucket_name = 'video_ai_assistant'
+        file_name = f'{video_id}_key_moments.json'
+        blob_name = f"{video_id}/{file_name}"
+        # 检查檔案是否存在
+        is_key_moments_exists = GCS_SERVICE.check_file_exists(bucket_name, blob_name)
+        if not is_key_moments_exists:
+            key_moments = generate_key_moments(formatted_simple_transcript, formatted_transcript)
+            key_moments_json = {"key_moments": key_moments}
+            key_moments_text = json.dumps(key_moments_json, ensure_ascii=False, indent=2)
+            upload_file_to_gcs_with_json_string(gcs_client, bucket_name, blob_name, key_moments_text)
+            print("key_moments已上傳到GCS")
+        else:
+            # key_moments已存在，下载内容
+            print("key_moments已存在于GCS中")
+            key_moments_text = download_blob_to_string(gcs_client, bucket_name, blob_name)
+            key_moments_json = json.loads(key_moments_text)
+
+    elif source == "drive":
+        print("===get_key_moments on drive===")
+        service = init_drive_service()
+        parent_folder_id = '1GgI4YVs0KckwStVQkLa1NZ8IpaEMurkL'
+        folder_id = create_folder_if_not_exists(service, video_id, parent_folder_id)
+        file_name = f'{video_id}_key_moments.json'
+
+        # 检查檔案是否存在
+        exists, file_id = check_file_exists(service, folder_id, file_name)
+        if not exists:
+            key_moments = generate_key_moments(formatted_simple_transcript, formatted_transcript)
+            key_moments_json = {"key_moments": key_moments}
+            key_moments_text = json.dumps(key_moments_json, ensure_ascii=False, indent=2)
+            upload_content_directly(service, file_name, folder_id, key_moments_text)
+            print("key_moments已上傳到Google Drive")
+        else:
+            # key_moments已存在，下载内容
+            print("key_moments已存在于Google Drive中")
+            key_moments_text = download_file_as_string(service, file_id)
+            key_moments_json = json.loads(key_moments_text)
+    
+    return key_moments_json
+
+def generate_key_moments(formatted_simple_transcript, formatted_transcript):
+    # 使用 OpenAI 生成基于上传数据的问题
+    sys_content = "你是一個擅長資料分析跟影片教學的老師，user 為學生，請精讀資料文本，自行判斷資料的種類，使用 zh-TW"
+    user_content = f"""
+        請根據 {formatted_simple_transcript} 文本，提取出重點摘要，並給出對應的時間軸
+        重點摘要的「關鍵時刻」加上截圖資訊
+        1. 小範圍切出不同段落的相對應時間軸的重點摘要，
+        2. 每一小段最多不超過 1/5 的總內容（例如五分鐘的影片就一段不超過一分鐘，10分鐘就一段最多兩分鐘）
+        3. 注意不要遺漏任何一段時間軸的內容 從零秒開始
+        4. 如果頭尾的情節不是重點，就併入到附近的段落，特別是打招呼或是介紹人物就是不重要的情節
+        以這種方式分析整個文本，從零秒開始分析，直到結束。這很重要
+
+        並用 JSON 格式返回 key_moments:[{{
+            "start": "00:00", 
+            "end": "00:00", 
+            "text": "逐字稿的重點摘要",
+            "transcript": "逐字稿的集合（要有合理的標點符號)",
+            "images": 截圖的連結們 list
+        }}]
+    """
+    messages = [
+        {"role": "system", "content": sys_content},
+        {"role": "user", "content": user_content}
+    ]
+    response_format = { "type": "json_object" }
+
+    request_payload = {
+        "model": "gpt-4-1106-preview",
+        "messages": messages,
+        "max_tokens": 4000,
+        "response_format": response_format
+    }
+
+    response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
+    key_moments = json.loads(response.choices[0].message.content)["key_moments"]
+    print("=====key_moments=====")
+    print(key_moments)
+    print("=====key_moments=====")
+    image_links = {entry['start_time']: entry['screenshot_path'] for entry in formatted_transcript}
+    for moment in key_moments:
+        start_time = moment['start']
+        end_time = moment['end']
+        moment_images = [image_links[time] for time in image_links if start_time <= time <= end_time]
+        moment['images'] = moment_images
+
+    return key_moments
+
+def get_key_moments_html(key_moments):
+    """
+    Generates HTML for key moments with a left-side gallery and right-side text.
+    """
+    css = """
+    <style>
+    /* Existing CSS from your sample ... */
+
+    .gallery-container {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+    .image-container {
+        position: relative;
+        max-height: 350px;
+        flex: 1;
+    }
+    .image-container img {
+        max-height: 350px;
+        display: block;
+        margin: 0 auto; /* Center the image */
+    }
+    .text-content {
+        flex: 2;
+        margin-left: 20px;
+    }
+    .arrow {
+        cursor: pointer;
+        user-select: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        background-color: rgba(255, 255, 255, 0.8);
+        border: none;
+        padding: 10px;
+        font-size: 24px;
+        z-index: 10;
+    }
+    .arrow-prev { left: 0; }
+    .arrow-next { right: 0; }
+    </style>
+    """
+
+    key_moments_html = "" + css
+
+    for i, moment in enumerate(key_moments):
+        start_time = moment['start']
+        end_time = moment['end']
+        text = moment['text']
+        transcript = moment['transcript']
+        images = moment['images']
+        image_elements = "".join([f'<img src="{img}" alt="Image {idx}" class="slide-image slide-image-{i}-{idx}" style="display: {"" if idx == 0 else "none"};" />' for idx, img in enumerate(images)])
+
+        key_moments_html += f"""
+        <div class="gallery-container">
+            <div class="image-container">
+                <button class="arrow arrow-prev" onclick="changeImage(-1, {len(images)}, {i})">&#10094;</button>
+                {image_elements}
+                <button class="arrow arrow-next" onclick="changeImage(1, {len(images)}, {i})">&#10095;</button>
+            </div>
+            <div class="text-content">
+                <h3>{start_time} - {end_time}</h3>
+                <p><strong>摘要:</strong> {text}</p>
+                <p><strong>逐字稿:</strong> {transcript}</p>
+            </div>
+        </div>
+        """
+
+    return key_moments_html
+
 # ---- LLM CRUD ----
 def enable_edit_mode():
     return gr.update(interactive=True)
@@ -1545,6 +1711,43 @@ HEAD = """
             });
         }
     </script>
+
+    <script>
+        function changeImage(direction, count, galleryIndex) {
+            // Find the current visible image by iterating over possible indices
+            var currentImage = null;
+            var currentIndex = -1;
+            for (var i = 0; i < count; i++) {
+                var img = document.querySelector('.slide-image-' + galleryIndex + '-' + i);
+                if (img && img.style.display !== 'none') {
+                    currentImage = img;
+                    currentIndex = i;
+                    break;
+                }
+            }
+
+            // If no current image is visible, show the first one and return
+            if (currentImage === null) {
+                document.querySelector('.slide-image-' + galleryIndex + '-0').style.display = 'block';
+                console.error('No current image found for galleryIndex ' + galleryIndex + ', defaulting to first image.');
+                return;
+            }
+
+            // Hide the current image
+            currentImage.style.display = 'none';
+
+            // Calculate the index of the next image to show
+            var newIndex = (currentIndex + direction + count) % count;
+
+            // Select the next image and show it
+            var nextImage = document.querySelector('.slide-image-' + galleryIndex + '-' + newIndex);
+            if (nextImage) {
+                nextImage.style.display = 'block';
+            } else {
+                console.error('No image found for galleryIndex ' + galleryIndex + ' and newIndex ' + newIndex);
+            }
+        }
+    </script>
 """
 
 with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, secondary_hue=gr.themes.colors.amber, text_size = gr.themes.sizes.text_lg), head=HEAD) as demo:
@@ -1615,7 +1818,10 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
             summary_delete_button = gr.Button("刪除", size="sm", variant="primary")
             summary_create_button = gr.Button("建立", size="sm", variant="primary")
         with gr.Row():
-            df_summarise = gr.Textbox(container=True, show_copy_button=True, lines=40, show_label=False)    
+            df_summarise = gr.Textbox(container=True, show_copy_button=True, lines=40, show_label=False)
+    with gr.Tab("關鍵時刻"):
+        with gr.Row():
+            key_moments_html = gr.HTML(value="")
     with gr.Tab("教學備課"):
         with gr.Row():
             content_subject = gr.Dropdown(label="選擇主題", choices=["數學", "自然", "國文", "英文", "社會","物理", "化學", "生物", "地理", "歷史", "公民"], value="", visible=False)             
@@ -1796,7 +2002,8 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, seconda
         btn_2, 
         btn_3, 
         df_string_output, 
-        df_summarise, 
+        df_summarise,
+        key_moments_html,
         mind_map, 
         mind_map_html,
         transcript_html,