2023-07-16 18:00:00

Nuxt3 でgithub pagesにデプロイする方法

Nuxt3 でGitHub Actionsを利用して GitHub Pagesにデプロイしたときに、いくつかハマるポイントが有ったので対応について記載していきます。

目次

ハマりポイント

GitHub PagesにNuxtJSで作った静的サイトをデプロイしたところいくつかハマりポイントがありました。

  • 「_」(アンダーバー)始まりのディレクトリを読み込めない
  • 独自ドメインを使わない場合、ディレクトリのルートがずれる

詳しく説明していきます

「_」(アンダーバー)始まりのディレクトリを読み込めない

Nuxt.jsを使うと_nuxtというディレクトリにジェネレート後にバンドルされたJSやCSSが入ります。

しかし、GitHub Actions を使ってGitHub Pageを公開してもデフォルトでは_nuxt以下を読み込むことができず、Nuxtのページが上手く表示されません。

GitHub Pagesではデフォルトではjekyllを利用しているためのようです。こちらを無効にする必要があります。

無効にするには、公開ディレクトリのルートに .nojekyll を置けばいいようです。

具体的にはNuxt.jsの場合publicディレクトリ以下に置きます。 ファイルだけあればいいので中身は空のファイルです。

独自ドメインを使わない場合、ベースのURLががずれる

GitHub Pagesは独自ドメインを使っていない場合公開URLは https://<ユーザ名>.github.io/<リポジトリ名>/ となります。

例: https://naginagisa.github.io/nagiHP/

実際に配置されるファイルも https://<ユーザ名>.github.io/<リポジトリ名>/ 以下になるのですが、 デフォルトではソースコード上でドメインルートからのパスで、アセットのパスなどが記載されているため、ズレてしまいファイルが読み込めず表示されなくなってしまいます。

例:

ズレてる例: `https://<ユーザ名>.github.io/_nuxt/entry.84900e01.js`
正しいURL: `https://<ユーザ名>.github.io/<リポジトリ名>/_nuxt/entry.84900e01.js`

ずれないようにnuxt.config.tsで baseURLを指定して上げる必要があります。

