diff --git a/docker-compose.yml b/docker-compose.yml index 66d176f..9918e2b 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -10,7 +10,15 @@ services: environment: - DATABASE_PATH=/app/data/readlater.db - # Kokoro TTS for high-quality text-to-speech + # Edge TTS - Fast streaming TTS using Microsoft's neural voices (recommended) + edge-tts: + image: travisvn/openai-edge-tts:latest + container_name: edge-tts + restart: unless-stopped + ports: + - "5050:5050" + + # Kokoro TTS - High-quality but slower (generates full audio before playing) kokoro: image: ghcr.io/remsky/kokoro-fastapi-cpu:v0.2.1 container_name: kokoro-tts diff --git a/src/components/ArticleList.tsx b/src/components/ArticleList.tsx index e761f63..c3892d1 100644 --- a/src/components/ArticleList.tsx +++ b/src/components/ArticleList.tsx @@ -23,9 +23,28 @@ export function ArticleList({ }: ArticleListProps) { if (articles.length === 0) { return ( -
-

No articles yet

-

Add a URL to get started

+
+
+ + + + + + + + + + +
+

+ No articles yet +

+

+ Save articles to read later by pasting a URL above or using the bookmarklet. +

+
+ 💡 Tip: Use the Apple Shortcut to save from your phone +
); } diff --git a/src/components/Reader.tsx b/src/components/Reader.tsx index 82118da..8172287 100644 --- a/src/components/Reader.tsx +++ b/src/components/Reader.tsx @@ -1,5 +1,6 @@ "use client"; +import { useState, useEffect } from "react"; import { Article, ReaderSettings } from "@/lib/types"; import { ArrowLeft, Star, Archive, Trash2, Settings, ExternalLink } from "lucide-react"; @@ -24,6 +25,21 @@ export function Reader({ onOpenSettings, children, }: ReaderProps) { + const [scrollProgress, setScrollProgress] = useState(0); + + useEffect(() => { + const handleScroll = () => { + const scrollTop = window.scrollY; + const docHeight = document.documentElement.scrollHeight - window.innerHeight; + const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; + setScrollProgress(Math.min(100, Math.max(0, progress))); + }; + + window.addEventListener("scroll", handleScroll, { passive: true }); + handleScroll(); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + const fontClass = { system: "font-system", serif: "font-serif", @@ -33,8 +49,16 @@ export function Reader({ return (
+ {/* Reading progress bar */} +
+
+
+ {/* Header */} -
+
))}
@@ -267,6 +269,30 @@ export function SettingsPanel({ )} + {/* Edge TTS URL */} + {ttsSettings.engine === "edge" && ( +
+

+ Edge TTS URL +

+ + onTTSSettingsChange({ + ...ttsSettings, + edgeUrl: e.target.value, + }) + } + placeholder="http://localhost:5050" + className="w-full p-3 rounded-lg border border-[var(--border)] bg-[var(--background)] text-[var(--foreground)]" + /> +

+ Uses Microsoft neural voices. Fast and natural sounding. +

+
+ )} + {/* Kokoro URL */} {ttsSettings.engine === "kokoro" && (
@@ -286,7 +312,7 @@ export function SettingsPanel({ className="w-full p-3 rounded-lg border border-[var(--border)] bg-[var(--background)] text-[var(--foreground)]" />

- URL of your Kokoro-FastAPI server + High quality but slower. Generates full audio before playing.

)} diff --git a/src/hooks/useTTS.ts b/src/hooks/useTTS.ts index 0fa6e22..b884d75 100644 --- a/src/hooks/useTTS.ts +++ b/src/hooks/useTTS.ts @@ -114,6 +114,75 @@ export function useTTS({ settings, text }: UseTTSOptions): UseTTSReturn { speechSynthesis.speak(utterance); }, [settings.speed, settings.voice, voices]); + const playEdge = useCallback(async () => { + setIsLoading(true); + + try { + const response = await fetch(`${settings.edgeUrl}/v1/audio/speech`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + model: "tts-1", + input: textRef.current, + voice: settings.voice || "en-US-AvaNeural", + response_format: "mp3", + speed: settings.speed, + }), + }); + + if (!response.ok) { + throw new Error(`Edge TTS API error: ${response.status}`); + } + + const blob = await response.blob(); + const url = URL.createObjectURL(blob); + + if (audioRef.current) { + audioRef.current.pause(); + } + + const audio = new Audio(url); + + audio.onloadedmetadata = () => { + setDuration(audio.duration); + }; + + audio.ontimeupdate = () => { + setCurrentTime(audio.currentTime); + }; + + audio.onplay = () => { + setIsPlaying(true); + setIsPaused(false); + setIsLoading(false); + }; + + audio.onended = () => { + setIsPlaying(false); + setIsPaused(false); + setCurrentPosition(0); + setCurrentTime(0); + URL.revokeObjectURL(url); + }; + + audio.onerror = () => { + console.error("Audio playback error"); + setIsPlaying(false); + setIsLoading(false); + URL.revokeObjectURL(url); + }; + + audioRef.current = audio; + await audio.play(); + } catch (error) { + console.error("Edge TTS error:", error); + setIsLoading(false); + alert("Failed to connect to Edge TTS. Make sure it's running at " + settings.edgeUrl); + } + }, [settings.edgeUrl, settings.speed, settings.voice]); + const playKokoro = useCallback(async () => { setIsLoading(true); @@ -187,10 +256,12 @@ export function useTTS({ settings, text }: UseTTSOptions): UseTTSReturn { const play = useCallback(() => { if (settings.engine === "browser") { playBrowser(); + } else if (settings.engine === "edge") { + playEdge(); } else { playKokoro(); } - }, [settings.engine, playBrowser, playKokoro]); + }, [settings.engine, playBrowser, playEdge, playKokoro]); const pause = useCallback(() => { if (settings.engine === "browser") { diff --git a/src/lib/types.ts b/src/lib/types.ts index f1d179e..b0b982a 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -54,9 +54,10 @@ export interface ReaderSettings { } export interface TTSSettings { - engine: "browser" | "kokoro"; + engine: "browser" | "edge" | "kokoro"; speed: number; // 0.5-3.0 voice: string; + edgeUrl: string; kokoroUrl: string; } @@ -89,8 +90,9 @@ export const defaultReaderSettings: ReaderSettings = { }; export const defaultTTSSettings: TTSSettings = { - engine: "browser", + engine: "edge", speed: 1.0, voice: "", + edgeUrl: "http://localhost:5050", kokoroUrl: "http://localhost:8880", };