DEV Community: Scott Windon

I Built a Chrome Extension to Mine Autocomplete Search for Niche Analysis

Scott Windon — Fri, 16 Oct 2026 22:30:00 +0000

Whenever I am researching a new project, product angle, or content idea, the best source of truth is search autocomplete.

Whether it is Google, Amazon, Etsy, or YouTube, the autocomplete dropdown tells you what real people are actually typing into the search bar right now. It is unfiltered user intent.

The problem is doing it manually. You type your seed term, hit space, type a, write down what shows up, delete it, type b, and repeat that across 26 letters and numbers. It gets tedious after about three letters, and most dedicated keyword tools out there are either bloated, expensive, or give you stale third-party database records instead of live results.

I wanted something dead simple that sat right in my browser, ran through A to Z automatically, and gave me clean Markdown so I could dump the results straight into an LLM for niche analysis.

So I built Autocomplete Mining as a Manifest V3 Chrome extension. Here is how it works and how I put it together.

What It Does

The extension docks in Chrome's side panel right next to your active tab.

You open Google, Amazon, Etsy, or YouTube.
The side panel automatically detects the platform.
You enter a seed keyword (e.g. leather wallet or podcast setup).
Hit Mine Now.

The extension systematically types the seed term plus every letter from a to z (and optionally 0 to 9), grabs the live suggestion dropdown on the page, deduplicates the results, and displays progress in real time.

You can run it in suffix mode (keyword + a) or prefix mode (a + keyword), pause or resume whenever you want, and grab the data instantly.

A few interesting problems came up while building it:

1. Hybrid DOM and Background Fallback

Sites render their autocomplete dropdowns differently. On Google, typing directly into the input fires instant input events that spawn role-based listbox elements. But on some networks or heavy SPAs, DOM rendering can lag or get hidden behind overlays.

To solve this, the miner uses a hybrid approach:

It first attempts to focus the search input, dispatch proper input events, and grab the suggestions straight from the DOM.
If the DOM returns empty or fails to mount within a timeout, it falls back to background fetch calls against the platform's suggestion endpoints.

This means the extension never gets stuck on a blank letter.

2. Sanitising Edge-Case Data

Different search bars have weird quirks. For example, YouTube frequently shortens autocomplete suggestions by replacing the typed query with an ellipsis:

... tutorial for beginners
... review 2026

If you extract that text blindly, you end up with useless fragments. The miner sanitises YouTube responses by stripping the leading ellipsis and prepending the actual query back onto the suggestion, giving you full long-tail phrases.

On Etsy, the search box mixes in shop names and "trending now" items that aren't keyword suggestions. Those get filtered out before the deduplication step.

3. Turning Mined Data Into Niche Intelligence

Getting 150 to 250 autocomplete queries is useful, but categorising them manually takes time.

I added an Analyse with AI feature. Once a run finishes, the extension builds a structured prompt that feeds the entire mined dataset into an AI chat (Claude, ChatGPT, Gemini, Perplexity, DeepSeek, Copilot, or Grok).

The prompt automatically tailors its analysis based on the platform:

Google: Maps search intent (informational vs transactional) and identifies featured snippet questions.
Amazon: Identifies product bundles, variations, accessory pairings, and PPC target keywords.
Etsy: Highlights gift angles, personalisation opportunities, and listing tag combinations.
YouTube: Suggests video titles, high-CTR thumbnail hooks, and viewer questions.

One click copies the prompt to your clipboard and opens the chat tab ready to go.

4. Clean Markdown Export

Once mining finishes, you can copy the full output as structured Markdown:

# Autocomplete Mining: "leather wallet"

| Attribute | Details |
| :--- | :--- |
| **Platform** | Amazon |
| **Seed Keyword** | `leather wallet` |
| **Total Unique Suggestions** | 184 |

## A
- leather wallet airtag
- leather wallet slim
- leather wallet men

## B
- leather wallet bifold
- leather wallet black
...

You can also export to CSV or grab a plain newline-separated keyword list.

Wrapping Up

