Important
All dynamic UI code is generated by OpenAI's model. Although measures have been taken to prevent XSS attacks, I cannot guarantee your safety. Please use your browser's private mode when opening this project and take other protective measures that you think are necessary before generating any code. If you do not understand this sentence, please do not run this project.
动态的UI代码都是由openai的模型生成，虽然已经做好防止xxs攻击，但是我无法保证你的安全性，生成代码之前请使用浏览器隐私模式打开本项目，并做好其他你认为有用的防护工作,假如你不理解这句话，请不要运行本项目。
Proof of concept：Natural Language UI Programming (NLUP) and Large Language Model Rendering (LLMR)
202304032058.mp4
A simple demo of Natural Language UI Programming (NLUP) and Large Language Model Rendering (LLMR), implemented purely on the front-end using GPT-3.5 technology.
In the future, large language models will enable everyone to have their own unique user interface and api, and this is one way to achieve this vision.
一个对自然语言编程(NLUP)和大模型渲染(LLMR)地设想的一个简单demo，纯前端实现，使用了GPT-3.5技术。
未来，大模型将会让每个人都有自己独一无二的用户界面和api，而这是一种这种设想的实现方式。
The Future of Software Development - Large Language Model rendering (LLMR)
In one sentence: Anything that can be generated by large language models will ultimately be generated by large language models. Software as a form of content, as a string, will ultimately be generated by large language models.
When I first started web development, front-end pages were returned by back-end template functions (SSR).
Later, with frameworks like React and Vue.js, we began to perform complex rendering on the client side, giving rise to concepts like front-end and back-end separation (SPA, MPA).
Now, a new rendering paradigm is emerging: large language model rendering (LLMR).
In the future, software will be generated by large language models that immediately call APIs and generate user pages.
In this project, we see the possibility of generating and further editing pages.
In the ChatGPT plugin system, we see the possibility of large language models immediately calling APIs.
The combination of these two will create a unique software experience for users. Any demand that a user makes can be fulfilled in real-time by the large language models. There will no longer be a separation between front-end and back-end; only large language models will generate the software.
Agile development will no longer be necessary, as users' software needs will be met in real-time.
Pages will no longer be composed by front-end, and APIs will no longer be called by back-end, and we will no longer need to debug front-end and back-end together.
Finally, remember what I said: Anything that can be generated by large language models will ultimately be generated by large language models. Software as a form of content, as a string, will ultimately be generated by large language models.
软件开发的未来- 大模型渲染
一句话：所有能用大模型生成的内容，最后都用大模型生成。软件作为一种内容形式，一种字符串，最后都将被大模型生成。
我刚刚接触网站开发的时候，前端页面是后端利用模板函数返回的。（SSR）
后来，react和vue这样的框架出现后，我们开始在浏览器端进行复杂的渲染，出现了前后端分离这样的概念。（SPA，MPA）
现在，将会出现一种新的渲染范式，大模型渲染（LLMR）
未来的软件将会是用户提出需求，大模型立即调用api，然后生成用户的页面。
我们在这个项目上看到了页面生成和进一步编辑的可能性。
在Chatgpt的Plugin 系统中，我们看到了大模型立即调用api的可能性了。
二者的结合，将会诞生出对用户来说独一无二的软件使用体验。用户提的任何需求，能大模型都能实时获取到相应的页面和数据。从此再无前端与后端，只有大模型生成。
再无敏捷开发，用户的软件需求将会实时地被满足。 页面将不再会是前端组合，而api将不再回是后端调用，我们也再也不需要前后端联调
最后，记住我说的话，所有能用大模型生成的内容，最后都用大模型生成。
Install and Run
npm install
npm run dev
Usage
Click the "Generate" button, enter the page you want, and the page will be generated.
Move the mouse over the component you want to modify.
If the component can be modified, a blue border will appear.
Click it, and a green border will appear. Then you can continue editing the component by entering natural language.
End
The above is a personal, immature idea and exploration. Let's meet in the issue area and there should be a lot of optimization space for the demo.
Demo video
bilibili （The previous demo.）
https://www.bilibili.com/video/BV19X4y1r762
youtube
https://www.youtube.com/watch?v=gG1I5SnrdNc
my twitter
view the demo on my twitter: https://twitter.com/lxfater