Update app.py

app.py

@@ -10,13 +10,17 @@ def install_libraries():
         print("Error during installation:", e)
 
 install_libraries()
-import Milestone5API
+
 def main():
+    # Importing after ensuring dependencies are installed
+    import Milestone5API
+    
     # Title 
     st.title("Translate YouTube Video to French")
     
     url = st.text_input("Enter YouTube Video URL")
     captions_list = []  # Initialize empty list for captions
+    
     if url:
         captions = Milestone5API.download_video_transcript(url)
         if captions:
@@ -30,21 +34,33 @@ def main():
     
         start_index = st.session_state.get('start_index', 0)
         end_index = start_index + 6
-    
-        # Display caption table
-        st.write("## Caption Table")
-        st.write("| Timestamp | Original |")
-        st.write("|-----------|----------|")
+
+        # Define CSS styles for table cells
+        timestamp_style = "padding: 8px; background-color: red; color: grey;"
+        original_style = "padding: 8px; background-color: black; color: white;"
+
+        st.write(
+            "<style> table { width: 100%; } th, td { border: 1px solid black; } </style>",
+            unsafe_allow_html=True,
+        )
+        st.write("<table><tr><th>Timestamp</th><th>Original</th></tr>", unsafe_allow_html=True)
+        
         for i in range(start_index, min(end_index, len(captions_list))):
-            st.write(f"| {captions_list[i]['Timestamp']} | {captions_list[i]['Original']} |")
-    
+            st.write(
+                f"<tr><td style='{timestamp_style}'>{captions_list[i]['Timestamp']}</td>"
+                f"<td style='{original_style}'>{captions_list[i]['Original']}</td></tr>",
+                unsafe_allow_html=True,
+            )
+
+        st.write("</table>", unsafe_allow_html=True)
+
         # Navigation buttons
         col1, col2, col3 = st.columns([1, 8, 1])
         if col1.button("Previous") and start_index > 0:
             start_index -= 6
             end_index -= 6
             st.session_state['start_index'] = start_index
-    
+
         if col3.button("Next") and end_index < len(captions_list):
             start_index += 6
             end_index += 6