[chuni] misc frontend improvements/fixes (i.e. webp instead of png; css error; hide subtrophies on old version) (#234)

TL;DR avatar and userbox frontend pages can get hella slow when loading the first time when a ton of stuff is unlocked. Its driven primarily by all the images the server has to push to the client. To reduce the burden, these changes switch from using png to webp for all scaped images during import, reducing image sizes to roughly 20% of their png-equivalent.

The filelist is long so here's a summary list of changes:
- Replaced png assets with webp versions
- Updated read.py to save assets as webp instead of png
- Updated frontend.py and jinja to use webp instead of png
- Added a conversion function ran by both the importer and the frontend on launch that looks for previously imported png files and converts them to webp. Only included for the sake of anyone who already did imports since the frontend improvements were introduced.
- [bugfix] Fixed a css bug in the avatar jinja that affected Save/Reset button use on super narrow screens

Reviewed-on: https://gitea.tendokyu.moe/Hay1tsme/artemis/pulls/234
Co-authored-by: daydensteve <daydensteve@gmail.com>
Co-committed-by: daydensteve <daydensteve@gmail.com>

titles/chuni/read.py

@@ -1,9 +1,11 @@
+from logging import Logger
 from typing import Optional
-from os import walk, path
+from os import walk, path, remove
 import xml.etree.ElementTree as ET
 from read import BaseReader
 from PIL import Image
 import configparser
+import glob
 
 from core.config import CoreConfig
 from titles.chuni.database import ChuniData
@@ -43,6 +45,9 @@ class ChuniReader(BaseReader):
         if self.version >= ChuniConstants.VER_CHUNITHM_NEW:
             we_diff = "5"
 
+        # Convert any old assets created with a previous version of the importer
+        ChuniReader.ConvertOldAssets(self.logger)
+
         # character images could be stored anywhere across all the data dirs. Map them first
         self.logger.info(f"Mapping DDS image files...")
         dds_images = dict()
@@ -533,17 +538,40 @@ class ChuniReader(BaseReader):
                         self.logger.warning(f"Failed to unlock challenge {id}")
 
     def copy_image(self, filename: str, src_dir: str, dst_dir: str) -> None:
-        # Convert the image to png so we can easily display it in the frontend
+        # Convert the image to webp so we can easily display it in the frontend
         file_src = path.join(src_dir, filename)
         (basename, ext) = path.splitext(filename)
-        file_dst = path.join(dst_dir, basename) + ".png"
+        file_dst = path.join(dst_dir, basename) + ".webp"
 
         if path.exists(file_src) and not path.exists(file_dst):
             try:
                 im = Image.open(file_src)
                 im.save(file_dst)
             except Exception:
-                self.logger.warning(f"Failed to convert {filename} to png")
+                self.logger.warning(f"Failed to convert {filename} to webp")
+
+    def ConvertOldAssets(logger: Logger):
+        """
+        Converts any previously-imported png files to webp.
+        In the initial version of the userbox/avatar frontend support, png images were used, scraped via read.py.
+        The amount of data pushed once a lot of stuff was unlocked was noticeable so the frontend now uses webp format
+        for these assets. If any png files are present, convert them to webp now.
+        """
+        # Find all pngs under the /img directory
+        png_files = glob.glob(f'titles/chuni/img/**/*.png', recursive=True)
+        if len(png_files) > 0:
+            logger.info(f'Found {len(png_files)} old assets. Converting to webp... (may take a few minutes)')
+            for img_png in png_files:
+                img_webp = path.splitext(img_png)[0] + '.webp'
+                try:
+                    # convert to webp
+                    im = Image.open(img_png)
+                    im.save(img_webp)
+                    # delete the original file
+                    remove(img_png)
+                except Exception as e:
+                    logger.warning(f'Failed to convert {img_png} to webp')
+            logger.info(f'Conversion complete')
 
     def map_dds_images(self, image_dict: dict, dds_dir: str) -> None:
         for root, dirs, files in walk(dds_dir):