Giới thiệu dự án

Ngành công nghiệp thời trang nhanh (fast fashion) phát triển bùng nổ mang lại sự đa dạng về mẫu mã nhưng đồng thời tạo ra áp lực khổng lồ lên môi trường sinh thái. Theo các thống kê môi trường quốc tế, trung bình mỗi người dân tại các quốc gia phát triển thải ra khoảng 37kg rác thải dệt may mỗi năm; trong đó có đến 85% lượng quần áo bị chuyển thẳng đến các bãi chôn lấp hoặc lò đốt rác dù 95% trong số chúng hoàn toàn có khả năng tái sử dụng hoặc tái chế. Tại Việt Nam, thói quen tiêu dùng thay đổi nhanh chóng dẫn đến lượng lớn trang phục bị bỏ xó khi còn rất mới, trong khi các giải pháp tuần hoàn đồ cũ hiện tại còn phân mảnh và tiềm ẩn nhiều rủi ro.

Vấn đề cốt lõi (problem statement) nằm ở sự thiếu hụt một nền tảng chuyên biệt và an toàn dành riêng cho việc trao đổi đồ thời trang cũ (C2C barter platform). Các kênh hiện nay như nhóm mạng xã hội bộc lộ nhiều điểm nghẽn nghiêm trọng: tin bài rác tràn lan, thiếu quy chuẩn phân loại danh mục, không có cơ chế xác thực hình ảnh trang phục và rủi ro gian lận, lừa đảo cao do thiếu quy trình hẹn gặp trao đổi minh bạch.

Đồ án tốt nghiệp “Xây dựng trang web trao đổi mặt hàng thời trang” do sinh viên Nguyễn Văn Hùng (Học viện Công nghệ Bưu chính Viễn thông - PTIT), dưới sự hướng dẫn của TS. Nguyễn Quý Sỹ, được phát triển nhằm giải quyết triệt để bài toán trên.

Mục tiêu cụ thể của dự án:

  1. Xây dựng hệ thống Web Application hướng dịch vụ với khả năng xử lý trao đổi đồ thời trang đa tính năng (đăng tin, tìm kiếm, lọc danh mục, đàm phán qua chat trực tiếp).
  2. Thiết kế module tự động kiểm duyệt nội dung (Automated Content Moderation) sử dụng mô hình thị giác máy tính YOLOv8n nhằm lọc các hình ảnh rác hoặc không chứa trang phục trước khi hiển thị lên bảng tin.
  3. Thiết lập quy trình quản lý giao dịch khép kín từ khâu gửi yêu cầu, xác nhận trao đổi đến thiết lập lịch hẹn gặp trực tiếp ngoài đời thực.
  4. Tối ưu hóa hiệu năng phản hồi hệ thống với kiến trúc backend decoupled kết nối đa nền tảng.

Kết quả đo lường kỳ vọng: Hệ thống phản hồi API dưới 200ms, mô hình Computer Vision đạt độ chính xác phát hiện trang phục mAP@50-95 trên 70% với thời gian suy luận (inference time) dưới 60ms trên môi trường CPU tiêu chuẩn. Phạm vi dự án tập trung vào các mặt hàng thời trang đã qua sử dụng (quần áo, giày dép, phụ kiện) phục vụ người dùng cá nhân trong phạm vi nội địa.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Khảo sát thị trường cho thấy hai mô hình phổ biến hiện nay gồm nền tảng trao đổi quốc tế (Bunz Trade Zone) và các hội nhóm mạng xã hội (Facebook Groups).

Tiêu chí phân tích Bunz Trade Zone Hội nhóm Facebook Hệ thống đề xuất của đồ án
Kiểm duyệt nội dung Thủ công / Cộng đồng báo cáo Bộ lọc từ khóa cơ bản của Facebook Tự động bằng AI (YOLOv8) + Admin Review
Nghiệp vụ trao đổi Hỗ trợ barter + hệ thống token ảo Không có, trao đổi tự do trong comment/inbox Quy trình chuẩn: Request -> Match -> Schedule
Bộ lọc chuyên biệt Danh mục đa dạng (bị loãng) Không có bộ lọc kích cỡ, loại đồ chi tiết Lọc sâu theo loại trang phục, khu vực, trạng thái
Đặt lịch gặp mặt Có hỗ trợ cơ bản Tự thỏa thuận, dễ bị bùng lịch hẹn Tích hợp module quản lý lịch hẹn (Meeting Scheduler)
Bảo mật & Trải nghiệm Giới hạn khu vực địa lý Rủi ro spam và lừa đảo cao Phân quyền chặt chẽ, kiểm soát định danh người dùng

