Awesome
<p align="center"> <a href=""><img src="assets/logo.jpg"" width="200px"></a> </p> <h3 align="center"> WebDesignAgent : Towards Effortless Website Creation </h3> <p align="center"> <a href="assets/README_CN.md"><img src="https://img.shields.io/badge/文档-中文版-blue.svg" alt="CN doc"></a> <a href="https://opensource.org/license/apache-2-0"><img src="https://img.shields.io/badge/Code%20License-Apache_2.0-green.svg"></a> <a href="https://github.com/DAMO-NLP-SG"><img src="https://img.shields.io/badge/Institution-DAMO-red"></a> <a><img src="https://hits.dwyl.com/DAMO-NLP-SG/WebDesignAgent.svg?style=flat-square&show=unique"></a> <a><img src="https://img.shields.io/badge/PRs-Welcome-red"></a> </p>These websites are built based on the following materials:
- A simple description: The official website of Harry Potter, full of magical elements
- AI generated images
- Human feedback
These websites are built based on the following materials:
- A reference website layout: wukong.png
- A simple description: Please build official websites for Black Myth: Bajie. It requires a detailed introduction to the game as well as a history of Game Science's development. Additionally, it should provide a smart AI conversation feature with Bajie. Game Science's renowned work is Black Myth: Wukong, which has just won the 2024 TGA Game of the Year award.
- Local images
- Human feedback
These websites are built based on the following materials:
- A reference website layout: taobao.png
- AI genearted Images
- Human feedback
📰 Update
-
[2024.7.15] WebDesignAgent can support Qwen models(not support vision and ) model!(There are some problems with asynchronous calls, and the generation speed is slow. Welcome PR to solve this problem) and cogview-3 and sd3(free!).
-
[2024.7.5] WebDesignAgent can support Claude and chatglm(not support vision) model!
-
[2024.6.28] WebDesignAgent now supporting building Chinese Websites and can arrange your images into a website!
-
[2024.6.26] The first version of WebDesignAgent!
😊 What is WebDesignAgent
WebDesignAgnet is an autonomous agent that can help you build a series of websites.
It supports building webpages with:
- Text → Website: Transform your textual descriptions into fully functional, beautifully designed websites effortlessly.
- Images → Website: Simply upload your images, and watch as they are seamlessly integrated into stunning websites.
- Visual Clues → Website: Bring your visual layout to the websites.
- Hybrid Design: Seamlessly combine text, images and other visual clues to create stunning, cohesive web designs.
It has the following key features:
- Multi-Page Mastery: Generate and design interconnected web pages with dynamic redirect capabilities.
- User-specific Add/Delete: Exercise full control by manually adding, deleting, or modifying web pages, their contents and their relations to tailor your site to perfection.
- Iterative Refinement: Make precise alterations to your website’s code based on your invaluable feedback.
- Visual Reflection: Leverage strong visual models to refine and enhance the webpage layout autonomously.
🛠️ Requirements and Installation
git clone https://github.com/DAMO-NLP-SG/WebDesignAgent.git
cd WebDesignAgent
pip install -r requirements.txt
API config
set config.yaml to use the OpenAI APIs.
web_type : "chrome" # "chrome" or "firefox" or "edge"
LLM_TYPE : "openai" # "openai" or "claude" or "glm" or "qwen"
IMG_GEN_TYPE : "dalle3" # "dalle3" or "cogview-3" or "sd3"
# LLM settings
## openai settings
is_azure : False # set to True if you are using azure api
### Azure settings
AZURE_OPENAI_ENDPOINT : ""
AZURE_OPENAI_KEY : ""
AZURE_OPENAI_API_VERSION : ""
AZURE_OPENAI_DALLE_ENDPOINT : ""
AZURE_OPENAI_DALLE_KEY : ""
### openai settings
OPENAI_API_KEY : ""
OPENAI_PROXY_URL : ""
OPENAI_BASE_URL : ""
## claude settings
CLAUDE_API_KEY : ""
## glm settings and congview settings
GLM_API_KEY : ""
## qwen settings
DASHSCOPE_API_KEY : ""
## sd3 settings
SD3_API_KEY : ""
🚀 Quick Start
We offer two modes for using WebDesignAgent: terminal-based and GUI-based. We recommend trying the GUI mode for its user-friendly interface and greater control.
1. Run in GUI
python gui.py
Then you will enter the GUI as follows: <img alt="gui" src="assets/gui.png">
Auto Generation
For a quick usage of our WebDesignAgent, please follow these steps:
- Config
Select Mode
toWeb Design Mode
. - Config
Select Model
according to your APIs. In our demos, we primarily usegpt-4o
. - Select the website language in the
Language
field. - Config
CSS Framework
to your favored style, e.g.Tailwind
. - Set
save_file
, which saves your generated websites. . Enter your request in either thewebsite_description
field for textual requests, thewebsite_template_path
field for image template requests, or both for a combined input. - If you want to build your website with your local images, please indicate the image storage path
local_img_storage_path
for our agent to load and then clickload
. - Click the
Plan
button, which will return the textual descriptions of planned websites, their contents, and their relations. You can also change these descriptions if you find them unsuitable. - Click
Auto Generate
to generate all the above websites for you. The screenshot of your created websites will show on the right part of the GUI tool. (It may take some time for the entire website generation) - Set Vision to
Close
can reduce the cost but will decrease the quaility.
Human Feedback
If you want to generate a website with more human control. Following steps 1-7 in Auto Generation to get the automatically generated plans. Then customize your websites with the following ways:
- You can modify the plan results by directly typing your own thoughts.
- You can also add/delete the unsatisfied web pages.
- You can also provide some feedback in the
feedback
field to globally control the created websites.
2. Run in terminal
python webdesign.py --save_file "saves/shopping/" --text "a shopping website" --refine_times 2
👀 Examples
1.Alibaba DAMO
Website generated by an website template: Websites
<p align="center"> <a href=""><img src="assets/damo.png"></a> </p>2.Shopping
Website generated by a text description: Websites
<p align="center"> <a href=""><img src="assets/shopping.png"></a> </p>3.Game
Website generated combining both an image and a description.
<p align="center"> <a href=""><img src="assets/game.png"></a> </p>📑 TODO lists
- Support more LLMs.
- Support local code modification.
- Generate supporting backend code.
- At present, this is still a relatively rough demo, and we really hope that you can provide feedback to help us improve it. We welcome you to raise issues to point out our shortcomings.
If you have any questions, please join the group chat for consultation
<p align="center"> <a href=""><img src="wechat.jpg"></a> </p>