Firing buttons with colors

app.py

@@ -161,9 +161,17 @@ def choose(choice, embs, ys, calibrate_prompts):
 css = '''.gradio-container{max-width: 700px !important}
 #description{text-align: center}
 #description h1{display: block}
-#description p{margin-top: 0}
+.fade-in-out {animation: fadeInOut 3s forwards}
+@keyframes fadeInOut {
+    0% {
+      background: var(--bg-color); /* Immediately set to the target color */
+    }
+    100% {
+      background: var(--button-secondary-background-fill); /* Gradually fade back to the original */
+    }
+}
 '''
-js = '''
+js_head = '''
 <script>
 document.addEventListener('keydown', function(event) {
     if (event.key === 'a' || event.key === 'A') {
@@ -177,6 +185,26 @@ document.addEventListener('keydown', function(event) {
         document.getElementById('like').click();
     }
 });
+function fadeInOut(button, color) {
+  button.style.setProperty('--bg-color', color);
+  button.classList.remove('fade-in-out');
+  void button.offsetWidth; // This line forces a repaint by accessing a DOM property
+  
+  button.classList.add('fade-in-out');
+  button.addEventListener('animationend', () => {
+    button.classList.remove('fade-in-out'); // Reset the animation state
+  }, {once: true});
+}
+document.body.addEventListener('click', function(event) {
+    const target = event.target;
+    if (target.id === 'dislike') {
+      fadeInOut(target, '#ff1717');
+    } else if (target.id === 'like') {
+      fadeInOut(target, '#006500');
+    } else if (target.id === 'neither') {
+      fadeInOut(target, '#cccccc');
+    }
+});
 </script>
 '''