Yêu cầu người dùng được phân loại theo ma trận MoSCoW:

  • Must-have: Xác thực người dùng qua JWT, tạo/sửa/xóa bài đăng trao đổi, gửi yêu cầu ghép cặp đồ, chat thời gian thực, module AI kiểm duyệt ảnh trang phục.
  • Should-have: Thiết lập lịch hẹn gặp mặt trực tiếp, quản lý lịch sử trao đổi, bảng điều khiển (Dashboard) thống kê cho Admin.
  • Could-have: Đánh giá độ uy tín tài khoản (User Rating), gợi ý bài đăng tương đồng.
  • Won't-have (giai đoạn này): Tích hợp cổng thanh toán trực tuyến hoặc đơn vị vận chuyển bên thứ ba.

Thiết kế hệ thống

Hệ thống được thiết kế theo kiến trúc Microservices-ready Decoupled Architecture, tách biệt rõ ràng giữa Client, Business Backend và AI Inference Service.

graph TD
    Client[ReactJS Single Page Application] -->|HTTP REST / JSON| Gateway[Spring Boot API Server]
    Gateway -->|JPA / Hibernate| DB[(MySQL Database)]
    Gateway -->|HTTP POST Multipart| AIService[Python Flask AI Server]
    AIService -->|Ultralytics Inference| YOLO[YOLOv8n Pre-trained & Fine-tuned Model]

Technology Stack chính của hệ thống:

  • Frontend: ReactJS (v18.2) kết hợp Virtual DOM và JSX, Axios, TailwindCSS.
  • Core Backend: Spring Boot (v3.1) Java 17, Spring Data JPA, Spring Security, Hibernate ORM.
  • AI Server: Python (v3.10), Flask (v2.3), Ultralytics YOLOv8 Framework, PyTorch (v2.0).
  • Database: MySQL (v8.0) với cơ chế đánh chỉ mục tối ưu hóa truy vấn quan hệ.

Cơ sở dữ liệu bao gồm các thực thể trung tâm: User (thông tin tài khoản, vai trò), Post (bài đăng, tiêu đề, mô tả, địa chỉ, trạng thái kiểm duyệt), PostImage (đường dẫn ảnh, kết quả nhãn dự đoán), ExchangeRequest (yêu cầu trao đổi giữa 2 bài đăng), Appointment (thời gian, địa điểm cuộc hẹn), và Category (danh mục áo, quần, váy, phụ kiện).

-- Thiết kế cấu trúc bảng quản lý yêu cầu trao đổi và bài đăng
CREATE TABLE posts (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    user_id BIGINT NOT NULL,
    category_id INT NOT NULL,
    title VARCHAR(255) NOT NULL,
    description TEXT,
    exchange_target TEXT,
    address VARCHAR(255),
    status ENUM('PENDING', 'APPROVED', 'REJECTED', 'EXCHANGED') DEFAULT 'PENDING',
    views_count INT DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id)
);

Methodology

Dự án áp dụng mô hình phát triển phần mềm linh hoạt (Agile Scrum) rút gọn, chia thành 4 sprint chính trong 16 tuần:

  • Sprint 1 (Tuần 1-4): Khảo sát hiện trạng, thu thập và tiền xử lý bộ dữ liệu ảnh thời trang, gán nhãn bằng LabelImg.
  • Sprint 2 (Tuần 5-8): Huấn luyện, tinh chỉnh mô hình YOLOv8n trên Google Colab; xây dựng REST API service với Flask.
  • Sprint 3 (Tuần 9-12): Xây dựng Core Backend với Spring Boot và triển khai giao diện người dùng Single Page Application với ReactJS.
  • Sprint 4 (Tuần 13-16): Tích hợp hệ thống, kiểm thử toàn diện (End-to-End Testing), tối ưu hiệu năng và đóng gói triển khai.

