Update app.py

app.py

@@ -1,8 +1,52 @@
 import streamlit as st
 from g4f.client import Client
+import time
+
+# Настройка страницы
+st.set_page_config(page_title="Чат с GPT", page_icon="🤖", layout="wide")
+
+# Стили 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)
 
 # Инициализация клиента
-client = Client()
+@st.cache_resource
+def get_client():
+    return Client()
+
+client = get_client()
 
 # Функция для получения ответа от GPT
 def get_gpt_response(messages):
@@ -12,9 +56,6 @@ def get_gpt_response(messages):
     )
     return response.choices[0].message.content
 
-# Заголовок приложения
-st.title("Чат с GPT")
-
 # Инициализация состояния для хранения сообщений
 if 'messages' not in st.session_state:
     st.session_state.messages = []
@@ -23,34 +64,60 @@ if 'messages' not in st.session_state:
 def display_messages():
     for msg in st.session_state.messages:
         if msg['role'] == 'user':
-            st.markdown(f"<div style='text-align: right; color: blue;'><b>Вы:</b> {msg['content']}</div>", unsafe_allow_html=True)
+            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 style='text-align: left; color: green;'><b>GPT:</b> {msg['content']}</div>", unsafe_allow_html=True)
+            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)
+
+# Заголовок приложения
+st.title("🤖 Чат с GPT")
 
 # Отображение предыдущих сообщений
-st.header("История сообщений")
 display_messages()
 
 # Поле ввода для нового сообщения
 user_input = st.text_input("Введите ваше сообщение:", key="input")
 
+# Создание двух колонок для кнопок
+col1, col2 = st.columns(2)
+
 # Обработка отправки сообщения
-if st.button("Отправить"):
+if col1.button("Отправить"):
     if user_input:
         # Сохранение сообщения пользователя
         st.session_state.messages.append({"role": "user", "content": user_input})
         
-        # Получение ответа от GPT
-        gpt_response = get_gpt_response(st.session_state.messages)
+        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})
 
         # Очистка поля ввода
         st.session_state.input = ""
+        
+        # Перезагрузка страницы для отображения нового сообщения
+        st.experimental_rerun()
 
 # Кнопка для сброса чата
-if st.button("Сбросить чат"):
+if col2.button("Сбросить чат"):
     st.session_state.messages = []
     st.session_state.input = ""
-    
+    st.experimental_rerun()
+
+# Добавление пространства внизу страницы
+st.markdown("<br><br>", unsafe_allow_html=True)