Spaces:
Runtime error
Runtime error
File size: 4,290 Bytes
0462a2f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<!DOCTYPE html>
<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> |