DEV Community: Hudson Mathew

[Boost]

Hudson Mathew — Sat, 11 Jul 2026 08:26:06 +0000

Jul 9

Zeno

Hudson Mathew — Thu, 09 Jul 2026 18:19:44 +0000

How I Built a Context-Aware AI & Media Assistant to Fix My Fragmented Developer Workflow

We’ve all been there. You’re deep in the zone, debugging a stubborn piece of code, or analyzing a massive documentation page. Suddenly, you need a quick summary, or you just want to skip to the next track on your playlist.

What happens next? You change tabs. You open your AI assistant. You switch windows to find your music player. Your focus is shattered, and your momentum is gone.

As a developer, this constant context-switching was driving me crazy. I didn’t want to keep leaves-turning through browser tabs just to borrow a bit of machine intelligence or adjust my audio background. I wanted an assistant that lived exactly where my eyes already were: inside my active webpage.

So, I built Zeno (V2.1 Pro).

Zeno is a Chromium browser extension that functions as a powerful, context-aware AI and media companion packed inside a single sleek popup. It bridges the gap between my active browsing experience and my full-stack Python Django platform, Hero AI, without demanding that I switch focus.

Here is the story of how I engineered my way out of workflow fragmentation, tackled strict browser boundaries, and built a unified sidekick.

(Title: Zeno V2.1 Pro — Dual-View AI and Media Dashboard)

Breaking Down the Browser Walls

Building an extension that acts as both an AI data processor and a hardware-level media controller meant fighting Chromium’s strict runtime constraints every step of the way.

1. The Battle with CORS and Session States

Modern browser security blocks standard popups from hitting external APIs directly due to Cross-Origin Resource Sharing (CORS) protections. Even trickier, keeping track of who is logged in across different domains often fails when third-party cookies get blocked.

To fix this, I completely cut out direct API calls from the user interface layer. Instead, when a user types a prompt, the popup passes the data across an internal secure message bus to a persistent background service worker. Because this service worker runs out-of-process, it can act as an isolated proxy. It catches the message, cleanly appends the backend security headers and session identifiers, and makes the secure fetch request to my production server on Alwaysdata.

The result? Absolute data privacy and a seamless session that keeps you logged in without frustrating login loops.

2. The Single-Tab Media Hijack

One of my core goals was giving Zeno the ability to play music on command via an embedded assistant tab called Zuno. But early testing revealed a messy problem: every time I asked for a new song, the application would spawn a brand new browser tab. Ask for five songs over an hour, and your workspace is buried under an avalanche of muted YouTube tabs.

I solved this by writing an identity-locking window tracking engine inside the background script.

Now, when a song request is triggered, the extension runs a quick sweep across the browser to see if a YouTube tab is already active. If it finds one, it dynamically hijacks it—updating the URL to the new track and bringing it to focus instantly. If no player tab exists, it opens exactly one player window, locks onto its unique tab ID, and forces all future songs to reuse that exact same slot.

(Title: Zuno Companion Mode — Controlling Active Media Playback Centrally)

The Feature Grid: AI Meets Audio

By combining background worker proxying with targeted DOM script injection, the final build brought together a massive suite of features right into the side panel:

Zeno Plus (Context Menu Integration): You can highlight any snippet of complex code or text on a webpage, right-click, and hit "Ask Zeno Plus". The extension immediately routes that exact context to a heavy, multi-billion parameter reasoning model to explain or debug it on the fly.
Shadow Mode (Full Page Summarization): When landing on massive technical readmes or repositories, hitting the eye icon triggers a silent page content script. It extracts the raw visible text layouts (up to 40,000 characters), runs it through an ultra-fast Groq engine layer, and returns a dense summary of core takeaways instantly.
Hands-Free Voice Interruption: Using the browser's native speech recognition APIs, you can talk to Zeno continuously. It includes built-in echo protection: if Zeno is reading an answer aloud and you start speaking to correct it, it instantly cuts off its own audio synthesis loop to listen to your new command.
Direct Media Controls: Through the Zuno tab, you have full button and voice access to Play, Pause, Skip, Rewind, and even a targeted Skip Ad macro that instantly clears YouTube advertisements without requiring a manual mouse click.

Final Thoughts: Designing Around Constraints

Building Zeno taught me that when you develop inside the browser ecosystem, you don't own the workspace—you are a guest sharing resources with the user's focus.

