Công cụ hỗ trợ xây dựng web frontend từ ảnh đầu vào ban đầu

Khóa luận xây dựng công cụ tạo web frontend từ ảnh tại Trường ĐH Sư phạm Kỹ thuật TP.HCM

• Tác giả: Lê Phúc Hậu
• Người hướng dẫn: ThS. Lê Minh Tân
• Trường học: Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Công cụ hỗ trợ xây dựng web frontend từ ảnh đầu vào ban đầu
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2025
• Địa điểm: TP. Hồ Chí Minh

Tóm tắt

I. Tổng quan về công cụ hỗ trợ xây dựng web frontend từ ảnh

Nghiên cứu công cụ hỗ trợ xây dựng web frontend từ ảnh là một đề tài tốt nghiệp kỹ sư ngành Công nghệ Thông tin tại Trường Đại học Sư phạm Kỹ thuật TP.HCM. Dự án do sinh viên Lê Phúc Hậu và Nguyễn Quang Vinh thực hiện dưới sự hướng dẫn chuyên môn của ThS. Lê Minh Tân. Mục tiêu trọng tâm của nghiên cứu là tự động hóa khâu lập trình giao diện người dùng từ các hình ảnh phác thảo ban đầu. Trong quy trình phát triển phần mềm truyền thống, lập trình viên mất nhiều giờ chuyển đổi bản vẽ đồ họa thành mã nguồn tương thích. Quá trình thủ công này thường tốn kém thời gian và dễ phát sinh lỗi hiển thị. Công cụ mới ra đời nhằm rút ngắn khoảng cách giữa giai đoạn thiết kế và giai đoạn hiện thực hóa sản phẩm. Hệ thống tích hợp sâu các thành tựu của trí tuệ nhân tạo hiện đại. Sự kết hợp giữa thị giác máy tính và các mô hình ngôn ngữ lớn mở ra hướng tiếp cận đột phá. Nghiên cứu khẳng định tiềm năng ứng dụng thực tiễn của công nghệ mới trong môi trường đào tạo và sản xuất công nghiệp.

1.1. Bối cảnh nghiên cứu tại Trường ĐH SPKT TP.HCM

Trường Đại học Sư phạm Kỹ thuật TP.HCM luôn chú trọng nghiên cứu ứng dụng thực tiễn. Khoa Công nghệ Thông tin và Bộ môn Trí tuệ Nhân tạo khuyến khích sinh viên giải quyết các bài toán công nghệ mới. Đề tài tốt nghiệp của sinh viên Lê Phúc Hậu và Nguyễn Quang Vinh xuất phát từ nhu cầu thị trường phần mềm. Việc lập trình frontend thủ công tiêu tốn nhiều nhân lực và thời gian. Đề tài nhận sự bảo trợ và hướng dẫn khoa học từ ThS. Lê Minh Tân. Hệ thống phòng thí nghiệm hiện đại của nhà trường tạo điều kiện thử nghiệm tối ưu. Nghiên cứu cung cấp góc nhìn học thuật mới mẻ cho lĩnh vực tự động hóa lập trình giao diện.

1.2. Mục tiêu và phạm vi xây dựng công cụ

Mục tiêu cốt lõi của công trình là xây dựng công cụ hỗ trợ chuyển đổi trực tiếp hình ảnh bản vẽ giao diện thành mã nguồn HTML và CSS hoàn chỉnh. Phạm vi nghiên cứu tập trung vào hai mảng công nghệ chính. Mảng thứ nhất bao gồm các thuật toán xử lý ảnh số truyền thống để phân đoạn thành phần. Mảng thứ hai tích hợp các mô hình ngôn ngữ lớn để suy luận cấu trúc và biên dịch dữ liệu thành mã lập trình. Nhóm tác giả xây dựng một quy trình khép kín từ khâu tiếp nhận ảnh thô đến khâu hiển thị trên trình duyệt. Công cụ không chỉ phục vụ học tập mà còn định hướng triển khai thành ứng dụng thực tế. Sản phẩm mở ra phương thức làm việc hiệu quả hơn cho các kỹ sư công nghệ thông tin.

II. Thách thức phát triển công cụ hỗ trợ xây dựng web frontend từ ảnh

Quá trình xây dựng giao diện người dùng từ hình ảnh đối mặt với nhiều rào cản kỹ thuật phức tạp. Hình ảnh đầu vào thường có chất lượng không đồng nhất. Các yếu tố như độ phân giải thấp, độ tương phản kém và nhiễu quang học gây khó khăn cho việc nhận diện cấu trúc. Ngoài ra, giao diện web hiện đại sở hữu bố cục phân cấp lồng nhau rất chặt chẽ. Việc xác định ranh giới giữa các khối vùng, nút bấm, ô nhập liệu và văn bản đòi hỏi thuật toán có độ chính xác cao. Thách thức tiếp theo nằm ở tính đa dạng của ngôn ngữ hiển thị. Cùng một bố cục thị giác có thể được thể hiện qua nhiều cấu trúc thẻ HTML khác nhau. Mô hình học máy dễ bị nhầm lẫn khi phân biệt giữa thẻ phân chia khối và các thành phần văn bản nội tuyến. Hơn nữa, việc tạo mã CSS đáp ứng chuẩn giao diện responsive trên nhiều thiết bị cũng là trở ngại lớn. Cuối cùng, vấn đề tài nguyên tính toán đặt ra bài toán khó cho nhóm nghiên cứu. Huấn luyện mô hình từ đầu đòi hỏi hệ thống máy chủ đắt đỏ. Nhóm tác giả cần tìm kiếm giải pháp tối ưu nhằm giảm chi phí tính toán nhưng vẫn duy trì độ chính xác cao.

2.1. Giới hạn của phương pháp lập trình frontend truyền thống

Quy trình xây dựng giao diện truyền thống phụ thuộc hoàn toàn vào thao tác thủ công của kỹ sư. Nhà thiết kế tạo ra hình ảnh nguyên mẫu trên phần mềm đồ họa. Sau đó, lập trình viên frontend phải xem xét và tự tay viết từng dòng mã tương ứng. Cách làm việc này tạo ra độ trễ lớn trong chu kỳ phát triển phần mềm. Sự sai lệch về kích thước, khoảng cách và màu sắc thường xuyên xảy ra giữa bản vẽ và sản phẩm thực tế. Đội ngũ kỹ thuật phải trải qua nhiều vòng phản hồi và chỉnh sửa mã nguồn tốn kém. Năng suất lao động của doanh nghiệp bị sụt giảm khi phải giải quyết các công việc mang tính lặp lại. Tự động hóa tiến trình này trở thành xu thế tất yếu của ngành công nghệ thông tin.

2.2. Khó khăn khi phân tích hình ảnh và trích xuất đặc trưng

