[Example] Generate A Website-ChatDev

desc: "GPTs: write a website"

outputs:

  overview:

    type: html

    reference: ${TestModification}

nodes:

  - name: DemandUnderstand

    speak: "optimize your needs.."

    source:

      path: Planning_Prompt_Enhance

      func: Func_Prompt_Enhance

    inputs:

      task: ${inputs.input_text}

  - name: Coding

    speak: "coding your website.."

    source:

      path: Planning_Coding

      func: Func_Coding

    inputs:

      gui: ${DemandUnderstand.gui}

      ideas: ${DemandUnderstand.ideas}

      language: ${DemandUnderstand.language}

      modality: ${DemandUnderstand.modality}

      task: ${DemandUnderstand.task}

  - name: CodeComplete

    speak: "complete your code.."

    source:

      path: Planning_CodeComplete

      func: Func_Coding

    inputs:

      unimplemented_file: ${Coding.unimplemented_file}

      codes: ${Coding.output}

      language: ${DemandUnderstand.language}

      modality: ${DemandUnderstand.modality}

      task: ${DemandUnderstand.task}

  - name: CodeReviewComment

    speak: "code review your code.."

    source:

      path: Planning_CodeReviewComment

    inputs:

      codes: ${CodeComplete.output}

      ideas: ${DemandUnderstand.ideas}

      language: ${DemandUnderstand.language}

      modality: ${DemandUnderstand.modality}

      task: ${DemandUnderstand.task}

  - name: CodeReviewModification

    speak: "code review & rewrite your code.."

    source:

      path: Planning_CodeReviewModification

      func: Func_Coding

    inputs:

      comments: ${CodeReviewComment.output}

      codes: ${CodeComplete.output}

      ideas: ${DemandUnderstand.ideas}

      language: ${DemandUnderstand.language}

      modality: ${DemandUnderstand.modality}

      task: ${DemandUnderstand.task}

  - name: TestErrorSummary

    speak: "testing.."

    source:

      path: Planning_TestErrorSummary

    inputs:

      test_reports: "js & css should inline in index.html"

      codes: ${CodeReviewModification.output}

      language: ${DemandUnderstand.language}

  - name: TestModification

    speak: "rewrite success.."

    source:

      path: Planning_TestModification

      func: Func_Coding

    inputs:

      error_summary: ${TestErrorSummary.output}

      test_reports: ${TestErrorSummary.output}

      codes: ${CodeReviewModification.output}

      language: ${DemandUnderstand.language}

Planning_Prompt_Enhance

[You are an professional prompt engineer that can improve user input prompt to make LLM better understand these prompts.]

I will give you a short description of a software design requirement,

please rewrite it into a detailed prompt that can make large language model know how to make this software better based this prompt,

the prompt should ensure LLMs build a software that can be run correctly, which is the most import part you need to consider.

remember that the revised prompt should not contain more than 200 words,

here is the short description:"{task}".

If the revised prompt is revised_version_of_the_description,

then you should return a message in a format like "<INFO> revised_version_of_the_description", do not return messages in other formats.

Planning_TestErrorSummary

Our developed source codes and corresponding test reports are listed below: 
Programming Language: "{language}"
Source Codes:
"{codes}"
Test Reports of Source Codes:
"{test_reports}"
According to my test reports, please locate and summarize the bugs that cause the problem.

Planning_CodeComplete

According to the new user's task and our software designs listed below: 
Task: "{task}".
Modality: "{modality}".
Programming Language: "{language}"
Codes:
"{codes}"

Since we are a single page site, js and css code need to be inline within the page, 

like this:

index.html

```html

CODE

```

As the {assistant_role}, to satisfy the complete function of our developed software, you have to implement all elements in the "index.html" file. 

Func_Coding

let codes = ""
let output = node.output
if (output !== "") {
    const regex =/```html(.*?)```/mgs
    let match;
    while ((match = regex.exec(output)) !== null) {
        codes = match[1];
    }
}
node.output = codes
node.speak = "coding..."
node.unimplemented_file = "index.html"

