Development Practice of Zhuli Life Automatic Accounting Tool
开发背景
校园生活中的水费、接水及洗衣支出呈现零碎且频繁的特点。住理生活 App 目前缺乏直观的财务统计功能。手动记录此类微小支出效率低下。本项目旨在利用浏览器端技术实现消费记录的自动化提取与分析。
核心特性
图像识别录入
系统集成 OCR 技术。用户上传消费记录长截图即可完成数据采集。无需手动输入金额与时间。
本地化隐私保护
所有图像识别逻辑均在浏览器本地运行。数据存储于客户端 IndexedDB。信息不上传至任何服务器。隐私安全性得到底层保障。
多维度数据可视化
系统提供月度账单汇总。消费时段热力图展示生活规律。GitHub 风格的贡献图直观反映消费频次。
技术架构
前端框架
选用轻量级的 Alpine.js。逻辑层级清晰。适合小型单页应用的快速开发。
文字识别
集成 Tesseract.js 引擎。在浏览器端实现高性能 OCR 识别。支持复杂长图的文本解析。
数据持久化与可视化
利用 IndexedDB 实现大容量本地存储。确保页面刷新后数据不丢失。采用 Chart.js 绘制动态统计图表。
操作流程
- 获取截图：在住理生活 App 中截取消费记录长图。
- 上传解析：将截图上传至记账助手界面。
- 查阅报表：系统自动解析并生成统计图表。
- 数据导出：支持导出 CSV 或 JSON 格式文件进行二次分析。
注意事项
- 建议使用 PC 端浏览器以获得更佳的体验。
Project Online Address：Zhuli Life · Accounting Assistant
Open Source Repository：Tokisaki-Galaxy/statistics-zhulishenghuo
Development Background
Costs for water fees, water collection, and laundry in campus life are fragmented and frequent. The Zhuli Life App currently lacks intuitive financial statistics features. Manually recording such small expenses is inefficient. This project aims to utilize browser-side technology to achieve automated extraction and analysis of consumption records.
Core Features
Image Recognition for Data Entry
The system integrates OCR (Optical Character Recognition) technology. Users can upload long screenshots of their consumption records to complete data collection, eliminating the need for manual entry of amounts and timestamps.
Localized Privacy Protection
All image recognition logic runs locally within the browser. Data is stored in the client’s IndexedDB. Information is not uploaded to any server. Privacy and security are fundamentally guaranteed.
Multi-dimensional Data Visualization
The system provides monthly bill summaries. A heatmap of consumption times visualizes life patterns. A GitHub-style contribution chart intuitively reflects the frequency of expenses.
Technical Architecture
Frontend Framework
Alpine.js, a lightweight framework, was chosen for its clear logic hierarchy, making it suitable for rapid development of small single-page applications.
Text Recognition (OCR)
Integrated the Tesseract.js engine to achieve high-performance OCR recognition within the browser, supporting the parsing of text from complex, elongated images.
Data Persistence & Visualization
Leverages IndexedDB for large-capacity local storage, ensuring data persistence across page refreshes. Employs Chart.js to render dynamic statistical charts.
Operational Workflow
- Obtain Screenshot: Capture a long screenshot of the consumption records from the Zhuli Life App.
- Upload & Parse: Upload the screenshot to the Accounting Assistant interface.
- Review Reports: The system automatically parses the data and generates statistical charts.
- Data Export: Supports exporting data in CSV or JSON format for secondary analysis.
Notes
- Using a PC browser is recommended for an optimal experience.