教えてギラヴァンツ!

https://github.com/kubotadaichi/hackathon202510

Python

CSS

JavaScript

HTML

VSCode

監督AIに質問して、サッカーの理解とチームへの興味を深めよう

kubotadaichi

西野光貴

推しアイデア

回答が表示されると読み上げと同時に監督が上下に振れる。 動画のおすすめをしてくれる!

作った背景

サッカーへの疑問とギラヴァンツ北九州への興味を紐づけたかった。

推し技術

真心のこもった手作りフロント。 似ているかどうなのか監督ボイスの音声クローン。

プロジェクト詳細

コンセプト

  • ギラヴァンツに興味を持ってほしい!
  • サッカーに馴染みがない人にも!
  • 監督を作って喋ろう!

プロダクト概要

  • AI監督と対話できるwebアプリ
  • 監督との対話を通してサッカー知識からギラヴァンツ豆知識まで!

主な機能

  • サッカー情報にはギラヴァンツの実際の映像も添えて!
  • 監督の声をAIでクローン!監督の声で回答してくれる!

詰まったところ

  • フロンドエンドがバックエンドからクローン音声とAIからの回答を受け取る際に、mp3をバック側でエンコードし、フロント側でデコードするようにするところ。=>Blobを用いた。
  • 音声、テキスト生成、監督の震えを同期させること。=>テキスト生成と音声を完璧に同期させることは難しく、目分量で調整した。
  • 監督の表情それぞれで監督の位置が微妙に異なり、画像が指し変わる際に監督が移動してしまった。=>監督を表示させるコンポーネントを作り、画像ごとに異なるwidth,height,positionの値を渡すことで動かないようにした。

技術

  • 使用技術スタック:
    • フロントエンド: HTML, CSS, JavaScript
    • バックエンド: Python, FastAPI
    • AI / 機械学習: Gemini (テキスト生成), Fish Audio (音声合成))

kubotadaichi

@e1372bbbaa28a5f0