Coder Legion - Recent posts tagged js

Transformers.js: Running AI Models Directly in the Browser

Mon, 12 Oct 2026 08:17:37 +0000

Transformers.js is an open-source JavaScript library developed by Hugging Face that allows you to run pretrained machine learning models directly in web browsers and JavaScript runtimes such as Node.js, Deno, and Bun.

It supports a variety of tasks, including text classification, sentiment analysis, image classification, audio processing, and feature extraction. It also allows developers to use many pretrained models from the Hugging Face Hub without having to build an inference backend from scratch.

One of the most interesting features of Transformers.js is that models can run locally in the browser, depending on the model and available hardware. This can reduce reliance on external inference APIs and allow certain inputs to be processed on the user's device.

How Does Transformers.js Work?

Transformers.js provides a pipeline() API that simplifies loading a model and running inference for a particular task.

For example, a text-classification pipeline can analyze a sentence and return a prediction:

import { pipeline } from '@huggingface/transformers';

const classifier = await pipeline(
  'sentiment-analysis',
  'Xenova/distilbert-base-uncased-finetuned-sst-2-english'
);

const result = await classifier(
  'Transformers.js makes AI more accessible to JavaScript developers.'
);

console.log(result);

The pipeline() function loads the selected model and prepares it for the specified task. You can then pass input to the pipeline and receive the model's predictions.

The first execution may take some time because the model files need to be downloaded. Performance depends on the model size, runtime, and available hardware.

What Can You Build With It?

Transformers.js supports a range of machine learning tasks, including:

Text: sentiment analysis, text classification, and feature extraction.
Images: image classification and other supported vision tasks.
Audio: audio classification and speech-related tasks.
Embeddings: converting text and other supported inputs into numerical representations for downstream applications.

The exact tasks and models available depend on the library version and model compatibility.

Things to Consider

Running models locally has advantages, but it also comes with limitations. Model files can be large, inference may be slow on some devices, and not every model is suitable for browser execution.

Local inference can reduce the need to send inputs to an external service, but it doesn't automatically make an entire application private or offline. Those properties also depend on how the application handles data and loads its resources.

My Experience With Transformers.js

I explored Transformers.js while building EchoQuest, a small project that uses a pretrained audio-classification model to analyze recorded sounds in the browser.

This gave me practical experience with model loading, audio preprocessing, and integrating machine learning into a JavaScript application without making an external inference API a core dependency.

For JavaScript developers interested in machine learning, Transformers.js is a useful library to explore because it makes pretrained models accessible within familiar web development workflows.

Resources & Further Reading

EchoQuest:https://echoquest-qk1i.onrender.com/

Documentation: https://huggingface.co/docs/transformers.js/index

GitHub: https://github.com/huggingface/transformers.js

Helpful Article: An Introduction to Transformers.js

Image credit: Worldline Tech — An Introduction to Transformers.js

Intercepting Route In Next.js

Sat, 19 Sep 2026 10:14:13 +0000

Introduction

Intercepting route is a technique in Next.js that allows you to display a route from another part of your application, within the same current layout, without requiring the user to switch to a different context.

Intercepting route is always used with parallel route to build modals.

For example, when you click on an image on Instagram, what happens is:

1- A modal appears containing the image and its details, and the feed continues to run in the background.

2- The link changes from https://www.instagram.com to https://www.instagram.com/p/DYpin6_DOsV/

Intercepting route allows for the construction of this exact model: one link, and two different views depending on the user's approach.

Behind the Scenes

What happens exactly is that Next.js intercepts the navigation request for the given page, and instead of displaying the page, it passes it to a specific @slot, which is the Parallel Route

Folder Structure

The intercept route file is defined by creating a file that begins with (.), (..), or (..)(..), (...) where:

(.) is used to match a segment at the same level.

(..) is used to match a segment one level above.

(..)(..) is used to match a segment at two levels above.

(...) is used to match a segment at the root level. The importance of matching is evident when a user opens a new window or shares a link; the modal will not open, but the result will appear on a full standalone page. The intercept segment must match the full standalone page at the same level.

It should also be noted that the intercept route (...) relies on the route segment for matching, not the file system. The segment is part of the URL, while the @folder in the Parallel Routeis not considered part of the segment but rather a file system.

The images below illustrate the file structure :

Sources

1- Next.js

Poople Game

Mon, 15 Jun 2026 05:36:21 +0000

Wordle proved that one small puzzle a day, shared by everyone and finished in about a minute, can quietly become a habit. Poople takes that same one-a-day rhythm and points it at a word ladder. You start from a 4-letter word and change one letter at a time until you reach POOP. Every rung along the way has to be a real 4-letter word, and the fewer steps you take, the better your score.

The whole thing is free, runs in the browser, and needs no account. Your streak and stats live in your own browser, so there is nothing to sign up for and nothing to install. Open the page, solve the puzzle, copy a spoiler-free grid, and get on with your day.

The small problem it solves

Most of us already keep a little stack of daily puzzles we open with coffee. The friction shows up fast, though. Some games want an account before you can play. Some bury the puzzle under newsletters and pop-ups. Some take longer than the coffee does. Poople is built to be the opposite of all that. The page is light, the rules fit in one sentence, and a typical day takes under a minute.

