[VibeCoding] #25 Qwen3TTS使ってみんなに愛されるTTSサービスの新境地を作ってみる

ここ数日、Qwen3-TTSにどっぷりでした。
TTSとしてももちろん面白いのですが、きちんとサービスとして使えるレベルの高品質なTTSサービスってなんだろう？という視点でいろいろ開発していました。で、作ったのがこれ。
AiCutyのボイスオーディションです

以下執筆中

このAITuberKitにも載せてみます

概要

積年の夢!?だった「AiCutyキャラクターボイスオーディション」に向けて、Qwen3-TTSデモサイト（https://qwen3tts.aicu.jp）のUI改善を実施。

実施内容

1. 静的ファイル配信の修正

問題: Gradioの仕様変更：ロゴ画像・背景画像が表示されない

原因: Gradio 6.xでは`/file=`パスでの配信が不安定。`gr.mount_gradio_app()`使用時は別途対応が必要。

解決策: FastAPI StaticFilesを使用

from fastapi.staticfiles import StaticFiles
api_app.mount("/static", StaticFiles(directory="static"), name="static")

画像パスを`/static/...`形式に統一。

2. キャラクター画像のダウンロードボタン非表示

問題: `gr.Image`コンポーネントにダウンロード・共有ボタンが表示される

試行錯誤:

• `show_download_button=False` → Gradio 6.xでは存在しないパラメータ（デプロイ失敗）

• CSS `.download { display: none }` → 効果なし

解決策: `gr.Image`ではなく`gr.HTML`で`<img>`タグを使用

# Before
gr.Image("static/characters/elena.png", height=60, ...)
# After
gr.HTML('<img src="/static/characters/elena.png" style="height:60px;..." />')

ずっこけるオチだけど、gr.Imageは画像を表示するためにあるんじゃないの、画像処理をするためにあるのね。

3. ヘッダーの改善

• 言語セレクター（Ja/En/Zh）を一旦削除（多言語対応は将来課題）

• ヘッダーコンテンツをセンタリング

• オーディション告知バナー追加

• リンク追加:

  • Qwen3-TTS → Alibaba Qwenの公式ツイート

  • AICU AIDX Lab → j.aicu.ai/AIDX

4. CSSの適用修正

問題: カスタムCSSが反映されない

原因: `gr.Blocks()`にCSS未指定

解決策:

with gr.Blocks(title="...", css=CUSTOM_CSS) as demo:

5. Gradioフッター非表示

公式のGradioのフッターは、CSS追加するだけで消えてくれる

footer { display: none !important; }

6. AGENTS.md更新

今日の知見を反映:

• Gradio StaticFilesパターン

• HTML imgワークアラウンド

• 本番デプロイ前チェックリスト追加

• AiCutyオーディション情報セクション追加

学んだ教訓

本番運用中のデプロイ注意点

1. ローカルテスト必須: 構文チェック → UI確認 → API確認の順

2. ポート競合確認: `lsof -i :7860`というかんじで使うポートを固定することで、複数開発時の"他殺"を回避。

3. Gradio 6.xの罠:

   • パラメータが4.x/5.xと異なる。まじで全然違う！

   • 存在しないパラメータでもビルドは通るがランタイムでエラーというバイブコーディング泣かせの仕様。

Gradio + FastAPI構成でのベストプラクティス

# 静的ファイル配信
api_app.mount("/static", StaticFiles(directory="static"), name="static")

# CSS適用
with gr.Blocks(css=CUSTOM_CSS) as demo:
    ...

# Gradio マウント
app = gr.mount_gradio_app(api_app, demo, path="/")

作成したGitHub Issue

•  「これをリファレンス音声にする」機能（今後実装予定）

これがめっちゃ重要です。

本番URL

https://qwen3tts.aicu.jp

関連リンク

• AiCutyオーディション告知: https://j.aicu.ai/260125

• Qwen3-TTS公式: https://x.com/Alibaba_Qwen/status/2014326211913343303

• AICU AIDX Lab: https://j.aicu.ai/AIDX