Thiết kế giao diện ứng dụng:

Một phần của tài liệu Ứng dụng di động bán hàng nội thất tích hợp công nghệ AR (khóa luận tốt nghiệp) (Trang 114)

Chương 5 XÂY DỰNG HỆ THỐNG

o. Đặc tả Use-case Chatbot hỗ trợ người dùng

5.3. Thiết kế giao diện ứng dụng:

5.3.1. Thiết kế giao diện

Đây là link Design UI cho toàn bộ đồ án, bao gồm cả UI Kit của hệ thống. Link: Design in Figma

5.3.2. Màn hình Đăng nhập

Đây là Màn hình Đăng nhập của ứng dụng, cho phép người dùng sử dụng Email và Mật khẩu từ tài khoản đã tạo trước để đăng nhập vào hệ thống. Người dùng nhấn vào nút Login để thực hiện thao tác Đăng nhập, nhấn vào nút Create New Account để thực hiện thao tác Đăng ký tài khoản

Hình 5.28 Màn hình đăng nhập

5.3.3. Màn hình Đăng ký tài khoản

Đây là Màn hình Đăng ký tài khoản của ứng dụng, cho phép người dùng điền Tên người dùng, Email và Mật khẩu để tạo tài khoản và đăng nhập vào hệ thống. Người dùng nhấn vào nút Sign Up để thực hiện thao tác Đăng ký tài khoản và Đăng nhập vào ứng dụng, nhấn vào nút Back để quay lại Màn hình Đăng nhập.

Hình 5.29 Màn hình đăng ký

5.3.4. Màn hình Trang chủ

Đây là Màn hình Trang chủ của ứng dụng, ở đây hệ thống sẽ hiển thị các interface em bé mà tài khoản sở hữu. Người dùng nhấn vào bất kỳ interface em bé để thực hiện thao tác Hiển thị thơng tin chung của em bé đó

Hình 5.30 Màn hình trang chủ

Đây là các Màn hình Khởi tạo em bé của ứng dụng, cho phép người dùng nhập vào các thơng tin cần thiết như Giới tính, Tên, Ngày sinh, Ảnh hiển thị để hệ thống tạo và lưu trữ thông của em bé. Với mỗi màn hình, người dùng nhấn vào nút Next sẽ chuyển sang màn hình tiếp theo theo thứ tự bên dưới, nhấn vào nút Back để chuyển về màn hình trước đó. Ở màn hình cuối cùng, người dùng nhấn vào nút Next sẽ chuyển về Màn hình Trang chủ.

Hình 5.31 Màn hình khởi tạo em bé

5.3.6. Màn hình Hiển thị thơng tin chung

Đây là Màn hình Hiển thị thông tin chung của em bé trong ứng dụng, hiển thị tồn bộ các thơng tin liên quan mà người dùng cần theo dõi. Người dùng nhấn vào nút Update ở bảng Body Mass Index để thực hiện thao tác Cập nhật BMI, nhấn vào nút Update ở bảng Nutrition Index để thực hiện thao tác Cập nhật Lượng thức ăn tiêu thụ, nhấn vào nút Meal Suggestion để thực hiện thao tác Xem các thức ăn gợi ý, nhấn vào nút Back để quay về màn hình trước đó.

Hình 5.32 Màn hình Hiển thị Thơng tin chung

5.3.7. Màn hình Hiển thị, Cập nhật và Thơng báo tình trạng BMI

Đây là Màn hình Hiển thị, Cập nhật và Thơng báo tình trạng BMI của em bé trong ứng dụng, hiển thị cho người dùng các thông tin về Chỉ số khối cơ thể của trẻ và cho phép người dùng cập nhật thông tin về BMI. Người dùng kéo thả các thanh trượt trong màn hình để điền chỉ số BMI tăng thêm của trẻ, nhấn vào nút Save để thực hiện thao tác Cập nhật BMI, nhấn vào nút Back để quay về màn hình trước đó.

Hình 5.33 Màn hình hiển thị, cập nhật và thơng báo tình trạng BMI

Đây là Màn hình Hiển thị, Cập nhật và Thơng báo tình trạng dinh dưỡng của em bé trong ứng dụng, hiển thị cho người dùng các thông tin về Chỉ số dinh dưỡng của trẻ và cho phép người dùng cập nhật thông tin về Lượng thức ăn tiêu thụ. Người dùng kéo thả các thanh trượt trong màn hình để điền lượng thức ăn tiêu thụ của trẻ, nhấn vào nút Save để thực hiện thao tác Cập nhật NI, nhấn vào nút Back để quay về màn hình trước đó.

Hình 5.34 Màn hình hiển thị, cập nhật và thơng báo tình trạng dinh dưỡng

5.3.9. Màn hình Gợi ý bữa ăn

