Upload app.py

app.py

@@ -186,14 +186,17 @@ async def process_podcast(input_text, language, speaker1, speaker2, api_key):
 custom_css = """
 body {
     background-color: #f0f8ff;
+    margin: 0 !important;
 }
 .gradio-container {
     background-color: #f0f8ff;
     border-radius: 20px;
     box-shadow: 0 0 20px rgba(0,0,0,0.1);
+    margin: 0 !important;
 }
 .center-aligned {
     text-align: center !important;
+    margin: 0 !important;
     color: #ff4081;
     text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
 }
@@ -203,6 +206,7 @@ body {
     color: white !important;
     font-weight: bold !important;
     transition: all 0.3s ease !important;
+    margin: 0 !important;
 }
 .gen-button:hover {
     background-color: #f50057 !important;
@@ -211,6 +215,7 @@ body {
 .gr-input, .gr-box, .gr-dropdown {
     border-radius: 10px !important;
     border: 2px solid #ff4081 !important;
+    margin: 0 !important;
 }
 .gr-input:focus, .gr-box:focus, .gr-dropdown:focus {
     border-color: #f50057 !important;
@@ -220,54 +225,67 @@ body {
     background-color: #B7E0FF !important;
     padding: 15px !important;
     border-radius: 10px !important;
+    margin: 0 !important;
 }
 .lng-background {
     background-color: #FFF5CD !important;
     padding: 5px !important;
     border-radius: 10px !important;
+    margin: 0 !important;
 }
 .sk1-background {
     background-color: #FFF5CD !important;
     padding: 5px !important;
     border-radius: 10px !important;
+    margin: 0 !important;
 }
 .sk2-background {
     background-color: #FFF5CD !important;
     padding: 5px !important;
     border-radius: 10px !important;
+    margin: 0 !important;
+}
+.clear-button {
+    background-color: #FFF5CD !important;
+    padding: 5px !important;
+    border-radius: 10px !important;
+    margin: 0 !important;
 }
 .api-background {
     background-color: #FFCFB3 !important;
     padding: 5px !important;
     border-radius: 10px !important;
+    margin: 0 !important;
 }
 .audio-background {
     background-color: #FFF4B5 !important;
     padding: 5px !important;
     border-radius: 10px !important;
+    margin: 0 !important;
 }
 .script-background {
     background-color: #FEF9D9 !important;
     padding: 15px !important;
     border-radius: 10px !important;
+    margin: 0 !important;
 }
 """
 
 with gr.Blocks(theme=gr.themes.Monochrome(), css=custom_css) as iface:
     gr.Markdown("# 🎙️ 自動生成 Podcast 節目及音檔。系統布署：江信宗。 🎙️", elem_classes="center-aligned")
-    
+
     input_text = gr.Textbox(label="請輸入 Podcast 話題（建議50~500字之間）", placeholder="輸入 Podcast 話題內容，越詳細劇本越佳......", elem_classes="input-background")
-    
+
     with gr.Row():
         Language = gr.Dropdown(
-            choices=["繁體中文", "Auto Detect", "English", "日本語", "한국어"], 
-            value="繁體中文", 
+            choices=["繁體中文", "Auto Detect", "English", "日本語", "한국어"],
+            value="繁體中文",
             label="語言",
             interactive=True,
             scale=1,
             elem_classes="lng-background"
         )
-        
+
         speaker_choices = [
             "家豪 - 臺灣國語 (Male)",
             "淑芬 - 臺灣國語 (Female)",
@@ -288,28 +306,31 @@ with gr.Blocks(theme=gr.themes.Monochrome(), css=custom_css) as iface:
             "Remy - French (Male)",
             "Vivienne - French (Female)"
         ]
-        
+
         Speaker_1 = gr.Dropdown(
-            choices=speaker_choices, 
-            value="家豪 - 臺灣國語 (Male)", 
+            choices=speaker_choices,
+            value="家豪 - 臺灣國語 (Male)",
             label="主持人的語音",
             interactive=True,
             scale=2,
             elem_classes="sk1-background"
         )
         Speaker_2 = gr.Dropdown(
-            choices=speaker_choices, 
-            value="品妍 - 中文 (Female)", 
+            choices=speaker_choices,
+            value="品妍 - 中文 (Female)",
             label="來賓的語音",
             interactive=True,
             scale=2,
             elem_classes="sk2-background"
         )
-    
+
+        clear_input_text_button = gr.Button("清除輸入文字", scale=1, elem_classes="clear-button")
+        clear_input_text_button.click(fn=lambda: "", inputs=None, outputs=input_text)
+
     with gr.Row():
         generate_button = gr.Button("生成 Podcast 節目及音檔", scale=2, elem_classes="gen-button")
         api_key = gr.Textbox(label="請輸入您的 API Key", type="password", placeholder="API authentication key for large language models", scale=1, elem_classes="api-background")
-        
+
     audio_output = gr.Audio(label="Generated Podcast Audio", elem_classes="audio-background")
     podcast_script = gr.Textbox(label="Generated Podcast 劇本", elem_classes="script-background")
     generate_button.click(fn=process_podcast, inputs=[input_text, Language, Speaker_1, Speaker_2, api_key], outputs=[podcast_script, audio_output])
@@ -318,4 +339,4 @@ if __name__ == "__main__":
     if "SPACE_ID" in os.environ:
         iface.launch()
     else:
-        iface.launch(share=True, show_api=False)
+        iface.launch(share=True, show_api=False)