Spaces:
Runtime error
Runtime error
| <!-- <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Multilingual Assistive Model</title> | |
| </head> | |
| <body> | |
| <h1>Multilingual Assistive Model</h1> | |
| <form action="/" method="POST" enctype="multipart/form-data"> | |
| <label for="image">Upload an Image:</label> | |
| <input type="file" id="image" name="image" required> | |
| <br><br> | |
| <label>Select Target Languages:</label><br> | |
| <input type="checkbox" name="languages" value="hin_Deva"> Hindi<br> | |
| <input type="checkbox" name="languages" value="mar_Deva"> Marathi<br> | |
| <input type="checkbox" name="languages" value="guj_Gujr"> Gujarati<br> | |
| <input type="checkbox" name="languages" value="urd_Arab"> Urdu<br> | |
| <button type="submit">Submit</button> | |
| </form> | |
| {% if caption %} | |
| <h2>Uploaded Image</h2> | |
| <img src="{{ image_path }}" alt="Uploaded Image" style="max-width: 300px;"> | |
| <h2>Caption: {{ caption }}</h2> | |
| <h2>Translations:</h2> | |
| <ul> | |
| {% for lang, translation in translations.items() %} | |
| <li>{{ lang }}: {{ translation }} | |
| <audio controls> | |
| <source src="/audio/{{ lang }}.mp3" type="audio/mpeg"> | |
| </audio> | |
| </li> | |
| {% endfor %} | |
| </ul> | |
| {% endif %} | |
| </body> | |
| </html> --> | |
| <html> | |
| <head> | |
| <title>Multilingual Assistive Model</title> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| </head> | |
| <body class="bg-gray-100 p-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h1 class="text-3xl font-bold mb-8">Multilingual Assistive Model</h1> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <form id="uploadForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Upload Image</label> | |
| <input type="file" name="image" accept="image/*" required | |
| class="w-full p-2 border rounded"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Select Languages</label> | |
| <div class="space-y-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" name="languages[]" value="hin_Deva" checked | |
| class="form-checkbox"> | |
| <span class="ml-2">Hindi</span> | |
| </label> | |
| <br> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" name="languages[]" value="mar_Deva" checked | |
| class="form-checkbox"> | |
| <span class="ml-2">Marathi</span> | |
| </label> | |
| <br> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" name="languages[]" value="guj_Gujr" | |
| class="form-checkbox"> | |
| <span class="ml-2">Gujarati</span> | |
| </label> | |
| <br> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" name="languages[]" value="urd_Arab" | |
| class="form-checkbox"> | |
| <span class="ml-2">Urdu</span> | |
| </label> | |
| </div> | |
| </div> | |
| <button type="submit" | |
| class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"> | |
| Process Image | |
| </button> | |
| </form> | |
| <div id="results" class="mt-8 hidden"> | |
| <div id="imagePreview" class="mb-4"></div> | |
| <div class="space-y-4"> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-2">Caption:</h2> | |
| <p id="caption" class="text-gray-700"></p> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-2">Translations:</h2> | |
| <div id="translations" class="space-y-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="loading" class="hidden mt-4"> | |
| <p class="text-center text-gray-600">Processing... Please wait.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('uploadForm').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const form = e.target; | |
| const formData = new FormData(form); | |
| // Show loading | |
| document.getElementById('loading').classList.remove('hidden'); | |
| document.getElementById('results').classList.add('hidden'); | |
| try { | |
| const response = await fetch('/process', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await response.json(); | |
| // Display results | |
| document.getElementById('caption').textContent = data.caption; | |
| const translationsDiv = document.getElementById('translations'); | |
| translationsDiv.innerHTML = ''; | |
| for (const [lang, translation] of Object.entries(data.translations)) { | |
| const div = document.createElement('div'); | |
| div.className = 'mb-4'; | |
| div.innerHTML = ` | |
| <h3 class="font-medium">${lang}:</h3> | |
| <p class="text-gray-700">${translation}</p> | |
| <audio controls src="/audio/${lang}" class="mt-2"></audio> | |
| `; | |
| translationsDiv.appendChild(div); | |
| } | |
| // Show results | |
| document.getElementById('results').classList.remove('hidden'); | |
| } catch (error) { | |
| console.error('Error:', error); | |
| alert('An error occurred while processing the image.'); | |
| } finally { | |
| document.getElementById('loading').classList.add('hidden'); | |
| } | |
| }); | |
| // Image preview | |
| document.querySelector('input[type="file"]').addEventListener('change', (e) => { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = (e) => { | |
| const img = document.createElement('img'); | |
| img.src = e.target.result; | |
| img.className = 'max-w-full h-auto rounded'; | |
| const previewDiv = document.getElementById('imagePreview'); | |
| previewDiv.innerHTML = ''; | |
| previewDiv.appendChild(img); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |