【GPT Crawler】URLのみでGPTsを作成！

# 🌐 GPT Crawler: Create GPTs with Just a URL! : URLのみでGPTを作成！
こんにちは、皆さん！今回はGPT Crawlerを使ってURLのみでGPTsを作成する方法を紹介します。

リポジトリのリンクは[こちら](https://github.com/builderio/gpt-crawler)です。

https://github.com/builderio/gpt-crawler

私が改変したものは[こちら](https://github.com/yuyuyu2118/gpt-crawler-y)です。アップデートしたら記事も更新します。

https://github.com/yuyuyu2118/gpt-crawler-y

## 🎓 はじめに: Introduction
GPTsって革命的なんですけど、GPT Plusに登録していてもファイルの数が10個までと制限されていたり、まだまだ使いづらい部分がありますよね。

**少ないファイル数で効率的に狙った質問を返してもらうには、データを加工した上でアップロードする必要があります。**

この**GPT Crawlerでは、指定したURLの情報をクローリングして、GPTsにアップロードするための加工されたデータを作成します。**

オープンソースでMITライセンスなので、自由に改変できます。
なので、今回私がより使いやすくするために作成したものも、同時に紹介します。

早速使ってみましょう！

:::note warn
この機能にアクセスするには有料のChatGPTプランが必要な場合があります。
:::

## 🛠️ How to Use: 使い方

:::note warn
Node.js >= 16がインストールされていることを確認してください。
:::

まずはリポジトリをクローンします。
公式：
```bash
git clone https://github.com/builderio/gpt-crawler
```
私の改変版：
```bash
git clone https://github.com/yuyuyu2118/gpt-crawler-y
```

次に、プロジェクトのディレクトリに移動します。
```bash
cd gpt-crawler
```
改変版の場合は
```bash
cd gpt-crawler-y
```

次に、下記のコマンドで必要なパッケージをインストールします。
```bash
npm i
```
もしくは
```bash
npm install
```

:::note info
npm installとは、package.jsonに記載されているパッケージをインストールするコマンドです。
:::

また、プロジェクト内のconfig.tsを開くと、下記のようになっています。
```ts
import { Config } from "./src/config";

export const defaultConfig: Config = {
  url: "https://www.builder.io/c/docs/developers",
  match: "https://www.builder.io/c/docs/**",
  maxPagesToCrawl: 50,
  outputFileName: "output.json",
};
```
上記の内容は必須ですが、他の項目も設定できます。
各項目について、下記に説明します。
```ts
type Config = {
  // クロールを開始するURL
  url: string;
  // このパターンに一致するリンクのみをクロール対象とする
  match: string | string[];
  // このセレクタで指定された要素からインナーテキストを取得する
  selector: string;
  // 最大でこの数のページをクロールする
  maxPagesToCrawl: number;
  // クロール結果を保存するファイル名
  outputFileName: string;
  // 必要に応じて設定されるクッキー
  cookie?: { name: string; value: string };
  // 各ページ訪問時に実行されるオプショナルな関数
  onVisitPage?: (options: {
    page: Page;
    pushData: (data: any) => Promise<void>;
    visitPageWaitTime?: number;
  }) => Promise<void>;
  // セレクタが表示されるまで待機するオプショナルなタイムアウト
  waitForSelectorTimeout?: number;
};
```

私の改変版では、11/22現在、下記のような項目を追加しています。
```ts
type Config = {
  // 省略

  // 使用するオプショナルなユーザーエージェント
  userAgent?: string;
  // 各ページの読み込み間のオプショナルな待ち時間
  waitTime?: number;
};
```

:::note info
userAgentはデフォルトでは、自分のAgentが使用されます。
waitTimeを設定することで、アクセスを制限できます。
:::

実際の設定では、下記のように書きます。
```ts
import { Config } from "./src/config";

export const defaultConfig: Config = {
  url: "https://www.builder.io/c/docs/developers",
  match: "https://www.builder.io/c/docs/**",
  maxPagesToCrawl: 50,
  outputFileName: "output.json",
};
```
改変版では、デフォルトでこのようになっています。
```ts
import { Config } from "./src/config";

export const defaultConfig: Config = {
  url: "http://www.nikkei.com/",
  match: "http://www.nikkei.com/**",
  maxPagesToCrawl: 50,
  outputFileName: "output.json",
  // ここから下は任意
  waitTime: 1000,
  onVisitPage: async ({visitPageWaitTime }) => {
    // ここでのカスタム処理を記述
    await new Promise(resolve => setTimeout(resolve, visitPageWaitTime ?? 1000));
  },
  // userAgentを設定するなら、下記のように記述
  // userAgent: "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
};
```

これで事前準備は完了です。

## ▶️ How to Run: 実行方法

事前準備が完了したら、アプリケーションを起動します。以下のコマンドは `start:dev` スクリプトを呼び出し、`build` スクリプトを実行してTypeScriptのコンパイルを行った後、開発者モードでアプリケーションを起動します。
```bash
npm start
```
改変後の場合は、上記のコマンドか下記のコマンドで起動します。
```bash
npm run start:cross-env
```

:::note info
改変後であれば、cross-envにより、powershell等でも起動できます。
:::

起動してしばらく待つと、output.jsonにデータが出力されます。
もう一回実行すると、output.jsonが上書きされますのでご注意ください。

## 📊 Reviewing the Output Data: 出力されたデータの確認
こんな感じで出力されていればOK!
```ts
[
  {
    "title": title,
    "url": url,
    "html": html,
  },
    {
    "title": title,
    "url": url,
    "html": html,
  }
]
```

## ⬆️ Uploading to GPTs: GPTへのアップロード
出力されたデータをGPTsにアップロードします。

1. [https://chat.openai.com/](https://chat.openai.com/) にアクセスしてログインします。
2. 左側のメニューから「Explore」を選択します。
3. 真ん中付近の「Create」ボタンをクリックします。
![スクリーンショット 2023-11-22 172614.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/3e0e51e0-2ab6-1df3-646b-89d4e850b033.png)

4. 「Configure」タブを選択します。
![スクリーンショット 2023-11-22 173403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/16c16dfe-b4ee-4915-b12c-9b8acbe8798a.png)

5. 「Knowledge」セクションにある「Upload files」ボタンから`output.json`をアップロードします。
![スクリーンショット 2023-11-22 173420.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/8bef414e-2ced-ed49-1122-2aa646993a66.png)

6. 必要に応じて、「Capabilities」セクションで「Web search」の設定をオフにすることもできます。
![スクリーンショット 2023-11-22 173441.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/b58dbf3f-7b77-7cb7-936e-c6dcdcc21849.png)

この時点で以下のような質問をすると、回答が返ってきます。
![スクリーンショット 2023-11-22 174309.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/af72b252-b73e-2dbe-6d61-bbbaf7ecb5e5.png)
ちょっとoutput.jsonにアクセスするようになっていないので、質問を変えてみます。
![スクリーンショット 2023-11-22 174301.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/f4e6354f-31f0-5a54-96ac-edef8c7424e4.png)

以上で、アップロードが完了し、カスタムGPTを使って質問に答えられるようになります。さらに、「Create」タブから自然言語で追加設定を行い、`output.json`から情報を参照するように構成することも可能です。

## 📝 Summary: まとめ
改変前のリポジトリも、改変後のリポジトリもcloneしてURLを書き換えるだけで簡単に活用することが可能です。英語に不慣れな方のために、日本語で翻訳されたREADMEファイルに差し替えています。
また、リポジトリのフォーク元は[こちら](https://github.com/builderio/gpt-crawler)になります！！

Builder.io 様、「GPT Crawler」プロジェクトを開発し、オープンソースとして公開していただき、改めて感謝申し上げます。