How it works

A word ladder is an old idea. Lewis Carroll wrote about it in 1877 and called it Doublets. You connect two words by changing one letter at a time while keeping a valid word at every step. In Poople the destination is always POOP, which gives the game its name and a fixed target you can plan around. A new puzzle goes live every day at 08:00 UTC, and every player in the world gets the same starting word that day.

What makes it satisfying is the planning. You are steering through a graph of words, looking a few moves ahead, and trying to land on the shortest route. It rewards a different muscle than a guessing game does, closer to finding a path through a maze than to filling in blanks.

A solve looks like this

Say the day's word is COAT.

COAT becomes COAL
COAL becomes COOL
COOL becomes COOP
COOP becomes POOP

That path takes four steps. There may be an even shorter route hiding in the dictionary, and par is that shortest possible path for the day. Matching par is the result to chase, and hunting for it is where the game gets its hooks into you.

Three ways to play

The daily puzzle is the main event. One shared word ladder for the whole world, refreshed every morning, with a spoiler-free grid you can post when you finish.

Poople Unlimited is a free practice mode. Press shuffle for a fresh random starting word whenever you want, with no wait for the next day. It keeps your daily streak untouched, so it is a relaxed place to warm up before the daily puzzle or to keep going after you have solved it.

Poople Answers is the archive. Once a puzzle closes, its full solution is published the next day. Each entry shows the verified shortest path, progressive hints you can reveal one at a time, short definitions for the bridge words along the way, and an in-page solver that finds the shortest route to POOP from any 4-letter word you type in.

Details that make the habit stick

Spoiler-free sharing. Copy a small grid that shows your path without giving away the words you used, in the same spirit as the Wordle share.

Local stats. Wins, best streak, and average steps are saved on your device, so your history follows your browser instead of a login.

Keyboard and touch. Type on a physical keyboard or tap the on-screen keys, on desktop or mobile.

Par scoring. Every puzzle has a known shortest path, so there is always a clear goal beyond simply reaching POOP.

Fast and clean. The page is light and free of clutter, so it loads quickly and starts the moment it opens.

On price there is not much to cover. Poople is free, there is no account wall, and there is nothing to download. The daily game stays the daily game, and the practice mode and the archive sit alongside it for anyone who wants more.

Stack notes for the engineers in the room

Poople runs on Next.js 15 with the App Router, deployed to Cloudflare through OpenNext. Data lives in Cloudflare D1, which is SQLite, with Drizzle ORM on top, and the runtime leans on Cloudflare Workers, Durable Objects, KV, and R2. Copy and translations go through next-intl.

The part I had the most fun building is the answers pipeline. The day's solution is never written by hand. A breadth-first search over the graph of every valid 4-letter word computes par and a verified shortest path, so each archived answer comes from one deterministic source of truth. A Cloudflare cron trigger publishes the previous day's answer every morning, and at the same time it generates the short bridge-word definitions and a one-line note for that puzzle through an LLM via OpenRouter, then stores them in D1 so the pages stay static and cheap to serve. Each past puzzle gets its own page at /answer/{number}-{word}, statically generated with incremental static regeneration, which turns the archive into a clean programmatic surface that grows by one page a day.

On the roadmap: more variety in starting words, an optional harder mode, and a small public endpoint for the daily puzzle so people can build their own front-ends and bots around it.

Try it

Play today's puzzle at https://pooplegame.com. The practice mode is at https://pooplegame.com/unlimited, and the answers archive is at https://pooplegame.com/answer.

If you give it a try, I would love to hear two things. First, when you get stuck, what is your instinct, do you swap the vowel first or work backward from POOP? Second, for the developers here, would a daily-puzzle API be worth building out? Feedback and bug reports are very welcome.

4 ways to query GeoJSON data in MongoDB

Tue, 25 Mar 2025 23:51:49 +0000

Have you ever heard of GeoJSON? If not, let me explain it to you.
GeoJSON is a format for encoding a variety of geographic data structures created and published in 2008.

Since 2015, it has an official specification created by its original authors with the collaboration of the Internet Engineering Task Force (IETF).

According to this specification:

GeoJSON is a geospatial data interchange format based on JavaScript Object Notation (JSON). It defines several types of JSON objects and the manner in which they are combined to represent data about geographic features, their properties, and their spatial extents. GeoJSON uses a geographic coordinate reference system, World Geodetic System 1984, and units of decimal degrees.

It is a format widely used across JSON-based applications to read, manipulate and compare geospatial data.

Several third-party map libraries provide GeoJSON support for front-end applications, some of them are:

Leaflet
Openlayers
Google Maps

Considering that now you know a little bit more about GeoJSON, let´s move to the manipulation bit.
When building maps for a web application, it is common to deal with something we call "Layers". According to Google:

Layers are objects on the map that consist of one or more separate items but are manipulated as a single unit. Layers generally reflect collections of objects that you add on top of the map to designate a common association.

A Layer can have different formats and one of them is GeoJSON.

