Lighthouse fixes

docs/_layouts/default.html

@@ -35,10 +35,10 @@ <h2>{{ site.human_description | default: site.github.project_tagline }}</h2>
       <div class="banner-left">
         <p>Our sponsors</p>
         <a href="https://www.youtube.com/@TheCrescent/videos">
-          <img src="/assets/sponsors/left_banner_crescent.jpg" alt="Left sponsor banner">
+          <img src="/assets/sponsors/left_banner_crescent.webp" alt="Left sponsor banner" width="160px">
         </a>
         <a href="https://open.spotify.com/artist/7IYLENV1pGGPvL6wkyl7t5">
-          <img src="/assets/sponsors/right_banner_onair.jpg" alt="Right sponsor banner" width="160px" height="600px">
+          <img src="/assets/sponsors/right_banner_onair.webp" alt="Right sponsor banner" width="160px" height="600px">
         </a>
       </div>
 

docs/_posts/2023-09-23-Beginners-guide-to-free-stems.md

@@ -9,7 +9,7 @@ keywords: stem separation, proofing, free, easy to use, private, privacy, AI, no
 intro: "Hello! I'm the creator of this site, and this post describes how I use my own website to get stems from mixed songs for free. Let's dive right in."
 ---
 
-<h3>Table of contents</h3>
+<h2>Table of contents</h2>
 * Table of contents
 {:toc}
 
@@ -27,21 +27,21 @@ Most common audio file extensions (wav, mp3, opus, flac, webm) should work. Note
 
 When you visit <https://freemusicdemixer.com>, you land on the homepage of this site. From this blog post, you can also click [Home](/) in the top bar. Once you're on the home page, scroll down to the section named "Demixer apps", or [go there directly](/#demixer-apps):
 
-<img src="/assets/blog/post1/freemdx.png" width="50%"/>
+<img src="/assets/blog/post1/freemdx.webp" width="50%" alt="freemusicdemixer-site-screenshot"/>
 
 ## Download weights
 
 In either app, click the "Download weights" button. You can also check the "Show dev logs" checkbox to display developer messages on the screen to describe how the model weights were loaded:
 
-<img src="/assets/blog/post1/weights_downloaded.png" width="50%"/>
+<img src="/assets/blog/post1/weights_downloaded.webp" width="50%" alt="weights-download-screenshot"/>
 
 Both apps should show "Finished loading!" with 100% full, green progress bars on the weight load. The AI model is now initialized and ready to demix your tracks.
 
 ## Demixing a single track
 
 In the "Single track" app (the first one), click "Choose file", browse to your song file, and then click "Load audio and demix." As the demixing proceeds, the progress bar will start filling up:
 
-<img src="/assets/blog/post1/single_inprogress.png" width="50%"/>
+<img src="/assets/blog/post1/single_inprogress.webp" width="50%" alt="track-screenshot"/>
 
 The track is demixed in 1-minute segments. Each segment that finishes demixing adds a notch to the progress bar.
 
@@ -81,15 +81,15 @@ Finally, on the Javascript log pane, there will be a finished message:
 
 In the app itself, at the bottom under "Demixed outputs" there will be 5 files available for download:
 
-<img src="/assets/blog/post1/single_finished.png" width="50%"/>
+<img src="/assets/blog/post1/single_finished.webp" width="50%" alt="track-finished-screenshot"/>
 
 These are the demixed stems from your track! Enjoy.
 
 ## Demixing a batch of tracks
 
 In the "Batch demix" app (the second one), click "Choose file", browse to your folder of tracks, and then click "Start batch demix," where you will be asked if you accept to upload all of the files:
 
-<img src="/assets/blog/post1/batch_start.png" width="50%"/>
+<img src="/assets/blog/post1/batch_start.webp" width="50%" alt="batch-screenshot"/>
 
 **N.B.!** I use the word "upload" but there is **no uploading being done anywhere outside of your computer.** A more accurate term is "load", since it's your web browser that is locally loading your audio file.
 
@@ -108,7 +108,7 @@ After you accept, the progress bar will fill up as each entire song is finished.
 
 When the entire folder is done, you will have links to download zip files for each song in the folder containing the 5 demixed stems per song:
 
-<img src="/assets/blog/post1/batch_finished.png" width="50%"/>
+<img src="/assets/blog/post1/batch_finished.webp" width="50%" alt="batch-finished-screenshot"/>
 
 ## Canceling a running job
 

docs/about.md

@@ -1,10 +1,11 @@
 ---
+description: Learn more about freemusicdemixer.com, our mission, and the technology behind our free AI-based music demixing and stem separation tools.
 header_class: about
 ---
 
 # About
 
-### What is music demixing used for?
+## What is music demixing used for?
 
 Music demixing allows stems for isolated components (vocals, drums, bass, other) to be extracted from a mixed song. Oftentimes, songs are available without the original stems, and you may wish to only use an isolated section of it in your own music project.
 
@@ -18,7 +19,7 @@ Demixed stems can be used for:
 - Music generation
 - ... and much more
 
-### Freemusicdemixer.com
+## Freemusicdemixer.com
 
 Most demixing applications are complex Artificial Intelligence (AI) models that require a lot of computational power to run. Similar websites will have a job queue, where you submit your track and hope it gets processed in the backend on a heavyweight machine that's possibly running an expensive GPU.
 
@@ -31,21 +32,21 @@ When the demixing is complete, you can download the following stems in wav files
 - Vocals
 - Karaoke (bass + drums + melody)
 
