Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>Table QA Experiment</title> | |
| <style> | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| margin: 0; | |
| padding: 20px; | |
| background-color: #f5f5f5; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background-color: white; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #333; | |
| margin-bottom: 30px; | |
| } | |
| .progress { | |
| text-align: center; | |
| font-size: 1.2em; | |
| color: #666; | |
| margin-bottom: 20px; | |
| } | |
| .explanations-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| margin-bottom: 40px; | |
| } | |
| .explanation-card { | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| height: 600px; | |
| } | |
| .explanation-header { | |
| background-color: #f8f9fa; | |
| padding: 15px; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .explanation-header h2 { | |
| margin: 0; | |
| color: #333; | |
| font-size: 1.2em; | |
| } | |
| .explanation-content { | |
| padding: 0; | |
| height: calc(100% - 53px); | |
| overflow-y: auto; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .ranking-section { | |
| position: sticky; | |
| bottom: 0; | |
| background: white; | |
| padding: 20px; | |
| border-top: 3px solid #4CAF50; | |
| box-shadow: 0 -2px 10px rgba(0,0,0,0.1); | |
| margin-top: 40px; | |
| } | |
| .ranking-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 15px; | |
| margin: 20px 0; | |
| } | |
| .ranking-item { | |
| background: #f8f9fa; | |
| padding: 15px; | |
| border-radius: 8px; | |
| text-align: center; | |
| } | |
| .ranking-item label { | |
| display: block; | |
| margin-bottom: 10px; | |
| font-weight: bold; | |
| color: #333; | |
| } | |
| .ranking-item select { | |
| width: 60px; | |
| padding: 8px; | |
| border: 2px solid #ddd; | |
| border-radius: 4px; | |
| text-align: center; | |
| font-size: 1.1em; | |
| } | |
| .ranking-item select option { | |
| padding: 4px; | |
| } | |
| .submit-button { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 15px 30px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 1.1em; | |
| display: block; | |
| margin: 20px auto; | |
| transition: background-color 0.3s; | |
| } | |
| .submit-button:hover { | |
| background-color: #45a049; | |
| } | |
| .instructions { | |
| background-color: #e9f5e9; | |
| border-left: 4px solid #4CAF50; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| border-radius: 4px; | |
| } | |
| .error-message { | |
| color: #d32f2f; | |
| text-align: center; | |
| margin: 10px 0; | |
| padding: 10px; | |
| background-color: #fde8e8; | |
| border-radius: 4px; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="progress">Sample {{ sample_id + 1 }} of 10</div> | |
| <div class="instructions"> | |
| <h3>Ranking Instructions:</h3> | |
| <p>Please examine each explanation method and rank them based on:</p> | |
| <ul> | |
| <li><strong>Clarity:</strong> How easy is the explanation to understand?</li> | |
| <li><strong>Coherence:</strong> Does the explanation logically flow and make sense?</li> | |
| <li><strong>Helpfulness:</strong> How well does it reveal the model's reasoning?</li> | |
| </ul> | |
| <p>Assign ranks from 1 (best) to 4 (worst). Each rank can only be used once.</p> | |
| </div> | |
| <div class="explanations-grid"> | |
| {% for method in methods %} | |
| <div class="explanation-card"> | |
| <div class="explanation-header"> | |
| <h2>{{ method }}</h2> | |
| </div> | |
| <div class="explanation-content"> | |
| <iframe src="{{ visualizations[method] }}" title="{{ method }}"></iframe> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <div class="ranking-section"> | |
| <form id="rankingForm" action="{{ url_for('experiment', session_id=session_id) }}" method="post" onsubmit="return validateRankings()"> | |
| <div class="ranking-grid"> | |
| {% for method in methods %} | |
| <div class="ranking-item"> | |
| <label for="{{ method }}">{{ method }}</label> | |
| <select id="{{ method }}" name="{{ method }}" required> | |
| <option value="" selected disabled>Rank</option> | |
| <option value="1">1 (Best)</option> | |
| <option value="2">2</option> | |
| <option value="3">3</option> | |
| <option value="4">4 (Worst)</option> | |
| </select> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <div id="errorMessage" class="error-message"></div> | |
| <button type="submit" class="submit-button">Submit Rankings</button> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| function validateRankings() { | |
| const rankings = new Set(); | |
| const form = document.getElementById('rankingForm'); | |
| const errorMessage = document.getElementById('errorMessage'); | |
| for (const select of form.getElementsByTagName('select')) { | |
| const value = select.value; | |
| if (!value) { | |
| errorMessage.textContent = 'Please rank all methods.'; | |
| errorMessage.style.display = 'block'; | |
| return false; | |
| } | |
| rankings.add(value); | |
| } | |
| if (rankings.size !== 4) { | |
| errorMessage.textContent = 'Please assign unique ranks (1-4) to each method.'; | |
| errorMessage.style.display = 'block'; | |
| return false; | |
| } | |
| return true; | |
| } | |
| </script> | |
| </body> | |
| </html> |