Xử lý thị giác đối với giao diện web đòi hỏi việc trích xuất chính xác các đặc trưng hình học. Các thành phần giao diện thường chứa các đường viền sắc nét xen lẫn khối đổ bóng mờ. Nhiễu hạt trong hình ảnh đầu vào dễ khiến các thuật toán phát hiện sai lệch vị trí biên giới hạn. Việc lựa chọn kích thước hạt nhân bộ lọc Gaussian ảnh hưởng trực tiếp đến kết quả khử nhiễu. Nếu kích thước hạt nhân quá lớn, chi tiết nhỏ bị xóa nhòa. Ngược lại, kích thước quá nhỏ sẽ không thể loại bỏ tạp âm hiệu quả. Ngoài ra, việc xác định đúng hướng gradient của từng điểm ảnh cũng đóng vai trò quyết định. Bất kỳ sai số nào trong khâu tiền xử lý ảnh cũng dẫn đến cấu trúc JSON sai lệch.

III. Giải pháp công cụ hỗ trợ xây dựng web frontend từ ảnh hiệu quả

Nhóm nghiên cứu tại Trường ĐH SPKT TP.HCM đề xuất kiến trúc hệ thống hai giai đoạn độc lập. Giai đoạn thứ nhất tập trung vào xử lý thị giác máy tính và phân tích ảnh số. Giai đoạn thứ hai đảm nhiệm việc sinh mã nguồn thông qua mô hình ngôn ngữ lớn. Sự phân tách rành mạch này giúp nâng cao tính mô-đun và tạo điều kiện tối ưu hóa riêng biệt cho từng thành phần. Ở giai đoạn đầu vào, hệ thống ứng dụng thuật toán phát hiện cạnh Canny kết hợp bộ lọc Gaussian kích thước 5x5 để khử nhiễu. Thuật toán phân tích cường độ gradient nhằm xác định chính xác đường biên của các phần tử đồ họa. Dữ liệu hình học sau đó được cấu trúc hóa thành định dạng JSON mô tả trang web. Cấu trúc JSON này chứa đầy đủ thông số về tọa độ, phân loại thành phần và mối quan hệ lồng nhau. Ở giai đoạn kế tiếp, mô hình ngôn ngữ lớn tiếp nhận dữ liệu JSON để sinh mã HTML và CSS. Nhóm tác giả khai thác nền tảng Hugging Face và áp dụng kỹ thuật tinh chỉnh PEFT. Giải pháp này giúp mô hình thích nghi nhanh với tác vụ sinh mã mà không cần huấn luyện lại toàn bộ tham số. Hiệu năng xử lý nhờ đó được nâng cao rõ rệt.

3.1. Ứng dụng thuật toán Canny và trích xuất cấu trúc JSON

Kỹ thuật phát hiện cạnh Canny đóng vai trò nền tảng trong khâu tiền xử lý hình ảnh. Thuật toán làm mịn ảnh qua phép tích chập với bộ lọc Gaussian kích thước 5x5. Bước này loại bỏ hiệu quả các điểm nhiễu quang học. Hệ thống tính toán cường độ và hướng gradient tại từng điểm ảnh. Các đường biên được làm mảnh chính xác qua kỹ thuật ức chế phi cực đại. Sau khi phát hiện đường bao, hệ thống phân tích hình thái để xác định đối tượng giao diện. Vị trí, kích thước và cấp bậc của các phần tử được lưu vào tệp JSON. Bản mô tả JSON này đóng vai trò cầu nối thông tin giữa bộ xử lý thị giác và mô hình sinh mã.

3.2. Khai thác Hugging Face và tối ưu hóa mô hình với PEFT

Mô hình sinh mã được phát triển dựa trên hệ sinh thái mã nguồn mở Hugging Face. Nhóm nghiên cứu tận dụng Model Hub để thử nghiệm nhiều kiến trúc mô hình ngôn ngữ tiên tiến. Đồng thời, thư viện Hugging Face Datasets cung cấp công cụ quản lý dữ liệu huấn luyện hiệu quả. Thay vì tinh chỉnh toàn bộ mạng nơ-ron gây tốn kém, nhóm lựa chọn giải pháp PEFT. Phương pháp này chỉ cập nhật một lượng nhỏ tham số thích ứng được thêm vào mô hình gốc. Bộ nhớ GPU và thời gian huấn luyện nhờ vậy được tiết kiệm đáng kể. Mã nguồn sinh ra bảo đảm chuẩn cú pháp HTML5 và CSS3 hiện đại. Giải pháp cho phép triển khai hệ thống linh hoạt trên hạ tầng máy chủ phổ thông.

IV. Ứng dụng thực tế của công cụ hỗ trợ xây dựng web frontend từ ảnh

Đề tài tốt nghiệp tại Trường ĐH SPKT TP.HCM đạt được các kết quả thực nghiệm rất khả quan. Công cụ hoàn thiện có khả năng nhận diện chính xác các thành phần giao diện phổ biến. Tốc độ chuyển đổi từ hình ảnh phác thảo thành trang web tĩnh diễn ra chỉ trong vài giây. Mã nguồn xuất ra giữ nguyên tỷ lệ hiển thị và cách sắp xếp bố cục như thiết kế ban đầu. Về mặt ứng dụng, hệ thống là giải pháp hỗ trợ đắc lực cho các doanh nghiệp gia công phần mềm. Các lập trình viên frontend có thể loại bỏ các thao tác cắt ghép giao diện thủ công rườm rà. Thời gian hoàn thiện sản phẩm mẫu (prototype) được rút ngắn đáng kể, giúp doanh nghiệp tiết kiệm chi phí nhân lực. Ngoài ra, công cụ còn là học cụ trực quan hữu ích trong giảng dạy đại học. Sinh viên có thể nhanh chóng đối chiếu mối quan hệ giữa thiết kế đồ họa và mã lập trình. Trong tương lai, hướng nghiên cứu có thể mở rộng sang việc sinh mã cho các framework hiện đại như React, Vue hoặc Angular. Việc tối ưu hóa mô hình với các tập dữ liệu giao diện phức tạp hơn sẽ nâng cao độ hoàn thiện sản phẩm.

4.1. Tác động của công cụ đối với ngành công nghiệp phần mềm

Sự ra đời của công cụ đánh dấu bước chuyển dịch quan trọng trong hoạt động phát triển phần mềm hiện đại. Thay vì tiêu tốn hàng chục giờ lập trình thủ công, các đội ngũ phát triển có thể tạo ra mã khung giao diện chỉ bằng vài cú nhấp chuột. Năng suất lao động của các kỹ sư frontend tăng lên rõ rệt. Nhóm dự án có thể tập trung nguồn lực vào xử lý logic nghiệp vụ và trải nghiệm người dùng chuyên sâu. Chi phí kiểm thử và sửa lỗi giao diện cũng giảm đi đáng kể nhờ tính nhất quán của mã nguồn do máy sinh ra. Các công ty khởi nghiệp có cơ hội đưa sản phẩm ra thị trường với tốc độ nhanh chóng và chi phí tối ưu.

4.2. Tiềm năng phát triển và hoàn thiện nghiên cứu trong tương lai

