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

Trong đời sống xã hội hiện đại, sự gia tăng nhanh chóng của nhu cầu tiêu thụ và thói quen mua sắm đã dẫn đến tình trạng dư thừa hàng hóa, trong đó rác thải thời trang trở thành một áp lực đáng kể đối với môi trường. Dựa trên số liệu thống kê được tác giả trích dẫn trong văn bản, trung bình mỗi người dân Mỹ thải bỏ khoảng 37 kg quần áo mỗi năm; 85% trong số này bị đưa vào các bãi chôn lấp hoặc lò đốt, dù có tới 95% lượng trang phục thải bỏ hoàn toàn có khả năng tái sử dụng. Hoạt động sản xuất và xử lý sợi vải tiêu tốn nhiều tài nguyên thiên nhiên, đồng thời làm gia tăng phát thải khí nhà kính và rác thải nhựa. Nhằm giảm thiểu lãng phí và bảo vệ môi trường, việc tái lưu thông quần áo thông qua hình thức trao đổi trực tiếp giữa các cá nhân được xem là một giải pháp hữu ích, vừa kéo dài vòng đời sản phẩm, vừa tăng cường sự gắn kết trong cộng đồng.

Từ thực tiễn trên, tác giả xác định mục tiêu và nhiệm vụ nghiên cứu của đồ án tốt nghiệp bao gồm:

  1. Xây dựng một nền tảng trang web chuyên biệt phục vụ việc trao đổi các mặt hàng thời trang đã qua sử dụng, tạo ra không gian thuận tiện, an toàn cho người dùng đăng tải, tìm kiếm và thực hiện các giao dịch đổi đồ.
  2. Khảo sát các giải pháp tương tự trong và ngoài nước (nền tảng Bunz Trade Zone và các hội nhóm đổi đồ trên Facebook) để đúc rút các ưu điểm, nhược điểm và xác định các yêu cầu chức năng cần có.
  3. Phân tích và thiết kế hệ thống theo phương pháp hướng đối tượng, bao gồm biểu đồ ca sử dụng (Use Case), kịch bản chi tiết, biểu đồ tuần tự (Sequence Diagram), biểu đồ lớp và mô hình cơ sở dữ liệu quan hệ.
  4. Tích hợp mô hình học sâu thuộc lĩnh vực thị giác máy tính (Computer Vision) để xây dựng tính năng kiểm duyệt hình ảnh bài đăng tự động, hỗ trợ phân loại và phát hiện sản phẩm trang phục hợp lệ.
  5. Cài đặt, triển khai thử nghiệm ứng dụng web hoàn chỉnh kết hợp giữa các khối công nghệ ReactJS, Spring Boot, MySQL và Flask API.

Đối tượng và phạm vi nghiên cứu của đề tài được giới hạn như sau:

  • Đối tượng nghiên cứu: Hệ thống phần mềm web trao đổi mặt hàng thời trang và mô hình nhận diện đối tượng ứng dụng trong kiểm duyệt ảnh.
  • Phạm vi đối tượng phục vụ: Tất cả người sử dụng internet có nhu cầu trao đổi các mặt hàng trang phục cũ như quần áo, giày dép, phụ kiện thời trang.
  • Phạm vi triển khai và thời gian: Đồ án được nghiên cứu, xây dựng và hoàn thành vào tháng 12 năm 2023 tại Học viện Công nghệ Bưu chính Viễn thông.

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

