Luận văn an image based customer support system for online shopping

Hệ thống hỗ trợ khách hàng qua hình ảnh cho mua sắm trực tuyến giúp cải thiện trải nghiệm người dùng và tối ưu quy trình giải quyết vấn đề.

• Tác giả: Le Quoc Hung
• Người hướng dẫn: Quan Thanh Tho
• Trường học: Đại học Bách khoa, Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Khoa học Máy tính
• Đề tài: Hệ thống hỗ trợ khách hàng bằng hình ảnh cho mua sắm online
• Loại tài liệu: Đồ án tốt nghiệp
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Hệ thống Hỗ trợ Khách hàng bằng Hình ảnh

Hệ thống hỗ trợ khách hàng bằng hình ảnh đã trở thành một giải pháp quan trọng trong ngành mua sắm online hiện đại. Đây là công nghệ tiên tiến cho phép khách hàng tìm kiếm sản phẩm thông qua hình ảnh thay vì chỉ sử dụng text truyền thống. Hệ thống này kết hợp trí tuệ nhân tạo và xử lý hình ảnh để cung cấp trải nghiệm mua sắm tốt hơn. Công nghệ image-based search giúp người dùng dễ dàng tìm thấy sản phẩm mong muốn chỉ bằng cách chụp ảnh hoặc tải lên hình ảnh. Điều này đặc biệt hữu ích cho ngành thời trang và phụ kiện, nơi người mua thường khó mô tả chính xác sản phẩm bằng lời. Hệ thống này không chỉ cải thiện trải nghiệm người dùng mà còn giúp tăng tỷ lệ chuyển đổi và nâng cao sự hài lòng khách hàng.

1.1. Khái niệm và Định nghĩa

Hệ thống hỗ trợ khách hàng bằng hình ảnh là một nền tảng công nghệ cho phép người dùng tìm kiếm sản phẩm thông qua visual search. Hệ thống này sử dụng công nghệ machine learning và computer vision để nhận diện và phân loại hình ảnh. Người dùng có thể tải lên ảnh sản phẩm hoặc chụp ảnh từ thực tế, và hệ thống sẽ tìm các sản phẩm tương tự trong kho hàng. Công nghệ này giúp khắc phục hạn chế của tìm kiếm text truyền thống.

1.2. Tầm quan trọng trong E commerce

Trong môi trường thương mại điện tử cạnh tranh, image-based customer support mang lại lợi thế cạnh tranh đáng kể. Nó giảm thời gian tìm kiếm sản phẩm, tăng conversion rate và customer satisfaction. Hệ thống này đặc biệt hiệu quả cho fashion e-commerce, nơi mô tả text thường không đủ để truyền tải hết thông tin sản phẩm. Nó cũng giúp giảm tỷ lệ return rate bằng cách đảm bảo khách hàng tìm thấy chính xác những gì họ tìm kiếm.

II. Công nghệ và Kiến trúc Hệ thống

Kiến trúc hệ thống hỗ trợ khách hàng bằng hình ảnh được thiết kế với những thành phần công nghệ hiện đại. Hệ thống sử dụng React Native để phát triển ứng dụng di động, NodeJS cho back-end, và PostgreSQL làm cơ sở dữ liệu. Công nghệ ORM như Prisma và KnexJS được tích hợp để xử lý độ phức tạp và khả năng mở rộng. Kiến trúc dựa trên dịch vụ (Service-based architecture) cho phép hệ thống hoạt động linh hoạt và hiệu quả. AI module được tích hợp để xử lý image recognition và feature extraction. Hệ thống cũng bao gồm các chức năng quản lý hàng tồn kho, tạo chương trình khuyến mãi, và loyalty programs. Mọi thành phần được thiết kế để đảm bảo scalability và performance tối ưu cho nền tảng shopping online.

2.1. Stack Công nghệ Chính