-### Technical implementation
+## Technical implementation
 
 Free-music-demixer is a web adaptation of [umx.cpp](https://github.com/sevagh/umx.cpp), which is more focused on parity with the original model. This project was inspired by the "AI at the edge" [GGML project](https://ggml.ai/) (including [whisper.cpp](https://github.com/ggerganov/whisper.cpp) and [llama.cpp](https://github.com/ggerganov/llama.cpp)), and WebAssembly is a great demo of client-side AI.
 
 The inference code is written in C++, using Eigen3 for numerical operations. Emscripten is used to compile it to WebAssembly. The model weights are quantized and compressed from 424 MB down to 45 MB. [View source code on GitHub](https://github.com/sevagh/free-music-demixer).
 
-### Customizations to UMX
+## Customizations to UMX
 
 The architecture of UMX has been modified to make it more suitable for use in a web application. These include:
 - Quantizing the model weights to 8-bit integers
 - Compressing the model weights with gzip
 - Implementing a streaming LSTM architecture to allow larger tracks to be separated without crashing
 - Implementing segmented inference (copied from Demucs) to allow much larger tracks to be separated without crashing
 
-### umx.cpp and demucs.cpp
+## umx.cpp and demucs.cpp
 
 I intend to continue working on improving umx.cpp, and eventually working on demucs.cpp. Demucs is one of the current leading state-of-the-art models for music demixing, but it is computationally more intensive and harder to implement than umx.cpp.
 

docs/assets/css/style.scss

@@ -126,7 +126,7 @@ header h1:before {
 .btn-github .icon {
   color: #94ffff; /* Light Cyan */
   opacity: 1.0;
-  background: url("../images/cyantocat.png") 0 0 no-repeat;
+  background: url("../images/cyantocat.webp") 0 0 no-repeat;
 }
 
 .btn-github:hover {
@@ -204,7 +204,7 @@ div.mdx-container {
   padding: 2%;
   overflow: auto; /* Will add a scrollbar if the content overflows */
   z-index: 1;
-  background: url('../images/mixer.jpg') no-repeat center center/cover;
+  background: url('../images/mixer.webp') no-repeat center center/cover;
 }
 
 div.mdx-container-batch {
@@ -221,7 +221,7 @@ div.mdx-container-batch {
   overflow: auto; /* Will add a scrollbar if the content overflows */
   z-index: 1;
   opacity: 0.9;
-  background: url('../images/mixer_batch.jpg') no-repeat center center/cover;
+  background: url('../images/mixer_batch.webp') no-repeat center center/cover;
 }
 
 .bottom-right {
@@ -481,13 +481,13 @@ div.tag-cloud {
 
 .blog-post .meta {
     font-size: 0.9em;
-    color: #777;
+    //color: #777;
     margin-bottom: 10px;
 }
 
-.blog-post .description {
+.blog-post .summary {
     font-size: 1em;
-    color: #555;
+    //color: #555;
 }
 
 .giscus-spacing {

docs/blog.md

@@ -71,7 +71,7 @@ Over time, I hope to add the following categories:
         <div class="meta">
             {{ post.date | date: "%Y-%m-%d" }} | Category: {{ post.categories | join: ',' }} | Tags: {{ post.tags | join: ',' }}
         </div>
-        <div class="description">
+        <div class="summary">
             {{ post.intro | truncate: 200 }}
         </div>
     </div>

docs/index.md

@@ -14,7 +14,7 @@ In music demixing or music source separation, AI models are used to separate the
 
 Load a song to decompose it into **bass, drums, vocals, melody, and karaoke** using a near-state-of-the-art AI model, [Open-Unmix](https://github.com/sigsep/open-unmix-pytorch) with the [UMX-L](https://zenodo.org/record/5069601) pretrained weights. This site is created and maintained by [Sevag H](https://github.com/sevagh).
 <div class="image-container">
-<img class="responsive-img" src="./assets/images/music-demix.png"/>
+<img class="responsive-img" src="./assets/images/music-demix.webp" alt="music-demixing-diagram"/>
 </div>
 
 ## Runs locally in your browser!
@@ -60,7 +60,7 @@ Ready to try it on your own music files?
         </div>
     </div>
 
-    <input type="file" id="audio-upload">
+    <input type="file" id="audio-upload" aria-label="File:">
     <br>
     <button id="load-waveform" class="button">Load audio and demix</button>
     <br>
@@ -93,7 +93,7 @@ To cancel the running job, refresh the page
         </div>
     </div>
 
-    <input type="file" id="batch-upload" webkitdirectory directory multiple />
+    <input type="file" id="batch-upload" webkitdirectory directory multiple aria-label="Folder:"/>
 
     <br>
     <br>

docs/sponsors.md

@@ -1,4 +1,5 @@
 ---
+description: Support freemusicdemixer.com through sponsorships and donations. Find out how you can help us continue to provide free AI-based music demixing and stem separation tools for amateur and professional audio engineers and musicians.
 header_class: sponsors
 ---
 
@@ -18,10 +19,10 @@ Interested? [Contact us!](mailto:[email protected])
 
 We are currently partnered with [The Crescent](https://www.thecrescentmtl.com), a company based in Montreal that provides music, live stream concerts, and content production. Check them out!
 
-![crescent-medium](./assets/sponsors/crescent.jpg)
+![crescent-music-sponsor](./assets/sponsors/crescent.webp)
 
 ## OnAir Music
 
 We also work with [OnAir Music](https://open.spotify.com/artist/7IYLENV1pGGPvL6wkyl7t5), a collection of royalty-free music for use in Twitch streams and other applications. OnAir has also contributed a [stem dataset for AI music demixing research](https://github.com/sevagh/OnAir-Music-Dataset) to help researchers develop better AI stem separation applications (like the one that powers this website).
 
-<img src="./assets/sponsors/onair-banner-spotify.png" width="200px"/>
+<img src="./assets/sponsors/onair-banner-spotify.webp" width="200px" alt="onair-music-sponsor"/>