Update app.py

app.py

@@ -1,5 +1,66 @@
 import gradio as gr
 from video_processing import process_video
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+class CustomTheme(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.emerald,
+        secondary_hue: colors.Color | str = colors.blue,
+        neutral_hue: colors.Color | str = colors.blue,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_md,
+        text_size: sizes.Size | str = sizes.text_lg,
+        font: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Quicksand"),
+            "ui-sans-serif",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+        super().set(
+            body_background_fill="#eb5726",
+            body_text_color="#ffffff",
+            block_background_fill="#ffffff",
+            block_title_text_color="#282828",
+            input_background_fill="#ecf0f1",
+            input_text_color="#eb5726",
+            block_label_text_color="#eb5726",
+            input_label_text_color="#ffffff",
+            button_primary_background_fill="linear-gradient(90deg, *primary_300, *secondary_400)",
+            button_primary_background_fill_hover="linear-gradient(90deg, *primary_200, *secondary_300)",
+            button_primary_text_color="white",
+            button_primary_background_fill_dark="linear-gradient(90deg, *primary_600, *secondary_800)",
+            slider_color="*secondary_300",
+            slider_color_dark="*secondary_600",
+            block_title_text_weight="600",
+            block_border_width="3px",
+            block_shadow="*shadow_drop_lg",
+            button_shadow="*shadow_drop_lg",
+            button_large_padding="32px",
+        )
+
+custom_theme = CustomTheme()
 
 def display_results(video_url, description):
     final_clip_path = process_video(video_url, description)
@@ -7,77 +68,16 @@ def display_results(video_url, description):
         return final_clip_path, final_clip_path
     return "No matching scene found", None
 
-# Custom CSS
-css = """
-body {
-    background-color: #eb5726;
-    color: #ffffff;
-    font-family: 'Arial', sans-serif;
-}
-h1 {
-    color: #282828;
-    text-align: center;
-}
-h2 {
-    color: #eb5726;
-}
-h3 {
-    color: #ffffff;
-} 
-h4 {
-    color: #eb5726;
-} 
-h5 {
-    color: #282828;
-}
-h6 {
-    color: #eb5726; 
-}
-#video_url {
-    background-color: #eb5726;
-    color: #ffffff;
-    border: 2px solid #ecf0f1;
-}
-#description {
-    background-color: #ecf0f1;
-    color: #eb5726;
-    border: 2px solid #eb5726;
-}
-#submit_button {
-    background-color: #ffffff;
-    color: #F06230;
-    border: 2px solid #eb5726;
-}
-#submit_button:hover {
-    background-color: #c0392b;
-}
-#video_output, #download_output {
-    border: 1px solid #eb5726;
-}
-.centered-markdown {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 100%;
-}
-"""
-
-js = """
-document.querySelector('label[for="video_url"]').style.color = '#ffffff';
-document.querySelector('label[for="description"]').style.color = '#eb5726';
-"""
-
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(theme=custom_theme) as demo:
     with gr.Column():
         gr.Markdown("# Sickstadium AI", elem_classes="centered-markdown")
         gr.Markdown("### This is a brief description for the webpage.", elem_classes="centered-markdown")
-        video_url = gr.Textbox(info="Video URL or Filepath", elem_id="video_url")
+        video_url = gr.Textbox(label="Video URL or Filepath", elem_id="video_url")
         description = gr.Textbox(label="Description of desired clip", elem_id="description")
         submit_button = gr.Button("Process Video", elem_id="submit_button")
         video_output = gr.Video(label="Processed Video", elem_id="video_output")
         download_output = gr.File(label="Download Processed Video", elem_id="download_output")
         submit_button.click(fn=display_results, inputs=[video_url, description], outputs=[video_output, download_output])
-        gr.HTML(f"<script>{js}</script>")
 
 demo.launch()
+