Site icon Efficient Coder

Turn News Links into Magazine-Style Briefs in 30 Seconds: Zero-Framework AI Workflow

高效码农

Turn Any News Link into a Magazine-Style Brief in 30s

A zero-framework frontend + single cloud-function recipe for weary office workers

Copy URL → wait 30s → get a 1080×2400 financial poster that still links back to the original article.
If you’re tired of the “screenshot + yellow-marker” workflow, read on and uninstall Photoshop forever.

TL;DR (What You’ll Be Able to Do)

  1. Run everything in the browser—drop one index.html onto any CDN, no React/Vue/NPM installs.
  2. Maintain one cloud function that orchestrates scraping, LLM summarising and image generation; secrets stay in env-vars.
  3. Let the AI output [R]...[/R] tags; a single replace() call paints them red—good-bye regex hell.

Prologue: Why I Re-Invented the Wheel

Wednesday 10 p.m.—a 36Kr long-read lands in the investment group.
Boss pings: “Brief. Ten minutes.”
Classic workflow: ① copy full text ② paste to Word ③ take three screenshots ④ compress until illegible.
That night I decided to automate screenshots—preferably with hand-drawn magazine flair so colleagues think I secretly majored in design.

Intuition: 30-Second Product Tour

Open https://your-cdn.com/brief → minimalist input box.

  1. Paste any news URL
  2. Button changes to “Cooking…” + four-step progress ring
  3. Instant 1080×2400 PNG with QR code, hand-drawn charts, red/yellow highlights

No sign-up, no cookies, no article stored—perfect for hit-and-run knowledge workers.

Hands-On: Front-End, 0 Framework

File Loading Order

index.html  - bare bones & script queue
styles.css  - beige #f5f2e8 + 4-colour highlight tokens
config.js   - sample article for first-time users
prompts.js  - prompt templates (tune format here)
api.js      - single POST to cloud function, 30s timeout
download.js - PC = direct download, mobile = "please screenshot"
script.js   - orchestration + progress + toast

Core Snippets (30 lines total)

// api.js
export async function runPipeline(url) {
  const res = await fetch('/server/multi_handler', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ url, stage: 'all' })
  });
  return res.json();   // { markdown, images:[{url,alt}] }
}

// script.js
import { saveAs } from './FileSaver.js';

async function go() {
  const { markdown, images } = await runPipeline(newsUrl.value);
  const html = customMarked(markdown);
  document.querySelector('#report').innerHTML = html;
  const dataUrl = await domtoimage.toPng(document.querySelector('#report'));
  saveAs(dataUrl, `brief-${Date.now()}.png`);
}

Serve it as native ES modules—IE can finally rest in peace.

Hands-On: One Cloud Function, Three APIs

Stack: Alibaba Function Compute + Python 3.10
Single entry multi_handler.py, routed by stage:

  1. scrape – call Unifuns for clean body
  2. analyze – Gemini-2.5-Flash returns markdown with [R]/[Y] tags
  3. draw – Nano Banana for hand-drawn vibe
  4. all – sequential, returns JSON
def handler(event, context):
    body = json.loads(event)
    url, stage = body['url'], body.get('stage', 'all')
    if stage in ('scrape', 'all'):
        text = scrape(url)
    if stage in ('analyze', 'all'):
        md = analyze(text)
    if stage in ('draw', 'all'):
        images = draw(md)
    return {'markdown': md, 'images': images}

Secrets live in env-vars—never reach the browser.

Deep Dive: Bracket-Tag Highlight Protocol

Instead of diffing AI output with the original, force the model to wrap text:
Prompt tail (non-negotiable)
“Wrap key conclusions in [R]...[/R] (≤3 per para). Wrap trends/risks in [Y]...[/Y] (≤1 per para). No nesting.”

One-pass replacement on the front end:

html = html
  .replace(/\[R\](.*?)\[\/R\]/g, '<span class="red">$1</span>')
  .replace(/\[Y\](.*?)\[\/Y\]/g, '<span class="yellow">$1</span>');

Zero nesting, zero length drift—100 articles, zero misses.

Cost & Rate Limit

Provider Price 10k runs cost
302.ai $0.02 /call $200
Alibaba FC 1M calls free/month $0
Self-hosted GPU ≈$300/mo $300

Debounce 5s on the front end + 30s hard timeout on function—wallet safe.

Next Steps: Push the Wheel Further

  1. New theme? Change CSS variables—3 min.
  2. Want Feishu bot? Swap saveAs for a Webhook—30 lines.
  3. Write unit tests or the next request will be “why two cats in the chart?”

FAQ

Q: Must I use 302.ai?
A: Any OpenAI-compatible endpoint works—just change baseURL in api.js.

Q: Mobile export fails?
A: Android WebView hates foreignObject; fall back to “please screenshot”.

Q: Dark-mode illustrations?
A: Replace #f5f2e8 with charcoal in prompts.js; the model follows.

Two Quick Brain-Foods

  1. If we switch to [P] tags, could the same pipeline spit out interactive slides?
  2. When highlight colours exceed four, do humans still read them—should we switch to greyscale + bold?

“The minute the tool went live, my boss stopped asking for briefs—he started asking for weekly reports.”
May this AI hack lift you out of screenshot hell—so you can resume productive slacking.

Exit mobile version