By offloading network operations to independent service workers, keeping UI footprints lightweight, and injecting logic surgically only when an event fires, you can build remarkably powerful developer tools that feel integrated, blazing-fast, and incredibly respectful of system resources.

🚀 Get Started & Download

Want to supercharge your workflow and stop tab-switching for good? You can try out the extension and connect it to your workspace right now.

👉 Download Zeno Extension on the Microsoft Edge Add-ons Store

Have you built browser extensions that hook into custom full-stack AI pipelines? Let's swap architecture strategies in the comments below!

🚀 Built Something Smarter Than a Typical AI Most AI tools rely on a single model — when it fails, everything stops. So I built Hero’s AI – Baymax 🤖 A multi-model AI assistant that switches models automatically to improve reliability. 💡 What it can do

Hudson Mathew — Tue, 05 May 2026 08:06:01 +0000

Hudson Mathew

May 4

Hero's AI

#ai #rag #nlp #machinelearning

8 min read

Hero's AI

Hudson Mathew — Mon, 04 May 2026 15:08:22 +0000

🧠 I Built a AI Assistant with Multi-Model Fallback, Voice Chat & a Personal Data Analyst — Here's How

What happens when your AI goes down mid-conversation? You lose users. I built Hero's AI to make sure that never happens — and added a whole lot more along the way.

Live Demo

Have you ever used an AI tool that just... stopped working? Maybe it hit a quota limit, the API went down, or the model just returned nothing. If you're building on top of a single AI provider, you're one outage away from a broken product.

That's the problem I set out to solve with Hero's AI — a full-stack, production-grade AI assistant platform built with Django and Python. But I didn't stop at just "fixing uptime." I ended up building something that handles voice chat, web search, document analysis, and even runs data analytics on uploaded spreadsheets — all in one platform.

Here's a deep dive into how it works, what I built, and what I learned.

🚀 Project Overview

Hero's AI is a personal AI assistant platform that goes way beyond a simple chatbot.

Think of it as your smart digital companion — one that can:

Write and debug code
Search the web for real-time information
Hold voice conversations
Analyze uploaded documents
Run data analytics on your CSV or Excel files without you writing a single line of code

The platform is built on Django, uses Google Gemini as its primary AI brain, and has a waterfall fallback system through OpenRouter and Groq so users always get a response — even if one provider goes down.

It also ships with two powerful sub-modules:

Baymax — the AI orchestration engine
Infinsight — an RAG-powered data analytics layer

🔗 GitHub: https://github.com/Hudsonmathew1910/Hero-s-AI

✨ Key Features

🔄 Multi-model fallback chain — Gemini → OpenRouter (6 models) → Groq (4 models). Zero downtime from API failures.
💬 Text Chat — General conversation with persistent, per-user session history
👨‍💻 Coding Assistant — Code generation, debugging, and refactoring across Python, JS, SQL, and more
🔍 Web Search Mode — Real-time answers using DuckDuckGo + Wikipedia, summarized by Gemini
🎙️ Voice Chat — Short, natural spoken-style responses optimized for text-to-speech
📄 File Analysis — Upload PDFs, DOCX, or TXT files and ask questions about them
📊 Infinsight Analytics — Upload CSV/Excel, ask plain-English questions, get analyst-grade reports
🔐 Encrypted API Key Storage — User keys are Fernet-encrypted server-side, never exposed to the browser
🔑 Google OAuth Login — One-click sign-in alongside traditional email/password
🧠 NLP Intent Detection — Custom regex-based NLP pipeline routes each message to the right handler
🎛️ Custom Instructions — Users can set their name, preferences, and AI tone globally
🕵️ Temporary Chat Mode — Privacy-first mode where conversations aren't saved

🤖 Baymax (The AI Orchestration Module)

Baymax is the core engine of Hero's AI — named after everyone's favorite healthcare companion, because it's always there when you need it.

[hero-s-ai.onrender.com]http://hero-s-ai.alwaysdata.net/)

What does Baymax do?

Baymax is an orchestrator class that decides:

Which AI model to use for a given task
What to do when that model fails
How many tokens to allocate based on task complexity

Every user message flows through the NLP layer first (more on that below), and then Baymax picks the right handler and model for the job.

Baymax's Key Features

