Upload folder using huggingface_hub

backend/examples/default/README.md

@@ -1,4 +1,5 @@
 Place the bundled example audio files for the demo flow in this directory.
+Song: Satelites - Periphery
 
 Expected filenames:
 

backend/main.py

@@ -22,6 +22,7 @@ app = FastAPI(title="Stem Separator")
 MAX_UPLOAD_SIZE = 100 * 1024 * 1024  # 100MB
 EXAMPLE_NAME = "default"
 EXAMPLE_DIR = Path(__file__).parent / "examples" / EXAMPLE_NAME
+EXAMPLE_README = EXAMPLE_DIR / "README.md"
 EXAMPLE_ORIGINAL_FILE = "original.mp3"
 EXAMPLE_STEM_FILES = {
     "Vocals": "Vocals.mp3",
@@ -188,6 +189,7 @@ async def delete_job(job_id: str):
 @app.get("/api/examples/default")
 async def get_example_output():
     original_path = get_example_file(EXAMPLE_ORIGINAL_FILE, allow_original=True)
+    song_name = get_example_song_name()
     stems = []
     for stem_name, filename in EXAMPLE_STEM_FILES.items():
         stem_path = get_example_file(filename)
@@ -201,9 +203,11 @@ async def get_example_output():
         )
 
     return {
+        "song": song_name,
         "original": {
             "filename": original_path.name,
             "audioUrl": f"/api/examples/{EXAMPLE_NAME}/audio/{original_path.name}",
+            "songName": song_name,
         },
         "stems": stems,
         "downloadAllUrl": f"/api/examples/{EXAMPLE_NAME}/download/all",
@@ -269,3 +273,17 @@ def get_example_file(filename: str, allow_original: bool = False) -> Path:
         raise HTTPException(404, f"Missing example asset: {filename}")
 
     return path
+
+
+def get_example_song_name() -> str:
+    default_name = "Example Song"
+    if not EXAMPLE_README.exists():
+        return default_name
+
+    for line in EXAMPLE_README.read_text(encoding="utf-8").splitlines():
+        if line.lower().startswith("song:"):
+            value = line.split(":", 1)[1].strip()
+            if value:
+                return value
+
+    return default_name

frontend/src/App.tsx

@@ -88,6 +88,7 @@ export default function App() {
             <OriginalTrack
               url={state.originalUrl}
               filename={state.filename}
+              songName={state.songName}
             />
             <OutputFormatSelector
               value={state.outputFormat}
@@ -119,6 +120,7 @@ export default function App() {
             <OriginalTrack
               url={state.originalUrl}
               filename={state.filename}
+              songName={state.songName}
             />
             <StemResults
               stems={state.stems}
@@ -133,6 +135,7 @@ export default function App() {
             <OriginalTrack
               url={state.original.audioUrl}
               filename={state.original.filename}
+              songName={state.original.songName}
             />
             <StemResults
               stems={state.stems}

frontend/src/api.ts

@@ -168,6 +168,7 @@ export function subscribeProgress(
 }
 
 export interface ExampleOutputResponse {
+  song?: string;
   original: OriginalTrackAsset;
   stems: StemAsset[];
   downloadAllUrl: string;

frontend/src/components/OriginalTrack.tsx

@@ -3,28 +3,37 @@ import { WaveformPlayer } from "./WaveformPlayer";
 interface OriginalTrackProps {
   url: string;
   filename: string;
+  songName?: string;
 }
 
-export function OriginalTrack({ url, filename }: OriginalTrackProps) {
+export function OriginalTrack({ url, filename, songName }: OriginalTrackProps) {
   return (
     <div className="bg-bg-card rounded-xl p-4 md:p-5">
-      <div className="flex items-center gap-2 mb-3">
-        <svg
-          className="w-5 h-5 text-accent"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-          />
-        </svg>
-        <span className="text-sm font-medium text-text-primary truncate">
-          {filename}
-        </span>
+      <div className="mb-3 space-y-1.5">
+        <div className="flex items-center gap-2">
+          <svg
+            className="w-5 h-5 text-accent"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
+            />
+          </svg>
+          <span className="text-sm font-medium text-text-primary truncate">
+            {filename}
+          </span>
+        </div>
+        {songName && (
+          <p className="text-sm text-text-secondary">
+            <span className="font-medium text-text-primary">Song:</span>{" "}
+            {songName}
+          </p>
+        )}
       </div>
       <WaveformPlayer
         url={url}

frontend/src/hooks/useSeparation.ts

@@ -33,6 +33,7 @@ function reducer(state: AppState, action: AppAction): AppState {
         filename: action.filename,
         originalUrl: action.originalUrl,
         outputFormat: action.outputFormat,
+        songName: action.songName,
         sourceKind: action.sourceKind,
         sourceUrl: action.sourceUrl,
         resolvedUrl: action.resolvedUrl,
@@ -49,6 +50,7 @@ function reducer(state: AppState, action: AppAction): AppState {
         filename: state.filename,
         originalUrl: state.originalUrl,
         outputFormat: state.outputFormat,
+        songName: state.songName,
         sourceKind: state.sourceKind,
         sourceUrl: state.sourceUrl,
         resolvedUrl: state.resolvedUrl,
@@ -72,6 +74,7 @@ function reducer(state: AppState, action: AppAction): AppState {
         filename: state.filename,
         originalUrl: state.originalUrl,
         outputFormat: state.outputFormat,
+        songName: state.songName,
         sourceKind: state.sourceKind,
         sourceUrl: state.sourceUrl,
         resolvedUrl: state.resolvedUrl,
@@ -118,6 +121,7 @@ export function useSeparation() {
           `input${getExtFromFilename(result.filename)}`
         ),
         outputFormat: getDefaultOutputFormat(result.filename),
+        songName: stripExtension(result.filename),
         sourceKind: "file",
       });
     } catch (err) {
@@ -189,6 +193,7 @@ export function useSeparation() {
           `input${getExtFromFilename(result.filename)}`
         ),
         outputFormat: getDefaultOutputFormat(result.filename),
+        songName: result.title || stripExtension(result.filename),
         sourceKind: result.platform,
         sourceUrl: result.source_url,
         resolvedUrl: result.resolved_url,
@@ -211,7 +216,10 @@ export function useSeparation() {
       const example = await fetchExampleOutput();
       dispatch({
         type: "LOAD_EXAMPLE_DONE",
-        original: example.original,
+        original: {
+          ...example.original,
+          songName: example.song || example.original.songName,
+        },
         stems: example.stems,
         downloadAllUrl: example.downloadAllUrl,
       });
@@ -252,6 +260,11 @@ function getExtFromFilename(filename: string): string {
   return dot >= 0 ? filename.slice(dot) : ".wav";
 }
 
+function stripExtension(filename: string): string {
+  const dot = filename.lastIndexOf(".");
+  return dot >= 0 ? filename.slice(0, dot) : filename;
+}
+
 function getDefaultOutputFormat(filename: string): OutputFormat {
   const ext = getExtFromFilename(filename).toLowerCase();
   if (ext === ".wav") return "wav";

frontend/src/types.ts

@@ -10,6 +10,7 @@ export type InputMode = "upload" | "link";
 export interface OriginalTrackAsset {
   filename: string;
   audioUrl: string;
+  songName?: string;
 }
 
 export interface StemAsset extends StemResult {
@@ -26,6 +27,7 @@ export type AppState =
       filename: string;
       originalUrl: string;
       outputFormat: OutputFormat;
+      songName?: string;
       sourceKind: SourceKind;
       sourceUrl?: string;
       resolvedUrl?: string;
@@ -36,6 +38,7 @@ export type AppState =
       filename: string;
       originalUrl: string;
       outputFormat: OutputFormat;
+      songName?: string;
       sourceKind: SourceKind;
       sourceUrl?: string;
       resolvedUrl?: string;
@@ -49,6 +52,7 @@ export type AppState =
       filename: string;
       originalUrl: string;
       outputFormat: OutputFormat;
+      songName?: string;
       sourceKind: SourceKind;
       sourceUrl?: string;
       resolvedUrl?: string;
@@ -72,6 +76,7 @@ export type AppAction =
       filename: string;
       originalUrl: string;
       outputFormat: OutputFormat;
+      songName?: string;
       sourceKind: SourceKind;
       sourceUrl?: string;
       resolvedUrl?: string;