Javascript  

  

 

 

 

 

Learning Javascript from chatGPT

 

I think one of the biggest topic for the last few month (probably even now as of now Jan 2023) would be about chatGPT. I am not going to talk about what is chatGPT here since you would see a lot of articles and YouTubes about it.

What I am trying to do is in a series of notes are to use chatGPT myself in a specific area and see myself how far it can go. For the topic, I picked up javascript for the trial.

  • I know what Javascript is and have used a little bit, but not at the expert level at all. I means there are still a lot of things to be learned and have enough motivation to continuously use chatGPT.
  • Recently I came to a situation where I decided to apply javascript that are related to my work (not the main job, but at least in 'good to know' kind of situation). So I would try chatGPT with more of practical examples (practical at least to me).

NOTE : I got access to chatGPT (GPT 4) on Mar 15 2023 by subscribing chatGPT Pro. In short, the quality and stability of chatGPT (GPT 4) is much better than chatGPT (GPT 3.5)

NOTE : All my experience with chatGPT (GPT 3.5) was based on free version (From mid Nov 2022 to Mar 14 2023) and my experience with chatGPT (GPT 4) is based on chatGPT Pro (monthly subscription) from Mar 15 2023.

 

 

Followings are the topics and my personal opinion/tips while I am playing with the chatGPT

 

 

 

How we learned and how we will learn ?

 

When I am trying to a new language I usually go through following process and I think many people would go through similar procedure.

    i) find a sample code in internet for the simplest form of the application or a component of the application that I want to create

    ii) run the code

    iii) if the code does not run (for example, throwing a bunch of errors), find a new example or try to debug it myself.

    iv) (if it runs) try to understand the meaning / syntax of API functions used in the sample code

    v) make some changes in the sample code to fine tune the result to be closer to what I want or to have clearer understanding on the usage of API function.

    vi) modify the code or put additional code to make it better fit for my application.

When I was learning a language before we have have google as we do, I had to rely on various books for step 1 and there was not guarantee that the book I bought have the sample code that I want. So I had to learn whatever the book wants to teach and apply the knowledge for my own purpose and create the sample code myself. This kind of learning from book took huge amount of time and effort.

I has been blessing to have such a powerful search engines on internet like Google and various tutorials from so many authors. I could pass the step i) so easily and without any cost.

And then try running the code (step ii), but in many cases where the code just throw bunch of errors (step iii). In many cass, the sample code misses the pre-requisite part or it was writen for much older version. Debugging this kind of code myself would be a big pain, so usually decided to find other examples.

Even though internet helped a lot with these steps i)~iii) comparing to the printed books, it still demand huge amount of time and effort.

Then I came across a chatbot called chatGPT as soon as it became public (Nov 2022) and played it with various topics. Finally I wanted to try to use it as my personal tutor for learning a new language, Javascript. Javascript is not a new tool for me, but I haven't used it seriously before. The result was super impressive.

First, I don't have to spend any time for step i). I only had to spend a couple of minutes to clearify my own idea on the example code that I want to get and request the chatGPT to create and I get the code within a minuite.

Second, as far as I tried up until now, I haven't seen many cases where the code didn't run. In most case it runs even though the outcome does not perfectly what I expected.  Even when I came across rare cases where the code end up with error messages, I just copy the error message and put it into chatGPT and ask for fix. Then it prints out not only the revised code but also the root cause of the error.

In short, chatGPT makes the required time and effor for step i)~iii) near to Zero. This used to be the most demanding step when I was learning from textbook or from Googling.

Even better, chatGPT helped a lot for the remaining steps especially for step v) and vi). I just tell it "add this and this kind of procedure to the previous code" or "rewrite the code using this kind of component instead of using that kind" etc.

 

Simply put, my learning process for a new language has changed illustrated below.

 

 

 

 

Examples of learning from chatGPT

 

Followings are the list of the notes that I wrote based on dialogue with chatGPT and just a little bit of manual modification by myself.

 

Javascript

 

 

Python

 

 

 