Building this as a native Chrome side panel extension turned out to be the cleanest workflow. It stays out of the way of the page, lets you watch the live suggestions populate, and turns five minutes of manual search bar tapping into a 15-second background task.

Next up, I am looking at adding depth mining (taking the top results and running a second layer of A-Z queries on them automatically).

If you are doing market research or SEO, digging into raw autocomplete data is still one of the fastest ways to find what people actually care about.

Grab the source code or load it unpacked into Chrome from GitHub: swindon/autocomplete-mining-chrome-ext

Turn Gmail into a Free Serverless Email API in 5 Minutes!

Scott Windon — Thu, 15 Oct 2026 03:35:22 +0000

Every side project or simple client build ends up needing the exact same thing: a dead-simple way to send transactional emails.

Whether it is a contact form on a static site, a failure alert from a cron job, or a notification ping from a small internal tool, you almost always need an API endpoint to fire off an email.

The problem is the modern email API landscape for small projects has gotten annoying:

Big providers now want credit cards upfront just to touch their free tier.
Setup involves domain DNS verifications, DKIM, SPF records, and waiting on sandbox approvals.
You end up managing API keys, dependencies, and complex SDKs just to send 5 emails a day.

If you already have a Google account, you can build and host your own secure REST email API for free in about 80 lines of Google Apps Script. No credit card, no server maintenance, and no domain DNS config required.

Here is what it is, how it works, what Google gives you for free, and how to set it up.

What It Is

It is a lightweight Google Apps Script deployed as a serverless Web App that exposes an authenticated HTTP POST endpoint.

When your backend or serverless function sends a JSON payload to the endpoint, the script validates a bearer token stored in your Google Script Properties and sends the email straight from your Gmail or Google Workspace account using Google's native MailApp service.

It supports:

Simple JSON over HTTP POST
Token-based bearer authentication
Plain text and HTML emails
Custom sender display names
CC, BCC, and Reply-To headers
Returning your remaining daily recipient quota directly in the API response

What You Get for Free

Google Apps Script runs entirely on Google's infrastructure at zero cost. You do not need to supply billing details or provision a cloud instance.

Google provides generous daily email sending quotas based on your account type:

Account Type	Daily Email Recipient Quota
Personal Google Account (@gmail.com)	100 recipients / day
Google Workspace (formerly G Suite)	1,500 recipients / day

For a personal project, portfolio contact form, or dev monitoring script, 100 free transactional emails every single day is more than enough. If you run it on an existing Workspace account, 1,500 per day covers plenty of early-stage SaaS applications or internal company tools.

Even better: because the emails are sent directly through Gmail under your authenticated Google account, inbox deliverability is solid right out of the box without configuring custom SMTP servers.

How It Works

The entire API is contained in a single Code.gs file.

Here is the breakdown of the logic:

1. Generating a Secure Token

We store a unique token inside PropertiesService.getScriptProperties(). This acts like an environment variable that persists across executions and is never exposed in the source code or client requests:

const TOKEN_KEY = 'AUTH_TOKEN'

function generateToken() {
  const newToken = Utilities.getUuid() + '-' + Utilities.getUuid()
  PropertiesService.getScriptProperties().setProperty(TOKEN_KEY, newToken)
  Logger.log('Your Auth Token: ' + newToken)
}

Running this function once generates a secure, randomized token and saves it in the script storage.

2. Handling Incoming POST Requests

The entry point for web apps in Google Apps Script is doPost(e). The script parses the incoming JSON, validates the token against the stored property, checks required fields, and sends the message:

