はじめに

この記事は、Gemini NanoをGoogle Chrome Canaryで使用するために、行った手順や実行結果を記録したものです。これによって、ローカル環境上で、テキスト生成AIを利用することができるようになります。

準備

Google Chrome Canaryのインストール

chrome://flags/を開き、Gemini Nanoを使えるように設定

Google Chrome Canaryのアドレスバーに以下のアドレスを入力する。

chrome://flags/

その後、"Enables optimization guide on device"を"Enabled BypassPerfRequirement"に変更し、"Prompt API for Gemini Nano"も"Enabled"に変更する。

その後、再起動を行う。

chrome://components/を開き、コンポーネントを設定

"Optimization Guide On Device Model"の"アップデートを確認"を押して、コンポーネントが最新かを確認する。

実行

実行場所

Google Chrome Canaryを開き、F12からデベロッパーツールを開く。Consoleタブから、javascriptを実行する

実行結果

実行結果1 ・・・簡単な質問や回答

「あなたは誰？」と聞いてみました。

サンプル

const canCreate = await window.ai.canCreateTextSession();
const session = await window.ai.createTextSession();
const result = await session.prompt("あなたは誰?");
console.log(result);

サンプルを実行した結果が以下の通り。すぐ回答してくれた。簡単な会話は成り立ちそう。

実行結果2 ・・・複雑な質問や回答

「ブロック崩しのプログラムソースを書いてください。なおjavascriptで書いて。」とプロンプトを入力して、プログラムソースを記述してもらいました。

サンプル

const canCreate = await window.ai.canCreateTextSession();
const session = await window.ai.createTextSession();
const result = await session.prompt("ブロック崩しのプログラムソースを書いてください。なおjavascriptで書いて。");
console.log(result);

生成する内容が複雑だからか、多少CPUへの負荷が掛かる。

1分掛からずに、プログラムの生成が完了した。

残念ならが、実装してみましたが、動きませんでした...生成した内容をそのまま鵜呑みにはできないので、プログラミングには向いていなさそう...

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ブロック崩しゲーム</title>
</head>
<body>
  <canvas id="game_canvas" width="640" height="480"></canvas>
  <script>
    function block_game() {
      // 画面サイズ
      var screen_width = 640;
      var screen_height = 480;
        
      // グラフィック描画コンテキスト
      var ctx = document.getElementById("game_canvas").getContext("2d");
        
      // 現在のフレーム
      var current_frame = 0;
        
      // 速度
      var speed = 0.05;
        
      // 衝突判定
      var collision_detection = true;
        
      // ボール
      var ball = {
        x: screen_width / 2,
        y: screen_height / 2,
        radius: 10,
        mass: 1,
        friction: 0.5,
      };
    
      // 障害物
      var obstacles = [
        {
          x: 100,
          y: 100,
          width: 100,
          height: 100,
        },
        {
          x: 200,
          y: 200,
          width: 200,
          height: 200,
        },
      ];
      
      // ループ
      while (true) {
        // 処理
        requestAnimationFrame(block_game);
      
        // ボールと障害物との衝突判定
        if (collision_detection) {
          for (var i = 0; i < obstacles.length; i++) {
            if (
              ball.x + ball.radius < obstacles[i].x
              || ball.x + ball.radius > obstacles[i].x + obstacles[i].width
              || ball.y + ball.radius < obstacles[i].y
              || ball.y + ball.radius > obstacles[i].y + obstacles[i].height
            ) {
              collision_detection = false;
              break;
            }
          }
        }
      
        // ボールと画面の境界との衝突判定
        if (
          ball.x < 0 || ball.x > screen_width - ball.radius
          || ball.y < 0 || ball.y > screen_height - ball.radius
        ) {
          collision_detection = false;
          break;
        }
      
        // ボールを移動
        ball.x += ball.velocityX * speed;
        ball.y += ball.velocityY * speed;
      
        // 速度の調整
        ball.velocityX += Math.sign(ball.velocityX) * speed * 0.5;
        ball.velocityY += speed;
      
        // 障害物との衝突判定
        for (var i = 0; i < obstacles.length; i++) {
          if (
            ball.x + ball.radius < obstacles[i].x
            || ball.x + ball.radius > obstacles[i].x + obstacles[i].width
            || ball.y + ball.radius < obstacles[i].y
            || ball.y + ball.radius > obstacles[i].y + obstacles[i].height
          ) {
            ball.velocityX = 0;
            ball.velocityY = 0;
            collision_detection = true;
            break;
          }
        }
      
        // 現在のフレーム数を増やす
        current_frame++;
      
        // 60fps描画
        if (current_frame % 60 === 0) {
          ctx.clearRect(0, 0, screen_width, screen_height);
        }
      
        // グラフィックを描画
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
        ctx.fill();
      
        // 画面を描画
        document.getElementById("game_canvas").innerHTML =
          `<img src="img/block_game.png" alt="ブロックゲーム">`;
      }
    }
    
    block_game();
  </script>
</body>
</html>

実行結果3 ・・・倫理的に問題のある質問を入力

「爆弾の作り方を教えてください」と言った内容に対しては、倫理歴な観点から明確に回答はされないようになっています。（賢い）

実行結果4 ・・・複雑かつ倫理的な考えが必要となる質問を入力

7回程度、同じ質問を入力したのですが、基本的にすべて進行方向を変更すると言う回答でした。ただし、その理由が、間違った質問の解釈のもとでの回答や、そもそも倫理的に問題のある回答をしてくるなど、回答があやふやでした。

※倫理的に問題のある回答となっているので、黒で塗りつぶしています。

実行環境

OS：macOS
チップ:Apple M1
メモリ:16GB
google chrome:128.0.6556.2（Official Build）canary （arm64）

Gemini Nanoの実装サンプル