Update app.py

app.py

@@ -1,122 +1,105 @@
 import streamlit as st
-from g4f.client import Client
+import g4f
+from streamlit_lottie import st_lottie
+import json
 
-# Настройка страницы
-st.set_page_config(page_title="Чат с GPT", page_icon="🤖", layout="wide")
+# Функция для загрузки анимаций Lottie
+def load_lottiefile(filepath: str):
+    with open(filepath, "r") as f:
+        return json.load(f)
 
-# Стили CSS
-st.markdown("""
-<style>
-    .stTextInput > div > div > input {
-        background-color: #f0f2f6;
-    }
-    .stButton > button {
-        width: 100%;
-        border-radius: 20px;
-    }
-    .chat-message {
-        padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1rem; display: flex
-    }
-    .chat-message.user {
-        background-color: #2b313e
-    }
-    .chat-message.bot {
-        background-color: #475063
-    }
-    .chat-message .avatar {
-      width: 20%;
-    }
-    .chat-message .avatar img {
-      max-width: 78px;
-      max-height: 78px;
-      border-radius: 50%;
-      object-fit: cover;
-    }
-    .chat-message .message {
-      width: 80%;
-      padding: 0 1.5rem;
-      color: #fff;
-    }
-</style>
-""", unsafe_allow_html=True)
-
-# Инициализация клиента
-@st.cache_resource
-def get_client():
-    return Client()
-
-client = get_client()
-
-# Функция для получения ответа от GPT
+# Функция для отправки сообщений в GPT
 def get_gpt_response(messages):
+    client = g4f.Client()
     response = client.chat.completions.create(
         model="gpt-3.5-turbo",
-        messages=messages
+        messages=messages,
     )
     return response.choices[0].message.content
 
-# Инициализация состояния для хранения сообщений
+# Инициализация списка сообщений
 if 'messages' not in st.session_state:
-    st.session_state.messages = []
+    st.session_state['messages'] = [{"role": "user", "content": "Hello"}]
 
-# Функция для отображения сообщений
-def display_messages():
-    for msg in st.session_state.messages:
-        if msg['role'] == 'user':
-            st.markdown(f"""
-            <div class="chat-message user">
-                <div class="avatar">
-                    <img src="https://i.imgur.com/Yx5c8e1.png">
-                </div>    
-                <div class="message">{msg['content']}</div>
-            </div>
-            """, unsafe_allow_html=True)
-        else:
-            st.markdown(f"""
-            <div class="chat-message bot">
-                <div class="avatar">
-                    <img src="https://i.imgur.com/nGF1K8f.jpg">
-                </div>    
-                <div class="message">{msg['content']}</div>
-            </div>
-            """, unsafe_allow_html=True)
+# Загрузка анимаций Lottie
+lottie_hello = load_lottiefile("lottie_hello.json")
+lottie_typing = load_lottiefile("lottie_typing.json")
 
-# Заголовок приложения
-st.title("🤖 Чат с GPT")
+# Настройки страницы
+st.set_page_config(page_title="GPT Chat", page_icon="🤖", layout="wide")
 
-# Отображение предыдущих сообщений
-display_messages()
+# Стили 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)
 
-# Поле ввода для нового сообщения
-user_input = st.text_input("Введите ваше сообщение:", key="user_input")
+# Заголовок
+st.title("Chat with GPT 🤖")
 
-# Создание двух колонок для кнопок
-col1, col2 = st.columns(2)
+# Показ анимации в верхней части страницы
+st_lottie(lottie_hello, height=200, key="hello")
 
-# Обработка отправки сообщения
-if col1.button("Отправить"):
-    if user_input:
-        # Сохранение сообщения пользователя
-        st.session_state.messages.append({"role": "user", "content": user_input})
-        
-        with st.spinner('GPT обрабатывает ваш запрос...'):
-            # Получение ответа от GPT
-            gpt_response = get_gpt_response(st.session_state.messages)
-        
-        # Сохранение ответа GPT
-        st.session_state.messages.append({"role": "assistant", "content": gpt_response})
+# Форма для ввода сообщения пользователя
+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")
 
-        # Очистка поля ввода через связанное состояние
-        st.session_state.user_input = ""
-        
-        # Перезагрузка страницы для отображения нового сообщения
-        st.experimental_rerun()
+# Отправка сообщения пользователя
+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")
 
-# Кнопка для сброса чата
-if col2.button("Сбросить чат"):
-    st.session_state.messages = []
-    st.session_state.user_input = ""
-    st.experimental_rerun()
+        # Получение ответа от GPT
+        bot_message = get_gpt_response(st.session_state['messages'])
+        
+        # Добавление ответа бота в историю
+        st.session_state['messages'].append({"role": "assistant", "content": bot_message})
 
-# Добавление пространства внизу страницы
-st.markdown("<br><br>", unsafe_allow_html=True)
+# Отображение всех сообщений
+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)