code: def create_html(self, tabname):
      items_html = ""
  
      self.metadata = {}
  
      subdirs = {}
      for parentdir in [
          os.path.abspath(x)
          for x in self.allowed_directories_for_previews()
      ]:
          for root, dirs, _ in sorted(
              os.walk(parentdir, followlinks=True),
              key=lambda x: shared.natural_sort_key(x[0]),
          ):
              for dirname in sorted(dirs, key=shared.natural_sort_key):
                  x = os.path.join(root, dirname)
  
                  if not os.path.isdir(x):
                      continue
  
                  subdir = os.path.abspath(x)[len(parentdir) :].replace(
                      "\\", "/"
                  )
  
                  if shared.opts.extra_networks_dir_button_function:
                      if not subdir.startswith("/"):
                          subdir = "/" + subdir
                  else:
                      while subdir.startswith("/"):
                          subdir = subdir[1:]
  
                  is_empty = len(os.listdir(x)) == 0
                  if not is_empty and not subdir.endswith("/"):
                      subdir = subdir + "/"
  
                  if (
                      ("/." in subdir or subdir.startswith("."))
                      and not shared.opts.extra_networks_show_hidden_directories
                  ):
                      continue
  
                  subdirs[subdir] = 1
  
      if subdirs:
          subdirs = {"": 1, **subdirs}
  
      subdirs_html = "".join(
          [
              f"""
  <button class='lg secondary gradio-button custom-button{" search-all" if subdir=="" else ""}' onclick='extraNetworksSearchButton("{tabname}_extra_search", event)'>
  {html.escape(subdir if subdir!="" else "all")}
  </button>
  """
              for subdir in subdirs
          ]
      )
  
      self.items = {x["name"]: x for x in self.list_items()}
      for item in self.items.values():
          metadata = item.get("metadata")
          if metadata:
              self.metadata[item["name"]] = metadata
  
          if "user_metadata" not in item:
              self.read_user_metadata(item)
  
          items_html += self.create_html_for_item(item, tabname)
  
      if items_html == "":
          dirs = "".join(
              [
                  f"<li>{x}</li>"
                  for x in self.allowed_directories_for_previews()
              ]
          )
          items_html = shared.html(
              "extra-networks-no-cards.html"
          ).format(dirs=dirs)
  
      self_name_id = self.name.replace(" ", "_")
  
      res = f"""
  <div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-cards'>
  {subdirs_html}
  </div>
  <div id='{tabname}_{self_name_id}_cards' class='extra-network-cards'>
  {items_html}
  </div>
  """
  
      return res
  
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 6 for calling the ExtraNetworksPage obj's underlying member method code with example usage: obj.create_html(tabname) and returns: res