Next.js13とSupabase、ChatGPT、Whisperで自動要約アプリを構築します。

音声、動画ファイルを読み込むと、自動的に要約が作成されます。

文字起こしにはOpenAIのWhisper、要約にはChatGPTを使用しています。

ChatGPTのpromptを少し変更すると、会議の議事録にも対応できます。

最新技術のChatGPTとWhisperを利用して、自動要約アプリを作ってみましょう。

中級

Next.js13とSupabase、ChatGPT、Whisperで自動要約アプリ構築

supabase

はる@講師

Next.js13とSupabaseで音声認識AIチャットアプリを構築していきます。
前回作成したAIチャットアプリに音声認識機能を追加します。
マイクから音声を録音してOpenAIのWhisperで音声認識をします。
Whisperは日本語でもかなり精度がよく認識してくれます。
音声変換したテキストをChatGPTに送信することでAIと会話することができるようになります。
最新技術のChatGPTとWhisperを利用して、AIチャットアプリを作ってみましょう。
ぜひ参考にしてください。

Next.js13とSupabaseで音声認識AIチャットアプリ構築(ChatGPT、Whisper)

Next.js13で追加されたApp DirectoryとSupabaseを使用したブログの完全版を構築しました。

ブログに必要な機能がすべて揃っています。

他のアプリにも応用できるので、自分なりに変更してオリジナルアプリを作ってみてください。

初級

Next.js13とSupabaseのブログ完全版

Next.js13とSupabaseで構築したブログにコメント機能を追加していきます。

ブログにコメントとコメントに「いいね」をすることができるようになります。

コメントやいいねのデータベースの構築方法も学んでいきましょう。

Next.js13とSupabaseで構築したブログにコメント機能追加

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

Next.js13とSupabase、ChatGPT、Whisperで自動要約アプリ構築
https://www.fullstackchannel.com/courses/30

Next.js13とSupabase、ChatGPT、Whisperで自動要約アプリを構築します。
音声、動画ファイルを読み込むと、自動的に要約が作成されます。
文字起こしにはOpenAIのWhisper、要約にはChatGPTを使用しています。
ChatGPTのpromptを少し変更すると、会議の議事録にも対応できます。
最新技術のChatGPTとWhisperを利用して、自動要約アプリを作ってみましょう。
ぜひ参考にしてください。

よろしくお願いいたします。

🌴新しい講座のお知らせ

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

Next.js13とSupabaseで音声認識AIチャットアプリ構築(ChatGPT、Whisper)
https://www.fullstackchannel.com/courses/29

Next.js13とSupabaseで音声認識AIチャットアプリを構築していきます。
前回作成したAIチャットアプリに音声認識機能を追加します。
マイクから音声を録音してOpenAIのWhisperで音声認識をします。
Whisperは日本語でもかなり精度がよく認識してくれます。
音声変換したテキストをChatGPTに送信することでAIと会話することができるようになります。
最新技術のChatGPTとWhisperを利用して、AIチャットアプリを作ってみましょう。
ぜひ参考にしてください。

よろしくお願いいたします。

🌸新しい講座のお知らせ

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

Next.js13とSupabaseのブログ完全版
https://www.fullstackchannel.com/courses/28

Next.js13で追加されたApp DirectoryとSupabaseを使用したブログの完全版を構築しました。
ブログに必要な機能がすべて揃っています。
他のアプリにも応用できるので、自分なりに変更してオリジナルアプリを作ってみてください。
ぜひ参考にしてください。

よろしくお願いいたします。

🦚新しい講座のお知らせ

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

Next.js13とSupabaseで構築したブログにコメント機能追加
https://www.fullstackchannel.com/courses/27

Next.js13とSupabaseで構築したブログにコメント機能を追加していきます。
ブログにコメントとコメントに「いいね」をすることができるようになります。
コメントやいいねのデータベースの構築方法も学んでいきましょう。

ぜひ参考にしてください。

よろしくお願いいたします。

🐼新しい講座のお知らせ

### 実現したいこと
ユーザーが投稿した自分のブログのタイトルと作成日を表示するマイページを作りたいです。どのようにsupabaseからデータ取得して画面表示すればいいのかうまくいきません。

### 発生している問題
supabaseからuser.idに紐づくブログのtitleとcreated_atを取得してconsole.logでは表示できているのですが、return 部分で反映できず画面表示できません。

