Add pagination, auto-save ratings, and fix translation button

- Add pagination: 100 results split into 10 per page
- Auto-save ratings on click via /api/rating endpoint
- Fix translation button always showing for AR/CN languages
- Add dotenv support for local development
- Add .env to .gitignore for security

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: jinruiy <jinruiy@users.noreply.github.com>

.gitignore

@@ -23,4 +23,8 @@ Thumbs.db
 *.tmp
 
 # Local data (if any)
-*.pkl.local
+*.pkl
+
+# Environment files
+.env
+.env.local

backend/api.py

@@ -14,6 +14,13 @@ from fastapi.staticfiles import StaticFiles
 from fastapi.responses import HTMLResponse, FileResponse
 from pydantic import BaseModel
 
+# Load .env file if present
+try:
+    from dotenv import load_dotenv
+    load_dotenv(Path(__file__).parent.parent / ".env")
+except ImportError:
+    pass  # python-dotenv not installed
+
 from .services import get_knowledge_base, get_retriever, search_knowledge_base, get_stats
 
 # DeepL API configuration
@@ -60,6 +67,15 @@ class TranslateRequest(BaseModel):
     target_lang: str  # AR or ZH (DeepL uses ZH for Chinese)
 
 
+class RatingRequest(BaseModel):
+    query: str
+    category: str
+    entity_id: str
+    entity_index: int
+    rating_type: str  # 'relevance' or 'helpful'
+    rating_value: int  # 0, 1, or 2 for relevance; 0 or 1 for helpful
+
+
 # ============================================================
 # Translation Cache (file-based, persistent across restarts)
 # ============================================================
@@ -180,7 +196,7 @@ async def api_stats():
 async def api_search(request: SearchRequest):
     """Search the knowledge base"""
     try:
