realtimex-manifest-ai 0.1.0

Add your description here

Document Validator - Templates Structure

📁 Directory Structure

realtimex-ai-manifest-template/
├── templates/
│   ├── index.html          # HTML template
│   ├── css/
│   │   ├── main.css        # Global styles
│   │   ├── modal.css       # Modal and grid view styles
│   │   ├── tree.css        # Tree view styles
│   │   └── components.css  # UI components
│   └── js/                 # Application logic split by feature
│       ├── state.js
│       ├── icons.js
│       ├── utils.js
│       ├── overrides.js
│       ├── changelog.js
│       ├── analysis.js
│       ├── tree.js
│       ├── canvas.js
│       ├── render.js
│       ├── viewer.js
│       ├── verification.js
│       ├── ai-enhancements.js
│       └── events.js
├── batch_data/             # Batch data folders
│   └── {batch_id}/         # Each batch has its own folder
│       ├── registry.json   # Document registry for this batch
│       ├── summary.json    # Batch summary
│       ├── data/           # OCR JSON payloads
│       ├── enhanced_data/  # AI-enhanced data (optional)
│       ├── images/         # Rendered page images
│       └── documents/      # Original documents
├── user_data/              # User edits (auto-generated, git-ignored)
│   ├── overrides.json      # Field value overrides
│   ├── changelog.json      # Change history
│   ├── verifications.json  # Verification states
│   └── dismissed_ai.json   # Dismissed AI suggestions
├── server.py               # Python server with API endpoints
└── README.md

🚀 How to Run

1. Start the server

The application requires a Python server to save/load overrides:

cd /path/to/realtimex-ai-manifest-template
python3 server.py

The server will:

• Serve the application at http://localhost:8000
• Provide API endpoints for saving/loading overrides
• Automatically save changes to user_data/ folder
• Create the user_data/ folder if it doesn't exist

2. Open the dashboard

Navigate to:

http://localhost:8000/templates?batch_id={BATCH_ID}

Example:

http://localhost:8000/templates?batch_id=BATCH-VN-CN-2021-9982

Note: If you omit the batch_id parameter, the app will fallback to legacy paths (../data/, ../images/, etc.)

📝 Files

1. index.html

• Basic HTML shell
• Links to CSS and JavaScript modules
• Minimal body placeholder

2. CSS modules (templates/css/...)

• main.css: Global styles and CSS variables
• modal.css: Modal, grid view, and AI enhancement styles
• tree.css: Tree view styles
• components.css: UI components (tabs, badges, buttons)

3. JavaScript modules (templates/js/...)

• state.js: Shared data structures and UI state
• analysis.js: Data loading, validation logic, and batch URL parameter handling
• tree.js: Builds and renders the validation tree + related handlers
• render.js: List/document/table/grid rendering helpers
• canvas.js: Drawing utilities for the viewer and cropped previews
• viewer.js: Modal/viewer controls, zooming, and master evidence logic
• overrides.js: Data override management system for editing field values
• changelog.js: Changelog viewer UI for tracking all data modifications
• verification.js: Field verification system
• ai-enhancements.js: AI enhancement loading and application
• events.js: Global event wiring, search/tabs, resize handling, and document toggles
• icons.js & utils.js: Shared SVG icons + formatting helpers

✨ Features

Batch Data Loading

Load different batches using URL parameter:

?batch_id=BATCH-VN-CN-2021-9982

The app automatically loads from batch_data/{batch_id}/ folder.

Data Override System

The application includes a powerful override system that allows you to edit field values without modifying the original JSON files:

• Edit Values: Click the edit button (✏️) on any field value in the grid view to modify it
• Visual Indicators: Edited fields are highlighted with an "EDITED" badge
• Revert Changes: Use the revert button (↺) to restore original values
• File-based Storage: All overrides are automatically saved to user_data/overrides.json
• Change Log: View all modifications in the change log panel (clock icon in bottom-right)
• Auto-Save: Every change is immediately saved to disk

AI Enhancement System

If a document has AI-enhanced data in enhanced_data/ folder:

• Banner Notification: A banner appears at the top of the document fields panel
• Apply All: Click ✓ to apply all AI suggestions at once
• Dismiss: Click ✕ to hide the banner
• Individual Suggestions: Apply or dismiss suggestions field by field

Verification System

• Mark Fields as Verified: Toggle verification status on any validation
• Verification Statistics: Track verified vs. total fields
• Persistent State: Verifications are saved to user_data/verifications.json

Change Log Features

• Track All Changes: Every edit, revert, and clear action is recorded with timestamp
• Export/Import Backup: Create backups of your overrides or import from a backup file
• Clear All: Remove all overrides at once (with confirmation)
• Real-time Updates: Change count badge updates automatically

Responsive Design

• Desktop (≥1024px): Split-view with validation list and viewer side-by-side
• Mobile (<1024px): Full-screen modal viewer
• Auto-resize: UI automatically updates when resizing browser window

Dark/Light Theme

The application supports dark and light themes controlled via URL parameter:

Main Dashboard (index.html):

http://localhost:8000/templates?batch_id=BATCH-VN-CN-2021-9982&theme=dark
http://localhost:8000/templates?batch_id=BATCH-VN-CN-2021-9982&theme=light

Summary Page (summary.html):

http://localhost:8000/templates/summary.html?batch_id=BATCH-VN-CN-2021-9982&theme=dark

• Default theme is light if no parameter is specified
• Theme parameter: ?theme=dark or ?theme=light
• Summary page is designed for iframe embedding with minimal UI

🔧 Maintenance

Update CSS

Edit the modules under templates/css/

Update JavaScript

Edit the modules under templates/js/

Update HTML shell

Edit templates/index.html

⚠️ Notes

• Use python3 server.py instead of the basic HTTP server — the override system requires API endpoints for saving/loading data.
• JavaScript modules use batch_id URL parameter to determine data paths.
• On XL screens the dashboard/tree view stays on the left (scrollable) and previews render on the right.
• Data overrides are stored in files (in the user_data/ folder) — they persist across sessions and browsers.
• The user_data/ folder is automatically git-ignored to prevent committing user-specific data.