Nghiên cứu mở ra nhiều hướng mở rộng giàu tiềm năng học thuật và thương mại. Hệ thống có thể được tích hợp thêm các mô hình học sâu nhận dạng ký tự quang học (OCR) tiên tiến. Nâng cấp này giúp trích xuất chính xác hơn nội dung văn bản và kiểu chữ đặc thù. Bên cạnh đó, việc huấn luyện mô hình sinh mã cho các thư viện phổ biến như Tailwind CSS hay Bootstrap sẽ nâng cao tính thực dụng. Nhóm tác giả cũng hướng tới xây dựng giao diện kéo thả trực tiếp trên trình duyệt. Người dùng có thể chỉnh sửa ngay các thành phần giao diện sau khi tạo mã tự động. Dự án là minh chứng rõ nét cho năng lực nghiên cứu khoa học của sinh viên Trường ĐH SPKT TP.HCM.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong quy trình phát triển phần mềm, việc chuyển đổi các bản thiết kế giao diện đồ họa (GUI thiết kế từ Figma, Sketch) thành mã nguồn giao diện web (web frontend) là công việc tiêu tốn nhiều thời gian và nhân lực của lập trình viên. Công đoạn hiện thực hóa mã nguồn này làm giảm đáng kể quỹ thời gian dành cho việc phát triển logic nghiệp vụ và các chức năng cốt lõi của hệ thống. Do đó, việc xây dựng một hệ thống tự động hóa quá trình chuyển đổi hình ảnh thiết kế sang mã nguồn frontend trở thành một nhu cầu cấp thiết nhằm rút ngắn chu kỳ phát hành sản phẩm và tối ưu hóa nguồn nhân lực kỹ thuật cao trong lĩnh vực công nghệ thông tin.

Mặc dù các mô hình đa phương thức thương mại hiện nay như GPT-4 Vision hay Claude 3.7 Sonnet đã hỗ trợ khả năng phân tích bố cục, màu sắc và tạo mã nguồn cho các framework như React, Vue, Angular hoặc Tailwind CSS, mã nguồn sinh ra thường thiếu tối ưu, chưa tuân thủ đầy đủ các chuẩn lập trình và gặp nhiều hạn chế khi xử lý các giao diện có cấu trúc phức tạp. Đối với các hướng nghiên cứu học thuật trước đó:

• Nghiên cứu của Tuan Anh Nguyen sử dụng thị giác máy tính và nhận dạng ký tự quang học (OCR) để tái tạo giao diện Android từ ảnh chụp màn hình, song quá trình dựng lại vẫn dựa trên các tập quy luật thủ công định sẵn, dẫn đến độ cứng nhắc cao.
• Mô hình pix2code của Tony Beltramelli kết hợp mạng tích chập (CNN) để trích xuất đặc trưng thị giác và mạng hồi quy (RNN/LSTM) để mô hình hóa chuỗi mã nguồn, nhưng bộ từ điển mã hóa còn thô sơ, chưa giải quyết được các thiết kế đa dạng.
• Hướng tiếp cận thị giác - ngôn ngữ như LLaVA (kết hợp encoder thị giác CLIP/BLIP với mô hình ngôn ngữ lớn) đòi hỏi nguồn tài nguyên tính toán rất lớn để huấn luyện trực tiếp đầu cuối (end-to-end) từ ảnh sang mã nguồn, trong khi việc lập trình giao diện đòi hỏi phải bóc tách tỉ mỉ từng thuộc tính như văn bản, màu chữ, kích cỡ, hộp chứa và bo góc.

Nhằm khắc phục các nhược điểm trên, đề tài thực hiện 5 nhiệm vụ nghiên cứu chính theo văn bản đề cương:

1. Nghiên cứu cơ sở lý thuyết về các phương pháp xử lý ảnh, nhận dạng thành phần giao diện web, mô hình ngôn ngữ lớn (LLM) và các kỹ thuật huấn luyện hiệu quả.
2. Thu thập và xây dựng bộ dữ liệu mã nguồn trang web tương ứng với định dạng JSON mô tả cấu trúc trang web.
3. Thiết kế hệ thống theo mô hình hai giai đoạn: tách biệt hoàn toàn khâu xử lý thị giác/ảnh số với khâu sinh mã nguồn bằng LLM.
4. Phát triển ứng dụng web tích hợp hệ thống sinh mã nguồn phục vụ người dùng tương tác trực tiếp.
5. Kiểm thử và tối ưu hóa hệ thống: đánh giá độ chính xác nhận dạng thành phần UI, kiểm tra chất lượng mã nguồn sinh ra so với thiết kế gốc và tối ưu hiệu suất xử lý.

Đối tượng và phạm vi nghiên cứu của đề tài được xác định cụ thể:

• Đối tượng nghiên cứu: Các thuật toán thị giác máy tính, kỹ thuật nhận dạng ký tự quang học (OCR), các mô hình ngôn ngữ lớn mã nguồn mở định hướng lập trình (như DeepSeek Coder, CodeGemma) và các kỹ thuật tinh chỉnh tham số hiệu quả (PEFT/LoRA).
• Phạm vi không gian và công nghệ: Xử lý các ảnh đầu vào là ảnh chụp màn hình trang web hoặc ảnh thiết kế giao diện tĩnh; triển khai mô hình trên máy chủ có bộ nhớ GPU tối thiểu 40 GB VRAM nhằm phục vụ tối đa 2 người dùng đồng thời cho tác vụ sinh mã.
• Phạm vi thời gian: Đề tài được thực hiện từ ngày 06/01/2025 đến ngày 06/06/2025 tại Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh.

---

Cơ sở lý thuyết và phương pháp

Đề tài vận dụng nền tảng lý thuyết từ hai phân ngành chính là thị giác máy tính (Computer Vision) và xử lý ngôn ngữ tự nhiên (NLP) với các mô hình và kỹ thuật sau:

• Nhận dạng ký tự quang học (OCR) với EasyOCR: Thư viện EasyOCR (xây dựng trên nền tảng Python và PyTorch) được sử dụng để phát hiện và nhận dạng văn bản. Kiến trúc gồm ba thành phần: trích xuất đặc trưng bằng mạng tích chập ResNet và VGG; gán nhãn chuỗi thời gian bằng mạng nơ-ron hồi quy LSTM để khắc phục vấn đề triệt tiêu đạo hàm (vanishing gradient); và giải mã chuỗi ký tự bằng hàm mất mát CTC (Connectionist Temporal Classification). Thư viện hỗ trợ 58 ngôn ngữ, trong đó nhóm nghiên cứu khai thác khả năng nhận diện đồng thời tiếng Việt và tiếng Anh.
• Xử lý ảnh số với thư viện OpenCV: Thuật toán phát hiện cạnh Canny được triển khai thông qua chuỗi 5 bước toán học:
  1. Lọc nhiễu và làm mịn ảnh bằng tích chập với bộ lọc Gaussian kích thước $5 \times 5$.
  2. Xác định cường độ gradient $G = \sqrt{G_x^2 + G_y^2}$ và hướng gradient $\theta = \arctan(G_y / G_x)$ thông qua các toán tử đạo hàm bậc nhất (như Sobel).
  3. Triệt pha không cực đại (Non-maximum suppression) để giữ lại các điểm ảnh có cường độ biến thiên cục bộ mạnh nhất theo hướng gradient.
  4. Phân ngưỡng kép (Double thresholding) nhằm phân loại điểm ảnh thành biên mạnh, biên yếu hoặc loại bỏ nhiễu.
  5. Liên kết biên bằng kỹ thuật trễ (Hysteresis) để bảo toàn các biên yếu kết nối trực tiếp với biên mạnh. Ngoài ra, đề tài kết hợp phương pháp làm nét ảnh unsharp masking và kỹ thuật phân tích đường viền (contour analysis).
