Update app.py

app.py

@@ -1,8 +1,20 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
+# Inicializar el cliente de Hugging Face
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
+def format_prompt(message, history, system_message):
+    """
+    Formatea el prompt correctamente para el modelo Zephyr
+    """
+    prompt = f"<|system|>\n{system_message}</s>\n"
+    for user_msg, assistant_msg in history:
+        prompt += f"<|user|>\n{user_msg}</s>\n"
+        prompt += f"<|assistant|>\n{assistant_msg}</s>\n"
+    prompt += f"<|user|>\n{message}</s>\n<|assistant|>\n"
+    return prompt
+
 def respond(
     message,
     history: list[tuple[str, str]],
@@ -11,83 +23,160 @@ def respond(
     temperature,
     top_p,
 ):
-    messages = [{"role": "system", "content": system_message}]
-
-    for val in history:
-        if val[0]:
-            messages.append({"role": "user", "content": val[0]})
-        if val[1]:
-            messages.append({"role": "assistant", "content": val[1]})
-
-    messages.append({"role": "user", "content": message})
-
-    response = ""
+    """
+    Función principal que genera las respuestas del chatbot
+    """
+    try:
+        # Formatear el prompt adecuadamente
+        prompt = format_prompt(message, history, system_message)
+        
+        # Generar la respuesta
+        response = ""
+        for token in client.text_generation(
+            prompt,
+            max_new_tokens=max_tokens,
+            stream=True,
+            temperature=temperature,
+            top_p=top_p,
+            truncate=1000,
+        ):
+            response += token
+            yield response
+            
+    except Exception as e:
+        print(f"Error: {e}")
+        yield "Lo siento, ocurrió un error al procesar tu mensaje. Por favor, inténtalo de nuevo."
 
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        token = message.choices[0].delta.content
-
-        response += token
-        yield response
-
-# Define custom CSS
+# CSS personalizado para la interfaz
 custom_css = """
-/* Add your custom CSS styles here */
+/* Estilos generales */
 body {
     font-family: Arial, sans-serif;
-    background-color: white;
+    background-color: #f5f5f5;
+    margin: 0;
+    padding: 20px;
 }
+
+/* Contenedor principal */
 .gradio-container {
-    border: linear-gradient(90deg, rgba(0,0,0,1) 1%, rgba(15,6,83,1) 53%, rgba(22,9,121,1) 100%, rgba(0,212,255,1) 100%);
+    max-width: 900px;
+    margin: 0 auto;
+    background: white;
     border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     padding: 20px;
-    background-color: #ffffff;
-    box-shadow:0 0 12px 12px solid black; 
 }
-.gradio-input {
-    border-radius: 5px;
-    border: 1px solid #ddd;
-    padding: 10px;
+
+/* Cabecera */
+.gradio-header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+/* Área de chat */
+.gradio-chatbot {
+    min-height: 400px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 15px;
+    background: white;
+    margin-bottom: 15px;
+}
+
+/* Input de texto */
+.gradio-textbox textarea {
+    border-radius: 8px !important;
+    border: 1px solid #e0e0e0 !important;
+    padding: 12px !important;
+    font-size: 14px !important;
 }
+
+/* Botón de enviar */
 .gradio-button {
-    background-color: #4CAF50;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    padding: 10px 20px;
+    background: linear-gradient(90deg, #0f0653, #160979) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
+    font-weight: bold !important;
+    transition: all 0.3s !important;
+}
+
+.gradio-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
 }
-.gradio-output {
-    border: 1px solid #ddd;
+
+/* Sliders y controles */
+.gradio-slider {
+    margin: 15px 0 !important;
+}
+
+/* Mensajes del sistema */
+.gradio-markdown {
     padding: 10px;
-    border-radius: 5px;
-    box-shadow:0 0 12px 12px solid grey; 
+    background: #f8f9fa;
+    border-radius: 8px;
+    margin-bottom: 15px;
 }
 """
 
-# Create a Gradio chat interface with custom CSS
-
+# Crear la interfaz de chat con Gradio
 demo = gr.ChatInterface(
     fn=respond,
     additional_inputs=[
-        gr.Textbox(value="You are a Chatbot.Your name is Elisa.Your are Developed By gerardo.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
+        gr.Textbox(
+            value="Eres un chatbot llamado ELISA. Eres amable, servicial y profesional. Desarrollado por Gerardo.",
+            label="Mensaje del Sistema",
+            lines=3
+        ),
+        gr.Slider(
+            minimum=32,
+            maximum=2048,
+            value=512,
+            step=32,
+            label="Tokens máximos",
+            info="Controla la longitud máxima de la respuesta"
+        ),
+        gr.Slider(
+            minimum=0.1,
+            maximum=1.5,
+            value=0.7,
+            step=0.1,
+            label="Temperatura",
+            info="Valores más altos = respuestas más creativas pero menos precisas"
+        ),
         gr.Slider(
             minimum=0.1,
             maximum=1.0,
-            value=0.95,
+            value=0.9,
             step=0.05,
-            label="Top-p (nucleus sampling)",
+            label="Top-p",
+            info="Controla la diversidad de las respuestas"
         ),
     ],
     css=custom_css,
-    title="🤗💬 ELISA I MODELO DE INTELIGENCIA ARTIFICIAL   PROF:  GERARDO  " # Aquí se añade el título
+    title="🤖💬 ELISA - Modelo de Inteligencia Artificial",
+    description="Chatbot desarrollado por Gerardo usando Zephyr-7b-beta de Hugging Face",
+    theme="soft",
+    examples=[
+        ["Hola, ¿cómo estás?"],
+        ["Explícame qué es la inteligencia artificial"],
+        ["Dame ideas para un proyecto de IA"]
+    ],
+    retry_btn=None,
+    undo_btn=None,
+    clear_btn="Limpiar"
 )
 
+# Configuración adicional para el lanzamiento
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        favicon_path=None,
+        auth=None,
+        auth_message=None,
+        prevent_thread_lock=False
+    )