Fix hardcoded API paths: inject URLs via url_for() in template, read from window.NEUSICIAN_URLS in api.js

static/api.js

@@ -1,3 +1,13 @@
+const U = window.NEUSICIAN_URLS ?? {
+    astlog:  '/sompyle/astlog',
+    score:   '/sompyle/score.spls',
+    status:  '/sompyle/status.json',
+    result:  '/sompyle/result.mp3',
+    submit:  '/sompyle',
+};
+
+export const URLS = U;
+
 function authHeader(credentials) {
     if (!credentials) return {};
     const b64 = btoa(`${credentials.username}:${credentials.password}`);
@@ -5,7 +15,7 @@ function authHeader(credentials) {
 }
 
 export async function fetchAstLog(credentials) {
-    const res = await fetch('/sompyle/astlog', {
+    const res = await fetch(U.astlog, {
         headers: authHeader(credentials),
     });
     if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
@@ -13,7 +23,7 @@ export async function fetchAstLog(credentials) {
 }
 
 export async function fetchScoreText(credentials) {
-    const res = await fetch('/sompyle/score.spls', {
+    const res = await fetch(U.score, {
         headers: authHeader(credentials),
     });
     if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
@@ -21,7 +31,7 @@ export async function fetchScoreText(credentials) {
 }
 
 export async function putScoreText(text, credentials) {
-    const res = await fetch('/sompyle/score.spls', {
+    const res = await fetch(U.score, {
         method: 'PUT',
         headers: {
             ...authHeader(credentials),
@@ -34,7 +44,7 @@ export async function putScoreText(text, credentials) {
 }
 
 export async function fetchStatus(credentials) {
-    const res = await fetch('/sompyle/status.json', {
+    const res = await fetch(U.status, {
         headers: authHeader(credentials),
     });
     if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);

static/components/PaneCP.js

@@ -1,5 +1,5 @@
 import { h, ref } from 'vue';
-import { fetchScoreText, putScoreText } from '../api.js';
+import { fetchScoreText, putScoreText, URLS } from '../api.js';
 import { patchScore } from '../exporter.js';
 import { StatusPoller } from './StatusPoller.js';
 
@@ -127,7 +127,7 @@ export const PaneCP = {
                 store.synthesisStatus?.file_accomplished
                     ? h('audio', {
                         controls: true,
-                        src: '/sompyle/result.mp3',
+                        src: URLS.result,
                         style: 'display:block;width:100%;margin-top:0.5rem',
                       }) : null,
             ]);

templates/vue3_neusik/index.html

@@ -9,6 +9,15 @@
 <div id="score-editor-app"
      data-import-on-load="{{ import_on_load }}">
 </div>
+<script>
+window.NEUSICIAN_URLS = {
+    astlog:  "{{ url_for('get_static_astlog') }}",
+    score:   "{{ url_for('plain_text_score') }}",
+    status:  "{{ url_for('statusjson') }}",
+    result:  "{{ url_for('send_audio_generated') }}",
+    submit:  "{{ url_for('public-yaml-acceptor') }}"
+};
+</script>
 <script type="importmap">
 {
   "imports": {