Possible Limitations, Challenges and Workaround

 

For now, I am so impressed by this chat bot and have nearly Zero complaints considering my expectation from regular chatBots that I have experienced before, I wouldn't say that chatGPT is perfect. I am aware that it is still in test phase and continue to improve, but I think it would be beneficial to share some restrictions/limitation that I have experienced and how I worked around those challenges.

 

NOTE : With chatGPT (GPT4) that I got access on Mar 15 2023, I noticed huge improvement in terms of most of these challenges even though it may not remove all the limitations and challenges.

 

 

Too long code :  If you request something that would produce too long code, I saw many cases where the reply gets hung in the middle of printing. I am not sure if this is because the generation of the reply itself got hung or only the communication got broken in the middle of the printing.

In case of Javascript, chatGPT seems to prefer html, css, script all in single code which results in the long code. So one way to workaround this problem is to ask it to write html, css, script in separate files. Even if you put this request (i.e, write these code into separate files, chatGPT may still try to write everything in the same file. In that case, ask again to write them in separate file.

In some cases, I see the case where the print out hung up while priting single file (e.g, javascript file) when it gets too long. In this case, I usually ask for 'rewrite only this part'... for example, 'rewrite // Draw Grid part' and consolidate all the parts manually.

 

Using different methods for every request : Since chatGPT creates an answer differently depending on context, you may get different way of implementation even with similar request. For example, when you request it to create a table. Sometimes it writes a code in html file using html tag (i.e, <table> </table>) and sometimes it creates a table using javascript (i.e, using document.createElement("table"), document.createElement("tr"); etc). If you prefer any specific style, you can ask something like 'rewrite the code using html tag instead of document.createElement()'.

 

Chat Context is not remembered long  :  As mentioned before, chatGPT often hang up in the middle of writing the reply. Once it got hung up, you need to restart the chat. Once it restart, all the context you had in previous chat disappears. You may get the completely new reply/new code even when you put the exactly same request.

Besides this, chatGPT does not seem to allow us to continue the chat longer than an hour. So if you don't finish up the coding and refinement within the limited time, you need to restart the chat after some mandatory break. Then you may get the completely different code for the same request and restart all the refinement process from scratch. ==> I noticed that this kind of unexpected hang-up is improved greatly with the subscribed version of chatGPT (GPT 4). Even though I have not responding anything for a few hours the connection was still alive. This relieved a lot of my stress and does not need to worry about the disruption of the connection and losing all the context before I get the solution.

 

Challenges with pyTorch code  : I have not tried extensively at the point of writing this (Feb 7 2023), but I struggled a lot with generating pyTorch code. The outcome was so buggy. Even when I just asked for small revision, chatGPT rewrite the entire code in completely different way causing other bugs. I don't know if this is with pyTorch only or Python code in general. When I tried to generate very simple code like just plotting a function and haven't tried other complex code except pyTorch. I would give up trying any further with pyTorch code until next chatGPT version comes out. (NOTE: This may be because my request/prompt was not so good since I see some successful cases as listed in Reference section. Anyway I would stop my trial for now)

<== With chatGPT (GPT 4), the quality and accuracy of the code seems to be improved greatly. I haven't tried the same pyTorch task that I struggled before. Mostly I tried new task (e.g, RNN). Up until now (Apr 11, 2023), I am so satisfied with the quality of the code.

 

Challenges with Keras code  : As of Feb 8 2023, I got the same problem as in pyTorch code.

 

 

 

Tips

 

Here goes a list of Tips that I learned and want to share while I was learning Javascript from chatGPT.

 

Be prepared for the case where the chatGPT hang up : As mentioned above, you would frequently come across this kind of case. There is not way for us (users) to prevent this. The only thing I can do is to try to find some tricks to minimize the impact of this kind of hang up. Followings are a few practice that I makes.

  • Keep your original question/request (e.g, saving it in another text editor etc). As mentioned before, it is not guarateed to have the same result/response even though you put the exact same request, but you may get relatively closer solution to the one you got from the previous chat if you use exact the same request. At least you can save time and effort to type in the request again.
  • If you get the code that you think is pretty fine tuned as you wanted to have, copy those code into another text editor even though it does not perfectly match what you want to get. When the chat session get broken, you may create a new session and provide the saved script as a baseline and contine to refine.

 

Don't ask for too much at once  : If you ask for too much or too big thing at a time (e.g, write the code for a complete chat application or write the code for doing this or that for whole my thesis' etc). I am pretty sure that the chat would hangs while it is priting out the response. or even when it successfully printed out the initial version of complete code, it would hang up while you are refining the code.

 

