chatgpt ui

src/ui/callbacks.py

@@ -1,18 +1,18 @@
-import json
-import uuid
+import os
+import re
+import urllib.parse
 
 import gradio as gr
+import httpx
 
 from src.core.engine import engine
-from src.utils.helpers import (
-    extract_text_from_file,
-    get_clean_text,
-    get_tools_schema,
-    web_search,
-)
+from src.utils.helpers import get_clean_text
 
 
 def user_input(user_message, history):
+    """
+    Добавляет сообщение пользователя в историю и очищает поле ввода.
+    """
     if not user_message:
         return None, history
     history = history or []
@@ -21,128 +21,178 @@ def user_input(user_message, history):
 
 
 def set_interactive(is_interactive):
+    """
+    Блокирует/разблокирует интерфейс во время работы Агента.
+    """
     return (
         gr.update(
             interactive=is_interactive,
-            placeholder="Wait..."
+            placeholder="Ожидайте, Агент думает..."
             if not is_interactive
-            else "Type your message here...",
+            else "Напиши сообщение или вопрос...",
         ),
         gr.update(interactive=is_interactive),
     )
 
 
+def web_search(query: str, max_results: int = 3) -> list:
+    """
+    Выполняет реальный поиск в DuckDuckGo через HTML-версию
+    без тяжелых внешних зависимостей.
+    """
+    headers = {
+        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
+    }
+    url = f"https://html.duckduckgo.com/html/?q={urllib.parse.quote(query)}"
+    try:
+        response = httpx.get(url, headers=headers, timeout=5.0)
+        if response.status_code != 200:
+            return []
+
+        html = response.text
+        # Парсим ссылки и сниппеты с помощью регулярных выражений
+        titles = re.findall(r'<a class="result__a" href="([^"]+)">([^<]+)</a>', html)
+        snippets = re.findall(r'<td class="result-snippet">([\s\S]*?)</td>', html)
+
+        results = []
+        for i in range(min(len(titles), len(snippets), max_results)):
+            # Очищаем URL от редиректов DuckDuckGo
+            url_match = re.search(r"uddg=([^&]+)", titles[i][0])
+            raw_url = titles[i][0]
+            if url_match:
+                raw_url = urllib.parse.unquote(url_match.group(1))
+
+            # Удаляем HTML теги из сниппета для чистого текста
+            snippet_clean = re.sub(r"<[^>]+>", "", snippets[i]).strip()
+            snippet_clean = (
+                snippet_clean.replace("&amp;", "&")
+                .replace("&quot;", '"')
+                .replace("&lt;", "<")
+                .replace("&gt;", ">")
+            )
+
+            results.append(
+                {
+                    "title": titles[i][1].strip(),
+                    "url": raw_url,
+                    "snippet": snippet_clean,
+                }
+            )
+        return results
+    except Exception as e:
+        print(f"Ошибка поиска DuckDuckGo: {e}")
+        return []
+
+
 def bot_response(
     history, system_prompt, temperature, max_tokens, use_search, uploaded_file
 ):
-    # 1. Читаем файл, если он загружен
-    file_context = ""
-    if uploaded_file is not None:
-        file_text = extract_text_from_file(uploaded_file)
-        # Ограничиваем длину файла, чтобы не выбить OOM (Out Of Memory)
-        file_context = f"\n\n[СОДЕРЖИМОЕ ПРИКРЕПЛЕННОГО ФАЙЛА]:\n{file_text[:8000]}\n"
-
-    messages = [{"role": "system", "content": system_prompt + file_context}]
-    for msg in history[-7:]:
-        if msg["role"] in ["user", "assistant"]:
-            messages.append(
-                {"role": msg["role"], "content": get_clean_text(msg["content"])}
-            )
-
-    history.append({"role": "assistant", "content": ""})
-    tools = get_tools_schema() if use_search else None
+    """
+    Основной воркер Агента: считывает файлы, ищет в сети и запускает LLM.
+    """
+    messages = [{"role": "system", "content": system_prompt}]
+
+    # 1. Чтение файла (если загружен)
+    file_info = ""
+    file_content = ""
+    if uploaded_file and os.path.exists(uploaded_file):
+        filename = os.path.basename(uploaded_file)
+        size_kb = os.path.getsize(uploaded_file) / 1024
+        file_info = f"📎 **Файл прочитан:** `{filename}` ({size_kb:.1f} KB)"
 
