2. Phân tích hệ thống
2.1 Cấu trúc thư mục dự án
Ebook2LateX/
├── .git/ # Thư mục ẩn của Git
├── .gitignore # Khai báo các tập không đưa vào Git
├── docker-compose.yml # File điều phối toàn bộ hệ thống Docker
├── backend/ # Python (FastAPI)
│ ├── Dockerfile # Cách đóng gói Backend
│ ├── app/
│ │ ├── main.py # Điểm khởi đầu của API
│ │ ├── api/ # Các endpoint (upload, process, save)
│ │ ├── core/ # Cấu hình hệ thống, OCR model loading
│ │ ├── models/ # Định nghĩa bảng database (SQLAlchemy)
│ │ ├── services/ # Logic xử lý PDF & OCR (Parse tool)
│ │ └── schemas/ # Pydantic models (Validation dữ liệu)
│ ├── uploads/ # Lưu tạm file PDF người dùng gửi lên
│ ├── requirements.txt
│ └── .env # Biến môi trường (DB_URL, API_KEY)
├── frontend/ # React (Vite)
│ ├── Dockerfile # Cách đóng gói Frontend
│ ├── src/
│ │ ├── components/ # MathLiveEditor, PDFUploader, Preview
│ │ ├── hooks/ # Custom hooks xử lý logic LaTeX
│ │ ├── services/ # Kết nối API tới Backend
│ │ └── App.jsx
│ ├── package.json
│ └── public/
2.2 Các thành phần logic chính
A. Backend: Bộ máy Parse tool
Đây là phần quan trọng nhất để giải quyết yêu cầu [FR1]
- Xử lý PDF: Dùng thư viện PyMuPDF (fitz) để trích xuất hình ảnh từ PDF
- OCR Toán học: Để chuyển hình ảnh công thức sang LaTeX, sử dụng mô hình pix2tex (LaTeX-OCR)
- API: Khi nhận tập tin PDF, Backend sẽ cắt các vùng chứa công thức, chạy qua model OCR và trả về chuỗi LaTeX cho Frontend
B. Frontend: Trình soạn thảo hai chiều (React + MathLive)
Để giải quyết yêu cầu [FR2] (sửa bên này cập nhật bên kia):
- MathLive: Sử dụng thư viện mathlive (JavaScript). Thư viện này cung cấp một <math-field> có thể lắng nghe sự kiện thay đổi
- Logic đồng bộ: Tạo một State trong React (ví dụ: latexContent)
+ Khi người dùng gõ vào ô Textarea (LaTeX): Cập nhật State -> MathField render lại
+ Khi người dùng sửa trên MathField: Lấy giá trị .value (dạng latex) -> Cập nhật State -> Textarea cập nhật theo
C. Database: Lưu trữ (PostgreSQL)
Giải quyết yêu cầu [FR3]:
- Bảng dữ liệu cơ bản: Documents, FormulaEntries, Users, Logs
2.3 Công nghệ chi tiết
- Backend Framework: FastAPI. Framework này chạy nhanh, hỗ trợ xử lý bất đồng bộ tốt khi gọi các model AI nặng
- OCR Library: pix2tex hoặc sử dụng API của Mathpix (nếu muốn độ chính xác tuyệt đối mà không cần tự train model)
- Frontend UI: Tailwind CSS (để dàn trang giao diện chỉnh sửa nhanh chóng)
- Frontend Framework: React.js — Dùng để quản lý trạng thái (State) của công thức toán học và điều khiển luồng dữ liệu giữa các thành phần
- Math Library: MathLive — Thư viện chuyên biệt nhúng vào React để hiển thị và chỉnh sửa ký hiệu toán học trực quan
- ORM: SQLAlchemy (để làm việc với PostgreSQL một cách chuyên nghiệp)
2.4 Bài tập và câu hỏi
Bài tập
Bài 2a. Dựa vào nội dung phân tích hệ thống của dự án, hoàn thành bảng sau:
Câu hỏi
Câu 2.1 Trong dự án Ebook2LateX, thư viện nào được sử dụng ở Backend để thực hiện nhiệm vụ trích xuất hình ảnh từ tập tin PDF?
A. MathLive
B. PyMuPDF (fitz)
C. Tailwind CSS
D. Pydantic
Câu 2.2 Tại sao hệ thống Ebook2LateX lại sử dụng React State (ví dụ: latexContent) để quản lý dữ liệu trong trình soạn thảo hai chiều?
A. Để lưu trữ vĩnh viễn công thức vào cơ sở dữ liệu PostgreSQL ngay khi người dùng vừa gõ phím
B. Để đóng gói ứng dụng vào Docker container giúp triển khai lên server dễ dàng hơn
C. Giúp đồng bộ tức thời dữ liệu giữa ô nhập liệu LaTeX và hiển thị của MathLive
D. Để thay thế hoàn toàn thư viện MathLive trong việc nhận diện các ký hiệu toán học phức tạp
Câu 2.3 Một nhóm phát triển muốn triển khai dự án Ebook2LateX sao cho môi trường chạy ứng dụng của tất cả các thành viên (từ máy của lập trình viên đến máy chủ) đều giống hệt nhau, tránh lỗi "chạy được trên máy tôi nhưng không chạy được trên máy bạn". Dựa vào cấu trúc dự án, họ nên sử dụng các tập tin nào để thực hiện việc này?
A. .gitignore và .git
B. requirements.txt và package.json
C. main.py và App.jsx
D. Dockerfile và docker-compose.yml