From 54ddde282008d4fb4b84c21e39becdd0a5b24196 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Tue, 14 Nov 2023 14:56:46 -0500 Subject: [PATCH] add a prompt library --- backend/llm.py | 5 ++--- backend/main.py | 10 ++++++---- backend/prompts.py | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 40 insertions(+), 7 deletions(-) create mode 100644 backend/prompts.py diff --git a/backend/llm.py b/backend/llm.py index 09493f5..5c38fc5 100644 --- a/backend/llm.py +++ b/backend/llm.py @@ -5,7 +5,7 @@ from openai import AsyncOpenAI MODEL_GPT_4_VISION = "gpt-4-vision-preview" # TODO: Remove after testing -MODEL_GPT_4_VISION = "gpt-3.5-turbo-0613" +MODEL_GPT_4_VISION = "gpt-3.5-turbo-1106" client = AsyncOpenAI(api_key=os.environ.get("OPENAI_API_KEY")) @@ -18,8 +18,7 @@ async def stream_openai_response(messages, callback: Callable[[str], Awaitable[N # Add 'max_tokens' only if the model is a GPT4 vision model if model == MODEL_GPT_4_VISION: - # TODO: Remove after testing - # params["max_tokens"] = 4096 + params["max_tokens"] = 4096 params["temperature"] = 0 completion = await client.chat.completions.create(**params) diff --git a/backend/main.py b/backend/main.py index cea74d1..7034bfe 100644 --- a/backend/main.py +++ b/backend/main.py @@ -1,6 +1,8 @@ # Load environment variables first from dotenv import load_dotenv +from prompts import assemble_prompt + load_dotenv() @@ -19,10 +21,10 @@ async def stream_code_test(websocket: WebSocket): async def process_chunk(content): await websocket.send_json({"type": "chunk", "value": content}) + messages = assemble_prompt("") + print(messages) + await stream_openai_response( - [ - {"role": "system", "content": "Build a webapp"}, - {"role": "user", "content": "Build a hello world app"}, - ], + messages, lambda x: process_chunk(x), ) diff --git a/backend/prompts.py b/backend/prompts.py new file mode 100644 index 0000000..13eaafd --- /dev/null +++ b/backend/prompts.py @@ -0,0 +1,32 @@ +SYSTEM_PROMPT = """ +You are an expert Tailwind developer +You take screenshots of a reference web page from the user, and then build single page apps +using Tailwind, HTML and JS. +You might also be given a screenshot of a web page that you have already built, and asked to +update it to look more like the reference image. + +- Make sure the app looks exactly like the screenshot. +- Pay close attention to background color, text color, font size, font family, +padding, margin, border, etc. Match the colors and sizes exactly. +- Use the exact text from the screenshot. +- Do not add comments in the code such as "" and "" in place of writing the full code. WRITE THE FULL CODE. +- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "" or bad things will happen. +- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later. + +In terms of libraries, + +- Use this script to include Tailwind: + +- You can use Google Fonts +- Font Awesome for icons: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css) as needed. + +Return only the full code in tags. +Do not include markdown "```" or "```html" at the start or end. +""" + + +def assemble_prompt(screenshot_url): + return [ + {"role": "system", "content": SYSTEM_PROMPT}, + {"role": "user", "content": "Build a hello world app"}, + ]