Zenn
👏

ChatGPTのAPIを利用してChatアプリを作ろう③　14日目

2024/11/17に公開
技術ブログ
生成 AI
chatgptapi
tech

ChatGPTのAPIを利用してChatアプリを作ろう(Chat画面の構築)

はじめに

いよいよ楽しい実装部分の紹介です。この記事では、ChatGPT APIを活用したチャット画面をASP.NET Core MVCを使って構築する方法を解説します。チャット画面では、以下の基本機能を実現します：

  • ユーザーが入力したテキストを表示する。
  • ChatGPT APIを呼び出して、その応答を表示する。

これにより、シンプルかつ動的な会話機能を持つWebアプリケーションを構築できます。

ステップ1: MVC構造の確認と基本設定

1. MVCとは？

ASP.NET Core MVCは、Model-View-Controllerアーキテクチャを採用しています。以下が基本的な役割です：

  • Model: アプリケーションのデータ構造やビジネスロジックを定義します。
  • View: ユーザーインターフェース（HTML、CSS）を構築します。
  • Controller: ユーザーのリクエストを処理し、適切なModelとViewを呼び出します。

2. 必要なプロジェクト構成

以下のような構成を準備します：

OnecaratWebApp/
├── Controllers/
│   ├── ChatController.cs
├── Models/
│   ├── ChatMessage.cs
├── Views/
│   ├── Chat/
│       ├── Index.cshtml
├── wwwroot/
│   ├── css/
│   ├── js/
├── Program.cs
├── appsettings.json

ステップ2: モデルの作成

1. ChatMessageモデル

ユーザーの入力とChatGPT APIの応答を管理するため、ChatMessageモデルを作成します。

ファイル: Models/ChatMessage.cs

namespace OnecaratWebApp.Models
{
    public class ChatMessage
    {
        public string? UserMessage { get; set; }
        public string? BotResponse { get; set; }
    }
}

ステップ3: コントローラーの作成

1. ChatController

チャットのロジックを処理するためのコントローラーを作成します。

ファイル: Controllers/ChatController.cs

using Microsoft.AspNetCore.Mvc;
using OnecaratWebApp.Models;

namespace OnecaratWebApp.Controllers
{
    public class ChatController : Controller
    {
        [HttpGet]
        public IActionResult Index()
        {
            return View(new ChatMessage());
        }

        [HttpPost]
        public IActionResult Index(ChatMessage model)
        {
            // TODO: ChatGPT APIを呼び出して応答を取得
            model.BotResponse = $"Bot: {model.UserMessage}（APIの応答がここに表示されます）";
            return View(model);
        }
    }
}

ステップ4: ビューの作成

1. チャット画面のUI

ファイル: Views/Chat/Index.cshtml

@model OnecaratWebApp.Models.ChatMessage

<!DOCTYPE html>
<html>
<head>
    <title>Chat with ChatGPT</title>
    <link rel="stylesheet" href="~/wwwroot/css/style.css" />
</head>
<body>
    <div class="container">
        <h1>Chat with ChatGPT</h1>
        <form method="post">
            <div>
                <label for="userMessage">Your Message:</label>
                <textarea id="userMessage" name="UserMessage" rows="4" cols="50">@Model.UserMessage</textarea>
            </div>
            <button type="submit">Send</button>
        </form>

        <div class="response">
            <h3>Response:</h3>
            <p>@Model.BotResponse</p>
        </div>
    </div>
</body>
</html>

ステップ5: CSSの追加

1. 基本的なスタイル

ファイル: wwwroot/css/style.css

.container {
    width: 50%;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
}

textarea {
    width: 100%;
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.response {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #ffffff;
}

ステップ6: アプリケーションの実行

  1. dotnet watch run を使用してアプリケーションを起動します。
    dotnet watch run
  2. ブラウザでhttp://localhost:XXXX/Chatにアクセスし、チャット画面を確認します。
    ※XXXXは起動したときのページからポートから書き換えてください。

まとめ

この記事では、ASP.NET Core MVCを使用して、シンプルなChatGPTチャット画面を構築する手順を解説しました。この画面は、今後ChatGPT APIとの連携を通じて高度な機能を実現する土台となります。次回の記事では、ChatGPT APIを呼び出して実際の応答を表示する方法を詳しく説明します。

Discussion