Hệ thống sử dụng React Native cho phát triển ứng dụng di động, cho phép tạo ứng dụng hoạt động trên cả iOS và Android. NodeJS được chọn cho back-end development vì hiệu suất cao và xử lý asynchronous tốt. PostgreSQL cung cấp cơ sở dữ liệu mạnh mẽ với hỗ trợ ACID transactions. Prisma ORM và KnexJS đơn giản hóa các tương tác cơ sở dữ liệu, giảm SQL query phức tạp.

2.2. Tích hợp AI và Xử lý Hình ảnh

Artificial Intelligence được tích hợp để nhận diện đặc trưng hình ảnh và phân loại sản phẩm. Hệ thống sử dụng deep learning models để trích xuất image features và so sánh với cơ sở dữ liệu sản phẩm. Computer vision algorithms giúp xác định các yếu tố như màu sắc, họa tiết, kích thước. Mô-đun extract category from relative caption tự động phân loại sản phẩm dựa trên hình ảnh.

III. Tính năng Tìm kiếm Hình ảnh với Điều chỉnh Text

Tính năng image search with text-based adjustment là điểm nổi bật của hệ thống hỗ trợ khách hàng bằng hình ảnh. Người dùng có thể tải lên hình ảnh và thêm các yêu cầu text để tinh chỉnh kết quả tìm kiếm. Ví dụ, khách hàng có thể tải ảnh một chiếc áo, sau đó thêm yêu cầu "tìm kiếm màu xanh, size L". Giao diện chat-like giúp trải nghiệm trở nên tự nhiên và dễ sử dụng hơn. Quy trình image search diễn ra qua nhiều bước: trích xuất đặc trưng hình ảnh, so sánh với database, áp dụng text filters, và trả về kết quả xác thực. Hệ thống sử dụng relative captions để mô tả sản phẩm, giúp AI model hiểu rõ hơn. Phương pháp composed image search cho phép người dùng kết hợp nhiều hình ảnh và điều kiện tìm kiếm.

3.1. Quy trình Tìm kiếm Hình ảnh

Quy trình image search process bắt đầu bằng việc pre-processing hình ảnh do người dùng cung cấp. Hệ thống sau đó trích xuất các visual features như edge, color histogram, texture. Deep learning model so sánh các đặc trưng này với embedding database của các sản phẩm có sẵn. Hệ thống tính toán similarity score cho từng sản phẩm. Cuối cùng, ranking algorithm sắp xếp kết quả và trả về những sản phẩm phù hợp nhất.

3.2. Tích hợp Điều chỉnh dựa trên Text

Text-based adjustment cho phép người dùng lọc kết quả tìm kiếm dựa trên các tiêu chí cụ thể như màu sắc, kích thước, giá cả, thương hiệu. Hệ thống phân tích natural language input từ người dùng và chuyển đổi thành các filter parameters. Relative captions construction giúp hệ thống hiểu mối liên hệ giữa hình ảnh và text descriptions. Kết hợp image features và text filters tạo ra kết quả tìm kiếm chính xác và phù hợp hơn.

IV. Ứng dụng Thực tiễn và Lợi ích cho Người tiêu dùng

Hệ thống hỗ trợ khách hàng bằng hình ảnh mang lại nhiều lợi ích thiực tiễn cho người dùng shopping online. Khách hàng có thể tìm kiếm sản phẩm nhanh chóng chỉ bằng một hình ảnh, không cần phải mô tả chi tiết bằng lời. Điều này đặc biệt hữu ích khi mua sắm thời trang, giày dép, phụ kiện vì khó mô tả chính xác bằng text. Trải nghiệm người dùng được cải thiện đáng kể, giảm search frustration. Hệ thống cũng giúp tăng conversion rate do người dùng tìm thấy sản phẩm chính xác hơn. Customer satisfaction được nâng cao khi khách hàng có thể dễ dàng tìm thấy những gì họ tìm kiếm. Việc sử dụng relative captions và composed image search cho phép tìm kiếm linh hoạt hơn. Nền tảng cũng giảm product return rate nhờ vào độ chính xác của tìm kiếm.

