Slothy：以 Gemma 3 4B 和 Ollama 在本機整理網頁資訊的開源 Chrome 擴充功能

🦥 I Built a Sloth for My 47 Tabs. Here's Why My Browser Needed One.

This is a submission for the Hacktoberfest Open-Source AI Challenge — Week 3: Slow and Steady.

I opened a tutorial to learn one thing.

Forty minutes later, I had six new tabs, three half-read explanations, and absolutely no idea how to do the thing I'd opened the tutorial for.

One article linked to another. That one assumed I understood something else. The documentation explained the API but sent me down a rabbit hole of unfamiliar terminology.

I wasn't learning anymore. I was collecting browser tabs like they were going to give me extra marks.

And somewhere in that mess, I noticed the absurdity of it all:

I could find an explanation for almost anything online, yet extracting the one thing I actually needed was becoming a task of its own.

I didn't want AI to write my assignments or think for me. I wanted it to help me get my bearings—to show me the central idea, separate important points from the noise, and help me see how everything connected.

So I built Slothy. 🦥

Slothy is an open-source Chrome extension that uses Gemma 3 4B through Ollama to transform webpage content into a gist, key takeaways, action items, and a visual mind map—all through local AI inference.

Open the page. Click Get the gist. Start with the big picture instead of fighting your way through the entire wall of text.

No hosted AI inference API in the core summarization workflow. No need to copy the article into another AI website.

Just the page you're trying to understand, and a little sloth helping you make sense of it.

Because sometimes, the hardest part of learning isn't finding the answer. It's finding your way through everything surrounding it.

🦥 1. What I Built: A Sloth for the Information Overload

Slothy is designed around one simple interaction: turn a long webpage into something easier to navigate.

Click Get the gist, and Slothy organizes the model's response into four views.

The idea isn't to replace reading. It's to give readers a starting point—to help them understand the structure of an article before deciding where to spend their attention.

Why a sloth?

A sloth felt like the right mascot for a tool about slowing down.

The visual identity follows the same principle: warm cream backgrounds, dark-brown typography, muted olive-green accents, and a friendly leafy mascot.

The product should feel calm even when the page you're reading isn't.

Slow down. Get the gist.

That's Slothy in one sentence.

🎬 2. Demo: From Webpage to Gist

Slothy runs as a Chrome extension connected to a local Ollama instance.

The basic workflow is:

1. Open a webpage you want to understand.
2. Open Slothy and start the summarization workflow.
3. Let Gemma process the extracted page content locally.
4. Explore the gist, key takeaways, action items, and mind map.

There isn't a hosted demo in this submission. Slothy is designed to run locally, so you can try it by installing the extension and configuring Ollama on your own machine.

🔗 3. The Code: Open Source, Not a Black Box

Slothy lives in your browser, but its language model runs on your machine.

Explore Slothy on GitHub

To try it, you'll need:

• Google Chrome with developer mode enabled.
• Ollama installed and running.
• The Gemma model pulled locally using ollama pull gemma3:4b.
• The Slothy extension loaded into Chrome and configured to connect to your local Ollama endpoint.

Once the local model is available, Slothy can send the extracted webpage content to Ollama and present the generated reading results in the extension.

The setup requires a compatible local environment and enough system resources to run the model. The benefit is that the core summarization workflow doesn't depend on a hosted AI inference API.

⚙️ 4. How I Built It: From Browser Tab to Structured Output

I wanted Slothy to be more than a pretty interface wrapped around an AI API. The interesting engineering challenge was connecting webpage extraction, local inference, output handling, and the user interface into one coherent workflow.

The architecture

Here's the path a webpage takes through Slothy:

Webpage → Content extraction → Local Gemma inference → Response parsing → Reading interface

Each stage has a distinct responsibility.

The technology stack

The engineering decisions behind the interface

1. Extract content before asking the model to summarize it.

A webpage contains more than the article itself: navigation, menus, footers, and other elements can get in the way. The extraction stage aims to give the model relevant reading content rather than blindly treating the entire page as useful input.

