React UI: Group bark and fix 404 (#241)

* fix 404 handler for wavesurfer * react ui: group bark tabs together * add screenshot
rsxdalv · Jan 9, 2024 · f83c92d · f83c92d
1 parent 6816d49
commit f83c92d
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -17,9 +17,10 @@ Google Colab demo: [![Open In Colab](https://colab.research.google.com/assets/co
 
 ## Screenshots
 
-|      ![musicgen](./screenshots/v2/musicgen.png)       |    ![rvc](./screenshots/v2/rvc.png)     | ![history](./screenshots/v2/history.jpg) |
-| :---------------------------------------------------: | :---------------------------------------------------: | :--------------------------------------: |
-| ![Screenshot 1](<./screenshots/screenshot%20(1).png>) | ![Screenshot 5](<./screenshots/screenshot%20(5).png>) | ![cloning](./screenshots/v2/cloning.png) |
+|  ![react](./screenshots/v2/react.png)  | ![musicgen](./screenshots/v2/musicgen.png) | ![rvc](./screenshots/v2/rvc.png) |
+| :-----------------------------------------: | :-----------------------------------------: | :-------------------------------: |
+| ![history](./screenshots/v2/history.jpg) | ![Screenshot 1](<./screenshots/screenshot%20(1).png>) | ![Screenshot 5](<./screenshots/screenshot%20(5).png>) |
+
 
 ## Examples
 
@@ -40,6 +41,14 @@ https://rsxdalv.github.io/bark-speaker-directory/
 https://github.com/rsxdalv/tts-generation-webui/discussions/186#discussioncomment-7291274
 
 ## Changelog
+Jan 9:
+* React UI
+  * Fix 404 handler for Wavesurfer
+  * Group Bark tabs together
+
+Jan 8:
+* Release React UI
+
 Oct 26:
 * Improve model selection UX for Musicgen
 

diff --git a/react-ui/src/components/AudioComponents.tsx b/react-ui/src/components/AudioComponents.tsx
@@ -137,7 +137,8 @@ const DownloadButton = ({ url }: { url?: string }) => {
         .then((blob) => {
           const blobURL = URL.createObjectURL(blob);
           setDownloadURL(blobURL);
-        });
+        })
+        .catch((e) => console.log("=== Error downloading", e));
     };
     download(url);
   }, [url]);