Đây là Màn hình Gợi ý bữa ăn của ứng dụng, hiển thị cho người dùng các thông tin về chỉ số dinh dưỡng còn thiếu của trẻ và các thực phẩm có bổ sung cho chất đó đối với mỗi chất bị thiếu. Người dùng nhấn vào nút Update Nutrition Index để thực hiện thao tác Cập nhật Lượng thức ăn tiêu thụ, nhấn vào nút Meal history để thực hiện thao tác Xem Thống kê bữa ăn, nhấn

vào nút Week Plan để thực hiện thao tác Xem Kế hoạch các bữa ăn tiếp theo, nhấn vào nút Back để quay lại màn hình trước đó.

Hình 5.35 Màn hình gợi ý bữa ăn

5.3.10. Màn hình Thống kê bữa ăn

Đây là Màn hình Thống kê bữa ăn của ứng dụng, hiển thị cho người dùng chi tiết các bữa ăn mà hệ thống đã ghi nhận của người dùng qua bước Cập nhật Lượng thức ăn tiêu thụ. Người dùng nhấn vào nút Back để quay về màn hình trước đó

Hình 5.36 Màn hình thống kê bữa ăn

5.3.11. Màn hình Xem kế hoạch các bữa ăn tiếp theo

Đây là Màn hình Xem kế hoạch các bữa ăn tiếp theo của ứng dụng, hiển thị cho người dùng chi tiết các bữa ăn tiếp theo mà hệ thống đã lên kế hoạch để cân bằng dinh dưỡng của trẻ. Người dùng nhấn vào nút Back để quay về màn hình trước đó

Hình 5.37 Màn hình xem kế hoạch bữa ăn tiếp theo

5.3.12. Màn hình Cẩm nang chăm sóc trẻ - Danh sách chủ đề

Đây là Màn hình Cẩm nang chăm sóc trẻ (phase Danh sách chủ đề) của ứng dụng, hiển thị cho người dùng danh sách các chủ đề đang có trong hệ thống của Cẩm nang chăm sóc trẻ

Hình 5.38 Màn hình cẩm nang chăm sóc trẻ - dạng danh sách chủ đề

5.3.13. Màn hình Cẩm nang chăm sóc trẻ - Danh sách bài viết

Đây là Màn hình Cẩm nang chăm sóc trẻ (phase Danh sách bài viết) của ứng dụng, hiển thị cho người dùng danh sách các bài viết thuộc chủ đề đã chọn đang có trong hệ thống của Cẩm nang chăm sóc trẻ

Hình 5.39 Màn hình cẩm nang chăm sóc trẻ - dạng danh sách bài viết

5.3.14. Màn hình Cẩm nang chăm sóc trẻ - Chi tiết bài viết

Đây là Màn hình Cẩm nang chăm sóc trẻ (phase Chi tiết bài viết) của ứng dụng, hiển thị cho người dùng thông tin đầy đủ của 1 bài viết, bao gồm Tên bài viết, lời mở đầu, thể loại, các đầu mục, các thân bài của từng mục, các hình ảnh của từng mục trong bài viết

Hình 5.40 Màn hình cẩm nang chăm sóc trẻ - dạng chi tiết bài viết

5.3.15. Màn hình Chat – Center

Đây là Màn hình Chat (được bổ sung) của ứng dụng, hiển thị cho người dùng lựa chọn để có thể nhắn tin với chatbot. Màn hình này được bổ sung để có thể phát triển sau này, theo hướng nhắn tin với những user khác

Hình 5.41 Màn hình chat – dạng center

5.3.16. Màn hình Chat

Đây là Màn hình Chat với chatbot của ứng dụng. Ở màn hình này người dùng có thể nhập câu hỏi và gửi cho server, sau đó server sẽ trả về câu trả lời tương ứng

Chương 6. ÁP DỤNG GỢI Ý SẢN PHẨM BẰNG THUẬT TOÁN RECOMMENDDATION SYSTEMS 6.1. Thực nghiệm 6.1.1. Một số định nghĩa a. Utility Matrix

Trong các Recommendation Systems, có hai thực thể chính là users và items. Mỗi user sẽ có mức độ quan tâm (degree of preference) tới từng item khác nhau. Mức độ quan tâm này, nếu đã biết trước, được gán cho một giá trị ứng với mỗi cặp user – item. Giả sử rằng mức độ quan tâm được đo bằng giá trị user rate cho item, ta tạm gọi giá trị này là rating. Tập hợp tất cả các ratings, bao gồm cả những giá trị chưa biết cần được dự đoán, tạo nên một ma trận gọi là utility matrix.

Hình 6.1: Utility Matrix

