Upload 17 files

Dockerfile

@@ -1,34 +1,34 @@
-# Use Node.js LTS image
-FROM node:20-slim
-
-# Set working directory
-WORKDIR /app
-
-# Set environment variables
-ENV NODE_ENV=production \
-    PORT=7860
-
-# Copy package files first for better caching
-COPY package*.json ./
-
-# Install dependencies
-RUN npm ci --omit=dev
-
-# Copy application source
-COPY . .
-
-# Create data directory and set permissions
-RUN mkdir -p data && chown -R node:node /app
-
-# Switch to non-root user
-USER node
-
-# Expose the port (HF Spaces uses 7860 by default)
-EXPOSE 7860
-
-# Health check
-HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
-    CMD node -e "require('http').get('http://localhost:7860/api/stories', (r) => process.exit(r.statusCode === 200 ? 0 : 1))"
-
-# Start the application
-CMD ["node", "server.js"]
+# Use Node.js LTS image
+FROM node:20-slim
+
+# Set working directory
+WORKDIR /app
+
+# Set environment variables
+ENV NODE_ENV=production \
+    PORT=7860
+
+# Copy package files first for better caching
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --omit=dev
+
+# Copy application source
+COPY . .
+
+# Create data directory and set permissions
+RUN mkdir -p data && chown -R node:node /app
+
+# Switch to non-root user
+USER node
+
+# Expose the port (HF Spaces uses 7860 by default)
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD node -e "require('http').get('http://localhost:7860/api/stories', (r) => process.exit(r.statusCode === 200 ? 0 : 1))"
+
+# Start the application
+CMD ["node", "server.js"]

package.json

@@ -10,4 +10,4 @@
     "dependencies": {
         "express": "^4.18.2"
     }
-}
+}

public/reader.html

@@ -88,38 +88,22 @@
             setupChapterSelector();
         });
 
-        // Image chunking settings
-        const MAX_IMAGE_HEIGHT = 2000; // Chiều cao tối đa trước khi cắt
-        const CHUNK_HEIGHT = 1500;     // Chiều cao mỗi chunk
-
         /**
-         * Display image immediately - no waiting
-         * @param {string} src - Image source URL
-         * @param {HTMLElement} wrapper - Wrapper element to render into
-         * @param {number} pageNum - Page number for alt text
+         * Load image directly
          */
