|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Grammar Corrector</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
padding: 20px; |
|
|
max-width: 600px; |
|
|
margin: auto; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
color: #4CAF50; |
|
|
} |
|
|
|
|
|
textarea { |
|
|
width: 100%; |
|
|
height: 150px; |
|
|
margin-top: 10px; |
|
|
padding: 10px; |
|
|
font-size: 1em; |
|
|
} |
|
|
|
|
|
button { |
|
|
margin-top: 15px; |
|
|
padding: 10px 20px; |
|
|
font-size: 1em; |
|
|
background-color: #4CAF50; |
|
|
color: white; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
button:hover { |
|
|
background-color: #45a049; |
|
|
} |
|
|
|
|
|
.output { |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.output p { |
|
|
font-size: 1.1em; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Grammar Correction using T5</h1> |
|
|
|
|
|
<textarea id="inputText" placeholder="Type your sentence here..."></textarea> |
|
|
<button onclick="correctGrammar()">Correct Grammar</button> |
|
|
|
|
|
<div class="output" id="result" style="display: none;"> |
|
|
<h3>Results:</h3> |
|
|
<p><strong>Original:</strong> <span id="baselineText"></span></p> |
|
|
<p><strong>Corrected:</strong> <span id="correctedText"></span></p> |
|
|
<p><strong>Score:</strong> <span id="scoreText"></span></p> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
async function correctGrammar() { |
|
|
const text = document.getElementById("inputText").value.trim(); |
|
|
|
|
|
if (!text) { |
|
|
alert("Please enter some text."); |
|
|
return; |
|
|
} |
|
|
|
|
|
try { |
|
|
const response = await fetch("http://127.0.0.1:5000/predict", { |
|
|
method: "POST", |
|
|
headers: { |
|
|
"Content-Type": "application/json" |
|
|
}, |
|
|
body: JSON.stringify({ text: text }) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
if (response.ok) { |
|
|
document.getElementById("baselineText").textContent = data.baseline; |
|
|
document.getElementById("correctedText").textContent = data.improved; |
|
|
document.getElementById("scoreText").textContent = data.score; |
|
|
document.getElementById("result").style.display = "block"; |
|
|
} else { |
|
|
alert("Error: " + (data.error || "Unknown error")); |
|
|
} |
|
|
} catch (error) { |
|
|
alert("Request failed: " + error.message); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
