danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implement retry logic for TTS API calls and clean up code

Browse source
This commit is contained in:
Richard Roberson 2025-03-03 23:03:52 -07:00
parent 2f2442e5a2
commit ce9df9a5ab
7 changed files with 151 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
playwright.config.ts
View file

@ -37,7 +37,7 @@ export default defineConfig({
/* Run your local dev server before starting the tests */ /* Run your local dev server before starting the tests */
webServer: { webServer: {
command: process.env.CI ? 'npm run build && npm run start' : 'npm run dev', command: 'npm run build && npm run start',
url: 'http://localhost:3003', url: 'http://localhost:3003',
reuseExistingServer: !process.env.CI, reuseExistingServer: !process.env.CI,
timeout: 120 * 1000, timeout: 120 * 1000,

2
src/app/api/tts/voices/route.ts
View file

@ -9,7 +9,7 @@ export async function GET(req: NextRequest) {
const openApiBaseUrl = req.headers.get('x-openai-base-url') || process.env.API_BASE; const openApiBaseUrl = req.headers.get('x-openai-base-url') || process.env.API_BASE;
// Request voices from OpenAI // Request voices from OpenAI
const response = await fetch(`${openApiBaseUrl || 'https://api.openai.com/v1'}/audio/voices`, { const response = await fetch(`${openApiBaseUrl}/audio/voices`, {
headers: { headers: {
'Authorization': `Bearer ${openApiKey}`, 'Authorization': `Bearer ${openApiKey}`,
'Content-Type': 'application/json', 'Content-Type': 'application/json',

2
src/app/layout.tsx
View file

@ -50,7 +50,7 @@ const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.N
export default function RootLayout({ children }: { children: ReactNode }) { export default function RootLayout({ children }: { children: ReactNode }) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en">
<head> <head>
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
</head> </head>

59
src/contexts/EPUBContext.tsx
View file

@ -20,6 +20,7 @@ import { SpineItem } from 'epubjs/types/section';
import { useParams } from 'next/navigation'; import { useParams } from 'next/navigation';
import { useConfig } from './ConfigContext'; import { useConfig } from './ConfigContext';
import { combineAudioChunks } from '@/utils/audio'; import { combineAudioChunks } from '@/utils/audio';
import { withRetry } from '@/utils/audio';
interface EPUBContextType { interface EPUBContextType {
currDocData: ArrayBuffer | undefined; currDocData: ArrayBuffer | undefined;
@ -202,7 +203,7 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
// Get TOC for chapter titles // Get TOC for chapter titles
const chapters = tocRef.current || []; const chapters = tocRef.current || [];
console.log('Chapter map:', chapters); console.log('Chapters:', chapters);
// Create a map of section hrefs to their chapter titles // Create a map of section hrefs to their chapter titles
const sectionTitleMap = new Map<string, string>(); const sectionTitleMap = new Map<string, string>();
@ -210,7 +211,6 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
// First, loop through all chapters to create the mapping // First, loop through all chapters to create the mapping
for (const chapter of chapters) { for (const chapter of chapters) {
if (!chapter.href) continue; if (!chapter.href) continue;
const chapterBaseHref = chapter.href.split('#')[0]; const chapterBaseHref = chapter.href.split('#')[0];
const chapterTitle = chapter.label.trim(); const chapterTitle = chapter.label.trim();
@ -240,29 +240,40 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
if (!trimmedText) continue; if (!trimmedText) continue;
try { try {
const ttsResponse = await fetch('/api/tts', { const audioBuffer = await withRetry(
method: 'POST', async () => {
headers: { const ttsResponse = await fetch('/api/tts', {
'x-openai-key': apiKey, method: 'POST',
'x-openai-base-url': baseUrl, headers: {
'x-openai-key': apiKey,
'x-openai-base-url': baseUrl,
},
body: JSON.stringify({
text: trimmedText,
voice: voice,
speed: voiceSpeed,
format: format === 'm4b' ? 'aac' : 'mp3',
}),
signal
});
if (!ttsResponse.ok) {
throw new Error(`TTS processing failed with status ${ttsResponse.status}`);
}
const buffer = await ttsResponse.arrayBuffer();
if (buffer.byteLength === 0) {
throw new Error('Received empty audio buffer from TTS');
}
return buffer;
}, },
body: JSON.stringify({ {
text: trimmedText, maxRetries: 2,
voice: voice, initialDelay: 5000,
speed: voiceSpeed, maxDelay: 10000,
format: format === 'm4b' ? 'aac' : 'mp3', backoffFactor: 2
}), }
signal );
});
if (!ttsResponse.ok) {
throw new Error(`TTS processing failed with status ${ttsResponse.status}`);
}
const audioBuffer = await ttsResponse.arrayBuffer();
if (audioBuffer.byteLength === 0) {
throw new Error('Received empty audio buffer from TTS');
}
// Get the chapter title from our pre-computed map // Get the chapter title from our pre-computed map
let chapterTitle = sectionTitleMap.get(section.href); let chapterTitle = sectionTitleMap.get(section.href);

59
src/contexts/PDFContext.tsx
View file

@ -35,7 +35,7 @@ import {
} from '@/utils/pdf'; } from '@/utils/pdf';
import type { PDFDocumentProxy } from 'pdfjs-dist'; import type { PDFDocumentProxy } from 'pdfjs-dist';
import { combineAudioChunks } from '@/utils/audio'; import { combineAudioChunks, withRetry } from '@/utils/audio';
/** /**
* Interface defining all available methods and properties in the PDF context * Interface defining all available methods and properties in the PDF context
@ -235,29 +235,40 @@ export function PDFProvider({ children }: { children: ReactNode }) {
const text = textPerPage[i]; const text = textPerPage[i];
try { try {
const ttsResponse = await fetch('/api/tts', { const audioBuffer = await withRetry(
method: 'POST', async () => {
headers: { const ttsResponse = await fetch('/api/tts', {
'x-openai-key': apiKey, method: 'POST',
'x-openai-base-url': baseUrl, headers: {
'x-openai-key': apiKey,
'x-openai-base-url': baseUrl,
},
body: JSON.stringify({
text,
voice: voice,
speed: voiceSpeed,
format: format === 'm4b' ? 'aac' : 'mp3'
}),
signal
});
if (!ttsResponse.ok) {
throw new Error(`TTS processing failed with status ${ttsResponse.status}`);
}
const buffer = await ttsResponse.arrayBuffer();
if (buffer.byteLength === 0) {
throw new Error('Received empty audio buffer from TTS');
}
return buffer;
}, },
body: JSON.stringify({ {
text, maxRetries: 3,
voice: voice, initialDelay: 1000,
speed: voiceSpeed, maxDelay: 5000,
format: format === 'm4b' ? 'aac' : 'mp3' backoffFactor: 2
}), }
signal );
});
if (!ttsResponse.ok) {
throw new Error(`TTS processing failed with status ${ttsResponse.status}`);
}
const audioBuffer = await ttsResponse.arrayBuffer();
if (audioBuffer.byteLength === 0) {
throw new Error('Received empty audio buffer from TTS');
}
audioChunks.push({ audioChunks.push({
buffer: audioBuffer, buffer: audioBuffer,
@ -273,8 +284,6 @@ export function PDFProvider({ children }: { children: ReactNode }) {
}); });
currentTime += (audioBuffer.byteLength + 48000) / 48000; currentTime += (audioBuffer.byteLength + 48000) / 48000;
// Update progress based on processed text length
processedLength += text.length; processedLength += text.length;
onProgress((processedLength / totalLength) * 100); onProgress((processedLength / totalLength) * 100);

50
src/contexts/TTSContext.tsx
View file

@ -35,6 +35,7 @@ import { useMediaSession } from '@/hooks/audio/useMediaSession';
import { useAudioContext } from '@/hooks/audio/useAudioContext'; import { useAudioContext } from '@/hooks/audio/useAudioContext';
import { getLastDocumentLocation } from '@/utils/indexedDB'; import { getLastDocumentLocation } from '@/utils/indexedDB';
import { useBackgroundState } from '@/hooks/audio/useBackgroundState'; import { useBackgroundState } from '@/hooks/audio/useBackgroundState';
import { withRetry } from '@/utils/audio';
// Media globals // Media globals
declare global { declare global {
@ -409,31 +410,40 @@ export function TTSProvider({ children }: { children: ReactNode }) {
const controller = new AbortController(); const controller = new AbortController();
activeAbortControllers.current.add(controller); activeAbortControllers.current.add(controller);
const response = await fetch('/api/tts', { const arrayBuffer = await withRetry(
method: 'POST', async () => {
headers: { const response = await fetch('/api/tts', {
'Content-Type': 'application/json', method: 'POST',
'x-openai-key': openApiKey || '', headers: {
'x-openai-base-url': openApiBaseUrl || '', 'Content-Type': 'application/json',
'x-openai-key': openApiKey || '',
'x-openai-base-url': openApiBaseUrl || '',
},
body: JSON.stringify({
text: sentence,
voice: voice,
speed: speed,
}),
signal: controller.signal,
});
if (!response.ok) {
throw new Error('Failed to generate audio');
}
return response.arrayBuffer();
}, },
body: JSON.stringify({ {
text: sentence, maxRetries: 3,
voice: voice, initialDelay: 1000,
speed: speed, maxDelay: 5000,
}), backoffFactor: 2
signal: controller.signal, }
}); );
// Remove the controller once the request is complete // Remove the controller once the request is complete
activeAbortControllers.current.delete(controller); activeAbortControllers.current.delete(controller);
if (!response.ok) {
throw new Error('Failed to generate audio');
}
// Get the raw array buffer - no need to decode since it's already MP3
const arrayBuffer = await response.arrayBuffer();
// Cache the array buffer // Cache the array buffer
audioCache.set(sentence, arrayBuffer); audioCache.set(sentence, arrayBuffer);

49
src/utils/audio.ts
View file

@ -8,6 +8,55 @@ interface AudioChunk {
startTime: number; startTime: number;
} }
interface RetryOptions {
maxRetries?: number;
initialDelay?: number;
maxDelay?: number;
backoffFactor?: number;
}
/**
* Executes a function with exponential backoff retry logic
* @param operation Function to retry
* @param options Retry configuration options
* @returns Promise resolving to the operation result
*/
export const withRetry = async <T>(
operation: () => Promise<T>,
options: RetryOptions = {}
): Promise<T> => {
const {
maxRetries = 3,
initialDelay = 1000,
maxDelay = 10000,
backoffFactor = 2
} = options;
let lastError: Error | null = null;
for (let attempt = 0; attempt < maxRetries; attempt++) {
try {
return await operation();
} catch (error) {
lastError = error instanceof Error ? error : new Error(String(error));
if (attempt === maxRetries - 1) {
break;
}
const delay = Math.min(
initialDelay * Math.pow(backoffFactor, attempt),
maxDelay
);
console.log(`Retry attempt ${attempt + 1}/${maxRetries} failed. Retrying in ${delay}ms...`);
await new Promise(resolve => setTimeout(resolve, delay));
}
}
throw lastError || new Error('Operation failed after retries');
}
/** /**
* Combines audio chunks into a single audio file * Combines audio chunks into a single audio file
* @param audioChunks Array of audio chunks with metadata * @param audioChunks Array of audio chunks with metadata