Giao diện Tìm kiếm Ngữ nghĩa với Tambo

Giới thiệu

Trong thế giới số ngày nay, việc tìm kiếm thông tin một cách hiệu quả là rất quan trọng. Nhiều công cụ tìm kiếm hiện tại yêu cầu người dùng phải thực hiện quá nhiều bước để có được kết quả mong muốn. Bạn phải chọn danh mục, mở nhiều bộ lọc, và đoán xem checkbox nào có ý nghĩa gì. Điều này rất mệt mỏi.

Với Tambo, bạn có thể đơn giản hóa quá trình này. Bạn chỉ cần nhập một câu hỏi như "Cho tôi biết laptop dưới 1500 đô la với 16GB RAM" và ngay lập tức nhận được các thẻ thông tin hữu ích để so sánh và nhấp vào. Không có hiệu ứng phức tạp, không có trở ngại - chỉ có câu trả lời.

Tại sao tôi xây dựng điều này

Mục tiêu của tôi là tạo ra một giao diện người dùng đơn giản, nơi mà người dùng không cần phải vật lộn với các bộ lọc phức tạp. Tôi đã phát triển mẫu này trong cuộc thi Tambo Hackathon với một ý tưởng cá nhân: giúp người dùng dễ dàng tìm thấy thông tin họ cần mà không gặp phải các rào cản không cần thiết. Tôi tập trung vào sự hiểu biết ngữ nghĩa, các thẻ hiển thị rõ ràng, và hiệu suất nhanh chóng.

Mẫu này mang lại cho bạn điều gì

• Giao diện Người dùng Tạo sinh với Tambo: Các truy vấn bằng tiếng Anh tự nhiên được chuyển thành ý định có cấu trúc (bộ lọc, sắp xếp, ràng buộc) và các gợi ý giao diện thân thiện.
• Kết quả theo thẻ: Các thẻ sạch sẽ, phản hồi nhanh, nổi bật thông tin quan trọng.
• Hoạt động trên nhiều lĩnh vực: Sản phẩm, việc làm, bất động sản, dịch vụ, công thức nấu ăn, tài liệu - bất cứ thứ gì có thể tìm kiếm và trình bày dưới dạng thẻ.
• Hiệu suất cao mặc định: JS tối thiểu, bộ nhớ đệm thông minh, tối ưu hóa cho di động, không có các hiệu ứng không cần thiết.

Đây là một điểm khởi đầu thực tiễn cho các nhóm cần tìm kiếm ngữ nghĩa tuyệt vời mà không cần xây dựng một hệ thống tùy chỉnh từ đầu.

Cách Tambo cung cấp “giao diện tạo sinh”

Tambo chuyển đổi ngôn ngữ tự nhiên mơ hồ thành thứ mà giao diện người dùng của bạn có thể sử dụng ngay lập tức:

• Hiểu ý định: Trích xuất các thực thể, ràng buộc, sở thích và gợi ý sắp xếp.
• Đề xuất giao diện: Đề xuất các tinh chỉnh hữu ích và giải thích ngắn gọn (“Đã lọc tới 2 phòng ngủ dưới 2k đô la”).
• Giữ sự dự đoán: Bạn kiểm soát những gì được hiển thị; Tambo chỉ cung cấp hướng dẫn có cấu trúc.

Kết quả là một giao diện cảm giác như hội thoại mà không trở nên hỗn loạn.

Thử nghiệm với các truy vấn này

"Tìm tai nghe không dây dưới 200 đô la với chức năng chống ồn"
"Căn hộ 2 phòng ngủ ở trung tâm thành phố dưới 2,000 đô la với máy giặt trong nhà"
"Vai trò React từ xa cho người cao cấp trên 120k đô la, chỉ ở Mỹ"
"Giày đi bộ đường dài chống thấm nước cho nam, kích thước rộng"

Bạn sẽ nhận được các thẻ liên quan, dễ đọc - không cần phải lạc lối trong các bộ lọc.

Các ví dụ thực tế bao gồm

