UI Styling & Structure
Relevant source files
The following files were used as context for generating this wiki page:
The UI Styling & Structure of the Rosy Tax Processor provides a streamlined, web-based interface for document ingestion, data validation, and final tax document generation. It serves as the primary interaction point for users to upload tax documents (W-2, 1099), review AI-extracted fields, and finalize their Form 1040. Sources: README.md:9-16, frontend/index.html:10-25
The system utilizes a modern single-page approach where the initial HTML structure is defined statically, while the data-driven "Review & Edit" and "Aggregated Preview" sections are generated dynamically via JavaScript based on backend API responses. Sources: frontend/app.js:41-115, backend.py:17-38
Core Layout & HTML Structure
The application's structural foundation is defined in index.html. It uses a semantic <main> wrapper and a focused <section> for the primary upload workflow. Sources: frontend/index.html:11-12
Main Components
The UI is divided into several functional zones:
- Upload Form: A standard form capturing filing status, optional withholding, and multiple file selections (PDF, TXT, PNG, JPG). Sources: frontend/index.html:14-26
- Status Indicator: An ARIA-live region used to communicate "Uploading...", "Processing...", or error states to the user. Sources: frontend/index.html:27, frontend/app.js:7-35
- Result Container: A dynamic container where processing results, per-file review forms, and the finalization controls are injected. Sources: frontend/index.html:28, frontend/app.js:41
The diagram shows the hierarchical relationship of the static and dynamic UI components within the main application view. Sources: frontend/index.html:12-28, frontend/app.js:41-86
Visual Styling
The visual presentation is managed via static.css, employing a clean, minimalist aesthetic designed for readability. Sources: frontend/static.css:1-6
| Element | Style Properties | Purpose |
|---|---|---|
body | font-family: Arial, sans-serif; margin: 20px; | Sets global typography and spacing. |
main | max-width: 900px; margin: auto; | Centers the application with a readable width. |
#result | background: #f9f9f9; padding: 12px; border-radius: 6px; | Distinguishes output data from the input form. |
pre | background: #fff; border: 1px solid #eee; | Formats raw JSON data for technical review. |
label | display: block; margin: 8px 0; | Ensures form elements stack vertically. |
Sources: frontend/static.css:1-6
Dynamic Content Generation
The UI heavily relies on app.js to transform JSON responses from the /upload and /finalize endpoints into interactive DOM elements. Sources: frontend/app.js:1-115, backend.py:53-128
Per-File Review Interface
When multiple files are uploaded, the system generates a review box for each file. This allows users to manually correct OCR/extraction errors before aggregation. Sources: frontend/app.js:52-78
- Logic: Iterates through
j.per_filearray. - Structure: Each box contains the file path, document type, and a generated form with inputs for every extracted field.
- Interaction: A "Save changes" button updates the local data object and triggers a re-render of the Aggregated Preview. Sources: frontend/app.js:57-81
Aggregated Preview & Finalization
The renderAggregated function provides a summary of the combined data and the final action button. Sources: frontend/app.js:86-114
This sequence details the interaction flow between the UI and the backend during the document processing and finalization stages. Sources: frontend/app.js:7-110, backend.py:53-143
Key Frontend Logic Components
| Function/Element | File | Description |
|---|---|---|
upload-form listener | app.js | Prevents default submission, bundles FormData, and performs the /upload fetch. |
renderResult(j) | app.js | Main entry point for clearing previous results and building the new UI from JSON. |
renderAggregated(j) | app.js | Builds the summary section and manages the /finalize request flow. |
finalize button | app.js | Handles blob conversion and dynamic creation of the <a> download link for the PDF. |
Sources: frontend/app.js:4-40, frontend/app.js:86-115
Data Handling
The frontend maintains state within the JSON response object j. When a user edits a field in the Review UI, the listener updates pf.fields[e.name] directly in the object. This updated object is then used as the payload for the final PDF generation. Sources: frontend/app.js:74-81, frontend/app.js:98-100
Conclusion
The UI Styling & Structure of the Tax Processor prioritize functional transparency, allowing users to move from raw file uploads to a validated, aggregated summary. By combining static CSS/HTML with dynamic JavaScript-driven review forms, the system ensures that AI-extracted data can be human-verified before being committed to a final Form 1040 PDF. Sources: README.md:20-22, frontend/app.js:86-115