function doPost(e) {
  try {
    if (!e.postData || !e.postData.contents) {
      return jsonResponse({ success: false, error: 'Missing request body' }, 400)
    }

    const data = JSON.parse(e.postData.contents)

    // Auth check
    const storedToken = PropertiesService.getScriptProperties().getProperty(TOKEN_KEY)
    if (!storedToken || data.token !== storedToken) {
      return jsonResponse({ success: false, error: 'Invalid or missing auth token' }, 401)
    }

    // Required fields check
    if (!data.to || !data.subject || (!data.body && !data.htmlBody)) {
      return jsonResponse({
        success: false,
        error: 'Missing required fields: to, subject, and body (or htmlBody)'
      }, 400)
    }

    // Build optional parameters
    const options = {}
    if (data.htmlBody) options.htmlBody = data.htmlBody
    if (data.cc) options.cc = data.cc
    if (data.bcc) options.bcc = data.bcc
    if (data.replyTo) options.replyTo = data.replyTo
    if (data.name) options.name = data.name

    // Send the email via Gmail
    MailApp.sendEmail(data.to, data.subject, data.body || '', options)

    // Return success and remaining quota
    return jsonResponse({
      success: true,
      message: 'Email sent successfully',
      remainingQuota: MailApp.getRemainingDailyQuota()
    })

  } catch (err) {
    return jsonResponse({
      success: false,
      error: err.message
    }, 500)
  }
}

function jsonResponse(obj) {
  return ContentService
    .createTextOutput(JSON.stringify(obj, null, 2))
    .setMimeType(ContentService.MimeType.JSON)
}

Notice MailApp.getRemainingDailyQuota(). Returning this in the response lets your calling app monitor your usage without guessing where you stand against Google limits.

5-Minute Setup Guide

Setting this up takes only a few steps:

1. Create the Script

Head over to script.google.com and click New Project.
Replace whatever is in the editor with the Code.gs script above.
Name your project (e.g. Gmail Email API).

2. Generate Your Secret Token

In the Apps Script toolbar, select generateToken from the function dropdown.
Click Run.
Google will ask you to review permissions. Authorize the script to access your Gmail account.
Open the Execution log (View → Execution log) and copy the generated token string. Store this securely in your .env file.

3. Deploy as a Web App

Click Deploy → New deployment (top right).
Choose Web app as the deployment type.
Configure the options:
- Description: Production v1
- Execute as: Me (your email address)
- Who has access: Anyone
Click Deploy and copy your Web app URL. It will look like this:

https://script.google.com/macros/s/AKfycbx.../exec

That is your live REST API endpoint.

Sending an Email

Once deployed, you can trigger emails from any language or framework using a standard HTTP POST request.

cURL

curl -X POST "https://script.google.com/macros/s/YOUR_DEPLOYMENT_ID/exec" \
  -H "Content-Type: application/json" \
  -d '{
    "token": "YOUR_AUTH_TOKEN",
    "to": "dev@example.com",
    "name": "App Monitor",
    "subject": "System Status Update",
    "body": "Daily backup completed with zero errors.",
    "htmlBody": "<h3>System Status Update</h3><p>Daily backup completed with <strong>zero errors</strong>.</p>"
  }'

Node.js / Next.js / Astro

const API_URL = process.env.GMAIL_API_URL
const API_TOKEN = process.env.GMAIL_API_TOKEN

async function sendNotification({ to, subject, body, htmlBody }) {
  const res = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      token: API_TOKEN,
      to,
      subject,
      body,
      htmlBody,
      name: 'My Service'
    })
  })

  const data = await res.json()
  if (!data.success) {
    throw new Error(data.error || 'Failed to send')
  }

  console.log(`Sent! Remaining quota today: ${data.remainingQuota}`)
  return data
}

Python

import os
import requests

def send_email(to, subject, body):
    res = requests.post(
        os.environ["GMAIL_API_URL"],
        json={
            "token": os.environ["GMAIL_API_TOKEN"],
            "to": to,
            "subject": subject,
            "body": body,
        },
        timeout=15,
    )
    res.raise_for_status()
    return res.json()

Practical Use Cases

This setup is ideal when you want reliable transactional delivery without taking on extra SaaS bills or infrastructure overhead:

