Screenshot Guide for Duckling Documentation This guide lists all screenshots needed for the Duckling documentation. All screenshots should be captured in dark mode for consistency with the application's default theme.
Capture Settings Resolution : 1920x1080 or 2x retina (3840x2160)Format : PNGTheme : Dark mode (default)Browser : Chrome or Firefox (for consistent rendering)Window Size : Maximize or use a consistent width (1400px recommended) macOS Screenshot Commands ⌘ + Shift + 4 - Select area to capture⌘ + Shift + 4 + Space - Capture specific window⌘ + Shift + 5 - Screenshot toolbar with options Required Screenshots 1. Main UI (ui/ folder) Filename Description State/Notes dropzone-empty.pngEmpty dropzone ready for upload Initial state, no file selected dropzone-hover.pngDropzone with file hovering Show drag-over highlight effect dropzone-uploading.pngFile upload in progress Show progress indicator dropzone-batch.pngBatch mode enabled Multiple files selected header.pngApplication header Show logo, batch toggle, settings button history-panel.pngConversion history panel Show list of previous conversions history-search.pngHistory with search active Show search results
2. Settings Panel (settings/ folder) Filename Description State/Notes settings-ocr.pngOCR settings section Show backend dropdown, language, options settings-ocr-install.pngOCR backend installation Show "Install" button for uninstalled backend settings-ocr-tesseract.pngTesseract system install notice Show the manual installation instructions settings-tables.pngTable extraction settings Show mode selection, options settings-images.pngImage extraction settings Show all image options settings-enrichment.pngDocument enrichment settings Show all 4 enrichment toggles settings-enrichment-warning.pngEnrichment warning message Show warning when slow features enabled settings-performance.pngPerformance settings Show device, threads, timeout settings-chunking.pngRAG chunking settings Show max tokens, merge peers settings-output.pngOutput settings Show default format selection settings-reset.pngReset settings confirmation Show reset button and confirmation
3. Export Options (export/ folder) Filename Description State/Notes export-formats.pngExport format selection Show all available formats export-format-selected.pngFormat selected with checkmark Highlight selected format (e.g., HTML) preview-markdown-rendered.pngMarkdown preview (rendered) Show formatted markdown content preview-markdown-raw.pngMarkdown preview (raw) Show raw markdown source preview-html-rendered.pngHTML preview (rendered) Show rendered HTML with styling preview-html-raw.pngHTML preview (raw) Show raw HTML source code preview-json.pngJSON preview Show pretty-printed JSON preview-toggle.pngRendered/Raw toggle Close-up of the toggle buttons
4. Features (features/ folder) Filename Description State/Notes images-gallery.pngExtracted images gallery Show thumbnail grid images-lightbox.pngImage lightbox modal Show full-size image with navigation images-hover.pngImage hover actions Show view/download buttons on hover tables-list.pngExtracted tables list Show table cards with preview tables-download.pngTable download options Show CSV/image download buttons chunks-list.pngRAG chunks display Show chunk cards with metadata conversion-complete.pngConversion success message Show success header with stats conversion-progress.pngConversion in progress Show processing indicator confidence-display.pngOCR confidence score Show confidence percentage
Screenshot Workflow Step 1: Start the Application # Terminal 1 - Backend
cd backend
source venv/bin/activate
app.py
# Terminal 2 - Frontend
cd frontend
run dev
Step 2: Prepare Test Documents Have these ready for capturing different states: - A PDF with images and tables (for full feature demo) - A scanned document (for OCR demo) - A markdown file (for format conversion) - Multiple small files (for batch mode)
Step 3: Capture Sequence Start fresh - Clear history, reset settingsCapture empty states first - Dropzone, empty historyUpload a document - Capture upload statesCapture conversion results - All export tabsOpen settings - Capture each sectionToggle preview modes - Rendered vs raw for MD/HTML Step 4: Post-Processing Crop to remove browser chrome if needed Ensure consistent dimensions Optimize file size (use pngquant or similar) Verify dark mode colors are correct File Naming Convention Use lowercase with hyphens: settings-ocr.png Be descriptive: preview-markdown-rendered.png Include state when relevant: dropzone-hover.png Placeholder Status After capturing, update this checklist:
UI Screenshots Settings Screenshots Export Screenshots Feature Screenshots