動画コメントから歌みた動画の特徴を可視化するアプリを作っています

# tl;dr

* 動画についたコメントを元に、歌みた動画の特徴の可視化と推薦文を作るアプリを作っています
![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176335/a5ca2d3e-2b78-18c8-b25b-202fd7a72567.gif)
※ スクリーントーンみたいになってるのはgif書き出し時の設定かと思います。。。
* 推薦文はChatGPTで生成
* 散布図を作る時はOpenAIのEmbeddding APIで得たベクトルを変換しています

# 機能
## 散布図

![p1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176335/233485b4-225a-5324-8dcd-eb79ae283d69.png)

- コメントの内容を元に歌い手を散布図にプロットします
- 上下左右の軸はユーザーが指定可能です
- 曲ごとにプリセットも準備しています

## 推薦文の自動生成

- アイコンにマウスオーバーすると対応する推薦文を表示します
- 推薦文は歌みた動画ごとに、コメントの内容から自動生成しています

生成例
![p5_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176335/46730dd9-d7be-a669-0c68-2ed485dc39c3.png)
![p5_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176335/c24f3066-d7f3-5dec-9907-dde07efdf747.png)
![p5_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176335/8233c148-0bca-34eb-f5d2-08899b04c3d4.png)

https://www.youtube.com/watch?v=8J1FcPAZ8ec
https://www.youtube.com/watch?v=FlaDmgzCgYM
https://www.youtube.com/watch?v=tjucd1d__y4


# データ収集

全て YouTube Data API で取得
- コメント
- 動画情報
  - 動画タイトル
  - チャンネル ID
- チャンネルのサムネイル画像

詳細はこちらなどを参考にしてください
https://qiita.com/miyatsuki/items/a10f310e7eb1f03133b4
https://qiita.com/miyatsuki/items/c221b48830db2b0a9eba

## コメント例 (上の方にあるコメントを cherry-pick)

* 動画やイラストん関するコメントがあるので、推薦文生成時は考慮する必要があります
* 人によっては日本語以外のコメントが多数あるので、他言語も同様に扱える仕組みが必要です
```
可愛いな〜〜〜って聞いてたら1回目の「こっちおいで」イケボすぎてそこだけ6回ぐらい聴き回した,
たまらんすき\nmixガチガチで完成されてるやつもいいけどこういう喋り声で歌ったような訴えかけてくるやつでぇすき(語彙力),
呼吸が聞こえてちゃんと人間だなって思った(みんな肺活量化け物なんじゃねぇかと思ってる民,
長尾が歌うとなんか和風感でるの不思議…(めっちゃすこ),
今更だけどピアス甲斐田と弦月の色だ,
i love nagaos voice so much,
長尾の余裕を感じるさっぱりとした歌い方が大好き,
常にダミってる感じ？の声マジで好きなんだよなぁ,
1:07 からの裏の囁き 長尾か？！ってくらい優しい,
```
↓
これらのコメントから生成された推薦文がこちら
![p17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176335/5fd83187-a63a-c5a2-20b6-58347d6579cd.png)
https://www.youtube.com/watch?v=Ixg5P9QbJWY

# 推薦文の生成

gpt-3.5-turbo に以下のプロンプトを投げます
* 予算が許すならgpt-4の方が良いかと思います
* コメント例から分かる通り、先にあるコメントがかなり優先されるので、コメント数が多い場合は工夫が必要そうに思います

`````
コンテキストはある楽曲のカバー動画につけられたコメントです
コンテキストからこの歌手の歌い方の特徴を推測し、視聴者におすすめする文章を考えてください
ただし、イラストなど見た目に関することは書かないでください
またこの歌手の特徴をあらわすハッシュタグを3つ作ってください

出力は以下の形式で出力してください。
\```json
{
    summary: string (50字程度の推薦文、日本語),
    hashtags: string[] (8字程度、3つ、日本語、体言止め)
}
\````

コンテキスト
---
{コメント文を\nで繋いだもの[:2000]}
`````

# プリセットの自動生成

gpt-4 に以下のプロンプトを投げます
* gpt-3.5-turboより、こちらの方がしっくりくる回答が得られるように思います

`````
歌手の特徴や歌い方を散布図で表現し、比較・推薦できるwebアプリを作っています。
散布図の軸の両端に何を書くべきかを考えています

以下は、歌手とその歌に対する推薦コメントです。
これを元に、歌手や歌い方のx軸とy軸にどの単語を当てはめるべきか考えてください
その際、以下の条件を満たしてください
* コンテキストから最も分散が大きくなりそうな軸を探してください
* 下手などのネガティブな表現は避けてください
* 出力は以下の形式で出力してください。
\```json
{
    x: [string, string],
    y: [string, string]
}
\````

{歌い手名 要約文 を縦に並べたもの}
`````

# 座標の決定

- 手順
  1. 推薦文をベクトル化する
      * OpenAIのembedddig APIを利用
      * https://platform.openai.com/docs/guides/embeddings/what-are-embeddings
  2. 軸の文字列をベクトル化する
      * 実際には 「{軸の文字列}」歌い方が好きな人におすすめ　で投げています
      * 比較対象が推薦文なので、こちらもそれっぽくした方がいいのかなと思ったのでそうしてますが、特に比較してないのでそのまま投げるのでいいかもしれません
  3. 推薦文のベクトルと軸のベクトルの類似度を計算する
      * cos類似度なので、-1 ~ 1の範囲になる
  4. 右端との類似度 - 左端との類似度を計算する
  5. 全ての動画について4.が終わったら、平均0、分散1に調整した後 -1~1の範囲になるようにスケールさせて座標が決まる