FactBeacon: On-Device AI News Analysis with Gemini Nano

• 

  The initial state of the FactBeacon dashboard. The AI is ready, waiting for a user to start a search.

• 

  Starting the analysis: The user enters the search query "atlas i3 is ufo" to check its credibility.

• 

  Persistent History: The history panel saves all past searches and their results locally for the user to review later.

• 

  Export Reports: Users can export the current analysis as a PDF, CSV, or JPG for sharing or offline archiving.

• 

  Interactive Timeline: Users can instantly regroup all articles by Hour, Day, Month, or Year.

• 

  The interactive timeline view. Articles are automatically fetched and arranged chronologically.

• 

  Light & Dark Mode: A built-in theme toggle for user accessibility and preference (showing Light Mode).

• 

  Translation Complete (Arabic): The UI and all AI-generated summaries are now fully translated, running 100% on-device.

• 

  On-Device AI: Gemini Nano identifies the "atlas i3" topic as "Mixed" or "Suspect" with a 39% score.

• 

  Advanced Filtering: The filter menu allows users to isolate specific source types, like Press, Social Media, or Agencies.

• 

  Multilingual Support (Chinese): The same on-device translation feature working for another language, Chinese.

• 

  Open Original Source: Each card has an external link button that opens the source article directly in a new tab.

• 

  On-Device Translation: The user is selecting Arabic from the language menu to translate the interface and AI summaries.

• 

  Advanced Filtering: The "Period Selector" allows users to filter the timeline precisely by year, month, day, and hour.

• 

  A complete overview of the search results, showing the full timeline and the final credibility verdict (39%).

Inspiration In today's flood of information, it's incredibly difficult to evaluate news credibility quickly. Existing fact-checking tools often rely on cloud-based AI, which raises significant privacy concerns about what is being analyzed.

The Google Chrome Built-in AI Challenge inspired me. I saw an opportunity to solve this exact problem. My goal was to build a tool that could analyze information privately and securely, using the new on-device LanguageModel API (Gemini Nano). I wanted to create a "Fact Beacon" that would help users see the reliability of sources without their data ever leaving their machine .

What it does FactBeacon is a news analysis dashboard that uses Chrome's built-in Gemini Nano AI to analyze article credibility. It provides scores, summaries, and translations 100% on-device, ensuring total user privacy .

Fetches News: Securely retrieves articles from the Google CSE API via a backend proxy .

Analyzes Credibility (On-Device): Uses Gemini Nano to generate a 0-100 score, a neutral summary, and a global verdict ("Credible", "Mixed", or "Suspect") for each article.

Translates (On-Device): Uses the same LanguageModel API session to instantly translate AI summaries into 9 different languages.

Visualizes: Displays all articles on an interactive, zoomable, and pannable timeline.

Filters & Exports: Users can filter by date, time, and source type, and export reports as PDF, CSV, or JPG .

How we built it FactBeacon uses a hybrid architecture to maximize security and leverage client-side AI:

Frontend (Render Static Site): This is the entire user-facing application, built with vanilla HTML, CSS, and JavaScript. It runs the LanguageModel API (Gemini Nano) locally in the browser, activated via an Origin Trial token.

Backend (Render Web Service): This is a lightweight Node.js/Express proxy (server.js). Its only job is to securely store and use the Google Custom Search (CSE) API keys. This architecture ensures our secret keys are never exposed on the frontend.

APIs Used (Contest Requirement):

LanguageModel API (Gemini Nano): This is the core engine. We use a single AI session (aiSession) for two distinct tasks:

Analysis: A complex prompt asks for structured JSON output (score, summary, verdict) .

Translation: A second, simpler prompt is used to translate the summaries into other languages .

Google Custom Search (CSE) API: This API is called only by our secure backend proxy to fetch the news articles .

Challenges we ran into This project was a major debugging challenge, especially when dealing with experimental APIs.

Configuring the AI: Just getting the LanguageModel API to return "available" was the first hurdle. It required enabling two specific Chrome Flags (#prompt-api-for-gemini-nano AND #optimization-guide-on-device-model) and verifying the model had downloaded in chrome://components.

Backend 502 Errors: My proxy server kept crashing with a 502 Bad Gateway error, which caused the frontend to show a CORS error. I traced this to missing GOOGLE_CSE_KEY environment variables on the Render dashboard .

The "Hour 0" Bug: I discovered my period filter was broken. When I entered 0 for the hour, my old code (parseInt('0') || 23) treated 0 as "falsy" and used 23 instead. I fixed this by switching to an isNaN check .

The Language Tab Bug: The "Hour/Day/Month" tabs would stop working after changing the UI language. I fixed this by creating a dedicated setupTimeTabListeners() function and re-running it every time the translatePage() function was called, ensuring the event listeners were always re-attached .

Accomplishments that we're proud of

Solving the Privacy Problem: We successfully built an app that performs complex AI analysis without user data ever leaving the machine . This fulfills the core promise of the project.

Advanced, Flexible AI: We are very proud of using a single LanguageModel session to perform two very different tasks: one that returns structured JSON for analysis , and one that returns simple string translations.

A Robust, Secure Architecture: The hybrid "Static Site + Proxy" model is secure and works perfectly. The API keys are safe, and the app is fast.

Full-Featured UI: We didn't just build an AI demo. We built a complete tool with filtering, history, export options , and a multilingual interface.

What we learned On-Device AI is the Future for Privacy: Gemini Nano is incredibly powerful. The ability to perform complex analysis and translation without data leaving the user's machine is a game-changer .

The LanguageModel API is Flexible: We were impressed that we could use the same aiSession to request both highly-structured JSON and simple plain-text translations .

A Proxy is Non-Negotiable: A secure backend proxy is essential for protecting API keys. The hybrid "Static Site + Web Service" model on Render is perfect for this.

Debugging is 90% of the Work: From mysterious CORS errors (which were actually 502 errors) to JavaScript logic bugs (like 0 || 23) , we learned that rigorous, step-by-step debugging is the most important skill.

What's next for FactBeacon Advanced AI Analysis: Move beyond credibility scores to analyze bias, tone, and propaganda techniques in articles.

Graph Visualization: Instead of a linear timeline, create a graph/network visualization to show how different sources cite or copy each other.

Improved Date Extraction: The AI's date extraction was an "attempt". We want to refine this prompt to get more consistent and accurate date data.

Dedicated Translator API: If the Chrome Translator API becomes widely available, we would integrate it to separate translation from the analysis model, which would be a cleaner design.

Built With

• and-the-light/dark-themes)-vanilla-javascript-(es6+)-(used-for-all-ui-logic
• css3
• express.js
• filters
• github
• google-custom-search-api
• html2canvas
• html5
• jspdf
• languagemodel-api-(gemini-nano)
• node.js
• render
• responsiveness
• vanilla-javascript-(es6+)