Hugging Face's logo

Spaces:
AmineDubs
/
Scripts_translation_to_arabic
Running

App Files Community
amine_dubs commited on
Commit
7b413fc
·
1 Parent(s): aa9641a

hh

Browse files
Files changed (1) hide show
  1. templates/index.html +174 -60
templates/index.html CHANGED
@@ -5,76 +5,190 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>AI Translator</title>
7
  <link rel="stylesheet" href="/static/style.css">
 
 
8
  </head>
9
  <body>
10
  <h1>AI Translation Service</h1>
11
 
12
- <div class="container">
13
- <h2>Direct Text Translation</h2>
14
- <form id="text-translation-form">
15
- <div class="input-group">
16
- <label for="source-lang-text">Source Language:</label>
17
- <select id="source-lang-text" name="source_lang">
18
- <option value="en">English</option>
19
- <option value="fr">French</option>
20
- <option value="es">Spanish</option>
21
- <option value="de">German</option>
22
- <option value="ar">Arabic</option> <!- Added Arabic as source ->
23
- <option value="auto">Auto-Detect (Not implemented)</option>
24
- <!- Add more languages as needed ->
25
- </select>
26
- </div>
27
- <div class="input-group">
28
- <label for="target-lang-text">Target Language:</label>
29
- <select id="target-lang-text" name="target_lang">
30
- <option value="ar">Arabic (MSA Fusha)</option>
31
- <!- Add other target languages if reverse translation is implemented ->
32
- <!- <option value="en">English</option> ->
33
- </select>
34
- </div>
35
- <textarea id="text-input" name="text" placeholder="Enter text to translate..."></textarea>
36
- <button type="submit">Translate Text</button>
37
- </form>
38
- <div id="text-result" class="result-box" dir="rtl"> <!- Set default to RTL for Arabic output ->
39
- <h3>Translation:</h3>
40
- <pre><code id="text-output"></code></pre>
41
  </div>
42
  </div>
43
 
44
- <div class="container">
45
- <h2>Document Translation</h2>
46
- <form id="doc-translation-form" enctype="multipart/form-data">
47
- <div class="input-group">
48
- <label for="source-lang-doc">Source Language:</label>
49
- <select id="source-lang-doc" name="source_lang">
50
- <option value="en">English</option>
51
- <option value="fr">French</option>
52
- <option value="es">Spanish</option>
53
- <option value="de">German</option>
54
- <option value="ar">Arabic</option> <!- Added Arabic as source ->
55
- <option value="auto">Auto-Detect (Not implemented)</option>
56
- <!- Add more languages as needed ->
57
- </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  </div>
59
- <div class="input-group">
60
- <label for="target-lang-doc">Target Language:</label>
61
- <select id="target-lang-doc" name="target_lang">
62
- <option value="ar">Arabic (MSA Fusha)</option>
63
- <!- Add other target languages if reverse translation is implemented ->
64
- <!- <option value="en">English</option> ->
65
- </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </div>
67
- <div class="input-group">
68
- <label for="doc-input">Upload Document (.pdf, .docx, .xlsx, .pptx, .txt):</label>
69
- <input type="file" id="doc-input" name="file" accept=".pdf,.docx,.xlsx,.pptx,.txt">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  </div>
71
- <button type="submit">Translate Document</button>
72
- </form>
73
- <div id="doc-result" class="result-box" dir="rtl"> <!- Set default to RTL for Arabic output ->
74
- <h3>Translation:</h3>
75
- <p>Original Filename: <span id="doc-filename"></span></p>
76
- <p>Detected Source Language: <span id="doc-source-lang"></span></p>
77
- <pre><code id="doc-output"></code></pre>
78
  </div>
79
  </div>
80
 
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>AI Translator</title>
7
  <link rel="stylesheet" href="/static/style.css">
8
+ <!-- Add Chart.js for better data visualization -->
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
  </head>
11
  <body>
12
  <h1>AI Translation Service</h1>
13
 
14
+ <!-- Navigation tabs -->
15
+ <div class="tab-container">
16
+ <div class="tabs">
17
+ <button class="tab-button active" data-tab="text-translation">Text Translation</button>
18
+ <button class="tab-button" data-tab="doc-translation">Document Translation</button>
19
+ <button class="tab-button" data-tab="training">Training Dashboard</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  </div>
21
  </div>
22
 
23
+ <div class="tab-content">
24
+ <!-- Text Translation Tab -->
25
+ <div id="text-translation" class="tab-pane active">
26
+ <div class="container">
27
+ <h2>Direct Text Translation</h2>
28
+ <form id="text-translation-form">
29
+ <div class="input-group">
30
+ <label for="source-lang-text">Source Language:</label>
31
+ <select id="source-lang-text" name="source_lang">
32
+ <option value="en">English</option>
33
+ <option value="fr">French</option>
34
+ <option value="es">Spanish</option>
35
+ <option value="de">German</option>
36
+ <option value="ar">Arabic</option> <!- Added Arabic as source ->
37
+ <option value="auto">Auto-Detect (Not implemented)</option>
38
+ <!- Add more languages as needed ->
39
+ </select>
40
+ </div>
41
+ <div class="input-group">
42
+ <label for="target-lang-text">Target Language:</label>
43
+ <select id="target-lang-text" name="target_lang">
44
+ <option value="ar">Arabic (MSA Fusha)</option>
45
+ <!- Add other target languages if reverse translation is implemented ->
46
+ <!- <option value="en">English</option> ->
47
+ </select>
48
+ </div>
49
+ <textarea id="text-input" name="text" placeholder="Enter text to translate..."></textarea>
50
+ <button type="submit">Translate Text</button>
51
+ </form>
52
+ <div id="text-result" class="result-box" dir="rtl">
53
+ <h3>Translation:</h3>
54
+ <pre><code id="text-output"></code></pre>
55
+ </div>
56
  </div>
