Deploy FastAPI server + html page

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --trusted-host pypi.org --trusted-host pypi.python.org --trusted-host files.pythonhosted.org --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,196 @@
+import requests
+from bs4 import BeautifulSoup
+import json
+import os
+import time
+import warnings
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from typing import Dict, List, Optional
+import uvicorn
+
+warnings.filterwarnings("ignore")
+
+app = FastAPI(title="3GPP Document Finder API", 
+              description="API to find 3GPP documents based on TSG document IDs")
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+origins = [
+    "*",
+]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class DocRequest(BaseModel):
+    tsg_doc_id: str
+
+class DocResponse(BaseModel):
+    tsg_doc_id: str
+    url: str
+    search_time: float
+
+class BatchDocRequest(BaseModel):
+    tsg_doc_ids: List[str]
+
+class BatchDocResponse(BaseModel):
+    results: Dict[str, str]
+    missing: List[str]
+    search_time: float
+
+class TsgDocFinder:
+    def __init__(self):
+        self.main_ftp_url = "https://www.3gpp.org/ftp"
+        self.indexer_file = "indexed_docs.json"
+        self.indexer = self.load_indexer()
+        
+    def load_indexer(self):
+        """Load existing index if available"""
+        if os.path.exists(self.indexer_file):
+            with open(self.indexer_file, "r", encoding="utf-8") as f:
+                return json.load(f)
+        return {}
+    
+    def save_indexer(self):
+        """Save the updated index"""
+        with open(self.indexer_file, "w", encoding="utf-8") as f:
+            json.dump(self.indexer, f, indent=4, ensure_ascii=False)
+
+    def get_workgroup(self, tsg_doc):
+        main_tsg = "tsg_ct" if tsg_doc[0] == "C" else "tsg_sa" if tsg_doc[0] == "S" else None
+        if main_tsg is None:
+            return None, None, None
+        workgroup = f"WG{int(tsg_doc[1])}" if tsg_doc[1].isnumeric() else main_tsg.upper()
+        return main_tsg, workgroup, tsg_doc
+    
+    def find_workgroup_url(self, main_tsg, workgroup):
+        """Find the URL for the specific workgroup"""
+        response = requests.get(f"{self.main_ftp_url}/{main_tsg}", verify=False)
+        soup = BeautifulSoup(response.text, 'html.parser')
+        
+        for item in soup.find_all("tr"):
+            link = item.find("a")
+            if link and workgroup in link.get_text():
+                return f"{self.main_ftp_url}/{main_tsg}/{link.get_text()}"
+                
+        return f"{self.main_ftp_url}/{main_tsg}/{workgroup}"
+
+    def get_docs_from_url(self, url):
+        """Get list of documents/directories from a URL"""
+        try:
+            response = requests.get(url, verify=False, timeout=10)
+            soup = BeautifulSoup(response.text, "html.parser")
+            return [item.get_text() for item in soup.select("tr td a")]
+        except Exception as e:
+            print(f"Error accessing {url}: {e}")
+            return []
+    
+    def search_document(self, tsg_doc_id):
+        """Search for a specific document by its ID"""
+        original_id = tsg_doc_id
+        
+        # Check if already indexed
+        if original_id in self.indexer:
+            return self.indexer[original_id]
+        
+        # Parse the document ID
+        main_tsg, workgroup, tsg_doc = self.get_workgroup(tsg_doc_id)
+        if not main_tsg:
+            return f"Could not parse document ID: {tsg_doc_id}"
+        
+        print(f"Searching for {original_id} (parsed as {tsg_doc}) in {main_tsg}/{workgroup}...")
+        
+        # Find the workgroup URL
+        wg_url = self.find_workgroup_url(main_tsg, workgroup)
+        if not wg_url:
+            return f"Could not find workgroup for {tsg_doc_id}"
+        
+        # Search in the workgroup directories
+        meeting_folders = self.get_docs_from_url(wg_url)
+        
+        for folder in meeting_folders:
+            meeting_url = f"{wg_url}/{folder}"
+            meeting_contents = self.get_docs_from_url(meeting_url)
+            
+            if "Docs" in meeting_contents:
+                docs_url = f"{meeting_url}/Docs"
+                print(f"Checking {docs_url}...")
+                files = self.get_docs_from_url(docs_url)
+                
+                # Check for the document in the main Docs folder
+                for file in files:
+                    if tsg_doc in file.lower() or original_id in file:
+                        doc_url = f"{docs_url}/{file}"
+                        self.indexer[original_id] = doc_url
+                        self.save_indexer()
+                        return doc_url
+                
+                # Check in ZIP subfolder if it exists
+                if "ZIP" in files:
+                    zip_url = f"{docs_url}/ZIP"
+                    print(f"Checking {zip_url}...")
+                    zip_files = self.get_docs_from_url(zip_url)
+                    
+                    for file in zip_files:
+                        if tsg_doc in file.lower() or original_id in file:
+                            doc_url = f"{zip_url}/{file}"
+                            self.indexer[original_id] = doc_url
+                            self.save_indexer()
+                            return doc_url
+        
+        return f"Document {tsg_doc_id} not found"
+
+# Create a global instance of the finder
+finder = TsgDocFinder()
+
+@app.get("/")
+async def main_menu():
+    return FileResponse(os.path.join("templates", "index.html"))
+
+@app.post("/find", response_model=DocResponse)
+def find_document(request: DocRequest):
+    start_time = time.time()
+    
+    result = finder.search_document(request.tsg_doc_id)
+    
+    if "not found" not in result and "Could not" not in result:
+        return DocResponse(
+            tsg_doc_id=request.tsg_doc_id,
+            url=result,
+            search_time=time.time() - start_time
+        )
+    else:
+        raise HTTPException(status_code=404, detail=result)
+
+@app.post("/batch", response_model=BatchDocResponse)
+def find_documents_batch(request: BatchDocRequest):
+    start_time = time.time()
+    
+    results = {}
+    missing = []
+    
+    for doc_id in request.tsg_doc_ids:
+        result = finder.search_document(doc_id)
+        if "not found" not in result and "Could not" not in result:
+            results[doc_id] = result
+        else:
+            missing.append(doc_id)
+    
+    return BatchDocResponse(
+        results=results,
+        missing=missing,
+        search_time=time.time() - start_time
+    )
+
+@app.get("/indexed", response_model=List[str])
+def get_indexed_documents():
+    return list(finder.indexer.keys())

