Hugging Face's logo

Spaces:
litagin
/
moe-speech-similarity-map
Running

App Files Community
moe-speech-similarity-map
File size: 5,524 Bytes 
88e2d60
c91a903
 
88e2d60
1dc0658
 
c91a903
 
1dc0658
 
 
d943d13
 
 
 
1dc0658
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c91a903
1dc0658
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88e2d60
1dc0658
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
<!DOCTYPE html>
<!-- encoding utf8 -->

<html>

<head>
    <meta charset="utf-8">
    <title>MoeSpeech Similarity Map</title>
    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <style>
        #network {
            margin-left: auto;
            margin-right: auto;
            width: 80%;
            height: 800px;
            border: 1px solid black;
            border-radius: 4px;
            margin-top: 20px;
        }

        #infoview {
            margin: 10px;
        }

        #infoview span {
            font-size: 18px;
            /* font-weight: bold; */
        }

        button {
            padding: 10px 15px;
            margin: 10px 5px;
            /* border: none; */
            border-radius: 4px;
            background-color: #D2E5FF;
            border-color: #2B7CE9;
            color: black;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #9ec5ff;
        }
    </style>
</head>

<body>
    <h2>MoeSpeech Similarity Map</h2>
    <!-- 利用規約と同意ボタン -->
    <div id="terms-container">
        <h3>Terms of use</h3>
        <p>
            ここでは<a href="https://huggingface.co/datasets/litagin/moe-speech">MoeSpeech</a>データセットのuuidごとの類似度グラフを提供しています。
            <br>
            このエクスプローラーを利用するには以下の利用規約に同意する必要があります。
            <br>
            <li>ここで提供されている情報を再配布してはいけません。</li>
            <li>話者に関する情報を共有してはいけません。例えば、あるuuidと別のuuidが非常に似ている等の情報を第三者に共有してはいけません。</li>
            <li><a
                    href="https://huggingface.co/spaces/litagin/moe-speech-license">MoeSpeechデータセットのライセンス</a>を読み、同意してください。
            </li>
        </p>
        <p>
            This provides a similarity graph of each uuids of <a
                href="https://huggingface.co/datasets/litagin/moe-speech">MoeSpeech</a> dataset.
            <br>
            To use this explorer, you must agree to the following terms of use.
            <br>
            <li>You should not distribute the provided information.</li>
            <li>You should not share any information about the speakers. For example, you should not share that one uuid
                is very similar to another uuid.</li>
            <li>You should read and agree to the <a
                    href="https://huggingface.co/spaces/litagin/moe-speech-license">MoeSpeech dataset license</a></li>
        </p>
        <input type="checkbox" id="agree-checkbox">利用規約に同意する / I agree to the terms of use
        <button id="agree-button" disabled>同意する / Agree</button>
    </div>
    <!-- 本来のコンテンツ -->
    <hr>
    <div id="main-content" style="display:none;">
        <p>近い声質の識別子同士が繋がっています。拡大縮小や頂点の移動ができます。辺が短いほど・太いほど似ているはずです（あくまで目安です）。辺にカーソルをのせたときの数字は2つのコサイン類似度です。
        <details>
            <summary>技術的な詳細</summary>
            データからランダムに10音声を選び、それぞれに対して
            <a
                href="https://huggingface.co/pyannote/wespeaker-voxceleb-resnet34-LM">この埋め込み</a>を使って得られた256次元特徴量の平均に対して、それらのコサイン距離を使ってminimum
            spanning treeを作ったものです。
        </details>
        </p>
        <p>
            Similar speakers are connected. You can zoom in/out and move the nodes. The shorter/thicker the edge, the
            more
            similar the speakers should be (this is just a rough guide). The number on the edge is the cosine similarity
            between the two embeddings.
        <details>
            <summary>Technical details</summary>
            This is a minimum spanning tree of the cosine distances between the average of 256-dimensional embeddings
            obtained from
            <a href="https://huggingface.co/pyannote/wespeaker-voxceleb-resnet34-LM">this embedding</a> for 10 random
            samples.
        </details>
        </p>
        <hr>

        <div id="infoview">
            <div id="search-view">
                <label for="model-name-input">Search uuid: </label>
                <input type="text" id="model-name-input" placeholder="input uuid">
                <button id="search-button">Search</button>
            </div>
            <span id="node-description">Current uuid:</span>
            <span id="node-name">Select uuid</span>
            <br>
            <span id="node-num-files-desc">Number of files: </span>
            <span id="node-num-files"></span>
            <br>
            <span id="node-duration-desc">Total duration (min):</span>
            <span id="node-duration"></span>
            <br>
            <span id="node-f0-desc">Mean F0 (Hz): </span>
            <span id="node-f0"></span>
        </div>
        <div id="network"></div>
    </div>
    <script src="graph.js"></script>
    <script src="terms.js"></script>
</body>

</html>

</html>