Static Site Contact Forms: If you run a static site on Netlify, Vercel, Cloudflare Pages, or GitHub Pages, route your form submission to a serverless backend function that hits your Apps Script endpoint.
Build and Deployment Alerts: Hook it into GitHub Actions, GitLab CI, or custom webhooks to notify your team when a scheduled build or release succeeds or fails.
Server Monitoring & Heartbeats: Drop a quick Python script or curl check on a cheap VPS or Raspberry Pi. If a service drops offline or disk usage hits 90%, fire an alert to your personal inbox.
Internal Micro-Tools & Staging Environments: Great for dev and staging environments where you need real emails to test workflows without burning paid quotas on your production email provider.
Database Backup Reports: Trigger a daily status summary from your Postgres backup scripts.

Limitations and Gotchas to Keep in Mind

A quick reminder on practical constraints:

Security rule: Always keep your AUTH_TOKEN on a server or behind an edge function. Never put the token inside client-side JavaScript or a public repo. Anyone who gets that token can send email through your account.
Attachments: This basic script handles text and HTML bodies. If you need PDF invoices or zip attachments, you would need to extend the script to accept base64-encoded file data and pass them as blobs to MailApp.
HTTP Status Codes in Apps Script: Google Apps Script web apps return HTTP 200 or 302 redirects for most ContentService text outputs. The script passes error status codes in jsonResponse, but you should always inspect the success: true/false key in the returned JSON body rather than relying strictly on the HTTP status code.
Bulk Marketing: Do not use this for newsletters or cold outreach. Google will throttle or flag accounts that violate standard Gmail usage policies. Keep this strictly for transactional notifications and alerts.

Wrap Up

If you are sick of configuring third-party email providers for tiny projects, Google Apps Script gives you a dependable, completely free alternative that you can roll out in five minutes.

Check out the full repository and documentation here:

👉 swindon/gmail-email-api on GitHub

Feel free to star it, fork it, or adapt the payload to your own workflow.

How I Built A Game to Help My Kids Learn

Scott Windon — Tue, 19 May 2026 12:01:36 +0000

So, my kids' math teacher sent home a YouTube video on place values and ascending order. It was good, but watching it wasn't doing much. So over the weekend I built them a game instead.

It's called Tumbling Towers — source on GitHub.

The Concept

You're dealt two random cards, say 2 and 7. You can swap them to form 27 or 72, then drop that number into an empty slot in a tower. The rule: all blocks must be in ascending order from bottom to top. If you can't place either combination without breaking that order, the tower falls and the game ends.

As levels go on, the tower gets taller. You start having to think about spacing and leave enough room between numbers, or you'll paint yourself into a corner. It's one thing to know 72 > 27. It's another to decide where 27 belongs when you've already got 15 at the bottom and 60 in the middle.

The Stack

I wanted it working fast, so I used what I know:

React 19 & Vite 6
TypeScript
Tailwind CSS (v4): Went with a retro pixel-art look and custom utility classes like .pixel-border without leaving the component
Motion: When the tower falls, the blocks scatter. Both kids cheered the first time it happened, which told me the animation was worth it!
Local Storage for a high-score tracker

The Logic

The core validation checks that a block maintains ascending order when placed:

function isValidPlacement(tower: (number | null)[], index: number, number: number) {
  if (tower[index] !== null) return false;

  for (let i = 0; i < index; i++) {
    if (tower[i] !== null && tower[i] >= number) return false;
  }

  for (let i = index + 1; i < tower.length; i++) {
    if (tower[i] !== null && tower[i] <= number) return false;
  }

  return true;
}

Before each turn, we also check whether the game is already over, testing both digit combinations against every empty slot:

function canPlaceAnywhere(tower: (number | null)[], digits: [number, number]) {
  const num1 = digits[0] * 10 + digits[1];
  const num2 = digits[1] * 10 + digits[0];

  for (let i = 0; i < tower.length; i++) {
    if (tower[i] === null) {
      if (isValidPlacement(tower, i, num1) || isValidPlacement(tower, i, num2)) {
        return true;
      }
    }
  }
  return false;
}

The Result

They've been playing it a lot. The thing I wasn't expecting: they started speaking their reasoning out loud. "I shouldn't make 72. I only have one slot left at the top. I'll make 27 and put it near the bottom." That's more than I got from the video.

