Chia sẻ trải nghiệm làm Web-App luyện nói tiếng Anh với chatGPT và Whisper API

12/5/2023 16:46Phản hồi: 40
Chia sẻ trải nghiệm làm Web-App luyện nói tiếng Anh với chatGPT và Whisper API
2 năm sau lần đầu học lập trình thì hôm nay mình thử sức với một dự án mới, lập trình 1 Web-App với html, css và javascript có sử dụng API của OpenAI để nhận diện giọng nói của học sinh và tự động sửa bài. Chỉ với kiến thức lập trình cơ bản, chatGPT đã giúp mình hoàn thiện dự án này chỉ trong 1 tuần, một trải nghiệm thực sự vui vẻ.

*Bài viết sẽ không đi quá sâu vào coding, chỉ chia sẻ trải nghiệm của mình về quá trình thực hiện thôi ^^

https://tinhte.vn/thread/chia-se-may-mo-lap-trinh-va-cai-ket-mail-tu-dong-da-thay-doi-viec-day-hoc-cua-minh-nhu-the-nao.3290909/

[Chia sẻ] [Mày mò lập trình và cái kết] - Mail tự động đã thay đổi việc dạy học của mình như thế nào

Kéo đến 2:34 để xem phần hướng dẫn chính nhé 1. Mình là ai, vấn đề mình gặp phải trong công việc Mình hiện là một giáo viên tiếng Anh và rất yêu thích lập trình (chuyên ngành chính của mình là Sư phạm, mình chưa tham gia khóa học IT nào…
tinhte.vn


Bài toán đặt ra

Là giáo viên tiếng Anh, từ lâu mình đã muốn có một ứng dụng có khả năng thu âm và tự động chấm bài nói cho học viên, dạng như App Elsa. Do hiện tại mình dạy online nên việc luyện nói cùng học viên không tối ưu như học có gặp mặt trực tiếp, làm được ứng dụng này sẽ giúp học viên thoải mái luyện tập mà không cần phụ thuộc vào việc lên lớp với giáo viên, sau khi hoàn thành khoá họ vẫn có thể sử dụng để nâng cao trình độ.


Mình plan nhẹ thì cần qua được những bài toán sau:
  1. Ứng dụng chạy nền web (để học sinh dùng thiết bị IOS/ Android đều truy cập được)
  2. Có nút thu âm giọng nói thành mp3 → chuyển MP3 thành text
  3. Xử lý text (phần nói của user) → sửa lỗi chính tả + nâng cấp từ vựng hay hơn
  4. Phần text (sau khi được nâng cấp) → chuyển thành MP3 để user nghe lại

Những công cụ mình sử dụng

Project này mình sử dụng API của OpenAI, Google Text-To-Speech

  1. Whisper API để chuyển speech thành text
  2. Model GPT-3.5 để xử lý text (sửa lỗi chính tả, nâng cấp từ vựng)
  3. Google Text-To-Speech chuyển text thành speech để nghe lại

Đây là phiên bản beta nên mình xây dựng cơ bản từ html, css và javascript, đa phần các logic sẽ được xử lý phía client, những project lớn hơn mình sẽ phân hai phía server - client (vẫn đang học React và Nodejs trên Youtube hihi)

Flow của Web-App sẽ là:
  1. Người dùng login bằng tài khoản Google
  2. Nếu lần đầu đăng ký dữ liệu sẽ được lưu vào database (mình dùng Firebase Realtime Database)
  3. Người dùng bấm nút thu âm
  4. Phần thu âm được chuyển thành file MP3
  5. File MP3 gửi request đến Whisper API → ta có script của bài nói gốc
  6. Script bài nói được gửi request đến model GPT-3.5 → ta có bài nói nâng cấp
  7. Bài nói nâng cấp được gửi request đến Google Text-To-Speech → chuyển thành mp3 phát lại cho user nghe

Cách mình sử dụng ChatGPT để code

Do là người tự học lập trình và vẫn còn yếu nên mình đã nhờ đến sự hỗ trợ của chatGPT để hoàn thành từng hạng mục một.


làm-app-luyện-nói-tiếng-anh-với-chat-gpt-5.png
Mình sử dụng ChatGPT Plus, khác biệt lớn nhất so với bản thường là tốc độ phản hồi siêu nhanh, do vậy sử dụng để lập trình rất thoải mái (chi phí khoảng 500k/ tháng, mình nhờ bạn ở Mỹ đăng ký giúp vì hiện tại vẫn chưa thanh toán được bằng tài khoản ngân hàng Việt Nam)

Cách mình làm là đặt bài toán cho ChatGPT và copy phần code nhận được vào Visual Studio Code

Quảng cáo



làm-app-luyện-nói-tiếng-anh-với-chat-gpt-3.png
Mình gửi yêu cầu mô tả giao diện và cách hoạt động
  1. Màn hình có 1 nút thu âm, 1 nút play và 1 audio player
  2. User bấm nút thu âm → nút chuyển màu đỏ → bấm cái nữa chuyển lại bình thường
  3. Thu xong có file MP3 → bấm nút play là nghe lại được

làm-app-luyện-nói-tiếng-anh-với-chat-gpt-4.png
Mình copy đoạn code nhận được vào Visual Studio Code

làm-app-với-chat-gpt-6.gif
Cho code chạy lên trình duyệt thì thu âm và nghe lại ngon lành luôn, thiệt là vi diệu 😁

Cũng theo cách trên, mình lần lượt đưa ra yêu cầu để chatGPT gợi ý code cho những hạng mục còn lại:

Quảng cáo


làm-app-với-chat-gpt-7.gif
Đăng nhập với Google nè

làm-app-với-chat-gpt-8.gif
Chuyển âm thanh thu được thành text và xử lý sửa lỗi chính tả và nâng cấp từ vựng nè

làm-app-với-chat-gpt-9.gif
Lưu bài, bấm từ trong bài nói để tra từ điển nè

Vậy ra làm Web-app với ChatGPT cũng nhàn, chỉ copy và paste thôi nhỉ? Thực tế thì mọi người đọc phần tiếp theo nha ^^

Hạn chế của chatGPT

1. Chỉ có thể trả một lượng kết quả giới hạn

- Nếu bạn đang nghĩ rằng chỉ cần đưa ra yêu cầu thật chi tiết, chatGPT sẽ cho bạn đầy đủ code để hoàn thành 1 ứng dụng thì … không được đâu!


làm-app-với-chat-gpt-10.png
Mình thử yêu cầu code cho mình toàn bộ giao diện của ứng dụng thì được 1/5 yêu cầu là nó ngưng rồi, các bạn vẫn có thể nhập lệnh ‘continue’ để nó tiếp tục, nhưng nhập lệnh này 2,3 lần là nó quên nội dung những phần trước đó và bắt đầu code loạn xạ rồi.

2. Hay bịa link/ nội dung không tồn tại

Rất ít khi chatGPT từ chối trả lời, nó sẽ luôn tìm cách đưa ra một câu trả lời ‘trông có vẻ hợp lý’, điển hình là những lần mình hỏi link <script> để tích hợp thư viện bên ngoài vào ứng dụng thì nó đưa link hiện 404!


làm-app-với-chat-gpt-12.png
Một lần mình yêu cầu link thư viện cho một tính năng của ứng dụng

làm-app-với-chat-gpt-11.png
Bỏ dô thì hiện 404 (mất nết thiệt!)

Do vậy, để hoàn thành được ứng dụng, mình phải đọc, mày mò giải pháp từ rất nhiều tài liệu, blog trên mạng, còn dựa vào ChatGPT 100% thì chắc chắn là không được, vai trò của GPT theo mình sẽ là 20% tổng công việc, trong đó chủ yếu là → gợi ý giải pháp, sửa lỗi/ tối ưu code, còn tiền đề của dự án thì vẫn phải là người lập trình viên.

Hiện tại là vậy, còn tương lai thì không biết được vì những con AI như chatGPT luôn phát triển, có thể một lúc nào đó nó sẽ có khả năng đảm nhận và trả kết quả cho cả một dự án vài chục trang code chẳng hạn.

ChatGPT đã nâng cấp kỹ năng lập trình và cả công việc của mình

Asus ProArt PA279CV_15.jpg


2021 - Mình chỉ có thể làm Front-end với Swift
2023 - Nhờ code với chatGPT, mình đã có thể làm solo một ứng dụng web hoàn chỉnh gồm cả Front-end, Back-end và Database (tất nhiên là vẫn ở level bập bẹ thôi)

Ứng dụng luyện nói tiếng Anh mình code và hoàn thành trong khoảng 1 tuần, nhanh hơn rất nhiều so với những project mình làm trước đây (lần mình code App với Swift mất khoảng 3 tháng).

IELTS Vuive Speaking App_3.jpg
Ứng dụng mới đã giúp ích rất nhiều cho công việc của mình, các bạn học viên có thể tự chủ hơn trong việc luyện nói mà không phải phụ thuộc nhiều vào giáo viên nữa, mình chỉ phải check tiến độ, kết quả của các bạn thông qua dữ liệu của ứng dụng để đưa ra hướng dẫn và chỉnh sửa. Việc áp dụng được các công nghệ mới nhất từ OpenAI trong thời gian ngắn thật sự là một thành quả lớn với mình.

Kỹ năng lập trình cho phép mình tự do sáng tạo

Mình có viết một bài về chủ đề tự học lập trình vào 11/2021: https://tinhte.vn/thread/chia-se-tu-hoc-lap-trinh-khong-phai-la-hoc-mot-minh.3429967/

[Chia sẻ] Tự học lập trình không phải là học một mình!

Chào mọi người, hôm nay mình sẽ chia sẻ chi tiết con đường mình đã thực hiện trong việc tự học lập trình. Vào luôn nhé. 1. Cơ duyên - Khoảng hai năm trước mình giữ chức Giám đốc học thuật của một trung tâm…
tinhte.vn



Đến nay mình vẫn học theo nguyên tắc rút ra từ bài này, đó là luôn tìm cơ hội kết bạn với những lập trình viên để được học hỏi và trao dồi kỹ năng, mình nghĩ đó là lý do giúp mình ngày càng nâng cao được kỹ năng lập trình. Và khi có trong tay bộ kỹ năng mới, mình lại đắm chìm vào những ý tưởng để tạo ra công cụ phục vụ công việc bản thân và cả bạn bè (mình đang viết ứng dụng tích điểm khách hàng cho một người bạn sắp mở quán cafe hihi), cuộc sống lại càng vui vẻ hơn.

Hiện tại mình đang học thêm về React để làm ra ứng dụng chỉnh chu hơn nữa, đây là kênh Youtube của một bạn lập trình viên mình vừa kết bạn gần đây, mọi người có thể tham khảo nha ^^ https://www.youtube.com/@holetex
HoleTex - YouTube
youtube.com


Nếu muốn sử dụng thử ứng dụng luyện nói Speaking, mọi người có thể dùng miễn phí ở đây nha Speaking App

Cảm ơn và hẹn gặp lại ở những bài chia sẻ tiếp theo!
40 bình luận
Chia sẻ

Xu hướng

Bài hay !
mình thì hay dùng Bing chat để nhờ nó soạn hộ marco của excel, cũng hay phết, áp dụng được nhiều dù mình ko biết tí nào về marco
dhnghia
ĐẠI BÀNG
một năm
@hunggh Cách đây 1 tháng mình có dùng thằng Bing thì thấy nó dở hơn chat GPT, nó hay đòi mình phải đưa nhiều thông tin chi tiết hơn thì mới có thể đưa ra câu trả lời
Hay quá thầy ới
Hun cái nè
bài hay! 5 saooo
Mình host trang web lên internet bằng cách nào vậy bác?
@hhoanganh Mình upload lên hosting ạ
Thầy ơi bị chặn truy cập rồi
@MinhTruong24 Bạn mở bằng trình duyệt là dc nha
hay quá ... nhưng lỡ mua Elsa Speak trọn đời với giá 1,5tr rồi nên thôi bỏ qa khúc này hihihi
@jeetkunedo Mua đâu vậy bác
@jeetkunedo À bác dùng thấy ổn ko ạ
@adagioleonard Elsa sửa phát âm ổn nhưng nó dùng nhiều cái voice của google nên mình không thích vì thiếu tự nhiên.
@adagioleonard Mình mua online trên trang chủ luôn hơn nửa năm rồi, mà hình như nó bỏ lifetime rồi, giờ chỉ còn gói năm thì phải. Ứng dụng hay, chỉ đubgs điêmr yếu nhưng học với máy nhanh chán, phát âm cũng ổn k bằng ng thật,ai muốn học ngũ pháp thì chịu, tips luyện thi k có nhưng luyện thi phải mua thêm vài trăm ngàn tiền tài liệu nữa( k khoái vụ này)
https://play.google.com/store/apps/details?id=com.appviet.tu.vung.tieng.anh Bạn có thể nghiên cứu app này học từ vựng và cách nhắc lại học rất hay. Tiếc là họ không phát triển nữa.

Từ Vựng Tiếng Anh (Hoc Tieng) - Apps on Google Play

Vocabulary learning English effectively, learn little more memory - Spaced Repetition method
play.google.com

Với lại app này không cho mình cài những từ vựng không có trong app. Nếu bạn phát triển thêm app mà cho cài thêm từ vựng vào thì hay.
Mình thích nhất là phần luyện tập trắc nghiệm của app và thời gian cách quãng nhắc hôc bài của app.
@tranbinh198074 App này mình có mua key Vĩnh viễn và có góp ý cách thêm từ vựng vào CSDL, và extension bên chorme sao cho đa nền tảng nhưng tiếc họ ko làm nữa
Tuyệt vời, một ứng dụng nhỏ nhưng hiệu quả lớn cho người học và luyện tiếng Anh. Hiếm thấy có giáo viên nào full skill như bác
Chúc thầy giáo sớm hoàn thiện được phần mềm mong muốn 😁
Lại nói về GPT
Tuyệt quá, cảm ơn bạn.
bác nghiên cứu thử strapi làm backend thay cho node js, trực quan và phù hợp tay ngang hơn ạ. nhưng nếu bác vẫn thích gõ code chứ ko phải kéo thả thì em cũng ko dám ý kiến 😃
với ChatGPT thì bác nên dạy dỗ em nó cẩn thận, chia nhỏ project ra cho em nó làm từng phần là ok. em này kiểu giáo sư biết tuốt mà hơi ba phải với não cá vàng
vunt
TÍCH CỰC
một năm
Bạn có làm đâu, bạn ra lệnh cho GPT nó làm đấy chứ.
@vunt Việc sử dụng 1 công cụ của bên thứ 3 để hỗ trợ phát triển 1 ứng dụng của mình là bình thường mà. Tại sao không được tận dụng những cái có sẵn mà phải đi làm lại cái mới.
Theo ý kiến riêng của mình, việc nó được thực hiện như thế nào nó không quan trọng bằng việc nó mang lại giá trị gì.
Hay quá, AI giúp tiết kiệm rất nhiều thời gian và công sức
Rất hay
TTTTT310
ĐẠI BÀNG
một năm
Như bạn chia sẻ thì năm 2021 bạn đã có thể làm Front-end với Swift và tới năm 2023 có thể làm solo một ứng dụng web hoàn chỉnh gồm cả Front-end, Back-end và Database ở level bập bẹ do áp dụng Chat GPT. Bạn có nghĩ là Chat GPT làm bạn chậm lại vì cố áp dụng nó không, vì với những phương pháp học tập thông thường như Google, các khoá học online ... trong 1 năm bạn cũng hoàn toàn có thể làm được điều trên và mình nghĩ level hoàn toàn có thể trên bập bẹ.
@TTTTT310 Vấn đề là mình không phải lập trình viên, mình chỉ làm ứng dụng phục vụ cho cv dạy tiếng Anh của mình, do vậy từ ý tưởng đến sản phẩm mình chỉ mất 1 tuần nhờ GPT là điều mình cần, điều mình muốn truyền tải trong bài là sự tiện lợi và dễ dàng khi lập trình với GPT chỉ với kiến thức nền tảng. Mình ko kiếm tiền từ lập trình nên ko thể bỏ quá nhiều thời gian học và làm dc 😁
App nửa vời mà cứ thích khoe khoang chi vậy trời "thầy"
@Gia Tường Hơi gắt tí nhưng chửi mạnh thêm tí nữa bác ơi. Kkk
@hgbjgnhhu Nó cứ tưởng vậy là hay. Vì mấy thằng gatô này mà ngày càng ít người chia sẻ những thứ hay ho lên mạng, ngại chia sẻ vì sợ bị tấn công
@Gia Tường thế đâu có nghĩa là phải bợ đít người ta như bạn đâu 😁
@Gia Tường bụng ta suy bụng người à
nếu thầy có idea gì về làm app tiếng anh thì nhắn vùng kín mình để hợp tác nhe, mình đang làm dev nhưng base finance

Xu hướng

Bài mới









  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2024 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
  • Số điện thoại: 02822460095
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019