Hugging Face's logo

Spaces:
gaur3009
/
whyiwant
Running

App Files Community
gaur3009 commited on
Commit
5d5d780
·
verified ·
1 Parent(s): 90697ac

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +41 -36
index.html CHANGED
@@ -63,6 +63,9 @@
63
  color: #888;
64
  font-size: 0.9em;
65
  }
 
 
 
66
  </style>
67
  </head>
68
  <body>
@@ -70,63 +73,65 @@
70
  <header>🗣️ Speech Grammar Checker</header>
71
 
72
  <div class="container">
73
- <label for="speechInput"><strong>Paste your speech or sentence below:</strong></label>
74
  <textarea id="speechInput" placeholder="Enter your sentence..."></textarea>
 
 
75
  <button onclick="checkGrammar()">Check Grammar</button>
76
 
77
  <div class="result" id="resultBox" style="display: none;">
78
- <strong>Result:</strong>
79
- <div id="resultText"></div>
 
 
80
  </div>
81
  </div>
82
 
83
  <footer>
84
- Made with ❤️ using Hugging Face API | Rookus.ai
85
  </footer>
86
 
87
  <script>
 
 
88
  async function checkGrammar() {
89
- const inputText = document.getElementById("speechInput").value.trim();
90
- const resultBox = document.getElementById("resultBox");
91
- const resultText = document.getElementById("resultText");
92
 
93
- if (!inputText) {
94
- resultText.innerText = "❗ Please enter some text to check.";
95
- resultBox.style.display = "block";
96
- return;
97
- }
98
 
99
- resultText.innerText = "⏳ Checking grammar...";
100
  resultBox.style.display = "block";
 
 
 
 
 
 
 
 
 
 
 
 
101
 
102
  try {
103
- const response = await fetch("https://gaur3009-gr-speech.hf.space/api/predict", {
104
  method: "POST",
105
- headers: { "Content-Type": "application/json" },
106
- body: JSON.stringify({
107
- data: [document.getElementById("speechInput").value.trim()],
108
- fn_index: 0
109
- })
110
  });
111
 
112
- if (!response.ok) {
113
- throw new Error(`HTTP error! Status: ${response.status}`);
114
- }
115
-
116
- const data = await response.json();
117
- const prediction = data?.data?.[0];
118
- const confidence = data?.data?.[1];
119
-
120
- if (prediction !== undefined) {
121
- const [corrected, score] = data.data;
122
- resultText.innerText = `✅ Corrected: ${corrected}\n🔍 Score: ${score}%`;
123
- } else {
124
- resultText.innerText = "⚠️ Unexpected API response format.";
125
- }
126
 
127
- } catch (error) {
128
- resultText.innerText = "❌ Error connecting to grammar checker API.";
129
- console.error(error);
 
 
 
130
  }
131
  }
132
  </script>
 
63
  color: #888;
64
  font-size: 0.9em;
65
  }
66
+ input[type="file"] {
67
+ margin-top: 1em;
68
+ }
69
  </style>
70
  </head>
71
  <body>
 
73
  <header>🗣️ Speech Grammar Checker</header>
74
 
75
  <div class="container">
76
+ <label><strong>Type your sentence or upload speech audio:</strong></label>
77
  <textarea id="speechInput" placeholder="Enter your sentence..."></textarea>
78
+
79
+ <input type="file" id="audioInput" accept="audio/*" />
80
  <button onclick="checkGrammar()">Check Grammar</button>
81
 
82
  <div class="result" id="resultBox" style="display: none;">
83
+ <strong>✅ Results:</strong><br/><br/>
84
+ <strong>Baseline:</strong> <div id="baselineText"></div><br/>
85
+ <strong>Score:</strong> <div id="scoreText"></div><br/>
86
+ <strong>Improved:</strong> <div id="improvedText"></div>
87
  </div>
88
  </div>
89
 
90
  <footer>
91
+ Made with ❤️ using Hugging Face | Rookus.ai
92
  </footer>
93
 
94
  <script>
95
+ const API_URL = "https://gaur3009--Speech_grammar.hf.space/run/predict";
96
+
97
  async function checkGrammar() {
98
+ const text = document.getElementById("speechInput").value.trim();
99
+ const audioFile = document.getElementById("audioInput").files[0];
 
100
 
101
+ const resultBox = document.getElementById("resultBox");
102
+ const baselineText = document.getElementById("baselineText");
103
+ const scoreText = document.getElementById("scoreText");
104
+ const improvedText = document.getElementById("improvedText");
 
105
 
 
106
  resultBox.style.display = "block";
107
+ baselineText.innerText = "⏳ Loading...";
108
+ scoreText.innerText = "";
109
+ improvedText.innerText = "";
110
+
111
+ const formData = new FormData();
112
+ if (audioFile) {
113
+ formData.append("data", audioFile); // audio input
114
+ formData.append("data", ""); // empty text
115
+ } else {
116
+ formData.append("data", null); // no audio
117
+ formData.append("data", text); // text input
118
+ }
119
 
120
  try {
121
+ const response = await fetch(API_URL, {
122
  method: "POST",
123
+ body: formData
 
 
 
 
124
  });
125
 
126
+ const json = await response.json();
127
+ const [baseline, score, improved] = json.data;
 
 
 
 
 
 
 
 
 
 
 
 
128
 
129
+ baselineText.innerText = baseline;
130
+ scoreText.innerText = `${score}%`;
131
+ improvedText.innerText = improved;
132
+ } catch (err) {
133
+ baselineText.innerText = "❌ Error calling API.";
134
+ console.error(err);
135
  }
136
  }
137
  </script>