-        function loadAndChunkImage(src, wrapper, pageNum) {
-            // Create img element and display immediately
+        function loadImage(src, wrapper, pageNum) {
             const imgEl = document.createElement('img');
             imgEl.src = src;
             imgEl.alt = `Trang ${pageNum}`;
             imgEl.className = 'page-image';
             imgEl.loading = 'lazy';
 
-            // Clear placeholder and show image immediately
             wrapper.innerHTML = '';
             wrapper.appendChild(imgEl);
 
-            // Fade-in when image loads
             imgEl.onload = () => {
                 imgEl.classList.add('loaded');
                 wrapper.classList.add('loaded');
-
-                // Check if image is too tall and needs chunking
-                const { naturalWidth: width, naturalHeight: height } = imgEl;
-                if (height > MAX_IMAGE_HEIGHT) {
-                    chunkLongImage(imgEl, wrapper, pageNum, width, height);
-                }
             };
 
             imgEl.onerror = () => {
@@ -132,56 +116,12 @@
                 wrapper.classList.add('loaded');
             };
 
-            // If cached, trigger loaded immediately
             if (imgEl.complete && imgEl.naturalHeight > 0) {
                 imgEl.classList.add('loaded');
                 wrapper.classList.add('loaded');
             }
         }
 
-        /**
-         * Chunk a long image into smaller pieces (runs after image is loaded)
-         */
-        function chunkLongImage(img, wrapper, pageNum, width, height) {
-            try {
-                const numChunks = Math.ceil(height / CHUNK_HEIGHT);
-                wrapper.innerHTML = ''; // Clear original image
-
-                for (let i = 0; i < numChunks; i++) {
-                    const chunkStart = i * CHUNK_HEIGHT;
-                    const chunkEnd = Math.min((i + 1) * CHUNK_HEIGHT, height);
-                    const actualChunkHeight = chunkEnd - chunkStart;
-
-                    // Create canvas for this chunk
-                    const canvas = document.createElement('canvas');
-                    canvas.width = width;
-                    canvas.height = actualChunkHeight;
-
-                    const ctx = canvas.getContext('2d');
-                    ctx.drawImage(
-                        img,
-                        0, chunkStart,           // Source x, y
-                        width, actualChunkHeight, // Source width, height
-                        0, 0,                     // Destination x, y
-                        width, actualChunkHeight  // Destination width, height
-                    );
-
-                    // Convert canvas to image element
-                    const chunkImg = document.createElement('img');
-                    chunkImg.src = canvas.toDataURL('image/webp', 0.9);
-                    chunkImg.alt = `Trang ${pageNum} - Phần ${i + 1}/${numChunks}`;
-                    chunkImg.className = 'page-image page-chunk loaded';
-
-                    wrapper.appendChild(chunkImg);
-                }
-
-                wrapper.classList.add('chunked-page');
-            } catch (error) {
-                console.error('Failed to chunk image:', error);
-                // Keep original image if chunking fails
-            }
-        }
-
         async function loadImages() {
             const container = document.getElementById('readerContainer');
             const chapterInfo = document.getElementById('chapterInfo');
@@ -251,8 +191,8 @@
                     `;
                     container.appendChild(wrapper);
 
-                    // Load and potentially chunk the image
-                    loadAndChunkImage(imgSrc, wrapper, index + 1);
+                    // Load the image
+                    loadImage(imgSrc, wrapper, index + 1);
                 }
 
                 // Add end of chapter navigation

public/styles.css

@@ -846,6 +846,33 @@ img {
     }
 }
 
+/* Chunk Loading Styles */
+.spinner-small {
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--border-color);
+    border-top-color: var(--accent-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+.chunk-wrapper {
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-secondary);
+}
+
+.chunk-loading {
+    padding: var(--spacing-lg);
+}
+
+.error-state.small {
+    padding: var(--spacing-md);
+    font-size: 0.875rem;
+}
+
 .empty-state,
 .error-state {
     grid-column: 1 / -1;

server.js

@@ -15,38 +15,95 @@ const DATA_DIR = path.join(__dirname, 'data');
 app.use(express.static(path.join(__dirname, 'public')));
 app.use('/data', express.static(DATA_DIR));
 
+// ============================================
 // Image Proxy Endpoint
+// Proxy images from Hugging Face with proper URL encoding
+// ============================================
 app.get('/api/proxy/*', (req, res) => {
     const assetPath = req.params[0];
-    if (!assetPath) return res.status(400).send('Invalid path');
 
-    const fetchUrl = (url) => {
-        https.get(url, (proxyRes) => {
-            // Handle Redirects
-            if (proxyRes.statusCode >= 300 && proxyRes.statusCode < 400 && proxyRes.headers.location) {
-                return fetchUrl(proxyRes.headers.location);
+    if (!assetPath) {
+        return res.status(400).json({ error: 'Missing asset path' });
+    }
+
+    const MAX_REDIRECTS = 5;
+    const TIMEOUT_MS = 30000; // 30 seconds timeout
+
+    // Build properly encoded URL
+    const targetUrl = encodeURI(`${getHFAssetBase()}/${assetPath}`);
+
+    const fetchWithRedirects = (url, redirectCount = 0) => {
+        if (redirectCount > MAX_REDIRECTS) {
+            console.error('[Proxy] Too many redirects');
+            if (!res.headersSent) {
+                return res.status(502).json({ error: 'Too many redirects' });
             }
+            return;
+        }
 
-            if (proxyRes.statusCode !== 200) {
-                return res.status(proxyRes.statusCode).send('Error fetching image');
+        const request = https.get(url, { timeout: TIMEOUT_MS }, (proxyRes) => {
+            const { statusCode, headers } = proxyRes;
+
+            // Handle redirects (301, 302, 303, 307, 308)
+            if (statusCode >= 300 && statusCode < 400 && headers.location) {
+                return fetchWithRedirects(headers.location, redirectCount + 1);
             }
 
-            // Forward content-type
-            if (proxyRes.headers['content-type']) {
-                res.setHeader('Content-Type', proxyRes.headers['content-type']);
+            // Handle non-success status codes
+            if (statusCode !== 200) {
+                console.error(`[Proxy] Upstream error: ${statusCode} for ${url.substring(0, 80)}`);
+                if (!res.headersSent) {
+                    return res.status(statusCode).json({
+                        error: 'Failed to fetch resource',
+                        upstream_status: statusCode
+                    });
+                }
+                return;
             }
 
-            // Cache control
+            // Forward response headers
+            if (headers['content-type']) {
+                res.setHeader('Content-Type', headers['content-type']);
+            }
+            if (headers['content-length']) {
+                res.setHeader('Content-Length', headers['content-length']);
+            }
+
+            // Set caching headers (1 hour for images)
             res.setHeader('Cache-Control', 'public, max-age=3600');
+            res.setHeader('X-Proxy-Source', 'huggingface');
 
+            // Stream response to client
             proxyRes.pipe(res);
-        }).on('error', (err) => {
-            console.error('Proxy error:', err);
-            if (!res.headersSent) res.status(500).send('Proxy error');
+
+            // Handle stream errors
+            proxyRes.on('error', (err) => {
+                console.error('[Proxy] Stream error:', err.message);
+                if (!res.headersSent) {
+                    res.status(500).json({ error: 'Stream error' });
+                }
+            });
+        });
+
+        // Handle request errors
+        request.on('error', (err) => {
+            console.error('[Proxy] Request error:', err.message);
+            if (!res.headersSent) {
+                res.status(502).json({ error: 'Failed to connect to upstream' });
+            }
+        });
+
+        // Handle timeout
+        request.on('timeout', () => {
+            console.error('[Proxy] Request timeout');
+            request.destroy();
+            if (!res.headersSent) {
+                res.status(504).json({ error: 'Upstream timeout' });
+            }
         });
     };
 
-    fetchUrl(`${getHFAssetBase()}/${assetPath}`);
+    fetchWithRedirects(targetUrl);
 });
 
 // Helper: Get local stories
@@ -265,25 +322,35 @@ app.get('/api/stories/:story/chapters/:chapter/images', (req, res) => {
     }
 });
 
-// Fallback to index.html for SPA routes
-app.get('*', (req, res) => {
-    res.sendFile(path.join(__dirname, 'public', 'index.html'));
-});
-
 // API: Get cache status and manual refresh
 app.get('/api/hf-status', (req, res) => {
     res.json(getHFCacheStatus());
 });
 
+// Refresh HF data - supports both GET and POST
+app.get('/api/refresh', async (req, res) => {
+    try {
+        const result = await forceRefreshHFData();
+        res.json({ success: true, ...result });
+    } catch (error) {
+        res.status(500).json({ success: false, error: 'Failed to refresh' });
+    }
+});
+
 app.post('/api/refresh', async (req, res) => {
     try {
         const result = await forceRefreshHFData();
-        res.json(result);
+        res.json({ success: true, ...result });
     } catch (error) {
-        res.status(500).json({ error: 'Failed to refresh' });
+        res.status(500).json({ success: false, error: 'Failed to refresh' });
     }
 });
 
+// Fallback to index.html for SPA routes - MUST BE LAST
+app.get('*', (req, res) => {
+    res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+
 // Start server and fetch data
 app.listen(PORT, async () => {
     console.log(`🚀 Web Truyện is running at http://localhost:${PORT}`);