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

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

バックエンド

Django REST Frameworkを使用。

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

フロントエンド

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

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

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

現状のデモ画面

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

このあたりはバックエンド側で制御しているのだけど、直近４回の会話を拾って投げるようにしている。

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になくて、もやっとしている検索機能を付けたりもした。

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

あとChatGPTなどでも実装されている、リアルタイムのマークダウンレンダリングも対応してみた。

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

バックエンドでPythonを使ってるので、URLを受け取って、WEBスクレイピングして、ニュース記事を要約して返す、などの動きも比較的簡単に実装出来そう。

夢が広がってきた。

認証周りについて

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

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

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

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

https://github.com/geekyshow1/djangonuxtsessionauth

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

目指すところ

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

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

Github

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

バックエンド

https://github.com/qlitre/chatgpt-backend

フロントエンド

https://github.com/qlitre/chatgpt-frontend

おわりに

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