Planning_CodeReviewModification

According to the new user's task, our designed product modality, languages and ideas, our developed first-edition source codes are listed below: 
Task: "{task}".
Modality: "{modality}".
Programming Language: "{language}"
Ideas: "{ideas}"
Codes: 
"{codes}"
Comments on Codes:
"{comments}"

Since we are a single page site, js and css code need to be inline within the page, format like this:


index.html

```html

CODE

```


As the {assistant_role}, to satisfy the new user's demand and make the software creative, executive and robust, you should modify corresponding codes according to the comments. Then, output the fixed codes strictly following the required format.

Planning_Coding

According to the new user's task and our software designs listed below: 
Task: "{task}".
Modality: "{modality}".
Programming Language: "{language}"
Ideas:"{ideas}"
We have decided to complete the task through the "index.html".  As the {assistant_role}, to satisfy the new user's demands, you should write a "index.html" and make sure that every detail of the architecture is, in the end, implemented as code.  {gui}
Think step by step and reason yourself to the right decisions to make sure we get it right.
You will first lay out the names of the core elements, inline js, inline css that will be necessary, as well as a quick comment on their purpose.
Then you will output the content of the file including complete code.
like this:
index.html
```html
CODE
```
Please note that the code should be fully functional.   Ensure to implement all functions.

Planning_CodeReviewComment

According to the new user's task and our software designs:
Task: "{task}".
Modality: "{modality}".
Programming Language: "{language}"
Ideas: "{ideas}"
Codes:
"{codes}"
As the {assistant_role}, to make the software directly operable without further coding,  inline JavaScript should formulated the following regulations:
1) all referenced classes should be imported;
2) all methods should be implemented;
3) all methods need to have the necessary comments;
4) no potential bugs;
Now, you should review the codes in detail, propose one comment with the highest priority about the codes, and give me instructions on how to fix.
Now, tell me your comment with the highest priority and corresponding suggestions on revision.

Func_Prompt_Enhance

let output = node.output
node.task = output.split("<INFO>")[output.split("<INFO>").length - 1].toLowerCase().replace(/\./g, "").trim();
node.output = node.task

Planning_TestModification

Our developed source codes and corresponding test reports are listed below: 
Programming Language: "{language}"
Source Codes:
"{codes}"
Test Reports of Source Codes:
"{test_reports}"
Error Summary of Test Reports:
"{error_summary}"

Then you will output the content of the file including complete code.

like this:

index.html

```html

CODE

```

As the {assistant_role}, to satisfy the new user's demand and make the software execute smoothly and robustly, you should modify the codes based on the error summary.  Now, use the format exemplified above and modify the problematic codes based on the error summary.  Output the codes that you fixed based on the test reported and corresponding explanations (strictly follow the format defined above

Author

GPTs Description

YAML Structure

Planning_Prompt_Enhance

Planning_TestErrorSummary

Planning_CodeComplete

Func_Coding

Planning_CodeReviewModification

Planning_Coding

Planning_CodeReviewComment

Func_Prompt_Enhance

