Make the gallery interactive to load characters

extensions/gallery/script.py

@@ -29,6 +29,10 @@ def generate_html():
       background-color: gray;
     }
 
+    .character-gallery tr {
+      cursor: pointer;
+    }
+
     .character-gallery .image-td {
       width: 150px;
     }
@@ -45,7 +49,7 @@ def generate_html():
     for file in Path("characters").glob("*"):
         if file.name.endswith(".json"):
             character = file.name.replace(".json", "")
-            table_html += "<tr>"
+            table_html += f'<tr onclick=\'document.getElementById("character-menu").children[1].children[1].value = "{character}"; document.getElementById("character-menu").children[1].children[1].dispatchEvent(new Event("change"));\'>'
             image_html = "<div class='placeholder'></div>"
 
             for i in [
@@ -62,7 +66,7 @@ def generate_html():
                     except:
                         continue
 
-            table_html += f'<td class="image-td"=>{image_html}</td><td class="character-td">{character}</td>'
+            table_html += f'<td class="image-td">{image_html}</td><td class="character-td">{character}</td>'
             table_html += "</tr>"
     table_html += "</table></div>"
 

server.py

@@ -207,7 +207,7 @@ if shared.args.chat or shared.args.cai_chat:
             shared.gradio['name2'] = gr.Textbox(value=shared.settings[f'name2{suffix}'], lines=1, label='Bot\'s name')
             shared.gradio['context'] = gr.Textbox(value=shared.settings[f'context{suffix}'], lines=2, label='Context')
             with gr.Row():
-                shared.gradio['character_menu'] = gr.Dropdown(choices=available_characters, value='None', label='Character')
+                shared.gradio['character_menu'] = gr.Dropdown(choices=available_characters, value='None', label='Character', elem_id='character-menu')
                 ui.create_refresh_button(shared.gradio['character_menu'], lambda : None, lambda : {'choices': get_available_characters()}, 'refresh-button')
 
             with gr.Row():