When Open AI demonstrated GPT-4, there was such a scene: given a sketch of the interface, the webpage code could be generated.
This demonstration is very simple, what if the interface prototype is more complicated? like this:
Can ChatGPT directly generate HTML, CSS, and JavaScript codes to realize this webpage?
If ChatGPT can do this job alone, front-end development is really at risk of unemployment.
In fact, GPT-4 does not open the function of "give a picture and generate code" at all. At this stage, we can only communicate with ChatGPT by text.
But the golfer @晓迪of the "ChatGPT Base" planet has indeed completed it, and the effect is as follows:
GPT-3.5 renderings
GPT-4 renderings
After interacting with ChatGPT and fine-tuning (fine-tuning in the generated code, the ability of ChatGPT is really against the sky, it can beat all other code generation tools), the effect is as follows:
(Click to read the original text, you can view the renderings and source code generated by @晓迪using ChatGPT)
Isn't it amazing? If you spend a little more time fine-tuning, the effect will definitely be better.
The key point is the prompt used by @晓迪:
页面名称：咨询情况大屏展示页
页面目的：通过卡片以及图表展示实时咨询情况
页面结构：
顶部：占整体页面长度的1/5,包含4个卡片，每个卡片占用平均宽度，卡片里面包含左边为一个图标，右边分为上下两个元素，分别为标题与数字
○ 卡片1：图标为笑脸，底色为浅绿色，
○ 卡片2：图标为握手，底色为浅蓝色，
○ 卡片3：图标为饼图，底色为浅黄色，
○ 卡片4：图标为国际化，底色为浅红色，
2. 中部：占整体页面长度的2/5，包含一个饼图，占1/2个宽度，另外一半与底部，右四分之一宽度为一个块，包含三个折线图，每个折线图有一根线，x轴为人名，y轴为0-400
○ 饼图：标题为慢性疾病预警，包含六个标签
■ 标签1：风湿，30%
■ 标签1：慢性呼吸系统疾病，30%
■ 标签1：精神、心理疾病，15%
■ 标签1：心血管疾病，15%
■ 标签1：营养代谢疾病，5%
■ 标签1：恶性肿瘤，5%
3. 底部：占整体页面长度的2/5，包含一个环形图，占1/4个宽度。一个雷达图，占1/4个宽度。另外一半为上述折线图。
● 环形图：标题为心理健康预警，包含五个标签，分别为敌对，焦虑、敌对、敌对、躯体化。
● 雷达图，五个角分别为，竞争压力、职场压力、家庭压力、人际压力、学习压力
请帮我生成静态页面，不要省略代码，给出代码。图标请使用fontawesome库完成。These prompts clearly describe what is on the interface in a structured way. As for the details, they are completely generated by ChatGPT.
Compared with burying your head and humming and typing code, the work efficiency has increased by 10 times, or even 100 times.
I'm afraid you also feel this way. With ChatGPT, the focus of programmers will change.
Not only the front-end interface, but also the back-end development. It turns out that not only the whole needs to be considered, but also many details. Not only the details, but also the codes have to be typed out line by line. Now programmers are in control of the overall situation, constantly giving ChatGPT prompts in natural language, and codes will be generated soon.
The more precise the prompt, the better, such as "Please use the fontawesome library to complete the icon", "Payment time and salary calculation strategy are two concepts, separate them." (See this article for details: "ChatGPT Starts Threats Programmer's core competence ")
How to prompt ChatGPT may really become a science. If the reminder is good, ChatGPT will cooperate well and work efficiency will be high.
When I first came into contact with ChatGPT, I was first shocked, and secondly, I had a strong sense of crisis: If you don’t know how to use ChatGPT, you must not be a programmer who is proficient in using ChatGPT.
Others use natural language to generate code, and I am still typing line by line, and the efficiency is ten times and a hundred times worse. This will directly affect a person's job performance, job opportunities, salary, bonuses.
A junior programmer who uses ChatGPT well may be able to compete with intermediate or even senior programmers.
I think the programmer who will use ChatGPT has gone from one dark forest to another. If I still selectively ignore ChatGPT, I may soon suffer from dimensionality reduction.
So I have to quickly arm myself with ChatGPT, but there are so many programming fields, how can ChatGPT be effective?
This is the original intention of Shanke and I to establish the "ChatGPT base", to explore the capabilities of ChatGPT, and transform into a ChatGPT programmer as soon as possible!
What is gratifying is that the planet started to publicize this Tuesday, and more than 600 people have joined in three days, and they are particularly active:
Many excellent usages of ChatGPT have emerged on the planet. This article is based on the planet. Thanks again to the golfer @晓迪.
"ChatGPT base" is a very vertical planet, specially built for programmers, the purpose is very simple:
1. Help programmers to master ChatGPT as an excellent tool as soon as possible, find the best way to use it, and the best way to improve work efficiency.
2. Explore the opportunities that ChatGPT brings to programmers. If the appearance of the iPhone brings app development, turn the sideline business into the main business.
Of course, these are the two main purposes. Join the planet, and you can also view ChatGPT’s cutting-edge information, high-quality resources and projects, ChatGPT’s geek gameplay, etc.
The planet now has these events:
Join the planet to send a ChatGPT account
ChatGPT big voyage activities, apply ChatGPT in actual projects to improve work efficiency
Export high-quality content and send a 100 yuan red envelope
30-day check-in challenge, planet fee refund
The top three in the weekly score list, large red envelope rewards (100 yuan for the first place, 50 yuan for the second place, 20 yuan for the third place)
When I was chatting with Shan Ke, I said that this planet may become a planet where we give money back! But it doesn't matter, if we can really make good use of ChatGPT and make ourselves more competitive, it will be worth it.
Now the planet is in the trial operation period, the original price is 199 yuan, now there is a coupon of 100 yuan , which is equivalent to 99 yuan , you can join, embrace ChatGPT early, become the first batch of people who can use ChatGPT and use ChatGPT well, and take the lead , get bonus.
