Tell HN: I asked ChatGPT to build a login form in React and it gave me the code
I asked OpenAI chatGPT to "build a login form containing email, password, and login button in React using state" and it gave me the full code along with an explanation. You can see the video of the prompt and response: https://cln.sh/X4p01n
I thought Copilot was fairly advanced, but this chatGPT takes it to a whole other level. What are your thoughts?
139 comments
[ 4.4 ms ] story [ 177 ms ] threadIt's annoying blog spam that will hijack your attempt to scroll back with a modal asking you to enter an e-mail and subscribe, but it seems to be roughly the same thing, except the entire article appeared at once and I didn't need to interact with it and wait five minutes for the full answer.
We've come up with a new pedagogical method to teach 4 year olds arithmetic. With two months of study they can easily multiply two 15 digit numbers in their heads.
Well I can multiply those two numbers in a calculator to get the same result, and I don't have to feed or take care of it.
Here's how it went: https://i.imgur.com/PS6oPsq.png
A pretty incredible developer experience, if you ask me!
It's lying though when it claims its regexes match the empty parameter cases, right? (The regexes do what's asked, just explanation seems buggy.)
Despite this, for a regex amateur like me I was very impressed. It saved me all the time I’d normally spend head-scratching in Regex101, trying to remember how it works. Instead I could just jump there at the end, validate the matching, and make any small tweaks far easier.
The macro just colour-codes its first parameter presentationally, whilst the rest of the LaTeX needs to be passed to a compute engine for solving. The compute engine doesn't know how to "solve" a colour, hence why I'm trying to strip them out beforehand.
;)
Right now it is like when the camera had been around for a few years: People knew it was revolutionary, they went to the cinema to watch a train arrive and got terrified [1]. But compare that to the billions of camera phones, Marvel movies, Hubble, etc.
[1] https://en.wikipedia.org/wiki/L%27Arriv%C3%A9e_d%27un_train_...
And journals are going to have a real hard time dealing with "paper spam".
Just ask the student in person to explain the paper to you.
"Thou shalt not Code!"* [the secret 4th law of robotics on planet Actually Smart Geeks Here]
* graven image business all over again -- it's a sin ;)
- which may contain 0 or more \parameter macros
- of which each will either have one (\parameter{123}) or two (\parameter{123}{blue}) arguments
... besides regex, how else would you suggest replacing the entire macro with simply the value of its first argument (i.e. 123)?
I can do it in one line with regex, but if there's an easier way, I'm all ears :)
http://tug.ctan.org/info/tex-nutshell/tex-nutshell.pdf
How is ChatGPT's answer wrong? The regex is matching square brackets instead of the correct OPTIONAL curly braces. Unseparated arguments aren't handled. The regex for the id is also wrong. The leading slash is correct, but other than that, the whole fucking thing is wrong!
And of course it can't handle macro calls within the macro arguments (nesting).
It's just an absolute clusterfuck, from top to bottom. The chatbot gave its user a useless piece of garbage, and Hacker News doesn't know enough to throw it away. Instead, we parade it around like some great success!
Fooled by a language model.
The comment you replied to was a one line joke about being bad at regex. I didn't directly or implicitly make any claim about the quality of the output of the chatbot. It's unclear to me how my comment could be reasonably interpreted as "parading it around".
On a tangent:
> Fooled by a language model
I suspect a reasonable person would understand this to be insulting on some level, so I assume you must have seen some other meaning/value in including it such that the "insultingness" is outweighed by the point you're making. I'm not seeing that point though, could you clarify?
Part of elegant development is abstracting at the right places to make your code communicate what it's doing to the next person working on it (which could include future you).
If you ask me, the real boogeyman is lack of programmers' comments that explain what the regex is doing. In other words, the fault lies not with the tools, but PEBKAC.
Regardless, even if my prompt didn’t meet the LaTeX spec exactly, the regex I got back (after just 2 natural-language revisions) saved me a lot of time and hassle, and helped me get the job done in the way I needed it to.
There’s little point judging it to be a “total clusterfuck” without knowing what I’m even trying to achieve in the first place :)
It just meant I could load up Regex101 having already gotten 90% of the way to the end result.
Well, mostly. I tried the prompt in the OP into text-davinci-003 and got this:
Although that was with temperature = 0.7. temperature = 0.0 gives more reasonable results.1. those that can specify concise requirements for the AI
2. those that can check correctness of the code the AI generated.
Building an AI is just like building a website. It can mostly be done by an AI as well.
If it can program a desktop application it can program and evolve tensorflow/pytorch scripts.
[0] quasicitation https://www.commitstrip.com/en/2016/08/25/a-very-comprehensi...
I did ask it something more basic: "how to use fetch to download and parse a csv", and the code was helpful, although not much different from what I could find with google/stackoverflow. However, this next part was what really impressed me. The results used Papa for parsing, so I then asked it to do it with csv-parse instead, and it worked! That seems like the advantage over something like Copilot--it has contextual history of the question which can be used conversationally to tweak the results.
Sounds exactly like some of my co-workers :)
https://pbs.twimg.com/media/Fi4A0W8UAAAFF47?format=jpg&name=...
Prompts:
- Write a simple CRDT implementation in Swift
- How can I make a GraphQL server using Rust using the async-graphql and actix-web libraries?
- Write code to create a Dropbox clone in Rust
- How do I make an HTTP request in Javascript?
However, just like with Copilot, it can introduce subtle bugs. For example, in the Dropbox example, notice how it uses synchronous code in an async function. Also, longer prompts will reach the token limit and get cut off.
Interestingly, this must be what Replit is also using for their AI codegen service too (https://replit.com/site/ghostwriter) since I believe they have some connection to OpenAI, as they got early access to OpenAI's service last year with their previous Codex product (https://blog.replit.com/codex).
I never use it for full function generations, they're almost never correct.
Sam Altman <--> Paul Graham <--> Amjad Masad might be it.
One easy way of catching out is to ask "write X in language Y", where X isn't something most people would write in Y -- it usually got it wrong for me.
Ill stick to man pages and blogs for now. I like learning!
Here's my convo with ChatGPT: https://imgur.com/a/eIjvh8C
If the text and code are just random stuff making no sense then I wonder how different it is from the Copilot results (besides the convincing style of answers).
- Solidity contract bug: https://twitter.com/gf_256/status/1598104835848798208?s=20
- Simple JS bug: https://twitter.com/bentossell/status/1598269697371185153?s=...
- Buffer overflow (though ChatGPT generated this one as a code example, and explains it): https://twitter.com/bentossell/status/1598269719202521088?s=...
- Explaining worst case bubble sort: https://twitter.com/bentossell/status/1598269721882681344?s=...
- Fixing a Kubernetes file: https://twitter.com/PhilipZe9/status/1598303853719560196?s=2...
For a few of them it made a small error of one line that I had to fix. But also in a few cases I was able to just reply that there was a bug and what it was doing incorrectly and to fix it, and it worked.
It gave me code that was very specific such as using the methods as I named and described them in the request for the class.
The big question is: whose code is this? Is it, verbatim, someone else's copyrighted code (assuming a snippet like that is novel enough to be copyrightable)? Or is it derived from someone else's code? And if it's derived, is it a derivative work in the legal sense, or is it no more derivative than if a human had read a tutorial or some documentation and then later written code like it?
From a practical perspective I do think a lot of programmers are doing copy-paste in their day jobs, which means they should be reusing existing code (I would imagine there are numerous reusable customizable login forms).
---
For example I asked it this:
Can you write a javascript function that takes a callback and returns the value of that callback, but returns a cached value if that function has been called less than 5 seconds ago?
And it produces code that looks right but doesn't work (doesn't handle arguments, failing its own example implementation). However, upon reminding it to support arguments it does work. I guess this is actually potentially useful.
https://shot.3e.org/ss-20221201_153225.png
Not to mention the copyright issues with this. It's just regurgitating what's already on the internet not sure why it's ok for them to copy people's work but if you do it you will get sued.
``` One Elf has the important job of loading all of the rucksacks with supplies for the jungle journey. Unfortunately, that Elf didn't quite follow the packing instructions, and so a few items now need to be rearranged.
Each rucksack has two large compartments. All items of a given type are meant to go into exactly one of the two compartments. The Elf that did the packing failed to follow this rule for exactly one item type per rucksack.
The Elves have made a list of all of the items currently in each rucksack (your puzzle input), but they need your help finding the errors. Every item type is identified by a single lowercase or uppercase letter (that is, a and A refer to different types of items).
The list of items for each rucksack is given as characters all on a single line. A given rucksack always has the same number of items in each of its two compartments, so the first half of the characters represent items in the first compartment, while the second half of the characters represent items in the second compartment.
For example, suppose you have the following list of contents from six rucksacks:
vJrwpWtwJgWrhcsFMMfFFhFp jqHRNqRjqzjGDLGLrsFMfFZSrLrFZsSL PmmdzqPrVvPwwTWBwg wMqvLMZHhHMvwLHjbvcjnnSBnvTQFn ttgJtRGJQctTZtZT CrZsJsPPZsGzwwsLwLmpwMDw
To help prioritize item rearrangement, every item type can be converted to a priority: In the above example, the priority of the item type that appears in both compartments of each rucksack is 16 (p), 38 (L), 42 (P), 22 (v), 20 (t), and 19 (s); the sum of these is 157. ```Adding the question: "Write a solution in JavaScript to find the sum of the priorities of those item types." got me:
``` const input = vJrwpWtwJgWrhcsFMMfFFhFp jqHRNqRjqzjGDLGLrsFMfFZSrLrFZsSL PmmdzqPrVvPwwTWBwg wMqvLMZHhHMvwLHjbvcjnnSBnvTQFn ttgJtRGJQctTZtZT CrZsJsPPZsGzwwsLwLmpwMDw;
const rucksacks = input.split('\n');
const sumOfPriorities = rucksacks .map(rucksack => { const half = rucksack.length / 2; const firstHalf = rucksack.slice(0, half); const secondHalf = rucksack.slice(half); return [...firstHalf].filter(item => secondHalf.includes(item)); }) .reduce((total, common) => { const priority = common[0].charCodeAt(0) <= 122 ? common[0].charCodeAt(0) - 96 : common[0].charCodeAt(0) - 38; return total + priority; }, 0);
console.log(sumOfPriorities); // 157 ```
Which is almost perfect, even though it's a new puzzle.
Maybe it can substitute StackOverflow, we will get better and faster code / explanation. But in the next 30-50 years, who knows. I guess it can write a lot of code for us, maybe we will be obsolete in that period of time, but as we know, prediction of the future often times goes really really wrong.