import os
import requests
import gradio as gr

groq_api_key = os.environ.get("GROQ_API_KEY")

url = "https://api.groq.com/openai/v1/chat/completions"

headers = {
    "Authorization": f"Bearer {groq_api_key}"
}

def chat_with_groq(user_input):
    body = {
        "model": "llama-3.1-8b-instant",
        "messages": [
            {"role": "user", "content": user_input}
        ]
    }

    response = requests.post(url, headers=headers, json=body)

    if response.status_code == 200:
        return response.json()['choices'][0]['message']['content']
    else:
        return f"Error: {response.json()}"

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="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()