ChatGPTめっちゃ痩せたいです #React

初めまして。HRBrainでソフトウェアエンジニアをしているビクトルと申します。

最近ChatGPTが人気になって、私はChatGPTのAPIを試して遊びたいと思っていました。私を知ってる人は筋トレマニアという印象を持っているのでChatGPTに栄養指導をしてもらおうと思っています。

最初にどんなことを考えましょ

ChatGPTのAPI権限周りを研究
ChatGPTのライブラリを調べ
ChatGPTのリスポンスとリクエストを研究
APIのコスト

今回の目標はシンプルなサービスを作ることだけではなく、爆速で開発をすることです（一週間以内に全部終わりたいです）

早速行きましょ！

ChatGPTのリクエストとリスポンス

最初からChatGPTのリスポンスは気にせずにしたいので2つの方法を考えました。

WebSocketを使う
ASYNCリクエストを使う

ASYNCでしてみれば実装が複雑になりそう気がしたのと、今回は速さが大事なのでWebSocketを選択しました。

Show me the code!

ChatGPTをinputに1日の摂取カロリーと体重と持ってる材料で3日以内の栄養指導を説明してくれるというアプリを作りたいと思っています。

FrontEnd側

スピードに対してnextを選択しました。

メインページでWebSocketクライアントを使いましょ

const ws = new WebSocket("ws://<server>:<port>/<endpoint>")

これで四つのイベントをハンドリングしましょう

ws.onopen = () => {
  // サーバーと繋がるとき
}

ws.onerror = () => {
  // エラーが起こるとき
}

ws.onmessage = (event) => {
  // メッセージが返すとき
  // eventでデータと他のプロパティを持っている
}

ws.onclose = () => {
  // WebSocketのconnectionを閉まるとき
}

BackEnd側

ここでChatGPTと連携をする。

使っているライブラリは

chi ルーター
melody WebSocketサーバー
このライブラリはgorillaのwebsocketのラッパーです
go-openai

コードはこんな感じになっている

m := melody.New()
r := chi.NewRouter()

// CORSを設定しないといけない
r.Use(cors.Handler(cors.Options{
    AllowedOrigins: []string{"http://*", "ws://*"},
    AllowedMethods: []string{http.MethodPost, http.MethodGet, http.MethodOptions},
    AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "X-CSRF-Token"},
    MaxAge:         300,
}))

// このルーターには最初`/`をつけてWebSocketのルーターを書いている
r.Route("/", func(ws chi.Router) {
    ws.Get("/<endpoint>", func(w http.ResponseWriter, r *http.Request) {
        if err := m.HandleRequest(w, r); err != nil {
            // エラーをハンドリング

            return
        }
    })
})

MelodyライブラリはJavascriptのWebSocketと似てるメソッドを実装して。。。


// HandleMessageはクライアントからのイベントを受けるハンドラー
m.HandleMessage(func(s *melody.Session, msg []byte) {
    
    // ここにユースケースでChatGPTライブラリを叩いている
    d, err := advisory.Question(ctx, domain.Advisory{Message: question.Question})
    if err != nil {
        fmt.Println(err)
        _ = m.Broadcast([]byte(`err: ` + err.Error()))
    }

    b, err := json.Marshal(reqDomain.Response{Advise: d.Message})

    // クライアントにリスポンスを返す
    _ = m.Broadcast(b)
})

// WebSocketと連携を切られるとき
m.HandleDisconnect(func(session *melody.Session) {
    _ = session.Write([]byte(`diss`))
})

ユースケースでCreateChatCompletionのメソッドを使う、このメソッドにはChatGPTのWebでやりとりをするときと一緒です。

resp, err := a.client.CreateChatCompletion(
    ctx,
    openai.ChatCompletionRequest{
        Model: openai.GPT3Dot5Turbo0301,
        Messages: []openai.ChatCompletionMessage{
            {
                Role:    openai.ChatMessageRoleUser,
                Content: adv.Message,
            },
        },
    },
)

ModelはChatGPTのAIモーデルです。

これでサーバーとクライアントを実行して試していきましょーー

コード管理はこちらです。