Update app.py

app.py

@@ -4,27 +4,26 @@ from llama_index.llms.openrouter import OpenRouter
 from llama_index.core.llms import ChatMessage
 from llama_index.embeddings.huggingface import HuggingFaceEmbedding
 from llama_index.core import Settings, StorageContext, load_index_from_storage
-
 import nest_asyncio
+
 nest_asyncio.apply()
 
 # === Глобальная инициализация ===
 embed_model = HuggingFaceEmbedding(model_name='intfloat/multilingual-e5-large-instruct')
 Settings.embed_model = embed_model
 Settings.llm = OpenRouter(
-    api_key=os.environ["OPENROUTER_API_KEY"],
-    model="qwen/qwen3-4b:free",
+    api_key="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",
+    model="deepseek/deepseek-r1-0528-qwen3-8b:free",
     max_tokens=10000,
     context_window=20000,
 )
+
 system_prompt = """
 Ты — эксперт по адаптации к изменениям климата. 
 У тебя есть база знаний с кейсами и нормативными документами.
 Пользователь вводит запрос, связанный с климатическим риском в регионе или отрасли.
-
 Твоя задача — на основе информации из базы знаний предложить 2–3 релевантных адаптационных мероприятия, 
 которые помогут снизить климатический риск, о котором спрашивает пользователь.
-
 ### Требования к ответу:
 1. Представь результат **в виде Markdown-таблицы** с колонками:
    - Наименование мероприятий  
@@ -32,476 +31,310 @@ system_prompt = """
    - Адаптационный эффект  
    - Актуальность для региона (указать с учётом контекста запроса). Если регион не указан, считай, что задается вопрос по Тюменской области
    - Ответственная организация (из региона)  
-
 2. Если источник данных, на которых ты основываешь ответ, известен (это URL и краткое название кейса), 
    добавь их **ниже таблицы** в виде списка ссылок:  
    `**Опорные источники:** [1] Наименовавание мероприятий - URL, [2] Наименовавание мероприятий - URL`
-
 3. Пиши кратко, по существу, с акцентом на реальные, практические меры.
 4. Если информация отсутствует — предложи логичные адаптационные меры на основе Приказа Минэкономразвития России от 13 мая 2021 г. № 267 «Об утверждении методических рекомендаций и показателей по вопросам адаптации к изменениям климата».
-
 Пример формата ответа:
-
 | Наименование мероприятий | Митигационный эффект | Адаптационный эффект | Актуальность для Тобольского района | Ответственная организация |
 |---------------------------|----------------------|----------------------|------------------------------------|----------------------------|
 | Развитие городского электротранспорта | снижение эмиссии | повышение устойчивости транспортной инфраструктуры | актуально | городские власти |
 | Перевод транспорта на газомоторное топливо | снижение эмиссии | рациональное использование ресурсов | реализуется частично | транспортные организации |
