import gradio as gr
from gradio_client import Client
import requests

# Создаем клиент для взаимодействия с API
client = Client("llamameta/Pixtral-Large-Instruct-2411")

def respond(
    message,
    history: list[tuple[str, str]],
    system_message,
    max_tokens,
    temperature,
    top_p,
):
    # Формируем сообщения для отправки в API
    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 = client.predict(
        message=message,
        system_message=system_message,
        max_tokens=max_tokens,
        temperature=temperature,
        top_p=top_p,
        api_name="/chat"
    )
    
    yield response

# Ссылка на файл CSS
css_url = "https://neurixyufi-aihub.static.hf.space/style.css"

# Получение CSS по ссылке
response = requests.get(css_url)
css = response.text + """.gradio-container{max-width: 700px !important} h1{text-align:center}
* {
  transition: all 0.2s;
}

footer {
  visibility: hidden !important;
}
.dark {
  --block-label-radius: 0 0 10px 0 !important;
  --container-radius: 20px !important;
  --block-border-width: 0px !important;
  --block-radius: 20px !important;
  --border-color-primary: transparent !important;
  --block-background-fill: #202020 !important;
  --body-background-fill: #000000 !important;
  --input-background-fill: #151515 !important;
  --input-radius: 15px !important;
  --checkbox-label-border-width: 0px !important;
  --block-label-border-width: 0px !important;
  --input-border-width: 0px !important;
  --checkbox-label-background-fill: #151515 !important;
  --button-small-radius: 25px !important;
  --slider-color: #472b4a !important;
  --radius-md: 15px !important;
  --radius-sm: 25px !important;
  --background-fill-primary: #210e24 !important;
  --block-label-right-radius: 0 0 0 10px !important;
  --radius-xs: 15px !important;
}
.primary {
  color: #FFF !important;
  font-size: 16px !important;
  padding: 10px 20px !important;
  border: 3px solid rgb(234 181 238) !important;
  border-radius: 15px !important;
  text-decoration: none !important;
  transition: 0.5s ease-in-out !important;
  font-weight: normal !important;
  background: none !important;
}
.primary:hover {
  background: rgb(234 181 238) !important;
  color: #000 !important;
}
div.svelte-19hvt5v {
  border: 0px solid #510067 !important;
  background: #101010;
}
.selected.svelte-1uw5tnk {
  border-color: #510067 !important;
  border-width: 0px !important;
}
.tab-nav.svelte-1uw5tnk {
  border-bottom: 0px solid #510067 !important;
}
.secondary {
  color: #FFF !important;
  font-size: 18px !important;
  border: 3px solid rgb(96 55 103) !important;
  border-radius: 15px !important;
  transition: background-color 0.5s ease-in-out !important;
  width: 100% !important;
  background-color: transparent !important;
  height: 50px !important;
  font-weight: bold !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
}
.secondary:hover {
  background-color: rgb(96 55 103) !important;
}
.svelte-zyxd38 {
  display: none !important;
  visibility: hidden !important
}
.selected.svelte-1uw5tnk {
  background: #151515;
  border-radius: 25px !important;
  margin-bottom: 3px !important;
}
button.svelte-1uw5tnk {
  margin-bottom: 3px !important;
}
label.svelte-1mhtq7j.svelte-1mhtq7j.svelte-1mhtq7j:hover {
  background: #291928 !important;
}
.controls.svelte-euo1cw.svelte-euo1cw {
  background: #321f37 !important;
}
.padded.svelte-p87ime {
  border: none !important;
}
label.svelte-1b6s6s {
  background: #210e24 !important;
}
"""

# Определяем интерфейс Gradio
demo = gr.ChatInterface(
    respond,
    additional_inputs=[
        gr.Textbox(value="Вы дружелюбный чат-бот, созданный balianone.com", label="Системное сообщение"),
        gr.Slider(minimum=100, maximum=18000, value=18000, step=1, label="Максимальное количество новых токенов"),
        gr.Slider(minimum=0.0, maximum=1.0, value=0.7, step=0.1, label="Температура"),
        gr.Slider(
            minimum=0.0,
            maximum=1.0,
            value=0.95,
            step=0.05,
            label="Top-p (нуклеарное сэмплирование)",
        ),
    ],
    title="Чат-бот",
    css=css
)



# Добавляем CSS для скрытия футера
demo.css = css

# Запускаем интерфейс
if __name__ == "__main__":
    demo.queue(max_size=250).launch(show_api=False, share=False)