• Kiến trúc Transformer và Mô hình ngôn ngữ lớn (LLM): Đề tài dựa trên kiến trúc Transformer chuẩn gồm khối Encoder (Multi-Head Attention với 8 đầu, Feed-Forward Network với hàm kích hoạt ReLU và tỷ lệ dropout 0.1, cơ chế Add & Normalize) và khối Decoder (Masked Self-Attention, Encoder-Decoder Attention). Đồng thời, tác giả khảo sát các dòng kiến trúc phái sinh gồm BERT (Encoder-only, học ngữ cảnh hai chiều qua Masked LM và NSP), GPT (Decoder-only, cơ chế tự hồi quy với Causal LM) và T5 (chuyển đổi text-to-text thống nhất).
• Kỹ thuật tinh chỉnh tham số LoRA (Low-rank Adaptation): Thay vì tinh chỉnh toàn bộ trọng số (Full Fine-tuning) gây tốn kém tài nguyên hoặc dùng Adapter tuning làm tăng độ trễ tính toán tuần tự trong mô hình, đề tài áp dụng LoRA. Phương pháp này đóng băng ma trận trọng số gốc $W_0 \in \mathbb{R}^{d \times k}$ và biểu diễn độ biến thiên ma trận $\Delta W$ thành tích của hai ma trận hạng thấp $B \in \mathbb{R}^{d \times r}$ và $A \in \mathbb{R}^{r \times k}$ với hạng $r \ll \min(d, k)$: $$\Delta W = B \times A$$ Sau khi huấn luyện, hai ma trận $A$ và $B$ được tái tham số hóa (re-parameterization) trực tiếp vào trọng số ban đầu: $W = W_0 + B \times A$, bảo đảm tốc độ suy luận không bị suy giảm.

Phương pháp nghiên cứu thực nghiệm: Nhóm tác giả lựa chọn phương pháp thiết kế hệ thống hai giai đoạn độc lập: chuyển hóa ảnh thành biểu diễn trung gian dạng cấu trúc (JSON UI tree) bằng các thuật toán xử lý ảnh số, sau đó sử dụng LLM được tinh chỉnh chuyên biệt để dịch bản mô tả JSON thành mã nguồn frontend.

Nguồn dữ liệu: Nhóm tác giả tự thu thập và tiền xử lý bộ dữ liệu huấn luyện gồm các cặp cấu trúc JSON mô tả thành phần trang web tương ứng với mã nguồn frontend thực tế.

---

Thiết kế và triển khai hệ thống

Hệ thống được thiết kế theo luồng kiến trúc tách biệt giữa khâu phân tích thị giác và khâu sinh mã tự động, loại bỏ việc đưa dữ liệu hình ảnh thô trực tiếp vào mô hình ngôn ngữ lớn.

[Ảnh giao diện đầu vào]

1. Giai đoạn trích xuất hình ảnh sang cấu trúc JSON:

   • Nhận diện văn bản: EasyOCR quét toàn bộ ảnh để nhận dạng các chuỗi ký tự, xác định tọa độ vùng chứa văn bản và loại bỏ các vùng này khỏi ảnh gốc để tránh gây nhiễu cho các bước xử lý sau.
   • Nhận diện phần tử hình ảnh: Thực hiện phân tích đường biên (contour analysis) trên ảnh đã tách văn bản nhằm xác định vị trí các hình khối đồ họa và hình ảnh. Sau khi nhận diện, các phần tử này tiếp tục được loại bỏ.
   • Nhận diện phần tử hộp chứa (containers): Áp dụng kỹ thuật unsharp masking để làm sắc nét đường nét các khung khối, sau đó dùng thuật toán Canny để trích xuất cạnh và định vị các vùng hộp bao bọc, các góc bo (border-radius).
   • Tạo cây UI (UI Tree): Hệ thống kết hợp thông tin về tọa độ, quan hệ lồng nhau, màu sắc và thuộc tính hiển thị của từng phần tử đã bóc tách để xây dựng cây phân cấp giao diện, sau đó xuất ra bản mô tả định dạng JSON.

2. Giai đoạn sinh mã nguồn bằng LLM:

   • Lựa chọn mô hình nền chuyên sâu về sinh mã nguồn (DeepSeek Coder).
   • Huấn luyện mô hình với thư viện PEFT/Hugging Face thông qua kỹ thuật LoRA trên tập dữ liệu JSON - Code đã chuẩn bị.
   • Khi nhận đầu vào là chuỗi JSON từ Giai đoạn 1, mô hình thực hiện giải mã tự hồi quy để tạo ra mã nguồn HTML/CSS hoàn chỉnh, tương ứng với cấu trúc phân cấp của cây UI.

3. Triển khai ứng dụng Web:

   • Sử dụng micro-framework Flask trên nền tảng Python để xây dựng dịch vụ web.
   • Giao diện người dùng cho phép tải ảnh giao diện mẫu, theo dõi tiến trình xử lý, xem trước (live preview) giao diện dựng từ mã nguồn được sinh ra và cung cấp hộp hiển thị mã có tính năng làm nổi bật cú pháp lập trình.

---

Nội dung chính theo từng chương

Chương 1: Lý thuyết liên quan

Chương 1 cung cấp toàn bộ cơ sở lý thuyết phục vụ cho việc xây dựng hệ thống:

• Trình bày tổng quan về kỹ thuật OCR và phân tích chi tiết cơ chế hoạt động 4 giai đoạn của EasyOCR (tiền xử lý, phát hiện vùng văn bản, nhận dạng ký tự bằng ResNet/VGG + LSTM + CTC, tái cấu trúc kết quả).
• Hệ thống hóa các phương pháp xử lý ảnh số trong OpenCV: kỹ thuật làm mờ, phân tích biểu đồ tần suất (histogram), phép lọc làm mịn Gaussian, thuật toán phát hiện cạnh Canny và phân tích đường biên contour.
• Phân tích chi tiết kiến trúc Transformer nguyên bản (Encoder-Decoder) và cơ chế Attention; phân định ba nhánh mô hình chuyển hóa: BERT (chuyên phân tích ngữ cảnh hai chiều), GPT (chuyên sinh văn bản tiếp nối) và T5 (hướng tiếp cận văn bản sang văn bản).
• Khái quát tiến trình phát triển của LLM từ giai đoạn nền móng (2017–2018), mở rộng quy mô (2019–2020), chuyên biệt hóa theo tập lệnh (2021), bùng nổ mã nguồn mở (2022) đến giai đoạn đa phương thức và MoE (2023).
• So sánh hai kỹ thuật tinh chỉnh tham số hiệu quả là Adapter tuning và LoRA, chỉ ra cơ chế phân rã ma trận hạng thấp và phép tái tham số hóa của LoRA giúp loại bỏ độ trễ tính toán.
• Giới thiệu hệ sinh thái Hugging Face (Transformers, Model Hub, Datasets, PEFT) và công nghệ phát triển web Flask.

