app.py

import streamlit as st
import g4f
from streamlit_lottie import st_lottie
import json

# Функция для загрузки анимаций Lottie
def load_lottiefile(filepath: str):
    with open(filepath, "r") as f:
        return json.load(f)

# Функция для отправки сообщений в GPT
def get_gpt_response(messages):
    client = g4f.Client()
    response = client.chat.completions.create(
        model="gpt-3.5-turbo",
        messages=messages,
    )
    return response.choices[0].message.content

# Инициализация списка сообщений
if 'messages' not in st.session_state:
    st.session_state['messages'] = [{"role": "user", "content": "Hello"}]

# Загрузка анимаций Lottie
lottie_hello = load_lottiefile("lottie_hello.json")
lottie_typing = load_lottiefile("lottie_typing.json")

# Настройки страницы
st.set_page_config(page_title="GPT Chat", page_icon="🤖", layout="wide")

# Стили CSS для красивого интерфейса
st.markdown("""
    <style>
    .main {
        background-color: #f0f0f5;
        font-family: 'Montserrat', sans-serif;
    }
    .stTextInput > div > input {
        background-color: #e0e0eb;
        border: 1px solid #d1d1e0;
        border-radius: 10px;
        padding: 10px;
        font-size: 18px;
    }
    .stButton > button {
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 10px;
        padding: 10px 20px;
        font-size: 18px;
        transition: background-color 0.3s ease;
    }
    .stButton > button:hover {
        background-color: #45a049;
    }
    .st-chatbox {
        background-color: #f7f7f7;
        border-radius: 10px;
        padding: 10px;
        margin: 10px 0;
    }
    .st-chatbox-user {
        text-align: right;
        color: blue;
    }
    .st-chatbox-bot {
        text-align: left;
        color: green;
    }
    </style>
    """, unsafe_allow_html=True)

# Заголовок
st.title("Chat with GPT 🤖")

# Показ анимации в верхней части страницы
st_lottie(lottie_hello, height=200, key="hello")

# Форма для ввода сообщения пользователя
with st.form(key="chat_form", clear_on_submit=True):
    user_message = st.text_input("You:", placeholder="Type your message here...")
    submit_button = st.form_submit_button(label="Send")

# Отправка сообщения пользователя
if submit_button and user_message:
    # Добавление сообщения пользователя в историю
    st.session_state['messages'].append({"role": "user", "content": user_message})

    # Показ анимации "бот печатает" перед ответом
    with st.spinner('GPT is typing...'):
        st_lottie(lottie_typing, height=100, key="typing")

        # Получение ответа от GPT
        bot_message = get_gpt_response(st.session_state['messages'])
        
        # Добавление ответа бота в историю
        st.session_state['messages'].append({"role": "assistant", "content": bot_message})

# Отображение всех сообщений
for message in st.session_state['messages']:
    if message['role'] == 'user':
        st.markdown(f"<div class='st-chatbox st-chatbox-user'><b>You:</b> {message['content']}</div>", unsafe_allow_html=True)
    else:
        st.markdown(f"<div class='st-chatbox st-chatbox-bot'><b>GPT:</b> {message['content']}</div>", unsafe_allow_html=True)