Implementation và kết quả

Development process

Trọng tâm kỹ thuật của đồ án là module phát hiện và kiểm duyệt tự động đối tượng trang phục (Object Detection) nhằm ngăn chặn tình trạng đăng tải hình ảnh sai mục đích. Thay vì sử dụng Faster R-CNN (nặng, tốc độ trích xuất vùng RPN chậm) hay SSD (độ chính xác chưa tối ưu trên vật thể phức tạp), dự án ứng dụng YOLOv8 nano (YOLOv8n). YOLOv8 tái định nghĩa bài toán phát hiện đối tượng dưới dạng hồi quy trực tiếp tọa độ Bounding Box và xác suất lớp đối tượng:

$$\text{Output} = (p, x, y, w, h, C)$$

Trong đó $p$ là xác suất tồn tại vật thể, $(x, y)$ là tọa độ tâm, $(w, h)$ là kích thước hộp giới hạn, và $C$ là vector phân phối xác suất danh mục sản phẩm (áo, quần, váy...).

Dưới đây là mã nguồn xây dựng microservice suy luận AI bằng Python Flask kết hợp thư viện Ultralytics:

from flask import Flask, request, jsonify
from ultralytics import YOLO
import io
from PIL import Image

app = Flask(__name__)
# Load mô hình YOLOv8n đã được huấn luyện cho danh mục thời trang
model = YOLO('best_fashion_yolov8n.pt')

VALID_CLASSES = {'shirt', 'pants', 'dress', 'jacket', 'sweater', 'skirt'}

@app.route('/api/v1/detect-clothing', methods=['POST'])
def detect_clothing():
    if 'file' not in request.files:
        return jsonify({'error': 'No file uploaded', 'is_valid': False}), 400
    
    file = request.files['file']
    img_bytes = file.read()
    image = Image.open(io.BytesIO(img_bytes))
    
    # Thực hiện suy luận đối tượng với confidence threshold = 0.5
    results = model.predict(source=image, conf=0.5, imgsz=640)
    
    detected_labels = []
    for r in results:
        for c in r.boxes.cls:
            label_name = model.names[int(c)]
            detected_labels.append(label_name)
            
    # Kiểm tra xem hình ảnh có chứa ít nhất 1 nhãn trang phục hợp lệ không
    has_valid_clothing = any(label in VALID_CLASSES for label in detected_labels)
    
    return jsonify({
        'is_valid': has_valid_clothing,
        'detected_items': detected_labels,
        'confidence_scores': [float(score) for r in results for score in r.boxes.conf]
    }), 200

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Tại tầng Spring Boot, khi nhận request tạo bài đăng mới từ ReactJS, service sẽ điều phối kiểm duyệt bất đồng bộ:

@Service
public class PostModerationService {
    @Autowired
    private RestTemplate restTemplate;
    
    private final String AI_SERVICE_URL = "http://localhost:5000/api/v1/detect-clothing";

    public PostStatus evaluatePostImage(MultipartFile file) {
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.MULTIPART_FORM_DATA);

        MultiValueMap<String, Object> body = new LinkedMultiValueMap<>();
        body.add("file", file.getResource());
        HttpEntity<MultiValueMap<String, Object>> requestEntity = new HttpEntity<>(body, headers);

        try {
            ResponseEntity<ModerationResponseDto> response = restTemplate.postForEntity(
                AI_SERVICE_URL, requestEntity, ModerationResponseDto.class);
            
            if (response.getBody() != null && response.getBody().isValid()) {
                return PostStatus.APPROVED; // Tự động duyệt nếu ảnh chứa trang phục hợp lệ
            }
            return PostStatus.PENDING; // Chuyển cho Quản trị viên duyệt thủ công nếu nghi vấn
        } catch (Exception e) {
            return PostStatus.PENDING; // Fallback an toàn khi service AI gặp sự cố
        }
    }
}

Testing và validation

Quá trình huấn luyện mô hình YOLOv8n trên tập dữ liệu hình ảnh thời trang phân bổ qua các epoch cho thấy các hàm tổn hao (Box Loss, Class Loss, DFL Loss) giảm dần và hội tụ ổn định:

  • Tốc độ xử lý (Inference Speed): Trung bình 37.2ms trên CPU Intel Core i5 và 4.8ms trên GPU NVIDIA A100.
  • Độ chính xác nhận diện: Đạt chỉ số mAP@50-95 là 78.4% trên tập test, đặc biệt các nhãn thông dụng như "pants" và "sweater" đạt Precision trên 88%.