Chương 2: Xây dựng hệ thống

Chương 2 mô tả quá trình thiết kế, tích hợp và thử nghiệm các module trong hệ thống:

• Mô tả chi tiết sơ đồ luồng dữ liệu tổng thể và quy trình trích xuất từng bước: nhận dạng văn bản -> nhận dạng hình ảnh qua đường biên và phân tích contour -> làm nét ảnh bằng unsharp masking -> nhận diện hộp chứa qua phát hiện cạnh Canny -> trích xuất phần tử và sinh cây UI định dạng JSON.
• Đánh giá hiệu năng trích xuất hình ảnh sang cấu trúc JSON thông qua việc kiểm thử khả năng nhận dạng chính xác từng loại phần tử giao diện người dùng cụ thể (trình bày tại Bảng 1 của luận văn).
• Trình bày quy trình triển khai mô hình ngôn ngữ lớn: lựa chọn mô hình nền DeepSeek Coder dựa trên các chỉ số hiệu năng trên nhiều ngôn ngữ lập trình; quy trình tiền xử lý dữ liệu huấn luyện cặp JSON - Mã nguồn; thiết lập các tham số huấn luyện (learning rate, batch size, LoRA rank $r$, LoRA alpha) được thống kê tại Bảng 2.
• Ghi nhận diễn biến suy giảm của hàm mất mát (loss) qua biểu đồ huấn luyện nhằm chứng minh sự hội tụ của mô hình; đánh giá chất lượng mã nguồn đầu ra (Bảng 3), minh họa cây UI đầu vào cùng giao diện thực tế do mã nguồn sinh ra hiển thị trên trình duyệt.

Chương 3: Triển khai hệ thống trên nền tảng Web

Chương 3 tập trung vào việc hiện thực hóa giải pháp thành ứng dụng thực tiễn:

• Cấu trúc kiến trúc web backend bằng Flask xử lý việc nhận tệp ảnh tải lên, chuyển tiếp tới các pipeline xử lý ảnh số và kích hoạt tiến trình sinh mã của mô hình LLM.
• Hiện thực giao diện web chính cho phép người dùng thao tác đưa hình ảnh đầu vào lên hệ thống.
• Xây dựng module kết xuất và hiển thị xem trước giao diện web (HTML/CSS) theo thời gian thực từ kết quả của mô hình.
• Tích hợp khung hiển thị mã nguồn có tính năng tô sáng cú pháp (syntax highlighting), hỗ trợ người dùng kiểm tra, sao chép hoặc trích xuất mã nguồn để tái sử dụng trong các dự án phần mềm thực tế.

---

Kết quả và đóng góp

Kết quả chính của đề tài

1. Xây dựng hoàn chỉnh mô hình xử lý hai giai đoạn: Đề tài đã hoàn thành chu trình tự động hóa chuyển đổi từ ảnh giao diện sang mã nguồn frontend bằng cách tách biệt khâu bóc tách thị giác (OpenCV + EasyOCR) và khâu sinh mã (LLM fine-tuned), giải quyết bài toán tiêu tốn tài nguyên của các mô hình end-to-end.
2. Hiện thực hóa quy trình trích xuất cây UI dạng JSON: Tách lọc thành công từng lớp thông tin trên ảnh (chữ viết tiếng Việt/tiếng Anh, phần tử ảnh đồ họa, các khối hộp chứa và bo góc) để tổng hợp thành bản mô tả JSON phân cấp.
3. Huấn luyện thành công mô hình sinh mã: Áp dụng kỹ thuật LoRA để tinh chỉnh mô hình ngôn ngữ lớn nền tảng trên bộ dữ liệu cặp JSON - Mã nguồn, đạt được sự hội tụ ổn định trên biểu đồ loss và sinh ra mã nguồn có cấu trúc rõ ràng, hiển thị đúng bố cục thiết kế.
4. Triển khai ứng dụng hoàn chỉnh: Xây dựng thành công hệ thống web trên nền tảng Flask tích hợp chức năng tải ảnh, xem trước giao diện và hiển thị mã nguồn tô sáng cú pháp. Hệ thống được cấu hình vận hành trên máy chủ trang bị GPU tối thiểu 40 GB VRAM, hỗ trợ phục vụ đồng thời tối đa 2 người dùng.

Bảng tổng hợp các thành phần kỹ thuật trong hệ thống

Thành phần hệ thống	Công nghệ / Thuật toán sử dụng	Vai trò và chức năng chính
Nhận dạng văn bản	EasyOCR (ResNet + VGG + LSTM + CTC)	Phát hiện, nhận diện chữ tiếng Việt và tiếng Anh, trích xuất tọa độ văn bản.
Xử lý ảnh số	OpenCV, Canny, Unsharp Masking, Contour	Loại bỏ nhiễu, làm sắc nét cạnh, nhận diện đường viền hình ảnh và hộp chứa.
Mô tả trung gian	JSON (Cây UI - UI Tree)	Chuẩn hóa cấu trúc lồng nhau, màu sắc, tọa độ và kiểu dáng của các thành phần giao diện.
Mô hình sinh mã	DeepSeek Coder, LoRA (PEFT), Transformers	Đọc bản mô tả JSON và sinh mã nguồn web frontend (HTML/CSS) tương ứng.
Giao diện người dùng	Python Flask, Syntax Highlighter	Cung cấp cổng tải ảnh, hiển thị màn hình xem trước (preview) và tải mã nguồn.

Đóng góp của đề tài so với các nghiên cứu trước

• So với nghiên cứu của Tuan Anh Nguyen: Đề tài loại bỏ cơ chế dựng giao diện dựa trên quy luật lập trình thủ công cứng nhắc; việc sử dụng LLM giúp mã nguồn sinh ra có cấu trúc linh hoạt và khả năng biểu đạt giao diện phức tạp tốt hơn.
• So với mô hình pix2code của Tony Beltramelli: Vượt qua giới hạn của từ điển mã hóa đơn giản và kiến trúc CNN-LSTM cổ điển, hệ thống ứng dụng mô hình ngôn ngữ lớn dựa trên Transformer và cấu trúc cây UI trung gian, giúp mô hình hóa đầy đủ các chi tiết giao diện web hiện đại.
• So với mô hình LLaVA: Đề tài giảm thiểu yêu cầu tài nguyên phần cứng bằng cách không huấn luyện trực tiếp mô hình thị giác - ngôn ngữ đa phương thức từ ảnh sang code. Thay vào đó, việc sử dụng các thuật toán xử lý ảnh số truyền thống để đưa về văn bản JSON giúp quá trình huấn luyện LLM diễn ra nhanh chóng, nhẹ nhàng và chính xác hơn về mặt thông số thuộc tính.