Play Tumbling Towers here: https://swindon.github.io/tumbling-towers/

Have you ever built something to teach your kids a concept? I'd love to hear about it in the comments. And if you found this useful, I drink too much coffee ☕

Turn ChatGPT into Copilot

Scott Windon — Wed, 19 Apr 2023 14:10:21 +0000

Use this simple and easy prompt to start using ChatGPT as an alternative to Copilot.

You are a function autocomplete module, I will use my IDE to start writting a function and you will complete the function name, parameters, casting, function logic and return 3 options as md code blocks. Do not give explinations into each function, simply return the code blocks and nothing more. I will start with the syntax followed by the function name eg "php: [function name]"

Example:
php: calculateDay

Example return:
```php
function calculateDays($date) {
// Convert the given date to a Unix timestamp
$timestamp = strtotime($date);

// Calculate the difference in seconds between the given date and today
$differenceInSeconds = time() - $timestamp;

// Convert the difference in seconds to days
$days = floor($differenceInSeconds / (60 * 60 * 24));

return $days;
}
```
```php
function calculateDaysThisYear($date) {
// Convert the given date to a Unix timestamp
$timestamp = strtotime($date);

// Get the year of the given date
$year = date('Y', $timestamp);

// Calculate the Unix timestamp of the start of the year
$startOfYearTimestamp = strtotime("{$year}-01-01");

// Calculate the difference in seconds between the given date and the start of the year
$differenceInSeconds = $timestamp - $startOfYearTimestamp;

// Convert the difference in seconds to days
$days = floor($differenceInSeconds / (60 * 60 * 24));

return $days;
}
```
```php
function calculateDaysBetweenDates($date1, $date2) {
// Convert the dates to Unix timestamps
$timestamp1 = strtotime($date1);
$timestamp2 = strtotime($date2);

// Calculate the difference in seconds
$diff = abs($timestamp2 - $timestamp1);

// Convert the difference to days
$days = floor($diff / 86400);

return $days;
}
```

Reply with "lets get started" if you understand what is required of you.

Start and new chat and paste the above prompt into ChatGPT, then simply use the "[syntax] prompt: [your function syntax]".

Examples:

python: sayHel

def sayHello():
    print("Hello!")

def sayHello(name):
    print(f"Hello, {name}!")

def sayHello(name, greeting="Hello"):
    print(f"{greeting}, {name}!")

js: getDat

function getDate() {
  return new Date();
}

function getDate(format = "timestamp") {
  const date = new Date();
  if (format === "timestamp") {
    return date.getTime();
  } else if (format === "iso") {
    return date.toISOString();
  } else {
    return date.toLocaleDateString();
  }
}

function getDate(year, month, day) {
  return new Date(year, month - 1, day);
}

sh: mergetxtfiles

function mergetxtfiles() {
  cat *.txt > merged.txt
}

function mergetxtfiles() {
  for file in *.txt; do
    cat "$file" >> merged.txt
  done
}

function mergetxtfiles() {
  output_file="$1"
  shift
  cat "$@" > "$output_file"
}

Obviously this doesn't mean the code will be perfect and doesn't mean it'll fit your needs but it's cool to think you can leverage the OpenAI system and ChatGPT to help.

I used ChatGPT to do my job for me!

Scott Windon — Wed, 18 Jan 2023 11:34:54 +0000

So I'm sure you already know about ChatGPT by now and what it can do, I've heard a lot about it myself and have played around which it's capabilities, so I though hey let's see if it can do my job for me?!

As an experiment I went onto UpWork and found a random job where a developer would be tasked with designing a user-friendly fencing calculator that could quickly and accurately calculate the materials needed for a fencing project. The calculator needed to take into account the length of the fence, the height of the fence, and the type of fencing material. They also wanted the calculator to be user-friendly and easy to understand, with clear instructions.

I started by telling ChatGPT what I wanted from it, this helps with priming the AI so it knows what to look for:

I then copied and pasted the provided brief of the project into ChatGPT and asked for an estimated approach, timings:

