Create svg html English presentation for this system

# 🎯 HỆ THỐNG XỬ LÝ TÀI LIỆU VỚI KHÔI PHỤC NGỮ CẢNH SECTION

## 📌 TỔNG QUAN HỆ THỐNG

### Mục đích
Hệ thống xử lý và lưu trữ tài liệu markdown với khả năng:
- Tách tài liệu thành các **sections** có cấu trúc
- Chunking thông minh dựa trên token
- **Khôi phục ngữ cảnh đầy đủ** của section gốc khi search
- Tìm kiếm hybrid (Vector + BM25) hiệu suất cao

### Kiến trúc tổng quan
```
┌─────────────────┐
│   FastAPI App   │ ← API endpoints
│   (main.py)     │
└────────┬────────┘
         │
    ┌────▼─────────────────────────────┐
    │   Celery Worker (worker.py)      │
    │   - Xử lý bất đồng bộ            │
    │   - Quản lý job queue            │
    └────┬─────────────────────────────┘
         │
    ┌────▼──────────────────────────────┐
    │  ProcessPipeline                  │
    │  - Điều phối workflow             │
    └────┬──────────────────────────────┘
         │
    ┌────▼──────────────────────────────┐
    │  MarkdownProcessor                │
    │  - TextCleaner (split sections)   │
    │  - RaptorProcessor (chunking)     │
    └────┬──────────────────────────────┘
         │
    ┌────▼──────────────────────────────┐
    │  Storage Layer                    │
    │  ┌──────────────┐ ┌─────────────┐│
    │  │ PostgreSQL   │ │   Milvus    ││
    │  │ (Sections)   │ │  (Vectors)  ││
    │  └──────────────┘ └─────────────┘│
    └───────────────────────────────────┘
```

---

## 🔄 WORKFLOW XỬ LÝ CHI TIẾT

### 1️⃣ Giai đoạn tiếp nhận (API Layer)

**Endpoint**: `POST /index-file/`

```python
# src/api/index_routes.py
async def process_extracted_file(request: MinioFileRequest)
```

**Luồng xử lý**:
1. Nhận request với danh sách file markdown từ SeaweedFS
2. Tạo job ID cho mỗi file
3. Đẩy job vào Celery queue
4. Trả về response ngay lập tức (202 Accepted)

**Input**:
```json
{
  "list_path": [
    {
      "id": "uuid-file-1",
      "path": "extracted/document.md"
    }
  ]
}
```

---

### 2️⃣ Giai đoạn xử lý bất đồng bộ (Worker)

**File**: `worker.py`

**Task**: `process_extracted_file_task`

**Các bước**:
1. **Cập nhật trạng thái**: Publish "processing" status qua Redis
2. **Tải file**: Lấy markdown content từ SeaweedFS
3. **Xử lý nội dung**: Gọi ProcessPipeline
4. **Hoàn thành**: Publish "completed" status

```python
# worker.py (line 147-194)
@celery_app.task(bind=True, name="process_extracted_file_task")
def process_extracted_file_task(self, file_id, bucket_name,
                                 markdown_object_name, original_file_path):
    # 1. Update status
    REDIS_SERVICE.publish_processing_status(file_id, original_file_path)
   
    # 2. Retrieve markdown
    markdown_content = SEAWEEDFS_SERVICE.process_file(bucket_name, output_path)
   
    # 3. Process with pipeline
    result = PROCESS_PIPELINE.process_markdown_text(
        file_id=file_id,
        text=markdown_content,
        document_path=original_file_path
    )
   
    # 4. Publish completion
    REDIS_SERVICE.publish_done_status(file_id, original_file_path)
```

---

### 3️⃣ Giai đoạn xử lý Pipeline

**File**: `src/pipelines/process_pipeline.py`

**Class**: `ProcessPipeline`

**Nhiệm vụ**: Điều phối toàn bộ quá trình xử lý

```python
async def process_markdown_text(self, file_id, text, document_path):
    # Gọi MarkdownProcessor để xử lý
    result = await self.markdown_processor.process_text(
        markdown_text=text,
        file_id=file_id,
        document_path=document_path,
        store_vectors=True,
        use_raptor=True
    )
    return result
```

