Design2Code：前端离失业还有多远

def direct_prompting(openai_client, image_file):
	'''
	{original input image + prompt} -> {output html}
	'''

	## the prompt 
	direct_prompt = ""
	direct_prompt += "You are an expert web developer who specializes in HTML and CSS.\\n"
	direct_prompt += "A user will provide you with a screenshot of a webpage.\\n"
	direct_prompt += "You need to return a single html file that uses HTML and CSS to reproduce the given website.\\n"
	direct_prompt += "Include all CSS code in the HTML file itself.\\n"
	direct_prompt += "If it involves any images, use \\"rick.jpg\\" as the placeholder.\\n"
	direct_prompt += "Some images on the webpage are replaced with a blue rectangle as the placeholder, use \\"rick.jpg\\" for those as well.\\n"
	direct_prompt += "Do not hallucinate any dependencies to external files. You do not need to include JavaScript scripts for dynamic interactions.\\n"
	direct_prompt += "Pay attention to things like size, text, position, and color of all the elements, as well as the overall layout.\\n"
	direct_prompt += "Respond with the content of the HTML+CSS file:\\n"
	
	## encode image 
	base64_image = encode_image(image_file)

	## call GPT-4V
	html, prompt_tokens, completion_tokens, cost = gpt4v_call(openai_client, base64_image, direct_prompt)

	return html, prompt_tokens, completion_tokens, cost

def text_augmented_prompting(openai_client, image_file):
	'''
	{original input image + extracted text + prompt} -> {output html}
	'''

	## extract all texts from the webpage 
	with open(image_file.replace(".png", ".html"), "r") as f:
		html_content = f.read()
	texts = "\\n".join(extract_text_from_html(html_content))

	## the prompt
	text_augmented_prompt = ""
	text_augmented_prompt += "You are an expert web developer who specializes in HTML and CSS.\\n"
	text_augmented_prompt += "A user will provide you with a screenshot of a webpage, along with all texts that they want to put on the webpage.\\n"
	text_augmented_prompt += "The text elements are:\\n" + texts + "\\n"
	text_augmented_prompt += "You should generate the correct layout structure for the webpage, and put the texts in the correct places so that the resultant webpage will look the same as the given one.\\n"
	text_augmented_prompt += "You need to return a single html file that uses HTML and CSS to reproduce the given website.\\n"
	text_augmented_prompt += "Include all CSS code in the HTML file itself.\\n"
	text_augmented_prompt += "If it involves any images, use \\"rick.jpg\\" as the placeholder.\\n"
	text_augmented_prompt += "Some images on the webpage are replaced with a blue rectangle as the placeholder, use \\"rick.jpg\\" for those as well.\\n"
	text_augmented_prompt += "Do not hallucinate any dependencies to external files. You do not need to include JavaScript scripts for dynamic interactions.\\n"
	text_augmented_prompt += "Pay attention to things like size, text, position, and color of all the elements, as well as the overall layout.\\n"
	text_augmented_prompt += "Respond with the content of the HTML+CSS file (directly start with the code, do not add any additional explanation):\\n"

	## encode image 
	base64_image = encode_image(image_file)

	## call GPT-4V
	html, prompt_tokens, completion_tokens, cost = gpt4v_call(openai_client, base64_image, text_augmented_prompt)

	return html, prompt_tokens, completion_tokens, cost

def visual_revision_prompting(openai_client, input_image_file, original_output_image):
	'''
	{input image + initial output image + initial output html + oracle extracted text} -> {revised output html}
	'''

	## load the original output
	with open(original_output_image.replace(".png", ".html"), "r") as f:
		original_output_html = f.read()

	## encode the image 
	input_image = encode_image(input_image_file)
	original_output_image = encode_image(original_output_image)

	## extract all texts from the webpage 
	with open(input_image_file.replace(".png", ".html"), "r") as f:
		html_content = f.read()
	texts = "\\n".join(extract_text_from_html(html_content))

	prompt = ""
	prompt += "You are an expert web developer who specializes in HTML and CSS.\\n"
	prompt += "I have an HTML file for implementing a webpage but it has some missing or wrong elements that are different from the original webpage. The current implementation I have is:\\n" + original_output_html + "\\n\\n"
	prompt += "I will provide the reference webpage that I want to build as well as the rendered webpage of the current implementation.\\n"
	prompt += "I also provide you all the texts that I want to include in the webpage here:\\n"
	prompt += "\\n".join(texts) + "\\n\\n"
	prompt += "Please compare the two webpages and refer to the provided text elements to be included, and revise the original HTML implementation to make it look exactly like the reference webpage. Make sure the code is syntactically correct and can render into a well-formed webpage. You can use \\"rick.jpg\\" as the placeholder image file.\\n"
	prompt += "Pay attention to things like size, text, position, and color of all the elements, as well as the overall layout.\\n"
	prompt += "Respond directly with the content of the new revised and improved HTML file without any extra explanations:\\n"

	html, prompt_tokens, completion_tokens, cost = gpt4v_revision_call(openai_client, input_image, original_output_image, prompt)

	return html, prompt_tokens, completion_tokens, cost