4.1. Nâng cao Trải nghiệm Người dùng

User experience được cải thiện thông qua intuitive interface và fast search results. Giao diện chat-like làm cho quá trình tìm kiếm trở nên thân thiện và tự nhiên. Real-time feedback giúp người dùng nhanh chóng nhận được kết quả. Việc kết hợp image search và text adjustment cung cấp sự linh hoạt mà người dùng mong muốn. Hệ thống học từ hành vi tìm kiếm của người dùng để cải thiện kết quả từng lần.

4.2. Tác động Kinh tế đến E commerce

Image-based search giúp tăng conversion rate lên đến 25-30% trong các nền tảng thương mại điện tử. Customer retention được cải thiện do trải nghiệm tốt hơn. Average order value có thể tăng khi khách hàng dễ dàng tìm thấy sản phẩm bổ sung phù hợp. Operational efficiency được nâng cao do giảm customer support queries liên quan tới tìm kiếm sản phẩm. Nhà bán hàng cũng có thể bán được hàng tồn kho nhanh hơn.

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

VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY FACULTY OF COMPUTER SCIENCE AND ENGINEERING REPORT CAPSTONE PROJECT AN IMAGE-BASED CUSTOMER SUPPORT SYSTEM FOR ONLINE SHOPPING Major: Computer Science THESIS COMMITTEE : COMPUTER SCIENCE - 17 SUPERVISOR : Assoc. QUAN THANH THO, Ph. REVIEWER : PHAN TRUNG HIEU, M.Eng —o0o— STUDENTS : LE QUOC HUNG - 2013383 : THACH PHAN PHU HUNG - 2013397 : DO HUY HOANG - 2013219 HO CHI MINH CITY, JUNE 2024 Declaration My team, which consists of Do Huy Hoang, Le Quoc Hung, and Thach Phan Phu Hung, declares that this Capstone Project was composed and implemented entirely by us under the guidance and supervision of Assoc. Quan Thanh Tho at the Faculty of Computer Science and En- gineering, Vietnam National University - Ho Chi Minh City University of Technology.

In the process of researching and implementing this Capstone Project, we have referenced mul- tiple previous studies from other authors and ourselves. All of them have been fully and clearly stated in the References part. This Capstone Project has not been published in any form under any circumstances. Ho Chi Minh City, May 2024 Author Do Huy Hoang Le Quoc Hung Thach Phan Phu Hung 1 Acknowledgements First and foremost, we would like to express our deepest gratitude to our supervisor, Assoc.

Quan Thanh Tho, for his invaluable guidance and support throughout this Capstone project. His immense knowledge and unwavering patience motivated us through every stage, from concep- tualization to completion of this project. Next, we also would like to express our gratitude to Mr Pham Nguyen Xuan Nguyen for sup- porting us in research and writing this project. He provided us with a more particular insight into our project and his experience in completing this project.

In addition, we would like to express our appreciation to the Ho Chi Minh University of Tech- nology for providing us with the resources and facilities that supported the completion of this Capstone project. Last but not least, we profoundly appreciate the unfailing support from our parents and friends who encouraged us every step of the journey at university. Our parents’ unwavering belief in us and their encouragement gave us strength on difficult days and their pride in my work kept us motivated. Once again, we sincerely thank everyone who contributed and supported us in the process of researching and completing this project.

We will always remember and appreciate all your support of our research and studying journey. The authors, Do Huy Hoang Le Quoc Hung Thach Phan Phu Hung 2 Abstract The capstone project ’Image-based customer support system for online shopping’ is researched and implemented by three students, Le Quoc Hung, Thach Phan Phu Hung, and Do Huy Hoang from Ho Chi Minh City University of Technology. The project is carried out under the thought- ful instructions of Assoc. Quan Thanh Tho.

