| |
| """Contains the visualizer to visualize images with HTML page.""" |
|
|
| import os |
| import base64 |
| import cv2 |
| import numpy as np |
| from bs4 import BeautifulSoup |
|
|
| from ..image_utils import get_grid_shape |
| from ..image_utils import parse_image_size |
| from ..image_utils import load_image |
| from ..image_utils import resize_image |
| from ..image_utils import list_images_from_dir |
|
|
| __all__ = ['HtmlVisualizer', 'HtmlReader'] |
|
|
|
|
| def get_sortable_html_header(column_name_list, sort_by_ascending=False): |
| """Gets header for sortable HTML page. |
| |
| Basically, the HTML page contains a sortable table, where user can sort the |
| rows by a particular column by clicking the column head. |
| |
| Example: |
| |
| column_name_list = [name_1, name_2, name_3] |
| header = get_sortable_html_header(column_name_list) |
| footer = get_sortable_html_footer() |
| sortable_table = ... |
| html_page = header + sortable_table + footer |
| |
| Args: |
| column_name_list: List of column header names. |
| sort_by_ascending: Default sorting order. If set as `True`, the HTML |
| page will be sorted by ascending order when the header is clicked |
| for the first time. |
| |
| Returns: |
| A string, which represents for the header for a sortable HTML page. |
| """ |
| header = '\n'.join([ |
| '<script type="text/javascript">', |
| 'var column_idx;', |
| 'var sort_by_ascending = ' + str(sort_by_ascending).lower() + ';', |
| '', |
| 'function sorting(tbody, column_idx){', |
| ' this.column_idx = column_idx;', |
| ' Array.from(tbody.rows)', |
| ' .sort(compareCells)', |
| ' .forEach(function(row) { tbody.appendChild(row); })', |
| ' sort_by_ascending = !sort_by_ascending;', |
| '}', |
| '', |
| 'function compareCells(row_a, row_b) {', |
| ' var val_a = row_a.cells[column_idx].innerText;', |
| ' var val_b = row_b.cells[column_idx].innerText;', |
| ' var flag = sort_by_ascending ? 1 : -1;', |
| ' return flag * (val_a > val_b ? 1 : -1);', |
| '}', |
| '</script>', |
| '', |
| '<html>', |
| '', |
| '<head>', |
| '<style>', |
| ' table {', |
| ' border-spacing: 0;', |
| ' border: 1px solid black;', |
| ' }', |
| ' th {', |
| ' cursor: pointer;', |
| ' }', |
| ' th, td {', |
| ' text-align: left;', |
| ' vertical-align: middle;', |
| ' border-collapse: collapse;', |
| ' border: 0.5px solid black;', |
| ' padding: 8px;', |
| ' }', |
| ' tr:nth-child(even) {', |
| ' background-color: #d2d2d2;', |
| ' }', |
| '</style>', |
| '</head>', |
| '', |
| '<body>', |
| '', |
| '<table>', |
| '<thead>', |
| '<tr>', |
| '']) |
| for idx, name in enumerate(column_name_list): |
| header += f' <th onclick="sorting(tbody, {idx})">{name}</th>\n' |
| header += '</tr>\n' |
| header += '</thead>\n' |
| header += '<tbody id="tbody">\n' |
|
|
| return header |
|
|
|
|
| def get_sortable_html_footer(): |
| """Gets footer for sortable HTML page. |
| |
| Check function `get_sortable_html_header()` for more details. |
| """ |
| return '</tbody>\n</table>\n\n</body>\n</html>\n' |
|
|
|
|
| def encode_image_to_html_str(image, image_size=None): |
| """Encodes an image to HTML language. |
| |
| NOTE: Input image is always assumed to be with `RGB` channel order. |
| |
| Args: |
| image: The input image to encode. Should be with `RGB` channel order. |
| image_size: This field is used to resize the image before encoding. |
| `None` disables resizing. (default: None) |
| |
| Returns: |
| A string that represents the encoded image. |
| """ |
| if image is None: |
| return '' |
|
|
| assert image.ndim == 3 and image.shape[2] in [1, 3, 4] |
| if image.shape[2] == 3: |
| image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR) |
| elif image.shape[2] == 4: |
| image = cv2.cvtColor(image, cv2.COLOR_RGBA2BGRA) |
|
|
| |
| height, width = parse_image_size(image_size) |
| height = height or image.shape[0] |
| width = width or image.shape[1] |
| if image.shape[0:2] != (height, width): |
| image = resize_image(image, (width, height)) |
|
|
| |
| if image.shape[2] == 4: |
| encoded = cv2.imencode('.png', image)[1].tostring() |
| encoded_base64 = base64.b64encode(encoded).decode('utf-8') |
| html_str = f'<img src="data:image/png;base64, {encoded_base64}"/>' |
| else: |
| encoded = cv2.imencode('.jpg', image)[1].tostring() |
| encoded_base64 = base64.b64encode(encoded).decode('utf-8') |
| html_str = f'<img src="data:image/jpeg;base64, {encoded_base64}"/>' |
|
|
| return html_str |
|
|
|
|
| def decode_html_str_to_image(html_str, image_size=None): |
| """Decodes an image from HTML string. |
| |
| Args: |
| html_str: An HTML string that represents an image. |
| image_size: This field is used to resize the image after decoding. |
| `None` disables resizing. (default: None) |
| |
| Returns: |
| An image with `RGB` channel order. |
| """ |
| if not html_str: |
| return None |
|
|
| assert isinstance(html_str, str) |
| image_str = html_str.split(',')[-1].strip() |
| encoded_image = base64.b64decode(image_str) |
| encoded_image_numpy = np.frombuffer(encoded_image, dtype=np.uint8) |
| image = cv2.imdecode(encoded_image_numpy, flags=cv2.IMREAD_UNCHANGED) |
|
|
| if image.ndim == 2: |
| image = image[:, :, np.newaxis] |
| assert image.ndim == 3 and image.shape[2] in [1, 3, 4] |
| if image.shape[2] == 3: |
| image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB) |
| if image.shape[2] == 4: |
| image = cv2.cvtColor(image, cv2.COLOR_BGRA2RGBA) |
|
|
| |
| height, width = parse_image_size(image_size) |
| height = height or image.shape[0] |
| width = width or image.shape[1] |
| if image.shape[0:2] != (height, width): |
| image = resize_image(image, (width, height)) |
|
|
| return image |
|
|
|
|
| class HtmlVisualizer(object): |
| """Defines the HTML visualizer that visualizes images on an HTML page. |
| |
| This class can be used to visualize image results on an HTML page. |
| Basically, it is based on an HTML-format sorted table with helper functions |
| `get_sortable_html_header()`, `get_sortable_html_footer()`, and |
| `encode_image_to_html_str()`. To simplify the usage, specifying the |
| following fields are enough to create a visualization page: |
| |
| (1) num_rows: Number of rows of the table (header-row exclusive). |
| (2) num_cols: Number of columns of the table. |
| (3) header_contents (optional): Title of each column. |
| |
| NOTE: `grid_size` can be used to assign `num_rows` and `num_cols` |
| automatically. |
| |
| Example: |
| |
| html = HtmlVisualizer(num_rows, num_cols) |
| html.set_headers([...]) |
| for i in range(num_rows): |
| for j in range(num_cols): |
| html.set_cell(i, j, text=..., image=..., highlight=False) |
| html.save('visualize.html') |
| """ |
|
|
| def __init__(self, |
| grid_size=0, |
| num_rows=0, |
| num_cols=0, |
| is_portrait=True, |
| image_size=None): |
| """Initializes the html visualizer. |
| |
| Args: |
| grid_size: Total number of cells, i.e., height * width. (default: 0) |
| num_rows: Number of rows. (default: 0) |
| num_cols: Number of columns. (default: 0) |
| is_portrait: Whether the HTML page should be portrait or landscape. |
| This is only used when it requires to compute `num_rows` and |
| `num_cols` automatically. See function `get_grid_shape()` in |
| file `./image_utils.py` for details. (default: True) |
| image_size: Size to visualize each image. (default: None) |
| """ |
| self.reset(grid_size, num_rows, num_cols, is_portrait) |
| self.set_image_size(image_size) |
|
|
| def reset(self, |
| grid_size=0, |
| num_rows=0, |
| num_cols=0, |
| is_portrait=True): |
| """Resets the HTML page with new number of rows and columns.""" |
| if grid_size > 0: |
| num_rows, num_cols = get_grid_shape(grid_size, |
| height=num_rows, |
| width=num_cols, |
| is_portrait=is_portrait) |
| self.grid_size = num_rows * num_cols |
| self.num_rows = num_rows |
| self.num_cols = num_cols |
| self.headers = ['' for _ in range(self.num_cols)] |
| self.cells = [[{ |
| 'text': '', |
| 'image': '', |
| 'highlight': False, |
| } for _ in range(self.num_cols)] for _ in range(self.num_rows)] |
|
|
| def set_image_size(self, image_size=None): |
| """Sets the image size of each cell in the HTML page.""" |
| self.image_size = image_size |
|
|
| def set_header(self, col_idx, content): |
| """Sets the content of a particular header by column index.""" |
| self.headers[col_idx] = content |
|
|
| def set_headers(self, contents): |
| """Sets the contents of all headers.""" |
| assert isinstance(contents, (list, tuple)) |
| assert len(contents) == self.num_cols |
| for col_idx, content in enumerate(contents): |
| self.set_header(col_idx, content) |
|
|
| def set_cell(self, row_idx, col_idx, text='', image=None, highlight=False): |
| """Sets the content of a particular cell. |
| |
| Basically, a cell contains some text as well as an image. Both text and |
| image can be empty. |
| |
| NOTE: The image is assumed to be with `RGB` channel order. |
| |
| Args: |
| row_idx: Row index of the cell to edit. |
| col_idx: Column index of the cell to edit. |
| text: Text to add into the target cell. (default: None) |
| image: Image to show in the target cell. Should be with `RGB` |
| channel order. (default: None) |
| highlight: Whether to highlight this cell. (default: False) |
| """ |
| self.cells[row_idx][col_idx]['text'] = text |
| self.cells[row_idx][col_idx]['image'] = encode_image_to_html_str( |
| image, self.image_size) |
| self.cells[row_idx][col_idx]['highlight'] = bool(highlight) |
|
|
| def visualize_collection(self, |
| images, |
| save_path=None, |
| num_rows=0, |
| num_cols=0, |
| is_portrait=True, |
| is_row_major=True): |
| """Visualizes a collection of images one by one.""" |
| self.reset(grid_size=len(images), |
| num_rows=num_rows, |
| num_cols=num_cols, |
| is_portrait=is_portrait) |
| for idx, image in enumerate(images): |
| if is_row_major: |
| row_idx, col_idx = divmod(idx, self.num_cols) |
| else: |
| col_idx, row_idx = divmod(idx, self.num_rows) |
| self.set_cell(row_idx, col_idx, text=f'Index {idx:03d}', |
| image=image) |
| if save_path: |
| self.save(save_path) |
|
|
| def visualize_list(self, |
| image_list, |
| save_path=None, |
| num_rows=0, |
| num_cols=0, |
| is_portrait=True, |
| is_row_major=True): |
| """Visualizes a list of image files.""" |
| self.reset(grid_size=len(image_list), |
| num_rows=num_rows, |
| num_cols=num_cols, |
| is_portrait=is_portrait) |
| for idx, filename in enumerate(image_list): |
| basename = os.path.basename(filename) |
| image = load_image(filename) |
| if is_row_major: |
| row_idx, col_idx = divmod(idx, self.num_cols) |
| else: |
| col_idx, row_idx = divmod(idx, self.num_rows) |
| self.set_cell(row_idx, col_idx, |
| text=f'{basename} (index {idx:03d})', image=image) |
| if save_path: |
| self.save(save_path) |
|
|
| def visualize_directory(self, |
| directory, |
| save_path=None, |
| num_rows=0, |
| num_cols=0, |
| is_portrait=True, |
| is_row_major=True): |
| """Visualizes all images under a directory.""" |
| image_list = list_images_from_dir(directory) |
| self.visualize_list(image_list=image_list, |
| save_path=save_path, |
| num_rows=num_rows, |
| num_cols=num_cols, |
| is_portrait=is_portrait, |
| is_row_major=is_row_major) |
|
|
| def save(self, path): |
| """Saves the HTML page.""" |
| html = '' |
| for i in range(self.num_rows): |
| html += '<tr>\n' |
| for j in range(self.num_cols): |
| text = self.cells[i][j]['text'] |
| image = self.cells[i][j]['image'] |
| if self.cells[i][j]['highlight']: |
| color = ' bgcolor="#FF8888"' |
| else: |
| color = '' |
| if text: |
| html += f' <td{color}>{text}<br><br>{image}</td>\n' |
| else: |
| html += f' <td{color}>{image}</td>\n' |
| html += '</tr>\n' |
|
|
| header = get_sortable_html_header(self.headers) |
| footer = get_sortable_html_footer() |
|
|
| with open(path, 'w') as f: |
| f.write(header + html + footer) |
|
|
|
|
| class HtmlReader(object): |
| """Defines the HTML page reader. |
| |
| This class can be used to parse results from the visualization page |
| generated by `HtmlVisualizer`. |
| |
| Example: |
| |
| html = HtmlReader(html_path) |
| for j in range(html.num_cols): |
| header = html.get_header(j) |
| for i in range(html.num_rows): |
| for j in range(html.num_cols): |
| text = html.get_text(i, j) |
| image = html.get_image(i, j, image_size=None) |
| """ |
| def __init__(self, path): |
| """Initializes by loading the content from file.""" |
| self.path = path |
|
|
| |
| with open(path, 'r') as f: |
| self.html = BeautifulSoup(f, 'html.parser') |
|
|
| |
| thead = self.html.find('thead') |
| headers = thead.findAll('th') |
| self.headers = [] |
| for header in headers: |
| self.headers.append(header.text) |
| self.num_cols = len(self.headers) |
|
|
| |
| tbody = self.html.find('tbody') |
| rows = tbody.findAll('tr') |
| self.cells = [] |
| for row in rows: |
| cells = row.findAll('td') |
| self.cells.append([]) |
| for cell in cells: |
| self.cells[-1].append({ |
| 'text': cell.text, |
| 'image': cell.find('img')['src'], |
| }) |
| assert len(self.cells[-1]) == self.num_cols |
| self.num_rows = len(self.cells) |
|
|
| def get_header(self, j): |
| """Gets header for a particular column.""" |
| return self.headers[j] |
|
|
| def get_text(self, i, j): |
| """Gets text from a particular cell.""" |
| return self.cells[i][j]['text'] |
|
|
| def get_image(self, i, j, image_size=None): |
| """Gets image from a particular cell.""" |
| return decode_html_str_to_image(self.cells[i][j]['image'], image_size) |
|
|