-        results = search_knowledge_base(request.query, top_k=5)
+        results = search_knowledge_base(request.query, top_k=100)
         return {
             "results": results,
             "query": request.query,
@@ -235,6 +251,50 @@ async def api_feedback(request: FeedbackRequest, req: Request):
         return {"success": False, "error": str(e)}
 
 
+@app.post("/api/rating")
+async def api_rating(request: RatingRequest, req: Request):
+    """Save individual entity rating (auto-save on click)"""
+    try:
+        # Ensure data directory exists
+        DATA_DIR.mkdir(parents=True, exist_ok=True)
+
+        # Get client IP
+        client_ip = req.headers.get("x-forwarded-for", "").split(",")[0].strip()
+        if not client_ip:
+            client_ip = req.client.host if req.client else "unknown"
+
+        rating_file = DATA_DIR / "ratings.json"
+
+        rating = {
+            "timestamp": datetime.now().isoformat(),
+            "client_ip": client_ip,
+            "query": request.query,
+            "category": request.category,
+            "entity_id": request.entity_id,
+            "entity_index": request.entity_index,
+            "rating_type": request.rating_type,
+            "rating_value": request.rating_value
+        }
+
+        # Load existing ratings
+        if rating_file.exists():
+            with open(rating_file, "r", encoding="utf-8") as f:
+                all_ratings = json.load(f)
+        else:
+            all_ratings = []
+
+        all_ratings.append(rating)
+
+        # Save ratings
+        with open(rating_file, "w", encoding="utf-8") as f:
+            json.dump(all_ratings, f, ensure_ascii=False, indent=2)
+
+        return {"success": True, "total": len(all_ratings)}
+
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+
+
 @app.post("/api/translate")
 async def api_translate(request: TranslateRequest):
     """Translate texts using DeepL API"""

frontend/js/app.js

@@ -237,7 +237,10 @@ const state = {
     translationAvailable: false,
     translatedResults: {},  // { lang: { entityId: { name, summary, facts } } }
     showOriginal: false,    // Toggle for showing original English
-    isTranslating: false
+    isTranslating: false,
+    // Pagination state
+    currentPage: 1,
+    resultsPerPage: 10
 };
 
 // ============================================
@@ -353,6 +356,8 @@ async function handleSearch() {
     // Reset translation state for new search
     state.translatedResults = {};
     state.showOriginal = false;
+    // Reset pagination
+    state.currentPage = 1;
     updateUIState();
 
     try {
@@ -512,16 +517,26 @@ function switchToHomeMode() {
 // UI RENDERING
 // ============================================
 function renderResults() {
-    const results = state.results;
+    const allResults = state.results;
     const lang = state.language;
-    const showTranslateToggle = lang !== 'en' && state.translationAvailable && results.length > 0;
-    const hasTranslations = state.translatedResults[lang] && Object.keys(state.translatedResults[lang]).length > 0;
+    const totalResults = allResults.length;
+    const totalPages = Math.ceil(totalResults / state.resultsPerPage);
+
+    // Calculate current page items
+    const startIndex = (state.currentPage - 1) * state.resultsPerPage;
+    const endIndex = Math.min(startIndex + state.resultsPerPage, totalResults);
+    const pageResults = allResults.slice(startIndex, endIndex);
+
+    // Check if current page has translations
+    const pageIndices = pageResults.map((_, i) => startIndex + i);
+    const hasPageTranslations = state.translatedResults[lang] &&
+        pageIndices.some(idx => state.translatedResults[lang][idx]);
 
     if (DOM.resultsCount) {
-        DOM.resultsCount.textContent = t('topEntities').replace('{count}', results.length);
+        DOM.resultsCount.textContent = `Page ${state.currentPage} of ${totalPages} (${totalResults} total)`;
     }
 
-    if (!results.length) {
+    if (!allResults.length) {
         DOM.resultsContainer.innerHTML = `
             <div class="text-center py-12 text-gray-400">
                 <p class="text-lg">No results found for your query</p>
@@ -530,21 +545,23 @@ function renderResults() {
         return;
     }
 
-    // Build translation toggle button if applicable
-    const translationToggle = showTranslateToggle ? `
+    // Build translation toggle button if applicable (only for current page)
+    // Show button for AR/CN even if translation API isn't available (will show message when clicked)
+    const showTranslateButton = lang !== 'en' && pageResults.length > 0;
+    const translationToggle = showTranslateButton ? `
         <div class="mb-4 flex justify-end">
             ${state.isTranslating ? `
-                <span class="text-[18px] text-amber-600 flex items-center gap-2">
+                <span class="text-[14px] md:text-[18px] text-amber-600 flex items-center gap-2">
                     <span class="spinner">⏳</span> ${t('translating')}
                 </span>
-            ` : hasTranslations ? `
+            ` : hasPageTranslations ? `
                 <button onclick="toggleOriginal()"
-                        class="text-[18px] px-4 py-1.5 rounded border ${state.showOriginal ? 'bg-emerald-900 text-white border-emerald-900' : 'bg-white text-emerald-900 border-emerald-900'} hover:opacity-80 transition">
+                        class="text-[14px] md:text-[18px] px-4 py-1.5 rounded border ${state.showOriginal ? 'bg-emerald-900 text-white border-emerald-900' : 'bg-white text-emerald-900 border-emerald-900'} hover:opacity-80 transition">
                     ${state.showOriginal ? t('showTranslated') : t('showOriginal')}
                 </button>
             ` : `
-                <button onclick="translateResults()"
-                        class="text-[18px] px-4 py-1.5 rounded border text-white transition"
+                <button onclick="translateCurrentPage()"
+                        class="text-[14px] md:text-[18px] px-4 py-1.5 rounded border text-white transition"
                         style="background-color: #b38e3f; border-color: #b38e3f;"
                         onmouseover="this.style.backgroundColor='#9a7a35'"
                         onmouseout="this.style.backgroundColor='#b38e3f'">
@@ -554,7 +571,38 @@ function renderResults() {
         </div>
     ` : '';
 
-    DOM.resultsContainer.innerHTML = translationToggle + results.map((result, index) => {
+    // Build pagination controls
+    const paginationControls = totalPages > 1 ? `
+        <div class="flex justify-center items-center gap-2 md:gap-4 my-6">
+            <button onclick="goToPage(1)"
+                    class="px-2 md:px-3 py-1 md:py-2 rounded border text-[12px] md:text-[14px] ${state.currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-emerald-900 border-emerald-900 hover:bg-emerald-50'}"
+                    ${state.currentPage === 1 ? 'disabled' : ''}>
+                ⏮ First
+            </button>
+            <button onclick="goToPage(${state.currentPage - 1})"
+                    class="px-2 md:px-3 py-1 md:py-2 rounded border text-[12px] md:text-[14px] ${state.currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-emerald-900 border-emerald-900 hover:bg-emerald-50'}"
+                    ${state.currentPage === 1 ? 'disabled' : ''}>
+                ◀ Prev
+            </button>
+            <span class="px-3 md:px-4 py-1 md:py-2 text-[12px] md:text-[14px] font-medium text-emerald-900">
+                ${state.currentPage} / ${totalPages}
+            </span>
+            <button onclick="goToPage(${state.currentPage + 1})"
+                    class="px-2 md:px-3 py-1 md:py-2 rounded border text-[12px] md:text-[14px] ${state.currentPage === totalPages ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-emerald-900 border-emerald-900 hover:bg-emerald-50'}"
+                    ${state.currentPage === totalPages ? 'disabled' : ''}>
+                Next ▶
+            </button>
+            <button onclick="goToPage(${totalPages})"
+                    class="px-2 md:px-3 py-1 md:py-2 rounded border text-[12px] md:text-[14px] ${state.currentPage === totalPages ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-emerald-900 border-emerald-900 hover:bg-emerald-50'}"
+                    ${state.currentPage === totalPages ? 'disabled' : ''}>
+                Last ⏭
+            </button>
+        </div>
+    ` : '';
+
+    DOM.resultsContainer.innerHTML = translationToggle + paginationControls + pageResults.map((result, pageIndex) => {
+        // Calculate actual index in full results array
+        const index = startIndex + pageIndex;
         // Get translated or original content
         const content = getResultContent(result, index);
 
@@ -632,9 +680,19 @@ function renderResults() {
                 </div>
             </div>
         </div>
-    `}).join('');
+    `}).join('') + paginationControls;
 }
 
+// Pagination navigation
+window.goToPage = function(page) {
+    const totalPages = Math.ceil(state.results.length / state.resultsPerPage);
+    if (page < 1 || page > totalPages) return;
+    state.currentPage = page;
+    renderResults();
+    // Scroll to top of results
+    document.getElementById('results-section')?.scrollIntoView({ behavior: 'smooth' });
+};
+
 function updateUIState() {
     if (state.isLoading) {
         DOM.searchBtn?.classList.add('loading');
@@ -680,9 +738,9 @@ function selectCategory(categoryId) {
 }
 
 // ============================================
-// RATINGS
+// RATINGS (auto-save on click)
 // ============================================
-window.setRating = function(entityIndex, dimension, value) {
+window.setRating = async function(entityIndex, dimension, value) {
     if (!state.ratings[entityIndex]) {
         state.ratings[entityIndex] = {};
     }
@@ -690,6 +748,32 @@ window.setRating = function(entityIndex, dimension, value) {
 
     // Re-render to update button states
     renderResults();
+
+    // Auto-save rating to backend
+    try {
+        const result = state.results[entityIndex];
+        const response = await fetch(`${CONFIG.API_BASE}/rating`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                query: state.currentQuery,
+                category: state.currentCategory?.id || '',
+                entity_id: result?.entity_id || '',
+                entity_index: entityIndex,
+                rating_type: dimension,
+                rating_value: dimension === 'helpful' ? (value ? 1 : 0) : value
+            })
+        });
+
+        const data = await response.json();
+        if (data.success) {
+            // Show subtle confirmation
+            showToast('Rating saved ✓', 'success');
+        }
+    } catch (error) {
+        console.error('Failed to save rating:', error);
+        // Don't show error to user - rating is still stored locally
+    }
 };
 
 // ============================================
@@ -848,6 +932,104 @@ async function translateResults() {
     }
 }
 
+// Translate only current page items
+window.translateCurrentPage = async function() {
+    const lang = state.language;
+
+    // Only translate for AR or CN
+    if (lang === 'en' || state.results.length === 0) {
+        return;
+    }
+
+    // Check if translation is available
+    if (!state.translationAvailable) {
+        showToast(t('translationNotAvailable') + ' (DEEPL_API_KEY not set)', 'warning');
+        return;
+    }
+
+    // Calculate current page items
+    const startIndex = (state.currentPage - 1) * state.resultsPerPage;
+    const endIndex = Math.min(startIndex + state.resultsPerPage, state.results.length);
+    const pageResults = state.results.slice(startIndex, endIndex);
+
+    state.isTranslating = true;
+    renderResults(); // Show translating state
+
+    try {
+        // Collect texts from current page only
+        const textsToTranslate = [];
+        const textMap = []; // Track which text belongs to which result
+
+        pageResults.forEach((result, pageIndex) => {
+            const index = startIndex + pageIndex;
+            // Add entity name
+            if (result.entity_name) {
+                textsToTranslate.push(result.entity_name);
+                textMap.push({ index, field: 'entityName' });
+            }
+            // Add summary
+            if (result.summary) {
+                textsToTranslate.push(result.summary);
+                textMap.push({ index, field: 'summary' });
+            }
+            // Add facts
+            (result.must_answer || []).forEach((fact, factIndex) => {
+                textsToTranslate.push(fact);
+                textMap.push({ index, field: 'fact', factIndex });
+            });
+        });
+
+        if (textsToTranslate.length === 0) {
+            state.isTranslating = false;
+            return;
+        }
+
+        const response = await fetch(`${CONFIG.API_BASE}/translate`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                texts: textsToTranslate,
+                target_lang: lang
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success && data.translations) {
+            // Initialize language cache if needed
+            if (!state.translatedResults[lang]) {
+                state.translatedResults[lang] = {};
+            }
+
+            data.translations.forEach((translated, i) => {
+                const { index, field, factIndex } = textMap[i];
+
+                if (!state.translatedResults[lang][index]) {
+                    state.translatedResults[lang][index] = {
+                        entityName: null,
+                        summary: null,
+                        facts: []
+                    };
+                }
+
+                if (field === 'entityName') {
+                    state.translatedResults[lang][index].entityName = translated;
+                } else if (field === 'summary') {
+                    state.translatedResults[lang][index].summary = translated;
+                } else if (field === 'fact') {
+                    state.translatedResults[lang][index].facts[factIndex] = translated;
+                }
+            });
+        }
+    } catch (error) {
+        console.error('Translation error:', error);
+        showToast(t('translationNotAvailable'), 'warning');
+    } finally {
+        state.isTranslating = false;
+        renderResults();
+    }
+};
+
 // Toggle between original and translated
 window.toggleOriginal = function() {
     state.showOriginal = !state.showOriginal;