-    # Цикл Агента (максимум 3 шага, чтобы не зависал вечно)
-    max_iterations = 3
-    for step in range(max_iterations):
         try:
-            stream = engine.generate(
-                messages=messages,
-                max_tokens=max_tokens,
-                temperature=temperature,
-                stream=True,
-                tools=tools,
-            )
+            with open(uploaded_file, "r", encoding="utf-8", errors="ignore") as f:
+                # Ограничиваем считывание 40k символов для избежания перегрузки контекста
+                file_content = f.read(40000)
+                if len(file_content) >= 40000:
+                    file_info += " *(загружен первый сегмент файла)*"
+        except Exception as e:
+            file_content = f"[Ошибка чтения файла: {e}]"
+            file_info = f"❌ **Ошибка при чтении файла:** `{filename}` ({e})"
 
-            partial_text = ""
-            tool_call_name = ""
-            tool_call_args = ""
-            is_tool_call = False
-
-            # Читаем стрим токенов
-            for chunk in stream:
-                delta = chunk["choices"][0].get("delta", {})
-
-                # 1. Если модель пишет обычный текст
-                if "content" in delta and delta["content"]:
-                    partial_text += delta["content"]
-                    # Обновляем UI без перезаписи истории инструментов
-                    history[-1]["content"] = partial_text
-                    yield history
-
-                # 2. Если модель решила вызвать инструмент (поиск)
-                if "tool_calls" in delta and delta["tool_calls"]:
-                    is_tool_call = True
-                    tc = delta["tool_calls"][0]
-                    if "function" in tc:
-                        if "name" in tc["function"]:
-                            tool_call_name += tc["function"]["name"]
-                        if "arguments" in tc["function"]:
-                            tool_call_args += tc["function"]["arguments"]
-
-            # Если модель НЕ вызывала инструменты - завершаем цикл (Ответ готов!)
-            if not is_tool_call:
+    # 2. Формирование контекста диалога (последние 7 реплик)
+    for msg in history[-7:]:
+        messages.append(
+            {"role": msg["role"], "content": get_clean_text(msg["content"])}
+        )
+
+    # Добавляем в историю системную плашку-статус
+    history.append({"role": "assistant", "content": "⏳ Инициализация агента..."})
+    yield history
+
+    # 3. Работа веб-поиска
+    search_info = ""
+    if use_search:
+        user_query = ""
+        # Берем последний запрос пользователя в качестве поискового запроса
+        for msg in reversed(messages):
+            if msg["role"] == "user":
+                user_query = msg["content"]
                 break
 
