用 WebLLM 在浏览器本地运行 Qwen 2.5 与 Llama 3.2 的 One Liner 应用

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

One Liner is a one-page web app that turns long, over-the-top posts into a single line saying what they actually mean. Paste in a rambling announcement, a humble-brag or a motivational essay, click the button, and get the gist. No extra information.

I built it for my friend who wanted to start using social media for job searches, etc. Most of the long posts he ran into on professional social feeds took a few hundred words to say one thing, like "I got a new job" or "please comment so I can message you". He wanted to get the point in a second and only read the full post when it's worth the time.

Demo

Code

One-Liner

Paste a long, "humbled and honored" LinkedIn post. Get the one-line truth.

Live demo: https://oneliner-ten.vercel.app/

What it does

You paste a post like this:

After 7 incredible years, I'm humbled and honored to share that I've decided to embark on a new chapter. This journey taught me so much about leadership and resilience. Grateful to everyone who believed in me. Stay tuned! #newbeginnings

You get one short line back, something like:

Quit their job.

That's the whole app: one page, one job, no extra information.

Why I built it

Why open source matters here

• Private by default. The model runs on your own device, so nothing you paste is sent anywhere.
• Free to run and host. There's no per-request bill and no API key. The whole app is one static HTML file.
• Swappable models. The dropdown switches between Qwen 2.5 1.5B, Llama 3.2 1B and Llama 3.2 3B. Adding…

How I Built It

It's a single index.html file with no backend.

Model: open-weight models run inside the browser with WebLLM, which uses WebGPU. The default is Qwen 2.5 1.5B Instruct. Llama 3.2 1B and 3B are in a dropdown, so I can compare them on the same posts.
Prompt: a system prompt asks for exactly one sentence under 20 words. It is paired with four worked examples (long post in, one-liner out), because small models follow a pattern far better when they are shown it.
Cleanup: a small function keeps only the first line and first sentence, and strips labels or quote marks the model sometimes adds. That way the output is always one line.
Hosting: a static file on Vercel. There is no server and no API key.
Resilience: the AI library loads from three CDNs in turn, so one blocked source doesn't break the page.

What went wrong along the way: my first version showed a blank page when the library failed to load, and then the model download failed with "Failed to fetch". I had been testing inside a preview pane that blocks those downloads. So I added a Check connection button that tests each download step and shows which one fails, plus a warning when the page is opened in a preview. I also used Claude as a coding assistant for scaffolding and debugging.

Why Does Open Innovation Matter?

I paste all sorts of text into a tool like this, and I don't want every post, draft or message I read going to someone else's server. With an open-weight model running in the browser, none of it leaves my device. A closed API would send every post to a third party, along with an API key and a bill.

Open also made these things possible:

It costs nothing to run. There is no per-request fee and no backend to pay for.
Models are swappable. Changing the model is a one-line edit, so I could compare a 1B and a 3B model.
Behaviour is editable. The prompt and the worked examples live in a config block at the top of the file. If it misreads a style of post, I add an example. No retraining is needed.

The honest trade-off: a small model is less accurate than a big hosted one, it can miss sarcasm, and the first load is a large download. For a task as small as "boil this down to one line," I think that trade is worth it.