http://coldfusion.com logo
Join Slack
Powered by
I'm quite impressed by chatGPT & GPT-4. I just...
# water-cooler
j
I'm quite impressed by chatGPT & GPT-4. I just fed it the text part below, and it came up with two working options, depending on if I selected chatGPT3.5 or GPT-4. For comparison, I would have to split this up considerably if searching for the same question on stackoverflow for example, and here I wouldn't pose such a "complex" task at it amounts to someone else doing ten minutes or more of work unpaid. See thread for text input and the answers&codes returned.
✅ 1
👍🏼 1
👍 1
My task as entered into the openAI chat: "Make a AlpineJS and Tailwind CSS list showing 3 products with the first column being a numeric input field named productQuantity with a default of zero, the second column is text only without a user input and showing a random PRODUCT NAME (make one up that sounds like a technical motor part) and the third column (named productPrice) displays a price of ONE unit, in this example, the first product (line) is priced at 50, the second product (line) is priced at 100, the third product (line) is priced at 250. The last (fourth) column, should be a summary column named 'subtotal' which calculates column 1 multiplied by the unit price. In this example, pre-fill the second product line productQuantity with the number 4, thereby bringing the fourth column of that line to a subtotal of 200. Please advise on the AlpineJS code after completing the code."
GPT-3.5 returns this: "Here's an example code that should meet your requirements:"
Copy code
<div x-data="{ products: [
                    { name: 'Motor Control Unit', price: 50, quantity: 0 },
                    { name: 'Power Distribution Module', price: 100, quantity: 4 },
                    { name: 'Ignition Coil Pack', price: 250, quantity: 0 }
                  ]}">
  <table>
    <thead>
      <tr>
        <th>Quantity</th>
        <th>Product Name</th>
        <th>Price</th>
        <th>Subtotal</th>
      </tr>
    </thead>
    <tbody>
      <template x-for="(product, index) in products" :key="index">
        <tr>
          <td><input type="number" min="0" x-model="product.quantity"></td>
          <td x-text="product.name"></td>
          <td x-text="'$'+product.price"></td>
          <td x-text="'$'+(product.quantity * product.price)"></td>
        </tr>
      </template>
    </tbody>
  </table>
</div>
The code uses AlpineJS to create a data object named 
products
that contains an array of objects representing each product, including its name, price, and quantity. The HTML table is dynamically generated using a 
x-for
loop to iterate over each product object and generate a new row for each. The first column contains an HTML 
input
element with a type of "number" and a minimum value of 0. It is bound to the 
quantity
property of the current product object using 
x-model
. The second column simply displays the product name using 
x-text
. The third column displays the product price with a dollar sign using 
x-text
and concatenating the string with the 
price
property of the current product object. The fourth column displays the subtotal by multiplying the 
quantity
and 
price
properties of the current product object and then displaying the result with a dollar sign using 
x-text
. Note that the second product object in the 
products
array has a pre-filled quantity of 4. This will automatically update the subtotal for that row when the page is loaded. I hope this helps! Let me know if you have any questions.
r
It truly is like having multiple junior to mid-level assistants based on speed and accuracy.
👍 1
j
GPT-4 outputs this: Here is the code for the AlpineJS and Tailwind CSS list showing the 3 products as you described:
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AlpineJS and Tailwind CSS Product List</title>
    <link href="<https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css>" rel="stylesheet">
    <script src="<https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js>" defer></script>
</head>
<body>
    <div x-data="productList()" class="container mx-auto py-10">
        <table class="table-auto w-full">
            <thead>
                <tr>
                    <th class="border px-4 py-2">Product Quantity</th>
                    <th class="border px-4 py-2">Product Name</th>
                    <th class="border px-4 py-2">Product Price</th>
                    <th class="border px-4 py-2">Subtotal</th>
                </tr>
            </thead>
            <tbody>
                <template x-for="(product, index) in products" :key="index">
                    <tr>
                        <td class="border px-4 py-2">
                            <input x-model="product.quantity" @input="calculateSubtotal(product)" type="number" min="0" class="w-full">
                        </td>
                        <td class="border px-4 py-2" x-text="product.name"></td>
                        <td class="border px-4 py-2" x-text="product.price"></td>
                        <td class="border px-4 py-2" x-text="product.subtotal"></td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    <script>
        function productList() {
            return {
                products: [
                    {
                        quantity: 0,
                        name: 'Axial Flux Capacitor',
                        price: 50,
                        subtotal: 0
                    },
                    {
                        quantity: 4,
                        name: 'Rapid Torque Converter',
                        price: 100,
                        subtotal: 400
                    },
                    {
                        quantity: 0,
                        name: 'Vortex Harmonic Stabilizer',
                        price: 250,
                        subtotal: 0
                    }
                ],
                calculateSubtotal(product) {
                    product.subtotal = product.quantity * product.price;
                },
                init() {
                    this.products.forEach(product => this.calculateSubtotal(product));
                }
            }
        }
    </script>
</body>
</html>
"This code creates an HTML file with AlpineJS and Tailwind CSS. The AlpineJS component manages the state of the products, their quantities, and their subtotals. The productList function initializes the products and calculates the subtotals based on the quantities and prices. The 
calculateSubtotal
function is called whenever the input value changes, which updates the respective product's subtotal."
It's definitely way faster than fiverr, it's cheaper, and it speaks English everytime. And that's before we even go into MidJourney, my goodness that is amazing... even if you have zero interest in it (now), just join the Discord channel and see what people are making. Insane to see it spit out four stunning versions of "a lynx with a magnifying glas in the forest looking for tracks", "a seal on a rock" or "a mechanic working in a dusty garage wearing a blue overall and fixing a red car". I fed it a picture of a red wooden house I had taken and asked it to "place that house near a stream or lake" - mindblown. 3D rendering and storyboarding illustrators are about to go extinct.
d
That's actually pretty cool. You didn't tell it anything about Alpine or Tailwind, it "knew" enough already, right? Anyone tried a semi-equivalent thing in CF or ColdBox?
s
I asked it to write a webhook handler for Stripe in a Coldbox handler format. It did a pretty basic layout but it was largely correct. Very much on the level of 'going from zero idea to some inspiration' though
we already had a working one so we weren't gonna use it, just wanted to see if it would get the bare bones right
j
@Dave Merrill - correct, that is how I started the "chat". It's disclaimer is it doesn't know "the latest" so it includes Tailwind 2.x something instead of the much newer/faster/better 3.x - same probably for all sorts of libraries. But right now, it does a decent job at prototyping code. It definitely "knows" about Commandbox etc. as well to some degree. It will be interesting to see how it develops and we get a bit more testing done by folks in these Slack channels.
d
What do we know about the source material it trains on? Can we point it at stuff?
j
GPT-4 blows my mind... I am sure many here could explain this as well as GPT-4 (obviously), but the patience provided by an AI system is amazing 🙂 - and I don't have to bother any of you 😄
Format it nicer using TailwindCSS 3.x - nemas problemas. Get rid of comma and trailing zeroes, ditto. "To format the numbers without showing commas and trailing zeroes, you can modify the 
formatCurrency
function to use 
Intl.NumberFormat
without the fraction digits" - done. StackOverflow can probably shut down in a few weeks.
Copy code
function initProductForm() {
    // ... existing code

    return {
        // ... existing properties and functions

        formatCurrency(amount) {
            return new Intl.NumberFormat('nb-NO', {
                style: 'currency',
                currency: 'NOK',
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            }).format(amount);
        }
    };
}
Open in Slack
PreviousNext
Powered by