Update app.py

app.py

@@ -1,9 +1,7 @@
 import gradio as gr
-import requests
-import os
-import base64
 from PIL import Image
 import io
+import base64
 
 # Функция для кодирования изображения в base64
 def encode_image_to_base64(image):
@@ -12,144 +10,79 @@ def encode_image_to_base64(image):
     img_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
     return img_str
 
-# Функция для отправки запроса в OpenAI с изображением и получения ответа
-def ask_openai_with_image(instruction, image, low):
-    start = "..."  # Ваше начальное сообщение для OpenAI
-    # В вашем коде необходимо определить переменную start
-
-    if image is not None:
-        # Кодируем загруженное изображение в base64
-        base64_image = encode_image_to_base64(image)
-
-        # Создаем данные для запроса с закодированным изображением
-        payload = {
-            "model": "gpt-4-vision-preview",
-            "messages": [
-                {
-                    "role": "user",
-                    "content": [
-                        {
-                            "type": "text",
-                            "text": start,
-                        },
-                        {
-                            "type": "text",
-                            "text": instruction,
-                        },
-                        {
-                            "type": "image_url",
-                            "image_url": {
-                                "url": f"data:image/jpeg;base64,{base64_image}",
-                                "detail": "high",
-                            },
-                        },
-                    ],
-                }
-            ],
-            "max_tokens": 4095,
-        }
-    else:
-        # Создаем данные для запроса без изображения
-        payload = {
-            "model": "gpt-4-vision-preview",
-            "messages": [
-                {
-                    "role": "user",
-                    "content": start,
-                },
-                {
-                    "role": "user",
-                    "content": instruction,
-                }
-            ],
-            "max_tokens": 4095,
-        }
-
-    # API ключ для OpenAI
-    api_key = os.getenv("OPENAI_API_KEY")
-
-    # Заголовки для запроса
-    headers = {
-        'Authorization': f'Bearer {api_key}',
-        'Content-Type': 'application/json',
-    }
-
-    # URL для запроса к API OpenAI
-    url = "https://api.openai.com/v1/chat/completions"
+# Функция, которая будет вызываться при нажатии кнопки отправки
+def send_message(message, image=None):
+    # Здесь будет логика отправки сообщения и получения ответа от бота
+    # Для примера просто возвращаем полученное сообщение и изображение
+    response = f"Вы сказали: {message}"
+    if image:
+        img_str = encode_image_to_base64(image)
+        return response, f"data:image/jpeg;base64,{img_str}"
+    return response, None
 
-    # Отправляем запрос в OpenAI
-    response = requests.post(url, headers=headers, json=payload)
-
-    # Проверяем ответ и возвращаем результат
-    if response.status_code == 200:
-        response_json = response.json()
-        try:
-            # Пытаемся извлечь текст из ответа
-            return response_json["choices"][0]["message"]["content"]
-        except Exception as e:
-            # Если есть ошибка в структуре JSON, выводим ее
-            return f"Error processing the image response: {e}"
-    else:
-        # Если произошла ошибка, возвращаем сообщение об ошибке
-        return f"Error: {response.status_code} - {response.text}"
-
-# CSS стили для интерфейса
 css = """
 footer {visibility: hidden !important;}
-#message-input {width: calc(100% - 75px);}
-#image-preview {border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-width: 100px; max-height: 100px;}
-#send-button {margin-left: 10px;}
-#attachment-button {margin-right: 10px;}
-.chat-container {height: calc(100vh - 70px); overflow-y: auto;}
-.message {margin: 10px; padding: 10px; border-radius: 10px; background-color: #f0f0f0;}
-.message.ai {background-color: #d1e7dd;}
-.message.user {background-color: #f8d7da;}
+.chat-container {height: 90vh; display: flex; flex-direction: column;}
+.chat-messages {flex: 1; overflow-y: auto; padding: 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);}
 """
 
-# Создаем интерфейс с помощью Gradio
+# Создаем интерфейс
 with gr.Blocks(css=css) as demo:
-    with gr.Row():
-        chat_container = gr.Column(variant="panel", elem_id="chat-container")
-        with chat_container:
-            gr.Markdown("Привет! Я Помогатор, готов помочь тебе с любыми вопросами!) 😊", css_classes=["message", "ai"])
-    
-    with gr.Row():
-        attachment_button = gr.Button(value="📎", id="attachment-button")
-        message_input = gr.Textbox(placeholder="Напишите сообщение...", id="message-input")
-        send_button = gr.Button(value="➤", id="send-button")
-        image_input = gr.Image(type="pil", interactive=False, visible=False, id="image-preview")
-
-    def send_message(message, image):
-        if image is not None:
-            image_base64 = encode_image_to_base64(image)
-            ai_response = ask_openai_with_image(message, image, low=False)
+    with gr.Row().style(equal_height=False):
+        chat_history = gr.Markdown("Привет! Я Помогатор, готов помочь тебе с любыми вопросами!) 😊").style(
+            container=True, 
+            scroll="auto", 
+            height="auto", 
+            max_height="400px"
+        )
+    with gr.Row().style(justify_content="center", padding="10px"):
+        with gr.Column(scale=12):
+            input_message = gr.Textbox(placeholder="Введите ваше сообщение здесь...", lines=2, interactive=True, max_lines=5)
+        with gr.Column(scale=1, min_width="50px"):
+            send_button = gr.Button("Отправить")
+        with gr.Column(scale=1, min_width="50px"):
+            attach_button = gr.File(label="", file_count="single", interactive=True)
+            attach_button.style(icon="paperclip", hide_label=True)
+        with gr.Column(scale=1, min_width="50px"):
+            clear_button = gr.Button(label="")
+            clear_button.style(icon="times", hide_label=True, visible=False)
+
+    # Функция для отображения предварительного просмотра изображения
+    def preview_image(file_info):
+        if file_info is not None:
+            clear_button.style(visible=True)
+            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}"
         else:
-            ai_response = ask_openai_with_image(message, None, low=False)
-        
-        # Добавляем сообщение пользователя в чат
-        with chat_container:
-            gr.Markdown(f"**Вы:** {message}", css_classes=["message", "user"])
-            gr.Markdown(f"**AI:** {ai_response}", css_classes=["message", "ai"])
-        # Очищаем поле ввода сообщения
-        message_input.update(value="")
-        # Если было загружено изображение, убираем его
-        if image is not None:
-            clear_image()
-
-    def upload_image(file):
-        if file is not None:
-            image_input.update(value=file, visible=True)
-            attachment_button.update(value="❌")
-        else:
-            image_input.update(value=None, visible=False)
-            attachment_button.update(value="📎")
+            clear_button.style(visible=False)
+            attach_button.style(visible=True)
+            return None
 
+    # Функция для очистки загруженного изображения
     def clear_image():
-        image_input.update(value=None, visible=False)
-        attachment_button.update(value="📎")
-
-    message_input.change(send_message, [message_input, image_input], chat_container)
-    send_button.click(send_message, [message_input, image_input], chat_container)
-    attachment_button.click(clear_image if attachment_button.value == "❌" else upload_image, image_input, image_input)
-
+        attach_button.reset()
+        clear_button.style(visible=False)
+        attach_button.style(visible=True)
+        return None
+
+    # Функция для обработки отправки сообщения
+    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"![uploaded image]({img_str})\n\n" if img_str else ""
+        new_message += f"**Помогатор:** {response}\n\n"
+        chat_history.update(new_message + chat_history.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])
+
+# Запускаем интерфейс
 demo.launch()