Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NLP Legal Document Processor</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> | |
| <style> | |
| body { | |
| background: linear-gradient(to bottom, royalblue, black); | |
| color: white; | |
| font-family: Arial, sans-serif; | |
| margin-top: 140px; | |
| margin-bottom: 310px; | |
| } | |
| h1 { | |
| margin-bottom: 20px; | |
| } | |
| .btn-primary, .btn-success { | |
| width: 100%; | |
| } | |
| #loading { | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container mt-5"> | |
| <h1 class="text-center">NLP Machine Translation for Legal Docs</h1> | |
| <form method="POST" action="/" id="nlp-form"> | |
| <div class="mb-3"> | |
| <label for="inputText" class="form-label">Enter Legal Text</label> | |
| <textarea class="form-control" id="inputText" name="input_text" rows="6" required></textarea> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="method" class="form-label">Choose Summarization Method</label> | |
| <select class="form-select" id="method" name="method"> | |
| <option value="method1">Method 1</option> | |
| <option value="method2">Method 2</option> | |
| </select> | |
| </div> | |
| <div id="loading" class="text-center text-warning" style="display: none;">Processing... Please wait.. It may take few minutes</div> | |
| <button type="button" class="btn btn-primary" id="processButton" onclick="processText()">Summarize</button> | |
| </form> | |
| <div id="result" class="mt-5"></div> | |
| <button type="button" class="btn btn-success mt-3" id="translateButton" style="display: none;" onclick="translateText()">Translate to Hindi</button> | |
| </div> | |
| <script> | |
| async function processText() { | |
| document.getElementById('loading').style.display = 'block'; | |
| document.getElementById('result').innerHTML = ''; | |
| document.getElementById('translateButton').style.display = 'none'; | |
| const formData = new FormData(document.getElementById('nlp-form')); | |
| try { | |
| const response = await fetch('/', { method: 'POST', body: formData }); | |
| const result = await response.json(); | |
| if (result.error) throw new Error(result.error); | |
| document.getElementById('result').innerHTML = ` | |
| <h3>Summarized Text:</h3> | |
| <p>${result.summarized_text}</p> | |
| `; | |
| document.getElementById('translateButton').style.display = 'block'; | |
| } catch (error) { | |
| document.getElementById('result').innerHTML = `<p class="text-danger">Error: ${error.message}</p>`; | |
| } finally { | |
| document.getElementById('loading').style.display = 'none'; | |
| } | |
| } | |
| async function translateText() { | |
| document.getElementById('loading').style.display = 'block'; | |
| const summarizedText = document.querySelector('#result p').textContent; | |
| try { | |
| const response = await fetch('/translate', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ text: summarizedText }) | |
| }); | |
| const result = await response.json(); | |
| if (result.error) throw new Error(result.error); | |
| document.getElementById('result').innerHTML += ` | |
| <h3>Translated Text (Hindi):</h3> | |
| <p>${result.translated_text}</p> | |
| `; | |
| document.getElementById('translateButton').style.display = 'none'; | |
| } catch (error) { | |
| document.getElementById('result').innerHTML += `<p class="text-danger">Error: ${error.message}</p>`; | |
| } finally { | |
| document.getElementById('loading').style.display = 'none'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |