はじめに

エイプリルフールネタとして、「蒼月ハヤテ」という歌声合成音声ツール用の素材キャラクターを作りました。

https://youtu.be/IUOVMrEo_C8

その際に配布サイトも自作したのですが、折角キャラクターと歌声生成用の自分の声データがあったので、それらを組み合わせてLLM=>TTS(text-to-speech)を繋げたら、まるで自分のクローンが喋っているようになると思ったので、隠し機能としてTTSでのお試しと会話機能をWebに展開しました。

今回は備忘も込めて、各種技術の紹介をしようと思います。

できあがりイメージ

ざっくり使用技術

Typescript
arwes (frontend design)
Next.js
Gemini API (LLM)
tone.js (sound)
render.com (deploy)
upstash (security)

要件の整理と技術選定

元々は「UTAU」という合成音声用の素材配布でしたが、「この音声と話せる機能があったら面白い」と考えました。そこで、おまけでLLMと結びつけ、TTSで喋らせる機能を配布ページに作る方針に決めました。要件は以下の3つです。

無料であること
サーバーに負荷がかからず軽量であること
今回のテーマである「自分の音声」で喋ること
TTSで有名なVOICEVOXは自分の声を喋らせることができず、Style-Bert-VITS2はGPUを使うために却下しました。

調べて行く中で、Tone.jsを用いた「Tone TTS」という、Deep Learningを用いない手法でTTSをやっている方をみつけたため、その手法を真似ることにしました。

前提知識：UTAUについて

TTSの技術に関わるので、最初に「UTAU」というソフトについて軽く解説します。
「UTAU」とはフリーの歌声合成ソフトウェアです。

「あ」から「ん」までの母音・子音を録音しておけば、それを引き伸ばしたりピッチを上げたりすることで歌声を生成できるだろうという仕組みで動いています。

今回はこの歌声生成用の素材ファイルを収録した（つまり、「あ」から「ん」までの全母音・子音を録音した）ので、それの配布サイト作成が目的です。

Tone.jsを用いたTTS手法

てっとり早く話すと「『あ』から『ん』まで収録しているのであれば、それを4分音符くらいの長さで再生すればTTSができるだろう」という手法になります。

publicに「あ」～「ん」までの全音声のデータを配置し、TTSする際に必要となる母音・子音を一括取得し再生します。例えば「こんにちは」の場合、「こ」「ん」「に」「ち」「は」をそれぞれ0.5秒づつ鳴らすようなイメージです。

UTAUの収録音声は以下のように「あ」から「お」までのように複数モーラを一ファイルに収めるので、それを以下のように「あ」から「ん」までを一つづつに分割していきます。

音声ファイル郡

これでひらがなの再生はできるようになりました。

LLMとの繋ぎ込み

今回は無料枠があるGeminiを採択しました。
GCPで請求アカウントと結びつけていないプロジェクトを作成し、Google AI StudioでAPIキーを発行すると無料Tierを使うことができます。これをNextで叩きます。

無料Tierなのでいくら叩かれてもノーダメージですが、自分の設定ミス等が怖いので念の為upstashのrateLimitを用います。下の記事が参考記事です。

import {
  GoogleGenerativeAI,
  HarmCategory,
  HarmBlockThreshold,
} from "@google/generative-ai";
import { NextRequest, NextResponse } from "next/server";
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(10, "10 s"),
  analytics: true,
  prefix: "upstash:ratelimit:10s",
});
const dailyRateLimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(200, "1 d"),
  analytics: true,
  prefix: "upstash:ratelimit:1d",
});

const identifier = "api";

// APIキーを環境変数から取得
const apiKey = process.env.GEMINI_API_KEY || "";

// Gemini APIクライアントの初期化
const genAI = new GoogleGenerativeAI(apiKey);
...中略...

async function generateText(prompt: string): Promise<string> {
  const { success: success10s } = await ratelimit.limit(identifier);
  const { success: successDaily } = await dailyRateLimit.limit(identifier);
  if (!success10s) {
    console.error("APIを叩きすぎです。");
    throw new Error("APIを叩きすぎです。");
  }
  if (!successDaily) {
    console.error("話しすぎです。また明日遊んでください！");
    throw new Error("話しすぎです。また明日遊んでください");
  }
...後略...

upstashはNextとの相性が良く、気軽にRateLimitがかけられるのでかなりお勧めです。今回は10秒ごとのリミットと位置日ごとのリミットにしていますが、

これをTTSと繋げていきます。
勿論LLMなのでひらがなだけでなく漢字も出力されます。そこで、LLMの出力をjson形式にし、responseをサイトに表示、再生ボタンを押したときはresponse_hiraganaをクエリとして再生させることで、漢字の読み上げを行います。

ユーザーに対する回答を日本語でresponseとして返し、その回答内容をひらがなでresponse_hiraganaとして返してください。なお、以下のJSON形式を必ず守ること。
    {
      "response": "回答例",
      "response_hiragana": "かいとうれい"
    }
      input: ${inputText}

プロンプトはかなり適当ですが、個人制作なのでそんなもんで十分です。プロンプトを暴かれた際のデメリットが皆無だったため、プロンプトインジェクション対策はおこなっていません。真面目に作る際はプロンプト攻撃への対策は必須になるかと思います。

Frontend・Deploy

サイバーな世界観のキャラクターだったので、サイバーなUIデザインフレームワークを用いることにしました。色々調べると「arwes」というSci-Fi系のUIフレームワークがReactに対応しており、今回にぴったりだと感じたため採択しました。
https://arwes.dev/

DeployはNext.jsと相性が良いrender.comです。Github連携もでき、かなり使い勝手として良いので今後も使っていこうと思います。

終わりに

エイプリルフールネタとしてはかなり工数を使ってしまいましたが、きちんとしたWebUIフレームワークを使ったり、マシンリソースを限りなく使わないTTSについて色々考えるのは結構勉強になりました。是非皆さんも自分の声をCVにしてTTS化を試してみてください。

Discussion