export default defineNuxtConfig({
    app: {
        baseURL: '/nagiHP/',
    }
~ 省略 ~
}

参考: Nuxt Configuration Reference · Nuxt

サンプルのGitHub のリポジトリ、 ソースコード

こちらにサンプルのプロジェクトを用意しました。

GitHub Actionsを使ってデプロイしているので、 Settings => Pages => Source を GithHub Actions にリポジトリの設定は必要です。

NagiNagisa/GitHubPagesSample: GitHub Pages Sample

まとめ

Nuxt3でGitHub Pagesで公開するときのハマりポイントを紹介しました。

私の場合はこの2点を解決することで通常通りのデプロイができました

  • /public/.nojekyll の空ファイルを置く
  • nuxt.config.tsbaseURLの設定に /<リポジトリ名>/ を設定する
2023-06-04 10:00:00

RVC ボイスチェンジャーでGoogle Colabを使って自分で学習モデルを作成する方法!

話題の高性能なAIボイスチェンジャー RVC で自分で任意の声を学習して使う方法ににいてまとめています。

Google Colabを使うことで自分のPCに複雑な環境構築を行うことなく、誰でも簡単にRVCの学習モデルの作成ができます。 また、学習にはGPUやハイスペックなPCが通常は必要ですが、Google Colabなら無料の範囲で十分利用することができます。

対象読者

  • RVCで自分の声など、任意の声からボイスチェンジャーを作りたい方
  • 自分のPCでのGPUを使った環境構築が難しい方

目次

RVCって何?

RVCはRetrieval-based-Voice-Conversionの略です。

どんな事ができるのかというと、いわゆるボイスチェンジャーの機能になります。

従来のボイスチェンジャーというと声にフィルターやエフェクトを掛けて声を変換するという感じで、 別の人の声に成り代わるみたいなことはむずかしく、コナンに出てくる蝶ネクタイ型変声期のように誰の声にでもなれるみたいなことはできませんでした。

しかし、RVCはこれが実現できてしまいます。

またRVCの優れている点はリアルタイム性も挙げられると思います。 非常に軽く、変換には1秒もかかりません、高性能なGPUを積んだ環境では0.2秒くらいの遅延で変換が可能なため、会話なども普通にできます。

変換に関しては例を見たほうがわかりやすいと思います。

つくよみちゃんの声から私の声のRVCモデルを使った変換例

・変換前のつくよみちゃんの声

・変換後の声(つくよみちゃん => 私の声)

つくよみちゃんの声は下記を利用させていただきました ■つくよみちゃんコーパス(CV.夢前黎)

完全に別人の声になっていますが、違和感なく変換できているのがわかるかと思います。

男性の声から私の声のRVCモデルを使った変換例

・変換前の男性の声

・変換後の声(男性の声 => 私の声)

変換前音声データははJVS corpusを利用させていただきました Shinnosuke Takamichi (高道 慎之介) - jvs_corpus

Google Colabを使って自分の声(任意の声)のRVCモデルを作る

Google Colaboratory を使うことで、 自分のPCにPythonのインストールなど複雑な環境構築をすることなく、

また高性能なGPUを持っていなくとも、簡単に機械学習が行なえます。

RVCのモデルであれば無料の範囲でも十分利用できます。

Google Colaboratory は Googleのアカウントさえ持っていれば簡単に利用できます。

事前準備

Google Colaboratory を使ってRVCのモデルを学習ための準備として下記が必要になります。

  • Googleアカウントの取得
  • 学習元の声(音声データの準備)

Googleアカウントの取得に関しては、すでに持っている人が多いと思うのと、取り方も色々情報が出回ってると思うので詳細は割愛します。 Googleのトップページログインからアカウントを取得してください。

学習元の声(音声データの準備)

RVCのモデル作成には、元となる声の音声データが必要です。 10分以上のノイズの少ない音声が必要になります。

音声の内容自体は割と何でもいいようです、私はVtuber活動をやっているのでそういう方は普段の雑談の配信などを使ったり、普段の会話を録音しておくなどで利用する方もいるようです。

ただそういうデータは必ずしも声だけのデータにならならず、ノイズが入ることもあると思うので(お茶飲んだ音、コップおいた音、生活音..etc) 、 品質の良いモデルを作りたいのであればそれ用に録音したほうが良いかと思います。

私は、今回はたまたま机の上にあった本を30分ほど音読して録音しました。

音声形式は mp3 でも wav でも色々な形式に対応しています。

内部的にはffmpegを利用しているそうなので、そちらに対応しているフォーマットであれば何でも大丈夫ですが、 最終的にはwavで利用されるので最初からwavにしておけばトラブルは起きづらいと思うので、私の場合はwavを用意しました。

音声のカットや、無言、無音部分のカットなどは、RVC学習時に自動でやってくれていそうなので、自分でやる必要はありません。

RVC出始めの頃は自分で発話ごとに区切って、無音部分は削除が必要といった情報をTwitterやいろんな記事で見かけましたが、公式に下記記述があるため今は不要かと思われます。

入力した音声はまず、一定期間(max_sil_kept=5秒?)より長く無音が続く部分を検知して音声を分割します。無音で音声を分割した後は、0.3秒のoverlapを含む4秒ごとに音声を分割します。4秒以内に区切られた音声は、音量の正規化を行った後wavファイルを/logs/実験名/0_gt_wavsに、そこから16kのサンプリングレートに変換して/logs/実験名/1_16k_wavsにwavファイルで保存します。

参照: https://github.com/RVC-Project/Retrieval-based-Voice-Conversion-WebUI/blob/2280f3e392771c1002020c3dd26a4cae7ce1e049/docs/training_tips_ja.md#%E9%9F%B3%E5%A3%B0%E3%81%AE%E5%88%86%E5%89%B2

また、音声データは複数のデータになっても構いません。特定のディレクトリ以下に複数の音声ファイルがあれば全て読み取ってくれます。

作成した音声データを入れたディレクトリはGoogle Colabから使えるようにGoogle Driveに格納しておいてください。

まとめると次の様なデータが必要になります。

  • トータル10分以上のノイズの少ない音声データ
  • ファイル形式は mp3, wav 等 一般的な音声ファイル形式ならほとんど利用可能
  • 音声のカットや、無言、無音部分のカットなどは不要
  • 音声データは複数のファイルになっていてもOK
  • 音声データは1つのディレクトリに入れておく
  • 音声データはGoogle Colabから利用できるようにGoogle Driveに格納しておく

Google ColaboratoryのNotebookを用意

それでは実際にモデルを作っていきます。

Google Colaboratory の NoteBook を作成したのでこちらを使ってもらって構いません。

https://colab.research.google.com/drive/1_193AbviTHAM95Nh7x2bROJxQ03tUiPU

私が使っていた時点ではv2に対応しているNotebookがなかったので自分で作成したのですが、現在は公式の方でもNoteBookが用意されているのでそちらを使っても大丈夫かと思います。

内容的にはほとんど一緒なので、どちらを使っても構わないと思います。

今回は上記のNoteBookを使って進めます。

NoteBookは自分のドライブにコピーしてから使ってください

「ファイル」=>「ドライブにコピー」

WebUIを開く

コードの実行

基本的には上から順番にコードを実行して行ってください。

環境構築、 必要なパッケージインストール、 git clone と順番にコードを実行していきます。

ランタイムのリスタート

Pythonの依存関係インストールのところだけ注意が必要で、コード実行後に次のようなWarningが出てきますので Runtime の再起動をしてください。

WARNING: The following packages were previously imported in this runtime: PIL,numpy You must restart the runtime in order to use newly installed versions.

「RESTART RUNTIME」 というボタンが出ていると思うのでこちらをクリックすれば大丈夫です

google driveのマウント

「google driveのマウント」の部分ではクリックすると

このノートブックに Google ドライブのファイルへのアクセスを許可しますか?

というメッセージが表示されますが、こちらは「Google ドライブに接続」に接続してください。

これで google colaboratory から google driveのファイルを参照できるようになります。

プログラムを起動して Web UI を開く

「launch webui」のコードを実行すると、次のようなリンクが表示されますので、クリックするとWebUIが立ち上がります。

Running on public URL: https://xxxxxxxxxxxxx.gradio.live

クリックして立ち上がったページは次のようになります。

これ以降学習などは、このWebUI上の操作から行います。

RVCのモデルを学習を学習する

WebUIからTrainのタブをクリックしてください。

編集の必要があるポイントだけ今回は説明いたします。

番号説明
モデルの名前です。任意の名前をつけてください。ここでは 「nagisa_sample」 としました
RVCのモデルのバージョンです、v2のほうが精度がいいとされていますので、今回はv2を使います。
学習元の音声ファイルの入ったフォルダのパスを指定してください。Colaboratory側からパスをコピーするとわかりやすいです。
学習データを使って、何回学習を繰り返すかを指定します。
この値は学習元のデータ量やbatch数などにもよって最適な値は変わってきます。学習を繰り返せば学習元のデータには近くなるはずですが、やりすぎると過学習となってしまって、不自然になることもあるのでepochは単純に増やせばいいというものではありません。
今回は20回でやってみます。やってみて学習が足りないと感じたら40に増やすなどして試してみてください。
One-click training をクリックすると、学習元の音声データの加工(Process data)、 特徴抽出(Feature extraction), モデルの学習(Train model)、 インデックス作成(Train feature index) をすべて一括でやってくれます。
個別にやりたい場合はそれぞれ個別のボタンを押すことでできます。 今回は One-click trainingをクリックしてみます。
学習にはかなり時間がかかるので、webui上で動いているように見えなくても、colab側のログを見ることで動いていることを確認できます。

③のフォルダはGoogle Drive上の学習元のモデルのパスを指定してください。

パスはcolab側のディレクトリツリーからパスをコピーできます。

今回私の環境では /content/drive/MyDrive/AI/RVC/dataset/naginagisaという風にしています。

設定が完了したら ⑤の「One-click training」をクリックてモデルの作成をします。 このあと特に操作をする必要はありませんが、時間がかかります。20epochで20分くらいかかりました。

学習中のログなどは、colab側の方にログも出ますので、そちらで進捗や何をやっているのか、確認もできます。

学習にはかなり時間がかかるので、webui上で動いているように見えなくても、colab側のログを見ることで動いていることを確認できます。

完了したらモデルが出力されています。 作成させたモデルを使って、RVCを試してみましょう。

生成されたファイルで必要なファイルは、下記の②ファイルになります。

/content/Retrieval-based-Voice-Conversion-WebUI/weights/nagisa_sample.pth

/content/Retrieval-based-Voice-Conversion-WebUI/logs/nagisa_sample/added_****.index

作ったモデルを試す

「Model Inference」タブをクリックしてください。こちらの画面から作成したモデルは試すことができます。

Google driveに相手ある任意の音声データを使って、先ほど作成したモデルで変換してみる例をここでは紹介します。

番号説明
Model Inferenceをクリックして遷移する
Refresh voice list and index path をクリックすることで、先程学習したモデルをこちらのUIから利用できるようになります。
学習がうまく行っていればドロップダウンから先程学習して作成したモデルが表示されるはずなので 選択します。
変換元に使う音声データのピッチをどれだけ上げる、もしくは下げるかを指定します。
例えば男性の音声を、そのまま女性のモデルで変換してもじつはうまくいきません、事前に元の男性の音声のピッチを上げることできれいに変換ができます。
大体男性の音声から女性のモデルを使って変換する場合は 12 程度を指定すればうまくいくかと思います。
女性=>女性 への変換や 男性 => 男性 への変換の場合はそれほどいじらなくてもいいと思います。
なんにせよピッチを合わせるとうまくいくので、そちらを意識して設定するとよいかと思います。
変換元の音声データのパスです、今回は自分のドライブの直下にファイルを置いたのでそちらを指定しています。 任意のデータをdriveにおいて利用してください。
harvest が品質が良いようなのでこちらを使います。
indexファイルを指定します。 学習がうまく行っていればドロップダウンで added_xxxx.index というファイルが選択できるはずなので、そちらを選択してください。
Convertをクリックすると設定に基づいて変換が行われます。
変換結果の音声を再生することができます。 ②のtransposeの設定などで結構変わってくると思うので、色々試すと良いかと思います。

試してみて作ったモデルの学習が足りないなと感じたりした場合は、再度trainのタブに戻って学習し直したりすることができます。

学習が足りなければepoch数を増やして調整したりすることになります。

作ったモデルを保存する

作ったモデルはこのままGoogle Colaboratory を閉じてしまったりすると、消えてしまいますので、

Google Driveに保存しておきましょう。

Colaboratoryの画面側に戻って、 必要な情報を入れて「モデルをDriveにコピー」のコードを実行すればOKです。

Google Colaboratoryは並列実行はできないようので、webuiのコードを実行中の場合は一度停止してからコピーのコードを実行してください。

項目説明
DSTPATHDriveの格納先のディレクトリの指定。/content/drive/MyDrive/ がドライブ以下になるので、以下は自分で任意のパスを指定して大丈夫です。
MODELNAMEモデル作成時のモデル名と合わせてください。 今回の場合であれば nagisa_sample
MODELEPOCHエポック毎のトレーニング途中のファイルになります、学習を再開したい場合などに使えるのでこちらもバックアップできるようにしています。 EPOCH数は /content/Retrieval-based-Voice-Conversion-WebUI/logs/モデル名 以下にD_XXXX.pthやG_XXXX.pth などがあると思うのでこのXXXXの部分の数字を入れてください。 基本的には一番学習が進んでいるもの(数値が一番大きいもの)を選べば良いと思います。

コピーが完了すると、 Google DriveからDSTPATHに指定したディレクトリが作成されており、中には次のようなファイルがコピーされて格納されます。

この中で RVC の Client ソフトで必要になるファイルは、下記2ファイルです。

  • モデル名_エポック数.pth 例) nagisa_sample_1300.pth
  • added_*****.index 例) added_IVF1607_Flat_nprobe_1_nagisa_sample_v2.index

