Update app.py

app.py

@@ -52,52 +52,456 @@ system_prompt = """
 Ответственную организацию в таблице указывай актуальную для региона, который пользователь указал в запросе
 """
 
-# === Функция получения ответа ===
 def get_facts(user_question: str) -> str:
+    """
+    Возвращает ответ (строку) по запросу пользователя.
+    Пытается использовать llama_index, если доступен; иначе возвращает понятное сообщение.
+    """
     try:
-        if not user_question.strip():
+        if not user_question or 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"Ошибка:\n{str(e)}"
-    
-    response = Settings.llm.chat(messages)
-    return response.message.content
-
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# Информационная система для помощи в адаптации к климатическим рискам")
-
-    user_input = gr.Textbox(
-        label="Ваш запрос",
-        lines=4,
-        max_lines = 4,
-        placeholder="Введите свой запрос"
-    )
-        
-    gr.Markdown("# Ответ")
-    answer_output = gr.Markdown(height=300)
-    send_button = gr.Button("Получить ответ")
-        
-    send_button.click(
-        fn=get_facts,
-        inputs=user_input,
-        outputs=answer_output
-    )
-
-demo.launch()
+        return f"Ошибка при попытке обработать запрос (проверьте зависимости и наличие индекса в ./storage):\n{str(e)}"
+
+# === Gradio UI ===
+
+# 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;
+    margin: 0 !important;
+    height: 100vh;
+    display: flex;
+    flex-direction: row;
+    background: #ffffff;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 280px;
+    background: #f8f9fb;
+    border-right: 1px solid #ececec;
+    padding: 20px;
+    box-sizing: border-box;
+    overflow: auto;
+}
+.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;
+}
+.header {
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    margin-bottom: 6px;
+}
+.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;
+}
+
+/* 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;
+}
+
+/* Assistant (left) */
+.chat_bubble.assistant {
+    background: #f1f5f9;
+    margin-right: auto;
+    margin-left: 0;
+    border-top-left-radius: 6px;
+}
+
+/* User (right) */
+.chat_bubble.user {
+    background: #dbeafe;
+    margin-left: auto;
+    margin-right: 0;
+    border-top-right-radius: 6px;
+    text-align: right;
+}
+
+/* Input area sticky to bottom-ish */
+.input_area {
+    position: sticky;
+    bottom: 10px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    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;
+}
+
+/* Submit button image-like */
+#submit_prompt {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    width: 44px;
+    height: 44px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+}
+#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%; }
+}
+"""
+
+# 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>
+"""
+
+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>
+"""
+
+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>
+"""
+
+# === 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(server_name="127.0.0.1", server_port=7860, share=False)