Update app.py

app.py

@@ -275,12 +275,23 @@ def translate_video(video_path, youtube_link, target_language, speaker_model):
 def clear_inputs():
  return None, "", None, None
 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+
+
+css = """
+.column-frame {
+ border: 2px solid #AAA;
+ border-radius: 10px;
+ padding: 10px;
+ margin: 10px;
+}
+"""
+
+with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
  gr.Markdown("<h1 style='text-align: center;'>🌐AI Video Translation</h2>")
  gr.Markdown("<h3 style='text-align: center;'>Currently supported languages are: English, Polish, Ukrainian, and Russian</h3>")
  
  with gr.Row():
- with gr.Column():
+ with gr.Column(elem_classes=["column-frame"]):
  gr.Markdown("<h2 style='text-align: center;'>Inputs</h3>")
  video = gr.Video(label="Upload a video file")
  gr.Markdown("<h3 style='text-align: center;'>OR</h3>")
@@ -290,11 +301,13 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
  speaker_model = gr.Dropdown(["(Recommended) XTTS_V2", "VITs (will be default for Ukrainian)"], value="(Recommended) XTTS_V2", label="Select text-to-speech generation model")
  with gr.Row():
  clear_btn = gr.Button("Clear inputs")
- translate_btn = gr.Button("Translate") 
- 
+ translate_btn = gr.Button("Translate") 
+
  with gr.Column():
- gr.Markdown("<h2 style='text-align: center;'>Translated Video</h3>")
- output_video = gr.Video(label="Translated video")
+ with gr.Row(elem_classes=["column-frame"]):
+ with gr.Column():
+ gr.Markdown("<h2 style='text-align: center;'>Translated Video</h3>")
+ output_video = gr.Video(label="Translated video")
 
  translate_btn.click(
  fn=translate_video,