Spaces:
Sleeping
Sleeping
Commit
•
563b652
1
Parent(s):
b1772c8
Firing buttons with colors
Browse files
app.py
CHANGED
@@ -161,9 +161,17 @@ def choose(choice, embs, ys, calibrate_prompts):
|
|
161 |
css = '''.gradio-container{max-width: 700px !important}
|
162 |
#description{text-align: center}
|
163 |
#description h1{display: block}
|
164 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
165 |
'''
|
166 |
-
|
167 |
<script>
|
168 |
document.addEventListener('keydown', function(event) {
|
169 |
if (event.key === 'a' || event.key === 'A') {
|
@@ -177,6 +185,26 @@ document.addEventListener('keydown', function(event) {
|
|
177 |
document.getElementById('like').click();
|
178 |
}
|
179 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
180 |
</script>
|
181 |
'''
|
182 |
|
|
|
161 |
css = '''.gradio-container{max-width: 700px !important}
|
162 |
#description{text-align: center}
|
163 |
#description h1{display: block}
|
164 |
+
.fade-in-out {animation: fadeInOut 3s forwards}
|
165 |
+
@keyframes fadeInOut {
|
166 |
+
0% {
|
167 |
+
background: var(--bg-color); /* Immediately set to the target color */
|
168 |
+
}
|
169 |
+
100% {
|
170 |
+
background: var(--button-secondary-background-fill); /* Gradually fade back to the original */
|
171 |
+
}
|
172 |
+
}
|
173 |
'''
|
174 |
+
js_head = '''
|
175 |
<script>
|
176 |
document.addEventListener('keydown', function(event) {
|
177 |
if (event.key === 'a' || event.key === 'A') {
|
|
|
185 |
document.getElementById('like').click();
|
186 |
}
|
187 |
});
|
188 |
+
function fadeInOut(button, color) {
|
189 |
+
button.style.setProperty('--bg-color', color);
|
190 |
+
button.classList.remove('fade-in-out');
|
191 |
+
void button.offsetWidth; // This line forces a repaint by accessing a DOM property
|
192 |
+
|
193 |
+
button.classList.add('fade-in-out');
|
194 |
+
button.addEventListener('animationend', () => {
|
195 |
+
button.classList.remove('fade-in-out'); // Reset the animation state
|
196 |
+
}, {once: true});
|
197 |
+
}
|
198 |
+
document.body.addEventListener('click', function(event) {
|
199 |
+
const target = event.target;
|
200 |
+
if (target.id === 'dislike') {
|
201 |
+
fadeInOut(target, '#ff1717');
|
202 |
+
} else if (target.id === 'like') {
|
203 |
+
fadeInOut(target, '#006500');
|
204 |
+
} else if (target.id === 'neither') {
|
205 |
+
fadeInOut(target, '#cccccc');
|
206 |
+
}
|
207 |
+
});
|
208 |
</script>
|
209 |
'''
|
210 |
|