Hugging Face's logo

Spaces:
AmineDubs
/
Scripts_translation_to_arabic
Sleeping

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

erroe

Browse files
Files changed (1) hide show
  1. templates/index.html +60 -174
templates/index.html CHANGED
@@ -5,190 +5,76 @@
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
 
 
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