Hugging Face's logo

Spaces:
gaur3009
/
whyiwant
Running

App Files Community
gaur3009 commited on
Commit
e47c379
·
verified ·
1 Parent(s): 202c832

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +123 -19
index.html CHANGED
@@ -1,19 +1,123 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>Speech Grammar Checker</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background: #f1f3f8;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+ header {
15
+ background: #4a90e2;
16
+ color: white;
17
+ padding: 1em 2em;
18
+ text-align: center;
19
+ font-size: 1.5em;
20
+ }
21
+ .container {
22
+ max-width: 700px;
23
+ margin: 2em auto;
24
+ background: white;
25
+ padding: 2em;
26
+ border-radius: 10px;
27
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
28
+ }
29
+ textarea {
30
+ width: 100%;
31
+ height: 120px;
32
+ padding: 1em;
33
+ font-size: 1em;
34
+ border: 1px solid #ccc;
35
+ border-radius: 8px;
36
+ resize: vertical;
37
+ }
38
+ button {
39
+ background: #4a90e2;
40
+ color: white;
41
+ padding: 0.75em 1.5em;
42
+ border: none;
43
+ font-size: 1em;
44
+ margin-top: 1em;
45
+ border-radius: 6px;
46
+ cursor: pointer;
47
+ }
48
+ button:hover {
49
+ background: #3c7dcf;
50
+ }
51
+ .result {
52
+ margin-top: 1.5em;
53
+ background: #f9f9f9;
54
+ border-left: 4px solid #4a90e2;
55
+ padding: 1em;
56
+ border-radius: 5px;
57
+ font-size: 1em;
58
+ white-space: pre-wrap;
59
+ }
60
+ footer {
61
+ margin-top: 3em;
62
+ text-align: center;
63
+ color: #888;
64
+ font-size: 0.9em;
65
+ }
66
+ </style>
67
+ </head>
68
+ <body>
69
+
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-speech-grammar.hf.space/run/predict", {
104
+ method: "POST",
105
+ headers: { "Content-Type": "application/json" },
106
+ body: JSON.stringify({ data: [inputText] })
107
+ });
108
+
109
+ const data = await response.json();
110
+
111
+ // Adjust this based on your API's actual response structure
112
+ const prediction = data?.data?.[0] || "⚠️ Unexpected API response.";
113
+ resultText.innerText = prediction;
114
+
115
+ } catch (error) {
116
+ resultText.innerText = "❌ Error connecting to grammar checker API.";
117
+ console.error(error);
118
+ }
119
+ }
120
+ </script>
121
+
122
+ </body>
123
+ </html>