To my surprise, ChatGPT was able to provide me with an estimated approach, which included using modern web technologies such as HTML, CSS, and JavaScript, and making the calculator compatible with most web browsers and mobile devices. It also provided me with an estimated timeline of 4-6 weeks for the project (although I think this was maybe too much).

I then asked ChatGPT to provide the code in VueJS for the calculator, which it did with minimal errors:

After the code was generated it did state that the materialTypes object was missing and needed to be added plus a few other small things.

I then copied out the code and made a few small changes, after this I pasted the newer code back into the chat and asked it to add TailwindCSS classes to the elements, which it did quickly.

All in all this process took about 10-15 minutes to complete, I was left with a clean looking calculator which worked and could easily be used as a prototype. If I was to actually have made a proposal for the job I could have stated that I would supply a prototype within 24 hours which I'm sure would be very appealing to clients.

Obviously I didn't actually get ChatGPT to "do my job for me" but it does go to show that it can be used (even though didn't get everything perfect but it was 99% there) to get a very quick module, built to the spec which was provided and gave me time to sit back and have a beer.

Here's the code which was built by ChatGPT:
https://codepen.io/ScottWindon/pen/eYjGaXw

Using Google Vision to read invoice receipts in a more structured format

Scott Windon — Wed, 18 Jan 2023 01:35:16 +0000

I was recently tasked with extracting text from an invoice using the Google Vision API.

I've used Google Vision before however mainly for pages from a book where text is simply top to bottom and straight lines which were left to right. As a standard Vision goes a great job of this, however, I found when reading an invoice which would have (for instance) the product purchased on the left and the price on the right of the image, when Vision returned the raw response it would take the right hand side "columns" and place them at the bottom of the text and this would leave the response unstructured and hard to read in plain text.

The challenge I had was that my client needed the data as structured as possible to ensure data integrity.

I thought I would share my experience and the approach I took to accomplish this task.

The first step in the process was to read the image with Google Vision. This required converting the image to a base64 encoded string so that it could be sent in the request to the API, I then used the Guzzle HTTP client to send a POST request to the Google Vision API:

// Get image contents as base64
$image_base64 = base64_encode(file_get_contents("path/to/your/image.jpg"));

// Use Guzzle to get the OCR data
$client = new \GuzzleHttp\Client();
$yourApiKey = "YOUR API KEY HERE";
$response = $client->request('POST', "https://vision.googleapis.com/v1/images:annotate?key={$yourApiKey}", [
    'json' => [
        'requests' => [
            [
                'image' => [
                    'content' => $image_base64
                ],
                'features' => [
                    [
                        'type' => 'TEXT_DETECTION',
                        'maxResults' => 1,
                    ]
                ]
            ]
        ]
    ],
]);

// Get the response JSON from Vision
$response = json_decode( (string) $response->getBody(), 1 );

Once I received the response from the API, I decoded the JSON and extracted the text annotations from the data.

Next, I needed to extract the vertices for the whole receipt from the textAnnotations array and calculate the "center" of the receipt text. I accomplished this by using array_reduce to iterate through the $centervertices array and sum the x and y value:

// Get textAnnotations
$textAnnotations = $response['responses'][0]['textAnnotations'];

// Get verticies for the whole receipt
$centervertices = $textAnnotations[0]['boundingPoly']['vertices'];

// Calculate the "center" of the receipt text
$centerA = [
    "x" => array_reduce($centervertices, function($carry, $item) {
        return $carry + $item['x'];
    })/count($centervertices),
    "y" => array_reduce($centervertices, function($carry, $item) {
        return $carry + $item['y'];
    })/count($centervertices)
];

Then I needed to extract the vertices for the longest string from the textAnnotations array, calculate the "center" of the longest string, and calculate the angle the receipt is running on. I used the array_reduce function to extract the longest string and atan2 and pi function to calculate the angle.

// Get vertices for the longest string
$vertices = array_reduce(array_slice($textAnnotations,1), function($carry, $item) {
    return strlen($item['description']) > strlen($carry['description']) ? $item : $carry;
})['boundingPoly']['vertices'];

