Se mejoraron estilos v2

app.py

@@ -3,7 +3,6 @@ from threading import Thread
 from typing import Iterator
 
 import gradio as gr
-#import spaces
 import torch
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 
@@ -13,8 +12,6 @@ MAX_INPUT_TOKEN_LENGTH = int(os.getenv("MAX_INPUT_TOKEN_LENGTH", "4096"))
 
 device = torch.device("cuda:0" if torch.cuda.is_available() else "cpu")
 
-# Download model from Huggingface Hub
-# Change this to meta-llama or the correct org name from Huggingface Hub
 model_id = "ussipan/SipanGPT-0.2-Llama-3.2-1B-GGUF"
 tokenizer = AutoTokenizer.from_pretrained(model_id)
 model = AutoModelForCausalLM.from_pretrained(
@@ -68,10 +65,51 @@ def generate(
         yield "", conversation
 
 
-# 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;">
+# 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;">
    <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;">SipánGPT 0.2 Llama 3.2</h1>
+   <h1 style="font-size: 28px; margin: 0; font-family: 'Fraunces', system-ui, serif; color: #7dfa00;">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>
@@ -80,7 +118,8 @@ PLACEHOLDER = """<div style="padding: 20px; text-align: center; display: flex; f
        <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]
@@ -101,34 +140,55 @@ 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",
+)
 
-with gr.Blocks(theme=gr.themes.Soft(), fill_height=True) as demo:
+with gr.Blocks(theme=custom_theme, css=custom_css) 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()