Để giải quyết các yêu cầu đặt ra cho hệ thống, đồ án tiếp cận các cơ sở lý thuyết và công nghệ chuyên ngành kỹ thuật phần mềm cùng thị giác máy tính:

  • Thư viện React (ReactJS): Thư viện mã nguồn mở JavaScript được sử dụng để xây dựng giao diện người dùng. React hoạt động dựa trên các thành phần (components), cú pháp mở rộng JSX kết hợp giữa HTML và JavaScript, cùng cơ chế DOM ảo (Virtual DOM). Virtual DOM lưu trữ cấu trúc giao diện trên bộ nhớ đệm, tính toán các điểm khác biệt và chỉ cập nhật những phần tử thực sự thay đổi lên DOM của trình duyệt, giúp nâng cao hiệu năng đối với các ứng dụng có dữ liệu biến đổi liên tục.
  • Framework Spring Boot: Phân hệ thuộc hệ sinh thái Spring hỗ trợ phát triển nhanh ứng dụng (Rapid Application Development - RAD). Spring Boot loại bỏ các cấu hình XML phức tạp, tự động thiết lập các thành phần cấp sản xuất, cung cấp các máy chủ nhúng sẵn như Tomcat, Jetty, Undertow và mở ra các điểm cuối HTTP để quản lý chỉ số hoạt động của hệ thống.
  • Hệ quản trị cơ sở dữ liệu MySQL: Hệ thống quản trị cơ sở dữ liệu quan hệ mã nguồn mở tốc độ cao, hỗ trợ đa nền tảng và cung cấp các tiêu chuẩn bảo mật, các hàm SQL chuẩn để quản lý các bảng dữ liệu có cấu trúc.
  • Bài toán nhận diện đối tượng (Object Detection): Phân hệ thị giác máy tính khoanh vùng quan tâm (bounding box) và phân loại đối tượng trong ảnh. Tác giả đã khảo sát các mô hình:
    • Faster RCNN: Mô hình hai giai đoạn sử dụng mạng đề xuất vùng RPN (Region Proposal Network) cùng cửa sổ trượt trên feature map để dự đoán tọa độ và độ tin cậy đối tượng (objectness score), đạt độ chính xác cao nhưng tốc độ chưa đáp ứng thời gian thực.
    • SSD (Single Shot Detector): Mô hình một giai đoạn sử dụng các default bounding box trên nhiều tầng feature map khác nhau, đạt mAP 74.3% trên tập kiểm thử VOC2007 và tốc độ 59 FPS trên card đồ họa Nvidia Titan X (kích thước ảnh 512 x 512).
    • YOLO (You Only Look Once): Mô hình do Joseph Redmon và cộng sự đề xuất năm 2016, chuyển bài toán phát hiện đối tượng thành bài toán hồi quy dự đoán đồng thời tọa độ và xác suất lớp trên lưới ô $(p, x, y, w, h, C)$. Phiên bản được chọn là YOLOv8 (cụ thể là biến thể nano YOLOv8n) gồm khối Backbone trích xuất đặc trưng và khối Head với 3 feature map tương ứng để nhận diện vật thể nhỏ $(80, 80, 256)$, vừa $(40, 40, 512)$ và lớn $(20, 20, 512)$.

Phương pháp nghiên cứu thực tế bao gồm phương pháp phân tích - tổng hợp tài liệu, phương pháp so sánh hệ thống, mô hình hóa phần mềm bằng chuẩn UML và phương pháp thực nghiệm huấn luyện mô hình học sâu. Tác giả sử dụng tập dữ liệu hình ảnh trang phục gán nhãn bằng công cụ LabelImg, huấn luyện mô hình YOLOv8n trên nền tảng Google Colab với GPU, sử dụng thư viện Ultralytics và triển khai API nhận diện bằng thư viện Flask (Python).

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

Trước khi thiết kế kiến trúc, đồ án tổng hợp kết quả khảo sát hai mô hình trao đổi tương tự nhằm xác định chính xác các yêu cầu kỹ thuật:

Tiêu chí so sánh Nền tảng Bunz Trade Zone Hội nhóm trao đổi trên Facebook Hệ thống đề xuất của đồ án
Nền tảng vận hành Hỗ trợ ứng dụng Web và Mobile Vận hành trên mạng xã hội Facebook Ứng dụng Web độc lập
Phạm vi mặt hàng Đa dạng (thời trang, gia dụng, phi hiện vật) Đa dạng, dàn trải theo từng nhóm Chuyên biệt về mặt hàng thời trang cũ
Quy trình trao đổi Thương lượng qua chat, hỗ trợ hẹn gặp Nhắn tin hoặc bình luận tự phát Gửi yêu cầu 2 chiều, xác nhận, đặt lịch hẹn
Kiểm duyệt bài đăng Chưa có kiểm duyệt độ trung thực bài đăng Phụ thuộc quản trị viên, dễ phát sinh lừa đảo Tự động qua mô hình YOLOv8n và thủ công
Hạn chế chính Giới hạn khu vực địa lý, giảm tương tác do coin Thiếu nghiệp vụ chuyên sâu, bài viết dễ trôi Cần mở rộng thêm dữ liệu nhận diện

