code: def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
      from modules.ui import switch_values_symbol
  
      ui = ExtraNetworksUi()
      ui.pages = []
      ui.pages_contents = []
      ui.user_metadata_editors = []
      ui.stored_extra_pages = pages_in_preferred_order(
          extra_pages.copy()
      )
      ui.tabname = tabname
  
      related_tabs = []
  
      for page in ui.stored_extra_pages:
          with gr.Tab(
              page.title,
              elem_id=f"{tabname}_{page.id_page}",
              elem_classes=["extra-page"],
          ) as tab:
              with gr.Column(
                  elem_id=f"{tabname}_{page.id_page}_prompts",
                  elem_classes=["extra-page-prompts"],
              ):
                  pass
  
              elem_id = f"{tabname}_{page.id_page}_cards_html"
              page_elem = gr.HTML("Loading...", elem_id=elem_id)
              ui.pages.append(page_elem)
  
              page_elem.change(
                  fn=lambda: None,
                  _js="function(){applyExtraNetworkFilter("
                  + quote_js(tabname)
                  + "); return []}",
                  inputs=[],
                  outputs=[],
              )
  
              editor = page.create_user_metadata_editor(ui, tabname)
              editor.create_ui()
              ui.user_metadata_editors.append(editor)
  
              related_tabs.append(tab)
  
      edit_search = gr.Textbox(
          "",
          show_label=False,
          elem_id=tabname + "_extra_search",
          elem_classes="search",
          placeholder="Search...",
          visible=False,
          interactive=True,
      )
      dropdown_sort = gr.Dropdown(
          choices=[
              "Path",
              "Name",
              "Date Created",
              "Date Modified",
          ],
          value=shared.opts.extra_networks_card_order_field,
          elem_id=tabname + "_extra_sort",
          elem_classes="sort",
          multiselect=False,
          visible=False,
          show_label=False,
          interactive=True,
          label=tabname + "_extra_sort_order",
      )
      button_sortorder = ToolButton(
          switch_values_symbol,
          elem_id=tabname + "_extra_sortorder",
          elem_classes=["sortorder"]
          + (
              []
              if shared.opts.extra_networks_card_order == "Ascending"
              else ["sortReverse"]
          ),
          visible=False,
          tooltip="Invert sort order",
      )
      button_refresh = gr.Button(
          "Refresh", elem_id=tabname + "_extra_refresh", visible=False
      )
      checkbox_show_dirs = gr.Checkbox(
          True,
          label="Show dirs",
          elem_id=tabname + "_extra_show_dirs",
          elem_classes="show-dirs",
          visible=False,
      )
  
      ui.button_save_preview = gr.Button(
          "Save preview",
          elem_id=tabname + "_save_preview",
          visible=False,
      )
      ui.preview_target_filename = gr.Textbox(
          "Preview save filename",
          elem_id=tabname + "_preview_filename",
          visible=False,
      )
  
      tab_controls = [
          edit_search,
          dropdown_sort,
          button_sortorder,
          button_refresh,
          checkbox_show_dirs,
      ]
  
      for tab in unrelated_tabs:
          tab.select(
              fn=lambda: [
                  gr.update(visible=False) for _ in tab_controls
              ],
              _js='function(){ extraNetworksUrelatedTabSelected("'
              + tabname
              + '"); }',
              inputs=[],
              outputs=tab_controls,
              show_progress=False,
          )
  
      for page, tab in zip(ui.stored_extra_pages, related_tabs):
          allow_prompt = "true" if page.allow_prompt else "false"
          allow_negative_prompt = (
              "true" if page.allow_negative_prompt else "false"
          )
  
          jscode = (
              'extraNetworksTabSelected("'
              + tabname
              + '", "'
              + f"{tabname}_{page.id_page}_prompts"
              + '", '
              + allow_prompt
              + ", "
              + allow_negative_prompt
              + ");"
          )
  
          tab.select(
              fn=lambda: [
                  gr.update(visible=True) for _ in tab_controls
              ],
              _js="function(){ " + jscode + " }",
              inputs=[],
              outputs=tab_controls,
              show_progress=False,
          )
  
      dropdown_sort.change(
          fn=lambda: None,
          _js="function(){ applyExtraNetworkSort('" + tabname + "'); }",
      )
  
      def pages_html():
          if not ui.pages_contents:
              return refresh()
  
          return ui.pages_contents
  
      def refresh():
          for pg in ui.stored_extra_pages:
              pg.refresh()
  
          ui.pages_contents = [
              pg.create_html(ui.tabname) for pg in ui.stored_extra_pages
          ]
  
          return ui.pages_contents
  
      interface.load(fn=pages_html, inputs=[], outputs=[*ui.pages])
      button_refresh.click(fn=refresh, inputs=[], outputs=ui.pages)
  
      return ui
  
imports: import functools
  import os.path
  import urllib.parse
  from pathlib import Path
  from modules import shared, ui_extra_networks_user_metadata, errors, extra_networks
  from modules.images import read_info_from_image, save_image_with_geninfo
  import gradio
  import json
  import html
  from fastapi.exceptions import HTTPException
  from modules.generation_parameters_copypaste import image_from_url_text
  from modules.ui_components import ToolButton
label_desc: Use image node_id 12 for calling a global function with example usage: create_ui(interface, unrelated_tabs, tabname) and returns: ui, ui, ui, refresh