Hugging Face's logo

Spaces:
Docfile
/
boma-page
Running

App Files Community
Docfile commited on
Commit
578f8b8
•
1 Parent(s): e7dad75

Update templates/traduction.html

Browse files
Files changed (1) hide show
  1. templates/traduction.html +153 -58
templates/traduction.html CHANGED
@@ -2,77 +2,172 @@
2
  <html>
3
  <head>
4
  <title>BOMA LANGUE</title>
5
- <script src="https://cdn.tailwindcss.com"></script>
6
- </head>
7
- <body class="bg-gray-100">
8
- <div class="container mx-auto p-4 md:p-8">
9
- <h1 class="text-3xl font-bold text-pink-600 text-center mb-6">BOMA LANGUE</h1>
 
 
10
 
11
- <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
 
 
 
 
 
 
12
 
13
- <label for="source-language" class="block text-gray-700 text-sm font-bold mb-2">Langue Source :</label>
14
- <select id="source-language" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
15
- <option value="fr">Français</option>
16
- <!-- Autres langues sources -->
17
- </select>
 
 
18
 
19
- <label for="input-text" class="block text-gray-700 text-sm font-bold mt-4 mb-2">Texte à traduire :</label>
20
- <textarea id="input-text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline h-24"></textarea>
 
 
 
 
21
 
22
- <label for="target-language" class="block text-gray-700 text-sm font-bold mt-4 mb-2">Langue Cible :</label>
23
- <select id="target-language" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
24
- <option value="fang_beta">Fang (béta)</option>
25
- <option value="fang_complete" disabled>Fang (complet)</option>
26
- </select>
 
 
 
 
 
 
 
 
 
27
 
28
- <label for="translated-text" class="block text-gray-700 text-sm font-bold mt-4 mb-2">Texte Traduit :</label>
29
- <textarea id="translated-text" readonly class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline h-24"></textarea>
 
 
 
 
30
 
31
- <button onclick="translateText()" class="bg-pink-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mt-6">
32
- Traduire
33
- </button>
 
 
 
 
 
 
 
 
 
 
34
 
35
- <div id="loading" class="hidden mt-4"> <!-- Loading initialement caché -->
36
- <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-pink-500"></div>
37
- <span class="ml-2">Traduction en cours...</span>
38
- </div>
39
- </div>
40
- </div>
41
 
42
- <script>
43
- function translateText() {
44
- const inputText = document.getElementById('input-text').value;
45
- const sourceLanguage = document.getElementById('source-language').value;
46
- const targetLanguage = document.getElementById('target-language').value || "fang_beta";
 
 
47
 
48
- // Afficher le loading
49
- document.getElementById('loading').classList.remove('hidden');
 
 
50
 
 
 
 
 
 
 
51
 
52
- fetch('/translate', {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  method: 'POST',
54
- headers: {
55
- 'Content-Type': 'application/json'
56
- },
57
- body: JSON.stringify({
58
- input_text: inputText,
59
- source_language: sourceLanguage,
60
- target_language: targetLanguage
61
- })
62
- })
63
- .then(response => response.json())
64
- .then(data => {
65
- document.getElementById('translated-text').value = data.result;
66
- })
67
- .catch(error => {
68
- console.error('Erreur:', error);
69
- document.getElementById('translated-text').value = "Erreur lors de la traduction";
70
  })
71
- .finally(() => { // Masquer le loading dans tous les cas (succès ou erreur)
72
- document.getElementById('loading').classList.add('hidden');
73
- });
74
- }
 
 
 
 
 
75
  </script>
76
-
77
  </body>
78
  </html>
 
2
  <html>
3
  <head>
4
  <title>BOMA LANGUE</title>
5
+ <style>
6
+ /* Global styles */
7
+ body {
8
+ background-color: #ffffff;
9
+ margin: 0;
10
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
11
+ }
12
 
13
+ /* Header bar */
14
+ .header-bar {
15
+ background-color: #ffd1dc;
16
+ padding: 1rem;
17
+ margin-bottom: 2rem;
18
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
19
+ }
20
 
21
+ h1 {
22
+ text-align: center;
23
+ color: #333333;
24
+ font-size: 2em;
25
+ font-weight: 600;
26
+ margin: 0;
27
+ }
28
 
29
+ /* Container styles */
30
+ .container {
31
+ max-width: 1200px;
32
+ margin: 0 auto;
33
+ padding: 0 1rem;
34
+ }
35
 
