New UI

app.py

@@ -104,54 +104,151 @@ def bot(
         yield history
 
 
+# --- drop-in UI compatible with older Gradio versions ---
+import os, tempfile, time
 import gradio as gr
-import random
-import time
-
-with gr.Blocks() as demo:
-    chatbot = gr.Chatbot(
-        type="messages",
-        allow_tags=["think"],
-        examples=[
-            {"text": i}
-            for i in [
-                "хто тримає цей район?",
-                "Напиши історію про Івасика-Телесика",
-                "Яка найвища гора в Україні?",
-                "Як звали батька Тараса Григоровича Шевченка?",
-                # "Як можна заробити нелегально швидко гроші?"],
-                "Яка з цих гір не знаходиться у Європі? Говерла, Монблан, Гран-Парадізо, Еверест",
-                "Дай відповідь на питання\nЧому у качки жовті ноги?",
-            ]
-        ],
+
+# Ukrainian-inspired theme with deep, muted colors reflecting unbeatable spirit:
+THEME = gr.themes.Soft(
+    primary_hue="blue",      # Deep blue representing Ukrainian sky and resolve
+    secondary_hue="amber",   # Warm amber representing golden fields and determination  
+    neutral_hue="stone",     # Earthy stone representing strength and foundation
+)
+
+# Load CSS from external file
+def load_css():
+    try:
+        with open("static/style.css", "r", encoding="utf-8") as f:
+            return f.read()
+    except FileNotFoundError:
+        print("Warning: static/style.css not found")
+        return ""
+
+CSS = load_css()
+
+def _clear_chat():
+    return "", []
+
+with gr.Blocks(theme=THEME, css=CSS, fill_height=True) as demo:
+    # Header (no gr.Box to avoid version issues)
+    gr.HTML(
+        """
+        <div id="app-header">
+          <div class="app-title">✨ LAPA</div>
+          <div class="app-subtitle">LLM for Ukrainian Language</div>
+        </div>
+        """
     )
-    msg = gr.Textbox(label="Message", autofocus=True)
-    send_btn = gr.Button("Send")
-    # clear = gr.Button("Clear")
 
-    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=True).then(
-        bot, chatbot, chatbot
+    with gr.Row(equal_height=True):
+        # Left side: Chat
+        with gr.Column(scale=7, elem_id="left-pane"):
+            with gr.Column(elem_id="chat-card"):
+                chatbot = gr.Chatbot(
+                    type="messages",
+                    height=560,
+                    render_markdown=True,
+                    show_copy_button=True,
+                    show_label=False,
+                    # likeable=True,
+                    allow_tags=["think"],
+                    examples=[
+                        {"text": i}
+                        for i in [
+                            "хто тримає цей район?",
+                            "Напиши історію про Івасика-Телесика",
+                            "Яка найвища гора в Україні?",
+                            "Як звали батька Тараса Григоровича Шевченка?",
+                            "Яка з цих гір не знаходиться у Європі? Говерла, Монблан, Гран-Парадізо, Еверест",
+                            "Дай відповідь на питання\nЧому у качки жовті ноги?",
+                        ]
+                    ],
+                )
+
+            # ChatGPT-style input box with stop button
+            with gr.Row(elem_id="chat-input-row"):
+                msg = gr.Textbox(
+                    label=None,
+                    placeholder="Message… (Press Enter to send)",
+                    autofocus=True,
+                    lines=1,
+                    max_lines=6,
+                    container=False,
+                    show_label=False,
+                    elem_id="chat-input",
+                    elem_classes=["chat-input-box"]
+                )
+                stop_btn_visible = gr.Button(
+                    "⏹️", 
+                    variant="secondary", 
+                    elem_id="stop-btn-visible",
+                    elem_classes=["stop-btn-chat"],
+                    visible=False,
+                    size="sm"
+                )
+            
+            # Hidden buttons for functionality
+            with gr.Row(visible=False):
+                send_btn = gr.Button("Send", variant="primary", elem_id="send-btn")
+                stop_btn = gr.Button("Stop", variant="secondary", elem_id="stop-btn")
+                clear_btn = gr.Button("Clear", variant="secondary", elem_id="clear-btn")
+
+            # export_btn = gr.Button("Export chat (.md)", variant="secondary", elem_classes=["rounded-btn","secondary-btn"])
+            # exported_file = gr.File(label="", interactive=False, visible=True)
+            gr.HTML('<div class="footer-tip">Shortcuts: Enter to send • Shift+Enter for new line</div>')
+
+    # Helper functions for managing UI state
+    def show_stop_button():
+        return gr.update(visible=True)
+    
+    def hide_stop_button():
+        return gr.update(visible=False)
+
+    # Events (preserve your original handlers)
+    e1 = msg.submit(fn=user, inputs=[msg, chatbot], outputs=[msg, chatbot], queue=True).then(
+        fn=show_stop_button, inputs=None, outputs=stop_btn_visible
+    ).then(
+        fn=bot, inputs=chatbot, outputs=chatbot
+    ).then(
+        fn=hide_stop_button, inputs=None, outputs=stop_btn_visible
+    )
+    
+    e2 = send_btn.click(fn=user, inputs=[msg, chatbot], outputs=[msg, chatbot], queue=True).then(
+        fn=show_stop_button, inputs=None, outputs=stop_btn_visible
+    ).then(
+        fn=bot, inputs=chatbot, outputs=chatbot
+    ).then(
+        fn=hide_stop_button, inputs=None, outputs=stop_btn_visible
+    )
+    
+    e3 = chatbot.example_select(fn=append_example_message, inputs=[chatbot], outputs=[chatbot], queue=True).then(
+        fn=show_stop_button, inputs=None, outputs=stop_btn_visible
+    ).then(
+        fn=bot, inputs=chatbot, outputs=chatbot
+    ).then(
+        fn=hide_stop_button, inputs=None, outputs=stop_btn_visible
     )
 
-    chatbot.example_select(
-        append_example_message, [chatbot], [chatbot], queue=True
-    ).then(bot, chatbot, chatbot)
+    # Stop cancels running events (both buttons work)
+    stop_btn.click(fn=hide_stop_button, inputs=None, outputs=stop_btn_visible, cancels=[e1, e2, e3], queue=True)
+    stop_btn_visible.click(fn=hide_stop_button, inputs=None, outputs=stop_btn_visible, cancels=[e1, e2, e3], queue=True)
 
-    send_btn.click(user, [msg, chatbot], [msg, chatbot], queue=True).then(
-        bot, chatbot, chatbot
-    )
+    # Clear chat + input
+    clear_btn.click(fn=_clear_chat, inputs=None, outputs=[msg, chatbot])
+
+    # Export markdown
+    # export_btn.click(fn=_export_markdown, inputs=chatbot, outputs=exported_file)
 
-    # clear.click(lambda: None, None, chatbot, queue=True)
+    # Load and inject external JavaScript
+    def load_javascript():
+        try:
+            with open("static/script.js", "r", encoding="utf-8") as f:
+                return f"<script>{f.read()}</script>"
+        except FileNotFoundError:
+            print("Warning: static/script.js not found")
+            return ""
+    
+    gr.HTML(load_javascript())
 
 if __name__ == "__main__":
-    demo.launch()
-
-"""gr.Slider(minimum=1, maximum=4096, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),"""
+    demo.queue().launch()

static/script.js

@@ -0,0 +1,103 @@
+(function () {
+  console.log("Keyboard shortcuts script loaded");
+  
+  const send = () => {
+    // Try multiple selectors to find the send button
+    const selectors = [
+      '#send-btn',
+      'button[id="send-btn"]',
+      '.gr-button:contains("Send")',
+      'button:contains("Send")',
+      '#send-btn button',
+      '[data-testid*="send"]',
+      'button[variant="primary"]'
+    ];
+    
+    let btn = null;
+    for (let selector of selectors) {
+      try {
+        if (selector.includes(':contains')) {
+          // Handle :contains selector manually
+          const buttons = document.querySelectorAll('button');
+          for (let button of buttons) {
+            if (button.textContent.trim() === 'Send') {
+              btn = button;
+              break;
+            }
+          }
+        } else {
+          btn = document.querySelector(selector);
+        }
+        if (btn) {
+          console.log("Found send button with selector:", selector);
+          break;
+        }
+      } catch (e) {
+        // Skip invalid selectors
+      }
+    }
+    
+    if (btn) {
+      console.log("Clicking send button");
+      btn.click();
+      return true;
+    } else {
+      console.log("Send button not found");
+      // Debug: log all buttons
+      const allButtons = document.querySelectorAll('button');
+      console.log("All buttons found:", allButtons);
+      return false;
+    }
+  };
+  
+  const setupKeyboardShortcuts = () => {
+    console.log("Setting up keyboard shortcuts");
+    
+    document.addEventListener('keydown', (e) => {
+      const isCmdEnter = (e.metaKey || e.ctrlKey) && e.key === 'Enter';
+      const isEnter = e.key === 'Enter' && !e.shiftKey && !e.metaKey && !e.ctrlKey;
+      const isInputFocused = document.activeElement && 
+        (document.activeElement.matches('#chat-input textarea') || 
+         document.activeElement.matches('.chat-input-box textarea'));
+      
+      if ((isCmdEnter || (isEnter && isInputFocused)) && isInputFocused) {
+        console.log("Send triggered");
+        e.preventDefault();
+        e.stopPropagation();
+        
+        const success = send();
+        if (!success) {
+          console.log("Failed to send, trying again in 100ms");
+          setTimeout(send, 100);
+        }
+      }
+      
+      if (e.key === 'Escape') {
+        const input = document.querySelector('#chat-input textarea') || document.querySelector('.chat-input-box textarea');
+        if (input) {
+          input.focus();
+          console.log("Focused input field");
+        }
+      }
+    }, true);
+    
+    console.log("Keyboard shortcuts set up");
+  };
+  
+  // Multiple attempts to set up shortcuts
+  const attempts = [100, 500, 1000, 2000];
+  attempts.forEach(delay => {
+    setTimeout(() => {
+      console.log(`Attempting setup after ${delay}ms`);
+      setupKeyboardShortcuts();
+    }, delay);
+  });
+  
+  // Also set up immediately if DOM is ready
+  if (document.readyState !== 'loading') {
+    setupKeyboardShortcuts();
+  } else {
+    document.addEventListener('DOMContentLoaded', setupKeyboardShortcuts);
+  }
+  
+})();

static/style.css

@@ -0,0 +1,154 @@
+/* Background - Light Ukrainian sky with warm golden undertones */
+.gradio-container {
+  background: radial-gradient(1200px 600px at 20% 0%, #f1f5f9 0%, #e2e8f0 45%, #cbd5e1 100%);
+}
+
+/* Header - Transparent background, only text visible */
+#app-header {
+  position: sticky; top: 0; z-index: 10;
+  background: transparent;
+  backdrop-filter: none;
+  padding: 18px 8px 10px 8px;
+  border-bottom: none;
+}
+#app-header .app-title {
+  font-weight: 800; letter-spacing: -0.02em; font-size: 40px;
+  background: linear-gradient(120deg, #60a5fa 0%, #fbbf24 20%, #3b82f6 40%);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+#app-header .app-subtitle { color: #64748b; margin-top: 4px; }
+
+/* Chat card */
+#chat-card .gr-chatbot {
+  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.95) 100%);
+  border: 1px solid rgba(59,130,246,0.2);
+  box-shadow: 0 10px 40px rgba(0,0,0,0.1), inset 0 1px 0 rgba(245,158,11,0.15);
+  backdrop-filter: blur(8px);
+  border-radius: 18px;
+}
+
+/* Code blocks */
+#chat-card .prose pre {
+  border: 1px solid rgba(59,130,246,0.2);
+  background: #f8fafc !important;
+}
+#chat-card .prose code {
+  background: rgba(59,130,246,0.1);
+  border-radius: 6px; padding: 0.1rem 0.35rem;
+}
+
+/* ChatGPT-style input */
+#chat-input-row {
+  margin-top: 16px;
+  padding: 0 8px;
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+}
+
+.chat-input-box textarea {
+  border: none !important;
+  outline: none !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
+  border-radius: 24px !important;
+  background: rgba(255,255,255,0.9) !important;
+  color: #334155 !important;
+  padding: 12px 16px !important;
+  font-size: 15px !important;
+  line-height: 1.4 !important;
+  resize: none !important;
+  transition: all 0.2s ease !important;
+}
+
+.chat-input-box textarea:focus {
+  box-shadow: 0 4px 12px rgba(59,130,246,0.25) !important;
+  background: rgba(255,255,255,1) !important;
+}
+
+.chat-input-box textarea::placeholder {
+  color: #94a3b8 !important;
+  opacity: 0.8 !important;
+}
+
+/* Hide container borders */
+.chat-input-box {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  flex: 1 !important;
+  width: 100% !important;
+}
+
+/* Input wrapper for send button positioning */
+
+/* Send indicator - only show when stop button is hidden */
+.chat-input-box::after {
+  content: "↵";
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #64748b;
+  font-size: 16px;
+  pointer-events: none;
+  opacity: 0.6;
+  transition: opacity 0.2s ease;
+}
+
+.chat-input-box:hover::after {
+  opacity: 0.8;
+}
+
+/* Stop button styling */
+.stop-btn-chat {
+  flex-shrink: 0 !important;
+  width: 45px !important;
+  min-width: 45px !important;
+  max-width: 45px !important;
+  height: 45px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: 100% !important;
+}
+
+.stop-btn-chat button {
+  background: rgba(239, 68, 68, 0.1) !important;
+  border: 1px solid rgba(239, 68, 68, 0.3) !important;
+  color: #ef4444 !important;
+  border-radius: 50% !important;
+  padding: 6px !important;
+  min-width: 45px !important;
+  max-width: 45px !important;
+  width: 45px !important;
+  height: 45px !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  transition: all 0.2s ease !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex-shrink: 0 !important;
+  box-sizing: border-box !important;
+}
+
+.stop-btn-chat button:hover {
+  background: rgba(239, 68, 68, 0.15) !important;
+  border-color: rgba(239, 68, 68, 0.4) !important;
+  transform: translateY(-1px) !important;
+  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2) !important;
+}
+
+/* Hide send icon when stop button is visible */
+#chat-input-row:has(.stop-btn-chat:not([style*="display: none"])) .chat-input-box::after {
+  display: none;
+}
+
+/* Right pane cards */
+.side-card {
+  border: 1px solid rgba(59,130,246,0.2);
+  border-radius: 16px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.9) 100%);
+  padding: 8px 10px;
+}
+
+.footer-tip { color: #64748b; font-size: 12.5px; text-align:center; margin-top: 6px; }