見出し画像

ChatGPTだけでHPを作りたい！（API埋め込み編）

ChatGPT部 Produced by NOB DATA

はじめに

こんにちは！ChatGPT部の原田です！前回、ChatGPTにアニメーションを作ってもらいました！今回は、何しよう、、

と考えること3秒！「HPにChatGPT埋め込みたいな、」

ということで今回はそんな事ができるのかを聞いていきます！

前回の記事はこちら！↓

では早速本編へ！


1. 聞いてみる

前回の続きからなので、プロンプトはこんな感じ、、
結果は、、、

できるみたい！
以下ChatGPTからの回答です！

必要なステップ

  1. OpenAI APIキーの取得

    • OpenAI APIにサインアップし、APIキーを取得します。APIキーは後ほどコード内で使用します。

  2. APIを呼び出すためのバックエンドを準備

    • フロントエンドから直接APIを呼び出すことはセキュリティ上推奨されないため、API呼び出しはバックエンドを通して行います。Node.js、Python (Flask/Django) などを使ってサーバーサイドでAPIを呼び出すのが一般的です。

  3. フロントエンドのセットアップ

    • フロントエンド側で、ユーザーが入力したテキストをバックエンドに送信し、APIを呼び出して結果を返す仕組みを作成します。

サンプルコード

1. Node.jsを使ったバックエンド
必要なパッケージのインストール

npm init -y
npm install express openai cors body-parser

server.js (バックエンドの例)

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const { Configuration, OpenAIApi } = require('openai');

// Expressアプリの設定
const app = express();
app.use(bodyParser.json());
app.use(cors());

// OpenAI APIの設定
const configuration = new Configuration({
    apiKey: 'YOUR_OPENAI_API_KEY' // ここにAPIキーを入れる
});
const openai = new OpenAIApi(configuration);

// ChatGPTエンドポイントの設定
app.post('/chat', async (req, res) => {
    const { message } = req.body;

    try {
        const response = await openai.createChatCompletion({
            model: "gpt-3.5-turbo",
            messages: [{ role: "user", content: message }],
        });
        res.json({ reply: response.data.choices[0].message.content });
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: 'ChatGPT API呼び出し中にエラーが発生しました' });
    }
});

// サーバー起動
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`サーバーがポート ${PORT} で起動しました`);
});

2. フロントエンドのセットアップ
次に、ユーザーがテキストを入力し、ChatGPTからの返答を受け取るインターフェースを作成します。
index.html (フロントエンドの例)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT Integration</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        #chatBox {
            width: 100%;
            height: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: scroll;
        }

        #userInput {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            font-size: 16px;
        }

        #sendButton {
            padding: 10px 20px;
            font-size: 16px;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<h1>ChatGPTと会話しよう！</h1>
<div id="chatBox"></div>

<input type="text" id="userInput" placeholder="質問を入力してください">
<button id="sendButton">送信</button>

<script>
    const chatBox = document.getElementById('chatBox');
    const userInput = document.getElementById('userInput');
    const sendButton = document.getElementById('sendButton');

    sendButton.addEventListener('click', async () => {
        const userMessage = userInput.value;
        if (!userMessage) return;

        chatBox.innerHTML += `<p><strong>あなた:</strong> ${userMessage}</p>`;
        userInput.value = '';

        const response = await fetch('http://localhost:5000/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message: userMessage })
        });

        const data = await response.json();
        chatBox.innerHTML += `<p><strong>ChatGPT:</strong> ${data.reply}</p>`;
        chatBox.scrollTop = chatBox.scrollHeight;
    });
</script>

</body>
</html>

説明

  • バックエンド (server.js)

    • expressを使用してサーバーをセットアップし、/chatエンドポイントでOpenAI APIを呼び出しています。

    • messageにはフロントエンドから送信されたユーザーの入力を受け取り、ChatGPTに投げて返答を受け取ります。

  • フロントエンド (index.html)

    • ユーザーがテキストを入力し、送信ボタンをクリックすると、バックエンドにリクエストが送信され、ChatGPTの返答が表示されます。

実行方法

Node.jsサーバーを起動します:

node server.js

ブラウザでindex.htmlを開いて、ChatGPTと対話を行います。

注意事項

  • フロントエンドから直接APIキーを使わないようにし、必ずバックエンドを通してAPIを呼び出すようにしてください。セキュリティリスクを軽減するためです。

  • APIキーは絶対に公開しないように注意してください。

これでChatGPTをWebサイトに統合することができます。他に質問があれば教えてください！

細かな解説、やり方まですぐ出してくれました！
ちょっと突っ込みます！

2. Node.jsを使ったバックエンド？？

Node.jsを使ったバックエンド？？それは一体なんぞ？？
回答は、、、

以下ChatGPTからの回答です！

ステップ1: Node.jsをインストール

まず、Node.jsをインストールする必要があります。Node.jsは、JavaScriptをサーバーサイドで実行できるプラットフォームです。
1. Node.jsのインストール

  1. Node.js公式サイトにアクセスします。

  2. 自分のOS（Windows, macOS, Linux）に適したバージョンのNode.jsをダウンロードします。LTS（長期サポート版）を選ぶことをお勧めします。

  3. インストーラを実行し、画面の指示に従ってインストールします。

2. インストール確認
Node.jsのインストールが完了したら、次のコマンドをターミナルまたはコマンドプロンプトで実行して、インストールが成功したか確認します。

node -v

