Fix API server retrieval: fallback to environment variables if not found in the DOM

Author: vinaymavi

app/auth/synthesis/page.tsx

@@ -20,24 +20,28 @@ export default function SynthesisPage() {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   // Initialize the multi-voice synthesis mutation
-  const { mutate: generateMultiVoiceSynthesis, isPending: isSynthesisLoading } =
-    useMutationPostTextToSpeechMultiVoice(
-      (data) => {
-        // On success
-        setIsLoading(false);
-        if (data && data.length > 0 && data[0].data) {
-          setAudioData(data[0].data);
-        } else {
-          setError('No audio data received from synthesis');
-        }
-      },
-      (error) => {
-        // On error
-        setIsLoading(false);
-        console.error('Synthesis error:', error);
-        setError('Failed to generate synthesis. Please try again.');
-      },
-    );
+  const {
+    mutate: generateMultiVoiceSynthesis,
+    isPending: isSynthesisLoading,
+    data,
+  } = useMutationPostTextToSpeechMultiVoice(
+    (data) => {
+      // On success
+      setIsLoading(false);
+      if (data && data.data && data.data.length) {
+        setAudioData(data.data);
+        setError(null);
+      } else {
+        setError('No audio data received from synthesis');
+      }
+    },
+    (error) => {
+      // On error
+      setIsLoading(false);
+      console.error('Synthesis error:', error);
+      setError('Failed to generate synthesis. Please try again.');
+    },
+  );
 
   const handleGenerate = async () => {
     if (!inputText.trim()) {

src/helpers.ts

@@ -39,8 +39,9 @@ export function s3RandomPublicKey() {
 }
 
 export function getApiServer() {
-  const apiServer = document.querySelector("[data-store='apiServer']")
-    ?.textContent;
+  const apiServer =
+    document.querySelector("[data-store='apiServer']")?.textContent ||
+    process.env.NEXT_PUBLIC_API_SERVER;
 
   if (!apiServer) {
     throw new Error('apiServer not found');
@@ -50,8 +51,9 @@ export function getApiServer() {
 }
 
 export function getBatchServer() {
-  const batchServer = document.querySelector("[data-store='batchApiServer']")
-    ?.textContent;
+  const batchServer =
+    document.querySelector("[data-store='batchApiServer']")?.textContent ||
+    process.env.NEXT_PUBLIC_BATCH_API_SERVER;
 
   if (!batchServer) {
     throw new Error('batchServer not found');
@@ -62,9 +64,9 @@ export function getBatchServer() {
 
 // generate a function getImageGenerationServer
 export function getImageGenerationServer() {
-  const imageGenerationServer = document.querySelector(
-    "[data-store='imageGenerationServer']",
-  )?.textContent;
+  const imageGenerationServer =
+    document.querySelector("[data-store='imageGenerationServer']")
+      ?.textContent || process.env.NEXT_PUBLIC_IMAGE_GENERATION_SERVER_URL;
 
   if (!imageGenerationServer) {
     throw new Error('imageGenerationServer not found');