So, when working with more than one layer in a map, it is common to perform operations between them to determine their geospatial relationship within a context. By making use of geospatial operations, it is possible to determine, for example, if:

i) a Point lies within a Polygon;
ii) a Polygon intersects another Polygon;
iii) a Line crosses a circle;
iv) a Point is part of a Line;

But, depending on the size of the involved layers, manipulating or comparing them directly with JavaScript, in the browser, might cause performance issues since the memory usage tends to increase even more if they need to be rendered on a map.

A good solution for this case is to perform any required geospatial operation directly in the database. Most of the database engines provide functions to query GeoJSON and one of them is MongoDB which, by the way, has been pretty optimized for spatial operations since version 3.2.

These are some of the most basic geospatial structures that MongoDB supports:

Point

{
  "type": "Point",
  "coordinates": [
    -42.53700256347656,
    -22.28496664336935
   ]
}

Linestring

{
  "type": "LineString",
  "coordinates": [
    [
      -43.17626953125,
      -22.91792293614603
    ],
    [
      -40.2978515625,
      -20.262197124246534
    ]
  ]
}

Polygon

{
  "type": "Polygon",
  "coordinates": [
    [
      [
        -42.94006347656249,
        -22.649502094242195
      ],
      [
        -42.16552734375,
        -22.649502094242195
      ],
      [
        -42.16552734375,
        -21.968519331082298
      ],
      [
        -42.94006347656249,
        -21.968519331082298
      ],
      [
        -42.94006347656249,
        -22.649502094242195
      ]
    ]
  ]
}

Geometry Collection

{
  type: "GeometryCollection",
  geometries: [
    {
      "type": "Point",
      "coordinates": [
        -42.53700256347656,
        -22.28496664336935
      ]
    },
    {
      "type": "LineString",
      "coordinates": [
        [
          -43.17626953125,
          -22.91792293614603
        ],
        [
          -40.2978515625,
          -20.262197124246534
        ]
      ]
    },
    {
      "type": "Polygon",
      "coordinates": [
        [
          [
            -42.94006347656249,
            -22.649502094242195
          ],
          [
            -42.16552734375,
            -22.649502094242195
          ],
          [
            -42.16552734375,
            -21.968519331082298
          ],
          [
            -42.94006347656249,
            -21.968519331082298
          ],
          [
            -42.94006347656249,
            -22.649502094242195
          ]
        ]
      ]
    }
  ]
}

Here you can find the mentioned examples plotted in a map using geojson.io.

Now, I'm going to show you some basic operations that can be performed directly in a Mongo database assuming that there is already a collection named geospatial with the proper indexes set up.

To ease the query implementation, I recommend setting the GeoJSON object inside a property of your document. In the following example, the property "location" represents the geometry:

{
  "$id": "342j3ug4kj23b4k234"
  "location": {
    "type": "Point",
    "coordinates": [ -22, -42 ]
  }
}

1. Finding geometries that intersect with the given Point

db.geospatial.find({
  location: {
    $geoIntersects: {
     $geometry: {
       type: "Point",
       coordinates: [
         -42.53700256347656,
         -22.28496664336935
        ]
      }
    }
  }
})

This query will retrieve all geometries with which the given Point intersects. This example shows a query passing a Point as a parameter, but it supports any GeoJSON Object

2. Finding all geometries that lie within a given geometry

db.geospatial.find({
  location: {
    $geoWithin: {
      $geometry: {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -42.94006347656249,
              -22.649502094242195
            ],
            [
              -42.16552734375,
              -22.649502094242195
            ],
            [
              -42.16552734375,
              -21.968519331082298
            ],
            [
              -42.94006347656249,
              -21.968519331082298
            ],
            [
              -42.94006347656249,
              -22.649502094242195
            ]
          ]
        ]
      }
  }
    }
})

This query will retrieve all geometries that are inside the given Polygon and it is useful to look for all points that are placed within an area. For example: let's say you'd like to find all restaurants in a given city.

3. Finding geometries within a number of miles from a given point

db.geospatial.find({
  location: {
    $geoWithin: {
      $centerSphere: [
        [ -42.53700256347656, -22.28496664336935 ],
        5 / 3963.2
      ]
    }
  }
})

Using $centerSphere, MongoDB will "draw" a circle with a pre-defined size from a given point. In this case, the query will retrieve all geometries that are up to 5 miles to the coordinates provided.
It is important to mention that, in this case, the geometries will be retrieved unordered.

4. Finding ordered geometries within a number of miles from a given point

const METERS_PER_MILE = 1609.34

db.geospatial.find({
  location: {
    $nearSphere: {
      $geometry: {
        type: "Point",
        coordinates: [ -73.93414657, 40.82302903 ]
      },
      $maxDistance: 5 * 1609.34
    }
  }
})

This query will retrieve the same result as the previous one, but order from the nearest to the farthest.
Check this page for more information on distance unit conversion.

GeoJSON is the most used format to represent Geospatial data in web applications. It is fully supported by the most popular third-party map rendering libraries and database engines.

This article demonstrated some basic concepts and how to implement some of the spatial operations provided by MongoDB.

I hope you've liked it.
Please, share and comment... any feedback is welcome!