3.1 Giai đoạn 1: Thiết lập nền tảng và Cơ sở dữ liệu
Giai đoạn này chuẩn bị môi trường để thực hiện yêu cầu [FR3]
[GD1.1] Khởi tạo dự án
- Tạo cấu trúc thư mục gồm tên dự án Ebook2LateX, backend/ và frontend/ như sơ đồ
- Khởi tạo Git
- Tạo file: .gitignore
- Tạo repo trên Github
[GD1.2] Cài đặt cơ sở dữ liệu
- Cài đặt PostgreSQL
- Tạo database
- Cấu hình chuỗi kết nối trong tập tin .env
- Tạo các bảng dữ liệu
[GD1.3] Cấu hình Backend: Cài đặt FastAPI và SQLAlchemy. Kết nối thành công từ Python đến PostgreSQL để sẵn sàng ghi dữ liệu
[GD1.4] Docker hóa môi trường phát triển
- Tạo Dockerfile cho Backend: Định nghĩa môi trường chạy Python, cài đặt các thư viện OCR và FastAPI
- Tạo Dockerfile cho Frontend: Định nghĩa môi trường chạy Node.js để build ứng dụng React
- Tạo docker-compose.yml: Đây là "nhạc trưởng" điều phối 3 dịch vụ: db: Chạy hình ảnh của PostgreSQL; backend: Chạy mã FastAPI; frontend: Chạy mã React
3.2 Giai đoạn 2: Xây dựng "Parse tool" (Xử lý PDF & OCR)
Giai đoạn này tập trung vào việc giải quyết yêu cầu [FR1]
[GD2.1] Trích xuất hình ảnh từ PDF: Sử dụng thư viện PyMuPDF để đọc tập tin PDF và cắt ra các vùng chứa công thức toán học
[GD2.2] Tích hợp Model OCR: Cài đặt mô hình pix2tex (LaTeX-OCR) vào thư mục services/
[GD2.3] Tạo API xử lý: Viết endpoint trong FastAPI để nhận tập tin PDF từ người dùng, chạy qua quy trình OCR và trả về chuỗi ký tự LaTeX
3.3 Giai đoạn 3: Phát triển Giao diện và Logic đồng bộ
Giai đoạn này hiện thực hóa yêu cầu [FR2] về tính tương tác
[GD3.1] Khởi tạo Frontend: Sử dụng React (Vite) và Tailwind CSS để dựng giao diện cơ bản gồm khu vực tải tập tin và khu vực biên tập
[GD3.2] Tích hợp MathLive: Nhúng thành phần <math-field> vào ứng dụng để hiển thị công thức trực quan
[GD3.3] Lập trình đồng bộ hai chiều:
+ Tạo State latexContent trong React
+ Viết logic để khi sửa ô văn bản (LaTeX raw), công thức trong MathLive tự động cập nhật
+ Ngược lại, khi sửa bằng biểu tượng trong MathLive, nội dung text LaTeX cũng thay đổi tương ứng
3.4 Giai đoạn 4: Hoàn thiện quy trình dữ liệu (Submit)
Kết nối các thành phần lại để hoàn tất yêu cầu [FR3]
[GD4.1] Kết nối Front-End và Back-End: Sử dụng thư viện axios để gửi nội dung LaTeX cuối cùng từ giao diện về API của FastAPI
[GD4.2] Xử lý lưu trữ: Backend nhận dữ liệu và sử dụng SQLAlchemy để lưu bản ghi vào PostgreSQL
3.5 Giai đoạn 5: Kiểm thử và Triển khai
[GD5.1] Kiểm thử (Testing): Thử nghiệm với các tập tin PDF toán học có độ phức tạp khác nhau để tinh chỉnh model OCR
[GD5.1] Đóng gói dự án: Viết tập tin docker-compose.yml để có thể chạy toàn bộ hệ thống (Web, API, DB) chỉ bằng một câu lệnh