• Điện tử: Thông số kỹ thuật, giá cả, khả năng tương thích
• Bất động sản: Số phòng, vị trí, tiện nghi
• Việc làm: Mức lương, kỹ năng, làm việc từ xa/hybrid
• Thời trang: Kích thước, chất liệu, kiểu dáng

Cùng một giao diện, dữ liệu khác nhau. Đó là điều quan trọng.

Công nghệ sử dụng (được giữ đơn giản)

Next.js 15 — Định tuyến, dữ liệu và triển khai
React 19 — Các nguyên tố giao diện hiện đại, ổn định
TypeScript — Phát hiện lỗi sớm
Tambo — Hiểu biết ngữ nghĩa + Hướng dẫn giao diện
Tailwind CSS — Thiết kế nhanh, nhất quán

Lựa chọn thiết kế tôn trọng người dùng

1. Thẻ đầu tiên: Cấu trúc rõ ràng, thông tin có thể hành động, dễ so sánh
2. Tối ưu cho di động: Kích thước mục chạm phù hợp, không có các tính năng chỉ hover
3. Không có hiệu ứng không cần thiết: Nhanh chóng hơn là "mượt mà"
4. Khả năng tiếp cận mặc định: Tương phản cao, ngữ nghĩa hợp lý

Chủ đề cơ bản của tôi

:root {
  --background: #ffffff;
  --text: #000000;
  --accent: #0070f3;
  --border: #eaeaea;
}

Tương phản cao, không rối. Bạn có thể thay đổi nếu muốn; nó sẽ không gây khó khăn cho bạn.

Hiệu suất cảm giác ngay lập tức

• Gói nhỏ, tập trung: Chỉ những gì bạn cần
• Bộ nhớ đệm thông minh: Kết quả cảm giác ngay lập tức sau truy vấn đầu tiên
• Tối ưu hóa hình ảnh: Thẻ sắc nét, tải nhanh
• Không có thuế hiệu ứng: Ít thư viện, ít nguồn gây rối

Bắt đầu (2 phút)

git clone https://github.com/lahfir/tambo-product-showcase
cd product-showcase
npm install
cp example.env.local .env.local
# Thêm khóa API Tambo của bạn
echo "NEXT_PUBLIC_TAMBO_API_KEY=your-key-here" >> .env.local
npm run dev

Mở ứng dụng, nhập một truy vấn, và bạn đã sẵn sàng.

Làm cho nó của bạn

• Thay đổi nguồn dữ liệu: Chỉ định lớp truy xuất đến API hoặc cơ sở dữ liệu của bạn (xem src/services/*-data.ts).
• Điều chỉnh thẻ: Thay đổi các trường và bố cục trong các thành phần hiện có bên dưới src/components/tambo/ để hiển thị những gì quan trọng cho lĩnh vực của bạn.
• Kiểm soát hợp đồng giao diện: Bạn quyết định các tín hiệu Tambo nào bạn tôn trọng (bộ lọc, sắp xếp, mặt hàng, giải thích) và cách chúng được hiển thị.

Vì mẫu này không phụ thuộc vào lĩnh vực, bạn có thể sử dụng nó cho bất kỳ thứ gì liên quan đến tìm kiếm, với kết quả được trình bày dưới dạng thẻ.

Tại sao sự đơn giản là chiến thắng

1. Nhanh hơn là đẹp: Người dùng muốn câu trả lời, không phải chuyển động
2. Di động quan trọng: Nhiều người dùng sử dụng điện thoại - tối ưu hóa cho thực tế đó
3. Sạch sẽ mở rộng: Ít giả định hơn giúp dễ dàng thích ứng
4. Ít lỗi hơn: Diện tích bề mặt nhỏ, ít lỗi hơn

Những gì tiếp theo

Tôi sẽ tiếp tục chú trọng vào trải nghiệm cốt lõi:

• Kết quả truy vấn đầu tiên nhanh hơn
• Cải thiện khả năng sử dụng trên di động
• Thêm ví dụ cho nhiều lĩnh vực
• Tiếp tục làm sạch và rõ ràng mã

Xây dựng cho các nhóm muốn triển khai tìm kiếm ngữ nghĩa ngay hôm nay - không phải một dự án khoa học vào ngày mai.