Blame for index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ask Julia Assistant</title>
    
    <script>
        window.MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] } };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    
    <style>
        :root { --sidebar-width: 450px; }
        body { font-family: 'Inter', sans-serif; background: #0f172a; color: #f8fafc; display: flex; height: 100vh; margin: 0; overflow: hidden; }
        
        #content-area { 
            flex: 1; padding: 40px; overflow-y: auto; 
            transition: padding-right 0.3s ease; 
        }
        body.sidebar-active #content-area {
            padding-right: calc(var(--sidebar-width) + 40px);
        }
        
        #sidebar { 
            position: fixed; right: 0; top: 0; height: 100%;
            width: var(--sidebar-width); background: #1e293b; 
            display: flex; flex-direction: column; 
            box-shadow: -5px 0 15px rgba(0,0,0,0.3);
            transform: translateX(100%); transition: transform 0.3s ease;
            z-index: 100; padding: 20px; box-sizing: border-box;
        }
        #sidebar.open { transform: translateX(0); }

        #sidebar-tab {
            position: absolute; left: -40px; top: 50%; transform: translateY(-50%);
            width: 40px; height: 70px; 
            /* Sidebar match */
            background: #1e293b; 
            /* The blue color from your original design */
            color: #38bdf8; 
            border: none; border-radius: 8px 0 0 8px; cursor: pointer;
            box-shadow: -5px 0 10px rgba(0,0,0,0.1); display: flex;
            align-items: center; justify-content: center; font-size: 1.2rem;
            border-left: 1px solid #334155; border-top: 1px solid #334155; border-bottom: 1px solid #334155;
            padding: 0; transition: all 0.2s ease;
        }

        #sidebar-tab:hover { 
            background: #334155; 
            /* Brighter blue on hover */
            color: #7dd3fc; 
            /* Subtle blue glow */
            box-shadow: -2px 0 15px rgba(56, 189, 248, 0.3);
        }

        h2 { color: #38bdf8; }
        .research-text { line-height: 1.8; font-size: 1.1rem; color: #cbd5e1; }
        
        #chat-output { flex: 1; overflow-y: auto; margin-bottom: 10px; font-size: 0.95rem; line-height: 1.6; border-bottom: 1px solid #334155; padding-bottom: 10px; }
        
        .ai-msg { background: #0f172a; padding: 15px; border-radius: 8px; margin-top: 10px; border-left: 4px solid #38bdf8; }
        
        ::selection { background: #38bdf8; color: #0f172a; }
        .cursor-blink { animation: blink 1s step-end infinite; color: #38bdf8; }
        @keyframes blink { 50% { opacity: 0; } }

        /* FOOLPROOF FLEXBOX INPUT LAYOUT */
        .input-container {
            display: flex;
            align-items: flex-end; /* Keeps button at the bottom when typing long messages */
            gap: 10px;
            margin-top: 10px;
            width: 100%;
        }

        #chat-input { 
            flex: 1; 
            background: #0f172a; border: 1px solid #334155; color: white; 
            padding: 12px; 
            border-radius: 8px; box-sizing: border-box; outline: none; 
            resize: none; overflow-y: hidden; min-height: 45px; max-height: 150px; 
            font-family: inherit; font-size: 0.95rem;
        }
        #chat-input:focus { border-color: #38bdf8; }

        #send-btn {
            flex-shrink: 0; /* Prevents button from shrinking */
            background: #38bdf8;
            color: #0f172a;
            border: none;
            border-radius: 8px;
            width: 45px;
            height: 45px; /* Exactly matches the minimum height of the text area */
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.1s, background 0.2s, opacity 0.2s;
        }

        #send-btn:hover { background: #7dd3fc; }
        #send-btn:active { transform: scale(0.9); }

        /* Mobile Adjustment */
        @media (max-width: 600px) {
            :root { --sidebar-width: 100%; }
            #sidebar-tab { width: 50px; height: 50px; left: -50px; }
        }
    </style>
</head>
<body>
    <div id="content-area">
        <h2>Research Material</h2>
        <div class="research-text">
            <p>In Flow Matching, the transition is defined by the ODE: $dx = v_t(x)dt$. 
            This vector field $v_t$ defines the velocity at each point in space-time to push samples from $p_0$ to $p_1$.</p>
            
            <p>The forward diffusion process adds noise $q(x_t | x_{t-1}) = \mathcal{N}(x_t; \sqrt{1-\beta_t}x_{t-1}, \beta_t I)$. 
            As $t$ increases, the original structure of the image is lost to Gaussian randomness.</p>
            
            <p>Copy any text above and paste it into the sidebar with your question!</p>
        </div>
    </div>

    <div id="sidebar">
        <button id="sidebar-tab" onclick="toggleSidebar()" title="Toggle Ask Julia">
            <span id="tab-icon">◀</span>
        </button>

        <h3>Ask Julia</h3>
        <div id="chat-output"> </div>
        
        <div class="input-container">
            <textarea id="chat-input" rows="1" placeholder="@bot explain..."></textarea>
            <button id="send-btn" onclick="askBot()" title="Send">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
            </button>
        </div>
        
    </div>

<script>
        const sidebar = document.getElementById('sidebar');
        const output = document.getElementById('chat-output');
        const input = document.getElementById('chat-input');
        const sendBtn = document.getElementById('send-btn');
        const tabIcon = document.getElementById('tab-icon');

        function toggleSidebar() {
            sidebar.classList.toggle('open');
            document.body.classList.toggle('sidebar-active');
            
            if (sidebar.classList.contains('open')) {
                tabIcon.innerText = "▶"; 
            } else {
                tabIcon.innerText = "◀"; 
            }
        }

        input.addEventListener('input', function() {
            this.style.height = 'auto'; 
            this.style.height = this.scrollHeight + 'px'; 
            this.style.overflowY = this.scrollHeight > 150 ? 'auto' : 'hidden';
        });

        function renderTextWithMath(text) {
            const mathBlocks = [];
            const mathRegex = /(\\$\\$[\\s\\S]*?\\$\\$|\\$[^\\$]*?\\$|\\\\\\[[\\s\\S]*?\\\\\\]|\\\\\\([\\s\\S]*?\\\\\\))/g;
            
            let placeholderText = text.replace(mathRegex, (match) => {
                mathBlocks.push(match);
                return `@@MATH_BLOCK_${mathBlocks.length - 1}@@`;
            });
            
            let html = marked.parse(placeholderText);
            
            mathBlocks.forEach((math, index) => {
                html = html.replace(`@@MATH_BLOCK_${index}@@`, math);
            });
            
            return html;
        }

        function typeARResponse(text, element) {
            return new Promise((resolve) => {
                let i = 0;
                let currentText = "";
                const speed = 10; 
                const chunkSize = 2; 

                const interval = setInterval(() => {
                    currentText += text.substring(i, i + chunkSize);
                    i += chunkSize;
                    
                    element.innerHTML = renderTextWithMath(currentText) + '<span class="cursor-blink">▌</span>';
                    output.scrollTop = output.scrollHeight; 
                    
                    if (i >= text.length) {
                        clearInterval(interval);
                        element.innerHTML = renderTextWithMath(text);
                        resolve();
                    }
                }, speed);
            });
        }

        async function askBot() {
            const query = input.value.trim();
            if(!query.includes('@bot')) return;

            // Disable UI while waiting for response
            sendBtn.style.opacity = "0.5";
            sendBtn.disabled = true;
            input.disabled = true;

            output.innerHTML += `<div><b>You:</b> ${query}</div><div class="ai-msg" id="last-response">Thinking...</div>`;
            
            input.value = "";
            input.style.height = 'auto'; 
            output.scrollTop = output.scrollHeight;

            try {
                const res = await fetch('/explain', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ page_text: "Context provided in query.", user_query: query })
                });
                const data = await res.json();
                
                const lastResponse = document.getElementById('last-response');
                lastResponse.removeAttribute('id'); 
                
                await typeARResponse(data.reply, lastResponse);
                
                if (window.MathJax) MathJax.typesetPromise([lastResponse]);
                
            } catch (err) {
                document.getElementById('last-response').innerHTML = "<span style='color: #f87171;'>Error: Could not connect to backend.</span>";
            }
            
            // Re-enable UI
            sendBtn.style.opacity = "1";
            sendBtn.disabled = false;
            input.disabled = false;
            input.focus();
            output.scrollTop = output.scrollHeight;
        }

        input.addEventListener('keydown', (e) => {
            if(e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault(); 
                askBot();
            }
        });
    </script>
</body>
</html>