---

Hạn chế và hướng nghiên cứu tiếp

Hạn chế của đề tài

• Yêu cầu tài nguyên phần cứng cao: Hệ thống đòi hỏi máy chủ phải trang bị GPU có bộ nhớ tối thiểu 40 GB VRAM để vận hành mô hình ngôn ngữ lớn, trong khi năng lực phục vụ đồng thời tại một thời điểm còn hạn chế (tối đa 2 người dùng).
• Phụ thuộc vào chất lượng ảnh đầu vào: Các giao diện có độ tương phản thấp hoặc chứa các thành phần lồng nhau phức tạp có thể làm giảm độ chính xác của thuật toán phát hiện cạnh Canny và phân tích đường viền contour, dẫn đến sai sót trong bản mô tả JSON.
• Tính hoàn thiện của mã nguồn sinh ra: Mặc dù mã nguồn HTML/CSS sinh ra có cấu trúc tốt và hiển thị được bố cục cơ bản, lập trình viên vẫn cần can thiệp thủ công để tối ưu hóa hoàn toàn theo các tiêu chuẩn mã hóa riêng hoặc tích hợp logic chức năng phức tạp.

Hướng phát triển tương lai

• Tối ưu hóa hiệu năng và lượng chiếm dụng bộ nhớ của mô hình LLM nhằm giảm yêu cầu phần cứng xuống dưới mức 40 GB VRAM, từ đó nâng cao số lượng người dùng phục vụ đồng thời.
• Mở rộng tập dữ liệu huấn luyện để hỗ trợ sinh mã nguồn trực tiếp cho các framework frontend phổ biến như React, Vue, Angular hoặc Tailwind CSS.
• Nâng cao độ chính xác của các thuật toán thị giác máy tính trong việc phát hiện và xử lý các thành phần giao diện lồng nhau phức tạp hoặc các thuộc tính đồ họa đặc thù.

---

Giá trị tham khảo

Đồ án tốt nghiệp này mang lại giá trị tham khảo học thuật và ứng dụng thực tiễn trong các khía cạnh:

• Đối tượng tham khảo: Sinh viên, học viên cao học và kỹ sư thuộc các chuyên ngành Công nghệ thông tin, Trí tuệ nhân tạo và Kỹ thuật phần mềm đang thực hiện các đề tài nghiên cứu về ứng dụng thị giác máy tính, tinh chỉnh mô hình ngôn ngữ lớn hoặc bài toán tự động hóa chuyển đổi thiết kế thành mã nguồn (design-to-code).
• Nội dung đáng chú ý:
  • Mô hình kiến trúc hai giai đoạn: Cách tiếp cận phân tách bài toán thị giác máy tính (bóc tách cấu trúc bằng OpenCV, EasyOCR) và bài toán sinh ngôn ngữ (LLM) là giải pháp thực tế để xử lý các bài toán đa phương thức khi nguồn tài nguyên tính toán bị giới hạn.
  • Phương pháp tiền xử lý và bóc tách tuần tự: Quy trình loại bỏ dần từng lớp thông tin (văn bản -> hình ảnh -> hộp chứa qua unsharp masking và Canny) để xây dựng cây phân cấp UI tree dưới dạng JSON là tài liệu tham khảo chi tiết cho các nghiên cứu xử lý giao diện.
  • Kỹ thuật tinh chỉnh LoRA: Cơ sở toán học về phân rã ma trận hạng thấp và quy trình tích hợp LoRA thông qua thư viện PEFT/Hugging Face phục vụ cho các tác vụ lập trình chuyên biệt.

---

Câu hỏi thường gặp

1. Tại sao nhóm tác giả lại lựa chọn mô hình hai giai đoạn thay vì huấn luyện một mô hình thị giác - ngôn ngữ đa phương thức trực tiếp như LLaVA?
Mô hình LLaVA đòi hỏi tài nguyên tính toán cực kỳ lớn để huấn luyện bộ encoder thị giác kết hợp với decoder ngôn ngữ. Bên cạnh đó, việc xây dựng mã nguồn trang web đòi hỏi trích xuất rất chi tiết các thông số như văn bản, màu sắc, kích cỡ, hộp chứa và bo góc. Do đó, tác giả sử dụng xử lý ảnh số và OCR để trích xuất các thông số này thành bản mô tả JSON trung gian, sau đó dùng LLM để sinh mã, giúp tiết kiệm đáng kể tài nguyên huấn luyện và tăng tính chính xác của các thuộc tính.

2. Thư viện EasyOCR trong đề tài hoạt động dựa trên những kiến trúc mạng học sâu nào?
EasyOCR được triển khai dựa trên PyTorch và kết hợp ba thành phần mạng nơ-ron chính: mạng tích chập ResNet và VGG đảm nhận khâu trích xuất đặc trưng thị giác từ ảnh; mạng nơ-ron hồi quy LSTM (Long Short-Term Memory) đảm nhận khâu gán nhãn chuỗi và mô hình hóa phụ thuộc thời gian; và hàm mất mát CTC (Connectionist Temporal Classification) đảm nhận khâu giải mã dự đoán chuỗi ký tự có độ dài biến đổi.

3. Thuật toán Canny trong đề tài được thực hiện qua các bước toán học nào để phát hiện thành phần giao diện?
Thuật toán Canny gồm 5 bước: (1) Làm mịn ảnh để khử nhiễu bằng bộ lọc Gaussian kích thước $5 \times 5$; (2) Tính cường độ và hướng gradient thông qua các đạo hàm bậc nhất $G_x$ và $G_y$; (3) Triệt pha không cực đại để làm mảnh các đường biên; (4) Phân ngưỡng kép bằng hai giá trị ngưỡng cao/thấp để phân loại biên mạnh và biên yếu; (5) Liên kết biên bằng hysteresis để giữ lại các biên yếu nối liền với biên mạnh và loại bỏ nhiễu cô lập.

4. Kỹ thuật LoRA có ưu thế gì so với Adapter thông thường trong quá trình tinh chỉnh mô hình ngôn ngữ lớn?
Mặc dù cả hai đều đóng băng mô hình gốc, Adapter thông thường chèn thêm các lớp nơ-ron vào mô hình làm tăng số phép tính tuần tự và giảm khả năng tính toán song song của GPU trong quá trình suy luận. Ngược lại, LoRA phân tách ma trận cập nhật trọng số $\Delta W$ thành tích của hai ma trận hạng thấp $A$ và $B$. Sau khi hoàn tất huấn luyện, hai ma trận này được cộng trực tiếp vào ma trận trọng số gốc ($W_0 + B \times A$) thông qua cơ chế tái tham số hóa, giúp tốc độ suy luận của mô hình hoàn toàn không bị ảnh hưởng.

5. Yêu cầu cấu hình phần cứng để triển khai hệ thống là gì và khả năng phục vụ đồng thời đạt mức nào?
Theo kết quả dự kiến và thiết kế của đề tài, hệ thống được cấu hình triển khai trên máy chủ trang bị GPU có bộ nhớ VRAM tối thiểu 40 GB. Với mức tài nguyên này, hệ thống đáp ứng khả năng phục vụ tối đa cho 2 người dùng tương tác đồng thời cho tác vụ chuyển đổi ảnh giao diện thành mã nguồn.