diff --git a/react-ui/src/components/Header.tsx b/react-ui/src/components/Header.tsx
@@ -2,14 +2,67 @@ import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-const routes = [
+type Route = {
+  href: string;
+  text: string | React.ReactNode;
+  target?: string;
+  subroutes?: Route[];
+};
+
+const routes: Route[] = [
   {
     href: "/",
     text: "Home",
   },
   {
     href: "/bark",
     text: "Bark",
+    subroutes: [
+      {
+        href: "/bark",
+        text: "Generation",
+      },
+      // {
+      //   href: "/bark_voice_generation",
+      //   text: "Voice Generation",
+      // },
+      // {
+      //   href: "/voices",
+      //   text: "Voices",
+      // },
+      // {
+      //   href: "/bark_settings",
+      //   text: "Settings",
+      // },
+      // {
+      //   href: "/vocos_wav",
+      //   text: "Vocos Wav",
+      // },
+      // {
+      //   href: "/vocos_npz",
+      //   text: "Vocos NPZ",
+      // },
+      {
+        href: "/bark/bark_voice_generation",
+        text: "Voice Generation",
+      },
+      {
+        href: "/bark/voices",
+        text: "Voices",
+      },
+      {
+        href: "/bark/bark_settings",
+        text: "Settings",
+      },
+      {
+        href: "/bark/vocos_wav",
+        text: "Vocos Wav",
+      },
+      {
+        href: "/bark/vocos_npz",
+        text: "Vocos NPZ",
+      },
+    ],
   },
   {
     href: "/tortoise",
@@ -19,25 +72,13 @@ const routes = [
     href: "/musicgen",
     text: "Musicgen",
   },
-  {
-    href: "/rvc",
-    text: "RVC",
-  },
   {
     href: "/demucs",
     text: "Demucs",
   },
   {
-    href: "/vocos_wav",
-    text: "Vocos Wav",
-  },
-  {
-    href: "/vocos_npz",
-    text: "Vocos NPZ",
-  },
-  {
-    href: "/bark_voice_generation",
-    text: "Bark Voice Generation",
+    href: "/rvc",
+    text: "RVC",
   },
   {
     href: "/history/outputs",
@@ -47,14 +88,6 @@ const routes = [
     href: "/history/favorites",
     text: "Favorites",
   },
-  {
-    href: "/voices",
-    text: "Bark Voices",
-  },
-  {
-    href: "/bark_settings",
-    text: "Bark Settings",
-  },
   // {
   //   href: "/history/collections",
   //   text: "History Collections",
@@ -69,11 +102,7 @@ const routes = [
   // },
   {
     href: "https://echo.ps.ai/?utm_source=bark_speaker_directory",
-    text: (
-      <span>
-        More Voices{" "}↗
-      </span>
-    ),
+    text: <span>More Voices ↗</span>,
     target: "_blank",
   },
 ];
@@ -82,26 +111,55 @@ export const Header = ({}) => {
   const router = useRouter();
   const route = router.asPath.replace("/", "");
 
+  const currentRoute =
+    routes.find((r) => r.href.slice(1) === route) ||
+    routes.find(
+      (r) => r.href.slice(1) === route.slice(0, route.lastIndexOf("/"))
+    );
+
+  const subroutes = currentRoute?.subroutes;
+
   return (
-    <div className="flex flex-col items-center justify-center w-full p-8 bg-white rounded-lg shadow-lg">
-      <h1 className="text-4xl font-bold text-center text-gray-900">
-        TTS Generation Webui
-      </h1>
-      <p className="text-lg text-center text-gray-700">
-        {routes.map(({ href, text, target }, i) => (
-          <React.Fragment key={href}>
-            <Link
-              href={href}
-              className={highlightOnRoute(route, href.slice(1))}
-              target={target}
-            >
-              {text}
-            </Link>
-            {i < routes.length - 1 && " | "}
-          </React.Fragment>
-        ))}
-      </p>
-    </div>
+    <>
+      <div className="flex flex-col items-center justify-center w-full p-8 bg-white rounded-lg shadow-lg">
+        <h1 className="text-4xl font-bold text-center text-gray-900">
+          TTS Generation Webui
+        </h1>
+        <p className="text-lg text-center text-gray-700">
+          {routes.map(({ href, text, target, subroutes }, i) => (
+            <React.Fragment key={href}>
+              <Link
+                href={href}
+                className={highlightOnRoute(route, href.slice(1))}
+                target={target}
+              >
+                {text}
+              </Link>
+              {i < routes.length - 1 && " | "}
+            </React.Fragment>
+          ))}
+        </p>
+      </div>
+      {subroutes && (
+        <div className="flex flex-col items-center justify-center w-full p-4 bg-white rounded-lg shadow-lg">
+          <p className="text-lg text-center text-gray-700">
+            {currentRoute?.text} {"> "}
+            {subroutes.map(({ href, text, target }, i) => (
+              <React.Fragment key={href}>
+                <Link
+                  href={href}
+                  className={highlightOnRoute(route, href.slice(1))}
+                  target={target}
+                >
+                  {text}
+                </Link>
+                {i < subroutes.length - 1 && " | "}
+              </React.Fragment>
+            ))}
+          </p>
+        </div>
+      )}
+    </>
   );
 };
 

diff --git a/react-ui/src/components/Template.tsx b/react-ui/src/components/Template.tsx
@@ -9,7 +9,7 @@ export const Template = ({ children }: { children: React.ReactNode }) => (
     <LocalVotesProvider>
       <VotesProvider>
         <main
-          className={`flex min-h-screen flex-col items-center justify-between p-12 gap-y-4 ${inter.className}`}
+          className={`flex min-h-screen flex-col items-center justify-start p-12 gap-y-2 ${inter.className}`}
         >
           <Header />
           {children}

diff --git a/react-ui/src/components/useWavesurfer.tsx b/react-ui/src/components/useWavesurfer.tsx
@@ -11,11 +11,13 @@ export const useWavesurfer = (containerRef, options: WaveSurferOptions) => {
 
     const ws = WaveSurfer.create({
       ...options,
+      url: undefined,
       container: containerRef.current,
     });
-
+    ws.load(options.url!).catch((e) => {
+      console.log("=== Wavesurfer loading failed", e);
+    });
     setWavesurfer(ws);
-
     return () => {
       ws.destroy();
     };

diff --git a/react-ui/src/pages/bark_settings.tsx → react-ui/src/pages/bark/bark_settings.tsx b/react-ui/src/pages/bark_settings.tsx → react-ui/src/pages/bark/bark_settings.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import { Template } from "../components/Template";
+import { Template } from "../../components/Template";
 import Head from "next/head";
-import useLocalStorage from "../hooks/useLocalStorage";
+import useLocalStorage from "../../hooks/useLocalStorage";
 import {
   BarkSettingsParams,
   initialBarkSettingsParams,
   barkSettingsId,
-} from "../tabs/BarkSettingsParams";
+} from "../../tabs/BarkSettingsParams";
 
 type Result = string;
 

diff --git a/react-ui/src/pages/bark_voice_generation.tsx → .../src/pages/bark/bark_voice_generation.tsx b/react-ui/src/pages/bark_voice_generation.tsx → .../src/pages/bark/bark_voice_generation.tsx
@@ -1,14 +1,14 @@
 import React from "react";
-import { Template } from "../components/Template";
-import useLocalStorage from "../hooks/useLocalStorage";
-import { AudioInput, AudioOutput } from "../components/AudioComponents";
+import { Template } from "../../components/Template";
+import useLocalStorage from "../../hooks/useLocalStorage";
+import { AudioInput, AudioOutput } from "../../components/AudioComponents";
 import Head from "next/head";
 import {
   BarkVoiceGenerationParams,
   barkVoiceGenerationId,
   initialState,
-} from "../tabs/BarkVoiceGenerationParams";
-import { GradioFile } from "../types/GradioFile";
+} from "../../tabs/BarkVoiceGenerationParams";
+import { GradioFile } from "../../types/GradioFile";
 
 type Result = {
   filename: string;

diff --git a/react-ui/src/pages/vocos_npz.tsx → react-ui/src/pages/bark/vocos_npz.tsx b/react-ui/src/pages/vocos_npz.tsx → react-ui/src/pages/bark/vocos_npz.tsx
@@ -1,15 +1,15 @@
 import React from "react";
-import { Template } from "../components/Template";
-import useLocalStorage from "../hooks/useLocalStorage";
-import { AudioInput, AudioOutput } from "../components/AudioComponents";
+import { Template } from "../../components/Template";
+import useLocalStorage from "../../hooks/useLocalStorage";
+import { AudioInput, AudioOutput } from "../../components/AudioComponents";
 import Head from "next/head";
 import {
   VocosParamsNPZ,
   vocosIdNPZ,
   initialState,
-} from "../tabs/VocosParamsNPZ";
-import { GradioFile } from "../types/GradioFile";
-import FileInput from "../components/FileInput";
+} from "../../tabs/VocosParamsNPZ";
+import { GradioFile } from "../../types/GradioFile";
+import FileInput from "../../components/FileInput";
 
 const VocosPageNPZ = () => {
   const [data, setData] = useLocalStorage<GradioFile[] | null>(
@@ -50,7 +50,7 @@ const VocosPageNPZ = () => {
       <Head>
         <title>Vocos - TTS Generation Webui</title>
       </Head>
-      <div className="flex space-x-4">
+      <div className="flex space-x-4 p-4">
         <div className="flex flex-col space-y-2">
           <FileInput
             accept=".npz"

diff --git a/react-ui/src/pages/vocos_wav.tsx → react-ui/src/pages/bark/vocos_wav.tsx b/react-ui/src/pages/vocos_wav.tsx → react-ui/src/pages/bark/vocos_wav.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Template } from "../components/Template";
-import useLocalStorage from "../hooks/useLocalStorage";
-import { AudioInput, AudioOutput } from "../components/AudioComponents";
+import { Template } from "../../components/Template";
+import useLocalStorage from "../../hooks/useLocalStorage";
+import { AudioInput, AudioOutput } from "../../components/AudioComponents";
 import Head from "next/head";
-import { VocosParams, vocosId, initialState } from "../tabs/VocosParams";
-import { GradioFile } from "../types/GradioFile";
+import { VocosParams, vocosId, initialState } from "../../tabs/VocosParams";
+import { GradioFile } from "../../types/GradioFile";
 
 type TypedGradioFile = GradioFile & {
   type_name?: string;
@@ -50,7 +50,7 @@ const VocosPage = () => {
       <Head>
         <title>Vocos - TTS Generation Webui</title>
       </Head>
-      <div className="flex space-x-4">
+      <div className="flex space-x-4 p-4">
         <div className="flex flex-col space-y-2">
           <AudioInput
             url={vocosParams?.audio}

diff --git a/react-ui/src/pages/voices.tsx → react-ui/src/pages/bark/voices.tsx b/react-ui/src/pages/voices.tsx → react-ui/src/pages/bark/voices.tsx
@@ -1,11 +1,11 @@
 import { Inter } from "next/font/google";
 import React from "react";
 
-import { getNpzDataSimpleVoices } from "../data/getVoicesData";
-import { Template } from "../components/Template";
+import { getNpzDataSimpleVoices } from "../../data/getVoicesData";
+import { Template } from "../../components/Template";
 import Head from "next/head";
-import { NPZ } from "../types/npz";
-import { CardVoiceNpz } from "../components/CardBig";
+import { NPZ } from "../../types/npz";
+import { CardVoiceNpz } from "../../components/CardBig";
 
 export const inter = Inter({ subsets: ["latin"] });
 

diff --git a/screenshots/v2/react.png b/screenshots/v2/react.png