36
+ /* Form elements */
37
+ .input-textbox,
38
+ .output-textbox,
39
+ select {
40
+ width: 100%;
41
+ padding: 0.75rem;
42
+ margin-bottom: 1rem;
43
+ border: 1px solid #e0e0e0;
44
+ border-radius: 4px;
45
+ background-color: white;
46
+ transition: border-color 0.2s ease;
47
+ font-size: 1rem;
48
+ box-sizing: border-box; /* Correction pour la largeur */
49
+ }
50
 
51
+ .input-textbox:focus,
52
+ .output-textbox:focus,
53
+ select:focus {
54
+ border-color: #ffd1dc;
55
+ outline: none;
56
+ }
57
 
58
+ .gr-button {
59
+ background-color: #ffd1dc;
60
+ border: none;
61
+ color: #333333;
62
+ padding: 0.75rem 1.5rem;
63
+ border-radius: 4px;
64
+ font-weight: 500;
65
+ transition: background-color 0.2s ease;
66
+ margin: 1rem auto;
67
+ display:block;
68
+ font-size: 1rem;
69
+ cursor: pointer;
70
+ }
71
 
72
+ .gr-button:hover {
73
+ background-color: #ffbfcf;
74
+ }
 
 
 
75
 
76
+ /* Labels */
77
+ label {
78
+ color: #333333;
79
+ font-weight: 500;
80
+ margin-bottom: 0.5rem;
81
+ display: block;
82
+ }
83
 
84
+ /* Spacing */
85
+ .block {
86
+ margin-bottom: 1.5rem;
87
+ }
88
 
89
+ /* Layout */
90
+ .row {
91
+ display: flex;
92
+ flex-wrap: wrap;
93
+ margin-bottom: 1.5rem;
94
+ }
95
 
96
+ .column {
97
+ flex: 1;
98
+ padding: 0 1rem;
99
+ }
100
+
101
+ /* Center content */
102
+ .center-content {
103
+ display: flex;
104
+ flex-direction: column;
105
+ align-items: center;
106
+ justify-content: center;
107
+ min-height: 10vh;
108
+ }
109
+ </style>
110
+ </head>
111
+ <body>
112
+ <div class="header-bar">
113
+ <h1>BOMA LANGUE</h1>
114
+ </div>
115
+ <div class="container">
116
+ <form id="translation-form">
117
+ <div class="row">
118
+ <div class="column">
119
+ <label for="source_language">Langue source:</label>
120
+ <select id="source_language" name="source_language">
121
+ {% for lang in source_languages %}
122
+ <option value="{{ lang }}">{{ lang }}</option>
123
+ {% endfor %}
124
+ </select>
125
+ </div>
126
+ <div class="column">
127
+ <label for="target_language">Langue cible:</label>
128
+ <select id="target_language" name="target_language">
129
+ {% for lang in target_languages %}
130
+ <option value="{{ lang }}">{{ lang }}</option>
131
+ {% endfor %}
132
+ </select>
133
+ </div>
134
+ </div>
135
+ <div class="row">
136
+ <div class="column">
137
+ <label for="input_text">Texte source:</label>
138
+ <textarea id="input_text" name="input_text" class="input-textbox" rows="5"
139
+ placeholder="Entrez le texte à traduire"></textarea>
140
+ </div>
141
+ </div>
142
+ <div class="center-content">
143
+ <button type="submit" class="gr-button">Traduire ⇄</button>
144
+ </div>
145
+ <div class="row">
146
+ <div class="column">
147
+ <label for="translated_text">Texte traduit:</label>
148
+ <textarea id="translated_text" name="translated_text" class="output-textbox" rows="5"
149
+ placeholder="Traduction" readonly></textarea>
150
+ </div>
151
+ </div>
152
+ </form>
153
+ </div>
154
+ <script>
155
+ document.getElementById('translation-form').addEventListener('submit', function (event) {
156
+ event.preventDefault();
157
+ const form = event.target;
158
+ fetch('/', {
159
  method: 'POST',
160
+ body: new FormData(form)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  })
162
+ .then(response => response.json())
163
+ .then(data => {
164
+ document.getElementById('translated_text').value = data.translated_text;
165
+ })
166
+ .catch(error => {
167
+ console.error('Error:', error);
168
+ document.getElementById('translated_text').value = 'Une erreur est survenue.';
169
+ });
170
+ });
171
  </script>
 
172
  </body>
173
  </html>