Initial commit

.gitignore

@@ -0,0 +1,2 @@
+.ignore
+venv

analytics.py

@@ -0,0 +1,81 @@
+import os
+import uuid
+import datetime as dt
+import sys
+from pathlib import Path
+from typing import Optional
+
+from supabase import create_client, Client
+
+
+def _utc_now_iso() -> str:
+    return dt.datetime.now(dt.timezone.utc).isoformat()
+
+
+class AnalyticsLogger:
+    """
+    Simple Supabase logger for:
+      - Sessions (id: uuid, created_at: timestamptz)
+      - Chats (id: uuid, session_id: uuid, timestamp: timestamptz, user: text, answer: text)
+    """
+
+    def __init__(self):
+        url = os.getenv("SUPABASE_URL")
+        key = os.getenv("SUPABASE_KEY")
+        if not url or not key:
+            raise RuntimeError("Missing SUPABASE_URL or SUPABASE_KEY env var.")
+        self.client: Client = create_client(url, key)
+        self.session_id: Optional[str] = None
+
+    def start_session(self, model_id: str) -> str:
+        """
+        Creates a session row and returns the session UUID (string).
+        """
+        sid = str(uuid.uuid4())
+        payload = {"id": sid, "created_at": _utc_now_iso(), "model_id": model_id}
+        try:
+            self.client.table("Sessions").insert(payload).execute()
+            self.session_id = sid
+            return sid
+        except Exception as e:
+            print(f"[AnalyticsLogger] Failed to start session: {e}", file=sys.stderr)
+            raise e
+
+    def _upload_image(self, image_path: str) -> Optional[str]:
+        try:
+            with open(image_path, "rb") as img_file:
+                image_name = f'{uuid.uuid4()}{Path(image_path).suffix}'
+                response = self.client.storage.from_("Images").upload(image_name, img_file, {"cacheControl": "3600", "upsert": "true"})
+
+                return response.full_path
+        except:
+            print(f"[AnalyticsLogger] Failed to upload image: {response['error']}", file=sys.stderr)
+            return None
+
+    def log_interaction(self, user: str | tuple[str, str], answer: str, ts_iso: Optional[str] = None) -> None:
+        """
+        Inserts a single chat interaction.
+        """
+        if not self.session_id:
+            raise ValueError("Session not started. Call start_session() first.")
+        session_id = self.session_id
+
+        image_handle: str | None = None
+
+        if isinstance(user, tuple): # (image_path, user_name)
+            image, user = user
+
+            image_handle = self._upload_image(image)
+
+        chat_payload = {
+            "id": str(uuid.uuid4()),
+            "session_id": session_id,
+            "timestamp": ts_iso or _utc_now_iso(),
+            "user": user,
+            "answer": answer,
+            "user_image_path": image_handle,
+        }
+        try:
+            self.client.table("Chats").insert(chat_payload).execute()
+        except Exception as e:
+            print(f"[AnalyticsLogger] Failed to log interaction: {e}", file=sys.stderr)

app.py