các items. Giá trị từng cặp (u, i) là giá trị rating của user thứ u đối với item thứ i (từ 0 là khơng thích, đến 5 là rất thích). Các ơ có dấu “?” tương ứng với các ơ chưa có dữ liệu. Cơng việc của một Recommendation System là dự đoán giá trị tại các ơ chưa có dữ liệu này, từ đó đưa ra gợi ý cho người dùng.

Có hai hướng tiếp cận phổ biến để xác định giá trị rating cho mỗi cặp user – item trong khi xây dựng Utility Matrix:

- Thứ nhất, nhờ người dùng rate sản phẩm (items). Ví dụ như Shopee luôn nhờ người dùng rate các sản phẩm của họ bằng cách gửi các mail nhắc nhở nhiều lần sau khi đơn hàng tới trạng thái Đã nhận hàng. Tuy nhiên, cách tiếp cận này có một vài hạn chế vì thường thì người dùng ít khi rate sản phẩm. Và nếu có, đó có thể là những đánh giá thiên lệch bởi những người sẵn sàng rate.

- Thứ hai, dựa trên hành vi của người dùng (users) like, mua, xem, ... một item. Thường thì với cách này chỉ xây dựng được một ma trận với các thành phần là 1 và 0, với 1 là thể hiện người dùng thích sản phẩm, 0 là thể hiện chưa có thơng tin. Trong trường hợp này, 0 khơng có nghĩa là thấp hơn 1, nó chỉ có nghĩa là người dùng chưa cung cấp thơng tin. Chúng ta cũng có thể xây dựng ma trận với các giá trị cao hơn 1 thông qua thời gian hoặc số lượt mà người dùng xem một sản phẩm nào đó. Đơi khi, nút dislike cũng mang lại những lợi ích nhất định cho hệ thống, lúc này có thể gán giá trị tương ứng bằng -1 chẳng hạn.

b. Similarity Metrics (Các chỉ số tương tự)

Sau khi biểu diễn các rating thành Utility Matrix, mỗi cột (user) là một vector với độ dài là số lượng item. Để dự đốn được u0 có thích i2 hay khơng (hình 4.1), ta sẽ tìm user có sở thích gần giống với u0, từ đó dựa trên đánh giá của user gần giống đó về i2 để dự đốn u0 có thích i2 hay khơng. Bài tốn đưa về dạng xác định mức độ tương tự của một vector với một vector đã cho.

Có 4 cách để tính mức độ tương tự chủ yếu sau: - Cosine Similarity

- Euclidian Distance - Dot Product - Pearson Similarity

D Cosine Similarity

Hình 6.2: Cosine Similarity

Cosine Similarity là phương pháp tính mức độ tương tự của hai vector bằng việc tính cosin của góc giữa hai vector đó.

Cơng thức:

Độ similarity của hai vector là một số trong đoạn [-1, 1]. Cosin của một góc bằng 1 nghĩa là góc giữa hai vector bằng 0, thể hiện hai vector hồn tồn tương tự nhau. Cosin của một góc bằng

-1 thể hiện hai vector này hoàn toàn trái ngược nhau. Do đó, hai users càng tương tự nhau thì similarity giữa hai vector đó là cao nhất và ngược lại.

Hình 6.3: Sự tương đồng giữa hai vector

c. Root Mean Squared Error (RMSE)

Sử dụng RootMean Squared Error để đánh giá hiệu quả của thuật tốn, RMSE được tính bằng cơng thức:

Các bước thực hiện bao gồm: - Chuẩn bị dữ liệu

- Tìm hiểu thuật toán

- Cài đặt thuật toán, chạy trên dữ liệu test

- Tính RMSE của các thuật tốn và so sánh, đánh giá

a. Chuẩn bị dữ liệu

Bộ dữ liệu sử dụng: MovieLens 100K Dataset được công bố năm 1998 bởi GroupLens, bao gồm 100 000 ratings từ 943 users cho 1682 bộ phim.

Các file cần quan tâm:

- u.data: Chứa toàn bộ các ratings của 943 users cho 1682 movies. Mỗi user rate ít nhất 20 movies.

- ua.base, ua.test, ub.base, ub.test: là hai tập dữ liệu một cho training, một cho test. - u.user: Chứa thơng tin về users, bao gồm: id, tuổi, giới tính, nghề nghiệp, zipcode (vùng miền), vì những thơng tin này cũng có thể ảnh hưởng tới sở thích của các users. Tuy nhiên ở đây sẽ không sử dụng các thông tin này, trừ thông tin về id để xác định các user khác nhau.

- u.genre: Chứa tên của 19 thể loại phim. Các thể loại bao gồm: unknown, Action,

Adventure, Animation, Children's, Comedy, Crime, Documentary, Drama, Fantasy, Film-Noir, Horror, Musical, Mystery, Romance, Sci-Fi, Thriller, War, Western.

