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

Rely on TTS API for splitting

Browse source
This commit is contained in:
Richard Roberson 2025-02-25 00:58:32 -07:00
parent 1db906f8bc
commit b87b83310b
5 changed files with 157 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -103,7 +103,7 @@ services:
3. Configure the environment:
```bash
cp .env.template .env
cp template.env .env
# Edit .env with your configuration settings
```
> Note: The base URL for the TTS API should be accessible and relative to the Next.js server

8
src/app/api/tts/route.ts
View file

@ -20,7 +20,7 @@ export async function POST(req: NextRequest) {
// Initialize OpenAI client with abort signal
const openai = new OpenAI({
apiKey: openApiKey,
baseURL: openApiBaseUrl || 'https://api.openai.com/v1',
baseURL: openApiBaseUrl,
});
// Request audio from OpenAI and pass along the abort signal
@ -33,15 +33,15 @@ export async function POST(req: NextRequest) {
// Get the audio data as array buffer
// This will also be aborted if the client cancels
const arrayBuffer = await response.arrayBuffer();
const stream = response.body;
// Return audio data with appropriate headers
return new NextResponse(arrayBuffer);
return new NextResponse(stream);
} catch (error) {
// Check if this was an abort error
if (error instanceof Error && error.name === 'AbortError') {
console.log('TTS request aborted by client');
return new Response(null, { status: 499 }); // Use 499 status for client closed request
return new NextResponse(null, { status: 499 }); // Use 499 status for client closed request
}
console.error('Error generating TTS:', error);

230
src/components/DocumentSettings.tsx
View file

@ -1,11 +1,13 @@
'use client';
import { Fragment, useState, useRef } from 'react';
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild, Listbox, ListboxButton, ListboxOptions, ListboxOption, Button } from '@headlessui/react';
import { Dialog, DialogPanel, Transition, TransitionChild, Listbox, ListboxButton, ListboxOptions, ListboxOption, Button } from '@headlessui/react';
import { useConfig, ViewType } from '@/contexts/ConfigContext';
import { ChevronUpDownIcon, CheckIcon } from '@/components/icons/Icons';
import { useEPUB } from '@/contexts/EPUBContext';
const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.NODE_ENV == null;
interface DocViewSettingsProps {
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
@ -93,136 +95,126 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
leaveTo="opacity-0 scale-95"
>
<DialogPanel className="w-full max-w-md transform rounded-2xl bg-base p-6 text-left align-middle shadow-xl transition-all">
<DialogTitle
as="h3"
className="text-lg font-semibold leading-6 text-foreground"
>
View Settings
</DialogTitle>
<div className="mt-4">
<div className="space-y-4">
{!epub && <div className="space-y-2">
<label className="block text-sm font-medium text-foreground">Mode</label>
<Listbox
value={selectedView}
onChange={(newView) => updateConfigKey('viewType', newView.id as ViewType)}
<div className="space-y-4">
{isDev && <div className="space-y-2 pb-2">
{!isGenerating ? (
<Button
type="button"
className="w-full inline-flex justify-center rounded-lg bg-accent px-4 py-2 text-sm
font-medium text-background hover:opacity-95 focus:outline-none
focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
onClick={handleStartGeneration}
>
<div className="relative z-10">
<ListboxButton className="relative w-full cursor-pointer rounded-lg bg-background py-2 pl-3 pr-10 text-left text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent transform transition-transform duration-200 ease-in-out hover:scale-[1.01] hover:text-accent">
<span className="block truncate">{selectedView.name}</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon className="h-5 w-5 text-muted" />
</span>
</ListboxButton>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<ListboxOptions className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 shadow-lg ring-1 ring-black/5 focus:outline-none">
{viewTypes.map((view) => (
<ListboxOption
key={view.id}
className={({ active }) =>
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-accent/10 text-accent' : 'text-foreground'
}`
}
value={view}
>
{({ selected }) => (
<>
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
{view.name}
</span>
{selected ? (
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-accent">
<CheckIcon className="h-5 w-5" />
</span>
) : null}
</>
)}
</ListboxOption>
))}
</ListboxOptions>
</Transition>
Export to Audiobook (experimental)
</Button>
) : (
<div className="space-y-2">
<div className="w-full bg-background rounded-lg overflow-hidden">
<div
className="h-2 bg-accent transition-all duration-300 ease-in-out"
style={{ width: `${progress}%` }}
/>
</div>
</Listbox>
{selectedView.id === 'scroll' && (
<p className="text-sm text-warning pt-2">
Note: Continuous scroll may perform poorly for larger documents.
</p>
)}
</div>}
<div className="flex justify-between items-center text-sm text-muted">
<span>{Math.round(progress)}% complete</span>
<Button
type="button"
className="inline-flex justify-center rounded-lg px-2.5 py-1 text-sm
font-medium text-foreground hover:text-accent focus:outline-none
focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
transform transition-transform duration-200 ease-in-out hover:scale-[1.02]"
onClick={handleCancel}
>
Cancel and download
</Button>
</div>
</div>
)}
</div>}
{!epub && <div className="space-y-2">
<label className="block text-sm font-medium text-foreground">Mode</label>
<Listbox
value={selectedView}
onChange={(newView) => updateConfigKey('viewType', newView.id as ViewType)}
>
<div className="relative z-10">
<ListboxButton className="relative w-full cursor-pointer rounded-lg bg-background py-2 pl-3 pr-10 text-left text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent transform transition-transform duration-200 ease-in-out hover:scale-[1.01] hover:text-accent">
<span className="block truncate">{selectedView.name}</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon className="h-5 w-5 text-muted" />
</span>
</ListboxButton>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<ListboxOptions className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 shadow-lg ring-1 ring-black/5 focus:outline-none">
{viewTypes.map((view) => (
<ListboxOption
key={view.id}
className={({ active }) =>
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-accent/10 text-accent' : 'text-foreground'
}`
}
value={view}
>
{({ selected }) => (
<>
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
{view.name}
</span>
{selected ? (
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-accent">
<CheckIcon className="h-5 w-5" />
</span>
) : null}
</>
)}
</ListboxOption>
))}
</ListboxOptions>
</Transition>
</div>
</Listbox>
{selectedView.id === 'scroll' && (
<p className="text-sm text-warning pt-2">
Note: Continuous scroll may perform poorly for larger documents.
</p>
)}
</div>}
<div className="space-y-2">
<label className="flex items-center space-x-2">
<input
type="checkbox"
checked={skipBlank}
onChange={(e) => updateConfigKey('skipBlank', e.target.checked)}
className="form-checkbox h-4 w-4 text-accent rounded border-muted"
/>
<span className="text-sm font-medium text-foreground">Skip blank pages</span>
</label>
<p className="text-sm text-muted pl-6">
Automatically skip pages with no text content
</p>
</div>
{epub && (
<div className="space-y-2">
<label className="flex items-center space-x-2">
<input
type="checkbox"
checked={skipBlank}
onChange={(e) => updateConfigKey('skipBlank', e.target.checked)}
checked={epubTheme}
onChange={(e) => updateConfigKey('epubTheme', e.target.checked)}
className="form-checkbox h-4 w-4 text-accent rounded border-muted"
/>
<span className="text-sm font-medium text-foreground">Skip blank pages</span>
<span className="text-sm font-medium text-foreground">Use theme (experimental)</span>
</label>
<p className="text-sm text-muted pl-6">
Automatically skip pages with no text content
Apply the current app theme to the EPUB viewer
</p>
</div>
{epub && (
<>
<div className="space-y-2">
<label className="flex items-center space-x-2">
<input
type="checkbox"
checked={epubTheme}
onChange={(e) => updateConfigKey('epubTheme', e.target.checked)}
className="form-checkbox h-4 w-4 text-accent rounded border-muted"
/>
<span className="text-sm font-medium text-foreground">Use theme (experimental)</span>
</label>
<p className="text-sm text-muted pl-6">
Apply the current app theme to the EPUB viewer
</p>
</div>
<div className="mt-4 space-y-2">
{!isGenerating ? (
<Button
type="button"
className="w-full inline-flex justify-center rounded-lg bg-accent px-4 py-2 text-sm
font-medium text-background hover:opacity-95 focus:outline-none
focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
onClick={handleStartGeneration}
>
Export to Audiobook (.mp3)
</Button>
) : (
<div className="space-y-2">
<div className="w-full bg-background rounded-lg overflow-hidden">
<div
className="h-2 bg-accent transition-all duration-300 ease-in-out"
style={{ width: `${progress}%` }}
/>
</div>
<div className="flex justify-between items-center text-sm text-muted">
<span>{Math.round(progress)}% complete</span>
<Button
type="button"
className="inline-flex justify-center rounded-lg px-2.5 py-1 text-sm
font-medium text-foreground hover:text-accent focus:outline-none
focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
transform transition-transform duration-200 ease-in-out hover:scale-[1.02]"
onClick={handleCancel}
>
Cancel and download
</Button>
</div>
</div>
)}
</div>
</>
)}
</div>
)}
</div>
<div className="mt-3 flex justify-end">

142
src/contexts/EPUBContext.tsx
View file

@ -191,123 +191,63 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
// Create an array to store all audio chunks
const audioChunks: ArrayBuffer[] = [];
let processedSentences = 0;
let totalSentences = 0;
// First, count total sentences
for (const text of textArray) {
if (!text.trim()) continue;
const nlpResponse = await fetch('/api/nlp', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text }),
});
if (!nlpResponse.ok) {
throw new Error(`NLP processing failed with status ${nlpResponse.status}`);
}
const nlpData = await nlpResponse.json();
const sentences = nlpData?.sentences;
if (sentences && Array.isArray(sentences)) {
totalSentences += sentences.length;
}
}
let processedSections = 0;
const totalSections = textArray.length;
// Process each section of text
for (const text of textArray) {
if (!text.trim()) continue;
// Check for cancellation
if (signal?.aborted) {
// If cancelled, return what we have so far
const partialBuffer = combineAudioChunks(audioChunks);
return partialBuffer;
}
const nlpResponse = await fetch('/api/nlp', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text }),
});
if (!nlpResponse.ok) {
throw new Error(`NLP processing failed with status ${nlpResponse.status}`);
}
const nlpData = await nlpResponse.json();
const sentences = nlpData?.sentences;
if (!sentences || !Array.isArray(sentences) || sentences.length === 0) {
console.warn('No valid sentences returned from NLP, processing text block as single sentence');
if (!text.trim()) {
processedSections++;
continue;
}
// Process each sentence through TTS with retries
for (const sentence of sentences) {
// Check for cancellation
if (signal?.aborted) {
try {
const ttsResponse = await fetch('/api/tts', {
method: 'POST',
headers: {
'x-openai-key': apiKey,
'x-openai-base-url': baseUrl,
},
body: JSON.stringify({
text: text.trim(),
voice: voice,
speed: voiceSpeed,
}),
signal // Pass the AbortSignal to the fetch request
});
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(audioBuffer);
// Add a small pause between sections (500ms of silence)
const silenceBuffer = new ArrayBuffer(24000);
audioChunks.push(silenceBuffer);
} catch (error) {
if (error instanceof Error && error.name === 'AbortError') {
console.log('TTS request aborted');
const partialBuffer = combineAudioChunks(audioChunks);
return partialBuffer;
}
if (!sentence || typeof sentence !== 'string' || !sentence.trim()) {
processedSentences++;
continue;
}
let retryCount = 0;
const maxRetries = 2;
let success = false;
while (retryCount <= maxRetries && !success) {
try {
const ttsResponse = await fetch('/api/tts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-openai-key': apiKey || '',
'x-openai-base-url': baseUrl || 'https://api.openai.com/v1',
},
body: JSON.stringify({
text: sentence.trim(),
voice: voice,
speed: voiceSpeed,
}),
});
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(audioBuffer);
success = true;
} catch (error) {
retryCount++;
if (retryCount <= maxRetries) {
console.warn(`TTS generation failed, attempt ${retryCount} of ${maxRetries}:`, error);
await new Promise(resolve => setTimeout(resolve, 1000));
} else {
console.error(`Failed to generate audio after ${maxRetries} retries, skipping sentence:`, sentence);
}
}
}
if (success) {
// Add a small pause between sentences (500ms of silence)
const silenceBuffer = new ArrayBuffer(24000);
audioChunks.push(silenceBuffer);
}
processedSentences++;
onProgress((processedSentences / totalSentences) * 100);
console.error('Error processing section:', error);
}
processedSections++;
onProgress((processedSections / totalSections) * 100);
}
if (audioChunks.length === 0) {

0
.env.template → template.env
View file