Merge pull request #25 from richardr1126/server-tts

Server TTS

Author: richardr1126

.github/workflows/docker-publish.yml

@@ -38,7 +38,7 @@ jobs:
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
-            type=raw,value=latest
+            type=raw,value=latest,enable=${{ !contains(github.ref, '-pre') }}
             type=semver,pattern={{version}}
 
       - name: Build and push Docker image

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openreader-webui",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

src/app/api/tts/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from 'next/server';
+import OpenAI from 'openai';
+
+export async function POST(req: NextRequest) {
+  try {
+    // Get API credentials from headers
+    const openApiKey = req.headers.get('x-openai-key');
+    const openApiBaseUrl = req.headers.get('x-openai-base-url');
+    const { text, voice, speed } = await req.json();
+    console.log('Received TTS request:', text, voice, speed);
+
+    if (!openApiKey || !openApiBaseUrl) {
+      return NextResponse.json({ error: 'Missing API credentials' }, { status: 401 });
+    }
+
+    if (!text || !voice || !speed) {
+      return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
+    }
+
+    // Initialize OpenAI client
+    const openai = new OpenAI({
+      apiKey: openApiKey,
+      baseURL: openApiBaseUrl,
+    });
+
+    // Request audio from OpenAI
+    const response = await openai.audio.speech.create({
+      model: 'tts-1',
+      voice: voice as "alloy",
+      input: text,
+      speed: speed,
+    });
+
+    // Get the audio data as array buffer
+    const arrayBuffer = await response.arrayBuffer();
+
+    // Return audio data with appropriate headers
+    return new NextResponse(arrayBuffer);
+  } catch (error) {
+    console.error('Error generating TTS:', error);
+    return NextResponse.json(
+      { error: 'Failed to generate audio' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/tts/voices/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const DEFAULT_VOICES = ['alloy', 'ash', 'coral', 'echo', 'fable', 'onyx', 'nova', 'sage', 'shimmer'];
+
+export async function GET(req: NextRequest) {
+  try {
+    // Get API credentials from headers
+    const openApiKey = req.headers.get('x-openai-key');
+    const openApiBaseUrl = req.headers.get('x-openai-base-url');
+
+    if (!openApiKey || !openApiBaseUrl) {
+      return NextResponse.json({ error: 'Missing API credentials' }, { status: 401 });
+    }
+
+    // Request voices from OpenAI
+    const response = await fetch(`${openApiBaseUrl}/audio/voices`, {
+      headers: {
+        'Authorization': `Bearer ${openApiKey}`,
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch voices');
+    }
+
+    const data = await response.json();
+    return NextResponse.json({ voices: data.voices || DEFAULT_VOICES });
+  } catch (error) {
+    console.error('Error fetching voices:', error);
+    // Return default voices on error
+    return NextResponse.json({ voices: DEFAULT_VOICES });
+  }
+}

src/components/EPUBViewer.tsx

@@ -25,7 +25,7 @@ interface EPUBViewerProps {
 export function EPUBViewer({ className = '' }: EPUBViewerProps) {
   const { id } = useParams();
   const { currDocData, currDocName, currDocPage, extractPageText } = useEPUB();
-  const { skipToLocation, registerLocationChangeHandler, setIsEPUB } = useTTS();
+  const { skipToLocation, registerLocationChangeHandler, setIsEPUB, pause } = useTTS();
   const { epubTheme } = useConfig();
   const bookRef = useRef<Book | null>(null);
   const rendition = useRef<Rendition | undefined>(undefined);
@@ -35,9 +35,7 @@ export function EPUBViewer({ className = '' }: EPUBViewerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const isEPUBSetOnce = useRef(false);
-  const isResizing = useRef(false);
-
-  useEPUBResize(containerRef, isResizing);
+  const { isResizing, setIsResizing, dimensions } = useEPUBResize(containerRef);
 
   const handleLocationChanged = useCallback((location: string | number) => {
     // Set the EPUB flag once the location changes
@@ -68,23 +66,45 @@ export function EPUBViewer({ className = '' }: EPUBViewerProps) {
       setLastDocumentLocation(id as string, location.toString());
     }
 
-    if (isResizing.current) {
-      skipToLocation(location, false);
-      isResizing.current = false;
-    } else {
-      skipToLocation(location, true);
-    }
+    skipToLocation(location);
 
     locationRef.current = location;
     extractPageText(bookRef.current, rendition.current);
+
   }, [id, skipToLocation, extractPageText, setIsEPUB]);
 
-  // Load the initial location
+  const initialExtract = useCallback(() => {
+    if (!bookRef.current || !rendition.current?.location || isEPUBSetOnce.current) return;
+    extractPageText(bookRef.current, rendition.current, false);
+  }, [extractPageText]);
+
+  const checkResize = useCallback(() => {
+    if (isResizing && dimensions && bookRef.current?.isOpen && rendition.current && isEPUBSetOnce.current) {
+      pause();
+      // Only extract text when we have dimensions, ensuring the resize is complete
+      extractPageText(bookRef.current, rendition.current, true);
+      setIsResizing(false);
+      
+      return true;
+    } else {
+      return false;
+    }
+  }, [isResizing, setIsResizing, dimensions, pause, extractPageText]);
+
+  // Check for isResizing to pause TTS and re-extract text
   useEffect(() => {
-    if (!bookRef.current || !rendition.current || isEPUBSetOnce.current) return;
+    if (checkResize()) return;
 
-    extractPageText(bookRef.current, rendition.current);
-  }, [extractPageText]);
+    // Load initial location when not resizing
+    initialExtract();
+  }, [checkResize, initialExtract]);
+
+  // Load the initial location
+  // useEffect(() => {
+  //   if (!bookRef.current || !rendition.current || isEPUBSetOnce.current) return;
+
+  //   extractPageText(bookRef.current, rendition.current, false);
+  // }, [extractPageText]);
 
   // Register the location change handler
   useEffect(() => {

src/contexts/EPUBContext.tsx

@@ -21,7 +21,7 @@ interface EPUBContextType {
   currDocText: string | undefined;
   setCurrentDocument: (id: string) => Promise<void>;
   clearCurrDoc: () => void;
-  extractPageText: (book: Book, rendition: Rendition) => Promise<string>;
+  extractPageText: (book: Book, rendition: Rendition, shouldPause?: boolean) => Promise<string>;
 }
 
 const EPUBContext = createContext<EPUBContextType | undefined>(undefined);
@@ -83,9 +83,10 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
    * Extracts text content from the current EPUB page/location
    * @param {Book} book - The EPUB.js Book instance
    * @param {Rendition} rendition - The EPUB.js Rendition instance
+   * @param {boolean} shouldPause - Whether to pause TTS
    * @returns {Promise<string>} The extracted text content
    */
-  const extractPageText = useCallback(async (book: Book, rendition: Rendition): Promise<string> => {
+  const extractPageText = useCallback(async (book: Book, rendition: Rendition, shouldPause = false): Promise<string> => {
     try {      
       const { start, end } = rendition?.location;
       if (!start?.cfi || !end?.cfi || !book || !book.isOpen || !rendition) return '';
@@ -95,7 +96,7 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
       const range = await book.getRange(rangeCfi);
       const textContent = range.toString().trim();
 
-      setTTSText(textContent);
+      setTTSText(textContent, shouldPause);
       setCurrDocText(textContent);
 
       return textContent;

src/contexts/PDFContext.tsx

@@ -105,13 +105,16 @@ export function PDFProvider({ children }: { children: ReactNode }) {
     try {
       if (!pdfDocument) return;
       const text = await extractTextFromPDF(pdfDocument, currDocPage);
-      setCurrDocText(text);
-      setTTSText(text);
-
+      // Only update TTS text if the content has actually changed
+      // This prevents unnecessary resets of the sentence index
+      if (text !== currDocText || text === '') {
+        setCurrDocText(text);
+        setTTSText(text);
+      }
     } catch (error) {
       console.error('Error loading PDF text:', error);
     }
-  }, [pdfDocument, currDocPage, setTTSText]);
+  }, [pdfDocument, currDocPage, setTTSText, currDocText]);
 
   /**
    * Effect hook to update document text when the page changes