-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (103 loc) · 5.58 KB
/
index.html
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
<!DOCTYPE html>
<html>
<textarea id='inputmml' value='test용' class="text"></textarea>
<button id="button" type="button" onclick='change()'>바꾸기</button><br>
<textarea id='outputmml' class="text"></textarea><br>
<p> 수식
<select name="example">
<option value=''>예시없음</option>
<option value='<math xmlns="http://www.w3.org/1998/Math/MathML"><mfenced open="|" close="|"><mfrac><mn>1</mn><mn>2</mn></mfrac></mfenced><mo>=</mo><mfenced open="|" close="|"><mrow><mo>-</mo><mfrac><mn>1</mn><mn>2</mn></mfrac></mrow></mfenced></math>'>예시1</option>
<option value='<math xmlns="http://www.w3.org/1998/Math/MathML"><mo>-</mo><mo>(</mo><mn>31</mn><mo>.</mo><mn>65</mn><msup><mo>)</mo><mn>5</mn></msup></math>'>예시2</option>
<option value='<math xmlns="http://www.w3.org/1998/Math/MathML"><mi>A</mi><mo>⊃</mo><mfenced><mrow><mi>A</mi><mo>-</mo><mi>B</mi></mrow></mfenced></math>'>예시3</option>
<option value='<math xmlns="http://www.w3.org/1998/Math/MathML"><mmultiscripts><mi>P</mi><mi>r</mi><none/><mprescripts/><mi>n</mi><none/></mmultiscripts><mo>=</mo><mfrac><mrow><mi>n</mi><mo>!</mo></mrow><mrow><mfenced><mrow><mi>n</mi><mo>-</mo><mi>r</mi></mrow></mfenced><mo>!</mo></mrow></mfrac></math>'>예시4</option>
<option value='<math xmlns="http://www.w3.org/1998/Math/MathML"><msup><mi>g</mi><mrow><mo>-</mo><mn>1</mn></mrow></msup><mo>:</mo><mi>X</mi><mo>→</mo><mi>Y</mi></math>'>예시5</option>
</select>
</p>
<p id='output_mathjax' aria-label></p>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<title>Korea Mathspeak Tensor tests.</title>
<script async>
var SREfeature = {
"custom": function(loc) {
//for Vscode Live Server
//let file = 'http://localhost:5500/lib/mathmaps/' + loc + '.json';
//for github Server
let file = 'https://skku-itexsolution.github.io/sre_ko_demo/lib/mathmaps/' + loc + '.json';
let httpRequest = new XMLHttpRequest();
return new Promise((res, rej) => {
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
console.log('Using my custom loader');
let status = httpRequest.status;
if (status === 0 || (status >= 200 && status < 400)) {
res(httpRequest.responseText);
console.log('resolve');
} else {
rej(status);
console.log('reject');
}
}
};
httpRequest.open('GET', file, true);
httpRequest.send();
});
}
}
</script>
<script src='./lib/sre.js' async></script>
<script>
var input = document.getElementById('inputmml') //input textarea
var output = document.getElementById('output_mathjax'); //output mathjax
var button = document.getElementById('button');
var outputtext = document.getElementById('outputmml'); //output textarea
const change = function(){
var dom = $('input[name="DOMAIN"]:checked').val();
var loc = $('input[name="LOCALE"]:checked').val();
var exm = $("select[name='example']").val()
SRE.setupEngine({
'domain' : dom,
'locale': loc
});
/*setting output textarea*/
var inputstring = exm===''? input.value : exm
const mml = SRE.toSpeech(inputstring);
outputtext.value = mml; //output text area
/*draw mathjax-container*/
button.disabled = true;
output.innerHTML = inputstring.trim();
// MathJax.texReset();
// MathJax.typesetClear();
MathJax.typesetPromise([output]).catch(function(err) {
output.innerHTML = '';
output.appendChild(document.createTextNode(err.message));
console.error(err);
}).then(function() {
button.disabled = false;
});
/*set aria-label*/
document.getElementById('output_mathjax').setAttribute('aria-label', mml);
}
</script>
<style>
textarea {
width: 60%;
height: 200px;
}
</style>
</head>
<body>
<br>
<input type="radio" value='mathspeak' name="DOMAIN" checked="checked">Mathspeak
<input type="radio" value='clearspeak' name="DOMAIN">ClearSpeak
<br>
<input type="radio" value='en' name="LOCALE" checked="checked">en
<input type="radio" value='ko' name="LOCALE">ko
<input type="radio" value='fr' name="LOCALE">fr
<input type="radio" value='hi' name="LOCALE">hi
<input type="radio" value='es' name="LOCALE">es
</body>
</html>