indexed_docs.json

@@ -0,0 +1,8 @@
+{
+    "S4-110084": "https://www.3gpp.org/ftp/tsg_sa/WG4_CODEC/TSGS4_62/Docs/S4-110084.zip",
+    "SP-000182": "https://www.3gpp.org/ftp/tsg_sa/TSG_SA/TSGS_08/Docs/ZIP/SP-000182.zip",
+    "SP-000183": "https://www.3gpp.org/ftp/tsg_sa/TSG_SA/TSGS_08/Docs/ZIP/SP-000183.zip",
+    "SP-000184": "https://www.3gpp.org/ftp/tsg_sa/TSG_SA/TSGS_08/Docs/ZIP/SP-000184.zip",
+    "SP-000185": "https://www.3gpp.org/ftp/tsg_sa/TSG_SA/TSGS_08/Docs/ZIP/SP-000185.zip",
+    "SP-090017": "https://www.3gpp.org/ftp/tsg_sa/TSG_SA/TSGS_43/Docs/SP-090017.zip"
+}

requirements.txt

@@ -0,0 +1,5 @@
+fastapi
+uvicorn[standard]
+requests
+beautifulsoup4
+pydantic

static/script.js

@@ -0,0 +1,262 @@
+// DOM elements
+const singleModeBtn = document.getElementById('single-mode-btn');
+const batchModeBtn = document.getElementById('batch-mode-btn');
+const singleInput = document.querySelector('.single-input');
+const batchInput = document.querySelector('.batch-input');
+const docIdInput = document.getElementById('doc-id');
+const batchIdsInput = document.getElementById('batch-ids');
+const searchBtn = document.getElementById('search-btn');
+const batchSearchBtn = document.getElementById('batch-search-btn');
+const loader = document.getElementById('loader');
+const resultsContainer = document.getElementById('results-container');
+const resultsList = document.getElementById('results-list');
+const resultsStats = document.getElementById('results-stats');
+const errorMessage = document.getElementById('error-message');
+const indexedDocs = document.getElementById('indexed-docs');
+const indexedCount = document.getElementById('indexed-count');
+const indexedList = document.getElementById('indexed-list');
+
+// Search mode toggle
+singleModeBtn.addEventListener('click', () => {
+    singleModeBtn.classList.add('active');
+    batchModeBtn.classList.remove('active');
+    singleInput.style.display = 'block';
+    batchInput.style.display = 'none';
+});
+
+batchModeBtn.addEventListener('click', () => {
+    batchModeBtn.classList.add('active');
+    singleModeBtn.classList.remove('active');
+    batchInput.style.display = 'block';
+    singleInput.style.display = 'none';
+});
+
+// Single document search
+searchBtn.addEventListener('click', async () => {
+    const docId = docIdInput.value.trim();
+    if (!docId) {
+        showError('Please enter a document ID');
+        return;
+    }
+
+    showLoader();
+    hideError();
+    
+    try {
+        const response = await fetch(`/find`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ tsg_doc_id: docId })
+        });
+
+        const data = await response.json();
+        
+        if (response.ok) {
+            displaySingleResult(data);
+            loadIndexedDocuments(); // Refresh indexed docs
+        } else {
+            displaySingleNotFound(docId, data.detail);
+        }
+    } catch (error) {
+        showError('Error connecting to the server. Please check if the API is running.');
+        console.error('Error:', error);
+    } finally {
+        hideLoader();
+    }
+});
+
+// Batch document search
+batchSearchBtn.addEventListener('click', async () => {
+    const batchText = batchIdsInput.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;
+    }
+
+    showLoader();
+    hideError();
+    
+    try {
+        const response = await fetch(`/batch`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ tsg_doc_ids: docIds })
+        });
+
+        const data = await response.json();
+        
+        if (response.ok) {
+            displayBatchResults(data);
+            loadIndexedDocuments(); // Refresh indexed docs
+        } else {
+            showError('Error processing batch request');
+        }
+    } catch (error) {
+        showError('Error connecting to the server. Please check if the API is running.');
+        console.error('Error:', error);
+    } finally {
+        hideLoader();
+    }
+});
+
+// Display single result
+function displaySingleResult(data) {
+    resultsList.innerHTML = '';
+    
+    const resultItem = document.createElement('div');
+    resultItem.className = 'result-item';
+    resultItem.innerHTML = `
+        <div class="result-header">
+            <div class="result-id">${data.tsg_doc_id}</div>
+            <div class="result-status status-found">Found</div>
+        </div>
+        <div class="result-url">
+            <a href="${data.url}" target="_blank">${data.url}</a>
+        </div>
+    `;
+    
+    resultsList.appendChild(resultItem);
+    resultsStats.textContent = `Found in ${data.search_time.toFixed(2)} seconds`;
+    resultsContainer.style.display = 'block';
+}
+
+// Display single not found result
+function displaySingleNotFound(docId, message) {
+    resultsList.innerHTML = '';
+    
+    const resultItem = document.createElement('div');
+    resultItem.className = 'result-item';
+    resultItem.innerHTML = `
+        <div class="result-header">
+            <div class="result-id">${docId}</div>
+            <div class="result-status status-not-found">Not Found</div>
+        </div>
+        <div>${message}</div>
+    `;
+    
+    resultsList.appendChild(resultItem);
+    resultsStats.textContent = 'Document not found';
+    resultsContainer.style.display = 'block';
+}
+
+// Display batch results
+function displayBatchResults(data) {
+    resultsList.innerHTML = '';
+    
+    // Found documents
+    Object.entries(data.results).forEach(([docId, url]) => {
+        const resultItem = document.createElement('div');
+        resultItem.className = 'result-item';
+        resultItem.innerHTML = `
+            <div class="result-header">
+                <div class="result-id">${docId}</div>
+                <div class="result-status status-found">Found</div>
+            </div>
+            <div class="result-url">
+                <a href="${url}" target="_blank">${url}</a>
+            </div>
+        `;
+        resultsList.appendChild(resultItem);
+    });
+    
+    // Not found documents
+    data.missing.forEach(docId => {
+        const resultItem = document.createElement('div');
+        resultItem.className = 'result-item';
+        resultItem.innerHTML = `
+            <div class="result-header">
+                <div class="result-id">${docId}</div>
+                <div class="result-status status-not-found">Not Found</div>
+            </div>
+        `;
+        resultsList.appendChild(resultItem);
+    });
+    
+    const foundCount = Object.keys(data.results).length;
+    const totalCount = foundCount + data.missing.length;
+    
+    resultsStats.textContent = `Found ${foundCount} of ${totalCount} documents in ${data.search_time.toFixed(2)} seconds`;
+    resultsContainer.style.display = 'block';
+}
+
+// Load indexed documents
+async function loadIndexedDocuments() {
+    try {
+        const response = await fetch(`/indexed`);
+        if (response.ok) {
+            const data = await response.json();
+            displayIndexedDocuments(data);
+        }
+    } catch (error) {
+        console.error('Error loading indexed documents:', error);
+    }
+}
+
+// Display indexed documents
+function displayIndexedDocuments(docIds) {
+    indexedList.innerHTML = '';
+    indexedCount.textContent = `${docIds.length} documents`;
+    
+    if (docIds.length === 0) {
+        const emptyMessage = document.createElement('p');
+        emptyMessage.textContent = 'No documents have been indexed yet.';
+        indexedList.appendChild(emptyMessage);
+        return;
+    }
+    
+    docIds.forEach(docId => {
+        const docItem = document.createElement('div');
+        docItem.className = 'indexed-item';
+        docItem.textContent = docId;
+        docItem.addEventListener('click', () => {
+            docIdInput.value = docId;
+            singleModeBtn.click();
+            searchBtn.click();
+        });
+        indexedList.appendChild(docItem);
+    });
+}
+
+// Show loader
+function showLoader() {
+    loader.style.display = 'block';
+}
+
+// Hide loader
+function hideLoader() {
+    loader.style.display = 'none';
+}
+
+// Show error message
+function showError(message) {
+    errorMessage.textContent = message;
+    errorMessage.style.display = 'block';
+}
+
+// Hide error message
+function hideError() {
+    errorMessage.style.display = 'none';
+}
+
+// Enter key event for single search
+docIdInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+        searchBtn.click();
+    }
+});
+
+// Load indexed documents on page load
+document.addEventListener('DOMContentLoaded', loadIndexedDocuments);

