Giải quyết sự nhàm chán khi chờ đợi LLM: Cho người dùng chơi một trò chơi ngay trên màn hình tải

Chờ đợi phản hồi từ các Mô hình Ngôn ngữ Lớn (LLM) thường là một trải nghiệm nhàm chán với khoảng lặng đầy khó chịu. Một nhà phát triển đã tạo ra giải pháp thú vị cho vấn đề này: react-waiting-game.

Đây là một thư viện React cung cấp các mini-game arcade "nút đơn" (one-button) để người dùng có thể giải trí trong khi ứng dụng đang xử lý các tác vụ nặng như gọi API LLM, build code, hoặc tải lên tệp tin.

Các tính năng nổi bật

Thư viện này được thiết kế siêu nhẹ và tối giản:

• Đồ họa 1-bit: Mọi game đều sử dụng phong cách pixel art đơn sắc (monocolor) trên một canvas duy nhất.
• Không phụ thuộc: Zero runtime dependencies, giúp giảm thiểu kích thước bundle.
• Điều khiển đơn giản: Chỉ dùng một nút bấm (phím Space, chuột, hoặc cảm ứng) cho mọi hành động.
• Tương thích cao: Hỗ trợ SSR (Server-Side Rendering), tự động tạm dừng khi tab ẩn, và có thể tùy chỉnh màu sắc.
• Lưu trữ dữ liệu: Hỗ trợ lưu điểm số cao (high score) và thành tựu (achievements) vào localStorage.

Bộ sưu tập 5 mini-game

react-waiting-game hiện tại bao gồm 5 tựa game khác nhau, chia sẻ cùng một hệ thống combo, power-up và bảng thành tựu:

1. Jellyfish Drift: Giữ nút để bơi lên, thả ra để chìm xuống. Tránh các rạn san hô và măng đá.
2. Pixel Runner: Nhấn để nhảy, giữ để nhảy cao hơn. Nhảy qua xương rồng và né chim.
3. Gravity Flip: Nhấn để đảo ngược trọng lực. Di chuyển giữa sàn và trần nhà để né gai.
4. Invaders: Tháp pháo tự động bắn. Nhấn để đổi làn đường; đứng ở làn của người ngoài hành tinh để bắn chúng, và né ra khi chúng đến gần.
5. Rhythm Tap: Một game nhịp điệu nơi các nốt nhạc trôi vào vùng đánh dấu. Nhấn đúng nhịp cho nốt ngắn và giữ cho nốt dài.

Cách sử dụng với React

Việc tích hợp vào ứng dụng rất đơn giản. Bạn chỉ cần cài đặt qua npm:

npm install react-waiting-game

Sau đó, bạn có thể sử dụng component WaitingArcade trong màn hình chờ (loading screen) của mình. Ví dụ, khi chờ phản hồi từ chatbot AI:

import { useState } from 'react';
import { WaitingArcade } from 'react-waiting-game';

function Chat() {
  const [loading, setLoading] = useState(false);

  async function ask() {
    setLoading(true);
    await fetch('/api/chat', { method: 'POST', body: '...' });
    setLoading(false);
  }

  return (
    <div>
      <button onClick={ask}>Hỏi</button>
      {loading && (
        <WaitingArcade game="jellyfish" width={600} height={150} />
      )}
    </div>
  );
}

Tùy biến và mở rộng

Thư viện cho phép tùy biến sâu rộng thông qua các props như game (chọn game), skin (chọn giao diện nhân vật), color (màu sắc), và các callback event như onScoreChange, onGameOver.

Đây là một giải pháp sáng tạo để biến khoảng thời gian "chết" (dead time) của người dùng thành một trải nghiệm tương tác thú vị, đặc biệt hữu ích cho các ứng dụng AI hiện nay.