Front-end implementation

app.py

@@ -101,6 +101,8 @@ app = FastAPI(
     openapi_tags=tags_metadata
 )
 
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
@@ -118,6 +120,10 @@ valid_3gpp_spec_format = re.compile(r'^\d{2}\.\d{3}(?:-\d+)?')
 valid_etsi_doc_format = re.compile(r'^(?:SET|SCP|SETTEC|SETREQ|SCPTEC|SCPREQ)\(\d+\)\d+(?:r\d+)?', flags=re.IGNORECASE)
 valid_etsi_spec_format = re.compile(r'^\d{3} \d{3}(?:-\d+)?')
 
+@app.get("/", tags=["Misc"], summary="Returns index.html file")
+def frontend():
+    return FileResponse(os.path.join('templates', 'index.html'))
+
 @app.post("/find/single", response_model=DocResponse, tags=["Document Retrieval"], summary="Retrieve a single document by ID", responses={
              200: {
                  "description": "Document found successfully",
@@ -231,7 +237,7 @@ def search_specifications(request: KeywordRequest):
     source = request.source
     spec_metadatas = spec_metadatas_3gpp if source == "3GPP" else spec_metadatas_etsi if source == "ETSI" else spec_metadatas_3gpp + spec_metadatas_etsi
     spec_type = request.spec_type
-    keywords = [string.lower() if boolSensitiveCase else string for string in request.keywords.split(",")]
+    keywords = [string.lower() if not boolSensitiveCase else string for string in request.keywords.split(",")]
     print(keywords)
     unique_specs = set()
     results = []
@@ -250,7 +256,7 @@ def search_specifications(request: KeywordRequest):
         
         if request.mode == "and":
             string = f"{spec['id']}+-+{spec['title']}+-+{spec['type']}+-+{spec['version']}"
-            if all(keyword in (string.lower() if boolSensitiveCase else string) for keyword in keywords):
+            if all(keyword in (string.lower() if not boolSensitiveCase else string) for keyword in keywords):
                 valid = True
             if search_mode == "deep":
                 if docValid:
@@ -258,12 +264,12 @@ def search_specifications(request: KeywordRequest):
                         section_title = doc[x]
                         section_content = doc[x+1]
                         if "reference" not in section_title.lower() and "void" not in section_title.lower() and "annex" not in section_content.lower():
-                            if all(keyword in (section_content.lower() if boolSensitiveCase else section_content) for keyword in keywords):
+                            if all(keyword in (section_content.lower() if not boolSensitiveCase else section_content) for keyword in keywords):
                                 valid = True
                                 contents.append({section_title: section_content})
         elif request.mode == "or":
             string = f"{spec['id']}+-+{spec['title']}+-+{spec['type']}+-+{spec['version']}"
-            if any(keyword in (string.lower() if boolSensitiveCase else string) for keyword in keywords):
+            if any(keyword in (string.lower() if not boolSensitiveCase else string) for keyword in keywords):
                 valid = True
             if search_mode == "deep":
                 if docValid:
@@ -271,7 +277,7 @@ def search_specifications(request: KeywordRequest):
                         section_title = doc[x]
                         section_content = doc[x+1]
                         if "reference" not in section_title.lower() and "void" not in section_title.lower() and "annex" not in section_content.lower():
-                            if any(keyword in (section_content.lower() if boolSensitiveCase else section_content) for keyword in keywords):
+                            if any(keyword in (section_content.lower() if not boolSensitiveCase else section_content) for keyword in keywords):
                                 valid = True
                                 contents.append({section_title: section_content})
         if valid:

static/script.js

@@ -0,0 +1,446 @@
+
+// Global application state
+let currentResults = [];
+let currentMode = 'single';
+
+// Initialization
+document.addEventListener('DOMContentLoaded', function() {
+    initializeApp();
+});
+
+function initializeApp() {
+    setupTabHandlers();
+    setupKeyboardHandlers();
+    updateHeaderStats('Ready');
+}
+
+// Tab management
+function setupTabHandlers() {
+    document.querySelectorAll('.tab-button').forEach(button => {
+        button.addEventListener('click', function() {
+            const mode = this.dataset.mode;
+            switchMode(mode);
+        });
+    });
+}
+
+function switchMode(mode) {
+    currentMode = mode;
+    
+    // Update tabs
+    document.querySelectorAll('.tab-button').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
+    
+    // Update forms
+    document.querySelectorAll('.search-form').forEach(form => {
+        form.classList.remove('active');
+    });
+    document.getElementById(`${mode}-form`).classList.add('active');
+    
+    // Reset results
+    hideResults();
+}
+
+// Keyboard shortcuts management
+function setupKeyboardHandlers() {
+    document.getElementById('doc-id').addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') searchSingle();
+    });
+    
+    document.getElementById('keywords').addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') searchKeyword();
+    });
+    
+    document.getElementById('bm25-keywords').addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') searchBM25();
+    });
+}
+
+// Search functions
+async function searchSingle() {
+    const docId = document.getElementById('doc-id').value.trim();
+    
+    if (!docId) {
+        showError('Please enter a document ID');
+        return;
+    }
+    
+    showLoading();
+    updateHeaderStats('Searching...');
+    
+    try {
+        const response = await fetch(`/find/single`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ doc_id: docId })
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            displaySingleResult(data);
+            updateHeaderStats(`Found in ${data.search_time.toFixed(3)}s`);
+        } else {
+            showError(data.detail);
+            updateHeaderStats('Error');
+        }
+    } catch (error) {
+        showError('Error connecting to server');
+        updateHeaderStats('Error');
+        console.error('Error:', error);
+    } finally {
+        hideLoading();
+    }
+}
+
+async function searchBatch() {
+    const batchText = document.getElementById('batch-ids').value.trim();
+    
+    if (!batchText) {
+        showError('Please enter at least one document ID');
+        return;
+    }
+    
+    const docIds = batchText.split('\n')
+        .map(id => id.trim())
+        .filter(id => id !== '');
+    
+    if (docIds.length === 0) {
+        showError('Please enter at least one valid document ID');
+        return;
+    }
+    
+    showLoading();
+    updateHeaderStats('Searching...');
+    
+    try {
+        const response = await fetch(`/find/batch`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ doc_ids: docIds })
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            displayBatchResults(data);
+            updateHeaderStats(`${Object.keys(data.results).length} found, ${data.missing.length} missing - ${data.search_time.toFixed(3)}s`);
+        } else {
+            showError(data.detail);
+            updateHeaderStats('Error');
+        }
+    } catch (error) {
+        showError('Error connecting to server');
+        updateHeaderStats('Error');
+        console.error('Error:', error);
+    } finally {
+        hideLoading();
+    }
+}
+
+async function searchKeyword() {
+    const keywords = document.getElementById('keywords').value.trim();
+    const searchMode = document.getElementById('search-mode-filter').value;
+    
+    if (!keywords && searchMode === 'deep') {
+        showError('Please enter at least one keyword in deep search mode');
+        return;
+    }
+    
+    showLoading();
+    updateHeaderStats('Searching...');
+    
+    try {
+        const body = {
+            keywords: keywords,
+            search_mode: searchMode,
+            case_sensitive: document.getElementById('case-sensitive-filter').checked,
+            source: document.getElementById('source-filter').value,
+            mode: document.getElementById('mode-filter').value
+        };
+        
+        const specType = document.getElementById('spec-type-filter').value;
+        if (specType) {
+            body.spec_type = specType;
+        }
+        
+        const response = await fetch(`/search`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body)
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            displaySearchResults(data);
+            updateHeaderStats(`${data.results.length} result(s) - ${data.search_time.toFixed(3)}s`);
+        } else {
+            showError(data.detail);
+            updateHeaderStats('Error');
+        }
+    } catch (error) {
+        showError('Error connecting to server');
+        updateHeaderStats('Error');
+        console.error('Error:', error);
+    } finally {
+        hideLoading();
+    }
+}
+
+async function searchBM25() {
+    const keywords = document.getElementById('bm25-keywords').value.trim();
+    
+    if (!keywords) {
+        showError('Please enter a search query');
+        return;
+    }
+    
+    showLoading();
+    updateHeaderStats('Searching...');
+    
+    try {
+        const body = {
+            keywords: keywords,
+            source: document.getElementById('bm25-source-filter').value,
+            threshold: parseInt(document.getElementById('threshold').value) || 60
+        };
+        
+        const specType = document.getElementById('bm25-spec-type-filter').value;
+        if (specType) {
+            body.spec_type = specType;
+        }
+        
+        const response = await fetch(`/search/bm25`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body)
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            displaySearchResults(data);
+            updateHeaderStats(`${data.results.length} result(s) - ${data.search_time.toFixed(3)}s`);
+        } else {
+            showError(data.detail);
+            updateHeaderStats('Error');
+        }
+    } catch (error) {
+        showError('Error connecting to server');
+        updateHeaderStats('Error');
+        console.error('Error:', error);
+    } finally {
+        hideLoading();
+    }
+}
+
+// Results display functions
+function displaySingleResult(data) {
+    const resultsContent = document.getElementById('results-content');
+    
+    resultsContent.innerHTML = `
+        <div class="result-item">
+            <div class="result-header">
+                <div class="result-id">${data.doc_id}</div>
+                <div class="result-status status-found">Found</div>
+            </div>
+            <div class="result-details">
+                ${data.version ? `<div class="result-detail"><strong>Version:</strong> ${data.version}</div>` : ''}
+                ${data.scope ? `<div class="result-detail"><strong>Scope:</strong> ${data.scope}</div>` : ''}
+                <div class="result-detail result-url">
+                    <strong>URL:</strong> <a href="${data.url}" target="_blank">${data.url}</a>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    showResults();
+}
+
+function displayBatchResults(data) {
+    const resultsContent = document.getElementById('results-content');
+    let html = '';
+    
+    // Found results
+    Object.entries(data.results).forEach(([docId, url]) => {
+        html += `
+            <div class="result-item">
+                <div class="result-header">
+                    <div class="result-id">${docId}</div>
+                    <div class="result-status status-found">Found</div>
+                </div>
+                <div class="result-details">
+                    <div class="result-detail result-url">
+                        <strong>URL:</strong> <a href="${url}" target="_blank">${url}</a>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+    
+    // Missing documents
+    data.missing.forEach(docId => {
+        html += `
+            <div class="result-item">
+                <div class="result-header">
+                    <div class="result-id">${docId}</div>
+                    <div class="result-status status-missing">Not Found</div>
+                </div>
+                <div class="result-details">
+                    <div class="result-detail">Document not found or not indexed</div>
+                </div>
+            </div>
+        `;
+    });
+    
+    resultsContent.innerHTML = html;
+    showResults();
+}
+
+function displaySearchResults(data) {
+    const resultsContent = document.getElementById('results-content');
+    currentResults = data.results;
+    
+    let html = '';
+    
+    data.results.forEach((spec, index) => {
+        const hasContent = spec.contains && Object.keys(spec.contains).length > 0;
+        
+        html += `
+            <div class="result-item">
+                <div class="result-header">
+                    <div class="result-id">${spec.id}</div>
+                    <div class="result-status status-found">${spec.type || 'Specification'}</div>
+                </div>
+                <div class="result-details">
+                    <div class="result-detail"><strong>Title:</strong> ${spec.title}</div>
+                    ${spec.version ? `<div class="result-detail"><strong>Version:</strong> ${spec.version}</div>` : ''}
+                    ${spec.working_group ? `<div class="result-detail"><strong>Working Group:</strong> ${spec.working_group}</div>` : ''}
+                    ${spec.type ? `<div class="result-detail"><strong>Type:</strong> ${spec.type}</div>` : ''}
+                    ${spec.scope ? `<div class="result-detail"><strong>Scope:</strong> ${spec.scope}</div>` : ''}
+                    ${hasContent ? `<button class="view-content-btn" onclick="viewContent(${index})">View Content</button>` : ''}
+                </div>
+            </div>
+        `;
+    });
+    
+    resultsContent.innerHTML = html;
+    showResults();
+}
+
+// Content display functions
+function viewContent(index) {
+    const spec = currentResults[index];
+    
+    if (!spec.contains) return;
+    
+    document.getElementById('content-title').textContent = `${spec.id} - ${spec.title}`;
+    
+    const contentSections = document.getElementById('content-sections');
+    let html = '';
+    
+    Object.entries(spec.contains).forEach(([sectionTitle, content]) => {
+        html += `
+            <div class="content-section">
+                <h3>${sectionTitle}</h3>
+                <p>${content}</p>
+                <button class="copy-section-btn" onclick="copyText('${content.replace(/'/g, "\\'")}')">
+                    Copy this section
+                </button>
+            </div>
+        `;
+    });
+    
+    contentSections.innerHTML = html;
+    showContentPage();
+}
+
+function closeContentPage() {
+    hideContentPage();
+}
+
+function copyAllContent() {
+    const sections = document.querySelectorAll('.content-section p');
+    const allText = Array.from(sections).map(p => p.textContent).join('\n\n');
+    copyText(allText);
+}
+
+function copyText(text) {
+    navigator.clipboard.writeText(text).then(() => {
+        showSuccess('Text copied to clipboard');
+    }).catch(() => {
+        showError('Error copying text');
+    });
+}
+
+// Interface utilities
+function showLoading() {
+    document.getElementById('loading-container').style.display = 'flex';
+    hideResults();
+    hideError();
+}
+
+function hideLoading() {
+    document.getElementById('loading-container').style.display = 'none';
+}
+
+function showResults() {
+    document.getElementById('results-container').style.display = 'block';
+    hideError();
+}
+
+function hideResults() {
+    document.getElementById('results-container').style.display = 'none';
+}
+
+function showContentPage() {
+    document.getElementById('content-page').classList.add('active');
+}
+
+function hideContentPage() {
+    document.getElementById('content-page').classList.remove('active');
+}
+
+function showError(message) {
+    hideError();
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'error-message';
+    errorDiv.textContent = message;
+    document.querySelector('.search-container').appendChild(errorDiv);
+    
+    setTimeout(() => {
+        hideError();
+    }, 5000);
+}
+
+function showSuccess(message) {
+    hideError();
+    const successDiv = document.createElement('div');
+    successDiv.className = 'success-message';
+    successDiv.textContent = message;
+    document.querySelector('.search-container').appendChild(successDiv);
+    
+    setTimeout(() => {
+        hideError();
+    }, 3000);
+}
+
+function hideError() {
+    const existingMessages = document.querySelectorAll('.error-message, .success-message');
+    existingMessages.forEach(msg => msg.remove());
+}
+
+function updateHeaderStats(text) {
+    document.getElementById('header-stats').innerHTML = `<span class="stat-item">${text}</span>`;
+}