The main functions of the system focus on developing a fashion shopping application with an integrated image search feature attached with text-based adjustments. For the online fashion shopping platform, this system needs to be implemented with sufficient complexity to be com- parable with other platforms, offering functions such as flexible product inventory management with various levels of product categories, creating discount events, and providing loyalty pro- grams for users. Lastly, and most importantly, the system provides customers with an image search feature that can be attached with text-based adjustments. This feature is developed as a specific process that suits communication through text.

Therefore, this function is designed to resemble a chat service with an assistant. To implement the system, the team used React Native for mobile application development, NodeJS for back-end development, and utilized PostgreSQL as the database. To handle the com- plexity and scalability of the system, the team incorporated ORM and SQL Query builders such as Prisma and KnexJS. 3 Contents Declaration 1 Acknowledgements 2 Abstract 3 Contents 4 List of Tables 8 List of Figures 10 1 Introduction 13 1.2 Non-functional requirement.

28 4 Contents 3 Technology Stack 31 3.1 Mobile application development .2 Front-end web development .5 Artificial intelligence development .1 Use case design .1 Use case diagram .2 Use case description .3 Use case scenario .2 Search with image and text .3 Service-based architecture .1 Entity-Relationship Diagram .1 Overview of JSON Web Token .2 Comparison of JSON Web Token with others .3 JWT working process .7 Image search feature design .1 Image search process .8 Composed image search feature design .1 Composed image search process .4 Extract category from relative caption module .9 Mock design and implementation .6 Cart and checkout screen .7 Image Search with text-based adjustment .1 Image and attribute collection .2 Relative captions construction .2 Dataset statistic and analysis .1 Mean average precision .1 Image retrieval task .2 Composed image retrieval task .1 Image retrieval task .2 Composed image retrieval task .2 Test set 1: Cart modification .3 Test set 2: Checkout to confirm order .4 Test set 3: Product Filter .5 Test set 4: Product Search .6 Test set 5: Searching with image and text in chat .2 Non-functional testing .1 Main server deployment. 130 8 Further improvement and conclusion 131 8.1 Integrating Virtual Assistants with LLM .2 AI service improvements .1 Composed image retrieval service. 133 9 Project timeline 135 References 137 A Task assignment table 139 7 List of Tables Table 2.1 Feature comparison table between related systems .1 Comparison of Database management system .1 List of the actors in the Use Case Diagram .2 Scenario table of Use Case Search Image with Adjustment .3 Scenario table of Use Case Make payment .4 Scenario table of Use Case Make order .5 Scenario table of Use Case View Statistic .6 Scenario table of Use Case Search Image .1 Comparison table of many security tokens .2 Comparison table of Public/Private Key and Symmetric key .1 Performance of each backbone used in image search pipeline.1 Dataset statistics on AdidasIQ .1 Fashion Retrieval Results. L in the model name indicates input image size as Large (320x320).

R50IBN suffix indicates Resnet50-IBN-A was used. ’CE’ at the end of model name denotes Centroid-based Evaluation. RR stands for Reranking.2 Recall at K on AdidasIQ test set with varying combining function and fine- tune option. FT stands for fine-tuning and denotes whether the text encoder has been finetuned.

CF stands for combining function and denotes which function has been used to combine the query features.1 Testing cart modification .2 Testing checkout to confirm order .3 Testing filtering product .4 Testing searching for product .5 Testing searching for product .1 Testing Image Search Engine’s performance. 126 8 List of Tables Table A.1 Demonstration of Workload distribution. 139 9 List of Figures Figure 1.1 Illustration for the Zalora image searching feature’s flow .1 Overview of Key Use Cases Diagram .1 Illustration for Make order workflow .2 Illustration for Search with image and text .1 Illustration for monolithic architecture .2 Illustration for distributed architecture .3 Illustration for service-based architecture .4 Illustration for our system architecture .1 Overview of Class Diagram with technical partitioning approach .2 Illustration for the Class Diagram of Model Layer .3 Illustration for the Class Diagram of Repository Layer .4 Illustration for the Class Diagram of Payment Service .5 Illustration for the Class Diagram of Order Service .6 Illustration for the Class Diagram of Chat Service .1 Illustration for Database Entity-Relationship Diagram .2 Illustration for mapping the Entity-Relationship Diagram .1 Image search pipeline consists of three main stages: feature extraction, embedding ranking and candidates reranking.2 A residual block illustration .3 Architecture of IBN-A and IBN-B block .1 Architecture of the composed image retrieval pipeline.2 First stage of training overview. In this stage, using a contrastive loss, we fine-tune the CLIP text encoder to adapt its embedding space to the composed image retrieval task.3 Architecture of the combiner network.

