Restyle site

docs/404.md

@@ -0,0 +1,10 @@
+---
+layout: default
+permalink: /404.html
+---
+
+# 404
+
+Page not found :(
+
+For any inquiries or support, contact us via [e-mail](mailto:[email protected]) or through our [Instagram account](https://www.instagram.com/freemusicdemixer/)

docs/_layouts/default.html

@@ -13,9 +13,9 @@
 <script src="/banner.js"></script>
 <div id="sticky-banner" class="sticky-banner" style="display: none;">
     <div class="banner-content">
-        Get news and sneak previews of upcoming features!
-        <a href="https://docs.google.com/forms/d/e/1FAIpQLSek_QU_BGd7CL2BLVOLDs7JmTZzcLKJiK5k4ysxoCEMjEGrtA/viewform?usp=sf_link" class="banner-button-signup" target="_blank">Sign up</a>
-         <button class="banner-dismiss-button" id="banner-dismiss-button">Dismiss</button>
+    <img src="./assets/images/logo.webp" alt="freemusicdemixer-logo" height="40px"/>
+      <a href="https://docs.google.com/forms/d/e/1FAIpQLSek_QU_BGd7CL2BLVOLDs7JmTZzcLKJiK5k4ysxoCEMjEGrtA/viewform?usp=sf_link" target="_blank">Sign up to the mailing list!</a>
+    <img src="./assets/images/dismiss.webp" alt="banner-dismiss" height="30px" id="banner-dismiss-button" target="_blank"/>
     </div>
 </div>
 
@@ -27,16 +27,10 @@ <h1>{{ site.title | default: site.github.repository_name }}</h1>
         </a>
         <h2>{{ site.human_description | default: site.github.project_tagline }}</h2>
         <section id="downloads">
-          {% if site.show_downloads %}
-            <a href="{{ site.github.zip_url }}" class="btn">Download as .zip</a>
-            <a href="{{ site.github.tar_url }}" class="btn">Download as .tar.gz</a>
-          {% endif %}
           <a href="{{ '/' | relative_url }}" class="btn btn-github">Home</a>
           <a href="{{ '/pro' | relative_url }}" class="btn btn-gold-github">PRO</a>
           <a href="{{ '/about' | relative_url }}" class="btn btn-github">About</a>
           <a href="{{ '/blog' | relative_url }}" class="btn btn-github">Blog</a>
-          <a href="{{ '/sponsors' | relative_url }}" class="btn btn-github">Sponsors</a>
-          <a href="{{ site.github.repository_url }}" class="btn btn-github"><span class="icon"></span>Source code</a>
         </section>
       </div>
     </header>

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

@@ -138,4 +138,4 @@ At any point if you want to cancel the current run, just reload the website. You
 
 ## Reporting bugs
 
-If any of the above steps don't work or result in strange outputs, I invite you to open a bug report on the project's [GitHub Issues](https://github.com/sevagh/free-music-demixer/issues) or e-mail me directly (sevagh+freemdx at protonmail dot com).
+If any of the above steps don't work or result in strange outputs, I invite you to open a bug report on the project's [GitHub Issues](https://github.com/sevagh/free-music-demixer/issues) or e-mail me directly (contact at freemusicdemixer dot com).

docs/about.md

@@ -5,39 +5,34 @@ header_class: about
 
 # About
 
-<img src="/assets/images/ig_banner.webp" height="50"/>
-
 ## 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.
+Music demixing allows stems for isolated components (vocals, drums, bass, melody) to be extracted from a mixed song. Oftentimes, songs are available without the original stems, and you may wish to only use an isolated stem in your own music project.
 
-Demixed stems can be used for:
-- Remixing
-- Karaoke
-- Instrumental versions
-- Music education
-- Music analysis
-- Music transcription
-- Music generation
-- ... and much more
+Demixed stems can be used for remixing, karaoke, instrumental extraction, backing tracks, music education, music analysis, music transcription, and more! The possibilities are endless.
 
 ## 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.
+Most demixers consist of one or many complex Artificial Intelligence (AI) models that require a lot of computational power or GPUs to run (deep learning). Some websites will have a job queue where you submit your track and hope it gets processed in the backend on an expensive server with a GPU.
+
+This website is an easy-to-use interface for the AI model [Demucs v4](https://arxiv.org/abs/2211.08553) that runs fast and lean **directly in your web browser** using only the CPU and with much lower memory usage, because we care about speed and efficency! Anybody with a regular computer can run this website.
+
+You can simply choose the track you want demixed and watch as it gets processed immediately on your own computer. **Your privacy is 100% respected** since your files are never uploaded to a server or job queue.
 
-This website is a simple, easy-to-use interface for the AI model [Demucs v4](https://arxiv.org/abs/2211.08553) and its different weights.
+## Open-source code
 
-The code has been rewritten from Python and PyTorch to pure C++ so that it runs fast and lean in your web browser. You can simply upload the track you want demixed and watch while it gets processed immediately on your own computer. **Your privacy is 100% respected** since your files are never uploaded to a server or job queue.
+The custom inference code of Demucs, designed to run with low memory using the CPU, has been rewritten in C++ and compiled to WebAssembly. All of the code is open-source and available on GitHub:
+* [demucs.cpp](https://github.com/sevagh/demucs.cpp): the pure C++ code for the Demucs model
+* [free-music-demixer](https://github.com/sevagh/free-music-demixer): the entire code for this website (including the C++ code above, JavaScript, HTML, CSS, etc.)
 
-When the demixing is complete, you can download the following stems in wav files (stereo, 44100 Hz):
-- Bass
-- Drums
-- Melody (catchall for non-bass/drums/vocals - also called 'other' in music demixing research)
-- Vocals
-- Instrumental (bass + drums + melody)
+Be sure to check the [Blog](/blog) for technical articles and deep dives.
 
-## Technical implementation
+## Contact us!
 
-Free-music-demixer started as a web adaptation of [umx.cpp](https://github.com/sevagh/umx.cpp). This project was inspired by the "AI at the edge" [GGML project](https://ggml.ai/) and [llama.cpp](https://github.com/ggerganov/llama.cpp), and WebAssembly is a great demo of client-side AI. It has since replaced its core model with [demucs.cpp](https://github.com/sevagh/demucs.cpp) for much better demixing quality.
+This website is created and maintained by Sevag H ([GitHub portfolio](https://github.com/sevagh), [website](https://sevag.xyz)).
 
-The inference code is written in C++, using [the excellent Eigen3 library](https://eigen.tuxfamily.org/index.php?title=Main_Page) for numerical operations. Emscripten is used to compile it to WebAssembly. Be sure to check the [Blog](/blog) for technical articles and deep dives.
+If you want to reach out about this website (or any other topic, including brand sponsorships, collaborations, etc.) contact us by [e-mail](mailto:[email protected]) or through our [Instagram account](https://www.instagram.com/freemusicdemixer/).
+
+If you're a customer, sign up to the [mailing list](https://docs.google.com/forms/d/e/1FAIpQLSek_QU_BGd7CL2BLVOLDs7JmTZzcLKJiK5k4ysxoCEMjEGrtA/viewform?usp=sf_link) to receive product updates, promos, free trials, and more!
+
+<img src="/assets/images/ig_banner.webp" height="50"/>

docs/assets/css/style.scss

@@ -119,29 +119,19 @@ header h1:before {
 }
 
 .btn-github {
-  color: #94ffff; /* Light Cyan */
-  background: #c71585; /* Medium Violet Red */
-}
-
-.btn-github .icon {
-  color: #94ffff; /* Light Cyan */
-  opacity: 1.0;
-  background: url("../images/cyantocat.webp") 0 0 no-repeat;
+  color: #ceeeee; /* Changed to white for better contrast */
+  background: #961996; /* Softer shade of magenta */
+  //text-shadow: none; /* Removed text shadow for clarity */
+  text-shadow:
+    -1px -1px 0 #000,
+     1px -1px 0 #000,
+    -1px 1px 0 #000,
+     1px 1px 0 #000;
 }
 
 .btn-github:hover {
-  background: #8b008b; /* Dark Magenta */
-}
-
-.btn-github:disabled {
-  color: #cccccc;  /* A lighter grey for the text */
-  background: #a9a9a9;  /* A light grey for the background */
-  cursor: not-allowed;  /* Shows a 'no-entry' sign when hovered */
-}
-
-.btn-github:disabled .icon {
-  color: #cccccc; /* A lighter grey for the icon */
-  opacity: 0.6;   /* Reduced opacity for the icon */
+  color: #ceeeee; /* Changed to white for better contrast */
+  background: #6f006f; /* A darker shade for hover */
 }
 
 // demix webapp stuff
@@ -196,32 +186,16 @@ div.mdx-container {
   padding: 2%;
   overflow: auto; /* Will add a scrollbar if the content overflows */
   z-index: 1;
-  background: url('../images/mixer.webp') no-repeat center center/cover;
-}
-
-div.mdx-container-batch {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 80%; /* Adjust width as per your requirement */
-  height: auto; /* Adjust height as per your requirement */
-  margin: 2vh auto; /* Auto horizontal margins for centering and 2vh vertical margin */
-  border-radius: 10px; /* Rounded corners */
-  color: #e0ffff; /* Text color - Light Cyan */
-  padding: 2%;
-  overflow: auto; /* Will add a scrollbar if the content overflows */
-  z-index: 1;
-  background: url('../images/mixer_batch.webp') no-repeat center center/cover;
+  //background: navy;
+  background-color: rgba(0, 64, 128, 1.0); /* Light cyan background color with 50% opacity */
 }
 
 .bottom-right {
-  position: absolute;
-  bottom: 5%;
-  right: 5%;
+  margin-left: auto;
+  align-self: flex-end;
 }
 
-#mdx-app a {
+#mdx-unified-app a {
   color: #70DB93;
 }
 
@@ -230,10 +204,10 @@ div.mdx-container-batch {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 80%; /* Adjust width as per your requirement */
+  //width: 80%; /* Adjust width as per your requirement */
   margin: 2vh auto; /* Auto horizontal margins for centering and 2vh vertical margin */
   padding: 2%;
-  background-color: rgba(0, 64, 128, 1.0); /* Light cyan background color with 50% opacity */
+  //background-color: rgba(0, 64, 128, 1.0); /* Light cyan background color with 50% opacity */
   border-radius: 10px; /* Rounded corners */
   color: #e0ffff; /* Text color - Light Cyan */
   overflow: auto; /* Will add a scrollbar if the content overflows */
@@ -591,7 +565,7 @@ blockquote {
 }
 
 #sign-up {
-    top: 20%;
+    top: 40%;
 }
 
 #sign-up:hover {
@@ -616,9 +590,11 @@ blockquote {
 
 .sign-up-text {
   font-size: 20px;
+  color: black;
 }
 
 .sign-up-details {
+  color: black;
   font-size: 16px;
   line-height: -1; /* Reduces the space between lines, adjust the value as needed */
 }
@@ -688,12 +664,15 @@ blockquote {
   .post1-header {
     width: calc(100vw + 40px);
   }
-  #load-weights {
+  #load-weights-2 {
     top: 15%;
   }
-  #load-weights-2 {
+  #load-weights-3 {
     top: 25%;
   }
+  #sign-up {
+    top: 35%;
+  }
 }
 
 @media (max-width: 400px) {
@@ -716,12 +695,27 @@ blockquote {
   .terminal {
     width: 90px;
   }
-  #load-weights {
+  #load-weights-2 {
     top: 5%;
   }
-  #load-weights-2 {
+  #load-weights-3 {
     top: 10%;
   }
+  #sign-up {
+    top: 15%;
+  }
+}
+
+.upload-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.radio-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
 .memory-selection {
@@ -744,10 +738,14 @@ blockquote {
     bottom: 0;
     left: 0;
     width: 100%;
-    background-color: #88ab75; /* Green background */
+    background-color: #68caca; /* Green background */
     color: black; /* White text */
     z-index: 5; /* Higher than other content */
     box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* Optional shadow for depth */
+    font-family: 'Courier New', 'Courier', monospace;
+    //text-transform: uppercase;
+    font-weight: bold;
+    font-size: 20px;
 }
 
 .banner-content {
@@ -765,87 +763,52 @@ blockquote {
     margin: 0 10px; /* Adjust space between elements */
 }
 
-/* Additional styling for your image, text, and buttons */
-.banner-button-signup {
-  display: inline-flex; /* Use flexbox for inline layout */
-  flex-direction: column; /* Stack children vertically */
-  align-items: flex-start; /* Align text to the left */
-  justify-content: center; /* Center vertically */
-  text-align: left; /* Left-align text within flex items */
-  display: inline-block; /* Allows padding and width/height if needed */
-  text-decoration: none; /* Removes underline from links */
-  background-color: #f5f5dc; /* Bootstrap primary blue */
-  color: black;
-  padding: 10px 20px;
-  border-radius: 5px;
-  box-shadow: 0 4px #d2d2a4;
-  transition: background-color 0.3s, transform 0.3s;
-  cursor: pointer; /* Cursor indicates it's clickable */
-}
-
-.banner-button-signup:hover {
-  background-color: #ebe8d4; /* Slightly darker blue on hover */
-  transform: translateY(-2px);
-}
-.banner-button-signup:active {
-    transform: translateY(1px);
-    box-shadow: 0 1px #d2d2a4;
-}
-
-.banner-dismiss-button {
-  display: inline-flex; /* Use flexbox for inline layout */
-  flex-direction: column; /* Stack children vertically */
-  align-items: flex-start; /* Align text to the left */
-  justify-content: center; /* Center vertically */
-  text-align: left; /* Left-align text within flex items */
-  display: inline-block; /* Allows padding and width/height if needed */
-  background-color: #c0c0c0; /* Soft red color */
-  text-decoration: none;
-  color: black;
-  padding: 10px 20px;
-  border-radius: 5px;
-  box-shadow: 0 4px #a8a8a8;
-  transition: background-color 0.3s, transform 0.3s;
-  cursor: pointer;
-}
-
-.banner-dismiss-button:hover {
-    background-color: #b0b0b0; /* Lighter red on hover */
-    transform: translateY(-2px);
+#banner-dismiss-button {
+    cursor: pointer; /* Shows a pointer cursor on hover */
+    transition: transform 0.3s ease; /* Smooth transition for any transforms */
 }
 
-.banner-dismiss-button:active {
-    transform: translateY(1px);
-    box-shadow: 0 1px #a8a8a8;
+#banner-dismiss-button:hover {
+    transform: scale(1.1); /* Slightly increase size on hover for visual feedback */
 }
 
 .btn-gold-github {
-  color: #122620; /* Light Cyan */
-  background: #d4af37;
+  color: #000000; /* Changed to black for better contrast */
+  background: #fdd835; /* A bright yellow instead of gold */
   animation: goldpulse 2s infinite;
+  box-shadow: none; /* Optional: remove shadow for a flatter appearance */
+  text-shadow: none; /* Optional: remove shadow for a flatter appearance */
 }
 
 .btn-gold-github:hover {
-  color: #122620; /* Light Cyan */
-  background: #d4af37;
-  animation: none; /* Stop the pulse animation on hover */
+  background: #fbc02d; /* A slightly darker shade for hover */
+  color: black;
+  animation: none;
 }
 
 @keyframes goldpulse {
   0% {
     box-shadow: 0 0 5px #d1b000;
     transform: scale(1);
-    background-color: #d4af37;
+    background-color: #fbc02d;
   }
   50% {
     box-shadow: 0 0 15px #d1b000; /* Increase the glow size and change color */
     transform: scale(1.05); /* Slightly increase the scale for emphasis */
-    background-color: #d4af37;
+    background-color: #fbc02d;
   }
   100% {
     box-shadow: 0 0 5px #d1b000;
     transform: scale(1);
-    background-color: #d4af37;
+    background-color: #fbc02d;
   }
 }
 
+input[type="file"]:disabled, label:disabled {
+    opacity: 0.5; /* Lower opacity for a "disabled" look */
+    cursor: not-allowed; /* Change cursor to indicate non-interactive */
+}
+
+.btn-github, .btn-gold-github {
+  font-size: 15px;
+}