Hệ thống được thiết kế theo mô hình hướng đối tượng với ba nhóm tác nhân (Actors):

  • Thành viên (Member): Thực hiện đăng ký, đăng nhập tài khoản, quản lý thông tin cá nhân, xem hồ sơ người dùng khác, chat trực tuyến, xem danh sách bài đăng và nhận thông báo từ hệ thống.
  • Người dùng (User): Sở hữu toàn bộ quyền của Member, đồng thời có thể quản lý bài đăng cá nhân (thêm, sửa, xóa bài viết), tìm kiếm bài đăng theo bộ lọc, gửi yêu cầu trao đổi, xử lý yêu cầu trao đổi (chấp nhận hoặc từ chối), thiết lập lịch hẹn gặp mặt, theo dõi lịch sử trao đổi, báo cáo vi phạm và đánh giá.
  • Quản trị viên (Admin): Sở hữu quyền của Member, kèm theo quyền quản trị danh mục sản phẩm, quản lý tài khoản người dùng (tìm kiếm, khóa tài khoản), quản lý toàn bộ bài đăng, xử lý báo cáo vi phạm, xem báo cáo thống kê và kiểm duyệt bài đăng (kiểm duyệt thủ công hoặc theo dõi kết quả kiểm duyệt tự động).

Quy trình kiểm duyệt tự động được thiết kế thành một luồng xử lý khép kín: Khi người dùng tạo bài đăng trên giao diện ReactJS, hệ thống Spring Boot lưu thông tin bài đăng vào MySQL và chuyển danh sách ảnh sang dịch vụ Flask. Dịch vụ Flask nạp mô hình YOLOv8n đã huấn luyện để dự đoán các nhãn trang phục (như áo, quần, áo len). Kết quả được phản hồi về Spring Boot để cập nhật trạng thái bài viết: duyệt bài nếu đúng ảnh thời trang, khóa bài hoặc chuyển sang trạng thái chờ duyệt thủ công nếu không phát hiện thấy vật thể hợp lệ.

Hệ thống triển khai thử nghiệm trên ba khối ứng dụng:

  • Khối ứng dụng Spring Boot đảm nhận việc xử lý logic nghiệp vụ và giao tiếp cơ sở dữ liệu MySQL.
  • Khối ứng dụng ReactJS hiển thị giao diện phía máy khách với các màn hình chức năng: Đăng nhập, Trang chủ, Thêm bài đăng, Chi tiết bài đăng, Giao diện yêu cầu trao đổi, Quản lý lịch sử trao đổi, Xác nhận trao đổi, Hộp thoại Chat, Bảng quản trị người dùng và kiểm duyệt bài đăng.
  • Khối dịch vụ Flask (Python) chạy ngầm thực thi mô hình YOLOv8n phục vụ API dự đoán hình ảnh.

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

Chương 1: Giới thiệu chung

Chương 1 làm rõ bối cảnh thực tiễn và lý do hình thành đề tài xuất phát từ vấn nạn rác thải may mặc. Tác giả tiến hành khảo sát nền tảng Bunz Trade Zone (ra đời tại Toronto, Canada bởi Emily Bitze) và các hội nhóm trao đổi trên Facebook. Từ những ưu điểm và hạn chế của các hệ thống này, chương 1 xác định phạm vi phục vụ người dùng internet có nhu cầu trao đổi quần áo, giày dép, phụ kiện. Các yêu cầu chức năng nghiệp vụ cụ thể được xác lập, bao gồm quản lý bài đăng, quản lý yêu cầu trao đổi hai chiều, tính năng đặt lịch hẹn gặp mặt, hệ thống chat nội bộ và cơ chế kiểm duyệt nội dung kết hợp giữa tự động và thủ công.