---

## 🎯 ĐIỂM ĐẶC BIỆT: XỬ LÝ THEO SECTION

### 4️⃣ Giai đoạn tách Section (TextCleaner)

**File**: `src/processors/cleaner.py`

**Class**: `TextCleaner`

#### 🔍 Phân tích cấu trúc tài liệu

**Method chính**: `split_into_sections()`

**Cơ chế hoạt động**:

1. **Nhận diện cấu trúc**:
   - Phát hiện markdown headers (`#`, `##`, `###`, ...)
   - Theo dõi page markers (`[PAGE:1]`, `[PAGE:2]`, ...)
   - Xác định ranh giới giữa các sections

2. **Tạo sections có cấu trúc**:

```python
# src/processors/cleaner.py (line 42-103)
def split_into_sections(self, text, file_id, document_path):
    sections = []
    lines = text.splitlines()
    current_page = 1
   
    # Duyệt từng dòng
    for line in lines:
        # Phát hiện page marker
        if page_match := re.search(self.page_marker_pattern, line):
            current_page = int(page_match.group(1))
            continue
       
        # Phát hiện header
        if header_match := re.match(r'^(#{1,6})\s+(.+)$', line):
            header_level = len(header_match.group(1))
            title = header_match.group(2).strip()
           
            # Thu thập nội dung cho đến header tiếp theo
            content_lines = []
            while i < len(lines):
                next_line = lines[i]
                if is_next_header(next_line, header_level):
                    break
                content_lines.append(next_line)
           
            # Tạo section
            self._create_section(sections, title, content, current_page)
   
    return sections
```

#### 📦 Cấu trúc Section được tạo ra

**Method**: `_create_section()`

```python
# src/processors/cleaner.py (line 105-131)
def _create_section(self, sections, title, content, page):
    section_id = str(uuid.uuid4())  # ← ID duy nhất cho section
    content = title + "\n" + content
   
    sections.append({
        "content": content,  # ← Nội dung đầy đủ của section
        "metadata": {
            "document_id": self.current_document_id,
            "document_path": self.current_document_path,
            "section_id": section_id,  # ← KEY POINT: Section ID
            "page_info": {
                "index": page - 1,
                "total": self.current_total_pages
            },
            "section_content": content  # ← Lưu lại nội dung gốc
        }
    })
```

**Ví dụ section được tạo**:
```json
{
  "content": "## Giới thiệu\nĐây là phần giới thiệu về hệ thống...",
  "metadata": {
    "document_id": "550e8400-e29b-41d4-a716-446655440000",
    "document_path": "input/document.pdf",
    "section_id": "123e4567-e89b-12d3-a456-426614174000",
    "page_info": {
      "index": 0,
      "total": 10
    },
    "section_content": "## Giới thiệu\nĐây là phần giới thiệu..."
  }
}
```

---

### 5️⃣ Giai đoạn Chunking thông minh (RaptorProcessor)

**File**: `src/services/raptor_processor.py`

**Class**: `RaptorProcessor`

#### 🎯 Mục tiêu Chunking

**Vấn đề**: Sections có thể quá dài (vượt quá giới hạn token của embedding model)

**Giải pháp**: Chia nhỏ sections thành chunks, **nhưng vẫn giữ liên kết với section gốc**

#### 📊 Quy trình Chunking

**Method**: `create_knowledge_base()`

