Chrome の 組み込み AI Gemini Nano を試してみる

const canCreate = await window.ai.canCreateTextSession();
 
// canCreate は 以下のいずれかの値を取る
// - "readily"：モデルがダウンロードされており、利用可能
// - "after-download"：モデルがダウンロードされていないが、デバイスに能力があるのでダウンロードプロセスを実行後に利用可能
// - "no"：モデルがダウンロードされていないため、利用できない
if (canCreate === "no") {
  console.log("Gemini Nano は利用できません");
} else {
  const session = await window.ai.createTextSession();
 
  const result = await session.prompt("父の日に何をプレゼントしようかな？");
 
  console.log(result);
}

import { useState, useEffect } from "react";
import "./App.css";
 
// メッセージの型
// role: user はユーザーが入力したメッセージ、robot は AI が返したメッセージ
type Message = {
  role: "user" | "robot";
  content: string;
};
 
function App() {
  // チャットの履歴を保持しておく
  const [messages, setMessages] = useState<Message[]>([]);
  // input に入力された内容
  const [content, setContent] = useState<string>("");
  // AI が利用可能かどうか
  const [enableAi, setEnableAi] = useState<boolean>(false);
 
  useEffect(() => {
    // canCreate が "no" でない場合は AI が利用可能
    const checkAi = async () => {
      const canCreate = await window.ai.canCreateTextSession();
      setEnableAi(canCreate !== "no");
    };
    checkAi();
  }, []);
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (content.trim() === "") return;
    setContent("");
 
    // ユーザーのメッセージを追加
    setMessages((prev) => [...prev, { role: "user", content: content.trim() }]);
 
    // AI による回答を取得
    const session = await window.ai.createTextSession();
    // プロンプトに過去のメッセージの履歴を渡すことで、記憶を保持しているかのように振る舞わせる
    // session.promptStreaming はストリーミング形式で結果を取得する
    const response =
      session.promptStreaming(`以下のやり取りに続いて回答してください。
${messages.map((message) => `${message.role}: ${message.content}`).join("\n")}
user: ${content.trim()}
robot: `);
    setMessages((prev) => [...prev, { role: "robot", content: "..." }]);
    // for await を使って徐々に結果を表示
    for await (const chunk of response) {
      setMessages((prev) => [
        ...prev.slice(0, prev.length - 1),
        { role: "robot", content: chunk },
      ]);
    }
    // セッションを破棄
    session.destroy();
  };
 
  return (
    <div>
      <h1>Chatbot</h1>
 
      {enableAi ? (
        <>
          <div className="chat">
            {messages.map((message, index) => (
              <div key={index} className={`message ${message.role}`}>
                {message.content}
              </div>
            ))}
          </div>
 
          <form onSubmit={handleSubmit} className="form">
            <input
              type="text"
              value={content}
              onChange={(e) => setContent(e.target.value)}
              placeholder="Type a message..."
            />
            <button type="submit">Send</button>
          </form>
        </>
      ) : (
        <p>AI は利用できません</p>
      )}
    </div>
  );
}
 
export default App;