DEV Community: Scott Windon

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.