```python
# src/services/raptor_processor.py (line 82-157)
async def create_knowledge_base(self, sections):
    # BƯỚC 1: Lưu toàn bộ sections vào PostgreSQL
    for section in sections:
        content = section["content"]
        metadata = section["metadata"]
       
        self.postgres_service.store_section(
            section_id=metadata["section_id"],  # ← Lưu với section_id
            document_id=metadata["document_id"],
            content=content  # ← Nội dung đầy đủ của section
        )
   
    # BƯỚC 2: Chuyển sections thành LangChain Documents
    documents = self._convert_sections_to_documents(sections)
   
    # BƯỚC 3: Chunking thông minh
    all_chunks = []
    for doc in documents:
        token_count = self.count_tokens(doc.page_content)
       
        if token_count <= self.chunk_size:
            # Section đủ nhỏ → giữ nguyên
            all_chunks.append(doc)
        else:
            # Section quá lớn → chia nhỏ
            split_docs = self.text_splitter.split_documents([doc])
            all_chunks.extend(split_docs)
   
    # BƯỚC 4: Thêm chunk_id cho mỗi chunk
    for chunk in all_chunks:
        chunk.metadata.update({
            "chunk_id": str(uuid.uuid4())  # ← ID riêng cho chunk
        })
        # Lưu ý: section_id vẫn được giữ nguyên từ metadata gốc
   
    # BƯỚC 5: Validate và lưu vào Milvus
    validated_chunks = self._normalize_and_validate_chunks(all_chunks)
    self.vector_storage_service.store_documents(validated_chunks)
```

#### 🔑

README.md

@@ -1,10 +1,13 @@
 ---