static/style.css

@@ -0,0 +1,381 @@
+:root {
+    --primary-color: #1a73e8;
+    --secondary-color: #f8f9fa;
+    --accent-color: #4285f4;
+    --text-color: #202124;
+    --light-text: #5f6368;
+    --error-color: #ea4335;
+    --success-color: #34a853;
+    --border-color: #dadce0;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+    line-height: 1.6;
+    padding: 0;
+    margin: 0;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+header {
+    background-color: white;
+    box-shadow: 0 2px 10px var(--shadow-color);
+    padding: 20px 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+}
+
+.logo img {
+    height: 40px;
+    margin-right: 10px;
+}
+
+.logo h1 {
+    font-size: 24px;
+    font-weight: 500;
+    color: var(--primary-color);
+}
+
+.search-container {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px var(--shadow-color);
+    padding: 30px;
+    margin-top: 30px;
+}
+
+.search-header {
+    margin-bottom: 20px;
+}
+
+.search-header h2 {
+    font-size: 22px;
+    font-weight: 500;
+    color: var(--text-color);
+    margin-bottom: 10px;
+}
+
+.search-header p {
+    color: var(--light-text);
+    font-size: 16px;
+}
+
+.search-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.input-group label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--light-text);
+}
+
+.input-field {
+    display: flex;
+    gap: 10px;
+}
+
+.input-field input {
+    flex: 1;
+    padding: 12px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s;
+}
+
+.input-field input:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
+}
+
+.btn {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.btn:hover {
+    background-color: var(--accent-color);
+}
+
+.search-mode {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.search-mode button {
+    background: none;
+    border: none;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--light-text);
+    padding: 8px 16px;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.3s;
+}
+
+.search-mode button.active {
+    color: var(--primary-color);
+    border-bottom: 2px solid var(--primary-color);
+}
+
+.batch-input {
+    display: none;
+}
+
+.batch-input textarea {
+    width: 100%;
+    height: 120px;
+    padding: 12px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 16px;
+    font-family: 'Roboto', sans-serif;
+    resize: vertical;
+    outline: none;
+}
+
+.batch-input textarea:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
+}
+
+.batch-input .hint {
+    font-size: 14px;
+    color: var(--light-text);
+    margin-top: 8px;
+}
+
+.results-container {
+    margin-top: 30px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px var(--shadow-color);
+    padding: 30px;
+    display: none;
+}
+
+.results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.results-header h2 {
+    font-size: 22px;
+    font-weight: 500;
+}
+
+.results-stats {
+    color: var(--light-text);
+    font-size: 14px;
+}
+
+.results-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.result-item {
+    padding: 15px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    transition: box-shadow 0.3s;
+}
+
+.result-item:hover {
+    box-shadow: 0 4px 8px var(--shadow-color);
+}
+
+.result-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.result-id {
+    font-weight: 500;
+    font-size: 18px;
+    color: var(--primary-color);
+}
+
+.result-status {
+    font-size: 14px;
+    padding: 4px 12px;
+    border-radius: 12px;
+}
+
+.status-found {
+    background-color: rgba(52, 168, 83, 0.1);
+    color: var(--success-color);
+}
+
+.status-not-found {
+    background-color: rgba(234, 67, 53, 0.1);
+    color: var(--error-color);
+}
+
+.result-url {
+    word-break: break-all;
+    margin-top: 10px;
+}
+
+.result-url a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.result-url a:hover {
+    text-decoration: underline;
+}
+
+.loader {
+    display: none;
+    text-align: center;
+    padding: 20px;
+}
+
+.spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid var(--primary-color);
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.error-message {
+    background-color: rgba(234, 67, 53, 0.1);
+    color: var(--error-color);
+    padding: 15px;
+    border-radius: 4px;
+    margin-top: 20px;
+    display: none;
+}
+
+.indexed-docs {
+    margin-top: 30px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px var(--shadow-color);
+    padding: 30px;
+}
+
+.indexed-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.indexed-header h2 {
+    font-size: 22px;
+    font-weight: 500;
+}
+
+.indexed-count {
+    background-color: var(--primary-color);
+    color: white;
+    font-size: 14px;
+    padding: 4px 12px;
+    border-radius: 12px;
+}
+
+.indexed-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.indexed-item {
+    background-color: var(--secondary-color);
+    padding: 8px 16px;
+    border-radius: 4px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.indexed-item:hover {
+    background-color: rgba(26, 115, 232, 0.1);
+}
+
+footer {
+    text-align: center;
+    padding: 30px 0;
+    margin-top: 50px;
+    color: var(--light-text);
+    font-size: 14px;
+}
+
+@media (max-width: 768px) {
+    .header-content {
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .input-field {
+        flex-direction: column;
+    }
+
+    .search-mode {
+        overflow-x: auto;
+        padding-bottom: 5px;
+    }
+}

templates/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3GPP Document Finder</title>
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
+</head>
+<body>
+    <header>
+        <div class="container header-content">
+            <div class="logo">
+                <img src="https://www.3gpp.org/images/3gpp_logo.svg" alt="3GPP Logo">
+                <h1>3GPP Document Finder</h1>
+            </div>
+        </div>
+    </header>
+
+    <div class="container">
+        <div class="search-container">
+            <div class="search-header">
+                <h2>Find 3GPP Documents</h2>
+                <p>Enter a TSG document ID (e.g., S1-123456, C2-987654) to locate the document in the 3GPP FTP server.</p>
+            </div>
+
+            <div class="search-mode">
+                <button id="single-mode-btn" class="active">Single Document</button>
+                <button id="batch-mode-btn">Batch Search</button>
+            </div>
+
+            <div class="search-form">
+                <div class="input-group single-input">
+                    <label for="doc-id">Document ID</label>
+                    <div class="input-field">
+                        <input type="text" id="doc-id" placeholder="Enter document ID (e.g., S1-123456)">
+                        <button id="search-btn" class="btn">Search</button>
+                    </div>
+                </div>
+
+                <div class="input-group batch-input">
+                    <label for="batch-ids">Document IDs (one per line)</label>
+                    <textarea id="batch-ids" placeholder="Enter document IDs, one per line (e.g., S1-123456, C2-987654)"></textarea>
+                    <div class="hint">Enter one document ID per line</div>
+                    <button id="batch-search-btn" class="btn" style="margin-top: 10px;">Search All</button>
+                </div>
+            </div>
+
+            <div class="error-message" id="error-message"></div>
+
+            <div class="loader" id="loader">
+                <div class="spinner"></div>
+                <p>Searching for documents...</p>
+            </div>
+        </div>
+
+        <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-list" id="results-list"></div>
+        </div>
+
+        <div class="indexed-docs" id="indexed-docs">
+            <div class="indexed-header">
+                <h2>Indexed Documents</h2>
+                <div class="indexed-count" id="indexed-count">0 documents</div>
+            </div>
+            <div class="indexed-list" id="indexed-list"></div>
+        </div>
+    </div>
+
+    <footer>
+        <p>© 2025 3GPP Document Finder | Powered by FastAPI</p>
+    </footer>
+
+    <script src="/static/script.js"></script>
+</body>
+</html>