Break down a task (request) into small chunks  : If you don't specifically point out, chatGPT tend to provide your requested code in a single file. For example, if you ask for writing an html with a script doing something, you would get a single long html file with css and javascript embedded in it and this would cause various problems as mentioned above. In many cases, even when I explicitely said to write separate code for html, css, javascript chatGPT often try to put everything in a single html file... so some of the most frequency request that I put during the refinement process for the code are :

  • Rewrite the code so that it produce separate css and java script file
  • Put "//XXXXXX" part into a separate function

 

 

 

Are chatGPT going to replace our job ?

 

NO, at least for now and probably for near future.  I am talking mostly in the field of software development. I am not a the position to generalize this to every field.  Some reasons behind my answer are as follows :

  • Limitation of the source code length : I haven't see any formal information about the length (e.g, number of lines or number of chatGPT tokens etc) of the source code chatGPT can write out or analyze, but it seems obvious that there is a certain limit as I learn from using it. So there still be human who can break down a given project into a lot of small chunks that can be handled by chatGPT.
  • No automatic verification and validation : chatGPT just write out the source code, but it does not run it by itslef and find problems and debug it. This is (will be) the job for human.
  • Source for training : At least until now, the source of training material for chatGPT is all done by human. It is not like Alphago Zero which learn not from the result of Human competition of GO, but from self-play only. As far as I know, chatGTP still requires all those materials produced by human whether they are program source code or generic knowledge / information. Probably due to this, I see very human-like mistake from the source code that chatGPT produces. For example, just calling a function but forget to define the function... or calling the function at the wrong place etc.

 

 

 

Are our jobs 100% safe from chatGPT ?

 

NO. I know this is the conflicting answers to previous answer. I think the answer would vary depending on which level of programmer you are. I admit that chatGPT can replace very experienced programmer who can implement large scale and complicated program. Even for these experienced programmer, chatGPT can be very helpful for hiking up productivity. Based on my experience, I would not search the answers any more from internet search page if it is about finding out syntax information about a certain API or meaning of error message that I get when I am running a code. For these issues, I am already habituated to ask chatGPT first and go to other search engine only when I fail to get good enough answers from chatGPT.

Some of entry level programming task can be done by chatGPT. This cannot replace all the programmer, but I think it would replace or at least reduce demand for entry level programmer. If you have a development task which require 10 entry level developer, you may complete the task with 6 or 7 persons and ask them use chatGPT for the task.

 

 

 

Junior, Senior and AI all working together ?

 

You might have seen so many opinions about utilizing AI in coding job. Some are optimistic and others are passimistic. I am not trying to say anything about extreme opinion here, like 'AI would completely replace programmers job' or 'it may looks fancy, but it just at the level of toy'. I would suggest you to go through articles in Reference section, most of which shows more balanced opinion of AI-based coding.

What I want to say here is about the possibility of everybody (Junior, Senior engineers and AI working together). One of the idea poping up in my mind as of now (Feb 6 2023) is illustrated below.

 

 

(1) the whole process may be initiated by Domain experts (most likely to be senior engineers). He/She can define specific requirements / functionality and describe it in such a way that can be performed by AI coder. This requirement to input to AI coder is called Prompt. Those prompt is stored in Prompt DB. The important skill set for the experts would be Prompt Engineering, of course in addition to domain knowledge.

(2) Then coding experts would pull out a Prompt from the Prompt DB.

