Next.jsとChatGPT、VOICEVOXを使用した音声チャットアプリを構築します。
VOICEVOXは、オープンソースのテキスト読み上げソフトウェアです。
複数のキャラクターが使用できますので、キャラクターを選択できるようにしています。
キャラクターを選択すると自己紹介の音声が流れます。
ChatGPTに質問した回答を、選択したキャラクターが読み上げます。
チャットの履歴を参照できるようにもしています。
ずんだもんを選択した時のみイラストが表示され、GSAPを使用してアニメーションをしています。
VOICEVOXを使用したアプリを作成したい方はぜひ参考にしてください。

初級

ChatGPTとVOICEVOXを組み合わせて音声チャットアプリを構築！あなたの選んだキャラが読み上げます！

はる@講師

Next.jsとLangChainで自動タスク生成アプリを構築します。
LangChainは複数の言語モデルやテキスト解析ツールを使用してチェーン状に連携させて、効率的に実行するためのフレームワークです。
ユーザーが目的を入力すると、全自動で目的を達成するためのタスクリストを作成して、順番に回答をしていきます。
LangChainが気になっている方はぜひ参考にしてください。

目標設定！Next.jsとLangChainで自動タスク生成アプリを作ろう

Next.jsとFastAPIで「Stable Diffusion」を使用した画像生成アプリを構築します。
このアプリは、ユーザーが入力したテキストから画像を生成することができます。
プロンプトやネガティブプロンプト、生成枚数、サイズなど自由にカスタマイズすることができます。
バックエンドには、FastAPIを使用して簡単にAPIを構築していきます。 
ythonのdiffusersライブラリを使用することにより、さまざまな画像生成モデルを利用することができます。
画像生成にはGPU性能が推奨されますが、CPUでも動作は可能です。
AIアートの制作やデザインのインスピレーションにも使用でき、オリジナルのAI画像生成アプリを構築してみてください。

最強AI画像生成アプリ！Next.jsとStable Diffusionで画像生成アプリを作ろう

FastAPI

Next.jsとThree.jsを使って3Dアートギャラリーを構築し、DALL・Eで生成された絵画を展示します。
Three.jsはJavaScriptの3Dライブラリで、@react-three/fiberと@react-three/dreiを使用していきます。
DALL・Eは自然言語から画像生成するAI技術です。
インタラクティブな3D空間で、絵画をクリックするとクローズアップも可能です。
Three.jsに興味ある方はぜひ参考にしてください。

3Dで絵画を楽しむ！Next.jsとThree.jsで作るAIアートギャラリー(DALL・E)

Three.js

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

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

ChatGPTとVOICEVOXを組み合わせて音声チャットアプリを構築！あなたの選んだキャラが読み上げます！
https://www.fullstackchannel.com/courses/35

Next.jsとChatGPT、VOICEVOXを使用した音声チャットアプリを構築します。
VOICEVOXは、オープンソースのテキスト読み上げソフトウェアです。
複数のキャラクターが使用できますので、キャラクターを選択できるようにしています。
キャラクターを選択すると自己紹介の音声が流れます。
ChatGPTに質問した回答を、選択したキャラクターが読み上げます。
チャットの履歴を参照できるようにもしています。
ずんだもんを選択した時のみイラストが表示され、GSAPを使用してアニメーションをしています。
VOICEVOXを使用したアプリを作成したい方はぜひ参考にしてください。

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

🌵新しい講座のお知らせ

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

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

目標設定！Next.jsとLangChainで自動タスク生成アプリを作ろう
https://www.fullstackchannel.com/courses/34

Next.jsとLangChainで自動タスク生成アプリを構築します。
LangChainは複数の言語モデルやテキスト解析ツールを使用してチェーン状に連携させて、効率的に実行するためのフレームワークです。
ユーザーが目的を入力すると、全自動で目的を達成するためのタスクリストを作成して、順番に回答をしていきます。
LangChainが気になっている方はぜひ参考にしてください。

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

🐝新しい講座のお知らせ

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

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

最強AI画像生成アプリ！Next.jsとStable Diffusionで画像生成アプリを作ろう
https://www.fullstackchannel.com/courses/33

