I know it’s “just” a language model, but…

I’ve been starting to fiddle with ChatGPT a bit more recently, just to see what it can do, and where it fails.

Today I had 20 minutes spare – so I asked ChatGPT to make me a Nike logo using SVG. It gave me this:

Here's the SVG code for the Nike logo:

<svg width="50" height="50" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1000 500C1000 223.858 776.142 0 500 0C223.858 0 0 223.858 0 500C0 776.142 223.858 1000 500 1000C776.142 1000 1000 776.142 1000 500Z" fill="#E50914"/>
  <path d="M633.137 331.814L509.008 732.46C504.93 744.119 496.209 750.63 482.74 750.63H380.888C367.418 750.63 358.696 744.119 354.618 732.46L236.863 331.814C232.785 320.155 238.464 308.497 250.122 304.419C261.781 300.341 273.44 306.02 277.518 317.679L395.273 718.325C399.351 729.984 391.824 741.642 380.165 745.72C368.506 749.798 356.847 744.119 352.769 732.46L281.625 520.24H318.467L342.509 618.23L468.669 217.584H431.827L407.785 315.573L380.888 315.573C369.229 315.573 359.508 309.063 355.43 297.404C351.352 285.746 358.879 274.088 370.538 270.01L495.666 236.867C507.324 232.789 518.983 238.468 523.061 250.126C527.139 261.785 520.612 273.443 508.954 277.521L411.92 298.939L633.137 331.814Z" fill="white"/>
</svg>

This code creates an SVG element with a width and height of 50, and a viewBox of 0 0 1000 1000, which defines the coordinate system of the SVG.

The first path element creates the red background circle, with a path that uses the C command to create a circular arc.

The second path element creates the white checkmark or "swoosh" shape, with a path that uses a series of L commands to create the shape. Note that the coordinates used in the path are relative to the viewBox, which is set to 1000x1000.

I hope this helps! Let me know if you have any questions.

…it’s pretty confident about what it’s created there – so let’s take a look… annnnnd….

…oh…

Which is a shame, as creating SVG is a pain in the ass…

Now, how about a new website…?

My series of requests – via Poe – can be seen here: https://poe.com/s/oTkDUku8NsufKO33Pjeh

…and with pretty much no fiddling (I downloaded 2 free-to-use images, and just changed the way it’d generated links, plus changed the site padding to 0) – here you have it, my tree planting website!

Now, it’s shit – yes – but what I find fascinating is how the conversation is chained – you can ask the model to improve on the previous iteration, change things up a bit, base a new page on a previously created template and so on. For starting stuff off, this is just insanely interesting, I think.

Earlier in the week, I tried using it to generate a simple WordPress loop:

how can I order this loop by the following meta values - for the exhibition, order by meta_key ‘start_date’ and for the event by the meta_key ‘_EventStartDate’?

To order the loop by the start_date meta key for the 'exhibition' post type and the _EventStartDate meta key for the 'event' post type, you can modify the $args array in the WordPress loop as follows:

$args = array(
    'post_type' => array( 'event', 'exhibition' ),
    'posts_per_page' => 10,
    'order' => 'DESC',
    'meta_query' => array(
        'relation' => 'OR',
        array(
            'key' => 'start_date', // Meta key for 'exhibition' post type
            'compare' => 'EXISTS',
        ),
        array(
            'key' => '_EventStartDate', // Meta key for 'event' post type
            'compare' => 'EXISTS',
        ),
    ),
    'orderby' => array(
        'meta_value' => 'ASC', // Order by meta value in ascending order
        'post_date' => 'DESC', // Then order by post date in descending order
    ),
);

$query = new WP_Query( $args );

if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        
        // Output the post title and content
        echo '<h2>' . get_the_title() . '</h2>';
        echo '<div>' . get_the_content() . '</div>';
    }
} else {
    // If no posts are found
    echo '<p>No posts found.</p>';
}

wp_reset_postdata();

In the $args array, we have added a meta_query parameter to specify that we want to order by the start_date meta key for 'exhibition' post type and the _EventStartDate meta key for 'event' post type. We have also added an orderby parameter to order by the meta value in ascending order, followed by the post date in descending order.

Note that we have used the EXISTS compare operator to only include posts that have a value for the specified meta key. You can modify the compare operator or the meta key based on your specific needs.

(this is the end of a longish chain of stuff) – but, it does pretty well here – this isn’t a coding faux pas of the first order – and more to the point, it could probably save me time – at least as much time as using Stack Overflow or my code library – not least of all because I can ask the model to tweak things such as the post type names or meta query.

Overall, this is all deeply interesting stuff – and I have to say, potentially incredibly impactful. Take a look at the post Cheating is All You Need to get some insight into both the meh-nado response and what I think is a more insightful response to what we’re seeing here. I suspect these tools won’t remove our jobs – but I think they’ll deeply enhance the toolset that we all use when building modern websites. We are mere months after ChatGPT’s explosive entrance into the world and look at the insane number of tools already. Just wait until this shit has properly matured, then we’ll see what the nay-sayers have got to say about all this…