It takes as inputs the reference im- age features and the captions features and outputs a fused representation. σ denotes the sigmoid function. 95 10 List of Figures Figure 4.4 Second stage of training overview. In this stage, using contrastive loss, we train from scratch a Combiner network which learns to fuse the mul- timodal features extracted with the CLIP encoders.5 Module to extract category from relative caption .1 Illustration for Home Page of the Mobile platform .2 Illustration for Shopping screen of the Mobile platform .3 Illustration for Shopping screen using Image Searching .4 Illustration for Loyalty Page of the Mobile platform .5 Illustration for Messages screen of the Mobile platform .6 Illustration for demo messages screen of the Mobile platform .7 Illustration for Profile Page of the Mobile platform .8 Illustration for Order History of the Mobile platform .9 Illustration for Cart of the Mobile platform .10 Illustration for Order Detail of the Mobile platform .11 Illustration for Ordering Process Detail of the Mobile platform .12 Illustration for initiation of Image Searching .13 Illustration for Image Searching with adjustment .1 Pipeline to extract attributes from product details.1 Adidas IQ tags word frequency .2 Adidas IQ captions word frequency .1 Illustration for Image A and Image B used in testing .1 Illustration for future plan using Gantt chart.

136 11 Chapter 1 Introduction In Chapter 1, the authors will begin by stating the main goals and the limits that define what this project is about. Additionally, the authors will give a preview of how the report is organized, outlining the main chapters and what each one contributes.1 Problem statement In today’s world, technology is changing how we shop, especially with smart image searches using artificial intelligence. People can now find things similar to what they like just by taking a picture. From movies to local shops and voice searches, technology is helping customers find what they want.

Furthermore, when considering people like moms, housewives, and teenagers, who see some- thing cool in a picture, a movie, or on social media such as Facebook and TikTok. They want to keep up with trends on the internet and often wonder, “How do I find something like this?” and “It will suit me better if I adjust this point a little.” That’s where visual image search comes in. It lets customers search, explore, and discover where to buy things with just a few clicks, making it easy to turn inspiration into reality. However, finding the right clothes can be tricky.

Regular search systems don’t quite get what users mean when they want something that looks a certain way. While applications like Zalora and Shopee let users search for fashion items with pictures, they don’t let users adjust their searches based on colors or styles, making it a bit tricky to find exactly what they’re looking for. This becomes especially challenging as fashion items often require a lot of adjustment based on personal interests, going a different way from the standard models or samples. For example, 13 Chapter 1.

Introduction there is only a small difference between collarless and collar shirts, but without the option to search for them specifically, users might miss out on finding items that match their unique style. Many fashion websites lack a smart way for users to search using images and adjust details like color or pattern. This makes it hard for people to find exactly what they want.1: Illustration for the Zalora image searching feature’s flow In conclusion, existing fashion shopping websites face challenges that make finding the perfect clothes tricky. Limited search options can make it hard for users to discover items that match their unique style preferences.

Therefore, there is a clear need to develop a fashion e-commerce system that will let users search using images and easily customize their searches.2 Goals Building on the identified problems earlier, we aim to make online fashion shopping better. We want to do this by adding a cool feature: a smart image search where customers can tweak their search. Regular search systems struggle to get what users really want in fashion.