Smart Model Routing — Routes coding tasks to Gemini 2.5 Flash, general chat to OpenRouter NVIDIA Nemotron, and so on. The right model for the right task.
Waterfall Fallback — If the primary model fails, Baymax silently tries up to 10 fallback models across OpenRouter and Groq. The user never sees an error.
Adaptive Token Budgets — Short conversational replies use fewer tokens (faster, cheaper). File analysis and data queries get up to 4,000 tokens for thorough output.
Compressed History — Instead of sending the full chat history (expensive!), Baymax loads only 2–6 recent turns depending on task type and compresses them into a single context block.
Parallel DB Lookups — API keys, user settings, and chat sessions are fetched in parallel threads to minimize latency.

How does it help users?

Users never have to worry about which AI to use or whether it's available. Baymax handles all of that invisibly. You ask a question, you get an answer — always.

📊 Infinsight (The Data Analytics Module)

Infinsight is the feature I'm most proud of. It turns Hero's AI into a personal data analyst that anyone can use — no Python, no SQL, no Excel expertise required.

hero-s-ai.onrender.com/infinsight

What does Infinsight do?

Users upload a CSV, Excel, or PDF file. Then they ask questions in plain English like:

"What's the average revenue by region?"
"Which customers are most likely to churn?"
"Show me a sales trend for the last 6 months."

Infinsight handles the rest.

How it works under the hood

This is where it gets interesting. Infinsight uses a Retrieval-Augmented Generation (RAG) pipeline:

Parse — The file is parsed into text chunks. CSV rows become natural-language summaries; PDFs are chunked page by page.
Embed — Each chunk is converted into a 768-dimensional vector using gemini-embedding-001.
Store — Vectors are stored in a Pinecone vector database under a user-specific namespace.
Retrieve — When a query arrives, the most relevant chunks are fetched via semantic similarity search.
Analyze — The relevant context and dataset schema are passed to Gemini. If the query needs computation (sums, trends, forecasts), Gemini generates Pandas code, which is executed safely in a sandboxed asteval interpreter.
Report — The computed results are passed back to Gemini, which writes a clean, human-readable analyst report.

What kind of analysis can it do?

📈 Time-series trend analysis
🧮 RFM (Recency, Frequency, Monetary) customer segmentation
📉 Linear regression forecasting
🔗 Profit-discount correlation analysis
📋 Summary statistics, grouping, filtering

The value it delivers

Infinsight removes the biggest barrier to data analysis: you don't need to know how to code. Upload your file, ask your question, get your answer. It's like having a junior data analyst on call 24/7.

🛠 Tech Stack

Layer	Technology
Backend	Django 5.2, Python 3.11, Gunicorn
Database	PostgreSQL (Neon cloud)
Primary AI	Google Gemini 2.5 Flash / Lite
AI Gateway	OpenRouter (100+ LLMs)
AI Fallback	Groq (Llama, Qwen, Kimi)
NLP	Custom Regex Engine (Nlp.py)
Vector DB	Pinecone
Embeddings	gemini-embedding-001 (768 dim)
Web Search	DuckDuckGo (ddgs) + Wikipedia
File Parsing	pdfplumber, pypdf, python-docx
Data Analysis	pandas, numpy, scikit-learn
Secure Execution	asteval (sandboxed Python)
Encryption	cryptography (Fernet)
Auth	Django sessions + Google OAuth 2.0
Frontend	Vanilla JS + CSS (no framework)
Deployment	Render

⚙️ How It Works — Step by Step

Here's the full flow from the moment you type a message to the moment you get a response:

Step 1 — Authentication
You log in via email/password or Google OAuth. Your session is stored server-side with a 2-week expiry.

Step 2 — API Key Setup
You enter your Gemini and OpenRouter API keys. They're encrypted with Fernet and stored in the database — they never touch the browser again.

Step 3 — Send a Message
You type your message (or use voice) and select a mode: Text, Coding, Web Search, File Analysis, etc.

Step 4 — NLP Pre-processing
Your message is cleaned (noise removed, punctuation normalized) and analyzed for intent. If you wrote text mode but included code blocks, the system upgrades it to coding mode automatically.

Step 5 — Parallel DB Lookups
Your API keys, user settings, and chat session are fetched in parallel threads. This keeps things fast.

Step 6 — History Load
2–6 recent turns from your current chat session are loaded and compressed into a context block.