---

Kết luận

Đồ án tốt nghiệp "Công cụ hỗ trợ xây dựng web frontend từ ảnh đầu vào ban đầu" của sinh viên Lê Phúc Hậu và Nguyễn Quang Vinh đã giải quyết bài toán tự động hóa chuyển đổi thiết kế giao diện sang mã nguồn thông qua kiến trúc hai giai đoạn kết hợp giữa thị giác máy tính và mô hình ngôn ngữ lớn. Bằng cách sử dụng OpenCV và EasyOCR để bóc tách thông tin giao diện thành cây UI định dạng JSON, kết hợp tinh chỉnh mô hình DeepSeek Coder bằng kỹ thuật LoRA, hệ thống đã sinh ra mã nguồn frontend HTML/CSS có cấu trúc tốt và hiển thị chính xác bố cục thiết kế. Ứng dụng web xây dựng trên nền tảng Flask cung cấp đầy đủ chức năng tải ảnh, xem trước giao diện và trích xuất mã nguồn, đóng góp một giải pháp kỹ thuật hữu ích nhằm hỗ trợ lập trình viên tối ưu hóa quy trình phát triển phần mềm.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: LÝ THUYẾT LIÊN QUAN 1. Nhận dạng kí tự quang học (OCR) Trong việc trích xuất các thông tin trong hình ảnh website, trích xuất các thông tin văn bản là rất quan trọng. OCR chính là một mảnh ghép không thể thiếu đối với dự án của chúng tôi. Đây là công nghệ cho phép chuyển đổi các ký tự và từ ngữ có trong hình ảnh, tài liệu được quét thành dữ liệu số mà hệ thống máy tính có thể xử lý và phân tích.

OCR hoạt động thông qua các bước: − Tiền xử lý ảnh: Trước khi đưa hình ảnh vào quá trình nhận dạng, cần thực hiện các thao tác tiền xử lý để cải thiện chất lượng. Hình ảnh thô có thể chứa nhiều yếu tố ảnh hưởng như độ mờ, nhiễu số, hay độ tương phản thấp. Việc áp dụng các kỹ thuật làm sạch và tối ưu hóa ảnh sẽ nâng cao đáng kể độ chính xác của kết quả cuối cùng. − Phát hiện vùng văn bản: Nhiệm vụ chính của giai đoạn này là xác định chính xác các khu vực trong ảnh có chứa thông tin văn bản.

Một số thuật toán được sử dụng rộng rãi bao gồm CTPN (Connectionist Text Proposal Network), EAST (Efficient and Accurate Scene Text Detector). − Nhận dạng ký tự: Sau khi đã xác định được các vùng chứa văn bản, hệ thống sẽ tiến hành nhận dạng từng ký tự cụ thể trong mỗi vùng. Hai kiến trúc mạng nơ-ron phổ biến cho nhiệm vụ này là CRNN kết hợp với CTC và các mô hình dựa trên cơ chế Attention. − Tái cấu trúc kết quả: Bước cuối cùng trong quy trình là sắp xếp lại các ký tự và từ ngữ đã được nhận dạng theo đúng thứ tự và vị trí như trong hình ảnh gốc.

Quá trình này đảm bảo rằng thông tin được trích xuất sẽ duy trì được cấu trúc và ngữ cảnh ban đầu, tạo điều kiện thuận lợi cho các bước phân tích và xử lý tiếp theo. Một trong những thư viện hàng đầu trong Python cho OCR là EasyOCR. EasyOCR được triển khai bằng Python và thư viện PyTorch. Nếu có GPU hỗ trợ CUDA, thư viện học sâu PyTorch cơ bản có thể tăng tốc độ phát hiện văn bản và tốc độ OCR lên rất nhiều.

EasyOCR có thể nhận diện văn bản bằng 58 ngôn ngữ, trong đó có ngôn ngữ Việt Nam và Tiếng Anh. Thành phần của EasyOCR [5]: 8 − Trích xuất đặc trưng (Resnet và VGG): ◦ Bước đầu tiên của mô hình nhận dạng là trích xuất đặc trưng. Để tạo ra một tập hợp các đặc điểm có thể được sử dụng cho phân tích bổ sung, dữ liệu đầu vào phải được chuyển đổi. Với EasyOCR, VGG và Resnet được sử dụng cho mục đích này.

◦ Resnet, còn được gọi là Residual Networks, là một loại mạng nơ-ron tích chập (CNN) bỏ qua một số lớp nhất định bằng cách sử dụng shortcuts or skip connections. Điều này giúp mạng có thể sâu hơn và vẫn có thể đào tạo được bằng cách giải quyết vấn đề về vanishing gradients. Nguyên lý cơ bản của kiến trúc Resnet là học các hàm biểu diễn dư thừa thay vì tín hiệu biểu diễn trực tiếp. Điều này làm giảm độ phức tạp của mô hình và tạo điều kiện thuận lợi cho quá trình học của mạng.

◦ Một loại CNN khác được gọi là Visual Geometry Group, hay VGG. Kiến trúc đồng nhất này bao gồm các bộ lọc tích chập rất nhỏ (3x3) được xếp chồng lên nhau ngày càng sâu. Điều này đơn giản hóa việc hiểu và sửa đổi mạng bằng cách giảm số lượng tính toán và tham số. − Gán nhãn chuỗi (LSTM): ◦ Gán nhãn chuỗi là bước tiếp theo sau khi trích xuất đặc trưng.

Các mạng Long Short-Term Memory (LSTM) được sử dụng cho việc này. ◦ Mạng nơ-ron hồi quy (RNN) thuộc loại học và ghi nhớ chuỗi dài (LSTM) có thể mô hình hóa các phụ thuộc tạm thời qua nhiều bước thời gian. Thiết kế đặc biệt của LSTM, trái ngược với RNN thông thường, giúp ngăn ngừa vấn đề vanishing gradients. Các tế bào bộ nhớ và ba loại cổng khác nhau: cổng đầu vào, cổng quên và cổng đầu ra cho phép LSTM thực hiện điều này.

Các yếu tố này mang lại hiệu quả tuyệt vời cho LSTM đối với các tác vụ gắn nhãn trình tự bằng cách cho phép nó thêm hoặc xóa thông tin khỏi trạng thái tế bào qua các chuỗi dài. − Giải mã (CTC): ◦ Giải mã là bước cuối cùng trong mô hình nhận diện. ◦ CTC là một loại hàm mất mát được áp dụng cho các vấn đề chuỗi khi thời gian không chắc chắn. Nó được sử dụng trong các tình huống mà chúng ta không chắc 9 chắn về sự liên kết giữa các nhãn và dữ liệu đầu vào, điều này thường xảy ra trong nhận diện giọng nói và chữ viết tay.

