Spaces:
Running
Running
File size: 8,137 Bytes
28d0c5f |
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 176 177 178 179 180 181 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="../static/css/style-new.css">
<script src="../static/javascript/callbacks.js"></script>
<title>AI pronunciation trainer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body style="height: 100%; width: 100%; background-color: white; max-width: 90%;">
<div>
<div style="display:flex; flex-direction: row;">
<div style="display:inline-block; margin-left: 1.5em;">
<i class="material-icons icon-text-home" style="text-align: right;" onclick="history.go(0)">home</i>
</div>
<h1 id='main_title'> AI Pronunciation Trainer
</h1>
</div>
<div class="expanded">
<div class="horizontal-flexbox" style="display:flex; flex-direction: row;">
<p class="accuracy-text" style="font-size:1em; text-align: left; padding-top: 3px; padding-left: 5px;">
Language: </p>
<!--dropbtn accuracy-text-->
<div class="dropdown">
<button id="languageBox" class="dropbtn accuracy-text"
style="font-size:1em; text-align: left; padding-top: 3px; padding-left: 0px;">German</button>
<div class="dropdown-content">
<a href="javascript:changeLanguage('de',true)" class="accuracy-text"
style="padding-top: 3px; ">German</a>
<a href="javascript:changeLanguage('en',true)" class="accuracy-text ;"
style="padding-top: 3px; ">English</a>
</div>
</div>
<p id="section_accuracy" class="accuracy-text"
style="text-align: left; color: black; font-size: larger;">
| Score: 0
</p>
</div>
</div>
<div style="margin-bottom: 200px;">
</div>
<div class="container">
<div class="horizontal-flexbox" style="position: absolute; top: 2%; ">
<a id="playSampleAudio" href="javascript:playAudio()" class="round-button disabled" style="color:white; text-align:center;
position: absolute; top: 2%; "><i class="material-icons icon-text">play_arrow</i>
</a>
<a id="playRecordedAudio" href="javascript:playRecording()" class="round-button disabled"
style="color:white; text-align:center; position: absolute; top: 15%; "><i
class="material-icons icon-text">record_voice_over</i>
</a>
<p id="pronunciation_accuracy" class="expanded accuracy-text"
style="text-align: center; color: black; position: absolute; top: 27%; ">
-
</p>
</div>
<div id="text-area" class="main-text-div">
<p id="original_script" class=" bigger-text text-primary main-text">Click on the bar on the
right
to
generate a
new sentence (please use chrome web browser).
</p>
<p id="ipa_script" class="text-muted bigger-text ipa-text"> Before speaking, click on the mic button
below to start recording and then click again when you're done.
</p>
<p id="recorded_ipa_script" class="text-primary ipa-text">On the left bottom you can choose the
difficult. On the upper left you can choose the language.
</p>
<p id="translated_script" class="text-muted medium-text ipa-text"> The corresponding IPA reading of each
sentence will also be displayed. If you never heard from IPA, you can check out this
<a href="https://www.youtube.com/watch?v=mzrLZi6fipA&list=RDCMUCQAUWk_yGz7bk1181DrijNw&start_radio=1&rv=mzrLZi6fipA&t=22&ab_channel=FluentForever"
target=”_blank”>playlist</a>. Try to get at least 690 points a day. Don't be shy! You can do it
:)
</p>
</div>
<div id="nextButtonDiv" style="position: absolute; left: 90%; top:0%; height: 100%;" class="flex-container">
<button id="buttonNext" class="expanded button-next" onclick="javascript:getNextSample()">
<span></span></a>
</div>
</div>
<div class="container-small flex expand"
style="align-items: center; text-align: center; vertical-align:middle; ">
<p id="single_word_ipa_pair" class="expand ipa-text-small"
style="text-align: center; vertical-align: middle;">Reference | Spoken
</p>
</div>
<div id="btn-record" class="expanded mic-button-div">
<a id="recordAudio" href="javascript:updateRecordingState()" class="round-button-mic disabled"
style="color:white; text-align:center; "><i id="recordIcon" class="material-icons icon-text-mic">mic</i>
</a>
</div>
<div id="radio-difficulty" class="radio" style="position: fixed; top: 95%; left: 2%;">
<input label="Random" type="radio" id="lengthCat1" name='length' onclick="javascript:getNextSample()">
<input label="Easy" type="radio" id="lengthCat2" name='length' checked onclick="javascript:getNextSample()">
<input label="Medium" type="radio" id="lengthCat3" name='length' onclick="javascript:getNextSample()">
<input label="Hard" type="radio" id="lengthCat4" name='length' onclick="javascript:getNextSample()">
</div>
</div>
<p class="credits-icon-div">By Thiago
Lobato.</p>
<div class="link-icon-div">
<a href="https://github.com/Thiagohgl/ai-pronunciation-trainer" target=”_blank”
style="text-decoration:none; vertical-align: middle; ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
<a href="https://www.linkedin.com/in/thiagohgl/" target=”_blank”
style="text-decoration:none; vertical-align: middle; padding-top: 2.3em; ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
<path
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
</svg>
</a>
</div>
</body>
</html> |