File size: 11,640 Bytes
e8bdb2f e848a0c e8bdb2f e848a0c e8bdb2f e848a0c e8bdb2f e848a0c e8bdb2f 8bf93c8 e8bdb2f e848a0c e8bdb2f 8bf93c8 e8bdb2f e848a0c e8bdb2f e848a0c e8bdb2f e848a0c e8bdb2f | 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 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | import gradio as gr
from pathlib import Path
from src.utils import get_base64_image
def get_files(dir_name):
path = Path(__file__).resolve().parents[2] / 'examples' / dir_name
files = sorted(path.glob("*.wav"))
return files
ORIGINAL = get_files('original')
GENERATED = get_files('generated')
def results_tab():
with gr.Tab("📊 Wyniki"):
with gr.Column(elem_classes="results-tab"):
gr.HTML('<div style="font-size: 35px; font-family: Myriad, sans-serif; font-weight: bold; text-align: left;">🎵 Przykłady dubbingu</div>')
gr.HTML("""
<div style="font-size: 18px; font-family: Myriad, sans-serif;">
Poniżej przedstawiamy efekty naszego rozwiązania — przykładowe pary nagrań oryginalnych i wygenerowanych. Wśród nich znajdują się zarówno nagrania pojedyńczych wypowiedzi, jak i rozbudowane dialogi z muzyką w tle. Poszczególne wypowiedzi można odsłuchać, klikając na przycisk uruchamiający odtwarzacz audio.
</div>
""")
with gr.Row():
gr.HTML('<div style="font-size: 20px; font-family: Myriad, sans-serif; font-weight: bold; text-align: center;">Oryginalne nagranie</div>')
gr.HTML('<div style="font-size: 20px; font-family: Myriad, sans-serif; font-weight: bold; text-align: center;">Wygenerowany dubbing</div>')
for file1, file2 in zip(ORIGINAL, GENERATED):
with gr.Row():
with gr.Column():
gr.Audio(file1, label='Oryginał', type="filepath")
with gr.Column():
gr.Audio(file2, label='Wygenerowany', type="filepath")
gr.HTML('<br><br>')
# WPŁYW KONTEKSTU NA TŁUMACZENIE
gr.HTML('<div style="font-size: 35px; font-family: Myriad, sans-serif; font-weight: bold; text-align: left;">🈲 Przykłady wpływu kontekstu na tłumaczenie</div>')
gr.HTML("""
<div style="font-size: 18px; font-family: Myriad, sans-serif;">
Poniżej prezentujemy przykłady tłumaczeń wykonanych bez kontekstu oraz z uwzględnieniem kontekstu wypowiedzi. Zestawienie to ma na celu zilustrowanie, jak istotny wpływ na jakość i poprawność tłumaczenia może mieć kontekst w postaci wypowiedzi poprzedzającej i następującej po tłumaczonym fragmencie. Dzięki temu można zaobserwować różnice w interpretacji znaczenia, doborze słownictwa oraz płynności przekładu w zależności od dostępnych informacji kontekstowych.
</div>
""")
gr.HTML("""
<div style="display:flex; gap:20px; flex-wrap: wrap; color:#000;">
<div style="flex:1; background-color:#f5f5f5; color:#000; border:2px solid black; border-radius:20px; padding:15px; min-width:300px;">
<h3 style="color:#000;">Przykład 1</h3>
<b>Dialog:</b><br>
<div style="background-color:#e0e0e0; border-radius:10px; padding:10px; margin-top:5px; margin-bottom:10px; color:#000;">
Troll — Ick metal. Mouth stings.<br>
Lambert — <b style="color:black;">You nuts?!</b><br>
Geralt — Shut up and follow my lead.
</div>
<b style="color:black;">Oryginalne:</b> Zwariowałeś?! ⭐<br>
<b style="color:black;">Bez kontekstu:</b> Ty orzeszku?! <span>❌</span><br>
<b style="color:black;">Z kontekstem:</b> <b style="color:black;">Czy ty zwariowałeś?!</b> ✅
</div>
<div style="flex:1; background-color:#f5f5f5; color:#000; border:2px solid black; border-radius:20px; padding:15px; min-width:300px;">
<h3 style="color:#000;">Przykład 2</h3>
<b>Dialog:</b><br>
<div style="background-color:#e0e0e0; border-radius:10px; padding:10px; margin-top:5px; margin-bottom:10px; color:#000;">
Yennefer — Philippa, your eyesight, only just recovered and magically simulated. Didn’t you say you’d need some time to get accustomed?<br>
Philippa Eilhart — <b style="color:black;">Did I?</b><br>
Yennefer — I’d forgotten how irritating she can be. Come, Ciri.
</div>
<b style="color:black;">Oryginalne:</b> Tak mówiłam? ⭐<br>
<b style="color:black;">Bez kontekstu:</b> Czy ja? <span style="color:black;">❌</span><br>
<b style="color:black;">Z kontekstem:</b> <b style="color:black;">Czy ja tak powiedziałam?</b> ✅
</div>
</div>
<br>
<div style="display:flex; gap:20px; flex-wrap: wrap; color:#000;">
<div style="flex:2; background-color:#f5f5f5; color:#000; border:2px solid black; border-radius:20px; padding:15px; min-width:300px;">
<h3 style="color:#000;">Przykład 3</h3>
<b>Dialog:</b><br>
<div style="background-color:#e0e0e0; border-radius:10px; padding:10px; margin-top:5px; margin-bottom:10px; color:#000;">
Chamberlain Emhyr — Bow before His Imperial Majesty, The White Flame Dancing on the Graves of his Foes, Emhyr var Emreis!<br>
Chamberlain Emhyr — <b style="color:black;">Bow.</b><br>
Emhyr — I thought you bowed before no man.<br>
</div>
<b style="color:black;">Oryginalne:</b> Ukłon. ⭐<br>
<b style="color:black;">Bez kontekstu:</b> Łuk. <span>❌</span><br>
<b style="color:black;">Z kontekstem:</b> <b style="color:black;">Ukłon.</b> ✅
</div>
<div style="flex:2; background-color:#f5f5f5; color:#000; border:2px solid black; border-radius:20px; padding:15px; min-width:300px;">
<h3 style="color:#000;">Przykład 4</h3>
<b>Dialog:</b><br>
<div style="background-color:#e0e0e0; border-radius:10px; padding:10px; margin-top:5px; margin-bottom:10px; color:#000;">
Keira Metz — Find him immediately. We’re close to unraveling this, I can feel it.<br>
Keira Metz — <b style="color:black;">What was that? It sounded for a moment like you’d joined the wraiths yourself...</b><br>
Geralt — Had to fight a pesta.<br>
</div>
<b style="color:black;">Oryginalne:</b> Co to było? Brzmiało, jakbyś postanowił dołączyć do drużyny upiorów... ⭐<br>
<b style="color:black;">Bez kontekstu:</b> Co to było? Brzmiało przez chwilę, jakbyś dołączył do cieni sam <span>❌</span><br>
<b style="color:black;">Z kontekstem:</b> <b style="color:black;">Co to było? Na chwilę brzmiało to tak, jakbyś sam dołączył do upiorów...</b> ✅
</div>
</div>
""")
gr.HTML('<br><br>')
# MOS
gr.HTML('<div style="font-size: 35px; font-family: Myriad, sans-serif; font-weight: bold; text-align: left;">📋 Test MOS')
gr.HTML("""
<div style="font-size: 18px; font-family: Myriad, sans-serif;">
Jednym z najważniejszych wyznaczników jakości mowy syntetycznej jest opinia drugiego człowieka. W tym celu przeprowadziliśmy test MOS (ang. <i>Mean Opinion Score</i>), który polega na subiektywnej ocenie jakości dźwięku przez słuchaczy. W badaniu wzięło udział 63 uczestników, którzy mieli za zadanie wysłuchać fragmentów nagrań i ocenić je w skali od 1 do 5, gdzie 1 oznaczało bardzo niską jakość, a 5 bardzo wysoką. Sprawdzona została zarówno naturalność wygenerowanego dźwięku (nMOS), jak i jakość transferu cech mowy (sMOS).
<br><br>
W <a href="#mosTable">tabeli</a> przedstawiamy średnie wyniki testów nMOS i sMOS, zarówno dla tłumaczenia z języka angielskiego na polski, jak i odwrotnie. Rezultaty są w obu przypadkach na wysokim poziomie, aczkolwiek nieco gorsze wyniki uzyskano dla syntezy z języka angielskiego na polski. Wynika to głównie ze złożoności fleksyjnej języka polskiego oraz znacznie mniejszego wsparcia modeli dla tego języka. Na <a href="#nmos">wykresach</a> przedstawiono szczegółowy rozkład ocen dla nMOS i sMOS.
</div>
<br><br>
<table id="mosTable" style="margin: 0 auto; border-collapse: collapse; max-width: 600px; width: 100%; font-size: 20px;">
<thead>
<tr style="border-bottom: 2px solid #000;">
<th style="padding: 10px;"></th>
<th style="padding: 10px;"><strong>EN → PL</strong></th>
<th style="padding: 10px;"><strong>PL → EN</strong></th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #ccc;">
<td style="padding: 10px;"><strong>nMOS</strong></td>
<td style="padding: 10px;">4,02</td>
<td style="padding: 10px;">4,38</td>
</tr>
<tr>
<td style="padding: 10px;"><strong>sMOS</strong></td>
<td style="padding: 10px;">4,08</td>
<td style="padding: 10px;">4,51</td>
</tr>
</tbody>
</table>
<div style="text-align: center; font-size: 16px; font-family: Myriad, sans-serif; margin-top: 8px;">
Średnie wyniki testu MOS.
</div>
<style>
table tbody tr:hover {
background-color: #f0f0f0;
}
</style>
""")
gr.HTML("""
<style>
.scaled-img-container {
display: flex;
justify-content: center;
padding: 0.1em 0;
}
.scaled-img {
transform-origin: top center;
}
</style>
""")
img_nmos = get_base64_image("assets/nmos.png")
img_smos = get_base64_image("assets/smos.png")
imgs_with_labels = f"""
<div style="display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; text-align: center;">
<div>
<img id="nmos" src="{img_nmos}" class="scaled-img" alt="nmos" style="max-width: 100%; height: auto;" />
<div style="margin-top: 10px; font-size: 16px; font-family: Myriad, sans-serif;">Wyniki testu nMOS.</div>
</div>
<div>
<img id="smos" src="{img_smos}" class="scaled-img" alt="smos" style="max-width: 100%; height: auto;" />
<div style="margin-top: 10px; font-size: 16px; font-family: Myriad, sans-serif;">Wyniki testu sMOS.</div>
</div>
</div>
"""
gr.HTML(imgs_with_labels)
|