クライアントによっては、 total_fea.npy も必要になるソフトもあるかもしれません。

これらのファイルと、 RVC モデルを読み込める クライアントソフトを使うことで、リアルタイムのボイスチェンジなどを試すことができます。

VC Client を使ってリアルタイムボイスチェンジを試す

RVCのモデルが使えるソフトはいくつか公開されています。

ここでは VC Client というものを紹介します

GitHub - w-okada/voice-changer: リアルタイムボイスチェンジャー Realtime Voice Changer

インストールと実行

インストールはリンク先に書いてあるとおりです。

GitHub - w-okada/voice-changer: リアルタイムボイスチェンジャー Realtime Voice Changer

こちらのページのリンクから、合うものを選んで、ダウンロードしzipファイルを展開します。

cuda と書いているはNvidia のGPUがあれば使えます、GPUがない場合はCPUと書いてあるものをダウンロードすると良いと思います。

Windows なら start_http.bat をクリックして実行

Mac なら startHttp.command をクリックして実行してください。

モデルのアップロードと利用

上記のコマンドで立ち上げると次のような画面が開きます。 VC Clientの選択画面が出た場合は「RVC」をクリックしてください。

モデルのアップロード

自分で作ったモデルをアップロードするには

「Model Setting」 のところを開いて、下記の項目を変更して「upload」クリックします。