Next.jsとFastAPIで「Stable Diffusion」を使用した画像生成アプリを構築します。
このアプリは、ユーザーが入力したテキストから画像を生成することができます。
プロンプトやネガティブプロンプト、生成枚数、サイズなど自由にカスタマイズすることができます。
バックエンドには、FastAPIを使用して簡単にAPIを構築していきます。 
ythonのdiffusersライブラリを使用することにより、さまざまな画像生成モデルを利用することができます。
画像生成にはGPU性能が推奨されますが、CPUでも動作は可能です。
AIアートの制作やデザインのインスピレーションにも使用でき、オリジナルのAI画像生成アプリを構築してみてください。

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

🦄新しい講座のお知らせ

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

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

3Dで絵画を楽しむ！Next.jsとThree.jsで作るAIアートギャラリー(DALL・E)
https://www.fullstackchannel.com/courses/32

Next.jsとThree.jsを使って3Dアートギャラリーを構築し、DALL・Eで生成された絵画を展示します。
Three.jsはJavaScriptの3Dライブラリで、@react-three/fiberと@react-three/dreiを使用していきます。
DALL・Eは自然言語から画像生成するAI技術です。
インタラクティブな3D空間で、絵画をクリックするとクローズアップも可能です。
Three.jsに興味ある方はぜひ参考にしてください。

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

🖼️新しい講座のお知らせ

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

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

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

### 例

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

など

Django

個人開発

🍀講座リクエスト掲示板

### 実現したいこと
Vercelの本番環境で動画を要約したい

### 発生している問題
SyntaxError: Unexpected token 'A', "An error o"... is not valid JSON

Failed to load resource: the server responded with a status of 504 ()

Vercelのサーバーレス関数は、デフォルトで最大10秒間実行

api/chatgptの応答が10秒以上かかりエラーになる

### ソースコード

```
import { Configuration, OpenAIApi } from 'openai'

import type { NextApiRequest, NextApiResponse } from 'next'

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
})

const openai = new OpenAIApi(configuration)

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const { prompt } = req.body

    // ChatGPT
    const content = `Please prepare an agenda and summary of the following statement in Japanese:\n: ${prompt}`
    const response = await openai.createChatCompletion({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: content }],
    })

    // レスポンスを返す
    const text = response.data.choices[0].message?.content

    res.status(200).json({ text })
  } catch (error) {
    console.error(error)
    res.status(500).send('Something went wrong')
  }
}

```


### 自分で試したこと

すでに非同期処理になっているか確認したところ非同期処理になっていたが
これはAPIの応答時間自体を短縮するものではないということがわかった


### 補足情報
[![Image from Gyazo](https://i.gyazo.com/f0c7ba142fddab64a553fb16fc910692.png)](https://gyazo.com/f0c7ba142fddab64a553fb16fc910692)


解決方法ご教授いただきたいです

Next.js

Next.js13とSupabase、ChatGPT、Whisperで自動要約アプリ構築で本番環境でのエラー

mumei

いつも楽しく学習させていただいております。   
zennで購入したインスタ風画像投稿サイト構築チュートリアルを実施するためにyoutubeでDjango + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編)を参考に実装を進めている際にエラーにハマりましたのでご質問させてください。

### 実現したいこと

fetchでDRFで作成した新規登録API（api/auth/register）を叩けるようにしたい。

### 発生している問題

```
// NEXT_PUBLIC_API_URL=http://127.0.0.1:8000 は.envに定義しております。

const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/register/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
        body: body
```


以上のコードを実施したときにエラー内容が出力されます。


### エラー内容

```
 TypeError: fetch failed
     at Object.fetch (node:internal/deps/undici/undici:11457:11)
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
     at async register_api (webpack-internal:///(api)/./pages/api/account/register.tsx:19:28) {
   cause: Error: connect ECONNREFUSED 127.0.0.1:8000
       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1532:16) {
     errno: -111,
     code: 'ECONNREFUSED',
     syscall: 'connect',
     address: '127.0.0.1',
     port: 8000
   }
 }
```

### ソースコード

https://github.com/Masaya00/InstaLike/blob/master/frontend/insta/pages/api/account/register.tsx#L12-L43


### 自分で試したこと

① http://127.0.0.1:8000/api/auth/register/ をPostmanで叩いた際は問題なく新規登録を行えることを確認しています。

② 以下のように127.0.0.1が起動していることは確認しております。

```
% netstat -n | grep '127.0.0.1'
tcp4       0      0  127.0.0.1.8000         127.0.0.1.62993        ESTABLISHED
tcp4       0      0  127.0.0.1.62993        127.0.0.1.8000         ESTABLISHED
・
・
・
```

③ jsonplaceholderの内容をfetchで取得することはできました。

④ http://127.0.0.1:8000/api/auth/user をfetchで取得しようとした際にも今回と同様のエラーが発生しました。


### 補足情報

typescriptを利用し、環境構築はdockerで行なっておりますので、動画内のソースコードと全てが同じというわけではありません。ご容赦ください。

Django側とNextJS側の連携が上手くいっていないだけのようなのですが、原因が突き止められておりません。  
もしこのエラー内容に心当たりがありましたら、ご教授いただきたいです。

※当方、Djangoの知見はそれなりにあるのですが、Next.jsに関しては素人です。

お忙しいところ大変恐縮ですが、ご返信いただけましたら幸いです。  
これからの動画投稿、執筆活動のご健闘をお祈りしています。

Django + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編)で新規登録時にfetchでDRFのAPIが取得できない。

