Khác với các mô hình truyền thống dựa trên RNN hoặc LSTM, Transformer sử dụng cơ chế chú ý để tập trung vào các phần quan trọng của dữ liệu đầu vào, giúp cải thiện khả năng hiểu và tạo r
PHƯƠNG PHÁP
Tìm Hiểu Kiến Trúc Transformer
2.1.1 Quá trình encoder và decoder
Hình 2.1 Mô hình khi chưa có attention layer
Hình 2.2 Mô hình khi đã attention layer
2.1.2 Transformer và Seq2seq model
2.1.3 Cơ chế attention a Scale dot product attention
Hình 2.4 Sơ đồ Self Attention
Hình 2.6 Quá trình tính toán trọng số attention
Hình 2.7 Kết quả tính attention cho toàn bộ các từ trong câu b Multi-head Attention
Hình 2.8 Sơ đồ cấu trúc Multi-head Attention c Quá trình encoder và decoder
Hình 2.9 Sơ đồ của 1 block layer áp dụng multi-head attention layer
Hình 2.10 Sơ đồ quá trình encoder với 6-layer của transformer
Hình 2.11 Quá trình biến đổi giá trị input thành các giá trị output
Phương Pháp Áp Dụng
Phương pháp được sử dụng là một mô hình học máy tiền huấn luyện với kiến trúc transformer (Pre-trained Transformer) được xây dựng bằng cách sử dụng encoder trong kiến trúc Transformer để dự tạo và xử lý văn bản tự nhiên
Hình 2.12 (left) Transformer architecture and training objectives used in this work (right) Input transformations for fine-tuning on different tasks We convert all structured inputs into token sequences to be processed by our pre-trained model, followed by a linear+softmax layer
Bộ dữ liệu RocStories được xây dựng cho bài toán xử lý ngôn ngữ tự nhiên (NLP) và máy học Nó bao gồm các câu chuyện ngắn, mỗi câu chuyện có năm câu đều liên quan đến một đoạn văn bản.Bộ dữ liệu data-set chúng tôi sử dụng gồm hơn 52000 dòng dữ liệu với những câu chuyện và ngữ cảnh khác nhau.
2.2.2 Tiền xử lý dữ liệu
Loại bỏ Dữ liệu Nhiễu (Noise Removal): Loại bỏ các thành phần không mong muốn hoặc dữ liệu nhiễu như ký tự đặc biệt không cần thiết, dấu câu thừa, hoặc các yếu tố gây nhiễu khác
Chuẩn hóa Văn bản (Text Normalization): Chuẩn hóa văn bản bằng cách chuyển đổi các từ viết tắt thành từ đầy đủ, thực hiện các biện pháp khác để đảm bảo sự đồng đều trong dữ liệu văn bản
2.2.3 Chuẩn bị dữ liệu cho huấn luyện
Dữ liệu được chia thành các nhóm,gán giá trị từ 1 đến 5 cho mỗi nhóm để chuẩn hóa (Sentence 1,Sentence 2,Sentence 3,Sentence 4, Sentence 5)
2.2.4 Xây dựng mạng nơ ron
Mạng nơ-ron sâu được xây dựng bằng cách sử dụng các lớp Masked Multi-Self Attention và Feed Forward để xử lý các đặc trưng văn bản
2.2.5 Biên dịch và huấn luyện mô hình
Mô hình được biên dịch với hàm mất mát dữ liệu là MultipleChoice LossCompute sau đó sử dụng nn.CrossEntropyLoss để tính toán mất mát cho cả hai đầu ra của mô hình,giúp mô hình học được các tham số tối ưu để giảm thiểu mất mát trên dữ liệu huấn luyện
Quá trình huấn luyện sử dụng tập dữ liệu đã được chia thành tập huấn luyện và tập kiểm tra Mục tiêu là tối ưu hóa các tham số mô hình để cực tiểu hóa hàm mất mát
Mô hình được lưu thành một tệp data.h5 sau khi quá trình huấn luyện hoàn tất
Phương pháp này sử dụng kiến trúc tiền huấn luyện với Transformer để tối ưu hóa đồng thời xử lý văn bản tự nhiên.Điều này giúp mô hình học các đặc trưng chung và tạo ra cách tiếp cận hiệu quả cho bài toán
TRIỂN KHAI ỨNG DỤNG
Công Cụ Phát Triển
3.1.1 Công cụ lập trình a Giới thiệu Next.js Framework
Next.js là một framework phổ biến cho việc phát triển ứng dụng web React Bao gồm các chức năng giúp tăng hiệu quả phát triển ứng dụng như sau:
• Cung cấp một trình mô phỏng tích hợp để xem trước trang và kiểm thử trang trong nhiều ngữ cảnh, giúp đảm bảo tính tương thích trên nhiều thiết bị và màn hình
• Next.js đi kèm với hệ thống định tuyến (routing) tích hợp, giúp quản lý và xử lý định tuyến của ứng dụng một cách thuận tiện
• Hỗ trợ SSR cho việc tạo ra trang động trên máy chủ và SSG cho việc tạo ra trang tĩnh trong quá trình xây dựng, giúp cải thiện hiệu suất và tăng trải nghiệm người dùng
• Cung cấp tính năng HMR giúp áp dụng các thay đổi mà không cần phải làm mới trang, giúp tăng tốc quá trình phát triển
• Hỗ trợ nhiều phương pháp quản lý CSS, bao gồm CSS Modules và CSS-in-
JS, giúp tạo ra các kiến trúc CSS dễ quản lý và phát triển
• Next.js cho phép bạn định nghĩa các API routes một cách trực tiếp trong dự án của mình, giúp quản lý logic server-side
• Công cụ tìm lỗi mã nguồn (lint) để nắm bắt hiệu suất, khả năng hữu dụng, khả năng tương thích với phiên bản và các vấn đề khác
• Cung cấp các công cụ để tối ưu hóa và xử lý ảnh một cách tự động, giúp tăng tốc tải trang và cải thiện hiệu suất
• Next.js có cơ chế plugin mạnh mẽ và môi trường phát triển linh hoạt, giúp bạn tùy chỉnh và mở rộng khả năng của ứng dụng một cách dễ dàng
Hình 3.1 Next.js framework b Giới thiệu Visual Studio Code
Visual Studio Code là một trình soạn thảo mã nguồn được phát triển bởi
Microsoft dành cho Windows, Linux và macOS Nó hỗ trợ chức năng debug, đi kèm với Git, có chức năng nổi bật cú pháp (syntax highlighting), tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác
Hình 3.2 Visual Studio Code Đối với dự án, VSCode là công cụ tiện lợi nhất vì hỗ trợ tốt cả 2 framework là NodeJS và Flutter Điều này giúp cho các lập trình viên của dự án không tốn quá nhiều công sức để học cách sử dụng nhiều IDE khác nhau Gây lãng phí tài nguyên
Figma là một phần mềm dùng để thiết kế giao diện với các thông số cụ thể do người thiết kế đặt ra giúp hỗ trợ developer có thể dễ dàng hiện thực bản thiết kế trở thành UI thực Figma chủ yếu hoạt động trên nền web, dù có một số tính năng ngoại tuyến trên các phiên bản ứng dụng desktop cho hệ điều hành mac OS và Windows Một tiện ích của Figma là Figma Mirror cho Android và iOS giúp người dùng có thể xem các prototype Figma trên thiết bị di động
Những lợi ích Figma đem lại: o Figma là một công cụ miễn phí o Sử dụng được trên 2 nền tảng Windows và Mac OS (thay vì như sketch chỉ dùng được trên MacOS) o Thiết kế thời gian thực: Mọi người trong team có thể vẽ cùng một dự án cùng một lúc và thấy được những thay đổi trong bản thiết kế một cách nhanh nhất o Data được lưu trên hệ thống máy chủ: Các file thiết kế figma sẽ được tự động lưu bất cứ lúc nào trên hệ thống máy chủ (không sợ quên lưu file) và có thể tải xuống để lưu lại trong local o Có cơ chế comment trực tiếp trên file thiết kế: Việc này sẽ giúp nhận phản hồi hoặc ghi chú khi làm việc đội nhóm
• Phải có internet thì Figma mới hoạt động được
GitHub là một dịch vụ cung cấp nền tảng dựa trên web cho việc lưu trữ mã nguồn và quản lý dự án sử dụng Git GitHub cho phép bạn lưu trữ mã nguồn của dự án trực tiếp trên các kho lưu trữ (repositories), theo dõi sự thay đổi, tạo các nhánh phát triển riêng biệt, hợp nhất các thay đổi (merge) và thực hiện các hoạt động phát triển khác Bên cạnh đó, GitHub cũng cung cấp nền tảng xã hội cho các nhà phát triển để chia sẻ mã nguồn, tương tác và hợp tác
Git là một hệ thống quản lý phiên bản phân tán được sử dụng rộng rãi để theo dõi sự thay đổi trong mã nguồn và quản lý dự án phát triển phần mềm Nó cho phép nhiều người cùng làm việc trên cùng một dự án, theo dõi sự thay đổi, tích hợp các tính năng mới và quản lý các phiên bản khác nhau của mã nguồn Git hoạt động theo hình thức phiên bản phân tán, tức là mỗi người dùng có bản sao đầy đủ của toàn bộ lịch sử phiên bản
Git và GitHub đóng một vai trò quan trọng trong việc quản lý mã nguồn và phát triển phần mềm, cho phép người dùng làm việc cộng tác và theo dõi sự thay đổi trong các dự án phức tạp
Vercel là một nền tảng dành cho việc triển khai ứng dụng web và các dự án trang tĩnh một cách nhanh chóng và dễ dàng Nền tảng này được thiết kế để hỗ trợ các lập trình viên và nhóm phát triển trong việc triển khai và quản lý ứng dụng web một cách hiệu quả Vercel cung cấp một quy trình triển khai đơn giản và hiệu quả Bạn chỉ cần liên kết dự án của mình từ một số nguồn như GitHub, GitLab, hoặc Bitbucket, và Vercel sẽ tự động xây dựng và triển khai ứng dụng của bạn.Vercel cung cấp môi trường triển khai production với nhiều tính năng như CDN tích hợp, SSL tự động, và sự linh hoạt trong việc quản lý biến số môi trường
Công nghệ phát triển
Next.js là một framework React phổ biến giúp xây dựng ứng dụng web linh hoạt và hiệu quả Với hỗ trợ SSR và SSG, nó tối ưu hiệu suất và cung cấp định tuyến tự động, giúp dễ dàng quản lý ứng dụng HMR (Hot Module Replacement) cho phép áp dụng thay đổi ngay lập tức, tăng tốc quá trình phát triển Với sự tích hợp API routes và sử dụng JavaScript, Next.js trở thành lựa chọn ưa thích cho cộng đồng phát triển web hiện đại
3.2.2 Back-end: Nodejs + OpenAI API
Node.js là một nền tảng phát triển ứng dụng web được xây dựng dựa trên
JavaScript, giúp các nhà phát triển xây dựng các ứng dụng mạng nhanh chóng và hiệu quả Điều đặc biệt về Node.js là khả năng xử lý các yêu cầu không đồng bộ một cách hiệu quả nhờ vào mô hình lập trình sự kiện (event-driven) và sử dụng thư viện I/O không đồng bộ (non-blocking I/O) Điều này cho phép Node.js xử lý hàng loạt yêu cầu mà không cần phải chờ đợi các hoạt động I/O kết thúc, tạo ra hiệu suất cao và đáp ứng tốt trong khi xử lý tải đồng thời lớn
Một ưu điểm nổi bật khác của Node.js là cộng đồng phong phú và sự hỗ trợ mạnh mẽ từ cộng đồng này Nó cung cấp rất nhiều các module và thư viện có sẵn thông qua npm (Node Package Manager), giúp cho việc phát triển ứng dụng trở nên nhanh chóng và linh hoạt hơn bao giờ hết Bên cạnh đó, Node.js cũng được sử dụng rộng rãi trong việc xây dựng các ứng dụng thời gian thực như ứng dụng chat, trò chơi trực tuyến hay các ứng dụng đa người dùng, nhờ vào tính năng xử lý sự kiện và đồng thời có thể mở rộng một cách linh hoạt
OpenAI API là một dịch vụ cung cấp bởi OpenAI, cho phép nhà phát triển tích hợp các mô hình ngôn ngữ và trí tuệ nhân tạo của OpenAI vào ứng dụng của họ thông qua giao diện lập trình ứng dụng (API) Dưới đây là mô tả chung về OpenAI API Cho phép thực hiện nhiều nhiệm vụ như tạo văn bản, trả lời câu hỏi, hoặc tương tác thông qua API, mở ra nhiều ứng dụng từ chatbot đến tổ chức thông tin tự động OpenAI liên tục cập nhật và phát triển các mô hình, đảm bảo rằng người sử dụng API luôn được trải nghiệm với công nghệ mới nhất và cải tiến
Thiết Kế
Thiết kế kiến trúc: Theo mô hình Client – Server
Mô hình client-server là một kiến trúc cơ bản trong lĩnh vực công nghệ thông tin và mạng máy tính, trong đó các thiết bị hoặc ứng dụng được chia thành hai vai trò chính: client (khách hàng) và server (máy chủ) Mô hình này cho phép các ứng dụng và dịch vụ tương tác với nhau thông qua mạng Dưới đây là mô tả chi tiết về mô hình client-server:
• Client (Khách hàng): o Client là người sử dụng hoặc ứng dụng sử dụng dịch vụ từ server Điều này có thể là một trình duyệt web trên máy tính cá nhân, ứng dụng di động trên điện thoại thông minh hoặc các thiết bị khác o Client tạo yêu cầu (request) đến server Yêu cầu này có thể là một trang web, dữ liệu, hoặc bất kỳ tài nguyên nào server có thể cung cấp o Client hiển thị kết quả cho người sử dụng Khi client nhận được dữ liệu từ server, nó có thể hiển thị nó trên giao diện của mình để người dùng có thể tương tác
• Server (Máy chủ): o Server là máy tính hoặc hệ thống phục vụ yêu cầu từ các client Nó có nhiệm vụ xử lý yêu cầu từ client và cung cấp dữ liệu hoặc dịch vụ tương ứng o Server xử lý yêu cầu từ client Điều này bao gồm việc truy xuất dữ liệu từ cơ sở dữ liệu, tính toán, xử lý logic ứng dụng, và nhiều nhiệm vụ khác o Server gửi kết quả trả về cho client Sau khi xử lý yêu cầu, server gửi dữ liệu hoặc kết quả trả về cho client
• Giao tiếp qua Mạng: o Mô hình client-server yêu cầu một kết nối mạng giữa client và server
Dữ liệu và yêu cầu được gửi qua mạng từ client đến server và ngược lại o Giao tiếp có thể sử dụng các giao thức mạng như HTTP (cho web), FTP (cho truyền tệp), SMTP (cho email), và nhiều giao thức khác tùy thuộc vào ứng dụng cụ thể
Hình 3.8 Mô hình Client – Server a Áp dụng:
• Server (Node.js + OpenAI API): o Phía server được phát triển bằng Node.js sử dụng framework Express để xử lý các yêu cầu từ phía client và cung cấp dữ liệu và dịch vụ o Express định tuyến các URL và các hàm xử lý tương ứng để xử lý các yêu cầu từ ứng dụng Next.js o Cụ thể, yêu cầu được gửi từ phía client Next.js sẽ được tiếp nhận và chuyển cho OpenAI API để xử lý yêu cầu.Sau đó, kết quả sẽ được trả về phía client thông qua Node.js
• Client (Next.js): o Phía client được xây dựng bằng React Native để cung cấp giao diện người dùng cho người dùng cuối o Ứng dụng Next.js gửi yêu cầu HTTP gồm hình ảnh được người dùng chụp/lấy từ thư viện đến Node để yêu cầu dịch vụ dự đoán tuổi và giới tính o Nó nhận dữ liệu trả về từ server và hiển thị nó trên giao diện người dùng sử dụng ứng dụng Next.js
• Giao tiếp qua Mạng: o Ứng dụng Next.js gửi yêu cầu HTTP đến Node server thông qua giao thức HTTP hoặc HTTPS o Node.js xử lý yêu cầu và gửi kết quả trả về ứng dụng Next.js o Cả hai phía phải cùng sử dụng các giao thức chuẩn để đảm bảo giao tiếp hiệu quả và bảo mật b Giao Diện:
STT Thuộc tính Kiểu phần tử Mô tả
1 Logo Image Hình ảnh logo của ứng dụng
Input Nhập thông tin cần được hỗ trợ
3 Nút Submit Button Gửi yêu cầu Nếu thành công hiển thị kết quả cho yêu cầu.
4 Nút Clear Button Xóa lịch sử trò chuyện và Dữ liệu nhập
Bảng 3.1 Mô tả màn hình Chat
Hình 3.10 Màn hình Chat Result
STT Thuộc tính Kiểu phần tử Mô tả
1 Logo Image Hình ảnh logo của ứng dụng
Input Nhập thông tin cần được hỗ trợ
3 Nút Submit Button Gửi yêu cầu Nếu thành công hiển thị kết quả cho yêu cầu.
4 Nút Clear Button Xóa lịch sử trò chuyện và Dữ liệu nhập
Bảng 3.2 Mô tả màn hình Chat-Result
Tên usecase Giải đáp yêu cầu người dùng
Tóm tắt Người dùng đưa ra yêu cầu và cần sự trợ giúp của công cụ hỗ trợ để trả lời.
Dòng sự kiện chính 1 Mở ứng dụng Quizzes App trên máy tính
2 Đăng nhập tài khoản người dùng.
3 Nhấn chuột vào Avatar trên thanh Navbar
4 Dropdown xuất hiện , chọn Help Q&A
5 Màn hình Chat hiện ra Nhập nội dung bạn cần hỏi đáp vào ô Input
6 Nhấn chuột vào nút Submit để gửi yêu cầu và chờ kết quả phản hồi
Dòng sự kiện khác Không
Trạng thái hệ thống khi bắt đầu thực hiện usecase
• Thiết bị có kết nối internet
Trạng thái hệ thống sau khi thực hiện usecase
• Nếu chưa gửi yêu cầu thì công cụ chatbox sẽ không được thực hiện
• Nếu người dùng đã gửi yêu cầu ,ứng dụng sẽ trả về câu trả lời phù hợp với yêu cầu người dùng
Yêu cầu đặc biệt Không Điểm mở rộng Không
Bảng 3.3 Bảng Usecase cho thiết kế “Giải đáp yêu cầu người dùn”
Hướng Dẫn
Bước 1: Mở ứng dụng Quizzes App trên máy tính
Bước 2: Đăng nhập tài khoản người dùng
Bước 3: Nhấn chuột vào Avatar trên thanh Navbar
Bước 4: Dropdown xuất hiện , chọn Help Q&A
Bước 5: Màn hình Chat hiện ra Nhập nội dung bạn cần hỏi đáp vào ô Input
Bước 6: Nhấn chuột vào nút Submit để gửi yêu cầu và chờ kết quả phản hồi