項目説明
Model(.onnx,.pt,pth)RVCのモデルファイルを指定、 今回は作成した nagisa_sample_1300.pth を選択
index(.index)インデックスファイルを指定(added_*.index)、
Default Tune声のピッチをどのくらい上げるかのデフォルト、あとから使うときに指定できるので、0でいいと思いますが、男性=>女性への変換が目的のときは12、 女性=>男性への変換が目的のときは-12、同性での変換の場合は0 といった感じに指定するとよいかと思います。

VC ClientでRVCモデルを利用する

利用は簡単です。

利用するには、「Server Control」の「Switch Model」から先程アップロードしたモデルを選択肢、 「Start」を推します。

「Device Setting」の「AudioInput」に利用するマイクのデバイス、 「AudioOutput」に利用するスピーカーなどをなど選んで、マイクに声を通すと変換された声が出力されます。

きれいに変換させるには声のピッチを合わせることが必要です。

「Tuning」を変更してみて、きれいに変換できるTuningになるように調整してください。

これでリアルタイムで誰でも任意の声にボイスチェンジができるようになります。

まとめ

  • RVCはAIを使った高性能な、リアルタイムで変換可能なボイスチェンジャー
  • RVCのモデルをGoogle Colaboratory で自分で学習して作成できる
  • 学習にはGoogle Colaboratoryを使うと簡単で便利!
  • RVCのモデルを VC Client で簡単に利用可能