Step 7 — Baymax Dispatches
The right handler is called: handle_text, handle_coding, handle_websearch, handle_voice_chat, handle_file, etc.

Step 8 — AI Model Call + Fallback
The primary model is called. If it fails → try fallback OpenRouter models → try Groq. A response always comes back.

Step 9 — Response Returned
The AI reply is returned as JSON to the frontend. Non-temporary chats are saved to the database asynchronously (no latency added).

Step 10 — Infinsight Path (for data files)
Upload → Parse → Embed → Store in Pinecone → Retrieve by similarity → Feed to Gemini → Generate Pandas code → Execute in sandbox → Interpret result → Return analyst report.

🖼 Screenshots / Demo

Main Chat UI

Infinsight Analytics Report

Voice Chat Overlay

🚧 Challenges & Solutions

Challenge 1 — Single Point of Failure

Problem: If Gemini's API quota ran out mid-session, the entire platform would break.
Solution: Built a waterfall fallback system — Primary → 6 OpenRouter models → 4 Groq models. If one fails, the next kicks in automatically with zero user-facing errors.

Challenge 2 — Generic AI Responses

Problem: A single model with a single prompt gives mediocre results across different task types.
Solution: Built the NLP intent detection layer to classify every message and route it to a purpose-built handler with a task-specific system prompt and model selection.

Challenge 3 — Secure API Key Management

Problem: Storing API keys in localStorage or plain text in a DB is a security nightmare.
Solution: All keys are encrypted with Fernet symmetric encryption before database storage. They're decrypted server-side only when needed and never returned to the client.

Challenge 4 — Data Analysis Without Code

Problem: CSV/Excel analysis requires Python or SQL skills that most users don't have.
Solution: Infinsight's RAG pipeline retrieves relevant data context and has Gemini generate Pandas code on the fly. The code runs in a sandboxed asteval interpreter and the output is translated into a readable report.

Challenge 5 — Expensive Long Conversations

Problem: Sending full chat history to the LLM on every turn is slow and burns tokens fast.
Solution: History is limited to 1–6 turns depending on task type, compressed into a single block, and paired with adaptive token budgets that scale with task complexity.

🌍 Use Cases

👩‍🎓 Students & Learners
Get explanations, essay help, coding guidance, and concept breakdowns — all in one place.

👨‍💻 Developers
Generate boilerplate, debug tricky functions, refactor messy code, and get algorithmic suggestions.

📊 Data Analysts
Upload your CSV or Excel file and ask questions in plain English. No pandas, no SQL, no problem.

🔬 Researchers
Use web search mode to get AI-summarized answers with citations from live web results — no stale training data.

🏢 Businesses
Deploy as an internal tool with per-user API key isolation, custom instructions, and persistent chat history.

🧑 General Users
Voice chat, document Q&A, general conversation, web lookups — a true all-in-one assistant.

🔮 Future Improvements

Here's what's on the roadmap:

🖼️ Image Generation — Integrate Stable Diffusion or DALL·E for visual output
📱 Mobile App — A React Native companion app for on-the-go access
🔌 Plugin System — Allow users to connect custom tools and APIs to the assistant
🧩 Infinsight v2 — Support for SQL databases and real-time data streams
🌐 Multi-language Support — NLP and UI support for non-English users
👥 Team Workspaces — Shared chat sessions and collaborative analytics for teams
📡 Webhook Integrations — Trigger Hero's AI from Slack, Notion, or GitHub events
🧠 Long-term Memory — Persistent semantic memory across sessions using vector search

🎉 Conclusion

Building Hero's AI was one of the most rewarding projects I've worked on. It pushed me to think about reliability, security, user experience, and AI engineering all at once.

The biggest lesson? Don't build on a single point of failure. Whether it's your AI provider, your database, or your auth system — build fallbacks in from day one.

If you're a developer who's ever wanted to build a serious AI product — one that handles real-world edge cases, keeps user data secure, and actually works when APIs go down — I hope Hero's AI gives you some useful ideas and patterns to borrow.

Feel free to check out the repo, open issues, or drop me a message. I'd love to hear your thoughts! 🚀

🔗 GitHub: https://github.com/Hudsonmathew1910/Hero-s-AI
📧 Contact: hudsonmathew2004@gmail.com

Feel free to explore Hero's AI

