Gemini の API を使って YouTube動画の内容を解説してもらう（Node.js で google/genai を利用）

## はじめに

以下の記事で紹介されている Gemini の API の機能を試してみます。

●Gemini API の YouTube URL 機能 でアニメ実況を試す｜npaka
　https://note.com/npaka/n/n2f775bc950cd

上記の記事では、Python ＋ Colab という環境ですが、自分の場合は Node.js ＋ PC の組み合わせで試します。また、最終的には npm のパッケージ「[@google/genai](https://www.npmjs.com/package/@google/genai)」を使ったやり方にします。


## 情報を確認して試してみる

### 公式の情報で Node.js でのやり方を確認

まずは公式情報で、今回の内容を Node.js で行う方法を探します。

●Video understanding  |  Gemini API  |  Google AI for Developers
　https://ai.google.dev/gemini-api/docs/video-understanding#youtube

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/51d01e1f-e28c-4e41-bea4-5e6aa8db3467.png)

上記のページは、「Video understanding」の「Include a YouTube URL」の部分です。

#### 公式の注意書きとサンプルコード

以下の注意書きとコードサンプルが確認できます。

:::note warn
Preview: The YouTube URL feature is in preview and is available at no charge. Pricing and rate limits are likely to change.
:::

```javascript
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-pro" });
const result = await model.generateContent([
  "Please summarize the video in 3 sentences.",
  {
    fileData: {
      fileUri: "https://www.youtube.com/watch?v=9hE5-98ZeCg",
    },
  },
]);
console.log(result.response.text());
```

このサンプルでは「Deprecated」となっている [@google/generative-ai](https://www.npmjs.com/package/@google/generative-ai) が使われているようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/77ca260c-56e0-44ed-9b3a-40d850834362.png)


[@google/genai](https://www.npmjs.com/package/@google/genai) ではなく @google/generative-ai になっているのは少し気になりますが、まずはこのまま進めます。


### 内容を少し変える

コードの内容を少し変えて試してみます。

具体的には「環境変数の名前・モデル・プロンプト・YouTube の動画の URL」を変更しています。


```javascript
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
const model = genAI.getGenerativeModel({
  model: "gemini-2.5-flash-preview-04-17",
});

const result = await model.generateContent([
  "Please summarize the video in 3 sentences in Japanese.",
  {
    fileData: {
      fileUri: "https://www.youtube.com/watch?v=hC7aml8pTa0",
    },
  },
]);
console.log(result.response.text());
Ï
```

#### 読みこませた動画について

ちなみに、上で読みこませた動画は以下（過去に自分が作ったもの）になります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/hC7aml8pTa0?si=VHm8L5q2RwIKWxwR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

内容的は、以下の仕様の Webアプリを自分で試している様子です。

- 以下の JavaScript実装を組み合わせて「ブラウザ上で光学迷彩／透明マント的な見た目」を作る
   - MediaPipe による画像からの手の認識
   - p5.js を用いたカメラ画像・エフェクトの描画


#### モデル名について

利用したモデルの名前に関しては、過去の記事でも参照した以下を見て書いています。

●Gemini models  |  Gemini API  |  Google AI for Developers
　https://ai.google.dev/gemini-api/docs/models


### 下準備をして処理を実行してみる

#### 環境準備

下準備をします。

まずは、以下でパッケージをインストールします。

```zsh
npm i @google/generative-ai
```

あとは環境変数の設定です。

今回のコードで、APIキーを読みこむ環境変数の名前を「GEMINI_API_KEY」にしているので、この名前の環境変数に Gemini の APIキーをセットします。


#### 実行結果

あとは、処理を実行するだけです。
結果として、以下のテキストが得られました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6520fa5a-0e4e-4039-905e-662f75338caa.png)

> 【テキストにしたバージョン】：
この動画では、男性が薄い半透明な素材を使ったデモンストレーションを行っています。
彼はその素材をカメラの前にかざし、背景がどのように見えるかを示しています。
使用されている素材は様々な形状や大きさです。


「動画の見た目から分かる内容」という点では、合っているかと思います。


### 「@google/genai」で試す

やはり @google/genai でも試したいと思って、情報を探してみました。


#### 内容の書きかえ

Vertex AI の例ですが fileData・fileUri を使った例があったので、それを参考に内ようを作ってみました。

●ドキュメントの理解  |  Generative AI on Vertex AI  |  Google Cloud
　https://cloud.google.com/vertex-ai/generative-ai/docs/multimodal/document-understanding?hl=ja#gemini-send-multimodal-samples-pdf-nodejs


具体的には、以下のとおりです。

```javascript
import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });

const filePart = {
  fileData: {
    fileUri: "https://www.youtube.com/watch?v=hC7aml8pTa0",
  },
};
const textPart = {
  text: `
    Please summarize the video in 3 sentences in Japanese.`,
};

const response = await ai.models.generateContent({
  model: "gemini-2.5-flash-preview-04-17",
  contents: {
    role: "user",
    parts: [filePart, textPart],
  },
});

console.log(await response.text);
```


#### 下準備と処理の実行

パッケージのインストールと環境変数の設定を行って、処理を実行してみます。

まずはパッケージのインストールです。

```zsh
npm i @google/genai
```

あとは環境変数の設定で、先ほどと同様に「GEMINI_API_KEY」という名前の環境変数に Gemini の APIキーをセットします。

処理を実行した結果は以下で、内容を理解して記載した感じのテキストを得られました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6714d490-1e08-4761-9149-f7f2bc11b980.png)


#### 内容の書きかえ2

さらに、元の内容に近い書き方も試してみました。以下がコードと処理結果です。

```javascript
import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });

const response = await ai.models.generateContent({
  model: "gemini-2.5-flash-preview-04-17",
  contents: [
    "Please summarize the video in 3 sentences in Japanese.",
    {
      fileData: {
        fileUri: "https://www.youtube.com/watch?v=hC7aml8pTa0",
      },
    },
  ],
});

console.log(await response.text);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5b85301d-94c2-4097-a650-9490b9d17c53.png)

説明文は変わっていますが、問題ない結果が得られているかと思います。