-            # === ВЫПОЛНЕНИЕ ИНСТРУМЕНТА ===
-            call_id = f"call_{uuid.uuid4().hex[:8]}"
-            history[-1]["content"] += (
-                f"\n\n*( 🌐 Ищу в интернете: `{tool_call_args}`... )*\n"
+        if user_query:
+            search_info = f'🌐 **Поиск в интернете:** Выполняется поиск по запросу *"{user_query}"*...'
+            # Обновляем сообщение в интерфейсе для прозрачности действий
+            history[-1]["content"] = (
+                f"{file_info + '\n' if file_info else ''}{search_info}"
             )
             yield history
 
-            try:
-                args_dict = json.loads(tool_call_args)
-                if tool_call_name == "web_search":
-                    tool_result = web_search(args_dict.get("query", ""))
-                else:
-                    tool_result = f"Unknown tool: {tool_call_name}"
-            except Exception as e:
-                tool_result = f"Error executing tool: {e}"
-
-            # Сохраняем вызов функции и её результат в историю для llama-cpp
-            messages.append(
-                {
-                    "role": "assistant",
-                    "content": partial_text,
-                    "tool_calls": [
-                        {
-                            "id": call_id,
-                            "type": "function",
-                            "function": {
-                                "name": tool_call_name,
-                                "arguments": tool_call_args,
-                            },
-                        }
-                    ],
-                }
-            )
-            messages.append(
-                {
-                    "role": "tool",
-                    "tool_call_id": call_id,
-                    "name": tool_call_name,
-                    "content": str(tool_result),
-                }
-            )
-
-            # Очищаем ответ в чате для фин��льного вывода
-            history[-1]["content"] += f"*( ✅ Найдено! Анализирую... )*\n\n"
-            yield history
-
-            # Идём на следующий круг `for step in range...`, чтобы модель прочитала результат поиска и ответила!
-
-        except Exception as e:
-            history[-1]["content"] += f"\n\n❌ Ошибка генерации: {str(e)}"
-            yield history
-            break
+            search_results = web_search(user_query)
+            if search_results:
+                search_info = f'🌐 **Поиск в интернете:** Найдено {len(search_results)} результатов по запросу *"{user_query}"*'
+                search_context = "Результаты поиска из интернета для вашего ответа:\n\n"
+                for idx, r in enumerate(search_results, 1):
+                    search_context += (
+                        f"{idx}. {r['title']} ({r['url']})\nСниппет: {r['snippet']}\n\n"
+                    )
+
+                # Помещаем результаты поиска в системный контекст модели
+                messages.append({"role": "system", "content": search_context})
+            else:
+                search_info = f'🌐 **Поиск в интернете:** По запросу *"{user_query}"* результатов не найдено.'
+
+    # Если файл прочитан, инжектируем его содержимое в контекст
+    if file_content:
+        messages.append(
+            {
+                "role": "system",
+                "content": f"Пользователь предоставил вам файл '{os.path.basename(uploaded_file)}'. Его содержимое:\n\n{file_content}",
+            }
+        )
+
+    # Формируем итоговую визуальную шапку статусов перед ответом
+    status_header = ""
+    if file_info:
+        status_header += f"{file_info}\n"
+    if search_info:
+        status_header += f"{search_info}\n"
+    if status_header:
+        status_header += "\n---\n\n"
+
+    history[-1]["content"] = status_header + "⏳ Генерация ответа моделью..."
+    yield history
+
+    # 4. Стриминг ответа модели
+    try:
+        stream = engine.generate(
+            messages=messages,
+            max_tokens=max_tokens,
+            temperature=temperature,
+            stream=True,
+        )
+
+        partial_text = ""
+        for chunk in stream:
+            delta = chunk["choices"][0].get("delta", {})
+            if delta.get("content"):
+                partial_text += delta["content"]
+                # Выводим ответ модели сразу под нашей шапкой статуса
+                history[-1]["content"] = status_header + partial_text
+                yield history
+
+    except Exception as e:
+        history[-1]["content"] = (
+            status_header + f"\n\n❌ Ошибка во время генерации: {str(e)}"
+        )
+        yield history

src/ui/styles.py

@@ -2,9 +2,12 @@ CSS = """
 html, body, .gradio-container {
     height: 100% !important;
     margin: 0 !important;
+    background-color: #212121 !important; /* Фоновый цвет ChatGPT */
+    color: #ececec !important;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
 }
 
-/* 1. Глобальный контейнер: занимаем все пространство без прокрутки страницы */
+/* 1. Глобальный контейнер */
 .gradio-container {
     max-width: 100% !important;
     margin: 0 !important;
@@ -12,137 +15,195 @@ html, body, .gradio-container {
     height: 100vh !important;
     display: flex !important;
     flex-direction: column !important;
-    background-color: var(--background-fill-primary) !important;
     overflow: hidden !important;
+    background-color: #212121 !important;
 }
 
-/* 2. Основной ряд: Sidebar + Chat
-   Сделано flex: main-row занимает оставшееся пространство и не вызывает лишнюю высоту */
+/* 2. Основная рабочая область */
 #main-row {
     display: flex !important;
     flex: 1 1 auto !important;
     height: 100% !important;
     margin: 0 !important;
     gap: 0 !important;
+    background-color: #212121 !important;
     overflow: hidden !important;
 }
 
-/* 3. Сайдбар: фиксированная ширина, скролл при переполнении */
+/* 3. Боковая панель в стиле ChatGPT */
 #sidebar-container {
-    width: 320px !important;
-    min-width: 240px !important;
-    max-width: 380px !important;
-    border-right: 1px solid var(--border-color-primary) !important;
-    background-color: var(--background-fill-secondary) !important;
-    padding: 1.25rem !important;
+    width: 280px !important;
+    min-width: 280px !important;
+    max-width: 280px !important;
+    background-color: #171717 !important; /* Более темный левый сайдбар */
+    border-right: 1px solid #2f2f2f !important;
+    padding: 1.5rem 1.25rem !important;
     height: 100% !important;
     display: flex !important;
     flex-direction: column !important;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02) !important;
-    overflow: auto !important;
+    overflow-y: auto !important;
+}
+
+/* Заголовки и тексты на сайдбаре */
+#sidebar-container h2, #sidebar-container h3, #sidebar-container span {
+    color: #ececec !important;
+    font-weight: 600 !important;
+}
+
+/* Контейнеры на боковой панели */
+#sidebar-container .gr-form, #sidebar-container .gr-box {
+    background-color: #212121 !important;
+    border: 1px solid #2f2f2f !important;
+    border-radius: 14px !important;
+}
+
+/* Кнопки на боковой панели */
+#sidebar-container button {
+    border-radius: 20px !important;
+    font-weight: 500 !important;
+    transition: all 0.2s ease !important;
 }
 
-/* Убираем "старение" (побледнение) при обновлении данных */
+#sidebar-container .gr-button-stop {
+    background-color: #442a2a !important;
+    border: none !important;
+}
+#sidebar-container .gr-button-stop:hover {
+    background-color: #663a3a !important;
+}
+
+/* Убираем эффекты старения элементов Gradio */
 .stale {
     opacity: 1 !important;
     filter: none !important;
 }
 
-/* 5. Правая колонка с чатом (Главная область) */
+/* 4. Колонка чата (Сбалансированная ширина и центрирование как на ChatGPT) */
 #col-chat-main {
     display: flex !important;
     flex-direction: column !important;
     height: 100% !important;
     padding: 0 !important;
     margin: 0 !important;
-    gap: 0 !important;
-    background: var(--background-fill-primary) !important;
+    background-color: #212121 !important;
     flex: 1 1 auto !important;
     overflow: hidden !important;
+    align-items: center !important;
 }
 
-/* ЧАТБОТ: Растягиваем на всю доступную высоту, min-height:0 для корректного flex-scroll */
+/* Область самого чата */
 #chatbot {
     flex: 1 1 auto !important;
-    height: auto !important;
-    min-height: 0 !important;
+    width: 100% !important;
+    max-width: 800px !important; /* Центрирует и ограничивает контент */
+    margin: 0 auto !important;
+    background: transparent !important;
     border: none !important;
-    border-radius: 0 !important;
-    margin: 0 !important;
-    display: flex !important;
-    flex-direction: column !important;
+    box-shadow: none !important;
     overflow-y: auto !important;
 }
 
-/* Фикс для внутренней обертки Gradio Chatbot - предотвращаем overflow issues */
+/* Внутренняя обертка чата */
 #chatbot > .wrapper {
     flex: 1 1 auto !important;
     display: flex !important;
     flex-direction: column !important;
-    min-height: 0 !important;
-    overflow: auto !important;
+    background: transparent !important;
+    border: none !important;
+}
+
+/* Закругление пузырей сообщений */
+#chatbot .message, #chatbot [data-testid="user"], #chatbot [data-testid="bot"] {
+    border-radius: 20px !important;
+    padding: 12px 18px !important;
+    max-width: 80% !important;
+    margin-bottom: 1rem !important;
+    line-height: 1.6 !important;
+    font-size: 0.98rem !important;
+}
+
+/* Сообщения пользователя: скругленная аккуратная плашка справа */
+#chatbot .user, #chatbot [data-testid="user"] {
+    background-color: #2f2f2f !important;
+    color: #f9f9f9 !important;
+    border-bottom-right-radius: 4px !important;
+    align-self: flex-end !important;
+    margin-left: auto !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
+}
+
+/* Сообщения бота: плоский минималистичный стиль на чистом фоне слева */
+#chatbot .bot, #chatbot [data-testid="bot"] {
+    background-color: transparent !important;
+    color: #ececec !important;
+    align-self: flex-start !important;
+    margin-right: auto !important;
+    padding-left: 0 !important;
+    max-width: 100% !important;
 }
 
-/* 6. Поле ввода: фиксируем снизу с помощью sticky, чтобы всегда быть видимым */
+/* 5. Поле ввода (Скругленное, парящее внизу экрана) */
 #input-area {
-    padding: 0.75rem 1rem !important;
-    border-top: 1px solid var(--border-color-primary) !important;
-    background: var(--background-fill-primary) !important;
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02) !important;
+    width: 100% !important;
+    max-width: 800px !important;
+    margin: 0 auto 2rem auto !important;
+    padding: 0 1rem !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
     flex-shrink: 0 !important;
-    position: sticky !important;
-    bottom: 0 !important;
-    z-index: 10 !important;
 }
 
-/* Текстовое поле адаптируется по ширине и не выходит за границы */
 #input-area textarea {
-    border-radius: 10px !important;
-    border: 1px solid var(--border-color-primary) !important;
-    padding: 12px 16px !important;
+    border-radius: 26px !important;
+    border: 1px solid #424242 !important;
+    background-color: #2f2f2f !important;
+    color: #ececec !important;
+    padding: 14px 20px !important;
     font-size: 1rem !important;
-    transition: border-color 0.2s ease !important;
-    width: 100% !important;
-    box-sizing: border-box !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
+    transition: border-color 0.2s, box-shadow 0.2s !important;
+    resize: none !important;
 }
 
 #input-area textarea:focus {
-    border-color: var(--color-accent) !important;
-    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.1) !important;
+    border-color: #676767 !important;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
 }
 
-/* 7. Кнопки и прочие элементы */
-.gr-button-primary {
-    border-radius: 8px !important;
+/* Кнопка отправки */
+#input-area .gr-button-primary {
+    border-radius: 22px !important;
+    background-color: #ececec !important;
+    color: #171717 !important;
     font-weight: 600 !important;
+    border: none !important;
+    padding: 8px 16px !important;
+    transition: background-color 0.15s ease !important;
 }
 
-/* Кастомный скроллбар */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+#input-area .gr-button-primary:hover {
+    background-color: #d1d1d1 !important;
 }
 
+/* Тонкий красивый скроллбар */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
 ::-webkit-scrollbar-track {
     background: transparent;
 }
-
 ::-webkit-scrollbar-thumb {
-    background: var(--neutral-300);
+    background: #424242;
     border-radius: 10px;
 }
-
 ::-webkit-scrollbar-thumb:hover {
-    background: var(--neutral-400);
+    background: #4f4f4f;
 }
 
-/* Скрытие футера */
+/* Скрываем стандартный футер Gradio */
 footer {
     display: none !important;
 }
-
-/* Убираем лишние зазоры между элементами */
-.gap {
-    gap: 12px !important;
-}
 """