<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ t('app_title') }}</title>
    <!-- KaTeX for LaTeX rendering -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <!-- Application CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/learning.css') }}">
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <div>
                <h1>🚀 <span data-i18n="app_title">{{ t('app_title') }}</span></h1>
                <p data-i18n="app_subtitle">{{ t('app_subtitle') }}</p>
            </div>
            <div style="display:flex; align-items:center; gap:8px;">
                <select class="lang-select" id="langSelect" onchange="changeLanguage(this.value)">
                    {% for code, name in languages.items() %}
                    <option value="{{ code }}" {{ 'selected' if code == lang else '' }}>{{ name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        
        <!-- Tabs -->
        <div class="tabs">
            <button class="tab active" onclick="showPanel('chat', this)">💬 <span data-i18n="chat">{{ t('chat') }}</span></button>
            <button class="tab" onclick="showPanel('terminal', this)">🖥️ <span data-i18n="command_line">{{ t('command_line') }}</span></button>
            <button class="tab" onclick="showPanel('docs', this)">📚 <span data-i18n="docs">{{ t('docs') }}</span></button>
            <button class="tab" onclick="showPanel('gallery', this)">🖼️ <span data-i18n="gallery">图集</span></button>
            <button class="tab" onclick="showPanel('settings', this)">⚙️ <span data-i18n="settings">{{ t('settings') }}</span></button>
            <span class="tab-divider"></span>
            <button class="tab tab-learning" onclick="showPanel('question', this)">🎯 <span data-i18n="question_generator">{{ t('question_generator') }}</span></button>
            <button class="tab tab-learning" onclick="showPanel('guide', this)">📖 <span data-i18n="guided_learning">{{ t('guided_learning') }}</span></button>
            <button class="tab tab-learning" onclick="showPanel('research', this)">🔬 <span data-i18n="deep_research">{{ t('deep_research') }}</span></button>
            <button class="tab tab-learning" onclick="showPanel('lecture', this)">📕 <span data-i18n="lecture_maker">{{ t('lecture_maker') }}</span></button>
            <button class="tab tab-learning" onclick="showPanel('exam', this)">📝 <span data-i18n="exam_generator">{{ t('exam_generator') }}</span></button>
        </div>
        
        <!-- Chat Panel -->
        <div class="panel active" id="panel-chat">
            <div class="chat-options">
                <label><input type="checkbox" id="useKb" checked> <span data-i18n="use_kb">{{ t('use_kb') }}</span></label>
                <label><input type="checkbox" id="useWeb"> <span data-i18n="use_web">{{ t('use_web') }}</span></label>
                <label><input type="checkbox" id="useImages"> <span data-i18n="use_images">包含图片</span></label>
                <label title="{{ t('strict_kb_mode_desc') }}">
                    <input type="checkbox" id="strictKbMode" {% if config.strict_kb_mode %}checked{% endif %} onchange="updateStrictKbMode()">
                    <span data-i18n="strict_kb_mode">{{ t('strict_kb_mode') }}</span>
                </label>
                <div class="form-group" style="margin:8px 0;">
                    <label data-i18n="output_length">{{ t('output_length') }}</label>
                    <div style="display:flex; gap:8px; align-items:center;">
                        <input type="number" id="outputWordLimit" min="0" max="10000" value="0" style="width:80px;font-size:0.85em;" title="{{ t('output_length_desc') }}">
                        <span style="font-size:0.85em;color:var(--text-muted);" data-i18n="words">{{ t('words') }}</span>
                        <span style="font-size:0.75em;color:var(--text-muted);">(0={{ t('unlimited') }})</span>
                    </div>
                </div>
                <div class="kb-selector-wrapper" id="kbSelectorWrapper">
                    <button type="button" class="kb-dropdown-toggle" id="kbDropdownToggle" onclick="toggleKbDropdown()">
                        <span data-i18n="select_kbs">{{ t('select_kbs') }}</span>: <span id="kbSelectionText">All</span> ▾
                    </button>
                    <div class="kb-dropdown-menu" id="kbDropdownMenu">
                        <div class="kb-dropdown-header">
                            <button type="button" class="btn btn-sm btn-secondary" onclick="selectAllKbs(true)" data-i18n="select_all">{{ t('select_all') }}</button>
                            <button type="button" class="btn btn-sm btn-secondary" onclick="selectAllKbs(false)" data-i18n="deselect_all">{{ t('deselect_all') }}</button>
                        </div>
                        <div class="kb-dropdown-list" id="kbDropdownList">
                        </div>
                    </div>
                </div>
            </div>
            <div class="chat-container">
                <div class="chat-messages" id="chatMessages"></div>
                <div class="chat-input-area">
                    <textarea class="chat-input" id="chatInput" 
                        data-i18n-placeholder="type_message"
                        placeholder="{{ t('type_message') }}"
                        onkeydown="if(event.key==='Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"></textarea>
                    <button class="btn btn-primary" id="sendBtn" onclick="sendMessage()">▶️ <span data-i18n="send">{{ t('send') }}</span></button>
                    <button class="btn btn-danger" id="stopBtn" onclick="stopGeneration()" style="display:none;">⏹️ <span data-i18n="stop">{{ t('stop') }}</span></button>
                    <button class="btn btn-secondary" onclick="clearChat()">🗑️ <span data-i18n="clear">{{ t('clear') }}</span></button>
                    <button class="btn btn-secondary" onclick="exportChat()">📥 <span data-i18n="export">{{ t('export') }}</span></button>
                    <button class="btn btn-secondary" onclick="saveConversation()">💾 <span data-i18n="save_conversation">{{ t('save_conversation') }}</span></button>
                    <button class="btn btn-secondary" onclick="triggerLoadConversation()">📂 <span data-i18n="load_conversation">{{ t('load_conversation') }}</span></button>
                    <input type="file" id="conversationFileInput" accept=".json" style="display: none;" onchange="loadConversation(this)">
                    <button class="btn btn-secondary" onclick="generateLiteratureReview()" title="{{ t('lit_review_desc') }}">📝 <span data-i18n="lit_review">{{ t('lit_review') }}</span></button>
                </div>
            </div>
        </div>
        
        <!-- Terminal Panel -->
        <div class="panel" id="panel-terminal">
            <div class="terminal-panel-grid">
                <!-- AI Assistant -->
                <div class="terminal-container">
                    <div class="terminal-header">
                        <h4 style="color: var(--primary);">🤖 <span data-i18n="ai_assistant">{{ t('ai_assistant') }}</span></h4>
                        <button class="btn btn-sm btn-secondary" onclick="clearAiChat()">🗑️ <span data-i18n="clear">{{ t('clear') }}</span></button>
                    </div>
                    <div class="ai-chat-messages" id="aiTerminalChat">
                        <div class="ai-message system">
                            <div class="ai-message-content">
                                <p><strong data-i18n="ai_assistant">{{ t('ai_assistant') }}</strong></p>
                                <p style="font-size:0.9em;" data-i18n="ai_intro">{{ t('ai_intro') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="terminal-input-area">
                        <input type="text" class="terminal-input" id="aiTerminalInput" 
                            data-i18n-placeholder="ai_ask_desc"
                            placeholder="{{ t('ai_ask_desc') }}"
                            onkeydown="if(event.key==='Enter') askAiCommand()">
                        <button class="btn btn-sm btn-primary" id="aiAskBtn" onclick="askAiCommand()">🤖 Ask</button>
                    </div>
                </div>
                
                <!-- Command Terminal -->
                <div class="terminal-container">
                    <div class="terminal-header">
                        <h4 style="color: var(--success);">🖥️ <span data-i18n="command_line">{{ t('command_line') }}</span></h4>
                        <button class="btn btn-sm btn-secondary" onclick="clearTerminal()">🗑️ <span data-i18n="clear">{{ t('clear') }}</span></button>
                    </div>
                    <div class="terminal-output" id="terminalOutput"><span class="cmd" data-i18n="terminal_ready">{{ t('terminal_ready') }}</span>
<span class="stdout" data-i18n="terminal_hint">{{ t('terminal_hint') }}</span>
</div>
                    <div class="terminal-input-area">
                        <span class="terminal-prompt">$</span>
                        <input type="text" class="terminal-input" id="terminalInput" 
                            data-i18n-placeholder="enter_command"
                            placeholder="{{ t('enter_command') }}"
                            onkeydown="if(event.key==='Enter') runTerminalCommand()"
                            ondragover="allowDrop(event)"
                            ondragleave="handleDragLeave(event)"
                            ondrop="dropCommand(event)">
                        <button class="btn btn-sm btn-primary" onclick="runTerminalCommand()">▶️</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Docs Panel -->
        <div class="panel" id="panel-docs">
            <div class="settings-grid">
                <!-- Row 1: Quick Actions -->
                <div class="settings-card highlight">
                    <h3>🌐 <span data-i18n="proxy">{{ t('proxy') }}</span></h3>
                    <div class="form-group">
                        <select id="docProxyMode" onchange="updateDocProxy()">
                            <option value="none" data-i18n="no_proxy" {{ 'selected' if config.proxy_mode == 'none' else '' }}>{{ t('no_proxy') }}</option>
                            <option value="system" data-i18n="system_proxy" {{ 'selected' if config.proxy_mode == 'system' else '' }}>{{ t('system_proxy') }}</option>
                            <option value="manual" data-i18n="manual_proxy" {{ 'selected' if config.proxy_mode == 'manual' else '' }}>{{ t('manual_proxy') }}</option>
                        </select>
                    </div>
                    <div id="docManualProxy" style="display: {{ 'block' if config.proxy_mode == 'manual' else 'none' }};">
                        <div class="form-group">
                            <input type="text" id="docProxyUrl" value="{{ config.proxy_http }}" placeholder="http://127.0.0.1:7890">
                        </div>
                    </div>
                </div>
                
                <div class="settings-card">
                    <h3>📥 <span data-i18n="quick_download">{{ t('quick_download') }}</span></h3>
                    <div class="form-group">
                        <select id="docSource">
                            {% for key, val in doc_sources.items() %}
                            <option value="{{ key }}">{{ val.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div style="display: flex; gap: 8px;">
                        <button class="btn btn-sm btn-primary" onclick="downloadDocs()">⬇️ <span data-i18n="download">{{ t('download') }}</span></button>
                        <button class="btn btn-sm btn-secondary" onclick="indexDocs()">📋 <span data-i18n="index">{{ t('index') }}</span></button>
                    </div>
                    <div id="docStatus" style="margin-top: 10px; color: var(--text-muted); font-size: 0.85em;"></div>
                </div>
                
                <div class="settings-card">
                    <h3>📚 <span data-i18n="downloaded">{{ t('downloaded') }}</span></h3>
                    <div class="docs-list" id="docsList"></div>
                    <div style="display:flex; gap:8px; margin-top:10px;">
                        <button class="btn btn-sm btn-secondary" onclick="refreshDocs()">🔄 <span data-i18n="refresh">{{ t('refresh') }}</span></button>
                        <button class="btn btn-sm btn-secondary" onclick="showKbManager()" title="{{ t('kb_manager_desc') }}">📁 <span data-i18n="kb_manager">{{ t('kb_manager') }}</span></button>
                    </div>
                </div>
                
                <!-- Upload Documents -->
                <div class="settings-card">
                    <h3>📤 <span data-i18n="upload_docs">{{ t('upload_docs') }}</span></h3>
                    <div class="form-group">
                        <label data-i18n="kb_name_label">{{ t('kb_name_label') }}</label>
                        <input type="text" id="uploadKbName" data-i18n-placeholder="upload_kb_placeholder" placeholder="{{ t('upload_kb_placeholder') }}">
                    </div>
                    <div class="form-group">
                        <label data-i18n="upload_mode">{{ t('upload_mode') }}</label>
                        <select id="uploadMode" onchange="toggleUploadMode()">
                            <option value="files" data-i18n="upload_mode_files">{{ t('upload_mode_files') }}</option>
                            <option value="folder" data-i18n="upload_mode_folder">{{ t('upload_mode_folder') }}</option>
                        </select>
                    </div>
                    <div class="form-group" id="filesUploadGroup">
                        <label data-i18n="select_files">{{ t('select_files') }}</label>
                        <input type="file" id="uploadFiles" multiple accept=".md,.txt,.png,.jpg,.jpeg,.gif,.webp,.svg" class="file-input">
                    </div>
                    <div class="form-group" id="folderUploadGroup" style="display:none;">
                        <label data-i18n="select_folder">{{ t('select_folder') }}</label>
                        <input type="file" id="uploadFolder" webkitdirectory directory multiple class="file-input">
                        <p style="font-size:0.75em;color:var(--text-muted);margin-top:4px;" data-i18n="folder_upload_desc">{{ t('folder_upload_desc') }}</p>
                    </div>
                    <div class="form-group">
                        <label data-i18n="image_process_mode">{{ t('image_process_mode') }}</label>
                        <select id="uploadImageMode">
                            <option value="copy" data-i18n="image_mode_copy">{{ t('image_mode_copy') }}</option>
                            <option value="base64" data-i18n="image_mode_base64">{{ t('image_mode_base64') }}</option>
                            <option value="reference" data-i18n="image_mode_reference">{{ t('image_mode_reference') }}</option>
                        </select>
                        <p style="font-size:0.75em;color:var(--text-muted);margin-top:4px;" data-i18n="image_mode_desc">{{ t('image_mode_desc') }}</p>
                    </div>
                    <div style="display: flex; gap: 8px;">
                        <button class="btn btn-sm btn-primary" onclick="uploadDocs()">📤 <span data-i18n="upload_and_index">{{ t('upload_and_index') }}</span></button>
                    </div>
                    <div id="uploadProgress" style="display:none; margin-top:10px;">
                        <div style="background:var(--bg-tertiary); border-radius:4px; padding:8px;">
                            <div style="display:flex; justify-content:space-between; font-size:0.85em; margin-bottom:5px;">
                                <span id="uploadProgressText">{{ t('uploading') }}</span>
                                <span id="uploadProgressPercent">0%</span>
                            </div>
                            <div class="progress-bar" style="height:6px; background:var(--bg-secondary); border-radius:3px;">
                                <div id="uploadProgressBar" class="progress-bar-fill" style="width:0%; height:100%; background:var(--primary); border-radius:3px;"></div>
                            </div>
                        </div>
                    </div>
                    <div id="uploadStatus" style="margin-top: 10px; color: var(--text-muted); font-size: 0.85em;"></div>
                </div>
                
                <!-- System Monitor -->
                <div class="settings-card" id="systemMonitorCard">
                    <h3>📊 <span data-i18n="system_monitor">{{ t('system_monitor') }}</span></h3>
                    <div class="system-stats">
                        <div class="stat-row">
                            <span class="stat-label" data-i18n="context_length">{{ t('context_length') }}</span>
                            <span class="stat-value" id="currentContextLength">0</span>
                            <span class="stat-unit">tokens</span>
                        </div>
                        <div class="stat-row">
                            <span class="stat-label" data-i18n="max_context">{{ t('max_context') }}</span>
                            <span class="stat-value" id="maxContext">{{ config.max_context_tokens }}</span>
                            <span class="stat-unit">tokens</span>
                        </div>
                        <div class="stat-row">
                            <span class="stat-label" data-i18n="memory_usage">{{ t('memory_usage') }}</span>
                            <span class="stat-value" id="memoryUsage">--</span>
                            <span class="stat-unit">MB</span>
                        </div>
                        <div class="stat-row">
                            <span class="stat-label" data-i18n="kb_docs">{{ t('kb_docs') }}</span>
                            <span class="stat-value" id="kbDocCount">--</span>
                            <span class="stat-unit" data-i18n="documents">{{ t('documents') }}</span>
                        </div>
                    </div>
                    <button class="btn btn-sm btn-secondary" style="margin-top:10px;" onclick="refreshSystemStats()">🔄 <span data-i18n="refresh">{{ t('refresh') }}</span></button>
                </div>
                
                <!-- Row 2: Batch Operations -->
                <div class="settings-card" style="grid-column: span 2;">
                    <h3>📦 <span data-i18n="batch_download">{{ t('batch_download') }}</span></h3>
                    <div class="batch-sources" id="batchSources">
                        {% for key, val in doc_sources.items() %}
                        <label><input type="checkbox" value="{{ key }}" class="batch-checkbox"> {{ val.name }}</label>
                        {% endfor %}
                    </div>
                    <div style="display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;">
                        <button class="btn btn-sm btn-secondary" onclick="selectAllBatch(true)" data-i18n="select_all">{{ t('select_all') }}</button>
                        <button class="btn btn-sm btn-secondary" onclick="selectAllBatch(false)" data-i18n="deselect_all">{{ t('deselect_all') }}</button>
                        <button class="btn btn-sm btn-primary" onclick="batchDownload()">⬇️ <span data-i18n="batch_download">{{ t('batch_download') }}</span></button>
                        <button class="btn btn-sm btn-secondary" onclick="batchIndex()">📋 <span data-i18n="batch_index">{{ t('batch_index') }}</span></button>
                    </div>
                    <div id="batchStatus" style="margin-top: 10px; color: var(--text-muted); font-size: 0.85em;"></div>
                </div>
                
                <!-- Row 3: Search Features -->
                <div class="settings-card">
                    <h3>🔍 <span data-i18n="web_search_kb">{{ t('web_search_kb') }}</span></h3>
                    <div class="form-group">
                        <input type="text" id="webSearchQuery" data-i18n-placeholder="search_docs" placeholder="{{ t('search_docs') }}">
                    </div>
                    <div class="form-group">
                        <input type="text" id="webSearchName" data-i18n-placeholder="kb_name" placeholder="{{ t('kb_name') }}">
                    </div>
                    <button class="btn btn-sm btn-primary" onclick="webSearchToKb()">🔍 <span data-i18n="search_add_kb">{{ t('search_add_kb') }}</span></button>
                    <div id="webSearchStatus" style="margin-top: 10px; color: var(--text-muted); font-size: 0.85em;"></div>
                </div>
                
                <div class="settings-card">
                    <h3>🐙 <span data-i18n="github_search">{{ t('github_search') }}</span></h3>
                    <div class="form-group">
                        <input type="text" id="githubSearchQuery" data-i18n-placeholder="search_keyword" placeholder="{{ t('search_keyword') }}">
                    </div>
                    <div class="form-group">
                        <select id="githubSearchLang">
                            <option value="" data-i18n="all_languages">{{ t('all_languages') }}</option>
                            <option value="python">Python</option>
                            <option value="javascript">JavaScript</option>
                            <option value="rust">Rust</option>
                            <option value="go">Go</option>
                        </select>
                    </div>
                    <button class="btn btn-sm btn-primary" onclick="searchGitHub()">🔍 <span data-i18n="search">{{ t('search') }}</span></button>
                    <div id="githubResults" style="margin-top: 10px; max-height: 150px; overflow-y: auto; font-size: 0.85em;"></div>
                </div>
                
                <!-- Row 4: Import / Export -->
                <div class="settings-card">
                    <h3>📁 <span data-i18n="export_raw_files">{{ t('export_raw_files') }}</span> / <span data-i18n="import_raw_files">{{ t('import_raw_files') }}</span></h3>
                    <p style="font-size: 0.8em; color: var(--text-muted); margin-bottom: 10px;" data-i18n="raw_files_desc">{{ t('raw_files_desc') }}</p>
                    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                        <button class="btn btn-sm btn-primary" onclick="exportRawFiles()">📥 <span data-i18n="export_raw_files">{{ t('export_raw_files') }}</span></button>
                        <button class="btn btn-sm btn-secondary" onclick="document.getElementById('importRawFilesInput').click()">📤 <span data-i18n="import_raw_files">{{ t('import_raw_files') }}</span></button>
                        <input type="file" id="importRawFilesInput" accept=".zip" style="display: none;" onchange="importRawFiles(this)">
                    </div>
                    <div id="rawFilesStatus" style="margin-top: 10px; color: var(--text-muted); font-size: 0.85em;"></div>
                </div>
                
                <div class="settings-card">
                    <h3>🧠 <span data-i18n="export_kb">{{ t('export_kb') }}</span> / <span data-i18n="import_kb">{{ t('import_kb') }}</span></h3>
                    <p style="font-size: 0.8em; color: var(--text-muted); margin-bottom: 10px;" data-i18n="kb_desc">{{ t('kb_desc') }}</p>
                    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                        <button class="btn btn-sm btn-primary" onclick="exportKb()">📥 <span data-i18n="export_kb">{{ t('export_kb') }}</span></button>
                        <button class="btn btn-sm btn-secondary" onclick="document.getElementById('importKbInput').click()">📤 <span data-i18n="import_kb">{{ t('import_kb') }}</span></button>
                        <input type="file" id="importKbInput" accept=".zip" style="display: none;" onchange="importKb(this)">
                    </div>
                    <div id="kbStatus" style="margin-top: 10px; color: var(--text-muted); font-size: 0.85em;"></div>
                </div>
            </div>
        </div>
        
        <!-- Gallery Panel / 图集面板 -->
        <div class="panel" id="panel-gallery">
            <div class="gallery-container">
                <div class="gallery-header">
                    <h2 style="margin:0;">🖼️ <span data-i18n="image_gallery">图集</span></h2>
                    <div class="gallery-controls">
                        <select id="galleryKbSelect" onchange="loadGallery()">
                            <option value="">选择知识库</option>
                        </select>
                        <input type="text" id="gallerySearchInput" placeholder="搜索图片、上下文..." 
                               onkeyup="if(event.key==='Enter') searchGalleryAdvanced()" 
                               style="padding:8px 12px; border:1px solid var(--border); border-radius:4px; min-width:200px;">
                        <select id="gallerySearchType" style="padding:8px;border:1px solid var(--border);border-radius:4px;">
                            <option value="all">全文搜索</option>
                            <option value="context">上下文匹配</option>
                            <option value="alt">Alt 文本</option>
                        </select>
                        <button class="btn btn-sm btn-primary" onclick="searchGalleryAdvanced()">🔍 <span data-i18n="search">搜索</span></button>
                        <button class="btn btn-sm btn-secondary" onclick="loadGallery()">📖 <span data-i18n="browse">浏览</span></button>
                    </div>
                </div>
                
                <div class="gallery-stats" id="galleryStats" style="margin:10px 0; color:var(--text-muted); font-size:0.9em;">
                </div>
                
                <div class="gallery-grid" id="galleryGrid" style="display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:15px; margin-top:15px;">
                </div>
                
                <div class="gallery-empty" id="galleryEmpty" style="text-align:center; padding:50px; color:var(--text-muted);">
                    <p style="font-size:1.2em;">📷</p>
                    <p>请先选择一个知识库</p>
                </div>
                
                <!-- Image Modal / 图片模态框 -->
                <div id="imageModal" class="modal" style="display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8);" onclick="closeImageModal()">
                    <div class="modal-content" style="position:relative; background:transparent; margin:2% auto; padding:0; width:90%; max-width:1200px; max-height:90vh; overflow:auto;" onclick="event.stopPropagation()">
                        <span onclick="closeImageModal()" style="position:absolute; top:10px; right:25px; color:#f1f1f1; font-size:35px; font-weight:bold; cursor:pointer; z-index:1001;">&times;</span>
                        <div style="display:flex; flex-direction:column; align-items:center;">
                            <img id="imageModalImg" src="" alt="" style="max-width:100%; max-height:70vh; object-fit:contain; border-radius:8px;">
                            <div style="background:var(--bg-secondary); padding:15px; border-radius:8px; margin-top:15px; width:100%; max-width:800px;">
                                <h4 id="imageModalTitle" style="margin:0 0 10px 0; color:var(--text-primary);"></h4>
                                <p style="margin:5px 0; color:var(--text-muted);">
                                    <strong>源文件：</strong> <span id="imageModalSource"></span>
                                </p>
                                <p style="margin:5px 0; color:var(--text-muted);">
                                    <strong>文件名：</strong> <span id="imageModalFile"></span>
                                </p>
                                <p style="margin:5px 0; color:var(--text-muted);">
                                    <strong>知识库：</strong> <span id="imageModalKb"></span>
                                </p>
                                <div id="imageModalContext" style="margin-top:10px; padding:10px; background:var(--bg-tertiary); border-radius:4px; display:none;">
                                    <strong style="color:var(--primary);">上下文：</strong>
                                    <p id="imageModalContextText" style="margin:5px 0; font-size:0.85em; color:var(--text);"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Settings Panel -->
        <div class="panel" id="panel-settings">
            <div class="settings-grid">
                <div class="settings-card highlight">
                    <h3>📡 <span data-i18n="connection_status">{{ t('connection_status') }}</span></h3>
                    <p id="ollamaStatus"><span class="status-dot offline"></span> Checking...</p>
                    <div class="form-group" style="margin-top: 10px;">
                        <label data-i18n="ollama_url">{{ t('ollama_url') }}</label>
                        <input type="text" id="ollamaUrl" value="{{ config.ollama_url }}">
                    </div>
                    <button class="btn btn-sm btn-secondary" onclick="testConnection()">🔌 <span data-i18n="test_connection">{{ t('test_connection') }}</span></button>
                </div>
                
                <div class="settings-card">
                    <h3>💬 <span data-i18n="chat_model">{{ t('chat_model') }}</span></h3>
                    <div class="form-group">
                        <select id="chatModel">
                            <option value="" data-i18n="chat_model">-- {{ t('chat_model') }} --</option>
                        </select>
                    </div>
                </div>
                
                <div class="settings-card">
                    <h3>🧠 <span data-i18n="embedding">{{ t('embedding') }}</span></h3>
                    <div class="form-group">
                        <select id="embedModel">
                            <option value="" data-i18n="embedding">-- {{ t('embedding') }} --</option>
                        </select>
                    </div>
                </div>
                
                <div class="settings-card">
                    <h3>🔄 <span data-i18n="reranker">{{ t('reranker') }}</span></h3>
                    <div class="form-group">
                        <select id="rerankerModel">
                            <option value="" data-i18n="optional">-- {{ t('optional') }} --</option>
                        </select>
                    </div>
                </div>
                
                <div class="settings-card">
                    <h3>🗄️ <span data-i18n="vector_db">{{ t('vector_db') }}</span></h3>
                    <div class="form-group">
                        <select id="vectorDbType" onchange="updateVectorDbType()">
                            <option value="chroma" {{ 'selected' if config.vector_db_type == 'chroma' else '' }} data-i18n="vector_db_chroma">{{ t('vector_db_chroma') }}</option>
                            <option value="faiss" {{ 'selected' if config.vector_db_type == 'faiss' else '' }} data-i18n="vector_db_faiss">{{ t('vector_db_faiss') }}</option>
                            <option value="memory" {{ 'selected' if config.vector_db_type == 'memory' else '' }} data-i18n="vector_db_memory">{{ t('vector_db_memory') }}</option>
                        </select>
                    </div>
                    <p style="font-size: 0.8em; color: var(--text-muted); margin-top: 5px;" data-i18n="vector_db_restart_required">{{ t('vector_db_restart_required') }}</p>
                </div>
                
                <div class="settings-card" style="grid-column: span 2;">
                    <h3>🌐 <span data-i18n="proxy_settings">{{ t('proxy_settings') }}</span></h3>
                    <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 15px; align-items: start;">
                        <div class="form-group">
                            <label data-i18n="mode">{{ t('mode') }}</label>
                            <select id="proxyMode" onchange="toggleProxyInputs()">
                                <option value="none" data-i18n="no_proxy_opt" {{ 'selected' if config.proxy_mode == 'none' else '' }}>{{ t('no_proxy_opt') }}</option>
                                <option value="system" data-i18n="system_proxy_opt" {{ 'selected' if config.proxy_mode == 'system' else '' }}>{{ t('system_proxy_opt') }}</option>
                                <option value="manual" data-i18n="manual_proxy_opt" {{ 'selected' if config.proxy_mode == 'manual' else '' }}>{{ t('manual_proxy_opt') }}</option>
                            </select>
                        </div>
                        <div id="manualProxyInputs" style="display: {{ 'grid' if config.proxy_mode == 'manual' else 'none' }}; grid-template-columns: 1fr 1fr; gap: 10px;">
                            <div class="form-group">
                                <label>HTTP</label>
                                <input type="text" id="proxyHttp" value="{{ config.proxy_http }}" placeholder="http://127.0.0.1:7890">
                            </div>
                            <div class="form-group">
                                <label>HTTPS</label>
                                <input type="text" id="proxyHttps" value="{{ config.proxy_https }}" placeholder="http://127.0.0.1:7890">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 15px; text-align: center;">
                <button class="btn btn-primary" onclick="saveSettings()">💾 <span data-i18n="save_settings">{{ t('save_settings') }}</span></button>
            </div>
        </div>

        <!-- ================================================================= -->
        <!-- Learning Panels (integrated as tabs)                              -->
        <!-- ================================================================= -->

        <!-- Question Generator Panel -->
        <div class="panel" id="panel-question">
            <div class="learning-page">
                <div class="learning-sidebar">
                    <div class="learning-form">
                        <label data-i18n="select_kbs">{{ t('select_kbs') }}</label>
                        <div class="kb-check-list" id="q-kbCheckList">
                            <div class="empty-state"><span class="learning-loading"></span></div>
                        </div>

                        <label data-i18n="question_topic">{{ t('question_topic') }}</label>
                        <input type="text" id="q-topicInput" data-i18n-placeholder="question_topic_placeholder" placeholder="{{ t('question_topic_placeholder') }}">

                        <label data-i18n="question_count">{{ t('question_count') }}</label>
                        <input type="range" id="q-countSlider" min="1" max="10" value="3" oninput="document.getElementById('q-countVal').textContent=this.value">
                        <span id="q-countVal" style="color:var(--primary);font-weight:600;">3</span>

                        <label data-i18n="question_type">{{ t('question_type') }}</label>
                        <select id="q-typeSelect">
                            <option value="choice" data-i18n="question_type_choice">{{ t('question_type_choice') }}</option>
                            <option value="written" data-i18n="question_type_written">{{ t('question_type_written') }}</option>
                            <option value="fill_blank" data-i18n="question_type_fill_blank">{{ t('question_type_fill_blank') }}</option>
                            <option value="true_false" data-i18n="question_type_true_false">{{ t('question_type_true_false') }}</option>
                        </select>

                        <label data-i18n="difficulty">{{ t('difficulty') }}</label>
                        <select id="q-difficultySelect">
                            <option value="easy" data-i18n="difficulty_easy">{{ t('difficulty_easy') }}</option>
                            <option value="medium" selected data-i18n="difficulty_medium">{{ t('difficulty_medium') }}</option>
                            <option value="hard" data-i18n="difficulty_hard">{{ t('difficulty_hard') }}</option>
                        </select>

                        <label class="kb-check-item" style="margin-top:12px;">
                            <input type="checkbox" id="q-webSearchToggle" style="width:auto; margin:0;">
                            <span data-i18n="enable_web_search">{{ t('enable_web_search') }}</span>
                        </label>

                        <button class="btn-learning btn-learning-primary" id="q-generateBtn" onclick="QuestionModule.generateQuestions()">
                            <span data-i18n="generate_questions">{{ t('generate_questions') }}</span>
                        </button>
                    </div>

                    <hr style="border-color:var(--border); margin:18px 0 12px;">
                    <h3 style="font-size:0.9em; color:var(--text-muted);" data-i18n="saved_batches">{{ t('saved_batches') }}</h3>
                    <div id="q-historyList" class="history-list"></div>
                </div>

                <div class="learning-main">
                    <div id="q-statusMsg" class="status-msg"></div>
                    <div id="q-questionsContainer"></div>
                    <div id="q-emptyState" class="empty-state" data-i18n="question_topic_placeholder">{{ t('question_topic_placeholder') }}</div>
                </div>
            </div>
        </div>

        <!-- Guided Learning Panel -->
        <div class="panel" id="panel-guide">
            <div class="learning-page">
                <div class="learning-sidebar">
                    <div id="g-setupPanel">
                        <div class="learning-form">
                            <label data-i18n="select_kb_learn">{{ t('select_kb_learn') }}</label>
                            <div class="kb-check-list" id="g-kbCheckList">
                                <div class="empty-state"><span class="learning-loading"></span></div>
                            </div>
                            <label class="kb-check-item" style="margin-top:12px;">
                                <input type="checkbox" id="g-webSearchToggle" style="width:auto; margin:0;">
                                <span data-i18n="enable_web_search">{{ t('enable_web_search') }}</span>
                            </label>
                            <button class="btn-learning btn-learning-primary" id="g-createBtn" onclick="GuideModule.createSession()">
                                <span data-i18n="create_session">{{ t('create_session') }}</span>
                            </button>
                        </div>
                        <hr style="border-color:var(--border); margin:18px 0 12px;">
                        <h3 style="font-size:0.9em; color:var(--text-muted);" data-i18n="session_list">{{ t('session_list') }}</h3>
                        <div id="g-sessionList" class="history-list"></div>
                    </div>

                    <div id="g-learningPanel" style="display:none;">
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <h3 style="font-size:0.9em; color:var(--primary);" data-i18n="learning_progress">{{ t('learning_progress') }}</h3>
                            <span id="g-progressText" style="font-size:0.82em; color:var(--text-muted);">0%</span>
                        </div>
                        <div class="progress-bar"><div class="progress-bar-fill" id="g-progressFill" style="width:0%"></div></div>

                        <ul class="kp-list" id="g-kpList"></ul>

                        <div style="display:flex; gap:8px; margin-top:12px;">
                            <button class="btn-learning btn-learning-primary" id="g-startBtn" onclick="GuideModule.startLearning()" style="display:block;">
                                <span data-i18n="start_learning">{{ t('start_learning') }}</span>
                            </button>
                            <button class="btn-learning btn-learning-primary" id="g-nextBtn" onclick="GuideModule.nextPoint()" style="display:none;">
                                <span data-i18n="next_point">{{ t('next_point') }}</span>
                            </button>
                            <button class="btn-learning btn-learning-secondary" id="g-summaryBtn" onclick="GuideModule.generateSummary()" style="display:none;">
                                <span data-i18n="generate_summary">{{ t('generate_summary') }}</span>
                            </button>
                        </div>

                        <div class="guide-chat" id="g-chatSection" style="display:none;">
                            <div class="guide-chat-messages" id="g-chatMessages"></div>
                            <div class="guide-chat-input">
                                <input type="text" id="g-chatInput" data-i18n-placeholder="ask_question" placeholder="{{ t('ask_question') }}"
                                       onkeydown="if(event.key==='Enter')GuideModule.sendChatMessage()">
                                <button class="btn-learning btn-learning-primary" onclick="GuideModule.sendChatMessage()" data-i18n="send">{{ t('send') }}</button>
                            </div>
                        </div>

                        <button class="btn-learning btn-learning-secondary" style="margin-top:12px;" onclick="GuideModule.backToSetup()" data-i18n="back_to_main">
                            {{ t('back_to_main') }}
                        </button>
                    </div>
                </div>

                <div class="learning-main">
                    <div id="g-statusMsg" class="status-msg"></div>
                    <div id="g-lessonContent" class="lesson-content"></div>
                    <div id="g-emptyState" class="empty-state" data-i18n="select_kb_learn">{{ t('select_kb_learn') }}</div>
                </div>
            </div>
        </div>

        <!-- Deep Research Panel -->
        <div class="panel" id="panel-research">
            <div class="learning-page">
                <div class="learning-sidebar">
                    <div class="learning-form">
                        <label data-i18n="select_kbs">{{ t('select_kbs') }}</label>
                        <div class="kb-check-list" id="r-kbCheckList">
                            <div class="empty-state"><span class="learning-loading"></span></div>
                        </div>

                        <label data-i18n="research_topic">{{ t('research_topic') }}</label>
                        <input type="text" id="r-topicInput" data-i18n-placeholder="research_topic_placeholder" placeholder="{{ t('research_topic_placeholder') }}">

                        <label data-i18n="research_depth">{{ t('research_depth') }}</label>
                        <select id="r-depthSelect">
                            <option value="quick" data-i18n="depth_quick">{{ t('depth_quick') }}</option>
                            <option value="medium" selected data-i18n="depth_medium">{{ t('depth_medium') }}</option>
                            <option value="deep" data-i18n="depth_deep">{{ t('depth_deep') }}</option>
                            <option value="auto" data-i18n="depth_auto">{{ t('depth_auto') }}</option>
                        </select>

                        <label class="kb-check-item" style="margin-top:12px;">
                            <input type="checkbox" id="r-webSearchToggle" style="width:auto; margin:0;">
                            <span data-i18n="enable_web_search">{{ t('enable_web_search') }}</span>
                        </label>

                        <button class="btn-learning btn-learning-primary" id="r-startBtn" onclick="ResearchModule.startResearch()">
                            <span data-i18n="start_research">{{ t('start_research') }}</span>
                        </button>
                    </div>

                    <div id="r-phaseSection" style="display:none; margin-top:18px;">
                        <div class="phase-indicator">
                            <span class="phase-step" id="r-phase-rephrasing" data-i18n="rephrasing_phase">{{ t('rephrasing_phase') }}</span>
                            <span class="phase-arrow">&rarr;</span>
                            <span class="phase-step" id="r-phase-planning" data-i18n="planning_phase">{{ t('planning_phase') }}</span>
                            <span class="phase-arrow">&rarr;</span>
                            <span class="phase-step" id="r-phase-researching" data-i18n="researching_phase">{{ t('researching_phase') }}</span>
                            <span class="phase-arrow" id="r-refining-arrow" style="display:none;">&rarr;</span>
                            <span class="phase-step" id="r-phase-refining" data-i18n="refining_phase" style="display:none;">{{ t('refining_phase') }}</span>
                            <span class="phase-arrow">&rarr;</span>
                            <span class="phase-step" id="r-phase-reporting" data-i18n="reporting_phase">{{ t('reporting_phase') }}</span>
                        </div>
                        <div id="r-subtopicList"></div>
                        <div id="r-progressStats" style="font-size:0.8em; color:var(--text-muted); margin-top:8px;"></div>
                    </div>

                    <hr style="border-color:var(--border); margin:18px 0 12px;">
                    <h3 style="font-size:0.9em; color:var(--text-muted);" data-i18n="saved_reports">{{ t('saved_reports') }}</h3>
                    <div id="r-reportList" class="history-list"></div>
                </div>

                <div class="learning-main">
                    <div id="r-statusMsg" class="status-msg"></div>
                    <div id="r-reportContent" class="report-content"></div>
                    <div id="r-emptyState" class="empty-state" data-i18n="research_topic_placeholder">{{ t('research_topic_placeholder') }}</div>
                    <div id="r-reportActions" style="display:none; margin-top:15px; gap:8px;">
                        <button class="btn-learning btn-learning-secondary" onclick="ResearchModule.exportReport()" style="width:auto; margin:0;">
                            <span data-i18n="export_report">{{ t('export_report') }}</span>
                        </button>
                        <button class="btn-learning btn-learning-secondary" onclick="ResearchModule.copyReport()" style="width:auto; margin:0;">
                            <span data-i18n="copy_report">{{ t('copy_report') }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Lecture Maker Panel -->
        <div class="panel" id="panel-lecture">
            <div class="learning-page">
                <div class="learning-sidebar">
                    <div class="learning-form">
                        <label data-i18n="select_kbs">{{ t('select_kbs') }}</label>
                        <div class="kb-check-list" id="l-kbCheckList">
                            <div class="empty-state"><span class="learning-loading"></span></div>
                        </div>

                        <label data-i18n="lecture_topic">{{ t('lecture_topic') }}</label>
                        <input type="text" id="l-topicInput" data-i18n-placeholder="lecture_topic_placeholder" placeholder="{{ t('lecture_topic_placeholder') }}">

                        <label class="kb-check-item" style="margin-top:12px;">
                            <input type="checkbox" id="l-webSearchToggle" style="width:auto; margin:0;">
                            <span data-i18n="enable_web_search">{{ t('enable_web_search') }}</span>
                        </label>

                        <button class="btn-learning btn-learning-primary" id="l-startBtn" onclick="LectureModule.startLecture()">
                            <span data-i18n="generate_lecture">{{ t('generate_lecture') }}</span>
                        </button>
                    </div>

                    <div id="l-phaseSection" style="display:none; margin-top:18px;">
                        <div class="phase-indicator">
                            <span class="phase-step" id="l-phase-analyzing" data-i18n="analyzing_phase">{{ t('analyzing_phase') }}</span>
                            <span class="phase-arrow">&rarr;</span>
                            <span class="phase-step" id="l-phase-outlining" data-i18n="outlining_phase">{{ t('outlining_phase') }}</span>
                            <span class="phase-arrow">&rarr;</span>
                            <span class="phase-step" id="l-phase-writing" data-i18n="writing_phase">{{ t('writing_phase') }}</span>
                            <span class="phase-arrow">&rarr;</span>
                            <span class="phase-step" id="l-phase-summarizing" data-i18n="summarizing_phase">{{ t('summarizing_phase') }}</span>
                        </div>
                        <div id="l-outlineList"></div>
                    </div>

                    <hr style="border-color:var(--border); margin:18px 0 12px;">
                    <h3 style="font-size:0.9em; color:var(--text-muted);" data-i18n="saved_lectures">{{ t('saved_lectures') }}</h3>
                    <div id="l-lectureList" class="history-list"></div>
                </div>

                <div class="learning-main">
                    <div id="l-statusMsg" class="status-msg"></div>
                    <div id="l-lectureContent" class="report-content"></div>
                    <div id="l-emptyState" class="empty-state" data-i18n="lecture_topic_placeholder">{{ t('lecture_topic_placeholder') }}</div>
                    <div id="l-lectureActions" style="display:none; margin-top:15px; gap:8px;">
                        <button class="btn-learning btn-learning-secondary" onclick="LectureModule.exportLecture()" style="width:auto; margin:0;">
                            <span data-i18n="export_lecture">{{ t('export_lecture') }}</span>
                        </button>
                        <button class="btn-learning btn-learning-secondary" onclick="LectureModule.copyLecture()" style="width:auto; margin:0;">
                            <span data-i18n="copy_lecture">{{ t('copy_lecture') }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Exam Generator Panel -->
        <div class="panel" id="panel-exam">
            <div class="learning-page">
                <div class="learning-sidebar">
                    <div class="learning-form">
                        <label data-i18n="select_kbs">{{ t('select_kbs') }}</label>
                        <div class="kb-check-list" id="e-kbCheckList">
                            <div class="empty-state"><span class="learning-loading"></span></div>
                        </div>

                        <label data-i18n="exam_topic">{{ t('exam_topic') }}</label>
                        <input type="text" id="e-topicInput" data-i18n-placeholder="exam_topic_placeholder" placeholder="{{ t('exam_topic_placeholder') }}">

                        <label data-i18n="difficulty">{{ t('difficulty') }}</label>
                        <select id="e-difficultySelect">
                            <option value="easy" data-i18n="difficulty_easy">{{ t('difficulty_easy') }}</option>
                            <option value="medium" selected data-i18n="difficulty_medium">{{ t('difficulty_medium') }}</option>
                            <option value="hard" data-i18n="difficulty_hard">{{ t('difficulty_hard') }}</option>
                        </select>

                        <label class="kb-check-item" style="margin-top:12px;">
                            <input type="checkbox" id="e-webSearchToggle" style="width:auto; margin:0;">
                            <span data-i18n="enable_web_search">{{ t('enable_web_search') }}</span>
                        </label>

                        <button class="btn-learning btn-learning-primary" id="e-startBtn" onclick="ExamModule.startExam()">
                            <span data-i18n="generate_exam">{{ t('generate_exam') }}</span>
                        </button>
                    </div>

                    <div id="e-phaseSection" style="display:none; margin-top:18px;">
                        <div class="phase-indicator">
                            <span class="phase-step" id="e-phase-planning" data-i18n="planning_phase">{{ t('planning_phase') }}</span>
                            <span class="phase-arrow">&rarr;</span>
                            <span class="phase-step" id="e-phase-generating" data-i18n="generating_phase">{{ t('generating_phase') }}</span>
                            <span class="phase-arrow">&rarr;</span>
                            <span class="phase-step" id="e-phase-answer_key" data-i18n="answer_key_phase">{{ t('answer_key_phase') }}</span>
                            <span class="phase-arrow">&rarr;</span>
                            <span class="phase-step" id="e-phase-formatting" data-i18n="formatting_phase">{{ t('formatting_phase') }}</span>
                        </div>
                        <div id="e-sectionList"></div>
                    </div>

                    <hr style="border-color:var(--border); margin:18px 0 12px;">
                    <h3 style="font-size:0.9em; color:var(--text-muted);" data-i18n="saved_exams">{{ t('saved_exams') }}</h3>
                    <div id="e-examList" class="history-list"></div>
                </div>

                <div class="learning-main">
                    <div id="e-statusMsg" class="status-msg"></div>

                    <div id="e-examTabs" class="exam-tab-bar" style="display:none;">
                        <button class="exam-tab active" id="e-tabPaper" onclick="ExamModule.switchTab('paper')">
                            <span data-i18n="exam_paper_tab">{{ t('exam_paper_tab') }}</span>
                        </button>
                        <button class="exam-tab" id="e-tabAnswerKey" onclick="ExamModule.switchTab('answer_key')">
                            <span data-i18n="answer_key_tab">{{ t('answer_key_tab') }}</span>
                        </button>
                    </div>

                    <div id="e-paperContent" class="report-content"></div>
                    <div id="e-answerKeyContent" class="report-content" style="display:none;"></div>
                    <div id="e-emptyState" class="empty-state" data-i18n="exam_topic_placeholder">{{ t('exam_topic_placeholder') }}</div>

                    <div id="e-examActions" style="display:none; margin-top:15px; gap:8px;">
                        <button class="btn-learning btn-learning-secondary" onclick="ExamModule.exportPaper()" style="width:auto; margin:0;">
                            <span data-i18n="export_paper">{{ t('export_paper') }}</span>
                        </button>
                        <button class="btn-learning btn-learning-secondary" onclick="ExamModule.exportAnswerKey()" style="width:auto; margin:0;">
                            <span data-i18n="export_answer_key">{{ t('export_answer_key') }}</span>
                        </button>
                        <button class="btn-learning btn-learning-secondary" onclick="ExamModule.copyExam()" style="width:auto; margin:0;">
                            <span data-i18n="copy_report">{{ t('copy_report') }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="toast" id="toast"></div>
    
    <!-- Server-side config injection for pure JS files -->
    <script>
        window.SERVER_CONFIG = {
            lang: '{{ lang }}',
            translations: {{ translations_json|safe }},
            ollamaUrl: '{{ config.ollama_url }}',
            proxyMode: '{{ config.proxy_mode }}',
            proxyHttp: '{{ config.proxy_http }}',
            proxyHttps: '{{ config.proxy_https }}'
        };
    </script>
    
    <!-- Application JavaScript (load order matters) -->
    <script src="{{ url_for('static', filename='js/i18n.js') }}"></script>
    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
    <script src="{{ url_for('static', filename='js/markdown.js') }}"></script>
    <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
    <script src="{{ url_for('static', filename='js/terminal.js') }}"></script>
    <script src="{{ url_for('static', filename='js/docs.js') }}"></script>
    <script src="{{ url_for('static', filename='js/gallery.js') }}"></script>
    <script src="{{ url_for('static', filename='js/settings.js') }}"></script>
    <!-- Learning modules -->
    <script src="{{ url_for('static', filename='js/learning-common.js') }}"></script>
    <script src="{{ url_for('static', filename='js/question.js') }}"></script>
    <script src="{{ url_for('static', filename='js/guide.js') }}"></script>
    <script src="{{ url_for('static', filename='js/research.js') }}"></script>
    <script src="{{ url_for('static', filename='js/lecture.js') }}"></script>
    <script src="{{ url_for('static', filename='js/exam.js') }}"></script>
</body>
</html>