Chương 2: Cơ sở lý thuyết

Chương 2 trình bày các kiến thức nền tảng và công cụ được sử dụng trong đồ án. Về mặt công nghệ web, chương giới thiệu thư viện ReactJS với cơ chế Virtual DOM và cú pháp JSX; framework Spring Boot với tính năng phát triển nhanh không cần XML; hệ quản trị cơ sở dữ liệu MySQL. Về thị giác máy tính, chương phân tích bài toán phát hiện đối tượng, so sánh kiến trúc của Faster RCNN và SSD với YOLO. Tác giả tập trung phân tích mô hình YOLOv8 (phiên bản nano YOLOv8n) với cấu trúc Backbone và Head phân tách 3 feature map. Đồng thời, chương liệt kê các công cụ hỗ trợ gồm ngôn ngữ Python, nền tảng Google Colab, công cụ gán nhãn LabelImg, thư viện Flask API và thư viện Ultralytics.

Chương 3: Phân tích và thiết kế

Chương 3 trình bày chi tiết quá trình phân tích và thiết kế hệ thống theo hướng đối tượng. Tác giả xây dựng biểu đồ Use Case tổng quát và các biểu đồ phân rã cho 10 ca sử dụng chính, đi kèm 10 bảng kịch bản chi tiết:

  • Kịch bản Đăng nhập (tài khoản mẫu abc123, mật khẩu 123456).
  • Kịch bản Xem chi tiết bài đăng (tìm kiếm "Quần bò Boo", thể loại "Quần", ngày đăng 1-11-2023, lượt xem 100, trạng thái chưa trao đổi).
  • Kịch bản Tạo bài đăng (sản phẩm mẫu "Áo phao cũ", danh mục "Áo", địa chỉ hẹn đổi tại quận Long Biên, Hà Nội).
  • Kịch bản Chat (tìm kiếm người dùng xyz, gửi tin nhắn trao đổi).
  • Kịch bản Yêu cầu trao đổi (chọn đổi "Áo sơ mi" lấy "Quần jogger" của tài khoản abc123).
  • Kịch bản Xác nhận trao đổi (xác nhận yêu cầu từ linh123, đặt lịch hẹn ngày 1/11/2023 tại quán cà phê trên đường Nguyễn Văn Cừ, Long Biên).
  • Kịch bản Xem lịch sử trao đổi (bộ lọc ngày 25/10/2023 đến 30/10/2023 với các trạng thái "Từ chối", "Chờ hẹn").
  • Kịch bản Xem lịch hẹn (chi tiết cuộc hẹn ngày 30/10/2023 tại quán P Coffee trường PTIT - Hà Nội giữa hai tài khoản).
  • Kịch bản Kiểm duyệt thủ công (Admin lọc bài từ 30/10/2023 đến 5/11/2023, thực hiện khóa bài "Quần jogger" với lý do "Bài đăng không có ảnh của sản phẩm").
  • Kịch bản Kiểm duyệt tự động (luồng gửi nhận dữ liệu giữa Spring Boot và hệ thống dự đoán).

Chương 3 cũng cung cấp biểu đồ lớp phân tích, các biểu đồ tuần tự tương ứng cho từng chức năng và thiết kế cơ sở dữ liệu quan hệ hoàn chỉnh. Cuối chương là quy trình huấn luyện mô hình YOLOv8n: theo dõi các hàm loss qua các epoch huấn luyện, phân tích đường cong Precision-Recall và đánh giá thử nghiệm mô hình nhận diện chính xác các nhãn đối tượng như "pants", "sweater" mà không nhận diện nhầm vật thể khác.

Chương 4: Triển khai và thử nghiệm

Chương 4 mô tả các bước cài đặt và kết quả kiểm thử giao diện thực tế của hệ thống. Tác giả trình bày quy trình cấu hình, khởi chạy ứng dụng Spring Boot, ứng dụng ReactJS và dịch vụ Flask. Chương 4 minh chứng kết quả triển khai thông qua các giao diện hoạt động cụ thể: Giao diện Đăng nhập, Trang chủ hiển thị danh sách bài đăng, Thêm bài đăng mới, Xem chi tiết bài đăng, Tạo yêu cầu trao đổi, Quản lý lịch sử trao đổi, Xác nhận trao đổi, Giao diện Chat thời gian thực, Giao diện quản lý bài đăng của Admin, Giao diện quản lý người dùng, Giao diện kiểm duyệt bài đăng và Giao diện báo cáo thống kê hệ thống.

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

