Update app.py

app.py

@@ -807,7 +807,7 @@ Example: 'Received {total_slides} slides, {total_slides} scripts, and HTML files
                     audio_files.append(audio_file)
                     audio_urls[i] = get_gradio_file_url(audio_file)
                     progress = 90 + ((i + 1) / len(scripts)) * 10
-                    label = f"Generating lecture speech for slide {i + 1}/{len(scripts)}..."
+                    label = f"Generating speech for slide {i + 1}/{len(scripts)}..."
                     file_paths.append(audio_file)  
                     yield (
                         html_with_progress(label, progress),
@@ -1240,29 +1240,16 @@ with gr.Blocks(
     css="""
     h1 {text-align: center}
     h2 {text-align: center}
-    textarea {background-color: rgb(8 94 128) !important;border: none !important;}
     #lecture-container {font-family: 'Times New Roman', Times, serif;}
     #slide-content {font-size: 48px; line-height: 1.2;}
-    #form-group {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; border: none !important; color: #fff; background-color: background: linear-gradient(109deg, #1f8db9, #085d7e);}
+    #form-group {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; font-weight: 900; color: #000; background-color: white;}
     #download {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px;}
-    #slide-display {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; background-color: linear-gradient(109deg, #1f8db9, #085d7e);}
-    #component-14 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
-    #component-5 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
-    #component-6 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
-    #component-7 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
-    #component-8 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
-    #component-9 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
-    #component-10 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
-    #component-11 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
-    #component-12 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
-    #component-13 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
-    gradio-container.gradio-container-5-28-0 .contain #slide-display {border-radius: 30px;background: linear-gradient(109deg, #198bb9, #085775);}
-    .form {background: linear-gradient(109deg, #1c88b4, #056c93) !important; box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;}
-    button {transition: background-color 0.3s;}
-    button:hover {background-color: linear-gradient(109deg, #147197, #085d7e) !important;}
-    .gradio-container { background: linear-gradient(109deg, #186a8b, #075878); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 2rem; padding-top: 30px;}
+    #slide-display {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; background-color: white;}
+    .gradio-container { background: linear-gradient(135deg, #2a2a2a, #6a6a6a); box-shadow: 0 0 2rem rgba(255, 255, 255, 0.14);padding-top: 30px;}
     .gradio-container.gradio-container-5-28-0 .contain h1 {color: white !important;}
     .gradio-container.gradio-container-5-28-0 .contain h2 {color: white !important;}
+    button {transition: background-color 0.3s;}
+    button:hover {background-color: #e0e0e0;}
     """,
     js=js_code,
     head='<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">'
@@ -1299,9 +1286,9 @@ with gr.Blocks(
                 generate_btn = gr.Button("Generate Lecture")
         with gr.Column(scale=2):
             default_slide_html = """
-            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; min-height: 700px; padding: 20px; text-align: center; border: 1px solid #0b9cd6; border-radius: 30px; background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%);">
-                <h2 style="font-style: italic; color: #fff;">Waiting for lecture content...</h2>
-                <p style="margin-top: 10px; font-size: 16px;color: #fff">Please Generate lecture content via the form on the left first before lecture begins</p>
+            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; min-height: 700px; padding: 20px; text-align: center; border: 1px solid #ddd; border-radius: 30px; box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important;">
+                <h2 style="font-style: italic; color: #000;">Waiting for lecture content...</h2>
+                <p style="margin-top: 10px; font-size: 16px;color: #000">Please Generate lecture content via the form on the left first before lecture begins</p>
             </div>
             """
             slide_display = gr.HTML(label="Lecture Slides", value=default_slide_html, elem_id="slide-display")