Hướng dẫn làm app AI Machinelearning trong 5'




Trong 5 phút các bạn sẽ làm được 1 ứng dụng AI - Machine learning mà không cần biết lập trình ^^

Đầu tiên các bạn hãy đăng ký 1 tài khoản trên trang https://thunkable.com/ nếu các bạn không biết bắt đầu với thunkable như thế nào thì có thể xem lại ở đây https://www.ctovietnam.org/post/lap-trinh-ung-dung-di-dong-khong-can-code-dong-nao

Trong bài hướng dẫn này mình sẽ sử dụng những component sau:


Camera: sẽ gọi function chụp hình trên điện thoại và trả về kết quả là 1 bức ảnh.

Image Recognizer: module AI-Machine Learning của Microsoft, có nhiệm vụ phân tích bức ảnh và cho ra kết quả là mô tả bằng chữ cho bức ảnh đó.

Airtable: là 1 database lai với excel, có nhiệm vụ lưu giữ url của bức ảnh được upload lên cloud

Media DB: là nơi lưu giữ những bức ảnh mà mình vừa chụp và cho ra kết quả là url của bức ảnh đó.

Và sau đây là thiết kế 1 airtable của ứng dụng, chỉ sử dụng 2 fields:

url: sẽ lấy giá trị url của bức ảnh vừa được upload lên Media DB

url_opt: sử dụng công thức để chỉnh sửa url với mục đích là làm cho bức ảnh nhỏ hơn, để xử lý nhanh hơn (chèn thêm đoạn "c_scale,w_1024" ở giữa url gốc) CONCATENATE({LEFT(url,49)},"c_scale,w_1024",{RIGHT(url,37)})


Sau đây là thiết kế UI:


UI chỉ có 4 components: Image để hiển thị bức ảnh vừa chụp, 2 labels để hiển thị kết quả từ AI, và 1 nút camera để gọi chức năng chụp ảnh của điện thoại.


Và sau đây là toàn bộ code của chúng ta:


Nguyên lý hoạt động của đoạn code này như sau:

Khi bấm nút camera, ứng dụng sẽ gọi chức năng camera của điện thoại và chụp hình. Sau đó ứng dụng sẽ upload tấm hình này lên Media DB (cloudinary), khi upload thành công, chúng ta sẽ có URL của tấm hình, và URL này sẽ được lưu trong airtable ở cột url. Airtable sẽ tự động generate ra giá trị mới trong cột url_opt dựa vào công thức excel. (url mới được sinh ra để làm giảm độ lớn của tấm hình từ 10MB xuống còn vài trăm KB). Sau đó ứng dụng sẽ dùng url mới này để upload tấm hình lên AI của Microsoft. Cuối cùng module Image_Recognizer sẽ trả về Tags (những vật thể xuất hiện trong bức hình) và Description (lời mô tả bức ảnh bằng chữ).

các bạn có thể chạy thử ứng dụng trên Desktop và Chrome ở link sau:

https://thunk.app/web-build/index.html?webAppId=TFcSgBTdo

hay các bạn có thể download project về và chạy hoặc chỉnh sửa trên điện thoại với link sau:

https://x.thunkable.com/copy/d5be0c796d246e9ca2a40ff27d2fdbca


Chúc các bạn thành công và có thời gian vui vẻ với AI và Machine Learning cùng với Thunkable




Drop Me a Line, Let Me Know What You Think