Se mejoraron estilos v3

app.py

@@ -3,6 +3,8 @@ from threading import Thread
 from typing import Iterator
 
 import gradio as gr
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, sizes, fonts
 import torch
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 
@@ -65,61 +67,19 @@ def generate(
         yield "", conversation
 
 
-# Custom CSS to match your color scheme and fonts
-custom_css = """
-body {
-    background-color: #333333;
-    color: #f0f0f0;
-    font-family: 'Exo 2', system-ui, sans-serif;
-}
-.gradio-container {
-    background-color: #333333;
-}
-.gr-button {
-    background-color: #7dfa00 !important;
-    color: #333333 !important;
-    border: none !important;
-}
-.gr-button:hover {
-    background-color: #5fed00 !important;
-}
-.gr-input, .gr-textarea {
-    background-color: #444444 !important;
-    border-color: #7dfa00 !important;
-    color: #f0f0f0 !important;
-}
-.gr-form {
-    background-color: #444444 !important;
-    border-color: #7dfa00 !important;
-}
-.gr-box {
-    background-color: #444444 !important;
-    border-color: #7dfa00 !important;
-}
-.gr-padded {
-    background-color: #444444 !important;
-}
-h1, h2, h3 {
-    font-family: 'Fraunces', system-ui, serif;
-    color: #7dfa00;
-}
-"""
-
-# Updated placeholder HTML
-PLACEHOLDER = """
-<div style="padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; background-color: #333333; color: #f0f0f0; font-family: 'Exo 2', system-ui, sans-serif;">
+# Implementing Gradio 5 features and building a ChatInterface UI yourself
+PLACEHOLDER = """<div style="padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center;">
    <img src="https://corladlalibertad.org.pe/wp-content/uploads/2024/01/USS.jpg" style="width: 80%; max-width: 550px; height: auto; opacity: 0.55; margin-bottom: 10px;">
-   <h1 style="font-size: 28px; margin: 0; font-family: 'Fraunces', system-ui, serif; color: #7dfa00;">SipánGPT 0.2 Llama 3.2</h1>
+   <h1 style="font-size: 28px; margin: 0;">SipánGPT 0.2 Llama 3.2</h1>
    <p style="font-size: 8px; margin: 5px 0 0; opacity: 0.65;">
        <a href="https://huggingface.co/spaces/ysharma/Llama3-2_with_Gradio-5" target="_blank" style="color: inherit; text-decoration: none;">Forked from @ysharma</a>
    </p>
    <p style="font-size: 12px; margin: 5px 0 0; opacity: 0.9;">Este modelo es experimental, puede generar alucinaciones o respuestas incorrectas.</p>
+   <p style="font-size: 12px; margin: 5px 0 0; opacity: 0.9;">Entrenado con un dataset de 5.4k conversaciones.</p>
    <p style="font-size: 12px; margin: 5px 0 0; opacity: 0.9;">
        <a href="https://huggingface.co/datasets/ussipan/sipangpt" target="_blank" style="color: inherit; text-decoration: none;">Ver el dataset aquí</a>
    </p>
-   <p style="font-size: 12px; margin: 5px 0 0; opacity: 0.9;">Entrenado con un dataset de 5.4k conversaciones.</p>
-</div>
-"""
+</div>"""
 
 def handle_retry(history, retry_data: gr.RetryData):
     new_history = history[:retry_data.index]
@@ -140,55 +100,106 @@ def handle_undo(history, undo_data: gr.UndoData):
 def chat_examples_fill(data: gr.SelectData):
     yield from generate(data.value['text'], chat_history = [], max_new_tokens = 1024, temperature = 0.6, top_p = 0.9, top_k = 50, repetition_penalty = 1.2)
 
-# Create a custom theme
-custom_theme = gr.themes.Base().set(
-    body_background_fill="#333333",
-    body_background_fill_dark="#333333",
-    body_text_color="#f0f0f0",
-    body_text_color_dark="#f0f0f0",
-    color_primary="#7dfa00",
-    background_fill_primary="#444444",
-    background_fill_secondary="#333333",
-    border_color_primary="#7dfa00",
-    button_primary_background_fill="#7dfa00",
-    button_primary_background_fill_dark="#7dfa00",
-    button_primary_text_color="#333333",
-    button_primary_text_color_dark="#333333",
-    input_background_fill="#444444",
-    input_background_fill_dark="#444444",
-    input_border_color="#7dfa00",
-    input_border_color_dark="#7dfa00",
-    input_placeholder_color="#bebebe",
-    input_placeholder_color_dark="#bebebe",
-)
+class SipanGPTTheme(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.Color(
+            name="custom_green",
+            c50="#f0fde4",
+            c100="#e1fbc8",
+            c200="#c3f789",
+            c300="#a5f34a",
+            c400="#7dfa00",  # primary color
+            c500="#5ef000",
+            c600="#4cc700",
+            c700="#39a000",
+            c800="#2b7900",
+            c900="#1d5200",
+            c950="#102e00",
+        ),
+        secondary_hue: colors.Color | str = colors.Color(
+            name="custom_green",
+            c400="#5fed00",  # secondary color
+        ),
+        neutral_hue: colors.Color | str = colors.gray,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_md,
+        text_size: sizes.Size | str = sizes.text_md,
+        font: fonts.Font | str | list[fonts.Font | str] = (
+            fonts.GoogleFont("Exo 2"),
+            "ui-sans-serif",
+            "system-ui",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font | str | list[fonts.Font | str] = (
+            fonts.GoogleFont("Fraunces"),
+            "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,
+        )
+        self.set(
+            body_background_fill="#333333",
+            body_background_fill_dark="#333333",
+            body_text_color="#ffffff",
+            body_text_color_dark="#ffffff",
+            color_accent_soft="*secondary_200",
+            button_primary_background_fill="*primary_400",
+            button_primary_background_fill_hover="*primary_500",
+            button_primary_text_color="#333333",
+            button_primary_text_color_dark="#333333",
+            block_title_text_color="*primary_400",
+            block_title_text_color_dark="*primary_400",
+            input_background_fill="#444444",
+            input_background_fill_dark="#444444",
+            input_border_color="#555555",
+            input_border_color_dark="#555555",
+            input_placeholder_color="#888888",
+            input_placeholder_color_dark="#888888",
+            chatbot_code_background_color="#444444",
+            chatbot_code_background_color_dark="#444444",
+        )
+
+# Uso del tema
+theme = SipanGPTTheme()
 
-with gr.Blocks(theme=custom_theme, css=custom_css) as demo:
+with gr.Blocks(theme=theme, fill_height=True) as demo:
     with gr.Column(elem_id="container", scale=1):
         chatbot = gr.Chatbot(
             label="SipánGPT 0.2 Llama 3.2",
             show_label=False,
             type="messages",
             scale=1,
-            suggestions=[
+            suggestions = [
                 {"text": "Háblame del reglamento de estudiantes de la universidad"},
                 {"text": "Qué becas ofrece la universidad"},
-            ],
-            placeholder=PLACEHOLDER,
-        )
+                ],
+            placeholder = PLACEHOLDER,
+            )
 
     msg = gr.Textbox(submit_btn=True, show_label=False)
     with gr.Accordion('Additional inputs', open=False):
-        max_new_tokens = gr.Slider(label="Max new tokens", minimum=1, maximum=MAX_MAX_NEW_TOKENS, step=1, value=DEFAULT_MAX_NEW_TOKENS)
-        temperature = gr.Slider(label="Temperature", minimum=0.1, maximum=4.0, step=0.1, value=0.6)
-        top_p = gr.Slider(label="Top-p (nucleus sampling)", minimum=0.05, maximum=1.0, step=0.05, value=0.9)
-        top_k = gr.Slider(label="Top-k", minimum=1, maximum=1000, step=1, value=50)
-        repetition_penalty = gr.Slider(label="Repetition penalty", minimum=1.0, maximum=2.0, step=0.05, value=1.2)
+        max_new_tokens = gr.Slider(label="Max new tokens", minimum=1, maximum=MAX_MAX_NEW_TOKENS, step=1, value=DEFAULT_MAX_NEW_TOKENS, )
+        temperature = gr.Slider(label="Temperature",minimum=0.1, maximum=4.0, step=0.1, value=0.6,)
+        top_p = gr.Slider(label="Top-p (nucleus sampling)", minimum=0.05, maximum=1.0, step=0.05, value=0.9, )
+        top_k = gr.Slider(label="Top-k", minimum=1, maximum=1000, step=1, value=50, )
+        repetition_penalty = gr.Slider(label="Repetition penalty", minimum=1.0, maximum=2.0, step=0.05, value=1.2, )
 
     msg.submit(generate, [msg, chatbot, max_new_tokens, temperature, top_p, top_k, repetition_penalty], [msg, chatbot])
     chatbot.retry(handle_retry, chatbot, [msg, chatbot])
     chatbot.like(handle_like, None, None)
     chatbot.undo(handle_undo, chatbot, [chatbot, msg])
-    chatbot.suggestion_select(chat_examples_fill, None, [msg, chatbot])
+    chatbot.suggestion_select(chat_examples_fill, None, [msg, chatbot] )
 
 
 demo.launch()