2021-08-18 18:00:00

フリーズ将棋アプリベータ版公開! 個人開発!

フリーズ将棋という変則将棋のアプリケーションを個人開発で作成しました。 オンラインで対局もできます。

今回はベータ版公開ということで一旦区切りがついたので、個人開発でアプリ作成を行った感想などを書いていきたいと思います。

目次

今回作った将棋アプリ

今回作ったフリーズ将棋のアプリの紹介動画を作っているのでこちらを見てください。

ちなみに今は正式公開に向けてFANBOXの支援者限定での公開となっています。

【お知らせ】フリーズ将棋アプリベータ版公開! 事前周知|凪なぎさ|pixivFANBOX

フリーズ将棋とは

そもそも、フリーズ将棋が何なのか存じない方もいると思うので、軽く説明を書いておきます。

フリーズ将棋は、「フリーズ○○」といって、次の相手の手番で指定されたコマは動かせないというルールです。 例えば「フリーズ歩」といえば次の相手の手は歩は動かしたり、打つことはできない。

細かいルールは下記を参照(を公式サイトから引用) フリーズ将棋のルール : フリーズ将棋公式サイト@綾瀬綾

Freeze!将棋(フリーズ将棋)のルール

・先手が「フリーズ銀!」と言って指すと後手は次の一手は銀を動かせない (駒台からも打てないよ)

・フリーズは相手の全ての駒にできるよ

・王手放置はできないよ ※フリーズを使っても王手放置はNGよ

・駒と成り駒は別物よ (例 飛車と龍は別物)

・打ち歩フリーズ詰めはオッケー (歩1枚で大逆転のチャンス!)

・フリーズ返しはNGよ 先手がフリーズを使ったら 後手はフリーズを使えない (フリーズ直後の一手は普通に指してね)

・連続フリーズはオッケーよ

・フリーズを使えるのは一局中3回までよ (フリーズは大事に)

技術スタック

