Anthony/readlater
1
0
Fork 0
mirror of https://github.com/Tony0410/readlater.git synced 2026-05-24 13:52:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add TTS proxy to fix CORS issues

Browse Source 
- /api/tts proxies requests to Edge TTS and Kokoro
- Uses Docker container names for internal networking
- Removes URL config from settings (handled server-side)
- Fixes localStorage merge for new settings fields

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Gemini Agent
2026-01-18 02:05:38 +00:00
parent f5de4749db
commit 611d57770e
3 changed files with 98 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/app/api/tts/route.ts Normal file
View File

@@ -0,0 +1,74 @@
import { NextRequest, NextResponse } from "next/server";
// POST /api/tts - Proxy TTS requests to avoid CORS issues
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const { engine, url, text, voice, speed } = body;
if (!text) {
return NextResponse.json({ error: "Text is required" }, { status: 400 });
}
let ttsUrl: string;
let ttsBody: Record<string, unknown>;
if (engine === "edge") {
// Use Docker container name for internal networking, fallback to provided URL
const edgeHost = process.env.EDGE_TTS_URL || url || "http://edge-tts:5050";
ttsUrl = `${edgeHost}/v1/audio/speech`;
ttsBody = {
model: "tts-1",
input: text,
voice: voice || "en-US-AvaNeural",
response_format: "mp3",
speed: speed || 1.0,
};
} else if (engine === "kokoro") {
// Use Docker container name for internal networking, fallback to provided URL
const kokoroHost = process.env.KOKORO_TTS_URL || url || "http://kokoro-tts:8880";
ttsUrl = `${kokoroHost}/v1/audio/speech`;
ttsBody = {
model: "kokoro",
input: text,
voice: voice || "af_bella",
response_format: "mp3",
speed: speed || 1.0,
};
} else {
return NextResponse.json({ error: "Invalid engine" }, { status: 400 });
}
const response = await fetch(ttsUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(ttsBody),
});
if (!response.ok) {
const errorText = await response.text();
console.error("TTS error:", response.status, errorText);
return NextResponse.json(
{ error: `TTS service error: ${response.status}` },
{ status: 502 }
);
}
const audioBuffer = await response.arrayBuffer();
return new NextResponse(audioBuffer, {
headers: {
"Content-Type": "audio/mpeg",
"Content-Length": audioBuffer.byteLength.toString(),
},
});
} catch (error) {
console.error("TTS proxy error:", error);
return NextResponse.json(
{ error: error instanceof Error ? error.message : "TTS proxy failed" },
{ status: 500 }
);
}
}

44
src/components/SettingsPanel.tsx
View File

@@ -269,50 +269,22 @@ export function SettingsPanel({
</section>
)}
{/* Edge TTS URL */}
{/* Edge TTS info */}
{ttsSettings.engine === "edge" && (
<section className="mb-8">
<h3 className="text-sm font-medium text-[var(--muted)] uppercase tracking-wide mb-4">
Edge TTS URL
</h3>
<input
type="text"
value={ttsSettings.edgeUrl}
onChange={(e) =>
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)]"
/>
<p className="text-xs text-[var(--muted)] mt-2">
Uses Microsoft neural voices. Fast and natural sounding.
<p className="text-sm text-[var(--muted)]">
Uses Microsoft neural voices via Edge TTS. Fast and natural sounding.
Requires the edge-tts Docker container running on the server.
</p>
</section>
)}
{/* Kokoro URL */}
{/* Kokoro info */}
{ttsSettings.engine === "kokoro" && (
<section className="mb-8">
<h3 className="text-sm font-medium text-[var(--muted)] uppercase tracking-wide mb-4">
Kokoro API URL
</h3>
<input
type="text"
value={ttsSettings.kokoroUrl}
onChange={(e) =>
onTTSSettingsChange({
...ttsSettings,
kokoroUrl: e.target.value,
})
}
placeholder="http://localhost:8880"
className="w-full p-3 rounded-lg border border-[var(--border)] bg-[var(--background)] text-[var(--foreground)]"
/>
<p className="text-xs text-[var(--muted)] mt-2">
High quality but slower. Generates full audio before playing.
<p className="text-sm text-[var(--muted)]">
High quality local TTS. Slower as it generates full audio before playing.
Requires the kokoro Docker container running on the server.
</p>
</section>
)}

28
src/hooks/useTTS.ts
View File

@@ -118,22 +118,24 @@ export function useTTS({ settings, text }: UseTTSOptions): UseTTSReturn {
setIsLoading(true);
try {
const response = await fetch(`${settings.edgeUrl}/v1/audio/speech`, {
// Use proxy to avoid CORS issues
const response = await fetch("/api/tts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "tts-1",
input: textRef.current,
engine: "edge",
url: settings.edgeUrl,
text: 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 error = await response.json().catch(() => ({}));
throw new Error(error.error || `TTS error: ${response.status}`);
}
const blob = await response.blob();
@@ -179,7 +181,7 @@ export function useTTS({ settings, text }: UseTTSOptions): UseTTSReturn {
} 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);
alert(error instanceof Error ? error.message : "Edge TTS failed");
}
}, [settings.edgeUrl, settings.speed, settings.voice]);
@@ -187,22 +189,24 @@ export function useTTS({ settings, text }: UseTTSOptions): UseTTSReturn {
setIsLoading(true);
try {
const response = await fetch(`${settings.kokoroUrl}/v1/audio/speech`, {
// Use proxy to avoid CORS issues
const response = await fetch("/api/tts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "kokoro",
input: textRef.current,
engine: "kokoro",
url: settings.kokoroUrl,
text: textRef.current,
voice: "af_bella",
response_format: "mp3",
speed: settings.speed,
}),
});
if (!response.ok) {
throw new Error(`Kokoro API error: ${response.status}`);
const error = await response.json().catch(() => ({}));
throw new Error(error.error || `TTS error: ${response.status}`);
}
const blob = await response.blob();
@@ -249,7 +253,7 @@ export function useTTS({ settings, text }: UseTTSOptions): UseTTSReturn {
} catch (error) {
console.error("Kokoro TTS error:", error);
setIsLoading(false);
alert("Failed to connect to Kokoro. Make sure it's running at " + settings.kokoroUrl);
alert(error instanceof Error ? error.message : "Kokoro TTS failed");
}
}, [settings.kokoroUrl, settings.speed]);