AI 驱动的
前端新范式

"use client";
import { useChat } from "@ai-sdk/react"; // ← 一行搞定所有状态

export function ChatUI() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: "/api/chat",
    maxSteps: 5, // ← 支持多轮工具调用（tool calling）
    onFinish: (message) => {
      console.log("Token usage:", message.usage); // ← 追踪 token 消耗
    },
  });

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto">
      {/* 消息列表 */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((m) => (
          <div key={m.id} className={m.role === "user" ? "text-right" : "text-left"}>
            <span className="inline-block px-4 py-2 rounded-2xl max-w-[80%]
              bg-white border-2 border-[var(--foreground)]
              shadow-[4px_4px_0px_0px_var(--foreground)]">
              {m.content} {/* ← 流式更新：每个 token 到达时自动 re-render */}
            </span>
          </div>
        ))}
      </div>

      {/* 输入框 */}
      <form onSubmit={handleSubmit} className="p-4 border-t-2 border-[var(--foreground)]">
        <div className="flex gap-2">
          <input
            value={input}
            onChange={handleInputChange}
            placeholder="问点什么..."
            className="flex-1 px-4 py-3 rounded-xl border-2 border-[var(--foreground)]
              focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
          />
          <button
            type="submit"
            disabled={isLoading}
            className="px-6 py-3 bg-[var(--accent)] text-white font-bold rounded-xl
              border-2 border-[var(--foreground)] shadow-[4px_4px_0px_0px_var(--foreground)]
              hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_var(--foreground)]
              active:translate-y-[4px] active:shadow-none transition-all"
          >
            {isLoading ? "思考中..." : "发送"}
          </button>
        </div>
      </form>
    </div>
  );
}

"use client";
import { useState, useCallback } from "react";
import { initEngine, streamChat } from "@/lib/webllm-engine";

export function LocalAI() {
  const [loading, setLoading] = useState(false);
  const [loadProgress, setLoadProgress] = useState(0);
  const [response, setResponse] = useState("");
  const [isStreaming, setIsStreaming] = useState(false);

  // 1. 初始化引擎（只需一次）
  const handleInit = useCallback(async () => {
    setLoading(true);
    await initEngine((progress) => {
      setLoadProgress(Math.round(progress.progress * 100)); // ← "Loading model: 45%"
    });
    setLoading(false);
  }, []);

  // 2. 发起推理
  const handleGenerate = useCallback(async (prompt: string) => {
    setResponse("");
    setIsStreaming(true);

    try {
      for await (const token of streamChat(prompt)) {
        setResponse((prev) => prev + token); // ← 逐字追加，实现打字机效果
      }
    } finally {
      setIsStreaming(false);
    }
  }, []);

  return (
    <div className="p-6">
      {!engine && (
        <button onClick={handleInit} disabled={loading}>
          {loading ? `加载中 ${loadProgress}%...` : "🧠 初始化本地模型"}
        </button>
      )}

      {loading && (
        <div className="mt-4 h-3 bg-gray-200 rounded-full overflow-hidden border-2 border-[var(--foreground)]">
          <div
            className="h-full bg-[var(--accent)] transition-all duration-300"
            style={{ width: `${loadProgress}%` }}
          />
        </div>
      )}

      <button onClick={() => handleGenerate("用一句话解释 WebGPU")}>
        ⚡ 本地推理
      </button>

      <p className="mt-4 whitespace-pre-wrap">{response}</p>
    </div>
  );
}