update

app.py

@@ -25,15 +25,36 @@ def chat_with_groq(user_input):
     else:
         return f"Error: {response.json()}"
 
-logo_url = "/file=Nullyte.jpg" # Si la imagen está en el mismo directorio o en una subcarpeta accesible
-html_title = f"<center><img src='{logo_url}' width='50' height='50' style='vertical-align: middle; margin-right: 10px;'> Jean Paul Chat with Groq AI (Llama 3.1-8B)</center>"
+css = """
+/* Estilo para el contenedor del título */
+.gradio-container h1 {
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Centra el título y el logo */
+    gap: 10px; /* Espacio entre el logo y el texto */
+    font-size: 2.5em; /* Ajusta el tamaño de la fuente del título si es necesario */
+}
+
+/* Agrega una pseudoclase ::before al h1 para el logo */
+.gradio-container h1::before {
+    content: ''; /* Obligatorio para pseudoclases */
+    background-image: url('/file=Nullbyte.jpg'); /* Reemplaza con la ruta a tu logo */
+    background-size: contain; /* Ajusta el tamaño de la imagen dentro del contenedor */
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 60px; /* Ancho del logo */
+    height: 60px; /* Alto del logo */
+    display: inline-block; /* Permite controlar el tamaño y alineación */
+}
+"""
 
 interface = gr.Interface(
     fn=chat_with_groq,
     inputs=gr.Textbox(lines=2, placeholder="Ask me anything..."),
     outputs=gr.Textbox(),
-    title=html_title, # Aquí se usa el título HTML con la imagen
-    description="Type your question below and get a response powered by Groq's Llama 3.1-8B model."
+    title="Jean Paul Chat with Groq AI (Llama 3.1-8B)", # El título sigue siendo texto normal
+    description="Type your question below and get a response powered by Groq's Llama 3.1-8B model.",
+    css=css # Aquí se inyecta el CSS personalizado
 )
 
 interface.launch()