=== BẢNG THỐNG KÊ KIỂM THỬ HỆ THỐNG ===
1. Kiểm thử chức năng (Functional Testing):
   - Tổng số ca kiểm thử (Test Cases): 48
   - Số ca đạt (Passed): 48/48 (100%)
2. Kiểm thử tải (Load Testing với Apache JMeter):
   - Mức tải thử nghiệm: 250 concurrent users
   - Thời gian đáp ứng trung bình (Average Response Time): 142ms
   - Tỷ lệ lỗi (Error Rate): 0.00%

Kết quả đạt được

Hệ thống hoàn thiện toàn bộ các module chức năng cam kết:

  • Xây dựng giao diện ReactJS mượt mà với khả năng render tối ưu qua Virtual DOM.
  • Tự động hóa khâu tiền kiểm duyệt bài đăng, giúp giảm hơn 80% thời gian xử lý thủ công của Admin.
  • Hoàn thiện chu trình trao đổi 4 bước: Tạo yêu cầu -> Khớp sản phẩm mong muốn -> Phê duyệt -> Thiết lập lịch hẹn chi tiết kèm ghi chú.

Đổi mới và đóng góp

  1. Ứng dụng Computer Vision (YOLOv8n) vào kiểm duyệt C2C Barter: Khác với các nền tảng thương mại truyền thống chỉ dựa trên từ khóa văn bản, đồ án áp dụng thành công mô hình nhận diện vật thể thời gian thực để phân tích ngữ nghĩa hình ảnh sản phẩm trước khi cho phép đăng tải.
  2. Cơ chế trao đổi trực tiếp không phụ thuộc tiền tệ (Pure Barter Workflow): Loại bỏ các rào cản tính phí phức tạp, cung cấp giải pháp đổi đồ ngang hàng minh bạch, trực quan hóa trạng thái món đồ (Chưa trao đổi, Chờ xác nhận, Đã trao đổi).
  3. Module quản lý lịch hẹn thông minh (Smart Meeting Scheduler): Giải quyết điểm nghẽn lớn nhất của việc đổi đồ ngoài đời thực, cung cấp giao diện quản lý lịch theo ngày, hiển thị chi tiết sản phẩm cần mang và thông tin đối tác gặp mặt.

Ứng dụng thực tế và triển khai

Hệ thống có khả năng ứng dụng trực tiếp tại các trường đại học, khu đô thị hoặc cộng đồng dân cư hướng tới lối sống xanh (Zero-waste lifestyle).

Kịch bản sử dụng thực tế:

  • Bước 1: Người dùng A đăng tải một chiếc áo phao size M còn mới nhưng bị chật kèm ảnh chụp thực tế. Hệ thống AI nhận diện đúng nhãn "jacket" và tự động duyệt bài lên bảng tin sau 1 giây.
  • Bước 2: Người dùng B sở hữu quần jogger phù hợp với nhu cầu của A, gửi yêu cầu trao đổi đính kèm sản phẩm của mình.
  • Bước 3: Hai bên trao đổi chi tiết tình trạng đồ qua khung chat thời gian thực.
  • Bước 4: Người dùng A chấp nhận trao đổi và thiết lập lịch hẹn gặp lúc 9:00 sáng tại khuôn viên trường kèm vị trí cụ thể.

Chiến lược triển khai yêu cầu phần cứng tối thiểu: 1 Cloud Server VPS (2 vCPU, 4GB RAM, 40GB SSD) chạy Docker containers cho React frontend (Nginx reverse proxy), Spring Boot backend và Flask AI microservice.

Hạn chế và hướng phát triển

Dù đạt được các mục tiêu đặt ra, đồ án vẫn còn một số hạn chế nhất định:

  • Mô hình YOLOv8n tập trung phát hiện loại trang phục nhưng chưa đánh giá sâu được tình trạng cũ/mới (độ sờn rách, ố màu) của sản phẩm.
  • Chưa tích hợp dịch vụ bản đồ (Google Maps API / OpenStreetMap) để tự động tính toán gợi ý điểm hẹn trung gian tối ưu khoảng cách cho hai bên.

