Initial React UI (#202)

.gitignore

@@ -6,15 +6,15 @@ config.json
 .env
 
 # Ignore generated files
-outputs/
-favorites/
-voices/
-collections/
-outputs-rvc/
-voices-tortoise/
+/outputs/
+/favorites/
+/voices/
+/collections/
+/outputs-rvc/
+/voices-tortoise/
 
 # Ignore model checkpoints
-data/
+/data
 
 # Ignore temporary files
 temp/

Dockerfile

@@ -29,5 +29,8 @@ RUN pip3 install -r requirements_audiocraft.txt
 RUN pip3 install -r requirements_bark_hubert_quantizer.txt
 RUN pip3 install -r requirements_rvc.txt
 
+# Add React webui (testing)
+# RUN cd react-ui && npm install && npm run build
+
 # Run the server
 CMD python server.py

README.md

@@ -37,6 +37,10 @@ https://rsxdalv.github.io/bark-speaker-directory/
 [README_Bark.md](./README_Bark.md)
 
 ## Changelog
+Oct 24:
+* Add initial React UI for Musicgen and Demucs (https://github.com/rsxdalv/tts-generation-webui/pull/202)
+* Fix Bark long generation seed drifting (thanks to https://github.com/520Pig520)
+
 Sep 21:
 * Bark: Add continue as semantic history button
 * Switch to github docker image storage, new docker image:

react-ui/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["next", "next/core-web-vitals"]
+}

react-ui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

react-ui/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# vscode
+.vscode
+
+# upload cache
+/file-input-cache/
+

react-ui/next.config.js

@@ -0,0 +1,33 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // webpack(config) {
+  //   // Grab the existing rule that handles SVG imports
+  //   const fileLoaderRule = config.module.rules.find((rule) =>
+  //     rule.test?.test?.('.svg'),
+  //   )
+
+  //   config.module.rules.push(
+  //     // Reapply the existing rule, but only for svg imports ending in ?url
+  //     {
+  //       ...fileLoaderRule,
+  //       test: /\.svg$/i,
+  //       resourceQuery: /url/, // *.svg?url
+  //     },
+  //     // Convert all other *.svg imports to React components
+  //     {
+  //       test: /\.svg$/i,
+  //       issuer: /\.[jt]sx?$/,
+  //       resourceQuery: { not: /url/ }, // exclude if *.svg?url
+  //       use: ['@svgr/webpack'],
+  //     },
+  //   )
+
+  //   // Modify the file loader rule to ignore *.svg, since we have it handled now.
+  //   fileLoaderRule.exclude = /\.svg$/i
+
+  //   return config
+  // },
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig