Spaces:
Runtime error
Runtime error
File size: 6,729 Bytes
fa53be0 465850b fa53be0 308cd79 c49393b 308cd79 c49393b 308cd79 c49393b 308cd79 c49393b 308cd79 8b0f70d 308cd79 465850b c49393b 308cd79 465850b 308cd79 69d37ef 308cd79 8b0f70d 308cd79 9eb7cee fa53be0 465850b 8b0f70d 465850b 69d37ef 4e6b8bd 465850b a995380 465850b 308cd79 c49393b 8b0f70d c49393b 8b0f70d 465850b fa53be0 9eb7cee 465850b 8b0f70d 308cd79 8b0f70d 308cd79 465850b 9eb7cee fa53be0 fafbcc3 | 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 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 | <!DOCTYPE html>
<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> |