-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (122 loc) · 5.85 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
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>My Translation App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<style>
label {
min-width: 150px; /* Set minimum width to 150 pixels */
text-align: left; /* Align label text to the left */
}
</style>
</head>
<body>
<h1>Translation App</h1>
<div class="container">
<form id="translation-form">
<div class="form-group" id="api-key-group" style="display: block;">
<label for="api-key-input">API Key</label>
<input type="password" class="form-control" id="api-key-input" name="apiKey" >
</div>
<div class="form-group" id="openai-api-key-group" style="display: none;">
<label for="openai-api-key-input">OpenAI API Key:</label>
<input type="password" class="form-control" id="openai-api-key-input" name="openaiApiKey" >
</div>
<div class="form-group">
<label for="text-input">Text to Translate:</label>
<textarea class="form-control" id="text-input" name="text" rows="5" required></textarea>
</div>
<div class="form-group" id="textarea-group" style="display: none;">
<label for="system-text-input">System Input Text:</label>
<textarea class="form-control" id="system-text-input" name="systemText" rows="5"></textarea>
</div>
<div class="form-group">
<label for="target-lang-input">Target Language:</label>
<select class="form-control" id="target-lang-input" name="targetLang" onchange="showHideTextarea()">
<option value="FREN">FR -> EN</option>
<option value="ENFR">EN -> FR</option>
<option value="FRENFR">FR -> EN -> FR</option>
<option value="GPT">GPT</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Translate</button>
</form>
<br>
<div class="form-group">
<label for="translated-text-field">Translated Text:</label>
<textarea class="form-control resize-none" id="translated-text-field" rows="5" cols="50" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"' ></textarea>
<button class="btn btn-secondary" onClick="copyTranslatedText()">Copy</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
const translationForm = document.getElementById('translation-form');
const translatedTextField = document.getElementById('translated-text-field');
translationForm.addEventListener('submit', (event) => {
event.preventDefault();
const apiKey = document.getElementById('api-key-input').value;
const openaiApiKey = document.getElementById('openai-api-key-input').value;
const text = document.getElementById('text-input').value;
//new Option(document.getElementById('text-input').value).innerHTML
const systemText = document.getElementById('system-text-input').value;
const targetLangInput = document.getElementById('target-lang-input');
const targetLang = targetLangInput.options[targetLangInput.selectedIndex].value;
const url = `/translate`;
const queryString = `apiKey=${encodeURIComponent(apiKey)}&openaiApiKey=${encodeURIComponent(openaiApiKey)}&text=${encodeURIComponent(text)}&systemText=${encodeURIComponent(systemText)}&targetLang=${encodeURIComponent(targetLang)}`;
// log in the console the querystring
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: queryString
})
.then(response => response.text())
.then(translatedText => translatedTextField.value = translatedText)
.catch(error => console.error(error));
});
</script>
<script>
function showHideTextarea() {
var targetLangInput = document.getElementById('target-lang-input');
var selectedOptionValue = targetLangInput.options[targetLangInput.selectedIndex].value;
var textareaGroup = document.getElementById('textarea-group');
var openaiApiKeyGroup = document.getElementById('openai-api-key-group');
var apiKeyGroup = document.getElementById('api-key-group');
if (selectedOptionValue === "GPT") {
// Show the textarea
textareaGroup.style.display = "block";
openaiApiKeyGroup.style.display = "block";
apiKeyGroup.style.display = "none";
} else {
// Hide the textarea
textareaGroup.style.display = "none";
openaiApiKeyGroup.style.display = "none";
apiKeyGroup.style.display = "block";
}
}
</script>
<script>
// Set the value of the api-key-input field from the "apiKey" URL parameter
const urlParams = new URLSearchParams(window.location.search)
const apiKey = urlParams.get('apiKey')
const openaiApiKey = urlParams.get('openaiApiKey')
if (apiKey) {
$('#api-key-input').val(apiKey)
}
if (openaiApiKey) {
$('#openai-api-key-input').val(openaiApiKey)
}
</script>
</script>
<script>
function copyTranslatedText() {
const textarea = document.getElementById('translated-text-field');
textarea.select();
document.execCommand('copy');
}
</script>
</body>
</html>