Đồ án ghi nhận các kết quả cụ thể đã hoàn thành bao gồm:

  • Xây dựng thành công hệ thống trang web trao đổi mặt hàng thời trang cũ vận hành đầy đủ chức năng: luồng nghiệp vụ trao đổi hai chiều khép kín, phân quyền tài khoản chặt chẽ, tính năng quản lý lịch hẹn gặp mặt trực tiếp và hệ thống nhắn tin trao đổi nội bộ.
  • Ứng dụng thành công mô hình học sâu YOLOv8n thông qua dịch vụ Flask API để tự động hóa khâu kiểm duyệt hình ảnh; mô hình có khả năng nhận diện chính xác các nhãn trang phục cơ bản (như "pants", "sweater") trên tập ảnh thử nghiệm và hạn chế hiện tượng bắt nhầm các vật thể không liên quan.
  • Thiết lập kiến trúc phần mềm hướng dịch vụ kết hợp đồng bộ giữa ReactJS (giao diện), Spring Boot (xử lý logic nghiệp vụ và lưu trữ MySQL) và Flask (xử lý trí tuệ nhân tạo).

Về mặt đóng góp, tác giả đã tự xác định:

  • Đề xuất một giải pháp nền tảng chuyên biệt cho việc tái sử dụng quần áo cũ nhằm giảm thiểu lãng phí và ô nhiễm môi trường, khắc phục tình trạng thiếu quy trình nghiệp vụ rõ ràng trên mạng xã hội Facebook cũng như rào cản địa lý và hệ thống điểm coin phức tạp của nền tảng Bunz Trade Zone.
  • Kết hợp kỹ thuật phát triển web hiện đại với thị giác máy tính trong bài toán kiểm duyệt nội dung, giúp hỗ trợ và giảm tải áp lực quản lý thủ công cho người vận hành trang web.

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

Dựa trên các nội dung được tác giả trình bày trong văn bản, đồ án tồn tại một số hạn chế:

  • Do giới hạn về mặt thời gian và tài nguyên tính toán, đồ án chỉ lựa chọn biến thể nhẹ nhất là YOLOv8 nano (YOLOv8n) và tập trung nhận diện một số nhãn trang phục cơ bản; mô hình mới chỉ dừng lại ở việc xác định xem bức ảnh có chụp quần áo hay không chứ chưa thể đánh giá tình trạng hư hỏng, mức độ mới cũ hay tính xác thực về thương hiệu của món đồ.
  • Hệ thống mới được triển khai và kiểm thử trong phạm vi đề tài đồ án tốt nghiệp đại học, chưa có số liệu đánh giá về khả năng chịu tải hoặc vận hành trên môi trường mạng thực tế với lượng người dùng đồng thời lớn.

Hướng phát triển tiếp theo được đề cập là mở rộng tập dữ liệu huấn luyện cho mô hình nhận diện với nhiều lớp trang phục và phụ kiện đa dạng hơn, nâng cấp thuật toán đánh giá chất lượng sản phẩm qua hình ảnh và hoàn thiện thêm các tính năng hỗ trợ giao dịch an toàn cho người dùng.

Giá trị tham khảo

Tài liệu đồ án có giá trị tham khảo thiết thực cho:

  • Sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm đang chuẩn bị thực hiện đồ án tốt nghiệp, đặc biệt là sinh viên theo học chương trình kỹ sư tại Học viện Công nghệ Bưu chính Viễn thông.
  • Người phát triển phần mềm muốn tham khảo một kiến trúc ứng dụng web kết hợp giữa Spring Boot, ReactJS và dịch vụ AI viết bằng Flask.
  • Phần đáng tham khảo nhất của đồ án là Chương 3 (Phân tích và thiết kế), nơi cung cấp hệ thống kịch bản ca sử dụng chi tiết, các biểu đồ tuần tự chuẩn mực cùng phương pháp tích hợp mô hình YOLOv8 vào một luồng nghiệp vụ web cụ thể.

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

