added custom theme

app.py

@@ -136,7 +136,8 @@ DEFAULT_AUTOTUNE_JSON = model_to_json(AutotuneRequest)
 DEFAULT_QA_JSON = model_to_json(QARequest)
 
 
-with gr.Blocks(theme=gr.themes.Ocean()) as demo:
+from claude_theme import Claude
+with gr.Blocks(theme=Claude()) as demo:
     gr.Markdown("# 🧠 Ragmint MCP Server")
 
     gr.HTML("""
@@ -159,6 +160,23 @@ with gr.Blocks(theme=gr.themes.Ocean()) as demo:
     </div>
     """)
 
+    gr.HTML("""
+    <style>
+    .center-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .center-wrapper img {
+        height: 100px !important;
+    }
+    </style>
+
+    <div class="center-wrapper">
+      <img src="https://raw.githubusercontent.com/andyolivers/ragmint/main/src/ragmint/assets/img/ragmint_logo.png" alt="Ragmint Banner">
+    </div>
+    """)
+
     gr.Markdown("""
     **AI-Powered Optimization for RAG Pipelines**
     
@@ -228,7 +246,7 @@ with gr.Blocks(theme=gr.themes.Ocean()) as demo:
                 gr.Markdown("📄 Upload files (local paths or URLs) to your `data/docs` folder.")
                 upload_files = gr.File(file_count="multiple", type="filepath")
                 upload_path = gr.Textbox(value=DEFAULT_UPLOAD_PATH, label="Docs Path")
-                upload_btn = gr.Button("Upload", variant="huggingface")
+                upload_btn = gr.Button("Upload", variant="primary")
                 upload_out = gr.JSON(label="Response")
                 upload_btn.click(upload_docs_tool, inputs=[upload_files, upload_path], outputs=upload_out)
 
@@ -255,7 +273,7 @@ with gr.Blocks(theme=gr.themes.Ocean()) as demo:
                     return upload_docs_tool(urls, docs_path)
 
                 upload_mcp_path = gr.Textbox(value=DEFAULT_UPLOAD_PATH, label="Docs Path")
-                upload_mcp_btn = gr.Button("Upload", variant="huggingface")
+                upload_mcp_btn = gr.Button("Upload", variant="primary")
                 upload_mcp_out = gr.JSON(label="Response")
 
                 upload_mcp_btn.click(
@@ -313,7 +331,7 @@ with gr.Blocks(theme=gr.themes.Ocean()) as demo:
                     label="LLM Model"
                 )
 
-            autotune_btn = gr.Button("Autotune", variant="huggingface")
+            autotune_btn = gr.Button("Autotune", variant="primary")
             autotune_out = gr.Textbox(label="Response", lines=15)
 
 
@@ -423,7 +441,7 @@ with gr.Blocks(theme=gr.themes.Ocean()) as demo:
                     label="LLM Model"
                 )
 
-            optimize_btn = gr.Button("Optimize", variant="huggingface")
+            optimize_btn = gr.Button("Optimize", variant="primary")
             optimize_out = gr.Textbox(label="Response", lines=15)
 
 
@@ -485,7 +503,7 @@ with gr.Blocks(theme=gr.themes.Ocean()) as demo:
                     min_q = gr.Slider(1, 20, step=1, value=3, label="Min Questions")
                     max_q = gr.Slider(1, 50, step=1, value=25, label="Max Questions")
 
-                qa_btn = gr.Button("Generate QA", variant="huggingface")
+                qa_btn = gr.Button("Generate QA", variant="primary")
                 qa_out = gr.Textbox(lines=15, label="Response")
 
 
@@ -518,7 +536,7 @@ with gr.Blocks(theme=gr.themes.Ocean()) as demo:
             gr.Markdown("## Clear Cache")
             gr.Markdown("🗑️ Deletes all files and directories inside docs_path on the server.")
             clear_path = gr.Textbox(value=DEFAULT_UPLOAD_PATH, label="Docs Path to Clear")
-            clear_btn = gr.Button("Clear Cache", variant="huggingface")
+            clear_btn = gr.Button("Clear Cache", variant="primary")
             clear_out = gr.JSON(label="Response")
             clear_btn.click(clear_cache_tool, inputs=[clear_path], outputs=clear_out)
             gr.Markdown("---")

claude_theme.py

@@ -0,0 +1,87 @@
+from __future__ import annotations
+from collections.abc import Iterable
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+custom_primary = colors.Color(
+    c50="#FCE8E0",
+    c100="#F9D0C1",
+    c200="#F5B8A3",
+    c300="#F0A184",
+    c400="#EB8965",
+    c500="#E65F2B",
+    c600="#C94F24",
+    c700="#A03F1D",
+    c800="#782F16",
+    c900="#4F1F0F",
+    c950="#2A1208",
+)
+
+class Claude(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue=custom_primary,
+        secondary_hue=colors.amber,
+        neutral_hue=colors.zinc,
+        spacing_size=sizes.spacing_md,
+        radius_size=sizes.radius_xxl,
+        text_size=sizes.text_md,
+        font=(
+            fonts.GoogleFont("Inter"),
+            "ui-sans-serif",
+            "system-ui",
+            "sans-serif",
+        ),
+        font_mono=(
+            fonts.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "Consolas",
+            "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,
+        )
+
+        self.name = "claude"
+
+        super().set(
+            # Global background
+            body_background_fill="#F8F5F2",
+            block_background_fill="#FFFFFF",
+            block_border_width="0px",
+            block_shadow="none",
+            block_title_text_color="black",
+            block_label_border_width="0px",
+
+            # Inputs
+            input_background_fill="white",
+            input_border_color="#D8D6D2",
+            input_border_width="1px",
+            input_shadow="none",
+            input_shadow_focus="0 0 0 2px rgba(230,95,43,0.25)",
+
+            # Buttons
+            button_border_width="0px",
+            button_transform_hover="scale(1.02)",
+            button_transition="all 0.15s ease-in-out",
+
+            # Primary button (Claude orange)
+            button_primary_background_fill="#E65F2B",
+            button_primary_background_fill_hover="#D75423",
+            button_primary_text_color="white",
+
+            # Secondary (light minimal)
+            button_secondary_background_fill="#EFECEA",
+            button_secondary_background_fill_hover="#E8E6E4",
+            button_secondary_text_color="#2A2A2A",
+
+        )