Mô hình ngôn ngữ thị giác (VLMs) là các mô hình AI đa phương thức có khả năng hiểu và xử lý đồng thời hình ảnh và văn bản. Chúng đóng vai trò nền tảng cho nhiều ứng dụng thị giác máy tính, bao gồm nhận diện đối tượng, trả lời câu hỏi bằng hình ảnh, mô tả hình ảnh và nhiều ứng dụng khác.
Trong bài viết này, chúng ta sẽ tận dụng khả năng hiểu hình ảnh của mô hình ngôn ngữ thị giác để xây dựng một ứng dụng web sẵn sàng triển khai thực tế bằng Next.js có tên là Street Sign Interpreter, giúp nhận diện và diễn giải biển báo giao thông từ bất kỳ quốc gia nào, không phụ thuộc ngôn ngữ hay kiểu thiết kế, như minh họa trong bản demo bên dưới:
Street Sign Interpreter sẽ gồm hai thành phần: một workflow AI được xây dựng bằng Roboflow Workflows để diễn giải biển báo và trả kết quả đầu ra, và một ứng dụng web Next.js được triển khai với giao diện UI và logic backend hoàn chỉnh. Các bước dưới đây mô tả cách xây dựng và tích hợp hai thành phần này.
Xây dựng thành phần: AI Workflow để diễn giải biển báo giao thông
Chúng ta sẽ sử dụng Roboflow Workflows để tạo một workflow nhận hình ảnh biển báo làm đầu vào và xuất ra nội dung diễn giải. Roboflow Workflows là nền tảng mã nguồn mở, low-code, hoạt động trên web, cho phép kết nối linh hoạt nhiều tác vụ thị giác máy tính như visual grounding, mô tả ảnh, trả lời câu hỏi bằng hình ảnh và nhiều tác vụ khác.
Bạn có thể fork workflow trên, nhưng hãy đảm bảo cập nhật API Key trong Google Gemini block bằng key của riêng bạn, có thể tạo thông qua Google AI Studio.
Thiết lập Workflow Roboflow
Đầu tiên, hãy tạo tài khoản Roboflow miễn phí và đăng nhập. Sau đó tạo workspace, tiếp tục chọn Workflows ở thanh menu bên trái và nhấn Create Workflow.
Bạn sẽ được chuyển đến giao diện workflow editor trống để bắt đầu xây dựng workflow AI của mình. Tại đây bạn sẽ thấy hai block mặc định: Inputs và Outputs như minh họa bên dưới:
Bước 1: Chọn một Mô hình Ngôn ngữ Thị giác
Roboflow cung cấp nhiều khối mô hình ngôn ngữ thị giác (Vision-Language Model – VLM) như GPT-5, Qwen2.5-VL, Google Gemini,… Bạn có thể tùy chỉnh tham số cho từng mô hình mà không cần triển khai hay viết mã, đồng thời dễ dàng thêm hoặc thay đổi mô hình để tạo đầu ra phù hợp mục tiêu sử dụng.
Với ứng dụng Street Sign Interpreter, chúng ta sử dụng Google Gemini, dòng mô hình đa phương thức kích thước lớn (Large Multimodal Models – LMM) được phát triển bởi Google DeepMind. Bộ mô hình Gemini gồm các phiên bản như Gemini 2.5 Pro, Gemini 2.5 Flash, Gemini 2.5 Flash-Lite, tối ưu cho từng nhu cầu hiệu năng và tình huống triển khai khác nhau.
Để thêm mô hình vào workflow, nhấp Add a Model → tìm “Google Gemini” → chọn và bấm Add Model như minh họa dưới đây:
Lúc này mô hình Google Gemini đã được thêm vào workflow. Workflow của bạn sẽ giống hình bên dưới:
Bước 2: Cấu hình Mô hình Ngôn ngữ Thị giác
Tiếp theo, chúng ta sử dụng mô hình ngôn ngữ thị giác để diễn giải hình ảnh biển báo giao thông. Khối Google Gemini cung cấp sẵn các prompt cho nhiều dạng tác vụ như Open Prompt, Visual Question Answering và Structured Output Generation. Với trường hợp này, ta chọn Structured Output Generation để mô hình trả về JSON có cấu trúc linh hoạt trong dạng key-value, đảm bảo tính đồng nhất và dễ mở rộng.
Để sử dụng Structured Output Generation, vào tab Configure của khối Gemini → đặt ‘Task Type’ = ‘Structured Output Generation’ → nhập JSON dưới đây tại mục ‘Output Structure’:
{
“Output_schema”: “{\”type\”:\”object\”,\”properties\”:{\”interpretation\”:{\”type\”:\”string\”,\”description\”:\”Meaning of the sign in English, limited to 1 sentence, with added context if needed. Original language or symbols should be explained.\”}},\”propertyOrdering\”:[\”interpretation\”],\”required\”:[\”interpretation\”]}”
}
JSON trên định nghĩa cấu trúc đầu ra của mô hình ngôn ngữ thị giác khi nhận ảnh biển báo. Mô hình bắt buộc trả về trường interpretation, mô tả ý ng
hĩa biển báo bằng chuỗi ký tự.Ngoài khai báo Output Structure, bạn cũng cần nhập Google Gemini API Key (tạo miễn phí tại Google AI Studio) vào trường ‘Api Key’.
Gemini hỗ trợ nhiều biến thể cho tác vụ thị giác. Chúng ta chọn Gemini 2.5 Flash vì độ chính xác tốt và hạn mức sử dụng/ngày phù hợp gói miễn phí. Chọn phiên bản này ở mục Model Version = gemini-2.5-flash.
Đặt Max Tokens = 2000 để tránh cắt nội dung khi mô hình trả phản hồi dài. Ngoài ra có thể điều chỉnh Temperature, Max Concurrent Requests… để tinh chỉnh cách mô hình phản hồi.
Nửa đầu tab Configure của khối Gemini sẽ giống hình minh họa:
Và nửa còn lại của tab Configure cho khối Google Gemini sẽ hiển thị như sau:
Bước 3: Parse chuỗi đầu ra từ mô hình ngôn ngữ thị giác
Đầu ra từ mô hình Google Gemini ở dạng chuỗi thuần (raw string) cần parse thành JSON để sử dụng. Roboflow cung cấp block JSON Parser phục vụ tác vụ này.
Để thêm block này: di chuột vào khối Gemini → nhấn dấu + → tìm JSON Parser và thêm vào workflow. Đặt Expected Fields = interpretation → đổi tên Step thành gemini_output như dưới đây:
Bước 4: Thiết lập Outputs
Chọn block Outputs → vào Configure → nhấn + Add Output → xóa output không cần thiết bằng biểu tượng 🗑️.
Đảm bảo gemini_output đã nằm trong danh sách Outputs. Như vậy workflow hoàn chỉnh: nhận ảnh biển báo → trả về JSON với nội dung giải nghĩa.
Bước 5: Chạy Workflow
Bạn có thể chạy workflow trực tiếp trên giao diện UI, hoặc thông qua API, CLI và các phương thức khác. Nhấn Deploy góc phải để xem mã mẫu chạy workflow.
Ở backend Next.js, chúng ta sẽ chạy workflow bằng JavaScript nhưng thay vì URL ảnh, ta truyền ảnh dạng base64.
Xây dựng thành phần 2: Ứng dụng Next.js tích hợp Workflow Street Sign Interpreter
Next.js là framework phát triển web mã nguồn mở xây dựng trên React và do Vercel phát triển. Nó cho phép tạo ứng dụng web full-stack với frontend và backend trong cùng dự án — vừa dựng UI, vừa xử lý API, server-side logic chỉ trong một môi trường.
Các khả năng chính của Next.js
- Server-side Rendering tăng tốc tải trang
- Static Site Generation cho hiệu suất tốt hơn
- API Routes hỗ trợ backend ngay bên trong dự án
- Hỗ trợ React Components & Hooks
- Tích hợp thư viện và dịch vụ thứ ba dễ dàng
- Incremental Static Regeneration cập nhật nội dung động
- Trải nghiệm phát triển mạnh mẽ, hỗ trợ Hot Reload & Fast Refresh
Bước 1: Tạo dự án Next.js
Để xây dựng một dự án Next.js, điều đầu tiên bạn cần làm là cài đặt Node.js. Bạn có thể tải Node.js trực tiếp từ trang web chính thức của Node.js.
Sau khi cài đặt thành công (và bật tùy chọn Add to PATH/Environment Variables trong quá trình cài đặt), hãy mở terminal và chạy lệnh sau để tạo một project Next.js mới:
npx create-next-app@latest street-sign-interpreter
Khi chạy lệnh trên, Next.js sẽ đưa ra một số câu hỏi thiết lập. Bạn chỉ cần chọn mặc định theo hướng dẫn hiển thị.
Sau khi lệnh npx hoàn tất, cấu trúc project của bạn sẽ trông như sau:
Tiếp theo, truy cập vào thư mục dự án Next.js vừa tạo và chạy tại localhost bằng lệnh:
cd .\street-sign-interpreter\
npm run dev
Lưu ý: Lệnh trên dành cho PowerShell. Nếu bạn sử dụng hệ thống khác, hãy thay thế bằng cú pháp cd phù hợp.
Sau đó truy cập http://localhost:3000, bạn sẽ thấy giao diện web Next.js đã được tạo thành công.
Bước 2: Tạo Backend API
Tiếp theo, chúng ta sẽ tạo một Backend API trong dự án Next.js và API này sẽ chỉ hoạt động thông qua phương thức POST. Trong Next.js, một API được định nghĩa bởi một folder chứa file route.tsx.
Để tạo API tên interpret, hãy tạo thư mục api bên trong thư mục app của src. Sau đó tạo tiếp thư mục interpret và thêm file route.tsx vào bên trong. Cấu trúc thư mục lúc này sẽ như sau:
Tiếp theo, thêm đoạn mã sau vào file route.tsx:
import { NextResponse } from “next/server”;
export async function POST(req: Request) {
const workspaceName = “<your-workspace-name>”
const workflowName = “<your-workflow-name>”
// URL of the Roboflow workflow that interprets street signs
const workflowUrl = `https://serverless.roboflow.com/infer/workflows/${workspaceName}/${workflowName}`;
const formData = await req.formData();
const image = formData.get(“image”) as File | null;
if (!image) { return NextResponse.json({ interpretation: “No image uploaded.” });}
try {
// Convert the uploaded file to Base64
const arrayBuffer = await image.arrayBuffer();
const buffer = Buffer.from(arrayBuffer);
const base64Image = buffer.toString(“base64”);
// Send the base64 image to Roboflow Workflow
const response = await fetch(workflowUrl, {
method: “POST”,
headers: { “Content-Type”: “application/json” },
body: JSON.stringify({
api_key: process.env.ROBOFLOW_KEY,
inputs: {
image: { type: “base64”, value: base64Image },
},
}),
});
const result = await response.json();
// Debugging: log full response
console.log(“Roboflow Workflow Result:”, JSON.stringify(result, null, 2));
// Extract interpretation
const interpretation =
result?.outputs?.[0]?.gemini_output?.interpretation ||
“No interpretation returned from Roboflow workflow.”;
return NextResponse.json({ interpretation });
} catch (error) {
console.error(“Error calling Roboflow Workflow:”, error);
return NextResponse.json({
interpretation: “Failed to interpret the sign.”,
});
}
}
Trong đoạn mã trên, hãy cập nhật hai giá trị workspaceName và workflowName bằng thông tin workspace và workflow thực tế trong dự án Roboflow của bạn dùng để diễn giải biển báo giao thông.
Ngoài ra, bạn có thể xóa hai biến này hoàn toàn và gán trực tiếp workflowUrl bằng URL đầy đủ của workflow, thông tin này được cung cấp tại mục Deploy.
Bạn cần tạo biến môi trường ROBOFLOW_KEY trên máy tính và gán giá trị bằng Roboflow API Key của bạn. API Key có thể tìm trong Settings → API Keys.
Đoạn mã trong file route.tsx tạo ra một API POST của Next.js, cho phép nhận hình ảnh được upload, chuyển đổi sang Base64 và gửi tới Roboflow Workflow để mô hình ngôn ngữ thị giác diễn giải biển báo giao thông. API sau đó trích xuất nội dung trả về và phản hồi kết quả dưới dạng JSON.
Bạn hoàn toàn có thể mở rộng logic để lưu trữ hình ảnh đã upload kèm kết quả dự đoán, danh sách ảnh lỗi, hoặc bổ sung nhiều tính năng nâng cao khác để ứng dụng trở nên mạnh hơn.
Bước 3: Cập nhật giao diện Frontend
Tiếp theo, chúng ta sẽ xây dựng giao diện Frontend tương tác với API bằng cách chỉnh sửa file page.tsx như sau:
“use client”;
import { useState, ChangeEvent } from “react”;
export default function Home() {
const [imageFile, setImageFile] = useState<File | null>(null);
const [imagePreview, setImagePreview] = useState<string>(“”);
const [interpretation, setInterpretation] = useState<string>(“”);
const [loading, setLoading] = useState<boolean>(false);
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files[0]) {
const file = e.target.files[0];
setImageFile(file);
setImagePreview(URL.createObjectURL(file));
setInterpretation(“”); // reset previous interpretation
}
};
const handleInterpret = async () => {
if (!imageFile) {
alert(“Please select a file first.”);
return;
}
setLoading(true);
setInterpretation(“”); // clear previous interpretation
try {
const formData = new FormData();
formData.append(“image”, imageFile);
const res = await fetch(“/api/interpret”, {
method: “POST”,
body: formData,
});
const data = await res.json();
setInterpretation(data.interpretation);
} catch (error) {
console.error(“Error interpreting sign:”, error);
setInterpretation(“Failed to interpret the sign.”);
} finally {
setLoading(false);
}
};
return (
<div className=”font-sans min-h-screen p-8 flex flex-col items-center gap-8 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white”>
<h1 className=”text-3xl font-bold”>🚦 Street Sign Interpreter</h1>
{/* Custom file input */}
<label className=”flex items-center gap-4 cursor-pointer border border-gray-300 dark:border-gray-700 px-4 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800″>
<span className=”font-medium”>Choose file</span>
<span className=”text-gray-500 dark:text-gray-400″>
| {imageFile ? imageFile.name : “No file chosen”}
</span>
<input
type=”file”
accept=”image/*”
onChange={handleFileChange}
className=”hidden”
/>
</label>
{/* Preview uploaded image */}
{imagePreview && (
<div className=”flex flex-col items-center gap-4″>
<p className=”font-medium”>Preview:</p>
<img
src={imagePreview}
alt=”Uploaded street sign”
className=”max-w-xs rounded shadow-md”
/>
</div>
)}
{/* Interpret button */}
<button
onClick={handleInterpret}
className=”px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition flex items-center gap-2 cursor-pointer”
disabled={loading}
>
{loading && (
<svg
className=”animate-spin h-5 w-5 text-white”
xmlns=”http://www.w3.org/2000/svg”
fill=”none”
viewBox=”0 0 24 24″
>
<circle
className=”opacity-25″
cx=”12″
cy=”12″
r=”10″
stroke=”currentColor”
strokeWidth=”4″
></circle>
<path
className=”opacity-75″
fill=”currentColor”
d=”M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z”
></path>
</svg>
)}
{loading ? “Interpreting…” : “Interpret”}
</button>
{/* Display interpretation */}
{interpretation && (
<p className=”mt-4 p-4 bg-gray-200 dark:bg-gray-800 rounded-md w-full max-w-2xl text-center”>
{interpretation}
</p>
)}
</div>
);
}
Đoạn mã trên là một component React cho trang web Street Sign Interpreter. Người dùng có thể tải lên hình ảnh biển báo, xem preview và gửi dữ liệu qua API POST để mô hình ngôn ngữ thị giác xử lý.
Tiếp tục mở file layout.tsx và thay nội dung bằng đoạn mã bên dưới:
import type { Metadata } from “next”;
import { Geist, Geist_Mono } from “next/font/google”;
import “./globals.css”;
const geistSans = Geist({
variable: “–font-geist-sans”,
subsets: [“latin”],
});
const geistMono = Geist_Mono({
variable: “–font-geist-mono”,
subsets: [“latin”],
});
export const metadata: Metadata = {
title: “Street Sign Interpreter”,
description: “Recognizes and interprets street signs worldwide.”,
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang=”en”>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}
Đoạn mã này định nghĩa layout gốc của ứng dụng Next.js, import font và gán vào biến CSS. Phần metadata thiết lập title + description, giúp cải thiện SEO và hiển thị trên trình duyệt.
Sau đó chạy lại dự án bằng lệnh:
npm run dev
Truy cập http://localhost:3000, bạn sẽ nhìn thấy ứng dụng Street Sign Interpreter chạy hoàn chỉnh.
Bước 4: Đưa dự án lên GitHub
Để ứng dụng có thể truy cập công khai, ta cần triển khai (deploy). Có nhiều nền tảng triển khai, nhưng Vercel đơn giản, miễn phí và phù hợp nhất. Trước khi deploy lên Vercel, ta phải đẩy dự án lên GitHub.
Truy cập github.com, đăng nhập và tạo repository mới tại github.com/new.
Bên trong thư mục street-sign-interpreter mà chúng ta đã tạo trước đó, chúng ta thêm và cam kết những thay đổi cục bộ của mình, sau đó đẩy chúng lên kho lưu trữ street-sign-interpreter-repo trên GitHub bằng cách sử dụng các lệnh sau:
git init
git add .
git commit -m “first commit”
git branch -M main
git remote add origin https://github.com/<YOUR-GITHUB-USER-NAME>/street-sign-interpreter-repo.git
git push -u origin main
Sau khi push xong, mã nguồn sẽ hiển thị đầy đủ trên GitHub.
Bước 5: Deploy bằng Vercel
Truy cập vercel.com, đăng ký tài khoản mới hoặc đăng nhập trực tiếp bằng GitHub. Sau khi đăng nhập, nhấp vào Profile của bạn → mở Dashboard. Tại đây bạn sẽ thấy giao diện hiển thị tương tự như hình minh họa trong tài liệu.
Chọn Import Project → GitHub, hệ thống sẽ hiển thị danh sách repository để import.
Nếu GitHub chưa được kết nối, chọn Add GitHub Account để liên kết. Nếu đã kết nối trước đó thì chỉ cần chọn tài khoản GitHub của bạn.
Tìm repository street-sign-interpreter-repo vừa tạo trước đó. Nếu chưa thấy xuất hiện trong danh sách, chọn Configure GitHub App để thêm thủ công.
Tiến hành theo hướng dẫn trên popup để cài đặt quyền Vercel truy cập các repository GitHub của bạn. Tiếp tục cho đến khi giao diện hiển thị tương tự như minh họa.
Cấp quyền truy cập cho repository street-sign-interpreter-repo. Sau khi quyền được phê duyệt, repo sẽ khả dụng trong danh sách import. Nhấn Import để đưa dự án vào Vercel phục vụ cho quá trình deploy.
Khi import thành công, bạn sẽ thấy form cấu hình deploy. Ở phần cài đặt đầu tiên, đặt Root Directory = ./ và Build Command = npm run build, các thông số khác có thể giữ nguyên mặc định như mô tả.
Ở phần Environment Variables, tạo biến môi trường mới với tên ROBOFLOW_KEY và giá trị là Roboflow API Key của bạn.
Sau khi nhập đầy đủ thông tin, nhấn Deploy. Chờ quá trình triển khai hoàn tất. Khi deploy thành công, bạn sẽ thấy màn hình hiển thị bản preview ứng dụng web. Nhấp mở preview để truy cập giao diện web đã chạy thực tế và có thể chia sẻ công khai cho người dùng khác.
Xây dựng ứng dụng từ mô hình ngôn ngữ thị giác với Next.js
Bằng việc kết hợp Next.js và Roboflow Workflows, chúng ta đã xây dựng thành công Street Sign Interpreter – ứng dụng sẵn sàng triển khai thực tế, có khả năng nhận diện và giải nghĩa biển báo giao thông trên toàn thế giới. Mặc dù ví dụ xoay quanh biển báo giao thông, pipeline này hoàn toàn có thể tùy biến cho nhiều lĩnh vực khác như tự động hóa quy trình doanh nghiệp, tối ưu vận hành bán lẻ… thể hiện rõ tính linh hoạt mạnh mẽ của mô hình ngôn ngữ thị giác.
Bên cạnh đó, Roboflow Workflows cung cấp giao diện no-code để xây dựng workflow AI kết hợp nhiều Vision Language Model như Google Gemini, GPT-4, QwenVL, đồng thời dễ dàng tích hợp trực tiếp với ứng dụng Next.js. Điều này rút ngắn đáng kể thời gian phát triển các giải pháp thị giác máy tính.
Nguồn tham khảo: https://blog.roboflow.com/build-vision-applications-next-js-roboflow/
TOT là đơn vị tiên phong trong hành trình chuyển đổi số. Chúng tôi mang đến giải pháp thiết kế website, mobile app và phần mềm theo yêu cầu với dịch vụ linh hoạt, tối ưu theo đúng nhu cầu của doanh nghiệp.
Lấy cảm hứng từ triết lý “Công nghệ vì con người”, TOT giúp doanh nghiệp vận hành hiệu quả hơn, nâng tầm trải nghiệm khách hàng và tạo dấu ấn bền vững cho thương hiệu.
Thông tin liên hệ TopOnTech (TOT):
🌐 Website: https://topon.tech/vi/
📞 Hotline/WhatsApp/Zalo: 0906 712 137
✉️ Email: long.bui@toponseek.com
🏢 Địa chỉ: 31 Hoàng Diệu, Phường 12, Quận 4, Thành phố Hồ Chí Minh, Việt Nam