- u.item: thông tin về mỗi bộ phim. Trong mỗi dịng sẽ có id của phim, tên phim, ngày phát hành, link trên imdb, và các số nhị phân 0, 1 phía cuối để chỉ ra bộ phim thuộc các thể loại nào trong 19 thể loại đã cho trong u.genre. Một bộ phim có thể thuộc nhiều thể loại khác nhau. Thông tin về thể loại này sẽ được dùng để xây dựng item profiles.

b. Content-based Recommender System

Trong các hệ thống content-based, tức dựa trên nội dung của mỗi item, chúng ta cần xây dựng một bộ hộ sơ (profile) cho mỗi item. Profile này được biểu diễn dưới dạng toán học là một feature vector. Trong những trường hợp đơn giản, feature vector được trực tiếp trích xuất từ item.

Các bước thực hiện: - Đọc dữ liệu items

- Xây dựng item profiles - Tìm mơ hình cho mỗi user

Đọc dữ liệu items: đọc dữ liệu items từ file u.item, dữ liệu train từ ua.base, dữ liệu test từ

ua.test.

Hình 6.4: Kết quả load dữ liệu Content-based

Xây dựng item profile: Vì đang dựa trên thể loại của phim để xây dựng profile nên sẽ chỉ

quan tâm tới 19 giá trị nhị phân ở cuối mỗi item.

Sau đó, xây dựng feature vector cho mỗi item dựa trên ma trận thể loại phim và feature TF – IDF.

Hình 6.5: Ví dụ feature vector của các item Mỗi hàng trên tương ứng với feature vector của một bộ phim. Mỗi hàng trên tương ứng với feature vector của một bộ phim.

Kết quả dự đốn: Dự đốn rating cho user có id là 100, kết quả dự đốn là:

Hình 6.6: Kết quả dự đốn theo Content – based Tính tốn RMSE cho tập dữ liệu train và dữ liêu test, kết quả là:

Hình 6.7: RMSE của Content – based

c. Neighborhood - based Recommendation System

Neighborhood – based là một trong hai phương pháp phổ biển của Collaborative Filtering. Ý tưởng cơ bản là xác định mức độ quan tâm của một user tới một item dựa trên các users khác gần giống với user này. Việc gần giống nhau giữa các users có thể được xác định thơng qua mức độ quan tâm của các users này tới các items khác mà hệ thống đã biết. Ví dụ, A và B đều thích phim Cơ bé lọ lem, tức đều rate bộ phim này 5 sao. Đồng thời cũng đã biết A thích phim Hoa Mộc Lan, vậy nhiều khả năng B cũng thích bộ phim này.

Ở đây, trong hệ thống gợi ý Neighborhood – based Collaborative Filtering hai câu hỏi quan trọng nhất đó là:

- Làm thế nào xác định được mức độ giống nhau giữa các users?

- Khi đã xác định được các users gần giống nhau rồi, làm thế nào dự đoán được mức độ quan tâm của một user lên một item?

Việc xác định mức độ quan tâm của mỗi user tới một item dựa trên mức độ quan tâm của các users tương tự tới item đó cịn được gọi là User – user Collaborative Filtering. Có một hướng tiếp cận khác là Item – item Collaborative Filtering. Trong hướng tiếp cận này, thay vì xác định sự giống nhau giữa các users, hệ thống sẽ xác định sự giống nhau giữa các item. Từ đó, hệ thống gợi ý những items gần giống với những items mà user có mức độ quan tâm cao.

Hình 6.8: Bảng số sao user u rate cho item i

Giả sử có các user từ u0 đến u6 và các item từ i0 đến i4, trong đó các số trong mỗi ơ vng thể hiện số sao mà mỗi user đã rate cho item với giá trị càng cao thể hiện mức độ quan tâm cao. Các dấu hỏi chấm là các giá trị mà hệ thống cần phải đi tìm. Đặt mức độ giống nhau của 2 user ui, uj là sim(ui, uj)

Quan sát qua ta có thể nhận thấy là u0 , u1 thích i0, i1, i2 và khơng thích i3 , i4 cho lắm. Điều ngược lại xảy ra ở các user cịn lại. Vì vậy, một similarity function tốt cần được đảm bảo: sim(u0, u1) > sim(u0, ui), ∀i > 1.

Từ đó, để xác định mức độ quan tâm của u0 lên i2, chúng ta nên dựa trên hành vi của u1 lên sản phẩm này. Vì u1 thích i2 nên hệ thống cần gợi ý i2 cho u0.

Câu hỏi đặt ra là: hàm số similarity như thế nào là tốt? Để đo similarity giữa 2 user, cách

Một phần của tài liệu Ứng dụng di động bán hàng nội thất tích hợp công nghệ AR (khóa luận tốt nghiệp) (Trang 114)