Hugging Face's logo

Spaces:
VDNT11
/
Multilingual_Assistive_MOdel_w_Flask_Docker
Runtime error

App Files Community
VDNT11 commited on
Commit
82f50fc
·
verified ·
1 Parent(s): 2b7e1e6

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +179 -0
templates/index.html CHANGED
@@ -0,0 +1,179 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Multilingual Assistive Model</title>
7
+ </head>
8
+ <body>
9
+ <h1>Multilingual Assistive Model</h1>
10
+ <form action="/" method="POST" enctype="multipart/form-data">
11
+ <label for="image">Upload an Image:</label>
12
+ <input type="file" id="image" name="image" required>
13
+ <br><br>
14
+ <label>Select Target Languages:</label><br>
15
+ <input type="checkbox" name="languages" value="hin_Deva"> Hindi<br>
16
+ <input type="checkbox" name="languages" value="mar_Deva"> Marathi<br>
17
+ <input type="checkbox" name="languages" value="guj_Gujr"> Gujarati<br>
18
+ <input type="checkbox" name="languages" value="urd_Arab"> Urdu<br>
19
+ <button type="submit">Submit</button>
20
+ </form>
21
+ {% if caption %}
22
+ <h2>Uploaded Image</h2>
23
+ <img src="{{ image_path }}" alt="Uploaded Image" style="max-width: 300px;">
24
+ <h2>Caption: {{ caption }}</h2>
25
+ <h2>Translations:</h2>
26
+ <ul>
27
+ {% for lang, translation in translations.items() %}
28
+ <li>{{ lang }}: {{ translation }}
29
+ <audio controls>
30
+ <source src="/audio/{{ lang }}.mp3" type="audio/mpeg">
31
+ </audio>
32
+ </li>
33
+ {% endfor %}
34
+ </ul>
35
+ {% endif %}
36
+ </body>
37
+ </html> -->
38
+
39
+
40
+ <!DOCTYPE html>
41
+ <html>
42
+ <head>
43
+ <title>Multilingual Assistive Model</title>
44
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
45
+ </head>
46
+ <body class="bg-gray-100 p-8">
47
+ <div class="max-w-4xl mx-auto">
48
+ <h1 class="text-3xl font-bold mb-8">Multilingual Assistive Model</h1>
49
+
50
+ <div class="bg-white p-6 rounded-lg shadow-lg">
51
+ <form id="uploadForm" class="space-y-4">
52
+ <div>
53
+ <label class="block text-sm font-medium mb-2">Upload Image</label>
54
+ <input type="file" name="image" accept="image/*" required
55
+ class="w-full p-2 border rounded">
56
+ </div>
57
+
58
+ <div>
59
+ <label class="block text-sm font-medium mb-2">Select Languages</label>
60
+ <div class="space-y-2">
61
+ <label class="inline-flex items-center">
62
+ <input type="checkbox" name="languages[]" value="hin_Deva" checked
63
+ class="form-checkbox">
64
+ <span class="ml-2">Hindi</span>
65
+ </label>
66
+ <br>
67
+ <label class="inline-flex items-center">
68
+ <input type="checkbox" name="languages[]" value="mar_Deva" checked
69
+ class="form-checkbox">
70
+ <span class="ml-2">Marathi</span>
71
+ </label>
72
+ <br>
73
+ <label class="inline-flex items-center">
74
+ <input type="checkbox" name="languages[]" value="guj_Gujr"
75
+ class="form-checkbox">
76
+ <span class="ml-2">Gujarati</span>
77
+ </label>
78
+ <br>
79
+ <label class="inline-flex items-center">
80
+ <input type="checkbox" name="languages[]" value="urd_Arab"
81
+ class="form-checkbox">
82
+ <span class="ml-2">Urdu</span>
83
+ </label>
84
+ </div>
85
+ </div>
86
+
87
+ <button type="submit"
88
+ class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
89
+ Process Image
90
+ </button>
91
+ </form>
92
+
93
+ <div id="results" class="mt-8 hidden">
94
+ <div id="imagePreview" class="mb-4"></div>
95
+
96
+ <div class="space-y-4">
97
+ <div>
98
+ <h2 class="text-xl font-semibold mb-2">Caption:</h2>
99
+ <p id="caption" class="text-gray-700"></p>
100
+ </div>
101
+
102
+ <div>
103
+ <h2 class="text-xl font-semibold mb-2">Translations:</h2>
104
+ <div id="translations" class="space-y-2"></div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div id="loading" class="hidden mt-4">
110
+ <p class="text-center text-gray-600">Processing... Please wait.</p>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <script>
116
+ document.getElementById('uploadForm').addEventListener('submit', async (e) => {
117
+ e.preventDefault();
118
+
119
+ const form = e.target;
120
+ const formData = new FormData(form);
121
+
122
+ // Show loading
123
+ document.getElementById('loading').classList.remove('hidden');
124
+ document.getElementById('results').classList.add('hidden');
125
+
126
+ try {
127
+ const response = await fetch('/process', {
128
+ method: 'POST',
129
+ body: formData
130
+ });
131
+
132
+ const data = await response.json();
133
+
134
+ // Display results
135
+ document.getElementById('caption').textContent = data.caption;
136
+
137
+ const translationsDiv = document.getElementById('translations');
138
+ translationsDiv.innerHTML = '';
139
+
140
+ for (const [lang, translation] of Object.entries(data.translations)) {
141
+ const div = document.createElement('div');
142
+ div.className = 'mb-4';
143
+ div.innerHTML = `
144
+ <h3 class="font-medium">${lang}:</h3>
145
+ <p class="text-gray-700">${translation}</p>
146
+ <audio controls src="/audio/${lang}" class="mt-2"></audio>
147
+ `;
148
+ translationsDiv.appendChild(div);
149
+ }
150
+
151
+ // Show results
152
+ document.getElementById('results').classList.remove('hidden');
153
+ } catch (error) {
154
+ console.error('Error:', error);
155
+ alert('An error occurred while processing the image.');
156
+ } finally {
157
+ document.getElementById('loading').classList.add('hidden');
158
+ }
159
+ });
160
+
161
+ // Image preview
162
+ document.querySelector('input[type="file"]').addEventListener('change', (e) => {
163
+ const file = e.target.files[0];
164
+ if (file) {
165
+ const reader = new FileReader();
166
+ reader.onload = (e) => {
167
+ const img = document.createElement('img');
168
+ img.src = e.target.result;
169
+ img.className = 'max-w-full h-auto rounded';
170
+ const previewDiv = document.getElementById('imagePreview');
171
+ previewDiv.innerHTML = '';
172
+ previewDiv.appendChild(img);
173
+ };
174
+ reader.readAsDataURL(file);
175
+ }
176
+ });
177
+ </script>
178
+ </body>
179
+ </html>