2. Keep inference local.

Slothy communicates with Ollama on the local machine, using its local API endpoint. The extension doesn't need a hosted model API to generate its core summaries.

3. Treat model output as data that needs handling.

Language models don't always return perfectly structured responses. When an application expects specific fields, the response must be interpreted and checked before the interface relies on it.

This is an important distinction: generating a response is one problem; turning that response into reliable application behavior is another.

4. Make the result easier to navigate.

The output isn't limited to a paragraph of generated text. Slothy separates the gist, key takeaways, and action items, and presents relationships between ideas through a visual mind map.

That makes the interface a reading aid rather than just another chat window.

The lesson I took away

Building Slothy reinforced an important engineering principle:

A useful AI application depends on more than the model. It depends on the entire pipeline around it.

Input quality affects the response. Output structure affects the interface. Local setup affects whether the experience works at all.

The model is only one part of the product.

🌍 5. Why Open Innovation Matters: Your Reading Shouldn't Need a Cloud Address

A research paper. A client brief. A recruiter’s message. A technical document you haven't fully understood yet.

Webpages can contain information people would prefer not to send to a remote AI service.

I wanted to explore a different architecture.

Slothy uses Gemma 3 4B through Ollama, allowing the model to process extracted webpage content locally on the user's machine.

There is no Slothy cloud server in the core summarization workflow.

That isn't just a privacy slogan. It's an architectural decision.

What open-weight AI makes possible

Local inference isn't magic. It uses your computer's resources, requires model installation, and can be slower or more demanding on some machines. Local processing also doesn't automatically guarantee that every part of an application is private; permissions, dependencies, and data handling still matter.

But it gives developers another way to build AI applications—one in which a hosted inference provider doesn't have to sit at the center of every interaction.

Open source makes the next step possible: other developers can inspect the implementation, learn from the design, adapt it, and help improve it.

The future of AI shouldn't be limited to whoever can afford another API bill. Sometimes, all you need is an open model, your own machine, and an idea worth building.

🤖 6. My Agent Session: Building by Iterating

Slothy wasn't built by writing one perfect prompt and watching a finished product appear.

It took an iterative approach: define the problem, build a piece, test the behavior, inspect what breaks, and refine the implementation.

AI-assisted development can help move through that process, but generated code still needs to be understood and checked. A feature that looks complete in an interface isn't necessarily functional. A response that looks structured isn't necessarily valid.

I kept coming back to one question:

Does this actually make it easier to understand a webpage, or does it just make the project look more impressive?

That question helped keep the focus on the product rather than adding complexity for its own sake.

Building Slothy also reminded me that using AI to write code doesn't remove the need to understand the code. It makes that understanding more important.

The goal wasn't to build the biggest AI application I could imagine. It was to take a familiar frustration—too many tabs, too much information—and turn it into a working open-source tool.

The most valuable part of the process was learning to think about the entire system: not only what the model could generate, but how the application could turn that output into something useful.

🏆 7. Prize Categories

I'm submitting Slothy for:

• Best Use of Gemma: Gemma 3 4B powers Slothy's local webpage summarization workflow through Ollama.
• Slow and Steady: Slothy encourages a more deliberate way to process information: start with the big picture, understand the key ideas, and decide what to do next.

🦥 One Less Rabbit Hole

Slothy started with a small frustration: opening a tutorial to learn one thing and ending up lost in ten other tabs.

I built it because I wanted a tool that could help me find the thread connecting all that information—without handing the entire task of understanding over to AI.

It's a work in progress, but it represents what I care about as a developer: building useful tools, experimenting with open-source AI, and learning by making things real.

If you've ever opened a tutorial and forgotten why you opened it in the first place, you understand the problem.

Here's to fewer rabbit holes, clearer thinking, and taking the slow lane when it matters. 🦥

Built with Gemma 3 4B, Ollama, JavaScript, and a browser full of ideas.

Explore Slothy on GitHub →