この記事では、あまり詳しく技術については書きませんが、後々触れる話に少し出てくるので、使っている技術についてだけ書いておきます。

  • ゲームエンジン: Unity
  • マルチプレイ用バックエンド: Photon
  • ユーザ管理,データ管理: PlayFab

ゲーム開発の難しさ

私はプログラミングはできますが、ゲームプログラマというわけではないので、ゲームプログラミングはほぼ初めてでした。 どちらかというと私の得意分野は、バックエンドやWebプログラミングでゲームプログラミングに関してはさっぱりです。 プログラミングができると言っても分野が違えば作り方や必要な技術はかなり異なってくるんですよね。

ただ、もともとプログラミングはじめたきっかけがゲームを作りたいという動機で、それは今も抱いているものなので折角の機会なのでゲームアプリ開発をはじめました。

今回は、変則将棋という動きの少ないボードゲームなので、派手に動くようなゲームゲーム?した感じではないですが。

はじめに苦労したのはUnityでのプログラムの書き方ですね。

どうやったらきれいに書けるのか、そういうことを考え始めるとなかなか進まなくなります。

Unityからプログラミングを始めた人であれば、入門書参考に作るでしょうから、あんまりそこでは詰まることはないのかもしれませんが、 私は他でプログラミングを知っているがゆえ、ある程度きれいに、保守性のあるコードを書きたいと思ってしまい、ここにかなり時間をかけた気がします。

別にこの判断は間違っていたとは思っておらず、よくわからないまま開発を続けて、ぐちゃぐちゃになったコードを継ぎ接ぎ頑張っていくよりかは、良かったと思います。

その代わり出費もかなり有りました. この手の話は通常入門書には載っていない、この辺りの本を買いました。

これだけで1万5000円以上の出費ですね。なかなか勉強代が高かったです。

というわけで、Unityに慣れるまでがなかなか難しいと言うのが有りました。

個人開発のモチベーションの維持の難しさ

ゲーム開発でも、Webサービスでも個人開発をするときに問題になってくるのはモチベーションの維持です。

正直個人でやってると、モチベーションの維持がかなり難しいです。

私の場合下記でモチベーションが維持できていたように思えます。

  • Twitterで進捗をアップして、その反応を得る
  • FANBOXで支援を募る

Twitterで進捗をあげて、反応を得る

幸いVtuber活動をしているのもあって、フォロワーが結構いるので、Twitterに進捗を上げると結構反応が来ます。

作成途中の動画を上げたツイートで10件以上RTをもらったりしました。

RTやいいねもそれなりにされるので、次も頑張ろうっていう気持ちになりますね。

FANBOXで支援を募る

FANBOXでフリーズ将棋アプリ開発の支援プランを用意しました。

最初に支援プランの記事を投稿したところ数名の方が支援をしてくださいました。

実際に支援を貰えると、応援してくれる人がいるんだなと感じるのと、 現金な人かもしれませんが、流石にお金をもらってしまうとやんなきゃいけないという気持ちになるので、かなりモチベーションの維持に繋がりました。

個人開発の面白さ

  • すべて自由に決められる
  • ユーザからの反応が嬉しい

すべて自由に決められる

何から何まで全部自由です。

  • 要件
  • 利用技術
  • デザイン・イラスト
  • 効果音・BGM

要件なども自分で決めて、不要なものは作らないでもいいですし、こんな機能増やしたいと思ったら自由に増やせます。

仕事とかではこの資料意味あるの?みたいな 形骸化した資料作ったりすることもあるかもしれませんが、そういうストレスが一切ないです。

純粋にものづくりを楽しめるという気がしています。

ユーザからの反応が嬉しい

モチベーション維持のところでも書きましたが、Twitterなどで反応があると嬉しいです。

もちろん仕事などでも自分が関わったものでユーザの声を聞くことはできますが、それはあくまで会社のプロダクトに対してであります。

ゼロから自分が作ったものに対しての反応があると、仕事などで間接的に関わったものよりも、嬉しさは段違いです。

逆に辛辣な意見があると辛いことはありますが

さいごに

正式リリースでは、Android, iOSで出そうと思うので、それまでまだまだ開発続きますが、良いものが作れるようにしていきたいと思います。

ときどき開発配信などもしているので、よければYoutubeのチャンネル登録などもしていただけると嬉しいです!

凪なぎさ /NagiNagisa - YouTube