-
-**Опорные источники:** [1] Наименовавание мероприятий - https://example.com/case_12
+**Опорные источники:** [1] Наименовавание мероприятий - https://example.com/case_12  
 Приводи только те источники, которые используешь для формирования таблицы непосредственно. URL приводи строго такое же, как указано в базе знаний. Наименование мероприятий бери из базы знаний
 Ответственную организацию в таблице указывай актуальную для региона, который пользователь указал в запросе
 """
 
 def get_facts(user_question: str) -> str:
-    """
-    Возвращает ответ (строку) по запросу пользо��ателя.
-    Пытается использовать llama_index, если доступен; иначе возвращает понятное сообщение.
-    """
     try:
-        if not user_question or not user_question.strip():
+        if not user_question.strip():
             return "Ошибка: пожалуйста, введите ваш запрос."
 
-        if not LLM_AVAILABLE:
-            return ("Ошибка при обработке запроса: библиотека llama_index или зависимости не установлены "
-                    "в окружении сервера. Интерфейс запущен, но LLM-вызовы недоступны.\n\n"
-                    "Чтобы включить LLM, установите необходимые библиотеки и наполните ./storage индексом. "
-                    "Подробности в README вашего проекта.")
-
-        # Если мы здесь — llama_index доступен
         storage_context = StorageContext.from_defaults(persist_dir="./storage")
         index = load_index_from_storage(storage_context)
         retriever = index.as_retriever(similarity_top_k=4)
         nodes = retriever.retrieve(user_question)
 
         context = "\n\n".join([node.get_content() for node in nodes]) if nodes else "Не найдено релевантных документов."
-        full_system_prompt = SYSTEM_PROMPT + f"\n\nКонтекст:\n{context}"
+        full_system_prompt = system_prompt + f"\n\nКонтекст:\n{context}"
 
         messages = [
             ChatMessage(role="system", content=full_system_prompt),
             ChatMessage(role="user", content="Пользовательский запрос: " + user_question)
         ]
-
+        
         response = Settings.llm.chat(messages)
         return response.message.content
 
     except Exception as e:
-        return f"Ошибка при попытке обработать запрос (проверьте зависимости и наличие индекса в ./storage):\n{str(e)}"
+        return f"Ошибка:\n{str(e)}"
 
-# === Gradio UI ===
+# === Кастомный CSS из style.css ===
+custom_css = """
+/* Импорт шрифта Inter */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
-# Custom CSS adapted from your template to 'skin' Gradio
-CUSTOM_CSS = r"""
-/* Reset Gradio containers to use full layout similar to your template */
-.gradio-container {
-    padding: 0 !important;
+body {
+    font-family: "Inter", sans-serif;
     margin: 0 !important;
-    height: 100vh;
-    display: flex;
-    flex-direction: row;
-    background: #ffffff;
-    font-family: Arial, Helvetica, sans-serif;
+    padding: 0 !important;
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: space-between !important;
+    height: 100vh !important;
 }
 
-/* Sidebar */
 .sidebar {
-    width: 280px;
-    background: #f8f9fb;
-    border-right: 1px solid #ececec;
-    padding: 20px;
+    width: 210px;
+    height: 100vh;
+    background-color: #f9f9f9;
     box-sizing: border-box;
-    overflow: auto;
+    padding: 20px 16px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important;
 }
-.aside-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
-.aside_img { width:22px; height:22px; opacity:0.9; }
-.search { width:100%; padding:8px; border-radius:6px; border:1px solid #ddd; box-sizing:border-box; margin-bottom:12px; }
-.scroll_container { margin-top: 6px; }
 
-/* Main area */
 .main {
-    flex: 1;
-    padding: 20px;
-    position: relative;
-    overflow: auto;
+    width: calc(100% - 210px) !important;
+    height: 100vh !important;
+    box-sizing: border-box;
+    padding: 16px !important;
+    position: relative !important;
 }
-.header {
-    display:flex;
-    justify-content:space-between;
-    align-items:center;
-    margin-bottom: 6px;
+
+.aside_img {
+    height: 20px;
+    cursor: pointer;
 }
-.logo { height:36px; }
-.header_img { width:28px; opacity:0.85; }
 
-/* Chat area — keep centered and relatively positioned */
-.chat_area {
-    width: 100%;
-    max-width: 1100px;
-    margin: 12px auto;
-    position: relative;
+.logo {
+    height: 40px;
 }
 
-/* Bubble styles */
-.chat_bubble {
-    display: block;
-    padding: 12px 16px;
-    border-radius: 12px;
-    margin: 8px 0;
-    max-width: 70%;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
-    word-break: break-word;
-    white-space: pre-wrap;
+.header_img {
+    height: 30px;
+    cursor: pointer;
 }
 
-/* Assistant (left) */
-.chat_bubble.assistant {
-    background: #f1f5f9;
-    margin-right: auto;
-    margin-left: 0;
-    border-top-left-radius: 6px;
+.search {
+    height: 40px;
+    border: none;
+    border-radius: 15px;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+    box-sizing: border-box;
+    font-size: 16px;
+    width: 100% !important;
+    padding-left: 10px !important;
 }
 
-/* User (right) */
-.chat_bubble.user {
-    background: #dbeafe;
-    margin-left: auto;
-    margin-right: 0;
-    border-top-right-radius: 6px;
-    text-align: right;
+.search_icon {
+    position: absolute !important;
+    right: 15px !important;
+    bottom: 10px !important;
+    height: 20px !important;
+    cursor: pointer !important;
 }
 
-/* Input area sticky to bottom-ish */
-.input_area {
-    position: sticky;
-    bottom: 10px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 8px;
+.scroll_container {
+    overflow-y: auto;
+    height: 70vh;
     margin-top: 12px;
 }
 
-/* Textarea like your template */
-#prompt_field {
-    width: 60%;
-    min-height: 100px;
-    resize: vertical;
-    border-radius: 8px;
-    border: 1px solid #e6e6e6;
-    padding: 12px;
-    box-sizing: border-box;
-    font-size: 14px;
+.scroll_header {
+    font-size: 18px;
+    font-weight: 500;
+    color: #333333;
+    margin-top: 12px !important;
+    margin-bottom: 0 !important;
+}
+
+.fade_text {
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 16px;
+    font-weight: 300;
+    position: relative;
+    width: 100% !important;
+}
+
+.fade_text::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50px;
+    height: 100%;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f9f9f9 100%);
 }
 
-/* Submit button image-like */
-#submit_prompt {
-    background: transparent;
+.input_button {
+    height: 56px;
+    background-color: #fff;
     border: none;
-    cursor: pointer;
-    width: 44px;
-    height: 44px;
-    display:flex;
-    align-items:center;
-    justify-content:center;
+    border-radius: 15px;
+    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    gap: 16px !important;
 }
-#submit_prompt img { width: 28px; height:28px; }
 
-/* Small responsive tweaks */
-@media (max-width: 900px) {
-    .sidebar { display: none; }
-    #prompt_field { width: 80%; }
-    .chat_bubble { max-width: 88%; }
+.input_button button {
+    background-color: #fff !important;
+    border: none !important;
+    font-size: 16px !important;
+    font-weight: bold !important;
+    color: #6e6e6e !important;
+    padding: 0 !important;
+    margin: 0 !important;
 }
-"""
 
