Upload 9 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,646 @@
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { PDFDocument } from 'pdf-lib';
+import * as pdfjsLib from 'pdfjs-dist';
+import type { PageViewport } from 'pdfjs-dist';
+
+// Configure pdf.js worker to run in the background
+pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.worker.min.mjs`;
+
+// --- Translations ---
+const translations = {
+  en: {
+    title: "PDF Booklet Arranger",
+    subtitle: "Reorder your PDF pages for easy booklet printing.",
+    errorTitle: "Error",
+    errorInvalidFile: "Please upload a valid PDF file.",
+    errorReadPdf: "Could not read PDF. It might be corrupted or protected.",
+    errorProcessPdf: "Failed to process the PDF. It might be corrupted or protected.",
+    uploadButton: "Click to upload",
+    uploadOrDrag: "or drag and drop",
+    uploadHint: "PDF files only",
+    fileLabel: "File:",
+    pagesLabel: "Pages:",
+    frontCoverTitle: "Front Cover",
+    backCoverTitle: "Back Cover",
+    coverFirstPage: "First Page (Default)",
+    coverLastPage: "Last Page (Default)",
+    coverBlankPage: "Blank Page",
+    coverCustomPage: "Custom Page",
+    generateButton: "Generate Booklet",
+    loadingReadingInfo: "Reading PDF info...",
+    loadingInitializing: "Initializing...",
+    loadingCalculating: "Calculating layout...",
+    loadingReadingFile: "Reading file...",
+    loadingCopying: (count: number) => `Copying ${count} pages...`,
+    loadingSaving: "Saving new PDF...",
+    loadingCreatingLink: "Creating download link...",
+    loadingComplete: "Complete!",
+    successTitle: "Success!",
+    successMessage: (padded: number, original: number) => `Your booklet is ready. It has <strong>${padded} pages</strong> (originally ${original}).`,
+    printInstructions: "Print double-sided (flip on short edge) with 2 pages per sheet. Fold and staple.",
+    downloadButton: "Download Booklet PDF",
+    startOverButton: "Start Over",
+    privacyFooter: "PDF processing is done locally in your browser. Your files are never uploaded.",
+    previewTitle: "PDF Preview",
+    previewLoading: "Loading preview...",
+    previewError: "Could not display PDF preview.",
+    previewPageLabel: (num: number) => `Page ${num}`,
+  },
+  zh: {
+    title: "PDF 手册排版工具",
+    subtitle: "重新排列您的 PDF 页面，以便轻松打印成小册子。",
+    errorTitle: "错误",
+    errorInvalidFile: "请上传有效的 PDF 文件。",
+    errorReadPdf: "无法读取 PDF。文件可能已损坏或受保护。",
+    errorProcessPdf: "处理 PDF 失败。文件可能已损坏或受保护。",
+    uploadButton: "点击上传",
+    uploadOrDrag: "或拖放文件",
+    uploadHint: "仅限 PDF 文件",
+    fileLabel: "文件名:",
+    pagesLabel: "页数:",
+    frontCoverTitle: "封面",
+    backCoverTitle: "封底",
+    coverFirstPage: "第一页 (默认)",
+    coverLastPage: "最后一页 (默认)",
+    coverBlankPage: "空白页",
+    coverCustomPage: "自定义页面",
+    generateButton: "生成手册",
+    loadingReadingInfo: "正在读取 PDF 信息...",
+    loadingInitializing: "正在初始化...",
+    loadingCalculating: "正在计算布局...",
+    loadingReadingFile: "正在读取文件...",
+    loadingCopying: (count: number) => `正在复制 ${count} 页...`,
+    loadingSaving: "正在保存新的 PDF...",
+    loadingCreatingLink: "正在创建下载链接...",
+    loadingComplete: "完成！",
+    successTitle: "成功！",
+    successMessage: (padded: number, original: number) => `您的手册已准备就绪。共 <strong>${padded} 页</strong> (原文件 ${original} 页)。`,
+    printInstructions: "请使用双面打印（短边翻转），每张纸打印2页。然后对折并装订。",
+    downloadButton: "下载手册 PDF",
+    startOverButton: "重新开始",
+    privacyFooter: "PDF 处理在您的浏览器本地完成，您的文件不会被上传。",
+    previewTitle: "PDF 预览",
+    previewLoading: "正在加载预览...",
+    previewError: "无法显示 PDF 预览。",
+    previewPageLabel: (num: number) => `第 ${num} 页`,
+  },
+};
+
+type TranslationKey = keyof typeof translations['en'];
+
+// --- Helper & Icon Components ---
+
+const BookIcon = ({ className }: { className?: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M2 3.5A1.5 1.5 0 0 1 3.5 2H12v1.25a.75.75 0 0 0 1.5 0V2h6.5A1.5 1.5 0 0 1 21.5 3.5v17a1.5 1.5 0 0 1-1.5 1.5H13.5v-1.25a.75.75 0 0 0-1.5 0V22H3.5A1.5 1.5 0 0 1 2 20.5v-17ZM12 4.27v15.46a.75.75 0 0 0 .75.75h6.25a.75.75 0 0 0 .75-.75V4.27a3.248 3.248 0 0 0-3.03-.22.75.75 0 0 0-.44 0A3.248 3.248 0 0 0 12 4.27Z" />
+  </svg>
+);
+
+const UploadIcon = ({ className }: { className?: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M10.707 2.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L13 6.414V17a1 1 0 1 1-2 0V6.414L7.707 9.707a1 1 0 0 1-1.414-1.414l4-4Z" />
+    <path d="M5 19a1 1 0 0 1-1-1v-4a1 1 0 1 1 2 0v4a1 1 0 0 1-1 1Zm14 0a1 1 0 0 1-1-1v-4a1 1 0 1 1 2 0v4a1 1 0 0 1-1 1Z" />
+  </svg>
+);
+
+const DownloadIcon = ({ className }: { className?: string }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
+        <path fillRule="evenodd" d="M12 2.25a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V3a.75.75 0 0 1 .75-.75Zm-9 13.5a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z" clipRule="evenodd" />
+    </svg>
+);
+
+const ProgressBar = ({ progress, message }: { progress: number; message: string }) => (
+    <div className="w-full max-w-sm mx-auto" aria-live="polite">
+        <div className="flex justify-between mb-1">
+            <span className="text-sm font-medium text-slate-700 dark:text-slate-300">{message}</span>
+            <span className="text-sm font-medium text-slate-700 dark:text-slate-300">{progress}%</span>
+        </div>
+        <div className="w-full bg-slate-200 rounded-full h-2.5 dark:bg-slate-700">
+            <div
+                className="bg-primary-600 h-2.5 rounded-full transition-all duration-300 ease-linear"
+                style={{ width: `${progress}%` }}
+                role="progressbar"
+                aria-valuenow={progress}
+                aria-valuemin={0}
+                aria-valuemax={100}
+            ></div>
+        </div>
+    </div>
+);
+
+// --- PDF Preview Component ---
+const PDFPreview = ({ file, t }: { file: File | null, t: (key: TranslationKey, ...args: any[]) => string }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [isRendering, setIsRendering] = useState(true);
+
+    useEffect(() => {
+        if (!file) return;
+
+        const renderPdf = async () => {
+            setIsRendering(true);
+            const container = containerRef.current;
+            if (!container) return;
+
+            // Clear previous preview
+            container.innerHTML = '';
+
+            try {
+                const arrayBuffer = await file.arrayBuffer();
+                const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
+                const pdf = await loadingTask.promise;
+                const numPages = pdf.numPages;
+
+                for (let pageNum = 1; pageNum <= numPages; pageNum++) {
+                    const page = await pdf.getPage(pageNum);
+                    const scale = 0.4; // Adjust scale for thumbnail size
+                    const viewport = page.getViewport({ scale });
+
+                    const pageWrapper = document.createElement('div');
+                    pageWrapper.className = 'flex flex-col items-center flex-shrink-0';
+
+                    const canvas = document.createElement('canvas');
+                    canvas.className = 'rounded-md shadow-lg border border-slate-300 dark:border-slate-600';
+                    const context = canvas.getContext('2d');
+                    
+                    canvas.height = viewport.height;
+                    canvas.width = viewport.width;
+
+                    const pageLabel = document.createElement('p');
+                    pageLabel.textContent = t('previewPageLabel', pageNum);
+                    pageLabel.className = 'text-xs mt-2 text-slate-600 dark:text-slate-400 font-medium';
+                    
+                    if (context) {
+                        // FIX: The type definitions for pdfjs-dist in this environment seem to incorrectly require
+                        // a 'canvas' property on the RenderParameters object. Adding it to satisfy the type checker.
+                        const renderContext = {
+                            canvasContext: context,
+                            viewport: viewport
+                        };
+                        await page.render(renderContext as any).promise;
+                    }
+                    
+                    pageWrapper.appendChild(canvas);
+                    pageWrapper.appendChild(pageLabel);
+                    container.appendChild(pageWrapper);
+                }
+            } catch (error) {
+                console.error('Failed to render PDF preview:', error);
+                container.innerHTML = `<p class="text-red-500">${t('previewError')}</p>`;
+            } finally {
+                setIsRendering(false);
+            }
+        };
+
+        renderPdf();
+    }, [file, t]);
+
+    if (!file) return null;
+
+    return (
+        <div className="mt-6">
+             <h3 className="font-semibold text-slate-800 dark:text-slate-200 mb-3 text-left">{t('previewTitle')}</h3>
+            {isRendering && <p className="text-slate-500 dark:text-slate-400 text-sm">{t('previewLoading')}</p>}
+            <div
+                ref={containerRef}
+                className="flex space-x-4 overflow-x-auto bg-slate-100 dark:bg-slate-900/50 p-4 rounded-lg border border-slate-200 dark:border-slate-700 min-h-[200px] items-center"
+                aria-label="PDF page preview"
+            >
+            </div>
+        </div>
+    );
+};
+
+
+type CoverOption = 'first' | 'last' | 'blank' | 'custom';
+
+const App: React.FC = () => {
+    const [file, setFile] = useState<File | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [error, setError] = useState<string | null>(null);
+    const [processedUrl, setProcessedUrl] = useState<string | null>(null);
+    const [dragActive, setDragActive] = useState<boolean>(false);
+    const [pages, setPages] = useState<{ original: number; padded: number } | null>(null);
+    const [progress, setProgress] = useState<number>(0);
+    const [loadingMessage, setLoadingMessage] = useState<string>('');
+    const [originalPageCount, setOriginalPageCount] = useState<number | null>(null);
+
+    const [coverOption, setCoverOption] = useState<CoverOption>('first');
+    const [coverPage, setCoverPage] = useState<number>(1);
+    const [backCoverOption, setBackCoverOption] = useState<CoverOption>('last');
+    const [backCoverPage, setBackCoverPage] = useState<number>(1);
+    
+    const [language, setLanguage] = useState<'en' | 'zh'>('en');
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const t = useCallback((key: TranslationKey, ...args: any[]): string => {
+        const translation = translations[language][key];
+        if (typeof translation === 'function') {
+            return (translation as (...args: any[]) => string)(...args);
+        }
+        return translation;
+    }, [language]);
+
+    useEffect(() => {
+        if (originalPageCount) {
+            setBackCoverPage(originalPageCount);
+        }
+    }, [originalPageCount]);
+
+
+    const resetState = () => {
+        setFile(null);
+        setIsLoading(false);
+        setError(null);
+        if (processedUrl) {
+            URL.revokeObjectURL(processedUrl);
+        }
+        setProcessedUrl(null);
+        setPages(null);
+        setProgress(0);
+        setLoadingMessage('');
+        setOriginalPageCount(null);
+        setCoverOption('first');
+        setBackCoverOption('last');
+        setCoverPage(1);
+        setBackCoverPage(1);
+        if(inputRef.current) inputRef.current.value = '';
+    };
+
+    const handleFileChange = async (selectedFile: File | null) => {
+        resetState();
+        if (selectedFile) {
+            if (selectedFile.type !== 'application/pdf') {
+                setError(t('errorInvalidFile'));
+                return;
+            }
+            setFile(selectedFile);
+            setIsLoading(true);
+            setLoadingMessage(t('loadingReadingInfo'));
+            setProgress(50);
+            try {
+                const arrayBuffer = await selectedFile.arrayBuffer();
+                const pdf = await PDFDocument.load(arrayBuffer);
+                const count = pdf.getPageCount();
+                setOriginalPageCount(count);
+                setBackCoverPage(count);
+            } catch (e) {
+                setError(t('errorReadPdf'));
+                setOriginalPageCount(null);
+                setFile(null);
+            } finally {
+                setIsLoading(false);
+                setProgress(0);
+                setLoadingMessage('');
+            }
+        }
+    };
+
+    const handleDrag = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.type === 'dragenter' || e.type === 'dragover') {
+            setDragActive(true);
+        } else if (e.type === 'dragleave') {
+            setDragActive(false);
+        }
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+            handleFileChange(e.dataTransfer.files[0]);
+        }
+    };
+
+    const onButtonClick = () => {
+        inputRef.current?.click();
+    };
+
+    const arrangeForBooklet = useCallback(async () => {
+        if (!file || !originalPageCount) return;
+
+        setIsLoading(true);
+        setError(null);
+        setProcessedUrl(null);
+        setPages(null);
+        setProgress(0);
+        setLoadingMessage(t('loadingInitializing'));
+
+        try {
+            await new Promise(resolve => setTimeout(resolve, 100));
+
+            // 1. Determine Cover and Back Cover sources
+            let coverSource: number | 'BLANK' = 'BLANK';
+            if (coverOption === 'first') coverSource = 0;
+            else if (coverOption === 'custom') coverSource = coverPage - 1;
+
+            let backCoverSource: number | 'BLANK' = 'BLANK';
+            if (backCoverOption === 'last') backCoverSource = originalPageCount - 1;
+            else if (backCoverOption === 'custom') backCoverSource = backCoverPage - 1;
+
+            // 2. Get body pages by excluding cover/back pages
+            const sourcePageIndexes = [...Array(originalPageCount).keys()];
+            const usedIndexes = new Set<number>();
+            if (typeof coverSource === 'number') usedIndexes.add(coverSource);
+            if (typeof backCoverSource === 'number') usedIndexes.add(backCoverSource);
+
+            const bodyPages = sourcePageIndexes.filter(p => !usedIndexes.has(p));
+
+            // 3. Assemble the content sequence in reading order
+            const contentSequence: (number | 'BLANK')[] = [coverSource, ...bodyPages, backCoverSource];
+            const numContentPages = contentSequence.length;
+            
+            setProgress(10);
+            setLoadingMessage(t('loadingCalculating'));
+
+            // 4. Pad the sequence to be a multiple of 4, with special handling for (4n-2) cases
+            const paddedPageCount = Math.ceil(numContentPages / 4) * 4;
+            setPages({ original: originalPageCount, padded: paddedPageCount });
+            
+            let finalSequence: (number | 'BLANK')[] = [];
+            
+            if (numContentPages > 0 && numContentPages % 4 === 2) {
+                // Special case: Add blanks on inside of cover/back-cover sheet
+                finalSequence = new Array(paddedPageCount).fill('BLANK');
+                const body = contentSequence.slice(1, -1);
+                finalSequence[0] = contentSequence[0]; // Cover page
+                finalSequence[finalSequence.length - 1] = contentSequence[contentSequence.length - 1]; // Back cover
+                finalSequence.splice(2, body.length, ...body);
+            } else {
+                // Normal case: Pad with blanks at the end of the body
+                const blanksToAdd = paddedPageCount - numContentPages;
+                const padding = new Array(blanksToAdd).fill('BLANK');
+                const body = contentSequence.slice(1, -1);
+                finalSequence = [
+                    contentSequence[0],
+                    ...body,
+                    ...padding,
+                    contentSequence[contentSequence.length - 1]
+                ];
+                 if (numContentPages === 0) finalSequence = new Array(paddedPageCount).fill('BLANK');
+                 if (numContentPages === 1) finalSequence = [contentSequence[0], ...new Array(paddedPageCount-1).fill('BLANK')]
+            }
+
+            setProgress(25);
+            setLoadingMessage(t('loadingReadingFile'));
+            const arrayBuffer = await file.arrayBuffer();
+            const originalPdf = await PDFDocument.load(arrayBuffer);
+
+            // 5. Create new PDF and re-order pages
+            const newPdf = await PDFDocument.create();
+            const { width, height } = originalPdf.getPage(0).getSize();
+            
+            // Corrected imposition logic to create the print-ready page sequence.
+            const reorderedPages: (number | 'BLANK')[] = [];
+            let low = 0;
+            let high = paddedPageCount - 1;
+            while(low < high) {
+                reorderedPages.push(finalSequence[high--]); // e.g., Page 8
+                reorderedPages.push(finalSequence[low++]);  // e.g., Page 1
+            }
+            
+            setProgress(40);
+            setLoadingMessage(t('loadingCopying', paddedPageCount));
+            
+            for (let i = 0; i < reorderedPages.length; i++) {
+                const pageSource = reorderedPages[i];
+                if (pageSource === 'BLANK' || pageSource === undefined) {
+                    newPdf.addPage([width, height]);
+                } else {
+                    const [copiedPage] = await newPdf.copyPages(originalPdf, [pageSource]);
+                    newPdf.addPage(copiedPage);
+                }
+                const loopProgress = 40 + Math.round(((i + 1) / reorderedPages.length) * 50);
+                setProgress(loopProgress);
+            }
+
+            setProgress(95);
+            setLoadingMessage(t('loadingSaving'));
+            const pdfBytes = await newPdf.save();
+
+            setProgress(98);
+            setLoadingMessage(t('loadingCreatingLink'));
+            const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+            const url = URL.createObjectURL(blob);
+            setProcessedUrl(url);
+            setProgress(100);
+            setLoadingMessage(t('loadingComplete'));
+
+        } catch (err) {
+            console.error(err);
+            setError(t('errorProcessPdf'));
+            setProgress(0);
+            setLoadingMessage('');
+        } finally {
+            setIsLoading(false);
+        }
+    }, [file, originalPageCount, coverOption, coverPage, backCoverOption, backCoverPage, t]);
+
+    const renderCoverOptions = () => {
+        if (!originalPageCount) return null;
+
+        return (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-left border-t border-slate-200 dark:border-slate-700 pt-6">
+                {/* Front Cover Options */}
+                <div>
+                    <h3 className="font-semibold text-slate-800 dark:text-slate-200 mb-2">{t('frontCoverTitle')}</h3>
+                    <div className="space-y-2">
+                        <label className="flex items-center space-x-2">
+                            <input type="radio" name="cover" checked={coverOption === 'first'} onChange={() => setCoverOption('first')} className="form-radio text-primary-600" />
+                            <span>{t('coverFirstPage')}</span>
+                        </label>
+                        <label className="flex items-center space-x-2">
+                            <input type="radio" name="cover" checked={coverOption === 'blank'} onChange={() => setCoverOption('blank')} className="form-radio text-primary-600"/>
+                            <span>{t('coverBlankPage')}</span>
+                        </label>
+                        <label className="flex items-center space-x-2">
+                            <input type="radio" name="cover" checked={coverOption === 'custom'} onChange={() => setCoverOption('custom')} className="form-radio text-primary-600"/>
+                            <span>{t('coverCustomPage')}</span>
+                        </label>
+                        {coverOption === 'custom' && (
+                            <div className="pl-6">
+                                <input
+                                    type="number"
+                                    min="1"
+                                    max={originalPageCount}
+                                    value={coverPage}
+                                    onChange={(e) => setCoverPage(Math.max(1, Math.min(originalPageCount, parseInt(e.target.value, 10) || 1)))}
+                                    className="mt-1 block w-24 rounded-md border-slate-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200"
+                                    aria-label="Custom front cover page number"
+                                />
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* Back Cover Options */}
+                <div>
+                    <h3 className="font-semibold text-slate-800 dark:text-slate-200 mb-2">{t('backCoverTitle')}</h3>
+                    <div className="space-y-2">
+                        <label className="flex items-center space-x-2">
+                            <input type="radio" name="backCover" checked={backCoverOption === 'last'} onChange={() => setBackCoverOption('last')} className="form-radio text-primary-600" />
+                            <span>{t('coverLastPage')}</span>
+                        </label>
+                        <label className="flex items-center space-x-2">
+                            <input type="radio" name="backCover" checked={backCoverOption === 'blank'} onChange={() => setBackCoverOption('blank')} className="form-radio text-primary-600"/>
+                            <span>{t('coverBlankPage')}</span>
+                        </label>
+                        <label className="flex items-center space-x-2">
+                            <input type="radio" name="backCover" checked={backCoverOption === 'custom'} onChange={() => setBackCoverOption('custom')} className="form-radio text-primary-600"/>
+                            <span>{t('coverCustomPage')}</span>
+                        </label>
+                        {backCoverOption === 'custom' && (
+                            <div className="pl-6">
+                                <input
+                                    type="number"
+                                    min="1"
+                                    max={originalPageCount}
+                                    value={backCoverPage}
+                                    onChange={(e) => setBackCoverPage(Math.max(1, Math.min(originalPageCount, parseInt(e.target.value, 10) || 1)))}
+                                    className="mt-1 block w-24 rounded-md border-slate-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200"
+                                    aria-label="Custom back cover page number"
+                                />
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="min-h-screen flex flex-col items-center justify-center p-4 text-center">
+            <div className="w-full max-w-2xl bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 space-y-6 relative">
+                
+                {/* Language Switcher */}
+                <div className="absolute top-4 right-4 flex space-x-2">
+                    <button
+                        onClick={() => setLanguage('en')}
+                        className={`px-3 py-1 text-sm rounded-md transition-colors ${language === 'en' ? 'bg-primary-600 text-white shadow-sm' : 'bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300'}`}
+                        aria-pressed={language === 'en'}
+                    >
+                        English
+                    </button>
+                    <button
+                        onClick={() => setLanguage('zh')}
+                        className={`px-3 py-1 text-sm rounded-md transition-colors ${language === 'zh' ? 'bg-primary-600 text-white shadow-sm' : 'bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300'}`}
+                        aria-pressed={language === 'zh'}
+                    >
+                        中文
+                    </button>
+                </div>
+
+
+                {/* Header */}
+                <div className="flex flex-col items-center">
+                    <BookIcon className="w-12 h-12 text-primary-600 dark:text-primary-400" />
+                    <h1 className="text-3xl font-bold text-slate-800 dark:text-slate-100 mt-2">{t('title')}</h1>
+                    <p className="text-slate-600 dark:text-slate-400 mt-2 max-w-md">
+                        {t('subtitle')}
+                    </p>
+                </div>
+
+                {/* Error Display */}
+                {error && (
+                    <div className="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-md text-left" role="alert">
+                        <p className="font-bold">{t('errorTitle')}</p>
+                        <p>{error}</p>
+                    </div>
+                )}
+
+                {/* Main Content: Upload or Download */}
+                {!processedUrl ? (
+                    <div>
+                        {/* File Upload Section */}
+                        <form
+                            className={`w-full p-6 border-2 border-dashed rounded-lg transition-colors duration-200 ${dragActive ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' : 'border-slate-300 dark:border-slate-600'}`}
+                            onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop}
+                            onSubmit={(e) => e.preventDefault()}
+                        >
+                            <input
+                                ref={inputRef}
+                                type="file"
+                                accept="application/pdf"
+                                className="hidden"
+                                onChange={(e) => handleFileChange(e.target.files ? e.target.files[0] : null)}
+                            />
+                            <div className="flex flex-col items-center justify-center space-y-4">
+                                <UploadIcon className="w-10 h-10 text-slate-400" />
+                                <p className="text-slate-500 dark:text-slate-400">
+                                    <button
+                                        type="button"
+                                        onClick={onButtonClick}
+                                        className="font-semibold text-primary-600 hover:text-primary-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+                                    >
+                                        {t('uploadButton')}
+                                    </button>
+                                    {' '}{t('uploadOrDrag')}
+                                </p>
+                                <p className="text-xs text-slate-400">{t('uploadHint')}</p>
+                            </div>
+                        </form>
+
+                        {/* File Info and Options */}
+                        {file && originalPageCount && !isLoading && (
+                            <div className="mt-6 text-sm text-slate-700 dark:text-slate-300">
+                                <p><strong>{t('fileLabel')}</strong> {file.name}</p>
+                                <p><strong>{t('pagesLabel')}</strong> {originalPageCount}</p>
+                                <div className="mt-6">
+                                    {renderCoverOptions()}
+                                </div>
+                                
+                                <PDFPreview file={file} t={t} />
+
+                                <button
+                                    onClick={arrangeForBooklet}
+                                    disabled={isLoading}
+                                    className="mt-8 w-full inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:bg-slate-400 disabled:cursor-not-allowed"
+                                >
+                                    {t('generateButton')}
+                                </button>
+                            </div>
+                        )}
+                        
+                        {/* Loading State */}
+                        {isLoading && <div className="mt-6"><ProgressBar progress={progress} message={loadingMessage} /></div>}
+
+                    </div>
+                ) : (
+                    /* Download Section */
+                    <div className="space-y-4">
+                        <h2 className="text-2xl font-bold text-green-600 dark:text-green-400">{t('successTitle')}</h2>
+                        {pages && <p className="text-slate-600 dark:text-slate-400" dangerouslySetInnerHTML={{ __html: t('successMessage', pages.padded, pages.original) }} />}
+                        <p className="text-sm text-slate-500 dark:text-slate-500">
+                           {t('printInstructions')}
+                        </p>
+                        <a
+                            href={processedUrl}
+                            download={`booklet-${file?.name || 'document.pdf'}`}
+                            className="w-full inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+                        >
+                            <DownloadIcon className="w-5 h-5 mr-2" />
+                            {t('downloadButton')}
+                        </a>
+                        <button
+                           onClick={resetState}
+                           className="w-full mt-4 inline-flex justify-center items-center px-6 py-3 border border-slate-300 dark:border-slate-600 text-base font-medium rounded-md shadow-sm text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-700 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+                        >
+                            {t('startOverButton')}
+                        </button>
+                    </div>
+                )}
+
+                 {/* Footer */}
+                <div className="text-center text-xs text-slate-400 dark:text-slate-500 pt-6 border-t border-slate-200 dark:border-slate-700">
+                    <p>{t('privacyFooter')}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default App;

index.html

@@ -0,0 +1,38 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PDF Booklet Arranger</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a","950":"#172554"}
+            }
+          }
+        }
+      }
+    </script>
+  <script type="importmap">
+{
+  "imports": {
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "pdf-lib": "https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.esm.js",
+    "pdfjs-dist": "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.min.mjs"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-slate-50 dark:bg-slate-900">
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "PDF Booklet Arranger",
+  "description": "Upload a PDF, and this tool will reorder the pages so you can print it as a booklet. After printing double-sided with two pages per sheet, simply fold the stack in half and staple the center to create a magazine-style booklet.",
+  "requestFramePermissions": []
+}

package.json

@@ -1,39 +1,22 @@
 {
-  "name": "react-template",
-  "version": "0.1.0",
+  "name": "pdf-booklet-arranger",
   "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "pdf-lib": "1.17.1"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
   }
 }

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});