TRASCRIPTS = []

app.py

@@ -49,13 +49,11 @@ from urllib.parse import urlparse, parse_qs
 
 
 OUTPUT_PATH = 'videos'
-
+TRASCRIPTS = []
 
 OPEN_AI_KEY = os.getenv("OPEN_AI_KEY")
 client = OpenAI(api_key=OPEN_AI_KEY)
 
-JS = ''
-CSS = ''
 
 # # ====drive====初始化Google Drive服务
 def init_drive_service():
@@ -311,92 +309,28 @@ def process_youtube_link(link):
     df_string_output = json.dumps(transcript, ensure_ascii=False, indent=2)
     df_summarise = generate_df_summarise(transcript)
 
+    global TRASCRIPTS
+    TRASCRIPTS = formatted_transcript
+
     # 确保返回与 UI 组件预期匹配的输出
     return questions[0] if len(questions) > 0 else "", \
             questions[1] if len(questions) > 1 else "", \
             questions[2] if len(questions) > 2 else "", \
             df_string_output, \
             df_summarise, \
-            html_content,  
+            html_content
+            
 
 def format_transcript_to_html(formatted_transcript):
-    # html_content = ""
-    # for entry in formatted_transcript:
-    #     html_content += f"<h3>{entry['start_time']} - {entry['end_time']}</h3>"
-    #     html_content += f"<p>{entry['text']}</p>"
-    #     html_content += f"<img src='{entry['screenshot_path']}' width='500px' />"
-    # return html_content
-
-    CSS = """
-        #contentDisplay {{
-            width: 500px;
-            margin: auto;
-            text-align: center;
-        }}
-        #imageDisplay {{
-            width: 500px;
-            height: 300px;
-            background-color: #f0f0f0;
-            background-size: contain;
-            background-position: center center;
-            background-repeat: no-repeat;
-            margin-bottom: 20px;
-        }}
-    """
-
-    # 将逐字稿数据转换为 JavaScript 对象数组
-    entries_js_array = ',\n    '.join([
-        json.dumps({
-            "start_time": entry['start_time'],
-            "end_time": entry['end_time'],
-            "text": entry['text'],
-            "screenshot_path": entry['screenshot_path']
-        }, ensure_ascii=False) for entry in formatted_transcript
-    ])
-
-    JS = f"""
-        var entries = [
-            {entries_js_array}
-        ];
-        var currentIndex = 0;
-
-        function updateContentDisplay(index) {{
-            var entry = entries[index];
-            document.getElementById('imageDisplay').style.backgroundImage = 'url(' + entry.screenshot_path + ')';
-            document.getElementById('timeDisplay').innerText = entry.start_time + " - " + entry.end_time;
-            document.getElementById('textDisplay').innerText = entry.text;
-        }}
-
-        updateContentDisplay(currentIndex);
-
-        document.getElementById('prevButton').addEventListener('click', function() {{
-            if (currentIndex > 0) {{
-                currentIndex -= 1;
-                updateContentDisplay(currentIndex);
-            }}
-        }});
-
-        document.getElementById('nextButton').addEventListener('click', function() {{
-            if (currentIndex < entries.length - 1) {{
-                currentIndex += 1;
-                updateContentDisplay(currentIndex);
-            }}
-        }});    
-    """
-
-    html_content = """
-        <div id="contentDisplay">
-            <div id="imageDisplay"></div>
-            <p id="timeDisplay"></p>
-            <p id="textDisplay"></p>
-            <button id="prevButton">上一個</button>
-            <button id="nextButton">下一個</button> 
-        </div>
-    """
-
+    html_content = ""
+    for entry in formatted_transcript:
+        html_content += f"<h3>{entry['start_time']} - {entry['end_time']}</h3>"
+        html_content += f"<p>{entry['text']}</p>"
+        html_content += f"<img src='{entry['screenshot_path']}' width='500px' />"
     return html_content
 
 
+
 def get_embedded_youtube_link(video_id, start_time):
     embed_url = f"https://www.youtube.com/embed/{video_id}?start={start_time}&autoplay=1"
     return embed_url
@@ -544,7 +478,21 @@ def respond(user_message, df_string_output, chat_history):
     # 返回聊天历史和空字符串清空输入框
     return "", chat_history
 
-with gr.Blocks(css=CSS, js=JS) as demo:
+def update_slide(direction):
+    current_index[0] += direction
+    if current_index[0] < 0:
+        current_index[0] = 0  # 防止索引小于0
+    elif current_index[0] >= len(TRASCRIPTS):
+        current_index[0] = len(TRASCRIPTS) - 1  # 防止索引超出范围
+    
+    # 获取当前条目的文本和截图 URL
+    current_transcript = TRASCRIPTS[current_index[0]]
+    return current_transcript["screenshot_url"], current_transcript["text"]
+
+
+current_index = [0]
+
+with gr.Blocks() as demo:
     with gr.Row():
         with gr.Column():
             file_upload = gr.File(label="Upload your CSV or Word file")
@@ -555,6 +503,18 @@ with gr.Blocks(css=CSS, js=JS) as demo:
             send_button = gr.Button("Send")
 
         with gr.Column():
+            with gr.Tab("投影片"):
+                
+                image = gr.Image()
+                text = gr.Textbox()
+                with gr.Row():
+                    prev_button = gr.Button("上一个")
+                    next_button = gr.Button("下一个")
+                
+                # 设置按钮的动作
+                prev_button.click(fn=update_slide, inputs=-1, outputs=[image, text])
+                next_button.click(fn=update_slide, inputs=1, outputs=[image, text])
+                update_slide(0)
             with gr.Tab("YouTube Transcript and Video"):
                 transcript_html = gr.HTML(label="YouTube Transcript and Video")            
             with gr.Tab("資料本文"):