-# Inline simple SVG icons as data-urls to avoid external assets (small placeholders)
-ICON_SUBMIT_SVG = """data:image/svg+xml;utf8,
-<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%230066ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
-<path d='M22 2L11 13'></path><path d='M22 2l-7 20-4-9-9-4 20-7z'></path>
-</svg>
-"""
+.welcome {
+    width: 80%;
+    max-width: 930px;
+    margin: auto;
+    position: absolute !important;
+    top: 59%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
 
-ICON_MENU_SVG = """data:image/svg+xml;utf8,
-<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
-<path d='M3 6h18M3 12h18M3 18h18'/>
-</svg>
-"""
+#prompt_field textarea {
+    font-family: "Inter", sans-serif !important;
+    height: 180px !important;
+    max-height: 180px !important;
+    width: 90% !important;
+    border: none !important;
+    border-radius: 15px !important;
+    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.25) !important;
+    font-size: 16px !important;
+    resize: none !important;
+    padding: 16px !important;
+    padding-bottom: 70px !important;
+}
+
+#prompt_field textarea:focus {
+    outline: none !important;
+}
+
+.prompt_buttons {
+    width: 87% !important;
+    background-color: white !important;
+    border-radius: 0 !important;
+    position: absolute !important;
+    bottom: 0 !important;
+    padding: 8px 8px !important;
+    display: flex !important;
+    justify-content: flex-end !important;
+}
+
+.prompt_buttons::before {
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    background: linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0.6));
+    pointer-events: none;
+}
 
-ICON_LOGO_SVG = """data:image/svg+xml;utf8,
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'>
-<rect width='100' height='30' rx='4' fill='%230066ff'/>
-<text x='50' y='20' font-family='Arial' font-size='12' fill='white' text-anchor='middle'>КП</text>
-</svg>
+.prompt_buttons button {
+    height: 40px !important;
+    width: 40px !important;
+    background: none !important;
+    border: none !important;
+    cursor: pointer !important;
+    padding: 0 !important;
+}
+
+.user_prompt {
+    background-color: #efefef;
+    border-radius: 15px;
+    padding: 12px !important;
+    margin-bottom: 16px !important;
+    width: 75% !important;
+    margin-left: auto !important;
+}
+
+.answer {
+    border: none;
+    border-radius: 15px;
+    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.25);
+    padding: 12px !important;
+    width: 75% !important;
+    margin-right: auto !important;
+}
+
+.prompt_chat {
+    font-size: 20px !important;
+    margin: 0 !important;
+}
+
+/* Скрыть стандартные элементы Gradio */
+#component-0, #component-1, #component-2 {
+    display: none !important;
+}
+
+/* Скрыть заголовки и кнопки по умолчанию */
+.gradio-container {
+    background: white !important;
+}
 """
 
