Firing buttons with colors (#3)

- Firing buttons with colors (563b65224962a273f4023dbd7e5793285eb8de1c)
- Update app.py (01006ae7e5c0f2c7d597de9dc58be4ebc591a784)
- Update app.py (c6b69d9c65ecd6f243973db46141ba393cb7076b)


Co-authored-by: Apolinário from multimodal AI art <multimodalart@users.noreply.huggingface.co>

app.py

@@ -162,8 +162,17 @@ 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);
+    }
+    100% {
+      background: var(--button-secondary-background-fill);
+    }
+}
 '''
-js = '''
+js_head = '''
 <script>
 document.addEventListener('keydown', function(event) {
     if (event.key === 'a' || event.key === 'A') {
@@ -177,10 +186,30 @@ 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>
 '''
 
-with gr.Blocks(css=css, head=js) as demo:
+with gr.Blocks(css=css, head=js_head) as demo:
     gr.Markdown('''# Generative Recommenders
     Explore the latent space without text prompts, based on your preferences. [Learn more on the blog](https://rynmurdock.github.io/posts/2024/3/generative_recomenders/)
     ''', elem_id="description")