# GPT APIを使ったWEBシステムをDjango+Nuxtで作ってる

**公開日**: 2023-10-17T00:11:25+09:00Z
**カテゴリー**: Diary
**タグ**: プログラミング

---

さいきんGPTのAPIを使ったWEBシステムを作っている。

特に斬新なアイデアがあるわけではなく、まずはChatGPTのようなチャットアプリから始めた。

## バックエンド

Django REST Frameworkを使用。

よくよく考えると、自分はサーバーサイドのフレームワークはDjangoしか触ったことがないのだった。というわけで必然的にそうなった。

## フロントエンド

Nuxt.jsを採用。バージョン３。

Next.jsとどちらにするか悩んだが、Nuxtの方が慣れているので、こちらを採用。

CSSフレームワークはVuetifyを使用した。

## 現状のデモ画面

とりあえず、履歴を保持した状態でチャットができる。

![](https://images.microcms-assets.io/assets/c91d91814d4c435aac6eccfc4f87a846/83fc36ce326345229f4cd662db9f41bf/beatles.gif)
このあたりはバックエンド側で制御しているのだけど、直近４回の会話を拾って投げるようにしている。

def build_history(conversation_id: int, prompt: str):
    """
    履歴を構築する
    とりあえず直近四回の会話履歴＋新しいprompt
    """
    queryset = Message.objects.filter(conversation__id=conversation_id)
    queryset = queryset.order_by('-created_at')[:4]
    ret = []
    for query in reversed(queryset):
        role = 'user'
        if query.is_bot:
            role = 'assistant'
        ret.append({'role': role, 'content': query.message})
    ret.append({'role': 'user', 'content': prompt})
    return ret
あと本家のChatGPTになくて、もやっとしている検索機能を付けたりもした。

自分仕様でカスタマイズできる点が、楽しい。

![](https://images.microcms-assets.io/assets/c91d91814d4c435aac6eccfc4f87a846/47eb7df684054729835e8d3e553503e2/kensaku.gif)
あとChatGPTなどでも実装されている、リアルタイムのマークダウンレンダリングも対応してみた。

これがかっこよくてお気に入り。

![](https://images.microcms-assets.io/assets/c91d91814d4c435aac6eccfc4f87a846/f24863ca0f6f41b78eac95f6e32d08be/markdown.gif)
バックエンドでPythonを使ってるので、URLを受け取って、WEBスクレイピングして、ニュース記事を要約して返す、などの動きも比較的簡単に実装出来そう。

夢が広がってきた。

## 認証周りについて

そうえいばDjangoとNuxtの認証周りについては何も知らなかった。

今回の開発では全面的にChatGPTを活用しているものの、残念ながらNuxt３は新しいフレームワークなので、まだ学習がされていない。

そのため、ネットで情報を漁ったところ、日本語でのドキュメントはなかったものの、まさにそれっぽい内容のYouTube動画を見つけた。

こちらで紹介されているリポジトリを全面的に参考にしたところ、比較的よく動いている。

[https://github.com/geekyshow1/djangonuxtsessionauth](https://github.com/geekyshow1/djangonuxtsessionauth)

とはいえ、まだ認証周りににバグっぽい挙動（セッション切れが異様に早い、とか）がある。調査は必要。

## 目指すところ

さくっと、社内ネットワークなどのクローズドな環境で動かして試せる、というくらいな出来を目指したい。

デプロイをどうするかは未定。

## Github

ソースコードも公開しています。

### バックエンド

[https://github.com/qlitre/chatgpt-backend](https://github.com/qlitre/chatgpt-backend)

### フロントエンド

[https://github.com/qlitre/chatgpt-frontend](https://github.com/qlitre/chatgpt-frontend)

## おわりに

久しぶりにWEBシステムみたいなの作ってる。楽しい。ではでは。