static/style.css

@@ -0,0 +1,536 @@
+/* Dark Theme Variables */
+:root {
+    --bg-primary: #0d1117;
+    --bg-secondary: #161b22;
+    --bg-tertiary: #21262d;
+    --bg-accent: #30363d;
+    --text-primary: #e6edf3;
+    --text-secondary: #7d8590;
+    --text-accent: #58a6ff;
+    --border-color: #30363d;
+    --border-accent: #58a6ff;
+    --success-color: #238636;
+    --warning-color: #d29922;
+    --error-color: #da3633;
+    --shadow: rgba(0, 0, 0, 0.3);
+}
+
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+.app-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+.header {
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.header-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-accent);
+}
+
+.header-stats {
+    display: flex;
+    gap: 1rem;
+}
+
+.stat-item {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    width: 100%;
+}
+
+/* Search Tabs */
+.search-tabs {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 2rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.tab-button {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    padding: 0.75rem 1.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    border-bottom: 2px solid transparent;
+}
+
+.tab-button.active {
+    color: var(--text-accent);
+    border-bottom-color: var(--border-accent);
+}
+
+.tab-button:hover {
+    color: var(--text-primary);
+}
+
+/* Search Container */
+.search-container {
+    background-color: var(--bg-secondary);
+    border-radius: 0.75rem;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    border: 1px solid var(--border-color);
+}
+
+.search-form {
+    display: none;
+}
+
+.search-form.active {
+    display: block;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.input-group {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.input-group input {
+    flex: 1;
+}
+
+input[type="text"],
+input[type="number"],
+textarea,
+select {
+    background-color: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    transition: border-color 0.2s;
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+textarea:focus,
+select:focus {
+    outline: none;
+    border-color: var(--border-accent);
+    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
+}
+
+textarea {
+    resize: vertical;
+    min-height: 120px;
+}
+
+/* Filters */
+.filters-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    padding: 1.5rem;
+    background-color: var(--bg-tertiary);
+    border-radius: 0.5rem;
+    border: 1px solid var(--border-color);
+}
+
+.filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.filter-group label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+}
+
+.checkbox-group {
+    display: flex;
+    align-items: center;
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+}
+
+.checkbox-label input[type="checkbox"] {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--text-accent);
+}
+
+/* Buttons */
+.btn {
+    background-color: var(--text-accent);
+    color: var(--bg-primary);
+    border: none;
+    border-radius: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn:hover {
+    background-color: #4493f8;
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background-color: var(--bg-accent);
+    color: var(--text-primary);
+}
+
+.btn-secondary:hover {
+    background-color: #484f58;
+}
+
+.btn-outline {
+    background-color: transparent;
+    color: var(--text-accent);
+    border: 1px solid var(--border-accent);
+}
+
+.btn-outline:hover {
+    background-color: var(--text-accent);
+    color: var(--bg-primary);
+}
+
+/* Results Container */
+.results-container {
+    background-color: var(--bg-secondary);
+    border-radius: 0.75rem;
+    padding: 2rem;
+    border: 1px solid var(--border-color);
+    display: none;
+}
+
+.results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.results-stats {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+}
+
+.results-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.result-item {
+    background-color: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    transition: all 0.2s;
+}
+
+.result-item:hover {
+    border-color: var(--border-accent);
+    transform: translateY(-2px);
+}
+
+.result-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.result-id {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-accent);
+}
+
+.result-status {
+    padding: 0.25rem 0.75rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.status-found {
+    background-color: rgba(35, 134, 54, 0.2);
+    color: var(--success-color);
+}
+
+.status-missing {
+    background-color: rgba(218, 54, 51, 0.2);
+    color: var(--error-color);
+}
+
+.result-details {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.result-detail {
+    font-size: 0.875rem;
+}
+
+.result-detail strong {
+    color: var(--text-primary);
+}
+
+.result-url {
+    word-break: break-all;
+}
+
+.result-url a {
+    color: var(--text-accent);
+    text-decoration: none;
+}
+
+.result-url a:hover {
+    text-decoration: underline;
+}
+
+.view-content-btn {
+    background-color: var(--bg-accent);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.view-content-btn:hover {
+    background-color: var(--text-accent);
+    color: var(--bg-primary);
+}
+
+/* Loading */
+.loading-container {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    color: var(--text-secondary);
+}
+
+.spinner {
+    width: 2rem;
+    height: 2rem;
+    border: 2px solid var(--border-color);
+    border-top: 2px solid var(--text-accent);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Content Page */
+.content-page {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--bg-primary);
+    z-index: 2000;
+    overflow-y: auto;
+    display: none;
+}
+
+.content-page.active {
+    display: block;
+}
+
+.content-header {
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.content-sections {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.content-section {
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.content-section h3 {
+    color: var(--text-accent);
+    margin-bottom: 1rem;
+    font-size: 1.125rem;
+}
+
+.content-section p {
+    color: var(--text-primary);
+    line-height: 1.7;
+    margin-bottom: 1rem;
+}
+
+.copy-section-btn {
+    background-color: var(--bg-accent);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.copy-section-btn:hover {
+    background-color: var(--text-accent);
+    color: var(--bg-primary);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .header-content {
+        padding: 0 1rem;
+    }
+
+    .main-content {
+        padding: 1rem;
+    }
+
+    .search-container {
+        padding: 1.5rem;
+    }
+
+    .filters-container {
+        grid-template-columns: 1fr;
+    }
+
+    .input-group {
+        flex-direction: column;
+    }
+
+    .results-header {
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: flex-start;
+    }
+
+    .content-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+
+    .content-sections {
+        padding: 1rem;
+    }
+
+    .search-tabs {
+        flex-wrap: wrap;
+    }
+
+    .tab-button {
+        flex: 1;
+        min-width: 120px;
+    }
+}
+
+/* Error States */
+.error-message {
+    background-color: rgba(218, 54, 51, 0.1);
+    color: var(--error-color);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(218, 54, 51, 0.2);
+    margin-bottom: 1rem;
+}
+
+.success-message {
+    background-color: rgba(35, 134, 54, 0.1);
+    color: var(--success-color);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(35, 134, 54, 0.2);
+    margin-bottom: 1rem;
+}

templates/index.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3GPP & ETSI Document Finder</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-content">
+                <h1 class="logo">3GPP & ETSI Document Finder</h1>
+                <div class="header-stats" id="header-stats">
+                    <span class="stat-item">Ready</span>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Search Tabs -->
+            <div class="search-tabs">
+                <button class="tab-button active" data-mode="single">Single Document</button>
+                <button class="tab-button" data-mode="batch">Batch Search</button>
+                <button class="tab-button" data-mode="keyword">Keyword Search</button>
+                <button class="tab-button" data-mode="bm25">BM25 Search</button>
+            </div>
+
+            <!-- Search Forms -->
+            <div class="search-container">
+                <!-- Single Document Search -->
+                <div class="search-form active" id="single-form">
+                    <div class="form-group">
+                        <label for="doc-id">Document ID</label>
+                        <div class="input-group">
+                            <input type="text" id="doc-id" placeholder="e.g., 23.401, S1-123456, SET(24)123">
+                            <button class="btn btn-primary" onclick="searchSingle()">Search</button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Batch Search -->
+                <div class="search-form" id="batch-form">
+                    <div class="form-group">
+                        <label for="batch-ids">List of IDs (one per line)</label>
+                        <textarea id="batch-ids" placeholder="23.401&#10;S1-123456&#10;103 666" rows="6"></textarea>
+                        <button class="btn btn-primary" onclick="searchBatch()">Search Batch</button>
+                    </div>
+                </div>
+
+                <!-- Keyword Search -->
+                <div class="search-form" id="keyword-form">
+                    <div class="form-group">
+                        <label for="keywords">Keywords</label>
+                        <input type="text" id="keywords" placeholder="e.g., 5G NR,authentication">
+                    </div>
+                    
+                    <div class="filters-container">
+                        <div class="filter-group">
+                            <label>Source</label>
+                            <select id="source-filter">
+                                <option value="all">All Sources</option>
+                                <option value="3GPP">3GPP Only</option>
+                                <option value="ETSI">ETSI Only</option>
+                            </select>
+                        </div>
+                        
+                        <div class="filter-group">
+                            <label>Search Mode</label>
+                            <select id="search-mode-filter">
+                                <option value="quick">Quick Search</option>
+                                <option value="deep">Deep Search</option>
+                            </select>
+                        </div>
+                        
+                        <div class="filter-group">
+                            <label>Logic</label>
+                            <select id="mode-filter">
+                                <option value="and">AND (all words)</option>
+                                <option value="or">OR (any word)</option>
+                            </select>
+                        </div>
+                        
+                        <div class="filter-group">
+                            <label>Specification Type</label>
+                            <select id="spec-type-filter">
+                                <option value="">All Types</option>
+                                <option value="TS">TS (Technical Specification)</option>
+                                <option value="TR">TR (Technical Report)</option>
+                            </select>
+                        </div>
+                        
+                        <div class="checkbox-group">
+                            <label class="checkbox-label">
+                                <input type="checkbox" id="case-sensitive-filter">
+                                <span class="checkmark"></span>
+                                Case Sensitive
+                            </label>
+                        </div>
+                    </div>
+                    
+                    <button class="btn btn-primary" onclick="searchKeyword()">Search</button>
+                </div>
+
+                <!-- BM25 Search -->
+                <div class="search-form" id="bm25-form">
+                    <div class="form-group">
+                        <label for="bm25-keywords">Search Query</label>
+                        <input type="text" id="bm25-keywords" placeholder="e.g., 5G authentication procedures">
+                    </div>
+                    
+                    <div class="filters-container">
+                        <div class="filter-group">
+                            <label>Source</label>
+                            <select id="bm25-source-filter">
+                                <option value="all">All Sources</option>
+                                <option value="3GPP">3GPP Only</option>
+                                <option value="ETSI">ETSI Only</option>
+                            </select>
+                        </div>
+                        
+                        <div class="filter-group">
+                            <label>Specification Type</label>
+                            <select id="bm25-spec-type-filter">
+                                <option value="">All Types</option>
+                                <option value="TS">TS (Technical Specification)</option>
+                                <option value="TR">TR (Technical Report)</option>
+                            </select>
+                        </div>
+                        
+                        <div class="filter-group">
+                            <label>Relevance Threshold (%)</label>
+                            <input type="number" id="threshold" min="0" max="100" value="60">
+                        </div>
+                    </div>
+                    
+                    <button class="btn btn-primary" onclick="searchBM25()">Search</button>
+                </div>
+            </div>
+
+            <!-- Results Container -->
+            <div class="results-container" id="results-container">
+                <div class="results-header">
+                    <h2>Search Results</h2>
+                    <div class="results-stats" id="results-stats"></div>
+                </div>
+                <div class="results-content" id="results-content"></div>
+            </div>
+
+            <!-- Loading Indicator -->
+            <div class="loading-container" id="loading-container">
+                <div class="spinner"></div>
+                <p>Searching...</p>
+            </div>
+        </main>
+
+        <!-- Content Detail Page -->
+        <div class="content-page" id="content-page">
+            <div class="content-header">
+                <button class="btn btn-secondary" onclick="closeContentPage()">← Back to Results</button>
+                <h2 id="content-title"></h2>
+                <button class="btn btn-outline" onclick="copyAllContent()">Copy All</button>
+            </div>
+            <div class="content-sections" id="content-sections"></div>
+        </div>
+    </div>
+
+    <script src="/static/script.js"></script>
+</body>
+</html>