バージョン番号が表示されれば、Node.jsのインストールは成功です。

npm -v

これにより、npm（Node.jsのパッケージ管理システム）もインストールされたか確認できます。npmは、必要なパッケージをインストールするために使います。

ステップ2: プロジェクトディレクトリの作成

次に、Node.jsプロジェクトを作成するディレクトリを作ります。
1. プロジェクトディレクトリを作成
まず、プロジェクト用の新しいディレクトリを作成し、そのディレクトリに移動します。

mkdir my-chatgpt-server cd my-chatgpt-server

2. npmプロジェクトの初期化
次に、npmを使ってNode.jsプロジェクトを初期化します。これにより、package.jsonというプロジェクトの設定ファイルが作成されます。

npm init -y

-yオプションをつけると、デフォルト設定でプロジェクトを初期化します。これでプロジェクトのセットアップが完了しました。

ステップ3: 必要なパッケージのインストール

ChatGPTを統合するためには、いくつかのパッケージが必要です。
1. Express, OpenAI, CORS, Body-parserのインストール
以下のコマンドを使って、必要なパッケージをインストールします。

npm install express openai cors body-parser

  • express: 軽量のWebサーバーフレームワークで、サーバーを作成するために使用します。

  • openai: OpenAIのAPIを使用するための公式パッケージ。

  • cors: クロスオリジンリソース共有（CORS）を有効にするためのミドルウェア。

  • body-parser: リクエストのボディ部分を解析するためのミドルウェアです。

ステップ4: server.jsファイルを作成

プロジェクトディレクトリの中に server.js というファイルを作成します。このファイルが、Node.jsサーバーとして動作するメインのスクリプトです。
1. server.jsの作成
テキストエディタを使って、以下の内容を server.js に記述します。

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const { Configuration, OpenAIApi } = require('openai');

// Expressアプリの設定
const app = express();
app.use(bodyParser.json());
app.use(cors());

// OpenAI APIの設定
const configuration = new Configuration({
    apiKey: 'YOUR_OPENAI_API_KEY' // ここにAPIキーを入れる
});
const openai = new OpenAIApi(configuration);

// ChatGPTエンドポイントの設定
app.post('/chat', async (req, res) => {
    const { message } = req.body;

    try {
        const response = await openai.createChatCompletion({
            model: "gpt-3.5-turbo",
            messages: [{ role: "user", content: message }],
        });
        res.json({ reply: response.data.choices[0].message.content });
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: 'ChatGPT API呼び出し中にエラーが発生しました' });
    }
});

// サーバー起動
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`サーバーがポート ${PORT} で起動しました`);
});

このコードは、Express.jsを使ってWebサーバーを起動し、/chatエンドポイントでChatGPTのAPI呼び出しを処理するサンプルです。
2. OpenAI APIキーを取得
上記のコードで、YOUR_OPENAI_API_KEY と書かれた部分に、OpenAIから取得したAPIキーを入力します。APIキーはOpenAIのダッシュボードで発行できます。

ステップ5: サーバーの起動

すべての準備が整ったら、次のコマンドを使ってサーバーを起動します。

node server.js

このコマンドを実行すると、以下のようなメッセージが表示され、サーバーが起動します。

サーバーがポート 5000 で起動しました

これで、バックエンドのAPIがローカル環境で動作し、http://localhost:5000/chat に対してリクエストを送ることができるようになります。

ステップ6: フロントエンドと連携

Node.jsサーバーが起動したら、フロントエンド（HTMLやJavaScript）からリクエストを送信してChatGPTのAPIを呼び出します。フロントエンド部分は先ほど説明した通りです。
以下のindex.htmlを開き、チャットボックスを通してChatGPTと対話します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT Integration</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        #chatBox {
            width: 100%;
            height: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: scroll;
        }

        #userInput {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            font-size: 16px;
        }

        #sendButton {
            padding: 10px 20px;
            font-size: 16px;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<h1>ChatGPTと会話しよう！</h1>
<div id="chatBox"></div>

<input type="text" id="userInput" placeholder="質問を入力してください">
<button id="sendButton">送信</button>

<script>
    const chatBox = document.getElementById('chatBox');
    const userInput = document.getElementById('userInput');
    const sendButton = document.getElementById('sendButton');

    sendButton.addEventListener('click', async () => {
        const userMessage = userInput.value;
        if (!userMessage) return;

        chatBox.innerHTML += `<p><strong>あなた:</strong> ${userMessage}</p>`;
        userInput.value = '';

        const response = await fetch('http://localhost:5000/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message: userMessage })
        });

        const data = await response.json();
        chatBox.innerHTML += `<p><strong>ChatGPT:</strong> ${data.reply}</p>`;
        chatBox.scrollTop = chatBox.scrollHeight;
    });
</script>

</body>
</html>

まとめ

  1. Node.jsと必要なパッケージをインストール

  2. server.jsを使ってバックエンドのAPIをセットアップ

  3. フロントエンドからバックエンドにリクエストを送信し、ChatGPTの応答を表示

この手順で、Node.js環境でChatGPTをWebサイトに統合することができます。もし他に質問があれば教えてください！

Node.js というものを使うそうです。
難しそうですがやる価値はありそうですね！実践は次回！

まとめ

今回はAPIを使って、ChatGPTをHPに埋め込む方法をChatGPTに聞いていきました！
Node.jsというのを用意する必要があるみたいなので、次回はそこからスタートします！今回は以上です！(^^)

いいなと思ったら応援しよう！