If you found this useful, drop a ❤️ and share it with a developer friend. And if you build something inspired by this — I'd genuinely love to see it!

Tags: #python #django #ai #machinelearning #webdev #opensource #showdev #productivity

EpicOutlet

Hudson Mathew — Sat, 14 Mar 2026 13:15:57 +0000

🛒 EpicOutlet – AI Powered E-Commerce App

EpicOutlet is a full-stack e-commerce web application built with Python and Django.
Users can browse, search, and purchase products across categories like electronics, fashion, groceries, and home items.

The platform includes user authentication, a shopping cart, a favourites list, and an AI shopping chatbot (Shop-Bot) that helps users find products using natural language queries like “phones under ₹30,000”.

🤖 Shop Bot

⚙️ Tech Stack

Backend: Python, Django
Database: PostgreSQL (Supabase)
Media Storage: Cloudinary
Static Files: WhiteNoise
Deployment: Render + Gunicorn
API: django-tastypie (/api/v1/)

This project demonstrates full-stack development, REST APIs, AI chatbot integration, and cloud deployment.

🔗 Explore the app:
https://epicoutlet.onrender.com/

My Portfolio

Hudson Mathew — Sat, 14 Mar 2026 13:05:18 +0000

🌐 My Portfolio & Portfolio AI Bot

Hello, I’m Hudson Mathew, a software developer focused on Python, full-stack web development, and UI/UX design. I enjoy building practical applications that solve real problems and deliver smooth user experiences.

My portfolio showcases my projects, technical skills, and development journey, while the Portfolio AI Bot helps visitors explore my work through an interactive chat interface.

🤖 Portfolio AI Bot

The Portfolio AI Bot helps visitors to:

💬 Navigate the portfolio using chat-style interaction
🔍 Discover projects and skills quickly
🌐 Explore my work in a simple and interactive way

⚙️ Tech Stack

Portfolio Site

HTML – Semantic single-page structure
CSS – Grid, Flexbox, animations, responsive design
JavaScript – DOM interaction and UI behavior
Assets – Google Fonts, Boxicons, Font Awesome

Portfolio Bot

React – Functional components (useState, useEffect, useRef)
AI API – Anthropic Claude model integration
UX – Auto-scroll, typing indicator, suggestion chips

🔗 Explore here:
https://hudsonmathew1910.github.io/Hudson-Portfolio/

DEV Community: Hudson Mathew

[Boost]

Zeno

Zeno

How I Built a Context-Aware AI & Media Assistant to Fix My Fragmented Developer Workflow

Try Extension

Breaking Down the Browser Walls

1. The Battle with CORS and Session States

2. The Single-Tab Media Hijack

The Feature Grid: AI Meets Audio

Final Thoughts: Designing Around Constraints

🚀 Get Started & Download

🚀 Built Something Smarter Than a Typical AI Most AI tools rely on a single model — when it fails, everything stops. So I built Hero’s AI – Baymax 🤖 A multi-model AI assistant that switches models automatically to improve reliability. 💡 What it can do

Hero's AI

Hero's AI

🧠 I Built a AI Assistant with Multi-Model Fallback, Voice Chat & a Personal Data Analyst — Here's How

Live Demo

🚀 Project Overview

✨ Key Features

🤖 Baymax (The AI Orchestration Module)

What does Baymax do?

Baymax's Key Features

How does it help users?

📊 Infinsight (The Data Analytics Module)

What does Infinsight do?

How it works under the hood

What kind of analysis can it do?

The value it delivers

🛠 Tech Stack

⚙️ How It Works — Step by Step

🖼 Screenshots / Demo

🚧 Challenges & Solutions

Challenge 1 — Single Point of Failure

Challenge 2 — Generic AI Responses

Challenge 3 — Secure API Key Management

Challenge 4 — Data Analysis Without Code

Challenge 5 — Expensive Long Conversations

🌍 Use Cases

🔮 Future Improvements

🎉 Conclusion

Feel free to explore Hero's AI

EpicOutlet

🛒 EpicOutlet – AI Powered E-Commerce App

🤖 Shop Bot

⚙️ Tech Stack

My Portfolio

🌐 My Portfolio & Portfolio AI Bot

🤖 Portfolio AI Bot

⚙️ Tech Stack

Portfolio Site

Portfolio Bot