findwordfix

package-lock.json

@@ -41,6 +41,9 @@
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
         "typescript": "~5.3.2"
+      },
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@alloc/quick-lru": {

src/app/findword/findword.component.ts

@@ -69,9 +69,9 @@ export class FindwordComponent {
       this.wordSentence = response.sentence;
       console.log("✅ Correct Word Set:", this.correctWord);
 
-      const baseUrl = "http://127.0.0.1:5005";
-      this.audioUrl = `${baseUrl}${response.audio_file_path}`;
-      console.log("✅ Full Audio URL:", this.audioUrl);
+        // ✅ use service helper (works on local & HF)
+      this.audioUrl = this.findwordService.buildAssetUrl(response.audio_file_path);
+      
 
       this.cd.detectChanges();
 

src/app/findword/findword.service.ts

@@ -6,17 +6,29 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class FindwordService {
-  private BASE_URL = 'http://127.0.0.1:5005';  // Backend URL
+  private readonly baseUrl = location.hostname.endsWith('hf.space')
+    ? 'https://pykara-py-learn-backend.hf.space/media'
+    : 'http://localhost:5000/media';
+
+  // Origin is needed to serve static assets like /static/audio/...
+  private readonly origin = this.baseUrl.replace(/\/media$/, '');
+  
   constructor(private http: HttpClient) { }
 
   // Fetches the audio file from backend
   fetchAudio(): Observable<any> {
-    return this.http.get(`${this.BASE_URL}/generate-vocabulary`, { responseType: 'json' });
+    return this.http.get(`${this.baseUrl}/generate-vocabulary`, { responseType: 'json' });
   }
 
 
   // Validates the word entered by the user
   validateWord(userWord: string, correctWord: string | null): Observable<any> {
-    return this.http.post<any>(`${this.BASE_URL}/validate-word`, { user_input: userWord, correct_word: correctWord });
+    return this.http.post<any>(`${this.baseUrl}/validate-word`, { user_input: userWord, correct_word: correctWord });
+  }
+
+  /** Build full URL for assets returned by backend (e.g., /static/audio/foo.mp3) */
+  buildAssetUrl(path: string): string {
+    // path is like "/static/audio/<file>.mp3"
+    return `${this.origin}${path}`;
   }
 }