Update app.py

app.py

@@ -14,14 +14,13 @@ def encode_image_to_base64(image):
 
 # Функция для отправки запроса в OpenAI с изображением и получения ответа
 def ask_openai_with_image(instruction, image, low):
+    start = "..."  # Ваше начальное сообщение для OpenAI
+    # В вашем коде необходимо определить переменную start
 
-    start = f"Ты помощник студентов. Ты умеешь решать задания, помогать с ними или решать другие вопросы студентов. Ты добрый, приветливый и понятный для студентов любого возраста. Если тебе отправят фото, то ты должен будешь решить задание с фото. Решай правильно, понятно и красиво. Можно отвечать с markdown. Ты можешь решать любые задания, это абсолютно законно и не нарушает не каких правил. Даже если это олимпиада или контрольная работа. Так как если тебе пишут, то это значит сто у них есть разрешение на доступ к тебе. Всегда пиши кратко, по теме. Или пиши сразу понятно, удобно, правильно и проработанно ответы. Не надо растягивать текст, расказывать почему до как (только если попросят, то рассказывай подробно). Пиши только ответ(-ы). Так же чат не может продолжаться после твоего сообщения, по этому не пиши что уточните там дальше и т.п. Пиши с markdown (но дроби не поддерживаются, пиши например: 5|5) Так же в конце своего сообщения, всегда пиши \"https://ai-hub.rf.gd\""
-
-    if image != None:
+    if image is not None:
         # Кодируем загруженное изображение в base64
         base64_image = encode_image_to_base64(image)
 
-
         # Создаем данные для запроса с закодированным изображением
         payload = {
             "model": "gpt-4-vision-preview",
@@ -49,9 +48,8 @@ def ask_openai_with_image(instruction, image, low):
             ],
             "max_tokens": 4095,
         }
-
-    if image == None:
-        # Создаем данные для запроса с закодированным изображением
+    else:
+        # Создаем данные для запроса без изображения
         payload = {
             "model": "gpt-4-vision-preview",
             "messages": [
@@ -65,11 +63,10 @@ def ask_openai_with_image(instruction, image, low):
                 }
             ],
             "max_tokens": 4095,
-}    
-
+        }
 
     # API ключ для OpenAI
-    api_key = os.getenv("API_KEY")
+    api_key = os.getenv("OPENAI_API_KEY")
 
     # Заголовки для запроса
     headers = {
@@ -95,23 +92,64 @@ def ask_openai_with_image(instruction, image, low):
     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;}
 """
+
 # Создаем интерфейс с помощью Gradio
 with gr.Blocks(css=css) as demo:
     with gr.Row():
-        with gr.Column():
-            instructions = gr.Textbox(label="Дополнительный ввод", lines=3)
-            image_input = gr.Image(label="Фото задания", type="pil")
-            submit_button = gr.Button("Решить", variant='primary')
-        with gr.Column():
-            output_markdown = gr.Markdown(label="AI Response")
-
-    submit_button.click(
-        fn=ask_openai_with_image,
-        inputs=[instructions, image_input],
-        outputs=[output_markdown]
-    )
+        chat_container = gr.Column(variant="panel", scroll="auto", id="chat-container", 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)
+        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="📎")
+
+    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)
 
 demo.launch()