|
|
<!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="{{ 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 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>21B91A6131, 21B91A6106, 21B91A6119, 21B91A6121</p> |
|
|
<p>Guided By: A. L. Lavanya, Assistant Professor, CSE, SRKREC.</p> |
|
|
</footer> |
|
|
|
|
|
<script src="{{ request.url_for('static', path='js/main.js') }}"></script> |
|
|
|
|
|
</body> |
|
|
</html> |
