Gemma 4 News

Gemma 4 News is a browser-only React app for reading RSS feeds with a local Gemma model. It fetches headlines from user-configured feeds, sends a compact prompt to an in-browser WebGPU worker, and streams back either a thematic news digest or a personalized briefing. It also includes an article annotation tool that highlights selected spans in pasted article text and explains them according to user-defined criteria.

The app does not require a backend service for inference. Model loading and generation run in the browser through @huggingface/transformers using the ONNX community Gemma 4 E2B instruction model.

Features

• In-browser Gemma inference: loads onnx-community/gemma-4-E2B-it-ONNX in a Web Worker and runs generation on WebGPU.
• RSS and Atom feed reader: stores feed URLs in localStorage, fetches feeds through CORS proxy fallbacks, and parses RSS/Atom XML in the browser.
• Theme clustering: groups recent feed items into concise editorial themes with cited source items.
• Personalized briefing: creates a short reader-specific news briefing based on stated interests.
• Article annotation: accepts pasted article text and annotation criteria, asks the model for JSON span annotations, and renders hoverable highlights.
• Streaming output and interruption: streams generated tokens into the UI and supports stopping active generation.
• First-load progress: displays model download progress while the browser caches model weights.

Requirements

• Node.js 18 or newer.
• A Chromium-based browser with WebGPU support, such as Chrome or Edge 113+.
• A GPU/browser environment capable of running the quantized model.
• Network access from the browser to Hugging Face model files and RSS/CORS proxy endpoints.

The initial model download is roughly 2 GB. After the first load, browser caching should make subsequent starts faster.

Getting Started

Install dependencies:

npm install

Start the Vite development server:

npm run dev

Open the local URL printed by Vite in a supported Chromium browser.

Build for production:

npm run build

Preview the production build:

npm run preview

Deploying to Vercel

This project is configured for Vercel with vercel.json.

• Build command: npm run build
• Output directory: dist

The Vercel config also sends the cross-origin isolation headers required by the in-browser model runtime:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

To deploy from the Vercel dashboard, import the repository and keep the detected Vite settings. To deploy from the CLI:

npx vercel

How It Works

src/App.jsx owns the main application state, starts the model worker, builds prompts, and routes generated output to either the news or annotation view.

src/worker.js loads the Gemma processor and model with @huggingface/transformers, performs a short warm-up generation, then handles generation requests. It posts loading, streaming, completion, interruption, and error messages back to the React app.

src/feeds.js contains the browser RSS/Atom fetching and parsing logic. Because many feeds do not send permissive CORS headers, feed requests are attempted through a small list of public CORS proxy services.

src/components/NewsPanel.jsx manages the feed list, news actions, cited model output, and source list. Feed URLs are stored under gemma-news-feeds-v1 in localStorage.

src/components/AnnotatePanel.jsx manages pasted article text, annotation criteria, raw model output when needed, and the final highlighted article rendering.

vite.config.js enables ES module workers and sends the cross-origin isolation headers required for WebGPU and high-performance browser ML execution:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

Project Structure

.
├── index.html
├── package.json
├── vite.config.js
└── src
    ├── App.jsx
    ├── feeds.js
    ├── main.jsx
    ├── styles.css
    ├── worker.js
    └── components
        ├── AnnotatePanel.jsx
        ├── LoadProgress.jsx
        └── NewsPanel.jsx

Notes and Limitations

• The app is intentionally client-only. It has no server-side feed fetcher, database, or API route.
• Public CORS proxies can be unreliable, rate limited, or blocked by some feed providers.
• Feed parsing supports common RSS and Atom fields, but it is not a full feed normalization library.
• Model output is prompt-guided rather than guaranteed. The annotation view includes a recovery path for partially valid JSON, but malformed output can still occur.
• WebGPU support varies by browser, operating system, hardware, and driver version.