まさや

### 実現したいこと
バックエンドはハル先生の<a href="https://youtu.be/pPvPX8kXh7w" _blank=true>動画</a>
を参考にして、フロントサイドはハル先生のサブスク有料会員の動画を参考にしてwebアプリを作っています。なんとかuser_createで仮登録機能は実装できたのですが、activationで本登録をする為の方法が全く思い浮かびません、そして色々調べてみたのですが3日ほど答えを見つけられずにいます。もし、activationによる本登録がpostmanを使わずにnext.jsとDjangoなどで可能でしたらやり方を教えていただきたいです。

### 発生している問題
Djoserのactivationを使っての本登録のやり方が全くわからない。

### ソースコード
バックエンドはハル先生の<a href="https://youtu.be/pPvPX8kXh7w" _blank=true>この動画</a>とほとんど同じです。
<p>Reactサイド</p>

```pages/api/account/register.js
export default async(req, res) => {
    if(req.method === 'POST'){
        const { name, email, password, re_password } = req.body
        const body=JSON.stringify({
            name,
            email,
            password,
            re_password,
        })
        try{
            const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: body,
            })
            const data = await apiRes.json()
            if (apiRes.status === 201){
                return res.status(200).json({
                    success: 'Account registration is successed!',
                })
            }else{
                return res.status(apiRes.status).json({
                    error: 'We failed to register your account',
                })
            }
        }catch(err){
            return res.status(500).json({
                error: 'We failed to register your account',
            })
        }
    }else{
        res.setHeader('Allow', ['POST'])
        return res.status(405).json({ error: `Method ${req.method} not allowded.` })
    }
}
```

```pages/register.js
export default async(req, res) => {
    if(req.method === 'POST'){
        const { name, email, password, re_password } = req.body
        const body=JSON.stringify({
            name,
            email,
            password,
            re_password,
        })
        try{
            const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: body,
            })
            const data = await apiRes.json()
            if (apiRes.status === 201){
                return res.status(200).json({
                    success: 'Account registration is successed!',
                })
            }else{
                return res.status(apiRes.status).json({
                    error: 'We failed to register your account',
                })
            }
        }catch(err){
            return res.status(500).json({
                error: 'We failed to register your account',
            })
        }
    }else{
        res.setHeader('Allow', ['POST'])
        return res.status(405).json({ error: `Method ${req.method} not allowded.` })
    }
}
```
### 自分で試したこと
Googleで日本語と英語で調べまくる。
Chat GPTに聞いてみる。

### 補足情報
いつもお世話になっております。

DRF+Djoser+Next.jsでDjoserのactivationを実装したい

KosKos

### 実現したいこと
Next.js13とSupabaseで知識データベースQ&Aアプリ構築(Embedding)の実装

###エラーコード
Request failed with status code 429

### 自分で試したこと
データベースの作成ができません。となってしまい、上記のエラーが発生しました。waitする時間を増やせば改善するかと思い

```const wait = async (ms) => new Promise((resolve) => setTimeout(resolve, ms))```

を追加しましたが、うまく動作しませんでした。

データベースに何も登録がない状態で、質問しても「エラーが発生しました」となってしまします。
その時のエラーは下記のものとなります。
```[TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))]
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (1673kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)```

noteも購入しコードのミスはないとは思いますが、改善方法がわかりません。ご回答よろしくお願いします。

### 補足情報