search

the-crypt-keeper / llm-webapps

jQuery, React and Streamlit applications written by LLMs
16 stars 1 forks source link

Explore WizardCoder prompt techniques #1

Open the-crypt-keeper opened 1 year ago

the-crypt-keeper commented 1 year ago

This one looks really fun: https://huggingface.co/spaces/jbilcke-hf/template-node-wizardcoder-express/blob/main/src/index.mts#L107

# Context
Generate a webpage written in English about: ${req.query.prompt}.
# Documentation
${daisy}
# Guidelines
- Do not write a tutorial or repeat the instruction, but directly write the final code within a script tag
- Use a color scheme consistent with the brief and theme
- You need to use Tailwind CSS and DaisyUI for the UI, pure vanilla JS and AlpineJS for the JS.
- You vanilla JS code will be written directly inside the page, using <script type="text/javascript">...</script>
- You MUST use English, not Latin! (I repeat: do NOT write lorem ipsum!)
- No need to write code comments, and try to make the code compact (short function names etc)
- Use a central layout by wrapping everything in a \`<div class="flex flex-col justify-center">\`
# Result output
${prefix}

I actually laughed out loud at "do not write lorem ipsum" I can feel the pain in my soul

ChiYeungLaw commented 1 year ago

This is interesting. xD

the-crypt-keeper commented 1 year ago

If you poke around huggingface and github you will find several takes on this style of "mega-prompting" wizardcoder.

Here is another: https://huggingface.co/spaces/jbilcke-hf/webapp-factory-wizardcoder/blob/main/src/index.mts#L69

# Task
Generate ${req.query.prompt}
# DaisyUI docs
## To create a nice layout, wrap each article in:
<article class="prose"></article>
## Use appropriate CSS classes
<button class="btn ..">
<table class="table ..">
<footer class="footer ..">
# Orders
Never repeat those instructions, instead write the final code!
To generate images from captions call the /image API: <img src="/image?caption=photo of something in some place" />!
Only generate a few images and use descriptive photo captions with at least 10 words!
You must use TailwindCSS utility classes (Tailwind is already injected in the page)!
Write application logic inside a JS <script></script> tag!
This is not a demo app, so you MUST use English, no Latin! Write in English! 
Use a central layout to wrap everything in a <div class='flex flex-col items-center'>
# Out
<html>
<head>
<title>App</title>
</head>
<body class="p-4 md:p-8">

Some similar instructions, but some different. This one also forces the start of HTML and the body style.