ứng dụng 3d VIRTUAL TRY ON thử đồ

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN Đề tài: ỨNG DỤNG 3D VIRTUAL TRY-ON THỬ ĐỒ Giảng viên hướng dẫn: ThS Trần Anh Dũng ThS Phan Trung Hiếu Sinh viên thực hiện: Hồng Đình Quang 18520342 TP Hồ Chí Minh, ngày 01 tháng 01 năm 2022 NHẬN XÉT CỦA GIẢNG VIÊN LỜI CẢM ƠN Lời nhóm chúng em xin chân thành gửi lời cảm ơn đến thầy - Ths Trần Anh Dũng thời gian tận tâm giúp đỡ chúng em thông qua buổi báo cáo để giúp chúng em hồn thành đồ án cách tốt Đồng thời nhóm em muốn gửi lời cảm ơn đến anh chị khóa trên, đặc biệt những anh chị khoa chia sẻ những kinh nghiệm quý báu về môn học những kiến thức liên quan Cũng xin cảm ơn bạn bè tạo điều kiện thuận, mọi người đưa nhận xét góp ý chân thành, vơ cùng quý giá Những người động viên, hỡ trợ nhóm hồn thành đề tài Dù cố gắng hoàn thành đề tài phạm vi khả cho phép chúng em chưa thể làm tốt đồ án Quá trình thực đồ án học học cho chúng em để rút những kinh nghiệm cho những lần thực đồ án Em mong thời gian sau được Thầy cùng với bạn bè ủng hộ giúp đỡ cho nhóm chúng em Chúng em xin chân thành cảm ơn Nhóm thực hiện Hồng Đình Quang Chương I: Giới thiệu đề tài I Lý chọn đề tài Ecommerce phát triển mạnh mẽ với thói quen sử dụng thiết bị công nghệ mua hàng online Với tiện lợi mà Ecommerce mang lại cho ngành hàng nói chung ngành thời trang nói riêng, việc thử đồ mua đồ online mang lại nhiều hạn chế về khoảng cách Khách hàng phải tự ướm xem sản phẩm với người mẫu tự so sánh với để xem có phù hợp hay khơng Do đó, khách hàng nhận sản phẩm thường bị hớ về kích cỡ hay mặc khơng hợp Hiện trang web Ecommerce thời trang chưa trọng vào việc thử đồ online, cửa hàng áp dụng Với những lý phát triển cơng nghệ cho phép khách hàng thử đồ web ecommerce thời trang việc thiết yếu cho tại tương lai II Xác định yêu cầu Danh sách yêu cầu: STT Tên yêu cầu Biểu mẫu Thêm Model BM Thêm loại model BM 2 Danh sách biểu mẫu: 2.1 Biểu mẫu 1: Quy định Ghi 2.2 Biểu mẫu 2: Chương II: Phân tích I Sơ đồ Usecase: II Danh sách Actor: STT Tên Actor Quản lý Người dùng Ý nghĩa/Ghi Người có vị trí cao nhất, chịu trách nhiệm quản lý model Người dùng sử dụng dịch vụ thử đồ với model người quản lý tạo III Danh sách Usecase: STT Tên Usecase Quản lý model Quản lý loại model Ý nghĩa/Ghi Thêm/Sửa/Xóa model Thêm/Sửa/Xóa loại model Thử đồ Thử đồ với model có sẵn IV Đặc tả Usecase: Quản lý model - Thêm model Tên chức Thêm model Tóm tắt Thêm thông tin model như: tên model, loại model thơng tin chi tiết khác Dịng kiện Vào trang quản lý điền thơng tin vào form thêm model chọn “Thêm model” Hệ thống kiểm tra thông tin, thông tin hợp lệ tiến hành bước Dòng kiện khác Hệ thống lưu dữ liệu thông báo thành công 3.1 Thông tin không hợp lệ: Hệ thống hiển thị thông báo màu đỏ tại chỗ bị lỗi yêu cầu nhập Các yêu cầu đặc biệt lại thơng tin Khơng có Trạng thái hệ thống Actor: Quản lý trước thực use case Điều kiện: Người dùng đăng nhập vào hệ thống có quyền sử dụng chức Trạng thái hệ thống sau Người dùng thêm thông tin model thành công vào hệ thống thực thiện use case Điểm mở rộng - Khơng có Sửa model Tên chức Tóm tắt Dịng kiện Sửa thơng tin model Cập nhật thơng tin model Vào mục danh sách model trang quản lý, nhấn vào nút “Thông tin” model Người dùng nhập thông tin vào form thông tin nhấn “Lưu” Hệ thống kiểm tra thông tin, thông tin hợp lệ tiến hành bước Dòng kiện khác Hệ thống cập nhật liệu thông báo thành công 3.1 Thông tin không hợp lệ: Các yêu cầu đặc biệt Trạng thái hệ thống trước Hệ thống hiển thị thông báo u cầu nhập lại thơng tin Khơng có Actor: Quản lý thực use case Điều kiện: người dùng đăng nhập vào hệ thống có quyền sử dụng Trạng thái hệ thống sau chức Người dùng cập nhật thông tin model thành công vào hệ thống thực thiện use case Điểm mở rộng Khơng có - Xố model Tên chức Tóm tắt Dịng kiện Xóa thơng tin model Xóa thơng tin model Vào mục danh sách model trang quản lý, nhấn vào nút “Xóa thơng tin” model Người dùng chọn model cần xóa thơng tin nhấn “Xác nhận” Dòng kiện khác Các yêu cầu đặc biệt Trạng thái hệ thống trước Hệ thống cập nhật liệu thông báo thành công Khơng có Khơng có Actor: Quản lý thực use case Điều kiện: người dùng đăng nhập vào hệ thống có quyền sử dụng Trạng thái hệ thống sau chức Người dùng xóa thơng tin nhân viên thành công thực thiện use case Điểm mở rộng Khơng có - Xem thơng tin model Tên chức Xem thơng tin model Tóm tắt Xem thơng tin model Dịng kiện Nhấn vào nhân viên cần xem chi tiết thơng tin Dịng kiện khác Hệ thống hiển thị thông tin model Khơng có Các u cầu đặc biệt Khơng có Trạng thái hệ thống Actor: Quản lý trước thực use Điều kiện: Khơng có case Trạng thái hệ thống sau Hệ thống hiển trị trang thông tin model thực thiện use case Điểm mở rộng Khơng có Quản lý loại model - Thêm loại model Tên chức Thêm loại model Tóm tắt Thêm thơng tin loại model như: tên loại model thông tin chi tiết khác Dịng kiện Vào trang quản lý điền thông tin vào form thêm loại model chọn “Thêm loại model” Hệ thống kiểm tra thông tin, thông tin hợp lệ tiến hành bước Dòng kiện khác Hệ thống lưu dữ liệu thông báo thành công 3.1 Thông tin không hợp lệ: Hệ thống hiển thị thông báo màu đỏ tại chỗ bị lỗi yêu cầu nhập Các yêu cầu đặc biệt lại thông tin Khơng có Trạng thái hệ thống Actor: Quản lý trước thực use case Điều kiện: Người dùng đăng nhập vào hệ thống có quyền sử dụng chức Trạng thái hệ thống sau Người dùng thêm thông tin model thành công vào hệ thống thực thiện use case Điểm mở rộng - Khơng có Sửa loại model Tên chức Sửa thông tin loại model Tóm tắt Dịng kiện Cập nhật thơng tin loại model Vào mục danh sách loại model trang quản lý, nhấn vào nút “Thông tin” model Người dùng nhập thông tin vào form thông tin nhấn “Lưu” Hệ thống kiểm tra thông tin, thông tin hợp lệ tiến hành bước Dòng kiện khác Hệ thống cập nhật liệu thông báo thành công 3.1 Thông tin không hợp lệ: Các yêu cầu đặc biệt Trạng thái hệ thống trước Hệ thống hiển thị thông báo yêu cầu nhập lại thông tin Không có Actor: Quản lý thực use case Điều kiện: người dùng đăng nhập vào hệ thống có quyền sử dụng Trạng thái hệ thống sau chức Người dùng cập nhật thông tin model thành công vào hệ thống thực thiện use case Điểm mở rộng Khơng có - Xố model Tên chức Tóm tắt Dịng kiện Xóa thơng tin loại model Xóa thơng tin loại model Vào mục danh sách loại model trang quản lý, nhấn vào nút “Xóa thơng tin” loại model Người dùng chọn loại model cần xóa thơng tin nhấn “Xác nhận” Dòng kiện khác Các yêu cầu đặc biệt Trạng thái hệ thống trước Hệ thống cập nhật liệu thơng báo thành cơng Khơng có Khơng có Actor: Quản lý thực use case Điều kiện: người dùng đăng nhập vào hệ thống có quyền sử dụng Trạng thái hệ thống sau chức Người dùng xóa thơng tin nhân viên thành công thực thiện use case Điểm mở rộng Không có - Xem thơng tin model Tên chức Xem thơng tin loại model Tóm tắt Xem thơng tin loại model Dịng kiện Nhấn vào loại model cần xem chi tiết thơng tin Dịng kiện khác Hệ thống hiển thị thông tin loại model Khơng có Các u cầu đặc biệt Khơng có Trạng thái hệ thống Actor: Quản lý trước thực use Điều kiện: Khơng có case Trạng thái hệ thống sau Hệ thống hiển trị trang thông tin model thực thiện use case Điểm mở rộng Khơng có V Sơ đồ lớp: Sơ đồ lớp (Mức phân tích) Danh sách lớp đối tượng STT Tên lớp Loại Ý nghĩa/ Ghi Model Model 3d ModelCategory loại Model 3d Mô tả chi tiết đối tượng 3.1 Model - Danh sách thuộc tính: STT Thuộc tính Kiểu liệu Phạm vi truy cập Ý nghĩa ModelCode String Public Id model 3d ModelName String Public Tên model 3d ModelDescripte String Public Mô tả model 3d ModelCategory String Public Loại model 3d ModelObj Object Public File Obj model ModelMtl Object Public File mtl model ModelMaterial Object Public File màu chất liệu model ModelStatus String Public Trạng thái - danh sách phương thức STT Tên phương thức Kiểu trả Ràng buộc Ý nghĩa/ Ghi FindByModelCode Model Public Lấy thông tin model 3d FindByModelCategory List Public Lấy danh sách model 3d theo loại model Create Boolean Public Thêm model 3d Update Boolean Public Cập nhật model 3d Delete Boolean Public Xoá model 3d 3.2 ModelCategory - Danh sách thuộc tính: STT Thuộc tính Kiểu liệu Phạm vi truy cập Ý nghĩa ModelCategoryCode String Public Id loại model 3d ModelCategoryName String Public Tên loại model 3d ModelCategoryDescripte String Public Mô tả loạik model 3d ModelCategoryStatus String Public Trạng thái - danh sách phương thức STT Tên phương thức Kiểu trả Ràng buộc Ý nghĩa/ Ghi FindByModelCategoryCode ModelCategory Public Lấy thông tin loại model 3d FindAll List Public Lấy danh sách tất loại model 3d Create Boolean Public Thêm loại model 3d Update Boolean Public Cập nhật loại model 3d Delete Boolean Public Xoá loại model 3d Chương III: Thiết kế liệu I Sơ đồ Sơ đồ cơ sở dữ liệu Sơ đồ logic II Mô tả bảng dữ liệu Model STT Thuộc tính Kiểu liệu Ý nghĩa ModelCode String Id model 3d ModelName String Tên model 3d ModelDescripte String Mô tả model 3d ModelCategory String Loại model 3d ModelObj String File Obj model ModelMtl String File mtl model ModelMaterial String File màu chất liệu model ModelStatus Trạng thái ModelCategory STT Thuộc tính Kiểu liệu Ý nghĩa ModelCategoryCode String Id loại model 3d ModelCategoryName String Tên loại model 3d ModelCategoryDescripte String Mô tả loạik model 3d ModelCategoryStatus String Trạng thái Chương IV: Thiết kế kiến trúc I Công nghệ sử dụng - Technical Stack: MERN stack (MongoDB, ExpressJS, React, Node.js) - Ngôn ngữ: JavaScript - Library: ReactJs, Mongoose - Framework: Express - Framework UI: Ant design - Library 3D: ThreeJS - Machine Learning solution: Tensorflow - Cơ sở dữ liệu: MongoDB Giới thiệu: - MERN stack: combo open source công nghệ đều liên quan đến javascript hot nay: MongoDB, ExpressJS, React/ React Native, NodeJS - MongoDB: hệ cơ sở dữ liệu phân tán (noSQL database), MongoDB thường với Mongoose – library để giao tiếp với MongoDB dễ dàng hơn - Node.js: nền tảng được xây dựng dựa javascript runtime Chrome chạy theo hướng kiện không đồng bộ, Nodejs được dùng để thiết kế, xây dựng ứng dụng mạng mở rộng - Express: web framework được xây javascript chạy nền Nodejs Nó hỡ trợ thêm nhiều tính cần có web framework như: routing, middlewares, template engines, vv - React: thư viện frontend facebook được viết javascript - Tensorflow: thư viện máy học với mơ hình đặc trưng body segmentation, object detection - Threejs: thư viện javascript dùng để tạo hiển thị đồ hoạ máy tính 3D trình duyệt sử dụng webGL II Mơ hình kiến trúc hệ thống - Sử dụng mơ hình Model View Controller (MVC): · Model: nơi chứa những nghiệp vụ tương tác với dữ liệu hệ quản trị cơ sở dữ liệu MongoDB; bao gồm class/ function xử lý nhiều nghiệp vụ kết nối database, truy vấn dữ liệu, thêm – xóa – sửa dữ liệu… · View: nơi chứa những giao diện nút bấm, khung nhập menu, hình ảnh, … đảm nhiệm nhiệm vụ hiển thị dữ liệu giúp người dùng tương tác với hệ thống · Controller: nơi tiếp nhận những yêu cầu xử lý được gửi từ người dùng, gồm những class/ function xử lý nhiều nghiệp vụ logic lấy dữ liệu thông tin cần thiết nhờ nghiệp vụ lớp Model cung cấp hiển thị dữ liệu cho người dùng nhờ lớp view - Sử tương tác thành phần: · Controller tương tác qua lại với view · Controller tương tác qua lại với Model · Model View khơng có tương tác với mà tương tác thơng qua Controller - Cấu trúc Modules Chương V: Thiết kế giao diện I Danh sách hình STT Màn hình Loại hình Chức Màn hình thử đồ Màn hình hiển thị, thao tác + Cho phép người dùng xem danh sách model thử đồ Màn hình Quản lý loại model Màn hình nhập liệu hiển thị, thao tác + Cho phép người dùng thêm mới/sửa xóa loại model, Màn hình nhập liệu hiển thị, thao tác + Cho phép người dùng thêm mới/sửa xóa model, Màn hình Quản lý model + Xem thơng tin loại model + Xem thông tin model II Sơ đồ liên kết hình III Mơ tả đối tượng hình 1.màn hình thử đồ STT Tên Kiểu Chức Hiển thị camera với model thử Model Card Chụp hình Button Chụp hình Hình ảnh Button Hiển thị hình ảnh chụp Ghi 2.màn hình quản lý STT Tên Kiểu Chức Load liệu model lên form Model Card Model Name Textbox Tên model Textbox Loại model Textbox Mô tả Model category Model Description Model Obj File File Obj Model Mtl File File Mtl Model Material File File Material Model Image File Hình ảnh model Save Button Lưu 10 Cancel Button Reset form Ghi Chương VII: Kết luận I o o o o II Môi trường phát triển môi trường triển khai Phần mềm quản trị cơ sở dữ liệu: MongoDB ReactJs Tensorflow Nền tảng: Windows Kết đạt Sau thời gian tìm hiểu tiến hành thực đề tài Nhóm chúng em đạt được số kết sau: o o o III Xây dựng, hiểu biết được cơng nghệ virtual 3D Giao diện chương trình thân hiện, dễ dàng sử dụng Tìm hiểu sử dụng thư viện ReactJs Hướng phát triển Với tính vẽ model 3D theo chuyển động cơ thể, có nhiều ứng dụng áp dụng vào sống filter, thử đồ, mark… Nhóm phát triển đồ án mức độ hồn thiện số chức phần mềm Nhóm cố gắng tìm hiểu thêm về công nghệ để cải thiện nâng cao khả đáp ứng nhu cầu người dùng  ... virtual 3D Giao diện chương trình thân hiện, dễ dàng sử dụng Tìm hiểu sử dụng thư viện ReactJs Hướng phát triển Với tính vẽ model 3D theo chuyển động cơ thể, có nhiều ứng dụng áp dụng vào... 3d FindByModelCategory List Public Lấy danh sách model 3d theo loại model Create Boolean Public Thêm model 3d Update Boolean Public Cập nhật model 3d Delete Boolean Public Xoá model 3d. .. Xoá loại model 3d Chương III: Thiết kế liệu I Sơ đồ Sơ đồ cơ sở dữ liệu Sơ đồ logic II Mô tả bảng dữ liệu Model STT Thuộc tính Kiểu liệu Ý nghĩa ModelCode String Id model 3d ModelName String