Để cung cấp dự đoán với độ dài biến đổi, CTC thêm một nhãn trống bên cạnh các nhãn hiện có. Do đó, nó rất phù hợp cho các nhiệm vụ giải mã OCR vì nó tính toán hàm mất mát bằng cách cộng tất cả các sự liên kết có thể của đầu vào với các chuỗi mục tiêu. ◦ Một phiên bản điều chỉnh của kiến trúc deep-text-recognition-benchmark phục vụ như là quy trình đào tạo cho việc thực hiện nhận diện của EasyOCR. Với việc sử dụng framework này, các mô hình nhận diện văn bản có thể được đào tạo trên nhiều tập dữ liệu khác nhau, làm cho EasyOCR trở nên rất linh hoạt và hiệu quả.

Cộng đồng sử dụng EasyOCR rất đông đảo với hàng nghìn developers trên toàn thế giới. Tính đến năm 2025, EasyOCR đã đạt khoảng 26.800 sao trên GitHub. Chúng tôi chọn EasyOCR cho giai đoạn trích xuất văn bản từ ảnh giao diện trang web nhờ vào các đặc điểm nổi bật của nó. EasyOCR dễ sử dụng, hỗ trợ đa ngôn ngữ bao gồm tiếng Việt và tiếng Anh, hai ngôn ngữ chiến lược cho xây dựng các trang web tại Việt Nam, EasyOCR hỗ trợ nhận diện cùng lúc nhiều ngôn ngữ mà không cần chuyển mô hình.

EasyOCR có độ chính xác cao, không cần tiền xử lý phức tạp, tích hợp nhanh và hoàn toàn miễn phí. Xử lý ảnh số với OpenCV 1. Tổng quan về xử lý ảnh số Xử lý ảnh số là lĩnh vực ứng dụng các phương pháp tính toán và công thức toán học để thao tác, biến đổi và phân tích dữ liệu hình ảnh dạng số. Nhiệm vụ chủ yếu của việc xử lý ảnh số bao gồm việc cải thiện độ rõ nét và chất lượng hình ảnh, thu thập các dữ liệu quan trọng từ nội dung ảnh, cũng như thực hiện các quy trình tự động trong các ứng dụng dựa trên thị giác máy tính.

Các giai đoạn chính trong quy trình xử lý ảnh số: − Tăng cường ảnh: cải thiện chất lượng hiển thị của ảnh, như tăng độ tương phản, giảm nhiễu, và loại bỏ các hiện tượng gây lỗi ảnh. − Phục hồi ảnh: loại bỏ các yếu tố làm giảm chất lượng ảnh như mờ, nhiễu và biến dạng. − Phân đoạn ảnh: chia ảnh thành các vùng hoặc đoạn, mỗi vùng tương ứng với một đối tượng hoặc đặc điểm cụ thể trong ảnh. 10 − Phân tích ảnh: Sử dụng các thuật toán và mô hình toán học để trích xuất thông tin từ ảnh, như nhận dạng đối tượng, phát hiện mẫu,….

Thuật toán phát hiện cạnh Canny Phát hiện cạnh Canny là một kỹ thuật trích xuất thông tin cấu trúc hữu ích từ các đối tượng thị giác khác nhau và giảm đáng kể lượng dữ liệu cần xử lý. Kỹ thuật này đã được áp dụng rộng rãi trong nhiều hệ thống thị giác máy tính. Quá trình của thuật toán phát hiện cạnh Canny có thể được chia thành năm bước khác nhau: − Áp dụng bộ lọc Gaussian để làm mịn hình ảnh nhằm loại bỏ nhiễu: ◦ Vì tất cả các kết quả phát hiện cạnh đều dễ bị ảnh hưởng bởi nhiễu trong ảnh, nên việc lọc nhiễu là điều cần thiết để tránh phát hiện sai do nhiễu gây ra. Để làm mịn ảnh, một kernel bộ lọc Gaussian được tích chập với ảnh.

Bước này sẽ làm mịn ảnh một chút để giảm tác động của nhiễu lên bộ phát hiện cạnh. Phương trình cho kernel bộ lọc Gaussian có kích thước (2k +1)×(2k +1) được đưa ra: ◦ Việc lựa chọn kích thước của hạt nhân Gaussian sẽ ảnh hưởng đến hiệu suất của máy dò. Kích thước càng lớn thì độ nhạy của máy dò với nhiễu càng thấp. Ngoài ra, lỗi định vị để phát hiện cạnh sẽ tăng nhẹ khi kích thước hạt nhân bộ lọc Gaussian tăng.

(5×5) là kích thước tốt cho hầu hết các trường hợp, nhưng kích thước này cũng sẽ thay đổi tùy thuộc vào các tình huống cụ thể. − Tìm cường độ gradient của hình ảnh: ◦ Một cạnh trong ảnh có thể chỉ theo nhiều hướng khác nhau, do đó thuật toán Canny sử dụng bốn bộ lọc để phát hiện các cạnh ngang, dọc và chéo trong ảnh bị mờ. Toán tử phát hiện cạnh (như Roberts, Prewitt, Sobel ) trả về giá trị cho đạo hàm bậc nhất theo hướng ngang (Gx ) và hướng dọc (Gy ). Từ đó, có thể xác định được độ dốc và hướng của cạnh: G = √(Gx² + Gy²) và θ = arctan(Gy/Gx) ◦ Góc hướng cạnh được làm tròn thành một trong bốn góc biểu diễn theo chiều dọc, chiều ngang và hai đường chéo (0°, 45°, 90° và 135°).

Một hướng cạnh rơi vào 11 mỗi vùng màu sẽ được đặt thành một giá trị góc cụ thể, ví dụ, θ trong [0°, 22,5°] hoặc [157,5°, 180°] ánh xạ thành 0°. − Triệt pha không cực đại: để tìm các vị trí có giá trị cường độ thay đổi mạnh nhất. Thuật toán cho mỗi điểm ảnh trong ảnh gradient là: ◦ So sánh cường độ cạnh của điểm ảnh hiện tại với cường độ cạnh của điểm ảnh theo hướng gradient dương và âm. ◦ Nếu cường độ cạnh của pixel hiện tại là lớn nhất so với các pixel khác trong mặt nạ có cùng hướng (ví dụ: một pixel đang trỏ theo hướng y sẽ được so sánh với pixel ở trên và dưới nó theo trục dọc), giá trị sẽ được giữ nguyên.

Nếu không, giá trị sẽ bị ẩn. − Ngưỡng kép: Sau khi áp dụng triệt pha không cực đại, các pixel cạnh còn lại cung cấp biểu diễn chính xác hơn về các cạnh thực trong ảnh. Tuy nhiên, một số pixel cạnh vẫn còn do nhiễu và biến đổi màu gây ra. Để tính đến các phản hồi không mong muốn này, điều cần thiết là phải lọc ra các pixel cạnh có giá trị gradient yếu và giữ lại các pixel cạnh có giá trị gradient cao.

Điều này được thực hiện bằng cách chọn các giá trị ngưỡng cao và thấp. Nếu giá trị gradient của pixel cạnh cao hơn giá trị ngưỡng cao, thì pixel đó được đánh dấu là pixel cạnh mạnh.