|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Speech Grammar Checker</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
background: #f1f3f8; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
header { |
|
|
background: #4a90e2; |
|
|
color: white; |
|
|
padding: 1em 2em; |
|
|
text-align: center; |
|
|
font-size: 1.5em; |
|
|
} |
|
|
.container { |
|
|
max-width: 700px; |
|
|
margin: 2em auto; |
|
|
background: white; |
|
|
padding: 2em; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
|
|
} |
|
|
textarea { |
|
|
width: 100%; |
|
|
height: 120px; |
|
|
padding: 1em; |
|
|
font-size: 1em; |
|
|
border: 1px solid #ccc; |
|
|
border-radius: 8px; |
|
|
resize: vertical; |
|
|
} |
|
|
button { |
|
|
background: #4a90e2; |
|
|
color: white; |
|
|
padding: 0.75em 1.5em; |
|
|
border: none; |
|
|
font-size: 1em; |
|
|
margin-top: 1em; |
|
|
border-radius: 6px; |
|
|
cursor: pointer; |
|
|
} |
|
|
button:hover { |
|
|
background: #3c7dcf; |
|
|
} |
|
|
.result { |
|
|
margin-top: 1.5em; |
|
|
background: #f9f9f9; |
|
|
border-left: 4px solid #4a90e2; |
|
|
padding: 1em; |
|
|
border-radius: 5px; |
|
|
font-size: 1em; |
|
|
white-space: pre-wrap; |
|
|
} |
|
|
footer { |
|
|
margin-top: 3em; |
|
|
text-align: center; |
|
|
color: #888; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header>🗣️ Speech Grammar Checker</header> |
|
|
|
|
|
<div class="container"> |
|
|
<label for="speechInput"><strong>Paste your speech or sentence below:</strong></label> |
|
|
<textarea id="speechInput" placeholder="Enter your sentence..."></textarea> |
|
|
<button onclick="checkGrammar()">Check Grammar</button> |
|
|
|
|
|
<div class="result" id="resultBox" style="display: none;"> |
|
|
<strong>Result:</strong> |
|
|
<div id="resultText"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer> |
|
|
Made with ❤️ using Hugging Face API | Rookus.ai |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
async function checkGrammar() { |
|
|
const inputText = document.getElementById("speechInput").value.trim(); |
|
|
const resultBox = document.getElementById("resultBox"); |
|
|
const resultText = document.getElementById("resultText"); |
|
|
|
|
|
if (!inputText) { |
|
|
resultText.innerText = "❗ Please enter some text to check."; |
|
|
resultBox.style.display = "block"; |
|
|
return; |
|
|
} |
|
|
|
|
|
resultText.innerText = "⏳ Checking grammar..."; |
|
|
resultBox.style.display = "block"; |
|
|
|
|
|
try { |
|
|
const response = await fetch("https://gaur3009-speech-grammar.hf.space/run/predict", { |
|
|
method: "POST", |
|
|
headers: { "Content-Type": "application/json" }, |
|
|
body: JSON.stringify({ |
|
|
data: [null, inputText], |
|
|
fn_index: 2 |
|
|
}) |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(`HTTP error! Status: ${response.status}`); |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
const prediction = data?.data?.[0]; |
|
|
const confidence = data?.data?.[1]; |
|
|
|
|
|
if (prediction !== undefined) { |
|
|
resultText.innerText = `✅ Corrected: ${prediction}\n🔍 Confidence: ${confidence}%`; |
|
|
} else { |
|
|
resultText.innerText = "⚠️ Unexpected API response format."; |
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
resultText.innerText = "❌ Error connecting to grammar checker API."; |
|
|
console.error(error); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