Planning_TestModification

	desc: "GPTs: write a website"

	outputs:
	overview:
	type: html
	reference: ${TestModification}

	nodes:
	- name: DemandUnderstand
	speak: "optimize your needs.."
	source:
	path: Planning_Prompt_Enhance
	func: Func_Prompt_Enhance
	inputs:
	task: ${inputs.input_text}

	- name: Coding
	speak: "coding your website.."
	source:
	path: Planning_Coding
	func: Func_Coding
	inputs:
	gui: ${DemandUnderstand.gui}
	ideas: ${DemandUnderstand.ideas}
	language: ${DemandUnderstand.language}
	modality: ${DemandUnderstand.modality}
	task: ${DemandUnderstand.task}

	- name: CodeComplete
	speak: "complete your code.."
	source:
	path: Planning_CodeComplete
	func: Func_Coding
	inputs:
	unimplemented_file: ${Coding.unimplemented_file}
	codes: ${Coding.output}
	language: ${DemandUnderstand.language}
	modality: ${DemandUnderstand.modality}
	task: ${DemandUnderstand.task}

	- name: CodeReviewComment
	speak: "code review your code.."
	source:
	path: Planning_CodeReviewComment
	inputs:
	codes: ${CodeComplete.output}
	ideas: ${DemandUnderstand.ideas}
	language: ${DemandUnderstand.language}
	modality: ${DemandUnderstand.modality}
	task: ${DemandUnderstand.task}

	- name: CodeReviewModification
	speak: "code review & rewrite your code.."
	source:
	path: Planning_CodeReviewModification
	func: Func_Coding
	inputs:
	comments: ${CodeReviewComment.output}
	codes: ${CodeComplete.output}
	ideas: ${DemandUnderstand.ideas}
	language: ${DemandUnderstand.language}
	modality: ${DemandUnderstand.modality}
	task: ${DemandUnderstand.task}

	- name: TestErrorSummary
	speak: "testing.."
	source:
	path: Planning_TestErrorSummary
	inputs:
	test_reports: "js & css should inline in index.html"
	codes: ${CodeReviewModification.output}
	language: ${DemandUnderstand.language}

	- name: TestModification
	speak: "rewrite success.."
	source:
	path: Planning_TestModification
	func: Func_Coding
	inputs:
	error_summary: ${TestErrorSummary.output}
	test_reports: ${TestErrorSummary.output}
	codes: ${CodeReviewModification.output}
	language: ${DemandUnderstand.language}

	[You are an professional prompt engineer that can improve user input prompt to make LLM better understand these prompts.]

	I will give you a short description of a software design requirement,
	please rewrite it into a detailed prompt that can make large language model know how to make this software better based this prompt,
	the prompt should ensure LLMs build a software that can be run correctly, which is the most import part you need to consider.
	remember that the revised prompt should not contain more than 200 words,
	here is the short description:"{task}".
	If the revised prompt is revised_version_of_the_description,
	then you should return a message in a format like "<INFO> revised_version_of_the_description", do not return messages in other formats.

	Our developed source codes and corresponding test reports are listed below:
	Programming Language: "{language}"
	Source Codes:
	"{codes}"
	Test Reports of Source Codes:
	"{test_reports}"
	According to my test reports, please locate and summarize the bugs that cause the problem.

	According to the new user's task and our software designs listed below:
	Task: "{task}".
	Modality: "{modality}".
	Programming Language: "{language}"
	Codes:
	"{codes}"

	Since we are a single page site, js and css code need to be inline within the page,
	like this:
	index.html
	```html
	CODE
	```
	As the {assistant_role}, to satisfy the complete function of our developed software, you have to implement all elements in the "index.html" file.

	let codes = ""
	let output = node.output
	if (output !== "") {
	const regex =/```html(.*?)```/mgs
	let match;
	while ((match = regex.exec(output)) !== null) {
	codes = match[1];
	}
	}
	node.output = codes
	node.speak = "coding..."
	node.unimplemented_file = "index.html"

	According to the new user's task, our designed product modality, languages and ideas, our developed first-edition source codes are listed below:
	Task: "{task}".
	Modality: "{modality}".
	Programming Language: "{language}"
	Ideas: "{ideas}"
	Codes:
	"{codes}"
	Comments on Codes:
	"{comments}"

	Since we are a single page site, js and css code need to be inline within the page, format like this:

	index.html
	```html
	CODE
	```

	As the {assistant_role}, to satisfy the new user's demand and make the software creative, executive and robust, you should modify corresponding codes according to the comments. Then, output the fixed codes strictly following the required format.

	let output = node.output
	node.task = output.split("<INFO>")[output.split("<INFO>").length - 1].toLowerCase().replace(/\./g, "").trim();
	node.output = node.task