mirror of
https://github.com/Tony0410/News-reader-pro.git
synced 2026-05-24 13:21:40 +08:00
feat: Initialize project with basic structure and dependencies
Sets up the foundational elements for the NewsCaster AI application. This includes: - Initializing the project with Vite and React. - Defining core types for articles and player state. - Configuring build tools and TypeScript. - Adding essential dependencies like React, Vite, and Google's Gemini API client. - Providing initial README instructions for running locally. - Setting up basic styling and structure in index.html. - Defining available voices and playback constants. - Implementing utility functions for audio handling.
This commit is contained in:
Anthony
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
378
App.tsx
Normal file
378
App.tsx
Normal file
@@ -0,0 +1,378 @@
|
|||||||
|
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
||||||
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
|
import { Plus, Play, Pause, SkipForward, SkipBack, Volume2, Gauge, Layout } from 'lucide-react';
|
||||||
|
import { Article, PlaybackStatus, PlayerState, VoiceName } from './types';
|
||||||
|
import { AVAILABLE_VOICES, MIN_SPEED, MAX_SPEED, SPEED_STEP } from './constants';
|
||||||
|
import { extractArticleContent, generateSpeechFromText } from './services/geminiService';
|
||||||
|
import { base64ToUint8Array, createWavBlob } from './services/audioUtils';
|
||||||
|
import { QueueItem } from './components/QueueItem';
|
||||||
|
import { VoiceSelector } from './components/VoiceSelector';
|
||||||
|
import { ReaderView } from './components/ReaderView';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
// -- State --
|
||||||
|
const [inputUrl, setInputUrl] = useState('');
|
||||||
|
const [queue, setQueue] = useState<Article[]>([]);
|
||||||
|
// Selected article for reading (defaults to playing article)
|
||||||
|
const [viewId, setViewId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const [playerState, setPlayerState] = useState<PlayerState>({
|
||||||
|
isPlaying: false,
|
||||||
|
playbackRate: 1.0,
|
||||||
|
currentArticleId: null,
|
||||||
|
selectedVoice: VoiceName.Puck,
|
||||||
|
});
|
||||||
|
|
||||||
|
// -- Refs --
|
||||||
|
const audioRef = useRef<HTMLAudioElement>(new Audio());
|
||||||
|
const audioSrcRef = useRef<string | null>(null);
|
||||||
|
|
||||||
|
// -- Helpers --
|
||||||
|
const getCurrentArticle = () => queue.find(a => a.id === playerState.currentArticleId);
|
||||||
|
const getViewingArticle = () => {
|
||||||
|
// If user manually selected an article to view, show that.
|
||||||
|
// Otherwise show the currently playing one.
|
||||||
|
// Otherwise show the first one.
|
||||||
|
if (viewId) return queue.find(a => a.id === viewId);
|
||||||
|
if (playerState.currentArticleId) return queue.find(a => a.id === playerState.currentArticleId);
|
||||||
|
if (queue.length > 0) return queue[0];
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateArticleStatus = (id: string, status: PlaybackStatus, errorMessage?: string, audioUrl?: string, title?: string, text?: string) => {
|
||||||
|
setQueue(prev => prev.map(item => {
|
||||||
|
if (item.id !== id) return item;
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
status,
|
||||||
|
errorMessage,
|
||||||
|
audioUrl: audioUrl || item.audioUrl,
|
||||||
|
title: title || item.title,
|
||||||
|
text: text || item.text
|
||||||
|
};
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
// -- Handlers --
|
||||||
|
|
||||||
|
// 1. Add URL to Queue
|
||||||
|
const handleAddUrl = async () => {
|
||||||
|
if (!inputUrl.trim()) return;
|
||||||
|
const id = uuidv4();
|
||||||
|
const newArticle: Article = {
|
||||||
|
id,
|
||||||
|
url: inputUrl,
|
||||||
|
title: 'Fetching info...',
|
||||||
|
text: '',
|
||||||
|
status: PlaybackStatus.LOADING_TEXT
|
||||||
|
};
|
||||||
|
|
||||||
|
setQueue(prev => [...prev, newArticle]);
|
||||||
|
setInputUrl('');
|
||||||
|
// Auto view the new article while loading
|
||||||
|
if (!playerState.isPlaying) {
|
||||||
|
setViewId(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start fetching text immediately
|
||||||
|
try {
|
||||||
|
const { title, text } = await extractArticleContent(newArticle.url);
|
||||||
|
updateArticleStatus(id, PlaybackStatus.IDLE, undefined, undefined, title, text);
|
||||||
|
} catch (error: any) {
|
||||||
|
updateArticleStatus(id, PlaybackStatus.ERROR, error.message || "Failed to load article");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 2. Generate Audio for an article
|
||||||
|
const prepareAudio = async (articleId: string): Promise<string | null> => {
|
||||||
|
const article = queue.find(a => a.id === articleId);
|
||||||
|
if (!article) return null;
|
||||||
|
|
||||||
|
// If already has audio return it
|
||||||
|
if (article.audioUrl) return article.audioUrl;
|
||||||
|
|
||||||
|
updateArticleStatus(articleId, PlaybackStatus.LOADING_AUDIO);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (!article.text || article.text.length < 10) {
|
||||||
|
throw new Error("No text available to read.");
|
||||||
|
}
|
||||||
|
const base64Audio = await generateSpeechFromText(article.text, playerState.selectedVoice);
|
||||||
|
const pcmData = base64ToUint8Array(base64Audio);
|
||||||
|
const wavBlob = createWavBlob(pcmData);
|
||||||
|
const audioUrl = URL.createObjectURL(wavBlob);
|
||||||
|
|
||||||
|
updateArticleStatus(articleId, PlaybackStatus.READY, undefined, audioUrl);
|
||||||
|
return audioUrl;
|
||||||
|
} catch (error: any) {
|
||||||
|
updateArticleStatus(articleId, PlaybackStatus.ERROR, error.message || "Failed to generate speech");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 3. Play Logic
|
||||||
|
const playArticle = useCallback(async (id: string) => {
|
||||||
|
const article = queue.find(a => a.id === id);
|
||||||
|
if (!article) return;
|
||||||
|
|
||||||
|
// If currently playing a different one, pause it.
|
||||||
|
if (playerState.currentArticleId && playerState.currentArticleId !== id) {
|
||||||
|
audioRef.current.pause();
|
||||||
|
}
|
||||||
|
|
||||||
|
setPlayerState(prev => ({ ...prev, currentArticleId: id, isPlaying: true }));
|
||||||
|
// Also switch view to the playing article
|
||||||
|
setViewId(id);
|
||||||
|
|
||||||
|
let src = article.audioUrl;
|
||||||
|
|
||||||
|
// Check if we need to generate audio
|
||||||
|
if (!src) {
|
||||||
|
src = await prepareAudio(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (src) {
|
||||||
|
// Only update src if it's different to avoid reload
|
||||||
|
if (audioSrcRef.current !== src) {
|
||||||
|
audioRef.current.src = src;
|
||||||
|
audioSrcRef.current = src;
|
||||||
|
// Apply current speed
|
||||||
|
audioRef.current.playbackRate = playerState.playbackRate;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await audioRef.current.play();
|
||||||
|
updateArticleStatus(id, PlaybackStatus.PLAYING);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Play error", e);
|
||||||
|
setPlayerState(prev => ({ ...prev, isPlaying: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [queue, playerState.currentArticleId, playerState.playbackRate, playerState.selectedVoice]);
|
||||||
|
|
||||||
|
const pausePlayback = useCallback(() => {
|
||||||
|
audioRef.current.pause();
|
||||||
|
setPlayerState(prev => ({ ...prev, isPlaying: false }));
|
||||||
|
if (playerState.currentArticleId) {
|
||||||
|
updateArticleStatus(playerState.currentArticleId, PlaybackStatus.PAUSED);
|
||||||
|
}
|
||||||
|
}, [playerState.currentArticleId]);
|
||||||
|
|
||||||
|
const handleSpeedChange = (newSpeed: number) => {
|
||||||
|
// Clamp
|
||||||
|
const speed = Math.max(MIN_SPEED, Math.min(MAX_SPEED, newSpeed));
|
||||||
|
setPlayerState(prev => ({ ...prev, playbackRate: speed }));
|
||||||
|
if (audioRef.current) {
|
||||||
|
audioRef.current.playbackRate = speed;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auto-Advance Logic
|
||||||
|
useEffect(() => {
|
||||||
|
const audio = audioRef.current;
|
||||||
|
|
||||||
|
const handleEnded = () => {
|
||||||
|
const currentId = playerState.currentArticleId;
|
||||||
|
if (currentId) {
|
||||||
|
updateArticleStatus(currentId, PlaybackStatus.COMPLETED);
|
||||||
|
|
||||||
|
// Find next
|
||||||
|
const currentIndex = queue.findIndex(a => a.id === currentId);
|
||||||
|
if (currentIndex !== -1 && currentIndex < queue.length - 1) {
|
||||||
|
const nextId = queue[currentIndex + 1].id;
|
||||||
|
playArticle(nextId);
|
||||||
|
} else {
|
||||||
|
setPlayerState(prev => ({ ...prev, isPlaying: false }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
audio.addEventListener('ended', handleEnded);
|
||||||
|
return () => {
|
||||||
|
audio.removeEventListener('ended', handleEnded);
|
||||||
|
};
|
||||||
|
}, [playerState.currentArticleId, queue, playArticle]);
|
||||||
|
|
||||||
|
|
||||||
|
// -- Render --
|
||||||
|
|
||||||
|
const currentArticle = getCurrentArticle();
|
||||||
|
const viewingArticle = getViewingArticle();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col bg-slate-50 pb-32">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="bg-white border-b border-slate-200 px-6 py-4 sticky top-0 z-20 shadow-sm">
|
||||||
|
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="bg-blue-600 text-white p-2 rounded-lg">
|
||||||
|
<Volume2 className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-xl font-bold text-slate-900 tracking-tight hidden sm:block">NewsCaster AI</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<VoiceSelector
|
||||||
|
selectedVoice={playerState.selectedVoice}
|
||||||
|
onVoiceChange={(v) => setPlayerState(prev => ({ ...prev, selectedVoice: v }))}
|
||||||
|
disabled={playerState.isPlaying}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Main Content - Split Layout */}
|
||||||
|
<main className="flex-grow px-4 py-6 max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||||
|
|
||||||
|
{/* Left Column: Controls & Queue (5 cols) */}
|
||||||
|
<div className="lg:col-span-5 space-y-6">
|
||||||
|
{/* Input Section */}
|
||||||
|
<div className="bg-white p-1 rounded-2xl shadow-sm border border-slate-200 flex gap-2 items-center pl-4">
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
placeholder="Paste article URL here..."
|
||||||
|
className="flex-grow py-3 outline-none text-slate-700 bg-transparent placeholder:text-slate-400 min-w-0"
|
||||||
|
value={inputUrl}
|
||||||
|
onChange={(e) => setInputUrl(e.target.value)}
|
||||||
|
onKeyDown={(e) => e.key === 'Enter' && handleAddUrl()}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={handleAddUrl}
|
||||||
|
disabled={!inputUrl.trim()}
|
||||||
|
className="bg-slate-900 hover:bg-slate-800 disabled:bg-slate-300 text-white px-4 sm:px-6 py-3 rounded-xl font-medium transition-all flex items-center gap-2 flex-shrink-0"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
<span className="hidden sm:inline">Queue</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Queue List */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between px-1">
|
||||||
|
<h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider">Up Next</h2>
|
||||||
|
<span className="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded-full">{queue.length} articles</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{queue.length === 0 ? (
|
||||||
|
<div className="text-center py-12 border-2 border-dashed border-slate-200 rounded-2xl text-slate-400 bg-white">
|
||||||
|
<p>No articles queued.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
queue.map(article => (
|
||||||
|
<div key={article.id} onClick={() => setViewId(article.id)} className="cursor-pointer">
|
||||||
|
<QueueItem
|
||||||
|
article={article}
|
||||||
|
isActive={article.id === playerState.currentArticleId}
|
||||||
|
isPlaying={playerState.isPlaying}
|
||||||
|
onPlay={() => playArticle(article.id)}
|
||||||
|
onPause={pausePlayback}
|
||||||
|
onRemove={() => {
|
||||||
|
if (playerState.currentArticleId === article.id) {
|
||||||
|
pausePlayback();
|
||||||
|
setPlayerState(prev => ({ ...prev, currentArticleId: null }));
|
||||||
|
}
|
||||||
|
setQueue(prev => prev.filter(a => a.id !== article.id));
|
||||||
|
if (viewId === article.id) setViewId(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column: Reader View (7 cols) */}
|
||||||
|
<div className="lg:col-span-7 h-full hidden lg:block">
|
||||||
|
<ReaderView article={viewingArticle} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile: Reader View appears below if selected */}
|
||||||
|
<div className="lg:hidden block">
|
||||||
|
{viewingArticle && (
|
||||||
|
<div className="mt-8">
|
||||||
|
<h3 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-2">Article Reader</h3>
|
||||||
|
<div className="h-[500px]">
|
||||||
|
<ReaderView article={viewingArticle} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Sticky Player */}
|
||||||
|
<div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-lg border-t border-slate-200 p-4 pb-6 shadow-[0_-4px_20px_rgba(0,0,0,0.05)] z-30">
|
||||||
|
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center gap-4 sm:gap-8">
|
||||||
|
|
||||||
|
{/* Current Track Info */}
|
||||||
|
<div className="flex-grow w-full sm:w-auto min-w-0 text-center sm:text-left">
|
||||||
|
{currentArticle ? (
|
||||||
|
<div>
|
||||||
|
<h4 className="font-bold text-slate-900 truncate">{currentArticle.title}</h4>
|
||||||
|
<p className="text-xs text-slate-500 truncate">Playing from queue</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-slate-400 text-sm font-medium">Ready to play</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Controls */}
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
|
||||||
|
{/* Speed Control */}
|
||||||
|
<div className="hidden sm:flex items-center gap-2 group relative">
|
||||||
|
<Gauge className="w-4 h-4 text-slate-400" />
|
||||||
|
<div className="flex items-center gap-2 bg-slate-100 rounded-lg p-1">
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 flex items-center justify-center hover:bg-white rounded text-xs font-bold text-slate-600 transition-colors"
|
||||||
|
onClick={() => handleSpeedChange(playerState.playbackRate - SPEED_STEP)}
|
||||||
|
>-</button>
|
||||||
|
<span className="text-xs font-mono w-8 text-center font-bold text-blue-600">{playerState.playbackRate.toFixed(1)}x</span>
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 flex items-center justify-center hover:bg-white rounded text-xs font-bold text-slate-600 transition-colors"
|
||||||
|
onClick={() => handleSpeedChange(playerState.playbackRate + SPEED_STEP)}
|
||||||
|
>+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Transport */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<button
|
||||||
|
className="p-2 text-slate-400 hover:text-slate-600 transition-colors"
|
||||||
|
onClick={() => {
|
||||||
|
const idx = queue.findIndex(a => a.id === playerState.currentArticleId);
|
||||||
|
if (idx > 0) playArticle(queue[idx - 1].id);
|
||||||
|
}}
|
||||||
|
disabled={!playerState.currentArticleId || queue.findIndex(a => a.id === playerState.currentArticleId) <= 0}
|
||||||
|
>
|
||||||
|
<SkipBack className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="w-12 h-12 rounded-full bg-slate-900 hover:bg-slate-800 text-white flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-105 transition-all active:scale-95"
|
||||||
|
onClick={() => {
|
||||||
|
if (playerState.isPlaying) pausePlayback();
|
||||||
|
else if (playerState.currentArticleId) playArticle(playerState.currentArticleId);
|
||||||
|
else if (queue.length > 0) playArticle(queue[0].id);
|
||||||
|
}}
|
||||||
|
disabled={queue.length === 0}
|
||||||
|
>
|
||||||
|
{playerState.isPlaying ? <Pause className="w-5 h-5 fill-current" /> : <Play className="w-5 h-5 fill-current ml-1" />}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="p-2 text-slate-400 hover:text-slate-600 transition-colors"
|
||||||
|
onClick={() => {
|
||||||
|
const idx = queue.findIndex(a => a.id === playerState.currentArticleId);
|
||||||
|
if (idx !== -1 && idx < queue.length - 1) playArticle(queue[idx + 1].id);
|
||||||
|
}}
|
||||||
|
disabled={!playerState.currentArticleId || queue.findIndex(a => a.id === playerState.currentArticleId) >= queue.length - 1}
|
||||||
|
>
|
||||||
|
<SkipForward className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
25
README.md
25
README.md
@@ -1,11 +1,20 @@
|
|||||||
<div align="center">
|
<div align="center">
|
||||||
|
|
||||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||||
|
|
||||||
<h1>Built with AI Studio</h2>
|
|
||||||
|
|
||||||
<p>The fastest path from prompt to production with Gemini.</p>
|
|
||||||
|
|
||||||
<a href="https://aistudio.google.com/apps">Start building</a>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
# Run and deploy your AI Studio app
|
||||||
|
|
||||||
|
This contains everything you need to run your app locally.
|
||||||
|
|
||||||
|
View your app in AI Studio: https://ai.studio/apps/drive/1a8wkyYOUvPDWvUXbrtN2dznWVZ-VdSDJ
|
||||||
|
|
||||||
|
## Run Locally
|
||||||
|
|
||||||
|
**Prerequisites:** Node.js
|
||||||
|
|
||||||
|
|
||||||
|
1. Install dependencies:
|
||||||
|
`npm install`
|
||||||
|
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||||
|
3. Run the app:
|
||||||
|
`npm run dev`
|
||||||
|
|||||||
86
components/QueueItem.tsx
Normal file
86
components/QueueItem.tsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Article, PlaybackStatus } from '../types';
|
||||||
|
import { Play, Pause, Loader2, AlertCircle, FileText, Headphones } from 'lucide-react';
|
||||||
|
|
||||||
|
interface QueueItemProps {
|
||||||
|
article: Article;
|
||||||
|
isActive: boolean;
|
||||||
|
isPlaying: boolean;
|
||||||
|
onPlay: () => void;
|
||||||
|
onPause: () => void;
|
||||||
|
onRemove: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const QueueItem: React.FC<QueueItemProps> = ({
|
||||||
|
article,
|
||||||
|
isActive,
|
||||||
|
isPlaying,
|
||||||
|
onPlay,
|
||||||
|
onPause,
|
||||||
|
onRemove
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
const getStatusIcon = () => {
|
||||||
|
switch (article.status) {
|
||||||
|
case PlaybackStatus.LOADING_TEXT:
|
||||||
|
return <Loader2 className="w-5 h-5 animate-spin text-blue-500" />;
|
||||||
|
case PlaybackStatus.LOADING_AUDIO:
|
||||||
|
return <Loader2 className="w-5 h-5 animate-spin text-purple-500" />;
|
||||||
|
case PlaybackStatus.ERROR:
|
||||||
|
return <AlertCircle className="w-5 h-5 text-red-500" />;
|
||||||
|
case PlaybackStatus.PLAYING:
|
||||||
|
return <div className="w-4 h-4 flex items-end space-x-0.5 h-4 overflow-hidden">
|
||||||
|
<div className="w-1 bg-blue-500 animate-[bounce_1s_infinite] h-2"></div>
|
||||||
|
<div className="w-1 bg-blue-500 animate-[bounce_1.2s_infinite] h-4"></div>
|
||||||
|
<div className="w-1 bg-blue-500 animate-[bounce_0.8s_infinite] h-3"></div>
|
||||||
|
</div>;
|
||||||
|
default:
|
||||||
|
return <FileText className="w-5 h-5 text-slate-400" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const isReady = article.status === PlaybackStatus.READY || article.status === PlaybackStatus.PAUSED || article.status === PlaybackStatus.PLAYING || article.status === PlaybackStatus.COMPLETED;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`
|
||||||
|
relative group flex items-center p-4 rounded-xl border transition-all duration-200
|
||||||
|
${isActive
|
||||||
|
? 'bg-blue-50 border-blue-200 shadow-sm'
|
||||||
|
: 'bg-white border-slate-100 hover:border-slate-300'
|
||||||
|
}
|
||||||
|
`}>
|
||||||
|
<div className="flex-shrink-0 mr-4 w-8 flex justify-center">
|
||||||
|
{getStatusIcon()}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-grow min-w-0">
|
||||||
|
<h3 className={`font-medium truncate ${isActive ? 'text-blue-900' : 'text-slate-900'}`}>
|
||||||
|
{article.title || article.url}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-slate-500 truncate mt-0.5">
|
||||||
|
{article.url}
|
||||||
|
</p>
|
||||||
|
{article.errorMessage && (
|
||||||
|
<p className="text-xs text-red-500 mt-1">{article.errorMessage}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-shrink-0 ml-4 flex items-center space-x-2 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
|
||||||
|
{isReady && (
|
||||||
|
<button
|
||||||
|
onClick={isActive && isPlaying ? onPause : onPlay}
|
||||||
|
className="p-2 rounded-full bg-slate-100 hover:bg-blue-100 text-slate-700 hover:text-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
{isActive && isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={onRemove}
|
||||||
|
className="text-xs text-slate-400 hover:text-red-500 underline px-2"
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
59
components/ReaderView.tsx
Normal file
59
components/ReaderView.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Article } from '../types';
|
||||||
|
import { FileText } from 'lucide-react';
|
||||||
|
|
||||||
|
interface ReaderViewProps {
|
||||||
|
article?: Article | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
|
||||||
|
if (!article) {
|
||||||
|
return (
|
||||||
|
<div className="h-full flex flex-col items-center justify-center text-slate-400 p-12 border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50/50">
|
||||||
|
<FileText className="w-12 h-12 mb-4 opacity-50" />
|
||||||
|
<p className="text-lg font-medium">Select an article to read along</p>
|
||||||
|
<p className="text-sm">The text will appear here while you listen.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Split text by newlines to create paragraphs
|
||||||
|
const paragraphs = article.text
|
||||||
|
? article.text.split('\n').filter(p => p.trim().length > 0)
|
||||||
|
: [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col">
|
||||||
|
<div className="p-6 border-b border-slate-100 bg-white sticky top-0 z-10">
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 leading-tight">
|
||||||
|
{article.title}
|
||||||
|
</h2>
|
||||||
|
<a
|
||||||
|
href={article.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-sm text-blue-600 hover:underline mt-2 inline-block"
|
||||||
|
>
|
||||||
|
{new URL(article.url).hostname}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-grow overflow-y-auto p-6 sm:p-8 space-y-6 custom-scrollbar bg-white">
|
||||||
|
{paragraphs.length > 0 ? (
|
||||||
|
paragraphs.map((paragraph, idx) => (
|
||||||
|
<p key={idx} className="text-lg text-slate-700 leading-relaxed font-serif">
|
||||||
|
{paragraph}
|
||||||
|
</p>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4 animate-pulse">
|
||||||
|
<div className="h-4 bg-slate-100 rounded w-3/4"></div>
|
||||||
|
<div className="h-4 bg-slate-100 rounded w-full"></div>
|
||||||
|
<div className="h-4 bg-slate-100 rounded w-5/6"></div>
|
||||||
|
<p className="text-slate-400 italic mt-4">Extracting article content...</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
30
components/VoiceSelector.tsx
Normal file
30
components/VoiceSelector.tsx
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { VoiceName } from '../types';
|
||||||
|
import { AVAILABLE_VOICES } from '../constants';
|
||||||
|
import { Mic } from 'lucide-react';
|
||||||
|
|
||||||
|
interface VoiceSelectorProps {
|
||||||
|
selectedVoice: VoiceName;
|
||||||
|
onVoiceChange: (voice: VoiceName) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const VoiceSelector: React.FC<VoiceSelectorProps> = ({ selectedVoice, onVoiceChange, disabled }) => {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Mic className="w-4 h-4 text-slate-500" />
|
||||||
|
<select
|
||||||
|
value={selectedVoice}
|
||||||
|
onChange={(e) => onVoiceChange(e.target.value as VoiceName)}
|
||||||
|
disabled={disabled}
|
||||||
|
className="bg-white border border-slate-300 text-slate-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{AVAILABLE_VOICES.map((v) => (
|
||||||
|
<option key={v.name} value={v.name}>
|
||||||
|
{v.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
15
constants.ts
Normal file
15
constants.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { VoiceName } from './types';
|
||||||
|
|
||||||
|
export const AVAILABLE_VOICES = [
|
||||||
|
{ name: VoiceName.Puck, label: 'Puck (Male, Standard)' },
|
||||||
|
{ name: VoiceName.Charon, label: 'Charon (Male, Deep)' },
|
||||||
|
{ name: VoiceName.Kore, label: 'Kore (Female, Soothing)' },
|
||||||
|
{ name: VoiceName.Fenrir, label: 'Fenrir (Male, Energetic)' },
|
||||||
|
{ name: VoiceName.Zephyr, label: 'Zephyr (Female, Clear)' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const MIN_SPEED = 0.5;
|
||||||
|
export const MAX_SPEED = 3.5;
|
||||||
|
export const SPEED_STEP = 0.5;
|
||||||
|
|
||||||
|
export const SAMPLE_RATE = 24000;
|
||||||
40
index.html
Normal file
40
index.html
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>NewsCaster AI</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Inter', sans-serif; }
|
||||||
|
/* Custom scrollbar for queue list */
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0",
|
||||||
|
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
|
||||||
|
"react": "https://aistudiocdn.com/react@^19.2.0",
|
||||||
|
"react/": "https://aistudiocdn.com/react@^19.2.0/",
|
||||||
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
|
||||||
|
"uuid": "https://aistudiocdn.com/uuid@^13.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-slate-50 text-slate-900">
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/index.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
index.tsx
Normal file
15
index.tsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('root');
|
||||||
|
if (!rootElement) {
|
||||||
|
throw new Error("Could not find root element to mount to");
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(rootElement);
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
5
metadata.json
Normal file
5
metadata.json
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"name": "NewsCaster AI",
|
||||||
|
"description": "A realistic AI news reader that converts article URLs to speech with adjustable speed and pitch preservation.",
|
||||||
|
"requestFramePermissions": []
|
||||||
|
}
|
||||||
24
package.json
Normal file
24
package.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "newscaster-ai",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lucide-react": "^0.554.0",
|
||||||
|
"@google/genai": "^1.30.0",
|
||||||
|
"react": "^19.2.0",
|
||||||
|
"react-dom": "^19.2.0",
|
||||||
|
"uuid": "^13.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.14.0",
|
||||||
|
"@vitejs/plugin-react": "^5.0.0",
|
||||||
|
"typescript": "~5.8.2",
|
||||||
|
"vite": "^6.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
59
services/audioUtils.ts
Normal file
59
services/audioUtils.ts
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
/**
|
||||||
|
* Converts a Base64 string (Raw PCM) to a Uint8Array.
|
||||||
|
*/
|
||||||
|
export const base64ToUint8Array = (base64: string): Uint8Array => {
|
||||||
|
const binaryString = atob(base64);
|
||||||
|
const len = binaryString.length;
|
||||||
|
const bytes = new Uint8Array(len);
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
bytes[i] = binaryString.charCodeAt(i);
|
||||||
|
}
|
||||||
|
return bytes;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wraps raw PCM data in a WAV container so it can be played by standard HTML5 Audio elements.
|
||||||
|
* This allows us to use `playbackRate` with automatic pitch preservation.
|
||||||
|
*/
|
||||||
|
export const createWavBlob = (pcmData: Uint8Array, sampleRate: number = 24000): Blob => {
|
||||||
|
const numChannels = 1;
|
||||||
|
const bitsPerSample = 16;
|
||||||
|
const byteRate = (sampleRate * numChannels * bitsPerSample) / 8;
|
||||||
|
const blockAlign = (numChannels * bitsPerSample) / 8;
|
||||||
|
const dataSize = pcmData.length;
|
||||||
|
const chunkSize = 36 + dataSize;
|
||||||
|
|
||||||
|
const buffer = new ArrayBuffer(44 + dataSize);
|
||||||
|
const view = new DataView(buffer);
|
||||||
|
|
||||||
|
// RIFF chunk descriptor
|
||||||
|
writeString(view, 0, 'RIFF');
|
||||||
|
view.setUint32(4, chunkSize, true);
|
||||||
|
writeString(view, 8, 'WAVE');
|
||||||
|
|
||||||
|
// fmt sub-chunk
|
||||||
|
writeString(view, 12, 'fmt ');
|
||||||
|
view.setUint32(16, 16, true); // Subchunk1Size (16 for PCM)
|
||||||
|
view.setUint16(20, 1, true); // AudioFormat (1 for PCM)
|
||||||
|
view.setUint16(22, numChannels, true); // NumChannels
|
||||||
|
view.setUint32(24, sampleRate, true); // SampleRate
|
||||||
|
view.setUint32(28, byteRate, true); // ByteRate
|
||||||
|
view.setUint16(32, blockAlign, true); // BlockAlign
|
||||||
|
view.setUint16(34, bitsPerSample, true); // BitsPerSample
|
||||||
|
|
||||||
|
// data sub-chunk
|
||||||
|
writeString(view, 36, 'data');
|
||||||
|
view.setUint32(40, dataSize, true);
|
||||||
|
|
||||||
|
// Write PCM data
|
||||||
|
const dataView = new Uint8Array(buffer, 44);
|
||||||
|
dataView.set(pcmData);
|
||||||
|
|
||||||
|
return new Blob([buffer], { type: 'audio/wav' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const writeString = (view: DataView, offset: number, string: string) => {
|
||||||
|
for (let i = 0; i < string.length; i++) {
|
||||||
|
view.setUint8(offset + i, string.charCodeAt(i));
|
||||||
|
}
|
||||||
|
};
|
||||||
283
services/geminiService.ts
Normal file
283
services/geminiService.ts
Normal file
@@ -0,0 +1,283 @@
|
|||||||
|
import { GoogleGenAI, Modality } from '@google/genai';
|
||||||
|
import { VoiceName } from '../types';
|
||||||
|
|
||||||
|
const getAiClient = () => {
|
||||||
|
const apiKey = process.env.API_KEY;
|
||||||
|
if (!apiKey) {
|
||||||
|
throw new Error("API Key is missing");
|
||||||
|
}
|
||||||
|
return new GoogleGenAI({ apiKey });
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helper to ensure URL has protocol.
|
||||||
|
* Proxies often fail if 'http/https' is missing.
|
||||||
|
*/
|
||||||
|
const normalizeUrl = (url: string) => {
|
||||||
|
let cleanUrl = url.trim();
|
||||||
|
if (!cleanUrl.startsWith('http://') && !cleanUrl.startsWith('https://')) {
|
||||||
|
return `https://${cleanUrl}`;
|
||||||
|
}
|
||||||
|
return cleanUrl;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* List of CORS proxies to try in order.
|
||||||
|
* This improves reliability if one service is down or blocked.
|
||||||
|
*/
|
||||||
|
const PROXY_PROVIDERS = [
|
||||||
|
// AllOrigins: Generally the most reliable for raw text
|
||||||
|
(url: string) => `https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`,
|
||||||
|
|
||||||
|
// CodeTabs: Good fallback, handles redirects well
|
||||||
|
(url: string) => `https://api.codetabs.com/v1/proxy?quest=${encodeURIComponent(url)}`,
|
||||||
|
|
||||||
|
// CORSProxy.io: Fast but sometimes has strict CORS headers
|
||||||
|
(url: string) => `https://corsproxy.io/?${encodeURIComponent(url)}`,
|
||||||
|
|
||||||
|
// ThingProxy: Another fallback
|
||||||
|
(url: string) => `https://thingproxy.freeboard.io/fetch/${url}`
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cleans raw HTML by removing scripts, styles, and non-content elements.
|
||||||
|
* This acts like a dedicated "Reader Mode" pre-processor.
|
||||||
|
*/
|
||||||
|
function cleanAndMinifyHtml(rawHtml: string): string {
|
||||||
|
try {
|
||||||
|
const parser = new DOMParser();
|
||||||
|
const doc = parser.parseFromString(rawHtml, 'text/html');
|
||||||
|
|
||||||
|
// 1. Remove heavy technical tags
|
||||||
|
const technicalTags = ['script', 'style', 'noscript', 'iframe', 'svg', 'link', 'meta', 'button', 'input', 'form', 'img', 'picture', 'video'];
|
||||||
|
technicalTags.forEach(tag => {
|
||||||
|
const elements = doc.querySelectorAll(tag);
|
||||||
|
elements.forEach(el => el.remove());
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Remove semantic layout tags that are usually clutter
|
||||||
|
const layoutTags = ['nav', 'footer', 'aside', 'header'];
|
||||||
|
layoutTags.forEach(tag => {
|
||||||
|
const elements = doc.querySelectorAll(tag);
|
||||||
|
elements.forEach(el => el.remove());
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Remove common ad/social/cookie containers by class/id heuristics
|
||||||
|
const junkSelectors = [
|
||||||
|
'[class*="ad-"]', '[id*="ad-"]',
|
||||||
|
'[class*="cookie"]', '[id*="cookie"]',
|
||||||
|
'[class*="newsletter"]', '[id*="newsletter"]',
|
||||||
|
'[class*="social"]', '[class*="share"]',
|
||||||
|
'[class*="comment"]', '[id*="comment"]',
|
||||||
|
'[class*="recommended"]', '[class*="related"]'
|
||||||
|
];
|
||||||
|
|
||||||
|
junkSelectors.forEach(selector => {
|
||||||
|
try {
|
||||||
|
const elements = doc.querySelectorAll(selector);
|
||||||
|
elements.forEach(el => el.remove());
|
||||||
|
} catch (e) {
|
||||||
|
// Ignore invalid selector errors
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4. Return the cleanest possible content
|
||||||
|
// If there is a specific article tag, it's usually the best bet.
|
||||||
|
const article = doc.querySelector('article');
|
||||||
|
if (article && article.textContent && article.textContent.length > 200) {
|
||||||
|
return article.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
const main = doc.querySelector('main');
|
||||||
|
if (main && main.textContent && main.textContent.length > 200) {
|
||||||
|
return main.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback: Return the cleaned body
|
||||||
|
return doc.body.innerHTML;
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("HTML cleaning failed, using raw string", e);
|
||||||
|
return rawHtml;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetches Raw HTML using a rotation of proxies.
|
||||||
|
*/
|
||||||
|
async function fetchRawHtml(inputUrl: string): Promise<string> {
|
||||||
|
const url = normalizeUrl(inputUrl);
|
||||||
|
let lastError;
|
||||||
|
|
||||||
|
for (const provider of PROXY_PROVIDERS) {
|
||||||
|
let proxyUrl = '';
|
||||||
|
try {
|
||||||
|
proxyUrl = provider(url);
|
||||||
|
console.log(`Fetching via proxy: ${proxyUrl}`);
|
||||||
|
|
||||||
|
const controller = new AbortController();
|
||||||
|
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout per proxy
|
||||||
|
|
||||||
|
// We purposely do NOT add complex headers here.
|
||||||
|
// Adding headers like 'X-Requested-With' often triggers a CORS Preflight (OPTIONS) request,
|
||||||
|
// which many simple free proxies do not handle correctly, causing "Load failed".
|
||||||
|
const response = await fetch(proxyUrl, {
|
||||||
|
signal: controller.signal,
|
||||||
|
});
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Proxy returned status ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const text = await response.text();
|
||||||
|
|
||||||
|
// Simple validation to ensure we got something resembling HTML/Text
|
||||||
|
if (text && text.length > 100) {
|
||||||
|
return text;
|
||||||
|
} else {
|
||||||
|
throw new Error("Response too short, likely blocked or empty.");
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(`Proxy attempt failed for ${proxyUrl}:`, e);
|
||||||
|
lastError = e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
throw lastError || new Error("Unable to access article content via proxies.");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Uses Gemini to extract clean text from the raw HTML.
|
||||||
|
*/
|
||||||
|
async function parseHtmlWithGemini(html: string, url: string): Promise<{ title: string; text: string }> {
|
||||||
|
const ai = getAiClient();
|
||||||
|
|
||||||
|
const cleanedHtml = cleanAndMinifyHtml(html);
|
||||||
|
|
||||||
|
if (cleanedHtml.length < 100) {
|
||||||
|
throw new Error("Content appears to be empty after cleaning. The site might require JavaScript to render.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const prompt = `
|
||||||
|
SOURCE URL: ${url}
|
||||||
|
|
||||||
|
TASK:
|
||||||
|
I have provided the HTML source of a webpage.
|
||||||
|
Your job is to act as a dumb "Text Extractor" tool.
|
||||||
|
Extract the TITLE and the FULL BODY TEXT of the main article.
|
||||||
|
|
||||||
|
CRITICAL RULES:
|
||||||
|
1. VERBATIM: Do NOT rewrite, summarize, or fix the text. Output it exactly as written in the HTML.
|
||||||
|
2. FULL TEXT: Do NOT stop early. Process the entire HTML to find the end of the article.
|
||||||
|
3. CLEANING: Exclude ads, navigation, "read more" links, and comments.
|
||||||
|
4. FORMATTING: Keep the paragraphs intact.
|
||||||
|
5. FAILURE: If the HTML contains a CAPTCHA, Login Screen, or Paywall message instead of an article, return the text "PAYWALL_DETECTED".
|
||||||
|
|
||||||
|
Output Format:
|
||||||
|
===TITLE_START===
|
||||||
|
(Headline)
|
||||||
|
===TITLE_END===
|
||||||
|
===TEXT_START===
|
||||||
|
(Paragraph 1)
|
||||||
|
|
||||||
|
(Paragraph 2)
|
||||||
|
|
||||||
|
...
|
||||||
|
|
||||||
|
(Final Paragraph)
|
||||||
|
===TEXT_END===
|
||||||
|
|
||||||
|
HTML CONTENT:
|
||||||
|
${cleanedHtml}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const response = await ai.models.generateContent({
|
||||||
|
model: 'gemini-2.5-flash',
|
||||||
|
contents: prompt,
|
||||||
|
config: {
|
||||||
|
temperature: 0.0, // Strict deterministic output
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return parseResponse(response.text || "");
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseResponse(rawText: string): { title: string; text: string } {
|
||||||
|
if (rawText.includes("PAYWALL_DETECTED")) {
|
||||||
|
throw new Error("This article is behind a paywall or anti-bot protection and cannot be accessed directly.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const titleMatch = rawText.match(/===TITLE_START===([\s\S]*?)===TITLE_END===/);
|
||||||
|
const textMatch = rawText.match(/===TEXT_START===([\s\S]*?)===TEXT_END===/);
|
||||||
|
|
||||||
|
const title = titleMatch ? titleMatch[1].trim() : "";
|
||||||
|
const text = textMatch ? textMatch[1].trim() : "";
|
||||||
|
|
||||||
|
// Fallback logic for malformed AI responses
|
||||||
|
if (!text && rawText.length > 100) {
|
||||||
|
// If AI failed to use delimiters but returned text, try to use it if it looks like an article
|
||||||
|
if (!rawText.includes("===TEXT_START===") && rawText.length > 200) {
|
||||||
|
return { title: "Extracted Content", text: rawText };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!text || text.length < 50) {
|
||||||
|
throw new Error("Could not extract article text. The page structure might be too complex or empty.");
|
||||||
|
}
|
||||||
|
|
||||||
|
return { title, text };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Main Extraction Function
|
||||||
|
*/
|
||||||
|
export const extractArticleContent = async (url: string): Promise<{ title: string; text: string }> => {
|
||||||
|
console.log("Attempting to extract:", url);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 1. Fetch Raw HTML via Proxy
|
||||||
|
const html = await fetchRawHtml(url);
|
||||||
|
|
||||||
|
// 2. Parse with Gemini
|
||||||
|
console.log("HTML fetched (" + html.length + " chars). Parsing...");
|
||||||
|
return await parseHtmlWithGemini(html, url);
|
||||||
|
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Extraction failed:", error);
|
||||||
|
// We intentionally DO NOT fall back to Google Search here, as per user request.
|
||||||
|
// We want to fail if we can't get the direct content.
|
||||||
|
throw new Error(error.message || "Failed to access article directly.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generates speech audio from text.
|
||||||
|
*/
|
||||||
|
export const generateSpeechFromText = async (text: string, voice: VoiceName): Promise<string> => {
|
||||||
|
const ai = getAiClient();
|
||||||
|
|
||||||
|
const response = await ai.models.generateContent({
|
||||||
|
model: 'gemini-2.5-flash-preview-tts',
|
||||||
|
contents: {
|
||||||
|
parts: [{ text: text }]
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
responseModalities: [Modality.AUDIO],
|
||||||
|
speechConfig: {
|
||||||
|
voiceConfig: {
|
||||||
|
prebuiltVoiceConfig: {
|
||||||
|
voiceName: voice
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const base64Audio = response.candidates?.[0]?.content?.parts?.[0]?.inlineData?.data;
|
||||||
|
|
||||||
|
if (!base64Audio) {
|
||||||
|
throw new Error("No audio data received from model");
|
||||||
|
}
|
||||||
|
|
||||||
|
return base64Audio;
|
||||||
|
};
|
||||||
29
tsconfig.json
Normal file
29
tsconfig.json
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"useDefineForClassFields": false,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": [
|
||||||
|
"ES2022",
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable"
|
||||||
|
],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"types": [
|
||||||
|
"node"
|
||||||
|
],
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"allowJs": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"noEmit": true
|
||||||
|
}
|
||||||
|
}
|
||||||
35
types.ts
Normal file
35
types.ts
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
export enum VoiceName {
|
||||||
|
Puck = 'Puck',
|
||||||
|
Charon = 'Charon',
|
||||||
|
Kore = 'Kore',
|
||||||
|
Fenrir = 'Fenrir',
|
||||||
|
Zephyr = 'Zephyr',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum PlaybackStatus {
|
||||||
|
IDLE = 'IDLE',
|
||||||
|
LOADING_TEXT = 'LOADING_TEXT',
|
||||||
|
LOADING_AUDIO = 'LOADING_AUDIO',
|
||||||
|
READY = 'READY',
|
||||||
|
PLAYING = 'PLAYING',
|
||||||
|
PAUSED = 'PAUSED',
|
||||||
|
ERROR = 'ERROR',
|
||||||
|
COMPLETED = 'COMPLETED'
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Article {
|
||||||
|
id: string;
|
||||||
|
url: string;
|
||||||
|
title: string;
|
||||||
|
text: string;
|
||||||
|
audioUrl?: string; // Blob URL for the WAV file
|
||||||
|
status: PlaybackStatus;
|
||||||
|
errorMessage?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PlayerState {
|
||||||
|
isPlaying: boolean;
|
||||||
|
playbackRate: number;
|
||||||
|
currentArticleId: string | null;
|
||||||
|
selectedVoice: VoiceName;
|
||||||
|
}
|
||||||
23
vite.config.ts
Normal file
23
vite.config.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import { defineConfig, loadEnv } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
export default defineConfig(({ mode }) => {
|
||||||
|
const env = loadEnv(mode, '.', '');
|
||||||
|
return {
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
host: '0.0.0.0',
|
||||||
|
},
|
||||||
|
plugins: [react()],
|
||||||
|
define: {
|
||||||
|
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||||
|
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, '.'),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user