Phạm vi nghiên cứu - Phạm vi công nghệ: Báo cáo tập trung nghiên cứu và sử dụng công nghệ Speech-to-Text để nhận diện giọng nói và chuyển đổi thành văn bản, kết hợp với Flask framework
Nội dung nghiên cứu
- Phân tích vai trò tiếng Anh và công nghệ Speech-to-Text trong việc cải thiện kỹ năng phát âm và giao tiếp
Để phát triển hệ thống hiệu quả, cần xác định rõ yêu cầu và thiết kế các tính năng chính như ghi âm, chuyển đổi giọng nói thành văn bản, so sánh phát âm và xuất kết quả Các bước này giúp đảm bảo hệ thống hoạt động chính xác, đáp ứng nhu cầu người dùng và tối ưu hóa trải nghiệm sử dụng Việc thiết kế chi tiết các chức năng này góp phần nâng cao hiệu suất và độ chính xác của hệ thống nhận diện giọng nói.
- Xây dựng hệ thống bằng Flask kết hợp giao diện đơn giản với HTML, CSS và JavaScript
- Kiểm thử và đánh giá khả năng nhận diện giọng nói, tính ổn định và trải nghiệm giao diện trên hệ thống
- Kết luận và đề xuất phát triển thêm tính năng để mở rộng và nâng cao hiệu quả hệ thống.
TỔNG QUAN
Tổng quan tình hình nghiên cứu về website học tiếng Anh ứng dụng Speech to
Dưới sự phát triển mạnh mẽ của công nghệ trí tuệ nhân tạo (AI) và xử lý giọng nói, các công cụ học ngoại ngữ, đặc biệt là tiếng Anh, sử dụng công nghệ Speech-to-Text đã trở thành trợ thủ đắc lực cho người học Công nghệ này giúp cải thiện kỹ năng phát âm và nâng cao khả năng giao tiếp bằng cách chuyển đổi giọng nói thành văn bản một cách chính xác và nhanh chóng Đồng thời, các công cụ này còn cung cấp phản hồi tức thì, giúp người học điều chỉnh và hoàn thiện kỹ năng ngôn ngữ một cách hiệu quả hơn.
1.1.1 Tình hình nghiên cứu và phát triển trên thế giới
Trên thế giới, nhiều nền tảng và ứng dụng học tiếng Anh đã tích hợp công nghệ Speech-to-Text nhằm hỗ trợ người học rèn luyện phát âm chính xác và nâng cao kỹ năng giao tiếp Công nghệ này giúp nhận diện và chỉnh sửa phát âm trong thời gian thực, giúp người dùng cải thiện khả năng nói tiếng Anh tự nhiên và tự tin hơn Các nền tảng sử dụng Speech-to-Text không chỉ giúp nâng cao hiệu quả học tập mà còn tạo ra trải nghiệm học thú vị, phù hợp với nhu cầu ngày càng cao của người học hiện nay Việc tích hợp công nghệ này góp phần thúc đẩy phương pháp học tiếng Anh hiện đại, linh hoạt và phù hợp với xu hướng công nghệ 4.0.
Duolingo và ELSA Speak là những ứng dụng hàng đầu sử dụng công nghệ nhận diện giọng nói để đánh giá chính xác phát âm của người học và cung cấp phản hồi kịp thời Tuy nhiên, các nền tảng này chủ yếu tập trung vào trải nghiệm trên thiết bị di động, ít tùy biến khi sử dụng trên nền tảng web.
Google Speech-to-Text API và Microsoft Azure Speech Services là những công cụ mạnh mẽ hỗ trợ lập trình viên phát triển ứng dụng học ngoại ngữ Tuy nhiên, việc triển khai các dịch vụ này thường đòi hỏi chi phí cao và kỹ thuật phức tạp, gây thách thức cho các nhà phát triển.
Các nền tảng học tiếng Anh trực tuyến như BBC Learning English và Voice of America (VOA) chủ yếu cung cấp tài liệu và bài học để nâng cao kỹ năng ngôn ngữ Tuy nhiên, hiện tại, chưa tích hợp công cụ Speech-to-Text để phản hồi phát âm thời gian thực cho người học, điều này làm hạn chế khả năng cải thiện kỹ năng phát âm một cách hiệu quả Việc sở hữu công cụ Speech-to-Text sẽ giúp các nền tảng này cung cấp phản hồi chính xác, nhanh chóng, từ đó hỗ trợ người học nâng cao kỹ năng nói tiếng Anh tự tin và hiệu quả hơn.
Các ứng dụng học tiếng Anh toàn cầu đã tích hợp công nghệ Speech-to-Text để nâng cao trải nghiệm người dùng Tuy nhiên, vẫn còn nhiều hạn chế về khả năng tiếp cận trên các nền tảng web miễn phí và khả năng phản hồi phù hợp với đối tượng học tiếng Anh cơ bản Điều này đặt ra thách thức trong việc phổ cập công nghệ này đến nhiều người học hơn và cải thiện hiệu quả học tập.
1.1.2 Tình hình nghiên cứu và phát triển tại Việt Nam:
Tại Việt Nam, nhu cầu học tiếng Anh ngày càng tăng cao, đặc biệt là để nâng cao kỹ năng nói và phát âm chuẩn Mặc dù đã xuất hiện nhiều ứng dụng và nền tảng học tiếng Anh, nhưng vẫn còn nhiều hạn chế cần khắc phục để giúp người học cải thiện hiệu quả hơn.
Các phần mềm như TFlat và Speak English chủ yếu tập trung vào chức năng tra từ điển và luyện phát âm cơ bản, giúp người học cải thiện kỹ năng ngôn ngữ Tuy nhiên, hiện tại, chưa có sự tích hợp của công nghệ nhận diện giọng nói để đánh giá và phản hồi chính xác về phát âm của người học, gây hạn chế trong quá trình tự học Việc nâng cấp các phần mềm này với công nghệ nhận diện giọng nói sẽ giúp cải thiện hiệu quả luyện tập và nâng cao kỹ năng phát âm cho người dùng.
Các trung tâm ngoại ngữ và nền tảng trực tuyến trong nước như Topica Native và Yola chủ yếu tập trung vào mô hình học trực tuyến có giáo viên, tuy nhiên còn thiếu các công cụ tự học phát âm ứng dụng công nghệ Speech-to-Text Điều này khiến người học gặp khó khăn trong việc chủ động rèn luyện kỹ năng nói và phát âm một cách hiệu quả.
Một số ứng dụng nhỏ lẻ tích hợp tính năng ghi âm và nghe lại nhưng chưa đạt độ chính xác cao, chủ yếu do chưa ứng dụng công nghệ xử lý giọng nói tiên tiến Việc nâng cấp các công nghệ này sẽ giúp cải thiện độ chính xác và trải nghiệm người dùng Trong thời gian tới, các nhà phát triển cần tập trung vào việc tích hợp công nghệ nhận dạng giọng nói hiện đại để nâng cao hiệu quả sử dụng của các ứng dụng ghi âm nhỏ lẻ.
Tại Việt Nam, các công cụ học tiếng Anh sử dụng công nghệ Speech-to-Text vẫn còn mới mẻ và chưa thực sự phổ biến Phần lớn các sản phẩm hiện nay thiếu tính năng phản hồi tức thì và hệ thống bài học đa dạng, khiến người học gặp khó khăn trong việc luyện tập phát âm một cách bài bản và hiệu quả.
Hiện nay, còn nhiều khoảng trống trong việc phát triển nền tảng học tiếng Anh tập trung vào luyện phát âm và kỹ năng giao tiếp sử dụng công nghệ Speech-to-Text trên nền tảng web Xây dựng một website học tiếng Anh tích hợp công nghệ Speech-to-Text, giao diện thân thiện và tính năng phản hồi chi tiết sẽ đáp ứng nhu cầu học tập của người dùng, đặc biệt là đối tượng học cơ bản và tự học Đây là cơ hội để phát triển công cụ học tiếng Anh mới, giúp người học rèn luyện phát âm, nâng cao khả năng giao tiếp và tạo môi trường học tập linh hoạt, hiệu quả.
Tổng quan về công nghệ nhận diện giọng nói (Speech-to-Text)
Speech-to-Text (STT) là công nghệ chuyển đổi giọng nói của con người thành văn bản dựa trên các thuật toán xử lý tín hiệu số và trí tuệ nhân tạo (AI) Công nghệ này tích hợp nhiều lĩnh vực như xử lý ngôn ngữ tự nhiên (NLP), nhận diện mẫu và học máy (Machine Learning), nhằm nâng cao khả năng chuyển đổi chính xác và hiệu quả STT ngày càng trở thành giải pháp tối ưu cho các ứng dụng như chuyển đổi nội dung tự động, trợ lý ảo và dịch vụ khách hàng, góp phần nâng cao trải nghiệm người dùng và tối ưu hóa quy trình công việc.
Công nghệ Speech-to-Text chính xác và linh hoạt trong việc nghe, hiểu và diễn giải giọng nói thành văn bản Hiện nay, công nghệ này được ứng dụng rộng rãi trong các lĩnh vực như trợ lý ảo, công cụ dịch thuật và giáo dục, mang lại sự tiện ích và hiệu quả trong giao tiếp và xử lý thông tin Nguyên lý hoạt động của Speech-to-Text dựa trên quá trình phân tích âm thanh, nhận diện giọng nói và chuyển đổi thành dạng chữ viết một cách chính xác.
Quá trình chuyển đổi giọng nói thành văn bản trong công nghệ Speech-to-Text bao gồm các bước chính như sau:
Bước 1 trong quá trình xử lý âm thanh là thu thập giọng nói của người dùng qua micro, sau đó chuyển đổi thành dữ liệu âm thanh số hóa dưới dạng sóng âm thanh để phục vụ các bước xử lý tiếp theo.
Bước 2 trong xử lý tín hiệu âm thanh là tiền xử lý âm thanh, trong đó tín hiệu được lọc nhiễu và tách thành các đơn vị nhỏ như từ hoặc âm vị (phoneme) Quá trình này giúp hệ thống tập trung vào tín hiệu chính, nâng cao độ chính xác và loại bỏ các tạp âm không mong muốn, tối ưu hóa hiệu suất của hệ thống nhận dạng giọng nói.
Bước 3 trong quá trình xử lý giọng nói là nhận diện và phân tích âm vị, nơi hệ thống phân tích các âm vị trong tín hiệu giọng nói và đối chiếu với bộ từ vựng đã được đào tạo trước đó Giai đoạn này đóng vai trò quyết định trong việc xác định chính xác các âm thanh, giúp chuyển đổi chúng thành từ ngữ cụ thể một cách hiệu quả và chính xác.
Bước 4 trong quá trình xử lý ngôn ngữ tự nhiên là sử dụng các thuật toán chuyên dụng để đảm bảo rằng văn bản đầu ra có ý nghĩa chính xác, phù hợp với ngữ cảnh và đúng ngữ pháp Sau khi hệ thống nhận diện các từ khoá, công đoạn tiếp theo là xử lý ngôn ngữ tự nhiên nhằm tạo ra nội dung rõ ràng, mạch lạc và dễ hiểu cho người dùng Việc này giúp nâng cao độ chính xác và tối ưu hóa kết quả đầu ra phù hợp với mục tiêu đã đề ra trong quá trình phân tích dữ liệu.
Trong bước 5 của quá trình chuyển đổi Speech-to-Text, kết quả cuối cùng là văn bản hiển thị trên màn hình và gửi phản hồi đến người dùng, đảm bảo trải nghiệm liền mạch Công nghệ nền tảng trong Speech-to-Text đóng vai trò quan trọng trong việc xử lý dữ liệu âm thanh, nhận diện chính xác giọng nói và chuyển đổi thành văn bản chuẩn xác, giúp tối ưu hiệu quả và độ tin cậy của hệ thống chuyển đổi giọng nói thành văn bản.
Công nghệ STT sử dụng các mô hình học máy, đặc biệt là mạng nơron nhân tạo (Neural Networks), để nhận diện và chuyển đổi giọng nói thành văn bản một cách chính xác và hiệu quả Nhờ vào khả năng học sâu của các mạng nơron, hệ thống có thể cải thiện độ chính xác trong nhận dạng giọng nói, giúp quá trình chuyển đổi trở nên nhanh chóng và tin cậy hơn Công nghệ này đóng vai trò quan trọng trong các ứng dụng như trợ lý ảo, dịch vụ khách hàng tự động và các hệ thống ghi âm tự động, nâng cao trải nghiệm người dùng trên các nền tảng số.
+ Các mô hình như Hidden Markov Model (HMM) và Deep Neural Networks
(DNN) đóng vai trò quan trọng trong việc phân tích và dự đoán các âm vị từ dữ liệu âm thanh
+ Mô hình Recurrent Neural Networks (RNN) và Transformer giúp cải thiện độ chính xác khi xử lý ngôn ngữ tự nhiên và nhận diện các cụm từ phức tạp
- Dữ liệu huấn luyện và đào tạo:
Các hệ thống Speech-to-Text yêu cầu một lượng lớn dữ liệu âm thanh đa dạng, bao gồm các giọng nói với các ngữ điệu, tốc độ và âm sắc khác nhau, để đảm bảo độ chính xác cao Dữ liệu âm thanh này được sử dụng để đào tạo hệ thống thông qua các thuật toán học sâu (Deep Learning), giúp cải thiện khả năng nhận diện và chuyển đổi chính xác các câu nói thành văn bản.
Việc mở rộng lượng dữ liệu giúp nâng cao khả năng nhận diện chính xác của hệ thống, đặc biệt trong việc xử lý các biến thể ngữ âm và lỗi phát âm phổ biến, từ đó cải thiện hiệu quả và độ tin cậy của hệ thống nhận dạng giọng nói.
- Xử lý tín hiệu số (Digital Signal Processing - DSP):
Công nghệ DSP (Xử lý Tín hiệu số) đóng vai trò quan trọng trong việc tách và phân tích các thành phần của sóng âm thanh Nhờ đó, tín hiệu giọng nói được chia nhỏ thành các cửa sổ thời gian (time frames), giúp quá trình nhận diện và xử lý từng phần trở nên hiệu quả hơn Công nghệ này nâng cao khả năng xử lý âm thanh chính xác, phục vụ tốt các ứng dụng như nhận dạng giọng nói và truyền thông kỹ thuật số.
The Fast Fourier Transform (FFT) technique and Mel-Frequency Cepstral Coefficients (MFCC) are essential tools for extracting audio features to enhance speech recognition accuracy The Speech-to-Text technology offers significant benefits in English language learning by enabling real-time transcription and feedback Its applications include improving pronunciation, facilitating interactive learning experiences, and supporting learners in gaining confidence in speaking English By leveraging advanced audio processing methods like FFT and MFCC, Speech-to-Text technology transforms language education through more effective and engaging methods.
Công nghệ Speech-to-Text giúp người học dễ dàng chuyển đổi giọng nói thành văn bản một cách chính xác Công nghệ này còn cho phép so sánh phát âm của người học với chuẩn mực để nhanh chóng phát hiện sai lệch Nhờ đó, người học có thể điều chỉnh kịp thời để cải thiện kỹ năng phát âm, nâng cao hiệu quả học tập.
Người học có thể tự chủ động luyện nói và giao tiếp với hệ thống mà không cần sự hỗ trợ của giáo viên Hệ thống cung cấp phản hồi tức thì, giúp người học phát hiện và sửa lỗi sai một cách nhanh chóng, từ đó nâng cao kỹ năng nói một cách hiệu quả.
Công nghệ STT cho phép người học luyện nói tự do ở mọi nơi, mọi thời điểm mà không cần sự giám sát trực tiếp, giúp thúc đẩy quá trình học tập linh hoạt và thuận tiện Phương pháp này tiết kiệm chi phí so với việc thuê giáo viên bản ngữ, mang lại hiệu quả học tập tối ưu.
PHÂN TÍCH YÊU CẦU BÀI TOÁN
Mô tả hệ thống hiện tại
Hệ thống cung cấp các bài học theo chủ đề giúp người học luyện phát âm và nâng cao kỹ năng giao tiếp hiệu quả Người học có thể nói trực tiếp qua microphone hoặc tải lên file âm thanh để hệ thống chuyển đổi thành văn bản, từ đó so sánh với phát âm chuẩn nhằm cải thiện chính xác và tự tin trong giao tiếp.
Hệ thống sử dụng Gemini để đánh giá câu trả lời và cung cấp phản hồi chi tiết, giúp người học cải thiện kỹ năng Dữ liệu câu trả lời được chấm điểm dựa trên câu hỏi và gợi ý (hints) đã cung cấp, từ đó hệ thống đưa ra điểm số trên thang 10 cùng với phản hồi cụ thể để nâng cao khả năng của người học.
Hệ thống hỗ trợ xuất file âm thanh đã chuyển đổi, giúp người dùng dễ dàng tải về các file âm thanh đã được xử lý và chuyển đổi thành văn bản Việc này giúp tối ưu hóa quá trình học tập và làm việc, đồng thời cung cấp khả năng lưu trữ và chia sẻ thông tin dễ dàng hơn Người dùng có thể yên tâm về chất lượng và tiện lợi khi sử dụng chức năng xuất file âm thanh chuyển đổi của hệ thống.
Hệ thống luyện nói qua trò chơi Speech-to-Text giúp người học nâng cao kỹ năng phát âm một cách đơn giản và hiệu quả Trò chơi tự động đọc câu hỏi ngẫu nhiên, tạo trải nghiệm thực tế để luyện tập nghe và phản hồi chính xác Người dùng ghi âm câu trả lời của mình để cải thiện khả năng nói và phát âm tiếng Việt một cách tự nhiên và tự tin hơn.
Hệ thống sẽ tự động xử lý ghi âm và chuyển đổi thành văn bản, giúp người dùng dễ dàng theo dõi nội dung Đồng thời, hệ thống sẽ phản hồi kết quả nhanh chóng, nâng cao trải nghiệm và tăng tính tương tác trong quá trình học tập Nhờ đó, người học sẽ cảm thấy hứng thú hơn và tiếp thu kiến thức hiệu quả hơn.
Yêu cầu chức năng của hệ thống
* Đăng ký và đăng nhập tài khoản:
- Cho phép người dùng tạo tài khoản mới bằng email và mật khẩu
- Hỗ trợ đăng nhập an toàn và lưu thông tin người dùng thông qua session
* Chỉnh sửa hồ sơ cá nhân: Người dùng có thể chỉnh sửa tên, email và hình đại diện để cá nhân hóa tài khoản
Người học có thể ghi âm và chuyển đổi giọng nói thành văn bản bằng cách nói trực tiếp qua micro sử dụng Web Speech API hoặc tải file âm thanh lên hệ thống để thực hiện chuyển đổi thành văn bản thông qua Google Speech Recognition API, giúp tối ưu hóa quá trình học tập và làm việc hiệu quả hơn.
* Đánh giá và phản hồi kết quả học tập:
- Hệ thống gửi câu trả lời của người học lên Gemini để chấm điểm và nhận xét chi tiết dưới dạng JSON
- Kết quả bao gồm: điểm số (0-10), phản hồi cụ thể và lời khuyên cải thiện kỹ năng phát âm
* Trò chơi luyện tập Speech-to-Text:
- Trò chơi đọc ngẫu nhiên các câu hỏi Người học ghi âm câu trả lời và hệ thống chuyển đổi âm thanh thành văn bản
- Văn bản được hiển thị trên màn hình kèm theo phản hồi để người học biết được kết quả
* Thêm, sửa, xóa các topic, lesson, vocabulary, question và challenge
* Xuất file âm thanh: Hệ thống cho phép người học tải về file âm thanh đã ghi âm hoặc chuyển đổi để xem lại và tiếp tục luyện tập.
Yêu cầu phi chức năng
Giao diện người dùng (UI/UX) của nền tảng được thiết kế trực quan, dễ thao tác, giúp người dùng dễ dàng truy cập các tính năng luyện phát âm, trò chơi và tải file Thiết kế rõ ràng, thân thiện với người dùng, đảm bảo trải nghiệm học tập hiệu quả và thuận tiện cho mọi đối tượng.
Hiệu suất và độ ổn định là yếu tố quan trọng để đảm bảo quá trình ghi âm, chuyển đổi văn bản và phản hồi kết quả diễn ra nhanh chóng, mượt mà và chính xác, mang lại trải nghiệm người dùng tối ưu và tin cậy cho hệ thống của bạn.
Các ngôn ngữ lập trình và công nghệ sử dụng
Flask là nền tảng backend mạnh mẽ được sử dụng để quản lý yêu cầu HTTP hiệu quả Nó dễ dàng tích hợp với các API như Web Speech API, Google Speech Recognition API và Gemini để xử lý dữ liệu âm thanh và phản hồi kết quả chính xác Nhờ vào khả năng mở rộng và linh hoạt của Flask, dự án của bạn có thể vận hành trôi chảy và hiệu quả trong các ứng dụng đàm thoại dựa trên AI.
- Web Speech API: Nhận diện giọng nói thời gian thực trên trình duyệt, phù hợp cho việc luyện phát âm và trò chơi ghi âm đáp án
- Google Speech Recognition API: Xử lý các file âm thanh tải lên, chuyển đổi giọng nói thành văn bản với độ chính xác cao
- Gemini (Google Generative AI): Đánh giá và phản hồi câu trả lời của người học dưới dạng JSON, giúp chấm điểm tự động và cải thiện kỹ năng
Hệ thống học tiếng Anh hiệu quả được xây dựng bằng cách kết hợp Flask, Web Speech API, Google Speech Recognition API và Gemini, mang đến trải nghiệm học tập tiện ích và thú vị Chức năng luyện tập phát âm, trò chơi tương tác và phản hồi tự động giúp người dùng nâng cao kỹ năng tiếng Anh một cách dễ dàng và sinh động Sự tích hợp các công nghệ này tạo ra một nền tảng học tập sáng tạo, hỗ trợ người học cải thiện phát âm và thực hành giao tiếp hiệu quả hơn.
THIẾT KẾ HỆ THỐNG
Sơ đồ Use Case
Hình 1: Sơ đồ use case
Sơ đồ luân chuyển dữ liệu trong hệ thống - DFD
Hình 2: Sơ đồ luân chuyển hệ thống - DFD
Sơ đồ phân rã chức năng của ứng dụng - BFD
Hình 3: Sơ đồ phân rã chức năng
Thiết kế cơ sở dữ liệu
Mối quan hệ giữa các bảng:
+ user - progress: 1-nhiều (mỗi người dùng có thể có nhiều tiến độ học tập)
+ lesson - progress: 1-nhiều (mỗi bài học có thể được nhiều người học)
+ topic - lesson: 1-nhiều (mỗi chủ đề có nhiều bài học)
+ lesson - question: 1-nhiều (mỗi bài học có nhiều câu hỏi)
+ question - choice: 1-nhiều (mỗi câu hỏi có nhiều lựa chọn)
+ question - hint: 1-nhiều (mỗi câu hỏi có thể có nhiều gợi ý)
+ topic - vocabulary: 1-nhiều (mỗi chủ đề có nhiều từ vựng)
+ topic - challenge: 1-nhiều (mỗi chủ đề có thể có nhiều thử thách).
Sơ đồ quan hệ cơ sở dữ liệu
Hình 4: Sơ đồ quan hệ
THIẾT KẾ VÀ TRIỂN KHAI WEBSITE FLASK KẾT HỢP
Cài đặt và cấu hình
- Database: MySQL (MySQL WorkBench 8.0 CE)
Phân tích chức năng Đăng nhập, đăng ký, đăng xuất
4.2.1 Chức năng yêu cầu đăng nhập của người dùng và và người quản trị
Hình 5: Yêu cầu đăng nhập của User và Admin a Login_required
- Login_required đảm bảo rằng chỉ người dùng đã đăng nhập mới có thể truy cập vào các route được bảo vệ
- Sử dụng hàm @wraps để bảo tồn thông tin của hàm gốc
+ Nếu session['user_id'] không tồn tại, người dùng sẽ bị chuyển hướng đến trang đăng nhập và nhận thông báo cần đăng nhập
+ Nếu người dùng đã đăng nhập, hàm được bảo vệ sẽ tiếp tục hoạt động b Admin_required
- Admin_required mở rộng chức năng của login_required, đảm bảo rằng chỉ người dùng có quyền admin mới được truy cập vào các route cụ thể
- Kiểm tra xem session['user'] tồn tại hay không
+ Nếu is_admin không phải True, người dùng sẽ bị chuyển hướng đến trang đăng nhập
+ Nếu xác minh thành công, cho phép tiếp tục
Hình 6: Route đăng kí tài khoản
- Route register chịu trách nhiệm xử lý việc đăng ký tài khoản mới cho người dùng
- Phương thức xử lý: GET: Hiển thị giao diện đăng ký thông qua template register.html POST: Xử lý dữ liệu người dùng nhập vào để đăng ký
- Quy trình xử lý đăng ký:
+ Lấy dữ liệu từ form (username, email, password, confirm_password) + Kiểm tra tính hợp lệ của dữ liệu:
+ So khớp mật khẩu (password và confirm_password) Nếu không khớp, hiển thị thông báo lỗi và trả về giao diện đăng ký
Kiểm tra xem email hoặc tên người dùng đã tồn tại trong cơ sở dữ liệu chưa để đảm bảo tính duy nhất của thông tin đăng ký Nếu phát hiện email hoặc username đã tồn tại, hệ thống sẽ hiển thị thông báo lỗi phù hợp và yêu cầu người dùng nhập lại thông tin để hoàn tất đăng ký Quy trình này giúp ngăn chặn việc đăng ký trùng lặp, nâng cao hiệu quả quản lý dữ liệu người dùng.
- Nếu dữ liệu hợp lệ:
+ Tạo một đối tượng người dùng mới (User) với username và email đã nhập + Mã hóa mật khẩu bằng phương thức set_password trước khi lưu
+ Lưu người dùng mới vào cơ sở dữ liệu (db.session.add và db.session.commit)
- Nếu đăng ký thành công, hiển thị thông báo thành công và chuyển hướng đến trang đăng nhập (login)
- Nếu xảy ra lỗi, hiển thị thông báo lỗi cụ thể và giữ lại giao diện đăng ký để người dùng chỉnh sửa
- Route đăng nhập sử dụng hai phương thức chính:
+ GET: Hiển thị trang đăng nhập khi người dùng truy cập vào địa chỉ /login
+ POST: Xử lý thông tin người dùng gửi từ form đăng nhập
+ Kiểm tra thông tin email và mật khẩu
+ Lưu trạng thái đăng nhập của người dùng vào session
+ Người dùng có quyền admin sẽ được chuyển hướng đến trang quản trị (Admin Dashboard)
+ Người dùng thường sẽ được chuyển hướng đến trang chính của hệ thống
Route logout đảm nhận chức năng đăng xuất người dùng khỏi hệ thống bằng cách xóa thông tin đăng nhập như user_id và username khỏi session Sau khi đăng xuất thành công, hệ thống sẽ hiển thị thông báo xác nhận và chuyển hướng người dùng về trang đăng nhập để đảm bảo phiên làm việc cũ đã được xóa hoàn toàn Người dùng cần xác thực lại để tiếp tục sử dụng hệ thống, đảm bảo an toàn và bảo mật cho dữ liệu cá nhân.
Phân tích chức năng chuyển file âm thanh mp3 sang text
Hình 9 mô tả route chuyển đổi âm thanh sang văn bản, cung cấp giao diện cho phép người dùng tải lên file MP3 Khi truy cập vào route này, hàm speech_to_text sẽ được kích hoạt để xử lý file âm thanh và trả về giao diện sound_to_text.html, giúp người dùng dễ dàng chuyển đổi âm thanh thành văn bản một cách hiệu quả.
Hình 10 mô tả route xử lý chuyển đổi âm thanh MP3 thành văn bản (text) Khi người dùng tải lên file MP3 qua POST request, server nhận và xử lý dữ liệu âm thanh để chuyển đổi thành văn bản chính xác và nhanh chóng.
Mã sẽ kiểm tra xem file âm thanh có tồn tại trong yêu cầu hay không; nếu không có, hệ thống sẽ trả về lỗi phù hợp Sau đó, file MP3 sẽ được chuyển đổi sang định dạng WAV để đảm bảo tương thích với thư viện xử lý âm thanh Quá trình này giúp nâng cao hiệu quả xử lý dữ liệu âm thanh, tối ưu hóa chất lượng và độ chính xác khi làm việc với các file âm thanh trong ứng dụng của bạn.
SpeechRecognition không hỗ trợ MP3) sử dụng thư viện pydub
Thư viện SpeechRecognition sẽ được sử dụng để nhận diện âm thanh và chuyển đổi thành văn bản chính xác Sau quá trình chuyển đổi thành công, kết quả sẽ được trả về dưới dạng dữ liệu JSON, giúp dễ dàng xử lý và tích hợp vào các ứng dụng khác.
- pydub (AudioSegment): Thư viện này giúp xử lý file âm thanh, ví dụ như chuyển đổi giữa các định dạng (MP3 sang WAV)
- SpeechRecognition (Recognizer, AudioFile): Dùng để nhận diện lời nói trong file âm thanh Nó hỗ trợ nhiều API nhận diện âm thanh, trong đó có Google Speech-to- Text
Template sound_to_text.html cung cấp giao diện người dùng để tải lên file MP3 và xem kết quả chuyển đổi thành văn bản
Hình 11: Template sound_to_text.html
Người dùng sẽ thấy một form cho phép tải lên file MP3 dễ dàng Sau khi chọn file, họ chỉ cần nhấn "Upload and Convert" để bắt đầu quá trình gửi file lên server Quá trình này giúp chuyển đổi dữ liệu nhanh chóng và thuận tiện cho người dùng.
Sau khi xử lý thành công, kết quả chuyển đổi sẽ được hiển thị trong phần
"Converted Text" Nếu không có văn bản được phát hiện, thông báo "No text detected" sẽ được hiển thị
Hình 12: Javascript xử lí chuyển âm thanh sang văn bản
Quản lý sự kiện tải lên và xử lý file MP3:
- Sử dụng FileReader và FormData để gửi file MP3 lên server
When users click the "Upload and Convert" button, a POST request is sent to the /mp3-to-text route along with the MP3 file The server processes the uploaded file and returns the converted text, providing an efficient way to transcribe audio files into text format.
Chọn file và gửi yêu cầu:
- Khi người dùng chọn một file và nhấn nút "Upload and Convert", sự kiện click sẽ được kích hoạt
- File MP3 được tải lên thông qua FormData và gửi bằng fetch đến route /mp3- to-text
Hiển thị kết quả và phát âm thanh:
- Khi phản hồi từ server trả về văn bản chuyển đổi, nó sẽ được hiển thị trong phần
- Đoạn mã còn cho phép phát lại âm thanh đã tải lên bằng thẻ để người dùng có thể nghe lại file MP3.
Phân tích chức năng Đánh giá và phản hồi kết quả Challenge
4.4.1 Chức năng ghi âm và chuyển đổi giọng nói thành văn bản
Sử dụng API SpeechRecognition để ghi âm câu trả lời từ micro của người dùng, chuyển đổi âm thanh thành văn bản chính xác và nhanh chóng Văn bản được hiển thị trên giao diện theo thời gian thực giúp người dùng dễ dàng kiểm tra nội dung trước khi gửi chấm điểm Công nghệ này tối ưu hóa trải nghiệm người dùng, đảm bảo quá trình đánh giá diễn ra thuận tiện và hiệu quả.
Hình 13: Speaking challenge xử lí ghi âm và chuyển giọng nói thành văn bản
- Phát hiện giọng nói liên tục (recognition.continuous = true) và kết hợp kết quả tạm thời (interimResults = true) để hiển thị ngay cả khi người dùng chưa dừng nói
- Sau khi dừng ghi âm, nội dung cuối cùng được lưu vào biến fullTranscript
4.4.2 Gửi yêu cầu chấm điểm qua API
Sau khi người dùng nhấn nút "SUBMIT", hệ thống sẽ gửi câu hỏi, gợi ý và câu trả lời của người dùng tới API /score_answer để đánh giá Quá trình này giúp đảm bảo các phản hồi được xử lý chính xác và nhanh chóng, nâng cao trải nghiệm người dùng.
Hình 14: Speaking challenge gửi yêu cầu chấm điểm qua API
- Gửi yêu cầu POST với dữ liệu dạng JSON, bao gồm:
+ question: Nội dung câu hỏi
+ answer: Văn bản câu trả lời
- Nhận phản hồi từ server, hiển thị điểm số (score) và nhận xét (feedback)
4.4.3 Phân tích và chấm điểm bằng Gemini API
API backend xử lý yêu cầu bằng cách gọi Gemini AI để phân tích và chấm điểm câu trả lời dựa trên nội dung câu hỏi và gợi ý Quá trình này giúp đánh giá chính xác và tối ưu hoá phản hồi của hệ thống dựa trên AI tiên tiến Code xử lý được thiết kế để đảm bảo hiệu suất cao và tích hợp dễ dàng với các dịch vụ khác trong hệ thống.
Hình 15: Route chấm điểm qua API
- Tạo prompt để gửi tới Gemini API, mô tả yêu cầu phân tích và phản hồi dưới dạng JSON
- Phân tích phản hồi từ Gemini API, trích xuất score và feedback từ chuỗi JSON
4.4.4 Phân tích và chấm điểm bằng Gemini API
- Sau khi nhận phản hồi từ API, hệ thống hiển thị điểm số và phản hồi cho người dùng trên giao diện Code xử lý:
Hình 16: Hiển thị kết quả điểm số
Kết quả hiển thị bao gồm:
- Điểm số (score): Mức độ phù hợp với câu hỏi
- Phản hồi (feedback): Nhận xét chi tiết giúp cải thiện.
Phân tích trò chơi speech to text: “AI Speaking Practise”
4.5.1 Mô tả chức năng của nút Floating Widget:
Hình 17: Giao diện AI Speaking Practisse
+ Nút floating được tạo bởi div với id="floating-widget" và chứa biểu tượng được đại diện bởi lớp widget-icon
+ Thẻ audio và div chuyển cảnh (ẩn ban đầu) hỗ trợ tạo hiệu ứng âm thanh và hình ảnh khi nhấn vào nút
Hình 18: Xử lí chuyển cảnh Game
- Logic hoạt động (JavaScript): Hàm playSoundAndShowImage() được kích hoạt khi người dùng nhấn vào nút Floating Widget:
+ Hiển thị ảnh chuyển cảnh: Thẻ div chứa ảnh GIF được hiển thị bằng cách thay đổi thuộc tính display và visibility
+ Phát âm thanh: Thẻ audio bắt đầu phát nhạc nền
+ Chuyển trang sau 3 giây: Sử dụng setTimeout() để tạm dừng 3 giây, sau đó chuyển hướng người dùng đến /game
+ Sau khi kết thúc, âm thanh được dừng lại và hình chuyển cảnh được ẩn đi
4.5.2 Mô tả chức năng trang game “AI Speaking Practice”:
Trang game.html được thiết kế nhằm luyện tập kỹ năng nói tiếng Anh một cách hiệu quả, sử dụng Web Speech API để nhận diện giọng nói của người dùng và chuyển đổi thành văn bản chính xác Chức năng này giúp người học phản xạ và cải thiện khả năng phát âm Ngoài ra, trang còn cung cấp các câu hỏi luyện tập ngẫu nhiên, giúp tạo sự đa dạng và hứng thú khi học Việc tích hợp công nghệ tiên tiến này hỗ trợ việc học tiếng Anh trở nên dễ dàng và hiệu quả hơn cho người dùng.
* Giao diện (HTML & CSS): Cấu trúc chính của trang:
- Khu vực chào mừng và bắt đầu trò chơi: Giao diện ban đầu hiển thị một ảnh bot
AI, lời chào và nút "I'm Ready!" Khi người dùng nhấn nút, giao diện chuyển sang khu vực câu hỏi và ghi âm
- Khu vực trò chơi: Một hộp hiển thị câu hỏi ngẫu nhiên từ danh sách có sẵn
- Nút điều khiển: Nút " Start Recording" để bắt đầu ghi âm Nút " Stop Recording" để dừng ghi âm, chỉ hiển thị trong khi đang ghi âm
- Hiển thị nội dung câu trả lời người dùng đã ghi âm
Hộp văn bản (textarea) hiển thị bản phiên âm của câu trả lời, giúp người dùng dễ dàng nghe và so sánh Các nút "Retry" (làm lại) và "Next Question" (chuyển câu hỏi) cung cấp chức năng điều hướng để người dùng có thể thử lại hoặc chuyển sang câu hỏi tiếp theo Tính năng này tối ưu hóa trải nghiệm học tập, nâng cao khả năng kiểm tra và rèn luyện kỹ năng ngôn ngữ.
- Bắt đầu trò chơi: Nút "I'm Ready!" khởi động trò chơi bằng cách hiển thị câu hỏi ngẫu nhiên và đọc câu hỏi thành tiếng thông qua Speech Synthesis API
Hiển thị câu hỏi ngẫu nhiên bằng cách lấy một câu hỏi bất kỳ từ danh sách và hiển thị lên màn hình người dùng Đồng thời, sử dụng Speech Synthesis API để đọc câu hỏi đó thành tiếng, nâng cao trải nghiệm người dùng và tương tác hiệu quả hơn.
Sử dụng Web Speech API để ghi âm và chuyển đổi giọng nói thành văn bản một cách chính xác và hiệu quả Công nghệ này giúp nhận diện giọng nói người dùng và chuyển đổi thành văn bản hiển thị trực tiếp trong ô textarea Nhờ đó, người dùng có thể dễ dàng lưu lại nội dung nói mà không cần gõ thủ công, nâng cao trải nghiệm sử dụng và tối ưu hóa quá trình nhập liệu trực tuyến.
- Dừng ghi âm và làm lại câu hỏi: Stop Recording: Dừng nhận diện giọng nói Retry: Xóa kết quả trước và bắt đầu lại việc ghi âm
Hình 22: Giao diện nút 'Retry' và 'Next Question'
Phân tích chức năng phát âm từ vựng, thực hành bài học
Hình 23: Route lấy dữ liệu và điều hướng bài học (lession)
- Hàm lesson_detail(id): Sẽ lấy ra các nội dung bài học, đó có thể là bài tập thực hành hoặc từ vựng của chủ đề.
4.6.1 Chức năng phát âm từ vựng
Hình 24: Giao diện phát âm từ vựng
The article discusses how to display a lesson's title and content, with the title prominently highlighting the lesson's main topic and the content providing detailed information It also explains the process of iterating through a list of vocabulary words retrieved from the backend, showcasing each word to enhance learning experience Incorporating these elements effectively improves educational content by making lessons more organized and vocabulary more accessible, ultimately optimizing the content for SEO with clear, relevant headings and keywords.
- Nghĩa của từ ({{ vocab.meaning }})
- Hai nút chức năng: "Record" và "Stop"
Mỗi từ vựng trong hệ thống được gán một ID động duy nhất ({{ vocab.id }}), giúp phân biệt chính xác khi người dùng thao tác ID này được liên kết trực tiếp với ID của từ vựng trong bảng Vocabulary, đảm bảo sự nhất quán và dễ dàng quản lý dữ liệu Việc sử dụng ID động giúp hệ thống xử lý và truy xuất thông tin một cách nhanh chóng, chính xác, nâng cao trải nghiệm người dùng trong ứng dụng học từ vựng.
4.6.1.2 Xử lý tương tác người dùng (Javascript) a Hàm startRecording: Bắt đầu ghi âm
Hình 25: Javascript hàm xử lí ghi âm
Khởi tạo SpeechRecognition: API nhận diện giọng nói được kích hoạt với ngôn ngữ là tiếng Anh (en-US)
Lấy kết quả giọng nói:
- Duyệt qua các kết quả nhận diện (event.results) và lưu các câu nói cuối cùng (final transcript)
- Hiển thị kết quả lên giao diện với result-${id}
Tự động ghi âm liên tục: Nếu ghi âm chưa dừng, chức năng tự động khởi động lại a Hàm stopRecording: Dừng ghi âm và gửi dữ liệu
Hình 26: Javascript hàm xử lí dừng ghi và gửi dữ liệu
Dừng nhận diện giọng nói, lấy kết quả người dùng vừa phát âm
Gửi kết quả đến backend thông qua API fetch b Các hiệu ứng giao diện
Hình 27: Javascript xử lí hiệu ứng phát âm từ vựng
Hình 28: Route kiểm tra từ vựng
- Nhận dữ liệu: API nhận từ phát âm và ID từ vựng thông qua POST
- Truy vấn từ vựng: Lấy từ vựng tương ứng với ID từ cơ sở dữ liệu
- Kiểm tra kết quả: So sánh từ phát âm của người dùng với từ trong cơ sở dữ liệu, bỏ qua các ký tự không cần thiết
- Phản hồi: Trả về kết quả đúng/sai
4.6.2 Chức năng thực hành bài học
Hình 29: Giao diện hiển thị câu hỏi và đáp án của bài học
Đoạn mã chính có chức năng kiểm tra dữ liệu câu hỏi, hiển thị danh sách các câu hỏi đi kèm với các đáp án dưới dạng radio button để người dùng có thể lựa chọn câu trả lời phù hợp Tính năng này giúp tạo ra trải nghiệm tương tác dễ dàng và thuận tiện cho người dùng khi làm bài tập hoặc khảo sát trực tuyến Việc xử lý dữ liệu câu hỏi kỹ lưỡng đảm bảo tính chính xác và hợp lý trong quá trình hiển thị, nâng cao hiệu quả của hệ thống khảo sát hoặc kiểm tra trực tuyến.
- Logic xử lý bao gồm các biến như correct_answers để kiểm tra đáp án đúng và is_completed để xác định trạng thái hoàn thành của bài làm
Chức năng chính của đoạn mã là xử lý việc thu thập và gửi câu trả lời của người dùng từ một form trắc nghiệm, sau đó hiển thị phản hồi phù hợp và làm nổi bật các đáp án đúng hoặc sai Đoạn mã kiểm tra dữ liệu câu hỏi, hiển thị danh sách câu hỏi kèm các đáp án dạng radio button, giúp người dùng dễ dàng lựa chọn và gửi câu trả lời.
Trong quá trình xử lý logic, hệ thống sử dụng các biến như correct_answers để kiểm tra đáp án đúng và is_completed để xác định trạng thái hoàn thành của bài làm Hàm submitAnswers đảm nhiệm chức năng xử lý đề xuất các câu trả lời của người dùng, kiểm tra đúng sai và cập nhật trạng thái hoàn thành của bài làm Việc này giúp đảm bảo quá trình chấm điểm chính xác và phản hồi kịp thời cho người dùng.
Hình 30: Javascript hàm xử lí nút submitAnswers
- Hàm này xử lý việc thu thập dữ liệu từ form, gửi câu trả lời lên server, và hiển thị kết quả
+ Lấy dữ liệu từ form dưới dạng key-value với FormData
+ Tổ chức dữ liệu câu trả lời dưới dạng đối tượng JSON
+ Gửi dữ liệu qua phương thức POST đến server qua endpoint /lesson/{lessonId}/submit
- Dựa trên phản hồi từ server:
+ Hiển thị trạng thái hoàn thành nếu tất cả câu trả lời đúng
+ Nếu có đáp án sai, yêu cầu người dùng thử lại
+ Gọi hàm highlightAnswers để làm nổi bật đáp án đúng và sai b Hàm xử lí highlightAnswers
Hình 31: Javascript Hàm xử lí highlightAnswers
- Hàm này làm nổi bật đáp án đúng và sai của từng câu hỏi, giúp người dùng nhận biết trực quan kết quả
+ Lấy danh sách câu hỏi và đáp án
+ So sánh câu trả lời của người dùng với đáp án đúng do server cung cấp
- Màu xanh lá cây cho đáp án đúng Màu đỏ cho đáp án sai mà người dùng đã chọn.
Phân tích chức năng trang quản trị
Trang quản trị admin được thiết kế để hỗ trợ quản trị viên dễ dàng quản lý nội dung hệ thống, bao gồm người dùng, chủ đề, bài học, từ vựng, câu hỏi và các bài tập Speaking Challenge Giao diện quản trị được tổ chức logic, trực quan, giúp thao tác nhanh chóng và hiệu quả trong việc quản lý nội dung của hệ thống.
+ Sidebar: Điều hướng chính, với các mục quản lý:
+ Main Content: Khu vực hiển thị nội dung chính của từng chức năng
+ Header: Phần tiêu đề chứa thông tin trang hiện tại và nút ẩn/hiện sidebar
Giao diện biểu mẫu cho phép quản trị viên nhập thông tin chủ đề (Topic) Dữ liệu bao gồm:
- Tên chủ đề (name): Bắt buộc nhập
- Mô tả (description): Mô tả ngắn gọn về chủ đề
- Hình ảnh (image): Tùy chọn thêm ảnh đại diện
Hình 32: Giao diện Admin thêm Topic
- Nhập liệu: Tên và mô tả bắt buộc Tùy chọn tải lên tệp hình ảnh
- Kiểm tra đầu vào: Sử dụng thuộc tính required để kiểm tra tên không được bỏ trống
- Gửi dữ liệu qua phương thức POST tới backend
Route /add-topic nhận và xử lý dữ liệu từ biểu mẫu Các bước:
Chỉ có quản trị viên mới có quyền kiểm tra truy cập, đảm bảo rằng chức năng này chỉ dành cho người có đủ quyền hạn Quá trình xử lý dữ liệu bắt đầu từ việc nhận dữ liệu từ biểu mẫu, trong đó kiểm tra và xử lý hình ảnh (nếu có) để đảm bảo chất lượng và an toàn Sau đó, dữ liệu được lưu trữ một cách an toàn bằng cách tạo đối tượng Topic và lưu tất cả thông tin vào cơ sở dữ liệu, tạo nền tảng cho quản lý nội dung hiệu quả.
+ Phản hồi: Hiển thị thông báo thành công hoặc lỗi
Hình 33: Route Admin xử lí thêm topic
- Xử lý quyền: Chỉ admin mới truy cập được thông qua @admin_required
- Xử lý hình ảnh: Kiểm tra định dạng tệp hợp lệ bằng allowed_file Lưu tệp vào thư mục UPLOAD_FOLDER với tên an toàn
- Lưu trữ: Tạo đối tượng Topic và lưu thông tin vào cơ sở dữ liệu
- Phản hồi: Sử dụng flash để thông báo kết quả cho người dùng
Giao diện biểu mẫu cho phép quản trị viên cập nhật thông tin chủ đề đã tồn tại Các thông tin cần sửa:
+ Tên chủ đề (name): Hiển thị giá trị hiện tại và cho phép chỉnh sửa
+ Mô tả (description): Hiển thị mô tả hiện tại và cho phép chỉnh sửa
+ Hình ảnh (image): Hiển thị hình ảnh hiện tại (nếu có) và cho phép thay đổi
Hình 34: Giao diện Admin sửa Topic
+ Hiển thị thông tin hiện tại: Điền sẵn thông tin name và description của chủ đề Hiển thị hình ảnh hiện tại nếu có ()
Chức năng nhập liệu cho phép người dùng chỉnh sửa tên, mô tả sản phẩm hoặc nội dung cần thiết, đồng thời cung cấp tùy chọn thay đổi hình ảnh dễ dàng Sau khi chỉnh sửa, dữ liệu sẽ được gửi qua phương thức POST đến backend để xử lý và lưu trữ đảm bảo tính nhất quán và an toàn của hệ thống.
Route /edit_topic/ xử lý logic cập nhật thông tin Topic Các bước:
+ Xác thực quyền truy cập: Chỉ admin mới được phép chỉnh sửa
+ Tải dữ liệu: Lấy thông tin của Topic hiện tại từ cơ sở dữ liệu
+ Xử lý dữ liệu từ biểu mẫu: Cập nhật tên và mô tả Kiểm tra và xử lý hình ảnh (nếu có tệp tải lên)
+ Lưu dữ liệu: Lưu thay đổi vào cơ sở dữ liệu
+ Phản hồi: Hiển thị thông báo thành công hoặc lỗi
Hình 35: Route Admin xử lí sửa topic
Chức năng chính: Tải dữ liệu; Xử lý dữ liệu mẫu từ biểu mẫu; Lưu thay đổi; Phản hồi
Giao diện hiển thị danh sách các chủ đề (Topic) với các tùy chọn hành động như "Edit" và "Delete" cho phép người dùng quản lý dễ dàng Người dùng có thể xóa một chủ đề nhanh chóng bằng nút "Delete", giúp duy trì sự gọn gàng và cập nhật nội dung hiệu quả Đây là phần quan trọng trong quản lý nội dung, đảm bảo các chủ đề luôn phù hợp và chính xác theo nhu cầu người dùng.
Hình 36: Giao diện Admin xóa topic
- Hiển thị danh sách: Danh sách các chủ đề được hiển thị trong bảng với các cột:
- Nút Delete: Gửi yêu cầu POST đến backend thông qua form Xác nhận trước khi xóa với onclick="return confirm()"
Route /delete_topic/ xử lý việc xóa Topic Quy trình:
+ Xác thực quyền truy cập: Chỉ admin mới được phép thực hiện chức năng này + Tìm và kiểm tra Topic: Kiểm tra Topic tồn tại trước khi xóa
+ Xóa dữ liệu: Xóa Topic khỏi cơ sở dữ liệu
+ Phản hồi: Hiển thị thông báo kết quả
Hình 37: Route Admin xử lí xóa topic
Chức năng chỉnh sửa trang cá nhân
Hình 38: Route sửa trang cá nhân
Route /profile/edit trong đoạn mã của ứng dụng Flask là chức năng chính để xử lý việc chỉnh sửa thông tin trang cá nhân của người dùng Chức năng này hỗ trợ cả hai phương thức GET và POST, giúp người dùng dễ dàng xem và cập nhật thông tin cá nhân một cách linh hoạt Việc sử dụng route này đảm bảo quy trình chỉnh sửa thông tin diễn ra mượt mà, an toàn và phù hợp với các chuẩn SEO để nâng cao trải nghiệm người dùng và tối ưu hóa tìm kiếm.
- Với GET, route trả về giao diện hiển thị thông tin cá nhân hiện tại để người dùng xem và chỉnh sửa
Trong quá trình xử lý dữ liệu từ form người dùng gửi lên, POST đóng vai trò chính trong việc kiểm tra tính hợp lệ của mật khẩu, xử lý việc tải lên ảnh đại diện (nếu có) và cập nhật các thông tin mới vào cơ sở dữ liệu.
Route này yêu cầu người dùng đăng nhập trước khi truy cập, đảm bảo an toàn và bảo mật cho hệ thống Việc xác minh đăng nhập được thực hiện thông qua session, giúp kiểm soát quyền truy cập một cách hiệu quả Các thông báo quan trọng như lỗi xác nhận mật khẩu hoặc xác nhận cập nhật thành công đều được truyền đến người dùng qua cơ chế flash, giúp người dùng dễ dàng nhận biết trạng thái hoạt động của hệ thống.
- Hàm previewImage được sử dụng để hiển thị bản xem trước của ảnh người dùng chọn trong form trước khi tải ảnh lên server
- FileReader là API JavaScript dùng để đọc nội dung của file (chẳng hạn ảnh, văn bản) trên máy người dùng
- Hàm này thường được dùng trong các form upload ảnh, giúp người dùng xem trước ảnh đại diện hoặc nội dung ảnh trước khi gửi dữ liệu lên server.
XÂY DỰNG GIAO DIỆN
Kết quả
Dự án “Xây dựng website học tiếng Anh ứng dụng công nghệ Speech-to-Text” đã hoàn thành các chức năng chính sau:
Đăng ký, đăng nhập và quản lý hồ sơ người dùng là các bước quan trọng giúp người học dễ dàng tạo tài khoản cá nhân trên nền tảng, chỉnh sửa thông tin cá nhân chính xác và cập nhật liên tục quá trình học tập Việc này không chỉ nâng cao trải nghiệm người dùng mà còn giúp theo dõi kết quả học tập một cách thuận tiện, góp phần thúc đẩy quá trình học tập hiệu quả và tối ưu hóa SEO cho nội dung giáo dục trực tuyến.
Luyện phát âm và chuyển đổi giọng nói thành văn bản là nhờ vào Web Speech API và Google Speech Recognition API, giúp nhận diện giọng nói trực tiếp từ micro hoặc file âm thanh tải lên, sau đó chuyển đổi thành văn bản chính xác và phản hồi kết quả nhanh chóng.
Tích hợp Gemini API giúp tự động chấm điểm câu trả lời và cung cấp nhận xét chi tiết, nâng cao hiệu quả đánh giá và phản hồi kết quả học tập Công nghệ này giúp người học dễ dàng nhận diện lỗi sai và từ đó cải thiện kỹ năng giao tiếp một cách nhanh chóng và chính xác Việc tự động hóa quá trình đánh giá không chỉ tiết kiệm thời gian mà còn cung cấp phản hồi kịp thời, thúc đẩy quá trình học tập hiệu quả hơn.
Trò chơi luyện tập Speech-to-Text giúp người học nâng cao kỹ năng nói qua việc xây dựng các trò chơi đọc ngẫu nhiên câu hỏi và ghi âm câu trả lời Người dùng có thể xem văn bản chuyển đổi từ âm thanh, từ đó tăng cường khả năng phát âm và phản xạ ngôn ngữ Thiết kế này không chỉ giúp nâng cao kỹ năng ngôn ngữ mà còn tạo ra môi trường học tập tương tác, sinh động và thú vị hơn Phương pháp này phù hợp để thúc đẩy sự hứng khởi và hiệu quả trong quá trình học tiếng nói và nghe.
Dịch vụ xuất file âm thanh đã ghi lại và chuyển đổi thành văn bản giúp người học dễ dàng tải về các tệp ghi âm sau khi đã chuyển đổi Tính năng này hỗ trợ việc xem lại nội dung và luyện tập thêm, nâng cao hiệu quả học tập và cải thiện kỹ năng nghe hiểu.
Xây dựng giao diện người dùng thân thiện và trực quan là yếu tố quan trọng để nâng cao trải nghiệm học tập Thiết kế giao diện đơn giản, dễ sử dụng trên nền tảng Flask kết hợp với HTML, CSS và JavaScript giúp người dùng có thể tiếp cận và sử dụng hệ thống một cách dễ dàng Điều này đảm bảo trải nghiệm học tập mượt mà, thuận tiện và hiệu quả hơn cho người dùng.
- Chưa tối ưu hóa toàn diện hiệu suất: Ở một số tác vụ xử lý file âm thanh lớn, hệ thống vẫn còn độ trễ nhẹ
Ứng dụng hiện chưa tích hợp chức năng thông báo đẩy (push notification) để nhắc nhở người học hiệu quả hơn, đồng thời còn thiếu tính năng hỗ trợ đa ngôn ngữ trên giao diện, hạn chế trải nghiệm người dùng quốc tế.
- Phụ thuộc vào kết nối Internet: Việc sử dụng Web Speech API và Google Speech
- Recognition API yêu cầu kết nối mạng ổn định, gây khó khăn cho người học ở khu vực mạng yếu
- Thiếu các báo cáo học tập chi tiết: Hệ thống chưa cung cấp báo cáo tiến độ học tập tổng quát cho người học theo thời gian.
Thảo luận
Việc tích hợp Flask, Web Speech API, Google Speech Recognition API và Gemini đã tạo ra giải pháp hiệu quả cho việc học phát âm và giao tiếp tiếng Anh Các API xử lý giọng nói và đánh giá câu trả lời giúp tự động hóa quá trình luyện tập, từ đó tiết kiệm thời gian và công sức cho người học Đây là bước tiến quan trọng trong việc cải thiện kỹ năng ngôn ngữ thông qua công nghệ tự động hóa và trợ giúp liên tục.
Hệ thống đã đáp ứng nhu cầu học tập cơ bản, hỗ trợ người học cải thiện phát âm và kỹ năng giao tiếp tiếng Anh qua các bài luyện tập và trò chơi tương tác Tuy nhiên, để nâng cao hiệu quả, cần cải thiện hiệu suất xử lý dữ liệu lớn của hệ thống và nghiên cứu thêm các tính năng nâng cao như báo cáo chi tiết kết quả học tập và tính năng nhắc nhở học tập tự động.
Việc ứng dụng công nghệ hiện đại như Speech-to-Text và trí tuệ nhân tạo (Gemini) đã nâng cao khả năng phản hồi tức thì và chính xác, mang lại trải nghiệm học tập mới mẻ và hiệu quả cho người dùng Tuy nhiên, để đáp ứng tốt hơn nhu cầu học tập ngày càng đa dạng của người dùng, nhóm cần tiếp tục tối ưu hóa và mở rộng các tính năng của hệ thống.
Kết luận
Dự án có tiềm năng phát triển trong tương lai nếu được bổ sung các tính năng như thông báo đẩy, báo cáo tiến độ chi tiết và hỗ trợ đa ngôn ngữ Mặc dù nhóm đã cố gắng hoàn thiện đề tài, nhưng vẫn còn một số thiếu sót cần được khắc phục Chúng tôi mong nhận được ý kiến góp ý từ thầy cô và bạn bè để tiếp tục hoàn thiện hệ thống, đáp ứng tốt hơn nhu cầu thực tế của người học và nâng cao chất lượng ứng dụng.