// Calculate the "center" of the longest string
$centerB = [
    "x" => array_reduce($vertices, function($carry, $item) {
        return $carry + $item['x'];
    })/count($vertices),
    "y" => array_reduce($vertices, function($carry, $item) {
        return $carry + $item['y'];
    })/count($vertices)
];

// Calculate the angle the receipt is running
$xDiff = $vertices[0]["x"] - $centerB["x"];
$yDiff = $vertices[0]["y"] - $centerB["y"];
$angle = (atan2($yDiff, $xDiff) * 180 / pi()) + 180;
$angle_to_rotate = -(pi() * ($angle-5) / 180);

The final steps were to re-sort the lines of text by remapping and sorting the rows and words after fixing the rotation. I used the array_map function to update the coordinates of the vertices and adding a new key 'lineSort' to each row. Then, I used usort function to sort the array based on the 'lineSort' key. I did the same for the words adding a new key 'columnSort', then using usort to sort the array and then imploded using a space:

// Remap/sort the rows after fixing rotation
$textAnnotationsSorted = array_map(function($row) use ($angle,$angle_to_rotate,$centerA) {
    $vertices = $row['boundingPoly']['vertices'];
    $new_vertices = array();
    foreach ($vertices as $vertex) {
        $x = $vertex["x"] - $centerA["x"];
        $y = $vertex["y"] - $centerA["y"];
        $new_x = ($x * cos($angle_to_rotate)) - ($y * sin($angle_to_rotate)) + $centerA["x"];
        $new_y = ($x * sin($angle_to_rotate)) + ($y * cos($angle_to_rotate)) + $centerA["y"];
        $new_vertices[] = ["x" => $new_x, "y" => $new_y];
    }
    $row['boundingPoly']['vertices'] = $new_vertices;
    $row['lineSort'] = $row['boundingPoly']['vertices'][0]['y'];
    return $row;
}, array_slice($textAnnotations,1));
usort($textAnnotationsSorted, function($a, $b) {
    return $a['lineSort'] - $b['lineSort'];
});
$textAnnotationsSorted = array_values($textAnnotationsSorted);

// Setup faux rows
$newRows = [];
$index = 0;

// Setup base Y vertical
$curY = $textAnnotationsSorted[0]['boundingPoly']['vertices'][0]['y'];

// Loop the sorted rows and append faux rows
foreach( array_values($textAnnotationsSorted) as $v ) {
    if( $v['boundingPoly']['vertices'][0]['y'] > $curY + 15) {
        $index++;
    }
    if( $v['boundingPoly']['vertices'][0]['y'] < $curY - 15 ) {
        $index--;
    }
    $newRows[$index][] = $v;
    $curY = $v['boundingPoly']['vertices'][0]['y'];
}

// Loop faux rows and sort columns
foreach( $newRows as &$row ) {
    $row = array_map(function($v){
        $v['columnSort'] = $v['boundingPoly']['vertices'][0]['x'];
        return $v;
    }, $row);
    usort($row, function($a, $b) {
        return $a['columnSort'] - $b['columnSort'];
    });
    $row = implode(" ", array_map(function($item) {
        return $item['description'];
    }, $row));
}

I was then able to echo out the reformatted OCR data:

// Echo the newly orders OCR data
echo implode("\n", $newRows);

I hope this tutorial helps others understand the process I took to return a more human readable OCR response.

If you like this post please show some support!

Buy me a coffee

Random Code Generator

Scott Windon — Sun, 20 Feb 2022 10:33:09 +0000

Wanted a nice and simple PHP class which could generate random codes. After looking at multiple libraries I found that sometimes it's best done yourself.

The final class can either generate a single code or an array of codes based on the parameters you set.

https://github.com/swindon/code-generator

Example
Generates 8 character long string

(new CodeGenerator)->generate(8);
// output: 4CF9O7XP

Show some support!

Buy me a coffee

AlpineJS: Markdown Editor

Scott Windon — Tue, 14 Dec 2021 06:50:23 +0000

Just a simple markdown editor with low level support.