(3) Then feed it into AI coder and (4) get the reply (the code) from the AI. It would be unlikely that he/she would get the satisfactory output at a single shot. Part of the reason for the unsatisfactory result may be due to ambiguity of Prompt itself and part of the reason would be due to performance of AI coder and various other factors. Whatever the reason is, the coding experts need to go through many back-and-forth with AI coder until it gets the satisfactory outcome.

(5) During the back and forth, the coding experts would have chances to fine tune the contents of the Prompt. He would update the revised prompt back to the prompt DB. It would be good idea to setup a source management or version controll system (like github, svn etc) to the prompt.

(6) Later the domain experts would pull out the revised prompt and compare it with the original version and update his/her brain. By this process, he/she will further develop the skill set to write Prompt that produce better result by AI coder.

 

NOTE : The two images in the illustration above are the one that I generated by using AI in Playground.  I must admit that they are far from being a good quality. It is mostly because I am not good at prompting for text to image generation AI. This can be a good example showing how import the prompt is :)

 

 

 

Data Flow in the New System. Everything starts from a Prompt

 

Here I want to overview the data flow (functional flow) while working together with chatGPT (or any other code generation AI). Of course, this is based on my personal view and my person experience utilizing chatGPT for coding for about two month.

The flow that I am thinking of is illustrated as follows. In this flow, I put the prompt DB as the initiator of the whole process and for me it is the core of the process.

The biggest advantage of the Prompt shown here is that all of the prompt is written in Natural Language (Human Language) not in any specific computor language. The prompt written in a natural language has important advantages listed below.

  • Same prompt (requirement) can be utilized for any computer language as it is (or just a little bit of modifiation). Of course, the exactly same prompt may not be able to be used for every computer language because not every computer provide same functionality. For example, you cannot use the promp written for Javascript graphics for SQL.
  • Same prompt (requirement) can be used for any type of AI based coder as long as the coder can generated by the description in natural language.
  • With the same prompt (requirement), you can get the multiple different versions of implementation (coding style). To be honest, this can be a disadvantage as well if you want to have the identical code for every trial as long as the identical prompt is input.

 

 

You can generate the code in different computer language for the same functionality in different ways as below :

  • Option 1 : By original prompt. You can simply use the same prompt and ask AI to generate the code for a different computer language
  • Option 2 : You can use a code generated before in a specific computer language and ask AI to convert it into another computer language.

NOTE : Which option would be better ? It depends. Based on my experience up to Feb 2023, I got the impression that chatGPT works a little bit better for a specific computer language comparing to other language. It can be due to current status of training for the AI or due to my prompt itself. Since my prompt would carry a certain degree of ambiguity however much I try to describe as in detail as possible and requires a lot of extra back-and-forth to get the final code that I want to get.  In this case, it may give you better result if you input the pre-verified code and ask AI to convert it to another computer language rather than using the original prompt.

 

 

 

Any possible License / Legal Issue

 

To be honest, I haven't pay much attention to this until very recently and just assmed that there might not be a major issues, but after googling and reading a few writings I learned that it might not be as simple as I thought. So I would suggest precaution and do some legal review when you are using the generated code in your project. I think following articles well describes various concerns and issues about this.

I think we will wait long before we will see any conclusion about this issue, but it would be interesting and good learning to chase on this topic too  as a person who is interested in watching how a new revolutionary technology is born, evolve and assimilated into our life. I am putting articles that I happen to search and picked in chronological order to see how this issue unfolds as you read from top to bottom.

 

 

 

YouTube

 

You would find so many different YouTube video about chatGPT and it may not be necessary for me to make any list for recommendation. But I tried to make a list of videos that are more specifically related to code generation (not only for Javascript, but also for other languages as well). I am trying to list of those video that shows not only generated code but also the result of execution. I am trying not to show only those that gives the best result in single shot. I am trying more to show those cases that shows the entire process of code generation testing starting from 'not so good result' and improve/fine tune the code step by step. There are some videos that is not directly about code generation but giving some insights on application of chatGPT on coding or computer science.

 

 

 

Reference