@@ -0,0 +1,443 @@
+import os
+import subprocess
+import tempfile
+
+# subprocess.run('pip install flash-attn==2.8.0 --no-build-isolation', env={'FLASH_ATTENTION_SKIP_CUDA_BUILD': "TRUE"}, shell=True)
+
+import threading
+
+# subprocess.check_call([os.sys.executable, "-m", "pip", "install", "-r", "requirements.txt"])
+
+import spaces
+import gradio as gr
+import torch
+from PIL.Image import Image
+from transformers import AutoModelForCausalLM, AutoProcessor, AutoTokenizer, TextIteratorStreamer
+from kernels import get_kernel
+from typing import Any, Optional, Dict
+
+#vllm_flash_attn3 = get_kernel("kernels-community/vllm-flash-attn3")
+
+#torch._dynamo.config.disable = True
+
+# Login to HF to get access to the model weights
+HF_LE_LLM_READ_TOKEN = os.environ.get('HF_LE_LLM_READ_TOKEN')
+
+from huggingface_hub import login
+login(token=HF_LE_LLM_READ_TOKEN)
+
+# Constants
+# MODEL_ID = "le-llm/lapa-v0.1-reasoning-only-32768"
+# MODEL_ID = "le-llm/lapa-v0.1-instruct"
+# MODEL_ID = "le-llm/lapa-v0.1-matt-instruction-5e06"
+# MODEL_ID = "le-llm/lapa-v0.1-reprojected"
+# MODEL_ID = "le-llm/lapa-v0.1.1-instruct"
+MODEL_ID = "le-llm/manipulative-score-model"
+
+MAX_TOKENS = 4096
+TEMPERATURE = 0.7
+TOP_P = 0.95
+
+IMAGE_MAX_SIZE = 1024
+
+
+def _begin_analytics_session():
+    # Called once per client on app load
+    pass
+    # _ = logger.start_session(MODEL_ID)
+
+def load_model():
+    """Lazy-load model, tokenizer, and optional processor (for zeroGPU)."""
+    device = "cuda"  # if torch.cuda.is_available() else "cpu"
+    tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
+    processor = None
+    try:
+        processor = AutoProcessor.from_pretrained(MODEL_ID)
+    except Exception as err:  # pragma: no cover - informative fallback
+        print(f"Warning: AutoProcessor not available ({err}). Falling back to tokenizer.")
+
+    model = AutoModelForCausalLM.from_pretrained(
+        MODEL_ID,
+        dtype=torch.bfloat16,  # if device == "cuda" else torch.float32,
+        device_map="auto",  # if device == "cuda" else None,
+        attn_implementation="flash_attention_2",# "kernels-community/vllm-flash-attn3", #  #
+    )  # .cuda()
+    print(f"Selected device:", device)
+    return model, tokenizer, processor, device
+
+
+# Load model/tokenizer each request → allows zeroGPU to cold start & then release
+model, tokenizer, processor, device = load_model()
+
+
+def user(user_message, image_data: Image, history: list):
+    """Format user message with optional image."""
+    import io
+
+    user_message = user_message or ""
+    updated_history = list(history)
+    has_content = False
+
+    stripped_message = user_message.strip()
+
+    # If we have an image, save it to temp file for Gradio display
+    if image_data is not None:
+        image_data.thumbnail((IMAGE_MAX_SIZE, IMAGE_MAX_SIZE))
+
+        # Save to temp file for Gradio display
+        fd, tmp_path = tempfile.mkstemp(suffix=".jpg")
+        os.close(fd)
+        image_data.save(tmp_path, format="JPEG")
+
+        # Also encode as base64 for model processing (stored in metadata)
+        buffered = io.BytesIO()
+        image_data.save(buffered, format="JPEG")
+
+        # TODO do we leave that message?
+        text_content = stripped_message if stripped_message else "Опиши це зображення"
+
+        # Store both text and image in a single message with base64 in metadata
+        updated_history.append({
+            "role": "user",
+            "content": text_content
+        })
+        updated_history.append({
+            "role": "user",
+            "content": {
+                    "path": tmp_path,
+                    "alt_text": "User uploaded image"
+                },
+        })
+        has_content = True
+    elif stripped_message:
+        updated_history.append({"role": "user", "content": stripped_message})
+        has_content = True
+
+    if not has_content:
+        # Nothing to submit yet; keep inputs unchanged
+        return user_message, image_data, history
+
+    return "", None, updated_history
+
+
+def append_example_message(x: gr.SelectData, history):
+    if x.value["text"] is not None:
+        history.append({"role": "user", "content": x.value["text"]})
+
+    return history
+
+
+def _extract_text_from_content(content: Any) -> str | tuple[str, str]:
+    """Extract text from message content for logging."""
+    if isinstance(content, str):
+        return content
+    if isinstance(content, tuple) and len(content) == 2:
+        return content # (image_path, user_text)
+
+    raise ValueError(f"Unsupported content type for text extraction: {content}")
+
+
+def _clean_history_for_display(history: list[dict[str, Any]]) -> list[dict[str, Any]]:
+    """Remove internal metadata fields like _base64 before displaying in Gradio."""
+    cleaned = []
+    for message in history:
+        cleaned_message = {"role": message.get("role", "user")}
+        content = message.get("content")
+
+        if isinstance(content, str):
+            cleaned_message["content"] = content
+        elif isinstance(content, list):
+            cleaned_content = []
+            for item in content:
+                if isinstance(item, dict):
+                    # Remove _base64 metadata
+                    cleaned_item = {k: v for k, v in item.items() if not k.startswith("_")}
+                    cleaned_content.append(cleaned_item)
+                else:
+                    cleaned_content.append(item)
+            cleaned_message["content"] = cleaned_content
+        else:
+            cleaned_message["content"] = content
+
+        cleaned.append(cleaned_message)
+
+    return cleaned
+
+
+@spaces.GPU
+def bot(
+    history: list[dict[str, Any]]
+):
+    """Generate bot response with support for text and images."""
+
+    # Early return if no input
+    if not history:
+        return
+
+    # Extract last user message for logging
+    last_user_msg = next((msg for msg in reversed(history) if msg.get("role") == "user"), None)
+    user_message_text = _extract_text_from_content(last_user_msg.get("content")) if last_user_msg else ""
+    print('User message:', user_message_text)
+
+    # Check if any message contains images
+    has_images = any(
+        isinstance(msg.get("content"), tuple)
+        for msg in history
+    )
+
+    model_inputs = None
+
+    # Use processor if images are present
+    if processor is not None and has_images:
+        try:
+            processor_history = []
+            for msg in history:
+                role = msg.get("role", "user")
+                content = msg.get("content")
+
+                if isinstance(content, str):
+                    processor_history.append({"role": role, "content": [{"type": "text", "text": content}]})
+                elif isinstance(content, tuple):
+                    formatted_content = []
+                    tmp_path, _ = content 
+                    image_input = {
+                        "type": "image",
+                        "url": f"{tmp_path}",
+                    }
+
+                    if processor_history[-1].get('role') == 'user':
+                        if isinstance(processor_history[-1].get('content'), str):
+                            previous_message = processor_history[-1].get('content')
+                            formatted_content.append({"type": "text", "text": previous_message})
+                            formatted_content.append(image_input)
+                            processor_history[-1]['content'] = formatted_content
+                        elif isinstance(processor_history[-1].get('content'), list):
+                            processor_history[-1]['content'].append(image_input)
+                    else:
+                        formatted_content.append(image_input)
+                        processor_history.append({"role": role, "content": formatted_content})
+
+            model_inputs = processor.apply_chat_template(
+                processor_history,
+                tokenize=True,
+                return_dict=True,
+                return_tensors="pt",
+                add_generation_prompt=True,
+            ).to(model.device)
+            print("Using processor for vision input")
+        except Exception as exc:
+            print(f"Processor failed: {exc}")
+            model_inputs = None
+
+    # Fallback to tokenizer for text-only
+    if model_inputs is None:
+        # Convert to text-only format for tokenizer
+        text_history = []
+        for msg in history:
+            role = msg.get("role", "user")
+            content = msg.get("content")
+            text_content = _extract_text_from_content(content)
+            if text_content:
+                text_history.append({"role": role, "content": text_content})
+
+        if text_history:
+            input_text = tokenizer.apply_chat_template(
+                text_history,
+                tokenize=False,
+                add_generation_prompt=True,
+            )
+            if input_text and tokenizer.bos_token:
+                input_text = input_text.replace(tokenizer.bos_token, "", 1)
+            model_inputs = tokenizer(input_text, return_tensors="pt").to(model.device)
+            print("Using tokenizer for text-only input")
+
+    if model_inputs is None:
+        return
+
+    # Streamer setup
+    streamer = TextIteratorStreamer(tokenizer, skip_prompt=True)
+
+    # Run model.generate in background thread
+    generation_kwargs = dict(
+        **model_inputs,
+        max_new_tokens=MAX_TOKENS,
+        temperature=TEMPERATURE,
+        top_p=TOP_P,
+        top_k=64,
+        do_sample=True,
+        streamer=streamer,
+    )
+    thread = threading.Thread(target=model.generate, kwargs=generation_kwargs)
+    thread.start()
+
+    history.append({"role": "assistant", "content": ""})
+    # Yield tokens as they come in
+    for new_text in streamer:
+        history[-1]["content"] += new_text
+        yield _clean_history_for_display(history)
+
+    assistant_message = history[-1]["content"]
+    logger.log_interaction(user=user_message_text, answer=assistant_message)
+
+
+# --- drop-in UI compatible with older Gradio versions ---
+import os, tempfile, time
+import gradio as gr
+
+# 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 "", None, []
+
+with gr.Blocks(theme=THEME, css=CSS, fill_height=True) as demo:
+    demo.load(fn=_begin_analytics_session, inputs=None, outputs=None)
+
+
+    # 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>
+        """
+    )
+
+    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"],
+                    elem_id="chatbot",
+                    examples=[
+                        {"text": i}
+                        for i in [
+                            "хто тримає цей район?",
+                            "Напиши історію про Івасика-Телесика",
+                            "Яка найвища гора в Україні?",
+                            "Як звали батька Тараса Григоровича Шевченка?",
+                            "Яка з цих гір не знаходиться у Європі? Говерла, Монблан, Гран-Парадізо, Еверест",
+                            "Дай відповідь на питання\nЧому у качки жовті ноги?",
+                        ]
+                    ],
+                )
+
+            image_input = gr.Image(
+                label="Attach image (optional)",
+                type="pil",
+                sources=["upload", "clipboard"],
+                height=200,
+                interactive=True,
+                elem_id="image-input",
+            )
+
+            # 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=True, elem_id="hidden-buttons"):
+                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, image_input, chatbot], outputs=[msg, image_input, 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, image_input, chatbot], outputs=[msg, image_input, 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
+    )
+
+    # 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)
+
+    # Clear chat + input
+    clear_btn.click(fn=_clear_chat, inputs=None, outputs=[msg, image_input, chatbot])
+
+    # Export markdown
+    # export_btn.click(fn=_export_markdown, inputs=chatbot, outputs=exported_file)
+
+    # 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.queue().launch()

requirements.txt

@@ -0,0 +1,8 @@
+transformers==4.56.0
+huggingface_hub
+gradio
+torch==2.8.0
+accelerate
+spaces
+kernels
+supabase

runtime.yaml

@@ -0,0 +1,2 @@
+hardware: "gpu"
+accelerator: "zeroGPU"

static/script.js

@@ -0,0 +1,221 @@
+(function () {
+  console.log("Keyboard shortcuts script loaded");
+  
+  // --- Autoscroll control ---
+  let lastSendTs = 0;
+  let userPinnedScroll = false;
+  let chatContainer = null;
+  let chatObserver = null;
+  
+  const now = () => Date.now();
+  const SEND_AUTOSCROLL_WINDOW_MS = 2500;
+  const NEAR_BOTTOM_PX = 120;
+  
+  const getChatContainer = () => {
+    if (chatContainer && document.body.contains(chatContainer)) return chatContainer;
+    // Prefer explicit elem_id container
+    const root = document.getElementById('chatbot') || document.querySelector('#chatbot');
+    // Fallbacks: any visible gr-chatbot within left pane
+    const candidates = [];
+    if (root) candidates.push(root);
+    candidates.push(
+      document.querySelector('#left-pane .gr-chatbot'),
+      document.querySelector('.gr-chatbot'),
+      document.querySelector('#left-pane [data-testid="chatbot"]')
+    );
+    for (const el of candidates) {
+      if (!el) continue;
+      // Try common inner scroll area
+      let container = el.querySelector('[data-testid="bot"]') || el.querySelector('[data-testid="chatbot"]') || el;
+      // Walk down to the element that actually scrolls
+      const stack = [container];
+      while (stack.length) {
+        const cur = stack.shift();
+        if (!cur) continue;
+        const style = cur instanceof Element ? getComputedStyle(cur) : null;
+        const canScroll = style && (style.overflowY === 'auto' || style.overflowY === 'scroll');
+        if (canScroll && cur.scrollHeight > cur.clientHeight + 10) {
+          chatContainer = cur;
+          break;
+        }
+        if (cur.children && cur.children.length) stack.push(...cur.children);
+      }
+      if (!chatContainer) chatContainer = container;
+      if (chatContainer) break;
+    }
+    return chatContainer;
+  };
+  
+  const isNearBottom = (el) => {
+    if (!el) return true;
+    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+    return distance <= NEAR_BOTTOM_PX;
+  };
+  
+  const scrollToBottom = (el) => {
+    if (!el) return;
+    el.scrollTo({ top: el.scrollHeight, behavior: 'auto' });
+  };
+  
+  const attachScrollListener = () => {
+    const el = getChatContainer();
+    if (!el) return;
+    el.addEventListener('scroll', () => {
+      // If the user scrolls up away from bottom, pin the position
+      userPinnedScroll = !isNearBottom(el);
+    }, { passive: true });
+  };
+  
+  const observeChat = () => {
+    const el = getChatContainer();
+    if (!el) return;
+    if (chatObserver) chatObserver.disconnect();
+    chatObserver = new MutationObserver(() => {
+      const withinSendWindow = now() - lastSendTs < SEND_AUTOSCROLL_WINDOW_MS;
+      const shouldScroll = withinSendWindow || (!userPinnedScroll && isNearBottom(el));
+      if (shouldScroll) scrollToBottom(el);
+    });
+    chatObserver.observe(el, { childList: true, subtree: true, characterData: true });
+  };
+  
+  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");
+      lastSendTs = now();
+      // When sending, allow autoscroll for initial response
+      userPinnedScroll = false;
+      // Ensure observers are up
+      setTimeout(() => { attachScrollListener(); observeChat(); }, 0);
+      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");
+    // Initialize observers once UI is present
+    setTimeout(() => { attachScrollListener(); observeChat(); }, 50);
+    setTimeout(() => { attachScrollListener(); observeChat(); }, 400);
+    
+    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);
+  });
+  
+  // Force light theme - disable dark mode switching
+  const forceTheme = () => {
+    // Remove any dark theme classes that might be added
+    document.documentElement.classList.remove('dark');
+    document.body.classList.remove('dark');
+    
+    // Set light color scheme
+    document.documentElement.style.colorScheme = 'light';
+    
+    // Override any theme preference that might be set
+    if (window.matchMedia) {
+      const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      // Override the matches property to always return false
+      Object.defineProperty(darkModeQuery, 'matches', {
+        value: false,
+        writable: false
+      });
+    }
+  };
+  
+  // Apply theme override immediately and on any DOM changes
+  forceTheme();
+  
+  // Watch for any changes and reapply theme override
+  const observer = new MutationObserver(() => {
+    forceTheme();
+  });
+  
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class', 'data-theme', 'theme']
+  });
+  
+  // Also set up immediately if DOM is ready
+  if (document.readyState !== 'loading') {
+    setupKeyboardShortcuts();
+  } else {
+    document.addEventListener('DOMContentLoaded', setupKeyboardShortcuts);
+  }
+  
+})();

static/style.css

@@ -0,0 +1,256 @@
+/* Import Google Fonts for better typography */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Source+Sans+Pro:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+/* Root font styles - Applied to entire page */
+* {
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+}
+
+/* Background - Light Ukrainian sky with warm golden undertones */
+.gradio-container {
+  background: radial-gradient(1200px 600px at 20% 0%, #f1f5f9 0%, #e2e8f0 45%, #cbd5e1 100%);
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 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-family: 'Poppins', sans-serif;
+  font-weight: 700; 
+  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 { 
+  font-family: 'Source Sans Pro', sans-serif;
+  color: #64748b; 
+  margin-top: 4px; 
+  font-weight: 400;
+  font-size: 16px;
+  letter-spacing: 0.01em;
+}
+
+/* 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 - Using JetBrains Mono for better readability */
+#chat-card .prose pre {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Cascadia Code', 'SF Mono', 'Consolas', 'DejaVu Sans Mono', monospace !important;
+  border: 1px solid rgba(59,130,246,0.2);
+  background: #f8fafc !important;
+  font-size: 13px;
+  line-height: 1.5;
+  font-weight: 400;
+}
+#chat-card .prose code {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Cascadia Code', 'SF Mono', 'Consolas', 'DejaVu Sans Mono', monospace !important;
+  background: rgba(59,130,246,0.1);
+  border-radius: 6px; 
+  padding: 0.1rem 0.35rem;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* Chat message text styling */
+.gr-chatbot .message {
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 15px;
+  line-height: 1.65;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+
+.gr-chatbot .message p {
+  font-family: 'Source Sans Pro', sans-serif;
+  margin-bottom: 0.75em;
+}
+
+/* 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-family: 'Source Sans Pro', sans-serif !important;
+  font-size: 15px !important;
+  line-height: 1.5 !important;
+  font-weight: 400 !important;
+  letter-spacing: 0.01em !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 { 
+  font-family: 'Source Sans Pro', sans-serif;
+  color: #64748b; 
+  font-size: 12.5px; 
+  text-align: center; 
+  margin-top: 6px; 
+  font-weight: 400;
+  letter-spacing: 0.02em;
+}
+
+/* Hidden buttons row - make invisible without using visibility */
+#hidden-buttons {
+  opacity: 0 !important;
+  height: 0 !important;
+  overflow: hidden !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+}
+
+/* Force light theme - Disable dark mode switching */
+@media (prefers-color-scheme: dark) {
+  .gradio-container {
+    background: radial-gradient(1200px 600px at 20% 0%, #f1f5f9 0%, #e2e8f0 45%, #cbd5e1 100%) !important;
+    color-scheme: light !important;
+  }
+  
+  /* Ensure all elements use light theme colors */
+  .gradio-container * {
+    color-scheme: light !important;
+  }
+  
+  /* Override any dark mode styles that might be applied */
+  .gradio-container .gr-chatbot {
+    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.95) 100%) !important;
+    color: #334155 !important;
+  }
+  
+  .gradio-container .chat-input-box textarea {
+    background: rgba(255,255,255,0.9) !important;
+    color: #334155 !important;
+  }
+  
+  .gradio-container #app-header .app-subtitle {
+    color: #64748b !important;
+  }
+  
+  /* Force light theme for all buttons and inputs */
+  .gradio-container button {
+    color-scheme: light !important;
+  }
+  
+  .gradio-container input, 
+  .gradio-container textarea {
+    color-scheme: light !important;
+  }
+}