Hướng phát triển tiếp theo:

  • Nâng cấp mô hình AI với kỹ thuật Image Classification kết hợp Semantic Segmentation để phát hiện khuyết tật trên vải và chấm điểm độ mới của sản phẩm.
  • Tích hợp Push Notification và phát triển ứng dụng di động đa nền tảng (React Native / Flutter).

Đối tượng hưởng lợi

  • Sinh viên & Học viên: Cung cấp tài liệu tham khảo hoàn chỉnh về cách tích hợp mô hình Deep Learning (PyTorch/YOLO) vào hệ thống ứng dụng Web doanh nghiệp sử dụng Java Spring Boot và ReactJS.
  • Lập trình viên (Developers): Nắm vững kiến trúc Decoupled Microservice, quy trình xây dựng RESTful API an toàn và kỹ thuật tối ưu hóa cơ sở dữ liệu quan hệ MySQL.
  • Doanh nghiệp & Startup: Sở hữu bản thiết kế mẫu (Blueprint) cho các nền tảng kinh tế tuần hoàn (Circular Economy) với chi phí vận hành thấp nhờ tự động hóa bằng AI.
  • Cộng đồng & Xã hội: Thúc đẩy thói quen tái sử dụng quần áo cũ, giảm thiểu rác thải sinh hoạt dệt may và lan tỏa ý thức bảo vệ môi trường.

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

  1. Yêu cầu phần cứng để triển khai hệ thống có phức tạp không? Hệ thống sử dụng phiên bản YOLOv8 nano (YOLOv8n) tối ưu hóa trọng số (weights) chỉ khoảng vài megabytes, cho phép chạy suy luận trực tiếp trên CPU thông thường mà không bắt buộc trang bị GPU đắt tiền.
  2. Hệ thống xử lý thế nào khi mô hình AI phát hiện nhầm? Hệ thống áp dụng cơ chế Fallback hai lớp: Mọi bài đăng mà AI không chắc chắn (confidence score < 0.5) hoặc bị từ chối sẽ được tự động chuyển sang hàng đợi PENDING để Quản trị viên (Admin) xem xét và phê duyệt thủ công.
  3. Có thể tích hợp thêm các phương thức vận chuyển giao hàng tận nơi không? Hoàn toàn khả thi. Cấu trúc cơ sở dữ liệu và API đã được module hóa, cho phép dễ dàng tích hợp API của các đơn vị vận chuyển (Giao Hàng Nhanh, Viettel Post) vào trạng thái đơn trao đổi trong tương lai.
  4. Hệ thống bảo vệ dữ liệu cá nhân của người dùng như thế nào? Các thông tin nhạy cảm như mật khẩu được mã hóa bằng thuật toán BCrypt. Địa chỉ chi tiết và số điện thoại chỉ được hiển thị cho đối tác sau khi cả hai bên đã đồng ý xác nhận cuộc hẹn trao đổi.
  5. Hiệu suất của hệ thống khi có lượng lớn người dùng đồng thời? Với việc phân tách máy chủ AI và máy chủ nghiệp vụ riêng biệt, hệ thống dễ dàng mở rộng theo chiều ngang (Horizontal Scaling) bằng cách nhân bản các Docker container xử lý logic và cân bằng tải bằng Nginx.

Kết luận

Đồ án “Xây dựng trang web trao đổi mặt hàng thời trang” đã giải quyết thành công bài toán thực tiễn về tối ưu hóa vòng đời trang phục cũ thông qua nền tảng công nghệ hiện đại. Việc kết hợp hài hòa giữa kiến trúc phần mềm mạnh mẽ (Spring Boot, ReactJS, MySQL) và mô hình thị giác máy tính tiên tiến (YOLOv8) không chỉ nâng cao trải nghiệm người dùng mà còn giải quyết triệt để bài toán kiểm duyệt tự động trong các nền tảng trao đổi ngang hàng C2C. Đây là nền tảng vững chắc hướng tới việc xây dựng các giải pháp công nghệ phục vụ tiêu dùng bền vững và kinh tế tuần hoàn trong kỷ nguyên số.