1. Lý do thực tế nào thúc đẩy tác giả xây dựng nền tảng web trao đổi đồ thời trang cũ?
Tác giả xuất phát từ thực trạng rác thải trang phục gia tăng gây ô nhiễm môi trường và lãng phí tài nguyên, trong đó dẫn chứng số liệu người dân Mỹ thải trung bình 37 kg quần áo/năm (85% bị chôn lấp hoặc đốt dù 95% có thể tái sử dụng). Việc xây dựng trang web tạo ra kênh trao đổi trực tiếp, thúc đẩy tái sử dụng sản phẩm và gắn kết cộng đồng.

2. Tại sao đồ án lựa chọn mô hình YOLOv8n cho chức năng kiểm duyệt tự động?
Trong số các mô hình phát hiện đối tượng được khảo sát (Faster RCNN, SSD, YOLO), YOLOv8 là kiến trúc SOTA về tốc độ và độ chính xác. Tác giả chọn biến thể nano (YOLOv8n) nhằm tiết kiệm tài nguyên tính toán phần cứng mà vẫn đảm bảo độ chính xác tương đối và thời gian xử lý nhanh khi tích hợp vào hệ thống web.

3. Khác biệt cơ bản giữa hệ thống trong đồ án với các hội nhóm đổi đồ trên Facebook là gì?
Hội nhóm Facebook có lượng người dùng lớn nhưng bài đăng thiếu nghiệp vụ trao đổi cụ thể, thông tin dễ trôi, nguy cơ lừa đảo cao và có nhiều chức năng mạng xã hội không cần thiết. Hệ thống của đồ án được thiết kế chuyên biệt cho việc đổi đồ thời trang với quy trình gửi/nhận yêu cầu 2 chiều rõ ràng, hỗ trợ đặt lịch hẹn gặp và có kiểm duyệt nội dung.

4. Kịch bản chức năng "Xác nhận trao đổi" yêu cầu những thông tin gì từ người dùng?
Theo kịch bản Use Case 3.6 trong văn bản, khi người dùng chấp nhận một yêu cầu trao đổi sản phẩm từ người khác, hệ thống sẽ yêu cầu người dùng thiết lập lịch hẹn gặp mặt bằng cách nhập ngày trao đổi cụ thể và địa chỉ hẹn gặp (ví dụ: quán cà phê), sau đó trạng thái yêu cầu sẽ chuyển sang "Chờ trao đổi".

5. Luồng xử lý của chức năng kiểm duyệt bài đăng tự động diễn ra như thế nào?
Người dùng tạo bài đăng -> Hệ thống Spring Boot lưu thông tin vào MySQL và gửi danh sách ảnh sang dịch vụ Flask -> Mô hình YOLOv8n trên Flask dự đoán vật thể trong ảnh và trả kết quả về -> Spring Boot kết luận xét duyệt, lưu lịch sử duyệt và tự động đổi trạng thái bài viết (duyệt, khóa hoặc chuyển duyệt thủ công).

Kết luận

Đồ án tốt nghiệp "Xây dựng trang web trao đổi mặt hàng thời trang" của sinh viên Nguyễn Văn Hùng đã giải quyết trọn vẹn mục tiêu xây dựng một nền tảng hỗ trợ tái sử dụng quần áo cũ nhằm giảm thiểu ô nhiễm môi trường. Tác giả đã hoàn thành việc phân tích thiết kế hệ thống theo chuẩn hướng đối tượng, triển khai thành công ứng dụng web với kiến trúc phối hợp giữa Spring Boot, ReactJS, MySQL và tích hợp mô hình học sâu YOLOv8n qua Flask API để tự động hóa khâu kiểm duyệt hình ảnh. Kết quả thử nghiệm thực tế cho thấy các chức năng nghiệp vụ trao đổi, quản lý lịch hẹn và nhận diện trang phục đều vận hành ổn định theo đúng các kịch bản đã đề ra.