### ソースコード
`````
"use client";

import { format } from "date-fns";
import { useSupabase } from "../supabase-provider";
import useStore from "../../../store";

const BlogList = () => {
  const { supabase } = useSupabase();
  const { user } = useStore();

  // supabaseからリスト取得
  const getBlogList = async () => {
    const { data: blogsData } = await supabase
      .from("blogs")
      .select("id, title, created_at")
      .eq("profile_id", user.id)
      .order("created_at", { ascending: false }); // 作成日順に並び替え

    // リストが見つからない場合
    if (!blogsData) return;

    console.log(blogsData); // 正常にデータ取得できている
  };
  getBlogList();

  return (
      <ul>
        {blogsData.map((blog: any) => {
          return (
            <li key={blog.id}>
              <p>{blog.title}</p>
              <small>
                {format(new Date(blog.created_at), "yyyy/MM/dd")}
              </small>
            </li>
          );
        })}
      </ul>
  );
};

export default BlogList;
``````
### 自分で試したこと
(１) // supabaseからリスト取得 の部分で、

``const getBlogList = async () => {``と
``};getBlogList();``
を付けず、

async は
``const BlogList = async () => {``
に付けてみたところ、Objects are not valid as a React child (found: [object Promise]). のエラーが出てしまいました。


(２)ユーザーidに紐づけてデータ取得するためには、サーバーコンポーネントではなくクライエントコンポーネントで書くのかと思い試しましたが、根本的に間違っているのでしょうか。

### 補足情報
初学者で基本の理解もまだ充分ではないのですが、先生の動画や記事に出会ってから挫折せず続けられるようになりました。よろしくお願いいたします。

Next.js

初心者

データベース

「Next.js13とSupabaseのブログ完全版」でユーザーが投稿した自分のブログリストを表示させたい

ポッキー

こんにちは！

日本語は第二言語なので、文法の間違いがあれば、あらかじめ謝っておきます。

### 実現したいこと

このビデオに従って、私はDjango REST Framework + Next.js + NextAuthをGoogle認証で実装しようとしています。

https://www.youtube.com/watch?v=TvoMjY291f8

ビデオの指示に従ったのですが、「IDトークン」で問題が発生しています。このサイトの他の質問もチェックしましたが、同じ問題を経験している人を見つけることができませんでした。

### 発生している問題

サインインページで「Googleでログイン」ボタンをクリックすると、英語で「Access Denied」と書かれたエラーが出ます。

Djangoのサーバーサイドのコンソールでは、以下のようなエラーが表示されます。

```
raise OAuth2Error("Invalid id_token") from e
allauth.socialaccount.providers.oauth2.client.OAuth2Error: Invalid id_token
[13/Mar/2023 10:26:30] "POST /api/social/login/google/ HTTP/1.1" 500 162465
```

500エラーなので、URLかビューの問題だと思います。

### ソースコード

**フロント**

`[...nextauth].js`

```
import NextAuth from "next-auth";
import axios from "axios";
import GoogleProvider from "next-auth/providers/google";

const settings = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],

  callbacks: {
    async signIn({ user, account }) {
      if (account.provider === "google") {
        const accessToken = account.access_token;
        const idToken = account.id_token;

        console.log(idToken);

        try {
          const response = await axios.post(
            `${process.env.DJANGO_URL}/api/social/login/google/`,
            {
              access_token: accessToken,
              id_token: idToken,
            }
          );

          const { access_token } = response.data;
          user.accessToken = access_token;

          return true;
        } catch (error) {
          return false;
        }
      }
      return false;
    },

    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },

    async session({ session, token }) {
      session.accessToken = token.accessToken;
      return session;
    },
  },
  pages: {
    signIn: "/auth/signin",
  },
};

export default (req, res) => NextAuth(req, res, settings);
```
上記のコードでは、コンソールログにIDトークンが正常に表示されています。

確認のため、.envファイルを示します。

```
DJANGO_URL=http://localhost:8000

GOOGLE_CLIENT_ID=秘密
GOOGLE_CLIENT_SECRET=秘密
```

Client IDとClient secretは、私のGoogleコンソールの情報と一致しています。

JavaScript Originはこのように設定されています。

`http://localhost:3000`

URIはこのように設定されています。

`http://localhost:3000/api/auth/callback/google`

**サーバー**

`authentication/views.py`

```
from allauth.socialaccount.providers.google.views import GoogleOAuth2Adapter
from dj_rest_auth.registration.views import SocialLoginView
from allauth.socialaccount.providers.oauth2.client import OAuth2Client


class GoogleLoginView(SocialLoginView):
    adapter_class = GoogleOAuth2Adapter
    client_class = OAuth2Client
```

`urls.py`

```
from django.contrib import admin
from django.urls import path, include

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/auth/', include('dj_rest_auth.urls')), #Endpoints provided by dj-rest-auth
    path('api/social/login/', include('authentication.urls')) #Endpoint for Social logins
]

urlpatterns=urlpatterns+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

`authentication/urls.py`

```
from django.urls import path, include
from .views import GoogleLoginView

