Từ Máy phân tích hình ảnh Zero đến AI trong 5 phút: Hướng dẫn cho người mới bắt đầu

Bạn có muốn biết cách xây dựng một máy phân tích hình ảnh AI không? Sau đó đọc bài viết này cho đến cuối! Tôi sẽ hướng dẫn bạn cách xây dựng các công cụ phân tích AI thực sự đơn giản nên bạn hầu như không cần phải có bất kỳ kiến thức nào trước đó. Tôi sẽ hướng dẫn bạn từng bước và chúng tôi sẽ sử dụng Project IDX và API Gemini. Điều này có nghĩa là bạn không phải thiết lập bất cứ điều gì; mọi thứ chúng tôi sẽ làm đều ở trên đám mây. Nếu bạn đã sẵn sàng thì hãy bắt đầu nhé!

Truy cập kênh YouTube của tôi

Bắt đầu với dự án IDX

Bước đầu tiên khá đơn giản. Chúng ta cần mở trang web idx.google.com . Nếu bạn chưa đăng ký, bạn phải đăng ký trước và sau đó bạn có thể xem màn hình bên dưới.

1. Chọn mẫu: Tôi sẽ chọn mẫu API Gemini.

   
   

2. Đặt tên cho dự án của bạn: Tôi sẽ gọi nó là "thử nghiệm năm 2024."

   
   

3. Chọn Môi trường: Tôi sẽ chọn "Vite", đây là môi trường ứng dụng web JavaScript.

   
   

4. Tạo dự án: Nhấn nút Tạo.

   
   

   

Sau vài phút, IDX sẽ tạo mọi thứ cho chúng tôi và chúng tôi sẽ thấy các tệp mẫu của mình, chúng tôi có thể sửa đổi theo ý muốn.

Sửa đổi mẫu

Đây là tệp index.html của chúng tôi. Chúng ta có thể sửa đổi nó theo cách chúng ta muốn, nhưng trước tiên hãy xem xét nó. Mẫu ban đầu chứa hầu hết mọi thứ chúng ta cần. Mẫu này sử dụng mô hình Gemini 1.5-flash nên quá đủ đối với chúng tôi.

Nhận khóa API

Như bạn có thể thấy, ban đầu ứng dụng không hoạt động vì trước tiên chúng ta cần lấy khóa API. Tới trang web https://aistudio.google.com/app/apikey , và lấy chìa khóa của bạn ở đó. Nếu bạn muốn có hướng dẫn chi tiết về cách lấy khóa API , vui lòng xem một video khác về Project IDX.

Sau khi bạn nhận được khóa, hãy sao chép nó rồi chuyển đến tệp main.js. Thay thế trình giữ chỗ bằng khóa API của bạn.

Kiểm tra ứng dụng

Hãy kiểm tra xem ứng dụng của chúng tôi có hoạt động không. Nhấn "Đi" và xem Song Tử trả lại cho chúng ta những gì.

Như bạn có thể thấy, Song Tử hiểu những gì bên trong bức tranh và gợi ý một số công thức để nướng loại bánh này. Vì ứng dụng này đã có trên máy chủ nên bạn có thể chia sẻ liên kết hoặc mở ứng dụng này trong trình duyệt của mình.

URL chưa đẹp; tuy nhiên, bạn sẽ có thể thấy rằng mọi thứ đang hoạt động và bạn có thể chia sẻ liên kết này với đối tác hoặc đồng nghiệp của mình.

Thêm chức năng tải lên hình ảnh

Để hoàn thiện trình phân tích hình ảnh AI của mình, chúng tôi cần có khả năng thêm hình ảnh của riêng mình. Hãy thực hiện một số điều chỉnh đối với mẫu; đầu tiên là tệp index.html:

1. Thay đổi tên ứng dụng: Tôi sẽ gọi nó là "Trình phân tích hình ảnh AI".

   
   

2. Xóa HTML: Xóa các hình ảnh được xác định trước. Các dòng từ 14 đến 27.

 <div class="image-picker"> <label class="image-choice"> <input type="radio" checked name="chosen-image" value="/baked_goods_1.jpg"> <img src="/baked_goods_1.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_2.jpg"> <img src="/baked_goods_2.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_3.jpg"> <img src="/baked_goods_3.jpg"> </label> </div>

3. Thêm trường nhập để tải hình ảnh lên. Dòng 15

 <input type="file" id="fileInput" name="file">

4. Thay đổi giá trị nhắc tên đầu vào thành "Hỏi bất cứ điều gì bạn muốn về hình ảnh này."

HTML kết quả sẽ trông giống như hình bên dưới.

Cập nhật JavaScript

Chúng ta cần xác định mã JavaScript để đọc tệp của mình. Mở tệp main.js và thực hiện các thay đổi sau:

1. Xóa mã từ dòng 22 đến dòng 26.

 // Load the image as a base64 string let imageUrl = form.elements.namedItem('chosen-image').value; let imageBase64 = await fetch(imageUrl) .then(r => r.arrayBuffer()) .then(a => Base64.fromByteArray(new Uint8Array(a)));

2. Thêm mã mới bắt đầu từ dòng 22.

 // Load the image as a base64 string const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const imageBase64 = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const base64String = reader.result.split(',')[1]; // Extract base64 part resolve(base64String); }; reader.onerror = reject; });

Ứng dụng của bạn sẽ trông như thế này trong ảnh chụp màn hình bên dưới.

Kiểm tra cuối cùng

Hãy kiểm tra kết quả. Tải hình ảnh lên, hỏi hình ảnh có gì và nhấn "Đi".

Ví dụ hình ảnh của tôi.

Kết quả:

Như bạn có thể thấy, API Gemini giải thích mọi thứ về hình ảnh. Máy phân tích hình ảnh AI của chúng tôi đang hoạt động!

Phần kết luận

Đó là nó! Như bạn có thể thấy, việc xây dựng bộ phân tích hình ảnh AI bằng Project IDX và API Gemini thực sự đơn giản. Bạn có thể tạo ra nhiều ứng dụng khác nhau. Đây chỉ là một ví dụ. Tôi hy vọng bạn thấy bài viết này hữu ích và nhiều thông tin. Xin đừng quên chia sẻ phản hồi của bạn trong phần bình luận bên dưới.

Cảm ơn bạn và hẹn gặp lại bạn trong những bài viết tiếp theo của tôi! :)