From c62f61516281a50fea05b7217ba6c2718045966e Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Sun, 25 Jan 2026 18:44:25 -0800
Subject: [PATCH] Implement sample audio retrieval and update playback
 functionality

- Added a new API endpoint to serve profile sample audio files.
- Introduced a method in the apiClient to generate sample audio URLs.
- Refactored the SampleList component to utilize the new API for audio playback, enhancing the user experience.
- Cleaned up unused imports and optimized the handlePlay function for better performance.
---
 app/src/App.tsx                               |   2 +-
 .../components/VoiceProfiles/SampleList.tsx   |  11 ++++------
 app/src/lib/api/client.ts                     |   4 ++++
 backend/main.py                               |  20 ++++++++++++++++++
 tauri/src-tauri/gen/Assets.car                | Bin 3847048 -> 3847048 bytes
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/app/src/App.tsx b/app/src/App.tsx
index 0fda4e50..5b4fbce6 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -100,7 +100,7 @@ function App() {
         <Sidebar activeTab={activeTab} onTabChange={setActiveTab} />
 
         <main className="flex-1 ml-20 overflow-hidden flex flex-col">
-          <div className="container mx-auto px-8 py-8 max-w-[1800px] h-full overflow-hidden flex flex-col">
+          <div className="container mx-auto px-8 max-w-[1800px] h-full overflow-hidden flex flex-col">
             <UpdateNotification />
 
             {activeTab === 'settings' ? (
diff --git a/app/src/components/VoiceProfiles/SampleList.tsx b/app/src/components/VoiceProfiles/SampleList.tsx
index 0d82b926..ae2b5bb7 100644
--- a/app/src/components/VoiceProfiles/SampleList.tsx
+++ b/app/src/components/VoiceProfiles/SampleList.tsx
@@ -1,10 +1,9 @@
 import { Plus, Trash2, Play } from 'lucide-react';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { useToast } from '@/components/ui/use-toast';
 import { useDeleteSample, useProfileSamples } from '@/lib/hooks/useProfiles';
-import { useServerStore } from '@/stores/serverStore';
 import { usePlayerStore } from '@/stores/playerStore';
+import { apiClient } from '@/lib/api/client';
 import { SampleUpload } from './SampleUpload';
 
 interface SampleListProps {
@@ -15,8 +14,6 @@ export function SampleList({ profileId }: SampleListProps) {
   const { data: samples, isLoading } = useProfileSamples(profileId);
   const deleteSample = useDeleteSample();
   const [uploadOpen, setUploadOpen] = useState(false);
-  const { toast } = useToast();
-  const serverUrl = useServerStore((state) => state.serverUrl);
   const setAudio = usePlayerStore((state) => state.setAudio);
   const currentAudioId = usePlayerStore((state) => state.audioId);
   const isPlaying = usePlayerStore((state) => state.isPlaying);
@@ -27,8 +24,8 @@ export function SampleList({ profileId }: SampleListProps) {
     }
   };
 
-  const handlePlay = (audioPath: string, referenceText: string, sampleId: string) => {
-    const audioUrl = `${serverUrl}${audioPath}`;
+  const handlePlay = (referenceText: string, sampleId: string) => {
+    const audioUrl = apiClient.getSampleUrl(sampleId);
     setAudio(audioUrl, sampleId, referenceText.substring(0, 50));
   };
 
@@ -65,7 +62,7 @@ export function SampleList({ profileId }: SampleListProps) {
                 <Button
                   variant="ghost"
                   size="sm"
-                  onClick={() => handlePlay(sample.audio_path, sample.reference_text, sample.id)}
+                  onClick={() => handlePlay(sample.reference_text, sample.id)}
                   className={currentAudioId === sample.id && isPlaying ? 'text-primary' : ''}
                 >
                   <Play className="h-4 w-4 mr-1" />
diff --git a/app/src/lib/api/client.ts b/app/src/lib/api/client.ts
index cb9878cc..cacb91cc 100644
--- a/app/src/lib/api/client.ts
+++ b/app/src/lib/api/client.ts
@@ -146,6 +146,10 @@ class ApiClient {
     return `${this.getBaseUrl()}/audio/${audioId}`;
   }
 
+  getSampleUrl(sampleId: string): string {
+    return `${this.getBaseUrl()}/samples/${sampleId}`;
+  }
+
   // Transcription
   async transcribeAudio(file: File, language?: 'en' | 'zh'): Promise<TranscriptionResponse> {
     const formData = new FormData();
diff --git a/backend/main.py b/backend/main.py
index b9717e45..512ef5ed 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -427,6 +427,26 @@ async def get_audio(generation_id: str, db: Session = Depends(get_db)):
     )
 
 
+@app.get("/samples/{sample_id}")
+async def get_sample_audio(sample_id: str, db: Session = Depends(get_db)):
+    """Serve profile sample audio file."""
+    from .database import ProfileSample as DBProfileSample
+    
+    sample = db.query(DBProfileSample).filter_by(id=sample_id).first()
+    if not sample:
+        raise HTTPException(status_code=404, detail="Sample not found")
+    
+    audio_path = Path(sample.audio_path)
+    if not audio_path.exists():
+        raise HTTPException(status_code=404, detail="Audio file not found")
+    
+    return FileResponse(
+        audio_path,
+        media_type="audio/wav",
+        filename=f"sample_{sample_id}.wav",
+    )
+
+
 # ============================================
 # MODEL MANAGEMENT
 # ============================================
diff --git a/tauri/src-tauri/gen/Assets.car b/tauri/src-tauri/gen/Assets.car
index 8819f525d7566ec5560f9e038bb7b29c46c451b4..fc68b0d8d2c2e521b3b5a93efda7b3c08618c939 100644
GIT binary patch
delta 752
zcmZwFxpEXS5C-5{8^dy+2E3TV+?Tw%r6w6mEvftnegiU!klev;N<ap=L#hbIkHG_w
zvqeBa;*@`Dal(44zNwmEes!yR`t#Rd3SU3_!H;iW{GXLB){sJ`BASj>Sc6xxtb}u%
zl(bPhp9D##gOKyba8QPeO1f;nfA{v|)@Xl5lNk+Q1y<n{tifqG)6ZyF*E&_4VduTb
zReNEhV?mycAQP0!_)JbNpObS|v^Zz8pLWAft6kNSL(5WV-;%IWvWPk1U&=m{YF396
z3g(ouIu824!}USeT+&MACfG0uTZ=+P(FtWT)yRd)yvF}KXYZ^z4w{wW#%dRpsa7@;
z6cbu2+(dHC3KvW$wHc{RT?#6kT55}++mpTBA)JMCa2_teMYsf);R;-ZYj7QIz&hN7
zTQJYqfDzn*O}Gp9;66NnEqDlz;4wUbr|=A(!wY!X@9n-iI_e@WvsmL7tyrC~7Y-wm
z(UF!dv{dbKQ_6Y%H?Ps;VCOXm*oHAkP@utp1=k<!`2Kf?ZD@`eJD8DdscL}=s&Hg$
dE<r0YC(N~KO}x0p(d2L(AOiJ=<2T>;{{k6O)cpVe

delta 752
zcmZY7yKWRQ6b4{zLSVUH17r!8aKD}G_{{N)O*655Y~>O126Tv$KE-ZJK?i+GB#Oyn
z@D{8nD3DNE{$)wC8R=^*`9BxW^vBP^6uy3L27kVNX@0MC-l^oIiNuwfBymf@N+O(c
z_8O8mo<!I)Rr9ZoxM3QOZP|YR?(N5|(f-U&W_|!GunMPO4Nk+Ee&&aHt+P2=byZ7k
zVMD^~DSGQD1Sd^weJQn`tiwi(Th!U?r`_<=YRAF*qHRsBB2B!D6j|q87vrMIiu02}
zwy9Z<gFd9;`k><~S3X9jEG1*|3PEBGrOH*Fh26h}EKe?xnU8~JI@~}<$+C~BkXlnn
zY%UbEIC9xkKBvYS%(=WmEVR+M2)aGl+a1DLI0xt90$hYka2c+^Rk#M%;RdY3O}GW~
zj13sU9oU4sa1ZXo1K5Ix@CY8m6L<>G;5od2m;K)EtD~c?waL^`8_G%0ed7Z86e`l7
zAv#tqf~75QC%Ia}VyMyNVCOXuY{M8TFu+iQfb9=<n*LXpQV3FnNi+U6F>N82)RJRk
ef=$d)@Z8G<ozd$5yN)J@;}#tF{&4)}`~F|F_th@|