Hugging Face's logo

Spaces:
Alexvatti
/
Writing-Essay-Analyzer
Running

App Files Community
Alexvatti commited on
Commit
62d2e43
·
verified ·
1 Parent(s): 86f6ee6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +109 -18
index.html CHANGED
@@ -1,19 +1,110 @@
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>Writing Feedback Tool</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
10
+ background: linear-gradient(to right, #e0f7fa, #f1f8e9);
11
+ margin: 0;
12
+ padding: 2rem;
13
+ color: #333;
14
+ }
15
+ .container {
16
+ max-width: 800px;
17
+ margin: 0 auto;
18
+ background: white;
19
+ padding: 2rem;
20
+ border-radius: 12px;
21
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
22
+ }
23
+ h2 {
24
+ text-align: center;
25
+ color: #00796b;
26
+ }
27
+ label {
28
+ font-weight: bold;
29
+ margin-top: 1rem;
30
+ }
31
+ select, textarea, button {
32
+ width: 100%;
33
+ padding: 0.75rem;
34
+ margin-top: 0.5rem;
35
+ margin-bottom: 1.5rem;
36
+ border: 1px solid #ccc;
37
+ border-radius: 8px;
38
+ font-size: 1rem;
39
+ }
40
+ button {
41
+ background-color: #00796b;
42
+ color: white;
43
+ border: none;
44
+ cursor: pointer;
45
+ transition: background-color 0.3s;
46
+ }
47
+ button:hover {
48
+ background-color: #004d40;
49
+ }
50
+ .feedback {
51
+ display: none;
52
+ background: #f9fbe7;
53
+ padding: 1.5rem;
54
+ border-radius: 10px;
55
+ border-left: 6px solid #cddc39;
56
+ margin-top: 2rem;
57
+ }
58
+ .feedback h3 {
59
+ color: #558b2f;
60
+ }
61
+ .feedback p {
62
+ margin: 0.5rem 0;
63
+ }
64
+ </style>
65
+ </head>
66
+ <body>
67
+ <div class="container">
68
+ <h2>Writing Feedback Tool</h2>
69
+ <label for="exam-type">Select Exam Type:</label>
70
+ <select id="exam-type">
71
+ <option value="IELTS">IELTS</option>
72
+ <option value="CBSE">CBSE</option>
73
+ <option value="College">College Essay</option>
74
+ </select>
75
+
76
+ <label for="essay">Enter Student Essay (max 1000 words):</label>
77
+ <textarea id="essay" rows="10"></textarea>
78
+
79
+ <button onclick="getFeedback()">Get Feedback</button>
80
+
81
+ <div id="feedback" class="feedback"></div>
82
+ </div>
83
+
84
+ <script>
85
+ async function getFeedback() {
86
+ const examType = document.getElementById('exam-type').value;
87
+ const essay = document.getElementById('essay').value;
88
+
89
+ const response = await fetch('https://alexvatti-english-essay-writing-analyst.hf.space/feedback', {
90
+ method: 'POST',
91
+ headers: { 'Content-Type': 'application/json' },
92
+ body: JSON.stringify({ exam_type: examType, essay_text: essay })
93
+ });
94
+
95
+ const data = await response.json();
96
+ console.log("API Response:", data);
97
+ const feedbackDiv = document.getElementById('feedback');
98
+ feedbackDiv.innerHTML = `
99
+ <h3>Feedback Summary</h3>
100
+ <p><strong>Logic & Relevance:</strong> ${data.logic}</p>
101
+ <p><strong>Grammar & Style:</strong> ${data.grammar}</p>
102
+ <p><strong>Score:</strong> ${data.score}</p>
103
+ <p><strong>Suggestions:</strong> ${data.suggestions}</p>
104
+ `;
105
+ feedbackDiv.style.display = 'block';
106
+ }
107
+ </script>
108
+ </body>
109
  </html>
110
+