text: import os
  import datetime
  import sys
  import shutil
  import glob
  import argparse
  
  '''
  How to use webify.py:
  webify.py can create a static .html file for you, it shows images, videos or audio by accessing the file path
  --path: it has restricted format for the folders, suppose the give path is ./ParentFolder , it should have the construction as below
  ./ParentFolder
  ├── ChildFolder-1 (contains file you want to vis, no subfolders)
  └── ChildFolder-2 (contains file you want to vis, no subfolders)
  3. Then you can visualization results with x columns (two here).
  4. --num indicates the maximum number you want visualization for each folder
  '''
  
  def parse_args():
      parser = argparse.ArgumentParser()
      parser.add_argument('--path', type=str)
      parser.add_argument('--imgsize', type=int, default=100)
      parser.add_argument('--num', type=int, default=10000)
  
      args = parser.parse_args()
      return args
  
  # --------------------------------------  joint ----------------------------------- #
  def create_audio_visual_sec(args, f, name):
      dir_list = [name for name in os.listdir(args.path) if os.path.isdir(os.path.join(args.path, name))]
      dir_list.sort()
      f.write('''<div align = "center">''')
  
      joint_sec = """
  <h3>{}</h3>
  <table>
  <tbody>
  <tr>
      """.format(name)
      item_list = []
      count = []
      true_dir_list = []
      printed_dir_list = dir_list
      # dir_list = ['video', '0feat_half_generated_sound', '5feat_half_generated_sound', 'half_generated_sound', '1sec_generated_sound', 'full_generated_sound']
      # printed_dir_list = ['video', '0feat_half_generated_sound', '5feat_half_generated_sound', '212feat_half_generated_sound', '212feat_1sec_generated_sound', '212feat_full_generated_sound']
      # dir_list = ['video', 'half_generated_video', '1sec_generated_video', '9sec_generated_video', 'full_generated_video', '0feat_half_generated_video', '5feat_half_generated_video']
      # printed_dir_list = ['video', '212_frames_half_generated_video', '212_frames_1sec_generated_video', '212_frames_9sec_generated_video', '212_frames_full_generated_video', '0_frame_half_generated_video', '5_frames_half_generated_video']
      # dir_list = ['original_cond_video'] + [d for d in dir_list if d != 'change_cond_audio' and d != 'original_cond_video']
      # printed_dir_list = ['original_cond_video'] + [d.split('_')[0] for d in dir_list if d != 'change_cond_audio' and d != 'original_cond_video']
      dir_list = ['train']
      printed_dir_list = dir_list
      for i in range(len(dir_list)):
          file_list = []
          for file in os.listdir(os.path.join(args.path, dir_list[i])):
              # if 'inputs' in file or 'reconstructions' in file or 'samples' in file or '.wav' in file:
              if 'reconstructions' in file or 'samples' in file:
                  file_list.append(file)
          file_list.sort()
          true_dir_list.append(dir_list[i])
          count.append(len(file_list))
          item_list.append(file_list)
      for kk in range(len(dir_list)):
          joint_sec += '''\n<th>{}</th>'''.format(printed_dir_list[kk])
      joint_sec += '''\n</tr>\n'''
      f.write(joint_sec)
      file_count = min(count)
      for j in range(min(file_count, args.num)):
          f.write('''<tr>\n''')
          for i in range(len(dir_list)):
              sample = os.path.join(dir_list[i], item_list[i][j])
              if sample.split('.')[-1] in ['wav', 'mp3']:
                  f.write('''    <td> <div align = "center"><audio controls=""><source src='{}' type="audio/{}"></audio><label >{}</label></div> </td>'''.format(sample, sample.split('.')[-1], item_list[i][j]))
              elif sample.split('.')[-1] in ['jpg', 'png', 'gif']:
                  f.write('''    <td> <div align = "center"><img src='{}' style="zoom:{}%" /></div> </td>'''.format(sample, args.imgsize))
              elif sample.split('.')[-1] in ['mp4', 'avi', 'webm']:
                  f.write('''    <td> <div align = "center"><label >{}</label><video id='{}' controls height='200'><source src="{}" type="video/{}" preload = "none"></video> <p>Speed: <input type="text" size="5" value="1" oninput="document.getElementById('{}').playbackRate = parseFloat(event.target.value);"></p></div></td>'''.format(
                      item_list[i][j], sample, sample, sample.split('.')[-1], sample))
              f.write('\n')
              # <video id='{}' controls><source src="{}" type="video/{}"></video>
  
          f.write('''</tr>\n''')
  
      f.write('''</tbody></table>\n''')
      f.write('''</div>\n''')
  
  
  def webify(args):
      html_file = os.path.join(args.path, 'index.html')
      f = open(html_file, 'wt')
  
      # head
      # <link rel="stylesheet" type="text/css" title="Cool stylesheet" href="style.css">
      head = """<!DOCTYPE html>
  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  ​
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SpecVQGAN proj Retrieval Result - UM Owens Lab</title>
  ​
  </head>
      """
      f.write(head)
  
      intro_sec = '''
  <body data-gr-c-s-loaded="true">
  ​
  <h1> SpecVQGAN - UM Owens Lab </h1>
  <h5> Creator: Yuexi Du <br>
  University of Michigan </h5>
  <p> This page contains the results for visualization. All the result is generated with full visual guide (212 frames) and half conditional spectrogram (~5 seconds)</p>
  ​
  '''
      f.write(intro_sec)
      # create_audio_sec(args, f, "Audio Separation")
      # create_image_sec(args, f, 'Spectorgram Visualization')
      # create_video_sec(args, f, 'CAM Visualization')
      create_audio_visual_sec(args, f, 'visualization')
      f.write('''</body>\n''')
      f.write('''</html>\n''')
      f.close()
  
  
  if __name__ == "__main__":
      args = parse_args()
      webify(args)
      print('Webify Succeed!')
      