Update Media

README.md

@@ -56,10 +56,10 @@ Here's a quick overview of how to use Songscribe:
   - File Upload
   - YouTube Link
 - Choose the preset that best suits the song you're transcribing
-  - **Solo** (1 instrument)
-  - **Duet** (vocals, no vocals)
-  - **Small Band** (vocals, drums, bass, and other instruments)
-  - **Full Band** (vocals, drums, bass, guitar, piano, and other instruments)
+  - **Solo**- (1 instrument)
+  - **Duet**- (vocals, no vocals)
+  - **Small Band**- (vocals, drums, bass, and other instruments)
+  - **Full Band**- (vocals, drums, bass, guitar, piano, and other instruments)
 - Optionally, select the tempo and the start time and end time of the song to be transcribed
 - Click the **Transcribe** button
 - Adjust the MIDI parameters to regenerate the transcription for each instrument to your liking

app/BenefitSection.tsx

@@ -2,6 +2,7 @@
 import BenefitCard from "@/components/BenefitCard";
 import { useScreenSize } from "@/hooks/use-screen-size";
 import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
 
 export default function BenefitSection() {
   const screenSize = useScreenSize();
@@ -10,8 +11,14 @@ export default function BenefitSection() {
 
   const [observer, setObserver] = useState<IntersectionObserver | null>(null);
   const [focusedCard, setFocusedCard] = useState<number>(1);
+  const [isMounted, setIsMounted] = useState(false);
   const videoRef = useRef<HTMLDivElement>(null);
 
+  // Handle component mount
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   useEffect(() => {
     const callback = (entries: IntersectionObserverEntry[]) => {
       entries.forEach((entry) => {
@@ -55,7 +62,16 @@ export default function BenefitSection() {
           when you need it.
         </BenefitCard>
         {isMobile && (
-          <div className="mx-auto mb-[5vh] aspect-square h-[35vh] rounded-3xl bg-white shadow-lg dark:shadow-stone-950"></div>
+          <div className="relative mx-auto mb-[5vh] aspect-square h-[35vh] overflow-hidden rounded-3xl bg-white shadow-lg dark:shadow-stone-950">
+            <Image
+              src="/videos/demo-1.gif"
+              alt="Demo 1"
+              fill
+              className="size-full object-cover"
+              unoptimized
+              priority
+            />
+          </div>
         )}
         <BenefitCard
           title="Automatic MIDI transcription"
@@ -66,7 +82,16 @@ export default function BenefitSection() {
           MIDI for an instant transcription ready for you to shape and perfect.
         </BenefitCard>
         {isMobile && (
-          <div className="mx-auto mb-[5vh] aspect-square h-[35vh] rounded-3xl bg-white shadow-lg dark:shadow-stone-950"></div>
+          <div className="relative mx-auto mb-[5vh] aspect-square h-[35vh] overflow-hidden rounded-3xl bg-white shadow-lg dark:shadow-stone-950">
+            <Image
+              src="/videos/demo-2.gif"
+              alt="Demo 2"
+              fill
+              className="size-full object-cover"
+              unoptimized
+              priority
+            />
+          </div>
         )}
         <BenefitCard
           title="Customize and refine with ease"
@@ -78,7 +103,16 @@ export default function BenefitSection() {
           each detail exactly as you want.
         </BenefitCard>
         {isMobile && (
-          <div className="mx-auto mb-[5vh] aspect-square h-[35vh] rounded-3xl bg-white shadow-lg dark:shadow-stone-950"></div>
+          <div className="relative mx-auto mb-[5vh] aspect-square h-[35vh] overflow-hidden rounded-3xl bg-white shadow-lg dark:shadow-stone-950">
+            <Image
+              src="/videos/demo-3.gif"
+              alt="Demo 3"
+              fill
+              className="size-full object-cover"
+              unoptimized
+              priority
+            />
+          </div>
         )}
         <BenefitCard
           title="Turn songs into sheet music"
@@ -90,16 +124,35 @@ export default function BenefitSection() {
           editor, or download the isolated stems.
         </BenefitCard>
         {isMobile && (
-          <div className="mx-auto mb-[5vh] aspect-square h-[35vh] rounded-3xl bg-white shadow-lg dark:shadow-stone-950"></div>
+          <div className="relative mx-auto mb-[5vh] aspect-square h-[35vh] overflow-hidden rounded-3xl bg-white shadow-lg dark:shadow-stone-950">
+            <Image
+              src="/videos/demo-4.gif"
+              alt="Demo 4"
+              fill
+              className="size-full object-cover"
+              unoptimized
+              priority
+            />
+          </div>
         )}
       </div>
       {!isMobile && (
         <div id="benefit-video" className="sticky top-[20vh] mb-[30vh] mt-8">
           <div
             ref={videoRef}
-            className="flex h-[350px] max-h-[800px] min-h-[100px] w-full items-center justify-center rounded-3xl bg-white text-black shadow-lg [aspect-ratio:1_/_1] dark:shadow-stone-950 xl:h-[450px]"
+            className="relative flex h-[350px] max-h-[800px] min-h-[100px] w-full items-center justify-center rounded-3xl bg-white text-black shadow-xl [aspect-ratio:1_/_1] dark:bg-accent dark:shadow-stone-950 xl:h-[450px]"
           >
-            {focusedCard}
+            {isMounted && (
+              <Image
+                key={focusedCard}
+                src={`/videos/demo-${focusedCard}.gif`}
+                alt={`Demo ${focusedCard}`}
+                fill
+                className="rounded-3xl object-cover"
+                unoptimized
+                priority
+              />
+            )}
           </div>
         </div>
       )}

utils/infoList.ts

@@ -1,9 +1,12 @@
 export const infoList = [
-  "You can adjust the volume and pan of the midi audio and original audio while it's playing.",
+  "You can adjust the volume and pan of the MIDI audio and original audio while it's playing.",
   "It is recommended when uploading a solo instrument recording to provide a tempo. Otherwise, the tempo will automatically be calculated.",
   "If the tempo was not able to be detected properly, it will default to 120 BPM.",
   "Hey, I hope you're having a great day. Thank you so much for taking the time to check out my project! ^_^",
-  "If there are any unnecessarily high or low notes in the midi, you can adjust the min and max frequencies and regenerate it.",
-  "If you want the midi output to be more like static chords, try increasing the minimum note length and note segmentation, and decrease the confidence threshold.",
+  "If there are any unnecessarily high or low notes in the MIDI, you can adjust the min and max frequencies and regenerate it.",
+  "If you want the MIDI output to be more like static chords, try increasing the minimum note length and note segmentation, and decrease the confidence threshold.",
   "The backdoor dominant is the five chord in the relative major of the parallel minor.",
+  "If you want to remove the MIDI transcription for an instrument that isn't part of the song, set the confidence threshold all the way up and regenerate it.",
+  "To continue working on the transcription, you can download the MIDI file and upload it to your music notation editor of choice.",
+  "If the automatic transcription isn't very accurate, you can download the isolated audio for each instrument and continue to transcribe it yourself.",
 ];