Add missing files, update for gradio 4 compatibility.

app.py

@@ -2,6 +2,7 @@
 # pip install html2image
 import base64
 import random
+import uuid
 from io import BytesIO
 
 import imgkit
@@ -125,7 +126,10 @@ Color: ['W']
     if len(new_card_text) > 1:
         new_card_text = new_card_text[1].strip()
     else:
-        new_card_text = new_card_text.split('\n\n')[1].strip()
+        new_card_text = new_card_text.split('\n\n')
+        if len(new_card_text) < 2:
+            return assistant_reply, card_text, None
+        new_card_text = new_card_text[1].strip()
     return assistant_reply, new_card_text, None
 
 
@@ -227,7 +231,7 @@ def format_html(text, image_data):
                                     f'<header class="powerToughness"><div><h2 style="font-family: \'Beleren\';font-size: 19px;">{power}/{toughness}</h2></div></header>')
     else:
         template = template.replace("{power_toughness}", "")
-    pathlib.Path("test.html").write_text(template, encoding='utf-8')
+    pathlib.Path("scratch.html").write_text(template, encoding='utf-8')
     return template
 
 
@@ -290,7 +294,9 @@ def pil_to_base64(image):
 def generate_card(image: str, card_text: str):
     image_data = pil_to_base64(Image.open(image))
     html = format_html(card_text, image_data)
-    card = html_to_png('TEST', html)
+    pattern = re.compile('Name: (.*)')
+    name = pattern.findall(card_text)[0]
+    card = html_to_png(name, html)
     return card
 
 
@@ -341,8 +347,8 @@ with gr.Blocks(title='MagicGen') as demo:
     with gr.Row():
         with gr.Column():
             with gr.Group():
-                audio_in = gr.Audio(label="Record a voice request (click or press ctrl + ` to start/stop)",
-                                    source='microphone', type='filepath', elem_classes=["record-btn"])
+                audio_in = gr.Microphone(label="Record a voice request (click or press ctrl + ` to start/stop)",
+                                         type='filepath', elem_classes=["record-btn"])
                 prompt_in = gr.Textbox(label="Or type a text request and press Enter", interactive=True,
                                        placeholder="Need an idea? Try one of these:\n- Create a creature card named 'WiFi Elemental'\n- Make it an instant\n- Change the color")
             with gr.Accordion(label='🤖 Chat Assistant Response', open=False):
@@ -370,8 +376,9 @@ with gr.Blocks(title='MagicGen') as demo:
         generate_card, [in_image, in_text], [out_image], None)
     in_text.submit(generate_image, [in_text], [in_image], None).then(generate_card, [in_image, in_text], [out_image],
                                                                      None)
-    run_button.click(generate_image, [in_text], [in_image], None).then(generate_card, [in_image, in_text], [out_image], None)
-    demo.load(None, None, None, _js=add_hotkeys())
+    run_button.click(generate_image, [in_text], [in_image], None).then(generate_card, [in_image, in_text], [out_image],
+                                                                       None)
+    demo.load(None, None, None, js=add_hotkeys())
 
 if __name__ == "__main__":
     demo.queue().launch(favicon_path="favicon-96x96.png")

hotkeys.js

@@ -12,11 +12,10 @@
     }
     window.addEventListener('keydown', (e) => {
         if ((e.ctrlKey || e.metaKey) && e.key == "`") { // CTRL + ` key
-            const recordButtons = gradioApp().querySelectorAll(".record-btn button");
-            for (let recordButton of recordButtons) {
-                if (recordButton.checkVisibility()) {
-                    recordButton.click();
-                }
+            const recordButtons = [...gradioApp().querySelectorAll('button.record.record-button')].filter(x => x.checkVisibility());
+            const stopButtons = [...gradioApp().querySelectorAll('button.stop-button')].filter(x => x.checkVisibility());
+            for (let button of recordButtons.concat(stopButtons)) {
+                button.click();
             }
         }
     });