57
+ </div>
58
+
59
+ <!-- Document Translation Tab -->
60
+ <div id="doc-translation" class="tab-pane">
61
+ <div class="container">
62
+ <h2>Document Translation</h2>
63
+ <form id="doc-translation-form" enctype="multipart/form-data">
64
+ <div class="input-group">
65
+ <label for="source-lang-doc">Source Language:</label>
66
+ <select id="source-lang-doc" name="source_lang">
67
+ <option value="en">English</option>
68
+ <option value="fr">French</option>
69
+ <option value="es">Spanish</option>
70
+ <option value="de">German</option>
71
+ <option value="ar">Arabic</option> <!- Added Arabic as source ->
72
+ <option value="auto">Auto-Detect (Not implemented)</option>
73
+ <!- Add more languages as needed ->
74
+ </select>
75
+ </div>
76
+ <div class="input-group">
77
+ <label for="target-lang-doc">Target Language:</label>
78
+ <select id="target-lang-doc" name="target_lang">
79
+ <option value="ar">Arabic (MSA Fusha)</option>
80
+ <!- Add other target languages if reverse translation is implemented ->
81
+ <!- <option value="en">English</option> ->
82
+ </select>
83
+ </div>
84
+ <div class="input-group">
85
+ <label for="doc-input">Upload Document (.pdf, .docx, .xlsx, .pptx, .txt):</label>
86
+ <input type="file" id="doc-input" name="file" accept=".pdf,.docx,.xlsx,.pptx,.txt">
87
+ </div>
88
+ <button type="submit">Translate Document</button>
89
+ </form>
90
+ <div id="doc-result" class="result-box" dir="rtl">
91
+ <h3>Translation:</h3>
92
+ <p>Original Filename: <span id="doc-filename"></span></p>
93
+ <p>Detected Source Language: <span id="doc-source-lang"></span></p>
94
+ <pre><code id="doc-output"></code></pre>
95
+ </div>
96
  </div>
97
+ </div>
98
+
99
+ <!-- Training Dashboard Tab -->
100
+ <div id="training" class="tab-pane">
101
+ <div class="container">
102
+ <h2>Model Training Dashboard</h2>
103
+
104
+ <div class="training-controls">
105
+ <div class="input-group">
106
+ <label for="training-epochs">Number of Epochs:</label>
107
+ <input type="number" id="training-epochs" min="1" max="100" value="10">
108
+ </div>
109
+ <div class="input-group">
110
+ <label for="training-batch-size">Batch Size:</label>
111
+ <input type="number" id="training-batch-size" min="1" max="128" value="32">
112
+ </div>
113
+ <div class="input-group">
114
+ <label for="training-learning-rate">Learning Rate:</label>
115
+ <input type="number" id="training-learning-rate" min="0.00001" max="0.1" step="0.0001" value="0.001">
116
+ </div>
117
+ <div class="input-group">
118
+ <label for="training-dataset">Training Dataset:</label>
119
+ <select id="training-dataset">
120
+ <option value="default">Default Dataset</option>
121
+ <option value="custom">Custom Dataset</option>
122
+ </select>
123
+ </div>
124
+ <div class="input-group" id="custom-dataset-upload" style="display: none;">
125
+ <label for="dataset-file">Upload Custom Dataset:</label>
126
+ <input type="file" id="dataset-file" accept=".csv,.json,.txt">
127
+ </div>
128
+ <button id="start-training" class="primary-button">Start Training</button>
129
+ </div>
130
+
131
+ <div class="training-status" style="display: none;">
132
+ <div class="progress-container">
133
+ <h3>Training Progress</h3>
134
+ <div class="progress-bar-container">
135
+ <div class="progress-bar" id="training-progress"></div>
136
+ </div>
137
+ <p>Progress: <span id="progress-percent">0%</span></p>
138
+ <p>Epoch: <span id="current-epoch">0</span>/<span id="total-epochs">10</span></p>
139
+ <button id="stop-training" class="danger-button">Stop Training</button>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="training-metrics">
144
+ <h3>Training Metrics</h3>
145
+ <div class="metrics-grid">
146
+ <div class="metric-card">
147
+ <h4>Loss</h4>
148
+ <div class="chart-container">
149
+ <canvas id="loss-chart"></canvas>
150
+ </div>
151
+ </div>
152
+ <div class="metric-card">
153
+ <h4>Accuracy</h4>
154
+ <div class="chart-container">
155
+ <canvas id="accuracy-chart"></canvas>
156
+ </div>
157
+ </div>
158
+ <div class="metric-card">
159
+ <h4>BLEU Score</h4>
160
+ <div class="chart-container">
161
+ <canvas id="bleu-chart"></canvas>
162
+ </div>
163
+ </div>
164
+ <div class="metric-card">
165
+ <h4>Learning Rate</h4>
166
+ <div class="chart-container">
167
+ <canvas id="lr-chart"></canvas>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="training-history">
174
+ <h3>Previous Training Sessions</h3>
175
+ <table class="history-table">
176
+ <thead>
177
+ <tr>
178
+ <th>Date</th>
179
+ <th>Dataset</th>
180
+ <th>Epochs</th>
181
+ <th>Final Loss</th>
182
+ <th>Final Accuracy</th>
183
+ <th>Actions</th>
184
+ </tr>
185
+ </thead>
186
+ <tbody id="history-table-body">
187
+ <!-- Training history will be populated here via JavaScript -->
188
+ </tbody>
189
+ </table>
190
+ </div>
191
  </div>
 
 
 
 
 
 
 
192
  </div>
193
  </div>
194