Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add a prompt library

Browse Source
This commit is contained in:
Abi Raja 2023-11-14 14:56:46 -05:00
parent 444c16abe6
commit 54ddde2820
3 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
backend/llm.py
View File

@ -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)

10
backend/main.py
View File

@ -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),
)

32
backend/prompts.py Normal file
View File

@ -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 "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" 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 "<!-- Repeat for each news item -->" 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:
<script src="https://cdn.tailwindcss.com"></script>
- 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 <html></html> 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"},
]