Update app.py

app.py

@@ -19,19 +19,14 @@ def send_message(message, image=None):
 css = """
 footer {visibility: hidden !important;}
 .chat-container {height: 90vh; display: flex; flex-direction: column;}
-.chat-messages {flex: 1; overflow-y: auto; padding: 10px;}
+.chat-messages {flex: 1; overflow-y: auto; padding: 10px; background-color: #f0f0f0; border-radius: 10px; margin-bottom: 10px;}
 .input-group {display: flex; align-items: center; padding: 10px;}
 .image-preview {max-width: 200px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
 """
 
 # Создаем интерфейс
 with gr.Blocks(css=css) as demo:
-    chat_history = gr.Markdown("Привет! Я Помогатор, готов помочь тебе с любыми вопросами!) 😊").style(
-        container=True, 
-        scroll="auto", 
-        height="auto", 
-        max_height="400px"
-    )
+    chat_history_container = gr.HTML("<div class='chat-messages'>Привет! Я Помогатор, готов помочь тебе с любыми вопросами!) 😊</div>")
     with gr.Row():
         input_message = gr.Textbox(placeholder="Введите ваше сообщение здесь...", lines=2, interactive=True, max_lines=5)
         send_button = gr.Button("Отправить")
@@ -46,29 +41,31 @@ with gr.Blocks(css=css) as demo:
             attach_button.style(visible=False)
             image = Image.open(io.BytesIO(file_info["content"]))
             img_str = encode_image_to_base64(image)
-            return f"data:image/jpeg;base64,{img_str}"
+            return f"<div class='chat-messages'><img class='image-preview' src='data:image/jpeg;base64,{img_str}' /></div>"
         else:
             clear_button.style(visible=False)
             attach_button.style(visible=True)
-            return None
+            return "<div class='chat-messages'></div>"
 
     def clear_image():
         attach_button.reset()
         clear_button.style(visible=False)
         attach_button.style(visible=True)
-        return None
+        return "<div class='chat-messages'></div>"
 
     def handle_send(message, image=None):
         response, img_str = send_message(message, image)
-        new_message = f"**Вы:** {message}\n\n" if message else ""
-        new_message += f"**Помогатор:** {response}\n\n"
-        chat_history.update(new_message + chat_history.value)
+        new_message = f"<div class='chat-messages'><strong>Вы:</strong> {message}</div>" if message else ""
+        if img_str:
+            new_message += f"<div class='chat-messages'><img class='image-preview' src='data:image/jpeg;base64,{img_str}' /></div>"
+        new_message += f"<div class='chat-messages'><strong>Помогатор:</strong> {response}</div>"
+        chat_history_container.update(new_message + chat_history_container.value)
         input_message.reset()
         clear_image()
 
     send_button.click(handle_send, inputs=[input_message, attach_button], outputs=[])
-    attach_button.change(preview_image, inputs=[attach_button], outputs=[chat_history])
-    clear_button.click(clear_image, inputs=[], outputs=[chat_history])
+    attach_button.change(preview_image, inputs=[attach_button], outputs=[chat_history_container])
+    clear_button.click(clear_image, inputs=[], outputs=[chat_history_container])
 
 # Запускаем интерфейс
 demo.launch()