Upload gradio_theme_fenix.py with huggingface_hub

gradio_theme_fenix.py

@@ -0,0 +1,71 @@
+# -*- coding: utf-8 -*-
+import gradio as gr
+
+# Simple CSS that follows the visual guidelines (white background, dark blue accents)
+FENIX_CSS = """
+body {
+    background-color: #ffffff;
+    color: #000000;
+}
+.gradio-container {
+    max-width: 1200px;
+    margin: auto;
+}
+.fenix-header {
+    text-align: center;
+    font-family: 'Roboto', sans-serif;
+    color: #1A3E5C;
+    margin-bottom: 20px;
+}
+.fenix-header h1 {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 0;
+}
+.fenix-header p {
+    font-size: 14px;
+    margin: 5px 0 0 0;
+}
+.fenix-footer {
+    text-align: center;
+    font-size: 12px;
+    color: #777777;
+    margin-top: 30px;
+    padding-top: 10px;
+    border-top: 1px solid #e0e0e0;
+}
+"""
+
+def apply_fenix_theme():
+    """
+    Returns a Gradio theme object. We start from the Soft theme and
+    customize primary/secondary colors to match the dark blue accent.
+    """
+    return gr.themes.Soft(
+        primary_hue="indigo",
+        secondary_hue="indigo",
+        font=("Roboto", "sans-serif")
+    )
+
+def fenix_header(title: str, subtitle: str):
+    """
+    Header component placed at the top of the app.
+    """
+    html = f'''
+    <div class="fenix-header">
+        <h1>{title}</h1>
+        <p>{subtitle}</p>
+    </div>
+    '''
+    return gr.HTML(html)
+
+def fenix_footer():
+    """
+    Footer component placed at the bottom of the app.
+    """
+    html = '''
+    <div class="fenix-footer">
+        © 2024 PDF Voice Reader - Powered by Gradio & ElevenLabs
+    </div>
+    '''
+    return gr.HTML(html)