Hugging Face's logo

Spaces:
yeswanthvarma
/
answer-evaluation-app
Sleeping

App Files Community
answer-evaluation-app
File size: 8,015 Bytes 
5888c6a
 
 
 
 
 
17f30cf
a47415e
5888c6a
 
 
 
67f4656
5888c6a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c401e82
 
27f27a1
67f4656
c401e82
 
 
 
 
 
 
 
 
 
 
 
 
67f4656
 
5888c6a
c401e82
5888c6a
 
 
 
 
 
 
 
 
 
 
 
dd82717
a47415e
 
5888c6a
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Answer Evaluation System</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="{{ request.url_for('static', path='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">

        <header>
            <h1>Answer Evaluation System</h1>
            <p>Upload images of question, student answer, and reference answer for evaluation</p>
        </header>

        <div class="evaluation-flow">
            <div class="flow-step active">
                <div class="step-icon"><i class="fas fa-upload"></i></div>
                <div class="step-label">Upload Files</div>
            </div>
            <div class="flow-connector"></div>
            <div class="flow-step">
                <div class="step-icon"><i class="fas fa-cogs"></i></div>
                <div class="step-label">Preprocessing</div>
            </div>
            <div class="flow-connector"></div>
            <div class="flow-step">
                <div class="step-icon"><i class="fas fa-brain"></i></div>
                <div class="step-label">Evaluating Answer</div>
            </div>
            <div class="flow-connector"></div>
            <div class="flow-step">
                <div class="step-icon"><i class="fas fa-percentage"></i></div>
                <div class="step-label">Score</div>
            </div>
        </div>

        <div class="upload-section">
            <form id="evaluation-form" method="post" action="/evaluate" enctype="multipart/form-data">
                <div class="upload-cards">
                    <div class="upload-card">
                        <div class="card-header">
                            <i class="fas fa-question-circle"></i>
                            <h3>Question</h3>
                        </div>
                        <div class="upload-area" id="question-upload">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>Drag & Drop or Click to Upload</p>
                            <input type="file" name="question" id="question-input" accept="image/png, image/jpeg, image/jpg" hidden>
                        </div>
                        <div class="preview" id="question-preview"></div>
                    </div>

                    <div class="upload-card">
                        <div class="card-header">
                            <i class="fas fa-user-graduate"></i>
                            <h3>Student Answer</h3>
                        </div>
                        <div class="upload-area" id="student-upload">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>Drag & Drop or Click to Upload</p>
                            <input type="file" name="student_answer" id="student-input" accept="image/png, image/jpeg, image/jpg" hidden>
                        </div>
                        <div class="preview" id="student-preview"></div>
                    </div>

                    <div class="upload-card">
                        <div class="card-header">
                            <i class="fas fa-check-circle"></i>
                            <h3>Reference Answer</h3>
                        </div>
                        <div class="upload-area" id="reference-upload">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>Drag & Drop or Click to Upload</p>
                            <input type="file" name="reference_answer" id="reference-input" accept="image/png, image/jpeg, image/jpg" hidden>
                        </div>
                        <div class="preview" id="reference-preview"></div>
                    </div>
                </div>

                <button type="submit" id="evaluate-btn" disabled>
                    <i class="fas fa-calculator"></i> Evaluate Answer
                </button>
            </form>
        </div>

        <div class="results-section" style="display: none;">
            <div class="results-header">
                <h2>Evaluation Results</h2>
                <button id="new-evaluation-btn"><i class="fas fa-redo"></i> New Evaluation</button>
            </div>

            <div class="extracted-text">
                <div class="text-section">
                    <h3><i class="fas fa-question-circle"></i> Question</h3>
                    <div class="text-content" id="question-text"></div>
                </div>
                <div class="text-section">
                    <h3><i class="fas fa-user-graduate"></i> Student Answer</h3>
                    <div class="text-content" id="student-text"></div>
                </div>
                <div class="text-section">
                    <h3><i class="fas fa-check-circle"></i> Reference Answer</h3>
                    <div class="text-content" id="reference-text"></div>
                </div>
            </div>

            <div class="score-display">
                <div class="score-circle">
                    <div class="score-value" id="score-value">0%</div>
                    <svg class="score-svg" width="200" height="200">
                        <circle class="score-background" cx="100" cy="100" r="90"></circle>
                        <circle class="score-progress" cx="100" cy="100" r="90"></circle>
                    </svg>
                </div>
                <div class="score-label">Similarity Score</div>
                <div class="score-message" id="score-message"></div>
            </div>
        </div>

      <div style="background-color: #fff3cd; border: 1px solid #ffeeba; padding: 16px; border-radius: 8px; margin-bottom: 24px; font-family: 'Segoe UI', sans-serif; font-size: 15px;">
  ⚠️ <strong>This is a Initial Version</strong> developed using limited training data and basic OCR techniques.<br>
  The scoring model is trained on small examples and may not reflect final production accuracy.<br>
  Improvements like advanced OCR (TrOCR) and larger datasets are planned.<br><br>

  <div style="background-color: #ffffff; border: 1px dashed #ccc; padding: 12px; border-radius: 6px;">
    🔍 <strong>Try with Sample Inputs:</strong>
    <ul style="list-style: none; padding-left: 0; margin-top: 8px;">
      <li>📘 <a href="/static/sample_question.png" download style="text-decoration: none; color: #007bff;">Download Sample Question</a></li>
      <li>🧑 <a href="/static/sample_student_answer.png" download style="text-decoration: none; color: #007bff;">Download Student Answer</a></li>
      <li>📗 <a href="/static/sample_reference_answer.png" download style="text-decoration: none; color: #007bff;">Download Reference Answer</a></li>
      <li>📘 <a href="/static/sample_question1.png" download style="text-decoration: none; color: #007bff;">Download Sample Question_1</a></li>
      <li>🧑 <a href="/static/sample_student_answer1.png" download style="text-decoration: none; color: #007bff;">Download Student Answer_1</a></li>
      <li>📗 <a href="/static/sample_reference_answer1.png" download style="text-decoration: none; color: #007bff;">Download Reference Answer_1</a></li>
    </ul>
  </div>
</div>



        <div class="loading-overlay" style="display: none;">
            <div class="loading-content">
                <div class="spinner"></div>
                <div class="loading-step" id="loading-step">Uploading files...</div>
            </div>
        </div>
    </div>

    <footer>
        <p>© 2025 Answer Evaluation System | Powered by XLNet</p>
        <p>Guided By: A. L. Lavanya, Assistant Professor, CSE, SRKREC.</p>
    </footer>
    <script src="/static/js/main.js"></script>
    <script src="{{ request.url_for('static', path='js/main.js') }}"></script>

</body>
</html>