-title: Docusense Explorer
-emoji: 🏆
-colorFrom: pink
-colorTo: purple
+title: DocuSense Explorer 🚀
+colorFrom: blue
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,100 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    @apply bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700;
+                }
+                
+                .container {
+                    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
+                }
+                
+                .footer-content {
+                    @apply grid grid-cols-1 md:grid-cols-3 gap-8;
+                }
+                
+                .footer-section h3 {
+                    @apply text-lg font-semibold text-gray-900 dark:text-white mb-4;
+                }
+                
+                .footer-links {
+                    @apply space-y-3;
+                }
+                
+                .footer-link {
+                    @apply text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white;
+                }
+                
+                .footer-bottom {
+                    @apply mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 
+                           flex flex-col md:flex-row justify-between items-center;
+                }
+                
+                .copyright {
+                    @apply text-gray-500 dark:text-gray-400 text-sm;
+                }
+                
+                .social-links {
+                    @apply flex space-x-4 mt-4 md:mt-0;
+                }
+                
+                .social-link {
+                    @apply text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200;
+                }
+            </style>
+            
+            <footer>
+                <div class="container">
+                    <div class="footer-content">
+                        <div class="footer-section">
+                            <h3>DocuSense Explorer</h3>
+                            <p class="text-gray-600 dark:text-gray-300">
+                                Advanced document processing with intelligent context recovery for better search and retrieval.
+                            </p>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Resources</h3>
+                            <div class="footer-links">
+                                <a href="#" class="footer-link">Documentation</a>
+                                <a href="#" class="footer-link">API Reference</a>
+                                <a href="#" class="footer-link">GitHub Repository</a>
+                            </div>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Contact</h3>
+                            <div class="footer-links">
+                                <a href="#" class="footer-link">Email Us</a>
+                                <a href="#" class="footer-link">Support Portal</a>
+                                <a href="#" class="footer-link">Feedback</a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="footer-bottom">
+                        <p class="copyright">
+                            © ${new Date().getFullYear()} DocuSense Explorer. All rights reserved.
+                        </p>
+                        
+                        <div class="social-links">
+                            <a href="#" class="social-link">
+                                <i data-feather="github"></i>
+                            </a>
+                            <a href="#" class="social-link">
+                                <i data-feather="twitter"></i>
+                            </a>
+                            <a href="#" class="social-link">
+                                <i data-feather="linkedin"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,168 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    @apply bg-white dark:bg-gray-800 shadow-sm;
+                }
+                
+                .container {
+                    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
+                }
+                
+                .nav-content {
+                    @apply flex justify-between items-center h-16;
+                }
+                
+                .logo {
+                    @apply flex-shrink-0 flex items-center text-blue-600 dark:text-blue-400 font-bold text-xl;
+                }
+                
+                .nav-links {
+                    @apply hidden md:ml-6 md:flex md:space-x-8;
+                }
+                
+                .nav-link {
+                    @apply inline-flex items-center px-1 pt-1 border-b-2 border-transparent 
+                           text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100 
+                           hover:border-gray-300 dark:hover:border-gray-500 text-sm font-medium;
+                }
+                
+                .nav-link.active {
+                    @apply border-blue-500 text-gray-900 dark:text-white;
+                }
+                
+                .mobile-menu-button {
+                    @apply inline-flex items-center justify-center p-2 rounded-md 
+                           text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 
+                           hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none;
+                }
+                
+                .mobile-menu {
+                    @apply md:hidden;
+                }
+                
+                .mobile-menu-items {
+                    @apply pt-2 pb-3 space-y-1;
+                }
+                
+                .mobile-menu-link {
+                    @apply block pl-3 pr-4 py-2 border-l-4 border-transparent 
+                           text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100 
+                           hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 
+                           dark:hover:border-gray-500 text-base font-medium;
+                }
+                
+                .mobile-menu-link.active {
+                    @apply border-blue-500 bg-blue-50 dark:bg-blue-900/20 
+                           text-blue-700 dark:text-blue-300;
+                }
+                
+                .theme-toggle {
+                    @apply p-2 rounded-full text-gray-400 hover:text-gray-500 
+                           dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
+                }
+                
+                .hidden {
+                    display: none;
+                }
+            </style>
+            
+            <nav>
+                <div class="container">
+                    <div class="nav-content">
+                        <div class="flex items-center">
+                            <a href="/" class="logo">
+                                <i data-feather="file-text" class="mr-2"></i>
+                                DocuSense
+                            </a>
+                        </div>
+                        
+                        <div class="nav-links">
+                            <a href="#overview" class="nav-link">Overview</a>
+                            <a href="#demo" class="nav-link">Workflow</a>
+                            <a href="#benefits" class="nav-link">Benefits</a>
+                        </div>
+                        
+                        <div class="flex items-center space-x-2">
+                            <button class="theme-toggle" onclick="toggleDarkMode()">
+                                <i data-feather="moon" class="dark:hidden"></i>
+                                <i data-feather="sun" class="hidden dark:block"></i>
+                            </button>
+                            
+                            <button class="mobile-menu-button md:hidden" aria-expanded="false">
+                                <i data-feather="menu"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Mobile menu -->
+                <div class="mobile-menu hidden">
+                    <div class="container">
+                        <div class="mobile-menu-items">
+                            <a href="#overview" class="mobile-menu-link">Overview</a>
+                            <a href="#demo" class="mobile-menu-link">Workflow</a>
+                            <a href="#benefits" class="mobile-menu-link">Benefits</a>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+            
+            <script>
+                // Mobile menu toggle
+                document.querySelector('.mobile-menu-button').addEventListener('click', function() {
+                    const menu = document.querySelector('.mobile-menu');
+                    menu.classList.toggle('hidden');
+                    
+                    // Toggle icon between menu and x
+                    const icon = this.querySelector('i');
+                    if (menu.classList.contains('hidden')) {
+                        icon.setAttribute('data-feather', 'menu');
+                    } else {
+                        icon.setAttribute('data-feather', 'x');
+                    }
+                    feather.replace();
+                });
+                
+                // Close mobile menu when clicking a link
+                document.querySelectorAll('.mobile-menu-link').forEach(link => {
+                    link.addEventListener('click', function() {
+                        document.querySelector('.mobile-menu').classList.add('hidden');
+                        document.querySelector('.mobile-menu-button i').setAttribute('data-feather', 'menu');
+                        feather.replace();
+                    });
+                });
+                
+                // Update active link based on scroll position
+                window.addEventListener('scroll', function() {
+                    const sections = ['overview', 'demo', 'benefits'];
+                    let currentSection = '';
+                    
+                    sections.forEach(section => {
+                        const element = document.getElementById(section);
+                        if (element) {
+                            const rect = element.getBoundingClientRect();
+                            if (rect.top <= 100 && rect.bottom >= 100) {
+                                currentSection = section;
+                            }
+                        }
+                    });
+                    
+                    // Update active state
+                    document.querySelectorAll('.nav-link, .mobile-menu-link').forEach(link => {
+                        const href = link.getAttribute('href').substring(1);
+                        if (href === currentSection) {
+                            link.classList.add('active');
+                        } else {
+                            link.classList.remove('active');
+                        }
+                    });
+                });
+            </script>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,266 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DocuSense Explorer - Document Processing System</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <div class="max-w-5xl mx-auto">
+            <!-- Hero Section -->
+            <section class="mb-16 text-center">
+                <div class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-8 rounded-xl shadow-2xl">
+                    <h1 class="text-4xl md:text-5xl font-bold mb-4">Document Processing <br>with Context Recovery</h1>
+                    <p class="text-xl mb-8 max-w-3xl mx-auto">Smart section-based processing with full context retrieval</p>
+                    <div class="flex justify-center gap-4">
+                        <a href="#overview" class="bg-white text-blue-700 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition">Learn More</a>
+                        <a href="#demo" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-700 transition">See Demo</a>
+                    </div>
+                </div>
+            </section>
+
+            <!-- System Overview -->
+            <section id="overview" class="mb-16">
+                <h2 class="text-3xl font-bold mb-8 text-center dark:text-white">System Architecture</h2>
+                
+                <div class="relative">
+                    <!-- Architecture SVG -->
+                    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
+                        <img src="architecture.svg" alt="System Architecture Diagram" class="w-full h-auto rounded-lg">
+                    </div>
+                    
+                    <!-- Key Features -->
+                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
+                        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow hover:shadow-lg transition">
+                            <div class="bg-blue-100 dark:bg-blue-900 w-12 h-12 rounded-full flex items-center justify-center mb-4">
+                                <i data-feather="layers" class="text-blue-600 dark:text-blue-300"></i>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-2 dark:text-white">Section-Based Processing</h3>
+                            <p class="text-gray-600 dark:text-gray-300">Documents are intelligently split into meaningful sections while preserving hierarchy.</p>
+                        </div>
+                        
+                        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow hover:shadow-lg transition">
+                            <div class="bg-purple-100 dark:bg-purple-900 w-12 h-12 rounded-full flex items-center justify-center mb-4">
+                                <i data-feather="cpu" class="text-purple-600 dark:text-purple-300"></i>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-2 dark:text-white">Context Recovery</h3>
+                            <p class="text-gray-600 dark:text-gray-300">Retrieve the full original section content even when searching small chunks.</p>
+                        </div>
+                        
+                        <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow hover:shadow-lg transition">
+                            <div class="bg-green-100 dark:bg-green-900 w-12 h-12 rounded-full flex items-center justify-center mb-4">
+                                <i data-feather="zap" class="text-green-600 dark:text-green-300"></i>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-2 dark:text-white">Hybrid Search</h3>
+                            <p class="text-gray-600 dark:text-gray-300">Combines vector similarity and BM25 for precise and relevant results.</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Workflow Demo -->
+            <section id="demo" class="mb-16">
+                <h2 class="text-3xl font-bold mb-8 text-center dark:text-white">Workflow Demonstration</h2>
+                
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
+                    <div class="grid md:grid-cols-2 gap-0">
+                        <!-- Step Navigation -->
+                        <div class="bg-gray-50 dark:bg-gray-700 p-6">
+                            <div class="sticky top-6">
+                                <h3 class="text-xl font-semibold mb-4 dark:text-white">Process Steps</h3>
+                                <div class="space-y-2">
+                                    <button class="workflow-step active" data-step="1">1. Document Upload</button>
+                                    <button class="workflow-step" data-step="2">2. Section Splitting</button>
+                                    <button class="workflow-step" data-step="3">3. Chunk Generation</button>
+                                    <button class="workflow-step" data-step="4">4. Storage</button>
+                                    <button class="workflow-step" data-step="5">5. Search Process</button>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Step Content -->
+                        <div class="p-6">
+                            <div class="workflow-content" data-step-content="1">
+                                <h3 class="text-xl font-semibold mb-4 dark:text-white">Document Upload</h3>
+                                <p class="mb-4 text-gray-600 dark:text-gray-300">Users upload documents through the API endpoint:</p>
+                                <pre class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 mb-4 overflow-x-auto">
+                                    <code class="text-sm">
+POST /index-file/
+{
+  "list_path": [
+    {
+      "id": "uuid-file-1",
+      "path": "extracted/document.md"
+    }
+  ]
+}
+                                    </code>
+                                </pre>
+                                <p class="text-gray-600 dark:text-gray-300">The system creates a unique job ID for processing and returns immediately.</p>
+                            </div>
+                            
+                            <div class="workflow-content hidden" data-step-content="2">
+                                <h3 class="text-xl font-semibold mb-4 dark:text-white">Section Splitting</h3>
+                                <p class="mb-4 text-gray-600 dark:text-gray-300">Documents are split into hierarchical sections:</p>
+                                <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 mb-4">
+                                    <div class="flex items-center mb-2">
+                                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
+                                        <span class="font-mono text-sm"># Main Title</span>
+                                    </div>
+                                    <div class="flex items-center mb-2 ml-4">
+                                        <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
+                                        <span class="font-mono text-sm">## Section 1</span>
+                                    </div>
+                                    <div class="flex items-center mb-2 ml-8">
+                                        <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
+                                        <span class="font-mono text-sm">### Subsection 1.1</span>
+                                    </div>
+                                    <div class="flex items-center ml-4">
+                                        <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
+                                        <span class="font-mono text-sm">## Section 2</span>
+                                    </div>
+                                </div>
+                                <p class="text-gray-600 dark:text-gray-300">Each section maintains its page information and document context.</p>
+                            </div>
+                            
+                            <div class="workflow-content hidden" data-step-content="3">
+                                <h3 class="text-xl font-semibold mb-4 dark:text-white">Chunk Generation</h3>
+                                <p class="mb-4 text-gray-600 dark:text-gray-300">Large sections are split into optimally-sized chunks:</p>
+                                <div class="flex items-start mb-4">
+                                    <div class="border-r-2 border-gray-300 dark:border-gray-600 pr-4 mr-4">
+                                        <div class="bg-blue-100 dark:bg-blue-900 px-3 py-2 rounded-lg mb-2">
+                                            <p class="text-sm">Section ID: 123e4567</p>
+                                        </div>
+                                        <div class="space-y-2">
+                                            <div class="bg-gray-200 dark:bg-gray-700 px-3 py-2 rounded-lg">
+                                                <p class="text-sm">Chunk 1 (Tokens: 512)</p>
+                                            </div>
+                                            <div class="bg-gray-200 dark:bg-gray-700 px-3 py-2 rounded-lg">
+                                                <p class="text-sm">Chunk 2 (Tokens: 498)</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <p class="text-gray-600 dark:text-gray-300 text-sm">Each chunk references its parent section while being small enough for efficient vector search.</p>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="workflow-content hidden" data-step-content="4">
+                                <h3 class="text-xl font-semibold mb-4 dark:text-white">Storage</h3>
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                                    <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
+                                        <div class="flex items-center mb-2">
+                                            <i data-feather="database" class="mr-2 text-blue-500"></i>
+                                            <h4 class="font-medium">PostgreSQL</h4>
+                                        </div>
+                                        <p class="text-sm text-gray-600 dark:text-gray-300">Stores complete section content with metadata</p>
+                                    </div>
+                                    <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
+                                        <div class="flex items-center mb-2">
+                                            <i data-feather="box" class="mr-2 text-purple-500"></i>
+                                            <h4 class="font-medium">Milvus</h4>
+                                        </div>
+                                        <p class="text-sm text-gray-600 dark:text-gray-300">Stores vector embeddings of chunks with section references</p>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="workflow-content hidden" data-step-content="5">
+                                <h3 class="text-xl font-semibold mb-4 dark:text-white">Search Process</h3>
+                                <ol class="space-y-4">
+                                    <li class="flex items-start">
+                                        <div class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">1</div>
+                                        <div>
+                                            <p class="font-medium dark:text-white">Query Processing</p>
+                                            <p class="text-sm text-gray-600 dark:text-gray-300">Convert search query to embeddings and search Milvus</p>
+                                        </div>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <div class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">2</div>
+                                        <div>
+                                            <p class="font-medium dark:text-white">Result Aggregation</p>
+                                            <p class="text-sm text-gray-600 dark:text-gray-300">Group chunks by their section_id and score</p>
+                                        </div>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <div class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">3</div>
+                                        <div>
+                                            <p class="font-medium dark:text-white">Context Retrieval</p>
+                                            <p class="text-sm text-gray-600 dark:text-gray-300">Fetch full section content from PostgreSQL</p>
+                                        </div>
+                                    </li>
+                                </ol>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Benefits Section -->
+            <section class="mb-16">
+                <h2 class="text-3xl font-bold mb-8 text-center dark:text-white">System Benefits</h2>
+                
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border-t-4 border-blue-500">
+                        <h3 class="text-xl font-semibold mb-3 dark:text-white">Full Context Recovery</h3>
+                        <p class="text-gray-600 dark:text-gray-300">Retrieve complete section content even when searching small chunks, ensuring no context is lost.</p>
+                    </div>
+                    
+                    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border-t-4 border-purple-500">
+                        <h3 class="text-xl font-semibold mb-3 dark:text-white">Hybrid Search</h3>
+                        <p class="text-gray-600 dark:text-gray-300">Combine semantic vector search with keyword-based BM25 for more accurate results.</p>
+                    </div>
+                    
+                    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border-t-4 border-green-500">
+                        <h3 class="text-xl font-semibold mb-3 dark:text-white">Optimal Performance</h3>
+                        <p class="text-gray-600 dark:text-gray-300">Fast vector search on small chunks with instant retrieval of full sections from PostgreSQL.</p>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+        
+        // Workflow step navigation
+        document.addEventListener('DOMContentLoaded', function() {
+            const steps = document.querySelectorAll('.workflow-step');
+            const contents = document.querySelectorAll('.workflow-content');
+            
+            steps.forEach(step => {
+                step.addEventListener('click', function() {
+                    // Remove active class from all steps
+                    steps.forEach(s => s.classList.remove('active', 'bg-blue-500', 'text-white'));
+                    
+                    // Add active class to clicked step
+                    this.classList.add('active', 'bg-blue-500', 'text-white');
+                    
+                    // Hide all content
+                    contents.forEach(c => c.classList.add('hidden'));
+                    
+                    // Show corresponding content
+                    const stepNum = this.getAttribute('data-step');
+                    document.querySelector(`[data-step-content="${stepNum}"]`).classList.remove('hidden');
+                });
+            });
+            
+            // Activate first step by default
+            document.querySelector('.workflow-step').click();
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,38 @@
+// Theme switcher functionality
+document.addEventListener('DOMContentLoaded', function() {
+    // Check for saved theme preference or use system preference
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const savedTheme = localStorage.getItem('theme');
+    
+    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+        document.documentElement.classList.add('dark');
+    }
+    
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return;
+            
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                targetElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+});
+
+// Function to toggle dark mode
+function toggleDarkMode() {
+    const html = document.documentElement;
+    html.classList.toggle('dark');
+    
+    // Save preference to localStorage
+    const isDark = html.classList.contains('dark');
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+}

style.css

@@ -1,28 +1,42 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    --primary: #3b82f6; /* blue-500 */
+    --secondary: #8b5cf6; /* purple-500 */
+}
+
+.dark {
+    --primary: #60a5fa; /* blue-400 */
+    --secondary: #a78bfa; /* purple-400 */
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Workflow Step Styling */
+.workflow-step {
+    @apply w-full text-left px-4 py-2 rounded-lg transition;
+    @apply bg-gray-100 dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500;
+    @apply text-gray-700 dark:text-gray-200 font-medium;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.workflow-step.active {
+    @apply bg-blue-500 text-white;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-track {
+    @apply bg-gray-100 dark:bg-gray-800;
 }
+
+::-webkit-scrollbar-thumb {
+    @apply bg-gray-400 dark:bg-gray-600 rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-500 dark:bg-gray-500;
+}