-# === Build the Gradio Blocks UI ===
-with gr.Blocks(css=CUSTOM_CSS, title="Карбоновые Полигоны — Адаптация") as demo:
-    # top-level grid: two columns -> sidebar + main
-    with gr.Row(elem_classes="root_row", equal_height=False):
-        with gr.Column(scale=1, min_width=280):
-            # Sidebar (HTML structure based on your blade)
-            sidebar_html = f"""
-            <div class="sidebar">
-                <div class="aside-controls">
-                    <img class="aside_img" src="{ICON_MENU_SVG}" alt="menu">
-                    <div style="display:flex; gap:8px;">
-                        <img class="aside_img" src="{ICON_MENU_SVG}" alt="bin">
-                        <img class="aside_img" src="{ICON_MENU_SVG}" alt="chat">
-                    </div>
-                </div>
-
-                <input type="search" class="search" placeholder="Поиск..." />
-
-                <div class="scroll_container">
-                    <h4 style="margin:8px 0 4px 0; color:#333;">17 сентября</h4>
-                    <div class="fade_text"><p class="m-0">План мероприятий для предотвращения пожаров</p></div>
-
-                    <h4 style="margin:12px 0 4px 0; color:#333;">15 сентября</h4>
-                    <div class="fade_text"><p class="m-0">Оценка опасности подъема уровня выбросов</p></div>
-
-                    <h4 style="margin:12px 0 4px 0; color:#333;">7 сентября</h4>
-                    <div class="fade_text"><p class="m-0">Построение адаптивных мероприятий для павод</p></div>
-                </div>
-
-                <div style="margin-top:20px; display:flex; justify-content:center;">
-                    <button style="padding:10px 20px; border-radius:8px; border:1px solid #e6e6e6; background:#fff;">Помощь</button>
-                </div>
-            </div>
-            """
-            gr.HTML(sidebar_html)
-
-        with gr.Column(scale=3):
-            # Header
-            header_html = f"""
-            <div class="header">
-                <img class="logo" src="{ICON_LOGO_SVG}" alt="Лого">
-                <div style="display:flex; gap:12px; align-items:center;">
-                    <img class="header_img" src="{ICON_MENU_SVG}" alt="menu">
-                    <img class="header_img" src="{ICON_MENU_SVG}" alt="account">
-                </div>
-            </div>
-            """
-            gr.HTML(header_html)
-
-            # Chat area (we will manage history with gr.State and render as HTML)
-            chat_container = gr.HTML("<div class='chat_area' id='chat_area'></div>")
-
-            # Hidden state to store history: list of (role, text)
-            history_state = gr.State([])
-
-            # Input area: we render as HTML but use Gradio components for programmatic submit
-            # We'll use a hidden Textbox 'hidden_input' to trigger server function,
-            # but visually the user interacts with textarea in HTML and JS.
-            hidden_input = gr.Textbox(visible=False)
-            hidden_output = gr.Textbox(visible=False)  # will carry the assistant markdown/answer
-
-            # Render input HTML (textarea + send button). Use IDs for JS to hook into.
-            input_html = f"""
-            <div class="input_area" style="width:100%; margin-top:12px;">
-                <textarea id="prompt_field" placeholder="Введите запрос" ></textarea>
-                <button id="submit_prompt" title="Отправить"><img src="{ICON_SUBMIT_SVG}" alt="send"></button>
-            </div>
-            """
-            gr.HTML(input_html)
-
-            # Invisible "status" area
-            status = gr.HTML("<div id='status' style='display:none'></div>")
-
-            # Define function to be called by Gradio when hidden_input changes:
-            def server_handle(prompt, history):
-                """
-                This function is invoked on submit; it receives the latest prompt (string)
-                and history (list of [role, text]) from gr.State, calls get_facts, and returns
-                new history plus assistant's reply.
-                """
-                prompt = (prompt or "").strip()
-                if not prompt:
-                    return history, "Ошибка: пустой запрос."
-
-                # Append user message to history
-                history = list(history)  # make a copy
-                history.append(("user", prompt))
-
-                # Call get_facts (synchronous)
-                answer = get_facts(prompt)
-
-                # Append assistant reply
-                history.append(("assistant", answer))
-
-                # Return updated history and assistant text
-                return history, answer
-
-            # Wire up the hidden_input -> server_handle outputs:
-            # We'll connect hidden_input (value) and history_state to server_handle and update history_state and hidden_output
-            hidden_input.change(fn=server_handle, inputs=[hidden_input, history_state], outputs=[history_state, hidden_output])
-
-            # Client-side JS to:
-            # - read textarea
-            # - push text to chat_area as user bubble
-            # - set hidden_input.value and trigger change (this causes Gradio to call server_handle)
-            # - when hidden_output updates, append assistant bubble
-            # The script will listen for Events from Gradio to know when hidden_output changes.
-            client_js = """
-            <script>
-            (function() {
-                // helper to escape HTML
-                function escapeHtml(unsafe) {
-                    return unsafe
-                         .replace(/&/g, "&amp;")
-                         .replace(/</g, "&lt;")
-                         .replace(/>/g, "&gt;")
-                         .replace(/"/g, "&quot;")
-                         .replace(/'/g, "&#039;");
-                }
-
-                const promptField = document.getElementById('prompt_field');
-                const submitBtn = document.getElementById('submit_prompt');
-                const chatArea = document.getElementById('chat_area');
-
-                // Gradio inputs we will use
-                const hiddenInput = document.querySelector('textarea[id^="component-"][style*="display: none"]') 
-                    || document.querySelector('textarea[aria-hidden="true"]') 
-                    || document.querySelector('textarea[style*="display:none"]');
-
-                // Better approach: find the hidden textbox by checking gradio components exposed in window
-                // We'll fallback to locating by name later.
-                function findHiddenInput() {
-                    const textareas = document.querySelectorAll('textarea');
-                    for (const t of textareas) {
-                        // hidden ones often have style display:none or aria-hidden true or small size
-                        if (t.style.display === 'none' || t.getAttribute('aria-hidden') === 'true' || t.offsetParent === null) {
-                            return t;
-                        }
-                    }
-                    // fallback: choose last textarea on page that is not prompt_field
-                    const alt = Array.from(textareas).filter(t => t.id !== 'prompt_field').pop();
-                    return alt;
-                }
-
-                // Find gradio hidden input and hidden output by probing known component order
-                // We'll search for textboxes that are not our prompt_field and not visible
-                let hiddenInputs = Array.from(document.querySelectorAll('textarea')).filter(t => t.id !== 'prompt_field');
-                let hiddenInputEl = null;
-                for (const t of hiddenInputs) {
-                    if (t.style.display === 'none' || t.getAttribute('aria-hidden') === 'true' || t.offsetParent === null) {
-                        hiddenInputEl = t; break;
-                    }
-                }
-                if (!hiddenInputEl) {
-                    hiddenInputEl = findHiddenInput();
-                }
-
-                // For hidden output (assistant answer), we look for input elements that change after submit
-                // We'll find all inputs and rely on Gradio change events to reflect server output.
-
-                // Helper to append bubble
-                function appendBubble(role, text) {
-                    const bubble = document.createElement('div');
-                    bubble.classList.add('chat_bubble');
-                    bubble.classList.add(role === 'user' ? 'user' : 'assistant');
-                    bubble.innerText = text;
-                    chatArea.appendChild(bubble);
-                    // scroll into view
-                    bubble.scrollIntoView({behavior: 'smooth', block: 'end'});
-                }
-
-                // When user clicks send:
-                submitBtn.addEventListener('click', async function(e) {
-                    e.preventDefault();
-                    const value = promptField.value.trim();
-                    if (!value) return;
-                    // Add user bubble immediately
-                    appendBubble('user', value);
-
-                    // disable input while waiting
-                    submitBtn.disabled = true;
-                    promptField.disabled = true;
-
-                    // Now set the hidden gradio textbox value and dispatch 'input' event to trigger change
-                    try {
-                        // best-effort set value on hidden component gradio uses
-                        if (!hiddenInputEl) {
-                            hiddenInputEl = findHiddenInput();
-                        }
-                        if (hiddenInputEl) {
-                            hiddenInputEl.value = value;
-                            hiddenInputEl.dispatchEvent(new Event('input', { bubbles: true }));
-                            hiddenInputEl.dispatchEvent(new Event('change', { bubbles: true }));
-                        } else {
-                            console.warn('Hidden Gradio input not found; attempting fetch fallback.');
-                            // fallback: call the server endpoint /run/predict directly via fetch to Gradio internals
-                            // But direct fetch to Gradio internals is version-dependent; so we avoid that here.
-                        }
-                    } catch (err) {
-                        console.error('Failed to set hidden input:', err);
-                    }
-
-                    // Now wait for the hidden_output to be updated by Gradio.
-                    // We'll listen for DOMSubtreeModified events on document and look for changes in textareas (the hidden output one).
-                    // Simpler approach: poll for changes in history via Gradio state container: find any visible textbox that receives assistant text.
-                    // We'll poll last textareas for changed value; timeout after 30s.
-
-                    let assistantText = null;
-                    const start = Date.now();
-                    const timeoutMs = 30000;
-
-                    while (Date.now() - start < timeoutMs) {
-                        // Look for any textarea that is not prompt_field and has some content (assistant)
-                        const candidates = Array.from(document.querySelectorAll('textarea')).filter(t => t.id !== 'prompt_field');
-                        let val = null;
-                        for (const c of candidates.reverse()) {
-                            if (c.value && c.value.trim().length > 0) {
-                                val = c.value;
-                                break;
-                            }
-                        }
-                        if (val && val !== value) { // not the same as user prompt
-                            assistantText = val;
-                            break;
-                        }
-                        // also check for inputs (type=text)
-                        const inputs = Array.from(document.querySelectorAll('input[type="text"]'));
-                        for (const inp of inputs.reverse()) {
-                            if (inp.value && inp.value.trim().length > 0 && inp.value.trim() !== value) {
-                                assistantText = inp.value;
-                                break;
-                            }
-                        }
-                        if (assistantText) break;
-                        await new Promise(r => setTimeout(r, 300)); // sleep 300ms
-                    }
-
-                    if (!assistantText) {
-                        // If we didn't catch assistant text via polling, show a fallback message
-                        appendBubble('assistant', 'Ответ не получен (возможны проблемы с сервером LLM или с интеграцией скрытого поля).');
-                    } else {
-                        appendBubble('assistant', assistantText);
-                        // Clear the hidden textareas so future polling won't pick them up
-                        try {
-                            const used = Array.from(document.querySelectorAll('textarea')).filter(t => t.id !== 'prompt_field');
-                            for (const u of used) {
-                                u.value = '';
-                                u.dispatchEvent(new Event('input', { bubbles: true }));
-                            }
-                        } catch(e){}
-                    }
-
-                    // re-enable
-                    submitBtn.disabled = false;
-                    promptField.disabled = false;
-                    promptField.value = '';
-                });
-
-                // Submit on Ctrl+Enter
-                promptField.addEventListener('keydown', function(e) {
-                    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                        submitBtn.click();
-                    }
-                });
-
-            })();
-            </script>
-            """
-            gr.HTML(client_js)
-
-    # Launch with server_name and debug off by default
-    demo.launch()
+# === Gradio UI ===
+with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as demo:
+    # Сайдбар
+    with gr.Column(elem_classes="sidebar"):
+        with gr.Row():
+            gr.Image(value="icons/arrow.png", elem_classes="aside_img", interactive=False)
+            with gr.Row():
+                gr.Image(value="icons/bin.png", elem_classes="aside_img", interactive=False)
+                gr.Image(value="icons/chat.png", elem_classes="aside_img ms-2", interactive=False)
+        
+        with gr.Row():
+            gr.Textbox(placeholder="Поиск", elem_classes="search")
+            gr.Image(value="icons/search.png", elem_classes="search_icon", interactive=False)
+        
+        with gr.Column(elem_classes="scroll_container"):
+            gr.Markdown("### 17 сентября", elem_classes="scroll_header")
+            gr.Markdown("План мероприятий для предовтращения пожаров", elem_classes="fade_text")
+            gr.Markdown("### 15 сентября", elem_classes="scroll_header")
+            gr.Markdown("Оценка опасности подъема уровня выбросов", elem_classes="fade_text")
+            gr.Markdown("### 7 сентября", elem_classes="scroll_header")
+            gr.Markdown("Построение адаптивных мероприятий для павод", elem_classes="fade_text")
+        
+        with gr.Row(elem_classes="input_button"):
+            gr.Image(value="icons/question.png", elem_classes="input_img", interactive=False)
+            gr.Button("Помощь", elem_id="help-btn")
+
+    # Основная область
+    with gr.Column(elem_classes="main"):
+        with gr.Row():
+            gr.Image(value="icons/logo.png", elem_classes="logo", interactive=False)
+            with gr.Row():
+                gr.Image(value="icons/menu.png", elem_classes="header_img", interactive=False)
+                gr.Image(value="icons/account.png", elem_classes="header_img", interactive=False)
+        
+        with gr.Column(elem_classes="welcome"):
+            user_input = gr.Textbox(
+                label="",
+                lines=5,
+                max_lines=5,
+                placeholder="Введите запрос",
+                elem_id="prompt_field"
+            )
+            with gr.Row(elem_classes="prompt_buttons"):
+                submit_btn = gr.Button("", elem_id="submit_prompt")
+                # Иконка отправки (замените на реальный путь, если нужно)
+                submit_btn.style(full_width=False)
+
+            answer_output = gr.Markdown(elem_classes="answer", value="")
+
+    # Обработка
+    submit_btn.click(fn=get_facts, inputs=user_input, outputs=answer_output)
+
+demo.launch()