urlpatterns = [
    path("google/", GoogleLoginView.as_view(), name="google"),
]
```

### 自分で試したこと
この前、authentication/views.pyに「callback_url」変数を設定してみました。

マイグレーションを消して、新しいマイグレーションを作り、新しいマイグレーションを適用することを試しました。

他のフォーラムの投稿を参考に、POST/レスポンスの変数名を変えてみました。


### 補足情報

どうぞよろしくお願いいたします。

Django

NextAuthをGoogle認証とDRFで500エラー

チャッド

講座のリクエストはこちらからお願いします。

いいね数が多いリクエストから検討したいと思います。

リクエストのみの書き込みでお願いします。

### 例

「○○○が流行っているので、○○○を使ったチュートリアルが知りたい」

など

個人開発

🍀講座リクエスト掲示板

### 実現したいこと
ページリロードをしてもstateを保持してログイン状態が持続
するようにしたい。


### 発生している問題
Navigation.jsを {isAuthenticated ?}  でログイン状態の時に表示が変わるように設定しているが、ページリロードをやページ遷移をすると stateがリセットされてしまい、表示が切り替わってしまう。

### 自分で試したこと
stateを保持するredux-persistを使用し、公式ページなどを参考にコードを書いてみました。
結果は、
ページ遷移にはログイン状態を保持することができましたが、
ページリロードをするとログイン状態を保持することができませんでした。

ご教授をお願いしたいです。 

### ソースコード
```
//src/reduser/store.jsx

import { configureStore } from '@reduxjs/toolkit'
import authSlice from './authSlice'
import postSlice from './postSlice'

//redux-persist設定
import storage from 'redux-persist/lib/storage'
import { 
  persistReducer, 
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, authSlice)

const store = configureStore({
    reducer: {
      auth: persistedReducer,
      post: postSlice,
    },
    middleware: (getDefaultMiddleware) => 
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
        },
      }),
})

export default store
```
```
//pages/_app.jsx

//redux設定
import { Provider } from 'react-redux'
//redux-persist設定
import store from 'src/reducer/store'
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist' 

const persistor = persistStore(store)

function App({ Component, pageProps }){
  return (
     <Povider store={store}>
      <PersistGate persistor={persistor}>
        <Layout>
          <Head>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
          </Head>
          <Component {...pageProps} />
        </Layout>
      </PersistGate>
    </Provider>
  );
}
```
```
//src/reducer/authSlice.jsx

import {
    // アカウント登録
    REGISTER_SUCCESS,
    REGISTER_FAIL,

    //ログイン
    LOGIN_SUCCESS,
    LOGIN_FAIL,

    //アカウント情報取得
    USER_SUCCESS, 
    USER_FAIL,

    //リフレッシュトークン取得
    REFRESH_SUCESS,
    REFRESH_FAIL,
  
    // 読み込み中
    SET_AUTH_LOADING,
    REMOVE_AUTH_LOADING,

    //認証チェック
    AUTHENTICATED_SUCCESS,
    AUTHENTICATED_FAIL,
    LOGOUT_SUCCESS,
  } from 'actions/types'

const initialState = {
    user: null,
    isAuthenticated: null,
    loading: false,
}


function authReducer(state = initialState, action) {
  const { type, payload } = action

  switch (type) {
    // アカウント登録----------------------------------------------
    case REGISTER_SUCCESS:
      return {
        ...state,
      }
    case REGISTER_FAIL:
      return {
        ...state,
      }

    //ログイン----------------------------------------------
    case LOGIN_SUCCESS:
      return {
        ...state,
        isAuthenticated: true,
      }
    case LOGIN_FAIL:
      return {
        ...state,
        isAuthenticated: false,
      }

    //アカウント情報取得----------------------------------------------
    case USER_SUCCESS:
      return {
        ...state,
        user: payload.user,
      }
    case USER_FAIL:
      return {
        ...state,
        user: null,
      }
    //リフレッシュトークン取得----------------------------------------------
    case REFRESH_SUCESS:
      return {
        ...state,
      }
    case REFRESH_FAIL:
      return {
        ...state,
        isAuthenticated: false,
        user: null,
      }

    // 読み込み中----------------------------------------------
    case SET_AUTH_LOADING:
      return {
        ...state,
        loading: true,
      }
    case REMOVE_AUTH_LOADING:
      return {
        ...state,
        loading: false,
      }

    // 認証チェック----------------------------------------------
    case AUTHENTICATED_SUCCESS:
      return {
        ...state,
        isAuthenticated: true,
      }
    case AUTHENTICATED_FAIL:
      return {
        ...state,
        isAuthenticated: false
      }

      //ログアウト-----------------------------------------------
      case LOGOUT_SUCCESS:
        return {
          ...state,
          isAuthenticated: false,
          user: null,
        }
      case LOGIN_FAIL:
        return {
          ...state,
        }

    default:
      return state
    }
}

export default authReducer
```

//


### 補足情報

Django REST Framework + NextJS + redux(redux-persist) [ログイン状態の持続(stateの保持)]

hayato

### 実現したいこと
Vercel上でAIチャットアプリを動作させたい。
参考URL：https://www.youtube.com/watch?v=mEfEgh1EFJE&list=LL&index=7

### 発生している問題
デプロイは完了したが、ブラウザコンソール上には以下のメッセージが表示され、
NotFoundページに遷移する。
`Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.`

### ソースコード
なし

### 自分で試したこと
vercel上にsupabaseの認証情報が登録されていないことが原因と思い、
vercelとsupabaseの連携(Integration)を試みたが動作しなかった。

### 補足情報
非常に有益な動画でした。