Hướng dẫn triển khai phân loại hình ảnh trên Website miễn phí
1. Giới thiệu
Phân loại hình ảnh là một trong những ứng dụng phổ biến nhất của trí tuệ nhân tạo, đặc biệt là trong lĩnh vực thị giác máy tính. Từ việc nhận diện đối tượng, phân loại loài động vật, cho đến phân loại sản phẩm trong các ứng dụng thương mại điện tử, hệ thống phân loại hình ảnh đã và đang đóng vai trò quan trọng trong nhiều ngành nghề khác nhau.
Tuy nhiên, việc triển khai một website trực tuyến thường đòi hỏi các kiến thức chuyên sâu về hạ tầng mạng, máy chủ và cấu hình tên miền, điều này có thể gây khó khăn cho nhiều người mới bắt đầu.
Trong bài viết này, chúng ta sẽ cùng nhau triển khai một website phân loại hình ảnh đơn giản, sử dụng mô hình AI sẵn có và đưa nó trực tuyến bằng Ngrok. Bài viết sẽ bao gồm các bước từ việc thiết lập môi trường làm việc, xây dựng giao diện, lập trình xử lý hình ảnh đến triển khai ứng dụng bằng Ngrok. Đến cuối bài viết, bạn sẽ có một website phân loại hình ảnh của riêng mình, sẵn sàng để truy cập từ bất kỳ đâu thông qua liên kết do Ngrok cung cấp.
Kết quả mong muốn:
2. Website trực tuyến sử dụng Ngrok
Ngrok là một công cụ mạnh mẽ giúp kết nối máy tính cục bộ của bạn với internet qua một URL công khai. Công cụ này rất hữu ích khi bạn muốn thử nghiệm ứng dụng web hoặc chia sẻ một website nhỏ với người khác mà không cần triển khai lên máy chủ thực sự. Để sử dụng Ngrok, bạn cần có một tài khoản miễn phí và làm theo các bước sau:
Bước 1: Tạo tài khoản Ngrok
- Truy cập vào trang ngrok.com và nhấn vào nút Sign Up (Đăng ký).
- Điền thông tin email và mật khẩu hoặc đăng ký nhanh bằng tài khoản Google.
- Sau khi tạo tài khoản, bạn sẽ có được một Authentication Token (mã xác thực tại dashboard/get-started/your-authtoken). Mã này cần thiết để sử dụng Ngrok.
Bước 2: Cài đặt Ngrok
Để đơn giản, sử dụng pip để cài đặt Ngrok:
root@aicandy:~/aicandy/projects# pip install pyngrok
Collecting pyngrok
Downloading pyngrok-7.2.0-py3-none-any.whl (22 kB)
Requirement already satisfied: PyYAML>=5.1 in /usr/lib/python3/dist-packages (from pyngrok) (5.3.1)
Installing collected packages: pyngrok
Successfully installed pyngrok-7.2.0
root@aicandy:~/aicandy/projects#Bước 3: Kết nối Ngrok với tài khoản
Trong Terminal, chạy lệnh sau (ngrok authtoken <mã_token>) để đăng nhập bằng Authentication Token của bạn:
root@aicandy:~/aicandy/projects# ngrok authtoken 2oCA*******************************sx1j
Authtoken saved to configuration file: /root/.config/ngrok/ngrok.yml
root@aicandy:~/aicandy/projects#Lệnh này sẽ liên kết Ngrok với tài khoản của bạn, cho phép bạn sử dụng đầy đủ các tính năng của gói miễn phí (Link website sẽ tồn tại tới khi khởi động lại chương trình).
3. Thiết kế giao diện website
Để tạo giao diện website, để đơn giản chúng ta có thể sử dụng mã html lưu trong file index.html và có bố cục như ảnh dưới:
Trong đó:
- Dòng tiêu đề mô tả về website.
- Nút bấm “Browser/Chọn tệp” để khi người dùng nhấn vào sẽ lựa chọn ảnh để tải ảnh cần phân loại lên website.
- Một image-container để hiển thị ảnh đã lựa chọn.
- Dòng result-label để hiển thị tên của đối tượng chính trong bức ảnh sau khi đã xác định được đối tượng.
Để tạo phần thứ nhất là title thì khá đơn giản, có thể dùng thẻ <h1> trong thẻ <body> kết hợp với cấu hình định dạng trong thẻ <style> như sau:
<style>
.container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.title {
color: blue;
margin-bottom: 20px;
}
</style>
<body>
<div class="container">
<h1 class="title">AIcandy.vn - Image Classification</h1>
</div>
</body>
Để tạo image-container và result-label thì cần kết hợp thêm đoạn script để thực hiện kiểm tra file, gửi file và nhận kết quả từ server. Chương trình có thể được xử lý như phía dưới:
<body>
<div class="container">
<input type="file" id="imageInput" accept=".jpg, .png">
<div class="image-container">
<img id="preview" style="display: none;">
</div>
<div class="result-container">
<span class="result-label">Result:</span>
<span id="result" class="result-value"></span>
</div>
</div>
<script>
document.getElementById('imageInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const allowedExtensions = ['image/jpeg', 'image/png'];
if (!allowedExtensions.includes(file.type)) {
alert('Chỉ hỗ trợ các file JPG hoặc PNG.');
return;
}
const preview = document.getElementById('preview');
preview.style.display = 'block';
preview.src = URL.createObjectURL(file);
const resultDiv = document.getElementById('result');
const statusLabel = document.getElementById('status-label');
resultDiv.textContent = ""; // Clear previous result
statusLabel.textContent = "Processing";
const formData = new FormData();
formData.append('file', file);
fetch('/predict', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
statusLabel.textContent = "Results:";
resultDiv.textContent = data.class;
})
.catch(error => {
console.error('Error:', error);
alert('Error processing image');
statusLabel.textContent = "Result:";
});
}
});
</script>
</body>
4. Chương trình trên server
Phần này hướng dẫn cách xây dựng một chương trình server đơn giản để phân loại hình ảnh, sử dụng framework Flask và thư viện PyTorch. Dưới đây là các bước để triển khai chương trình trên server:
4.1. Thiết lập môi trường Flask và PyTorch
Ứng dụng server được xây dựng bằng Flask, một framework phổ biến trong Python để tạo các ứng dụng web và API. Flask sẽ quản lý các yêu cầu từ phía người dùng, nhận hình ảnh tải lên, xử lý chúng và trả về kết quả phân loại.
Các thư viện cần thiết cho dự án đã được config trong file requirements.txt, thông qua pip có thể cài đặt dễ dàng như sau:
pip install -r requirements.txt4.2. Cấu trúc dự án
root@aicandy:~/aicandy/projects/AIcandy_Website_ImageClassification_kgqipnbv# tree
.
├── AIcandy_imageclassification_utils_thlmmmih.py
├── AIcandy_website_app_rvemyich.py
├── imagenet_classes.txt
├── model.pth
├── requirements.txt
└── templates
└── index.html
1 directory, 6 files
root@aicandy:~/aicandy/projects/AIcandy_Website_ImageClassification_kgqipnbv#Trong đó:
- AIcandy_website_app_rvemyich.py: Tệp này là điểm khởi đầu của ứng dụng Flask, định nghĩa các endpoint và xử lý các yêu cầu đến server.
- Tệp AIcandy_imageclassification_utils_thlmmmih.py: Chứa các hàm hỗ trợ bao gồm tải mô hình, xử lý ảnh, và lấy dự đoán từ mô hình đã huấn luyện.
4.3. Phân tích mã nguồn chương trình chính
Tải mô hình: Tải mô hình từ tệp model.pth để sẵn sàng sử dụng cho các yêu cầu dự đoán.
model = load_model('model.pth')Định nghĩa route /:
Hiển thị trang chủ (là giao diện tải ảnh lên) khi truy cập vào địa chỉ chính của server.
@app.route('/')
def home():
return render_template('index.html')Định nghĩa route /predict:
Xử lý yêu cầu POST để dự đoán hình ảnh: Kiểm tra tệp hình ảnh được gửi. Đọc dữ liệu ảnh, chuyển đổi và xử lý thành tensor trước khi đưa vào mô hình. Lấy kết quả phân loại từ mô hình và trả về dưới dạng JSON.
@app.route('/predict', methods=['POST'])
def predict():
if 'file' not in request.files:
return jsonify({'error': 'No file provided'}), 400
file = request.files['file']
image_bytes = file.read()
image_tensor = process_image(image_bytes)
predicted_class = get_prediction(model, image_tensor)
return jsonify({'class': predicted_class})Khởi động Ngrok: Sử dụng Ngrok để tạo địa chỉ URL công khai cho server, cho phép truy cập từ xa mà không cần cấu hình router.
public_url = ngrok.connect(7979)
print(f' * Public URL: {public_url}')
app.run(threaded=True, host="0.0.0.0", port=7979)4.4. Phân tích mã nguồn chương trình hỗ trợ
Hàm load_model:
Tải mô hình MobileNetV2 từ tệp và đặt ở chế độ eval để dự đoán.
def load_model(model_path):
model = mobilenet_v2(pretrained=False)
model.load_state_dict(torch.load(model_path, map_location=torch.device('cpu')))
model.eval()
return modelHàm process_image:
Chuyển đổi dữ liệu ảnh thành tensor phù hợp cho mô hình, bao gồm chuyển đổi màu sắc và áp dụng các bước tiền xử lý.
def process_image(image_bytes):
image = Image.open(io.BytesIO(image_bytes))
if image.mode != 'RGB':
image = image.convert('RGB')
transform = get_transform()
image_tensor = transform(image)
image_tensor = image_tensor.unsqueeze(0)
return image_tensor
Hàm get_prediction:
Dự đoán lớp của ảnh bằng mô hình và trả về tên lớp tương ứng.
def get_prediction(model, image_tensor):
with torch.no_grad():
outputs = model(image_tensor)
_, predicted_idx = torch.max(outputs, 1)
predicted_class = IMAGENET_CLASSES[predicted_idx.item()]
return predicted_class4.5. Thực thi ứng dụng
Để thực thi ứng dụng, trên terminal chạy lệnh sau:
root@aicandy:/aicandy/projects/AIcandy_Website_ImageClassification_kgqipnbv# python AIcandy_website_app_rvemyich.py
model.load_state_dict(torch.load(model_path, map_location=torch.device('cpu')))
* Public URL: NgrokTunnel: "https://24e6-222-254-34-167.ngrok-free.app" -> "http://localhost:7979"
* Serving Flask app 'AIcandy_website_app_rvemyich'
* Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on all addresses (0.0.0.0)
* Running on http://127.0.0.1:7979
Press CTRL+C to quitKhi đó, Ngrok sẽ tạo một public url tại dòng “Public URL: NgrokTunnel”, chỉ cần sử dụng đường dẫn này là có thể truy cập tới website của bạn từ các trình duyệt web khác.
5. Kết luận
Qua bài viết này, chúng ta đã tìm hiểu cách thiết lập và triển khai website phân loại hình ảnh trực tuyến bằng Ngrok. Với Ngrok, quy trình cấu hình trở nên đơn giản hơn, giúp bạn dễ dàng kiểm thử và trình diễn dự án trực tuyến mà không đòi hỏi nhiều chi phí hoặc hạ tầng phức tạp.
Tuy nhiên, việc sử dụng Ngrok cũng có một số hạn chế, đặc biệt là đường link truy cập sẽ thay đổi mỗi khi khởi động lại chương trình đối với tài khoản miễn phí (với tài khoản trả phí, link có thể cố định). Do đó, phương pháp triển khai này thích hợp cho các dự án thử nghiệm, hoặc các buổi demo nhỏ, nội bộ.
Đối với một website thương mại hoặc sản phẩm thực tế, bạn cần chú trọng thêm nhiều yếu tố khác như cân bằng tải, quản lý tài nguyên và bảo mật để đảm bảo tính ổn định và an toàn cho người dùng.
Hy vọng qua hướng dẫn này, bạn đã nắm rõ các bước để tạo và đưa một ứng dụng phân loại hình ảnh lên trực tuyến, và Ngrok sẽ là công cụ hữu ích giúp bạn nhanh chóng chia sẻ thành quả của mình với mọi người!
6. Source code và demo
Source code miễn phí tại đây
Demo trực tuyến tại đây
Video demo xem tại đây
