Spaces:

jbilcke-hf
/

webapp-factory-wizardcoder

Running

App Files Files Community

Julian Bilcke commited on Jun 28, 2023

Commit

d32c6ac

1 Parent(s): 9e78595

improve prompt to make it generate less lorem ipsums

Browse files

Files changed (3) hide show

public/index.html +8 -7
src/daisy.mts +8 -5
src/index.mts +22 -15

public/index.html CHANGED Viewed

@@ -35,8 +35,8 @@
               name="promptDraft"
               x-model="promptDraft"
               rows="10"
-              placeholder="A simple page to compute the BMI (use SI units)"
-              class="input input-bordered w-full rounded text-stone-500 bg-stone-300 font-mono text-md md:text-lg h-24 md:h-48"
             ></textarea>
             <button
               class="btn disabled:text-stone-400"
@@ -107,11 +107,12 @@
         return {
           open: false,
           examples: {
-            'page about dolphins': 'a page about dolphins, with text and a few pictures'
-         },
           promptDraft:
-            new URLSearchParams(window.location.search).get("prompt") ||
-            "A simple page to compute the BMI (use SI units)",
           prompt: "",
           size: 0,
           minPromptSize: 16, // if you change this, you will need to also change in src/index.mts
@@ -138,7 +139,7 @@
               const elapsed = (lastTokenAt - this.lastTokenAt) / 1000;
               this.lastTokenAt = lastTokenAt;
               if (elapsed > this.timeoutInSec) {
-                console.log(`Something went wrong, it too more than ${this.timeoutInSec} seconds to generate a token.`);
                 this.state = "stopped";
                 return;
               }

               name="promptDraft"
               x-model="promptDraft"
               rows="10"
+              placeholder="Describe your web app"
+              class="input input-bordered w-full rounded text-stone-600 bg-stone-100 font-mono text-md md:text-lg h-24 md:h-48"
             ></textarea>
             <button
               class="btn disabled:text-stone-400"
         return {
           open: false,
           examples: {
+            "compute the BMI": "a simple page to compute the BMI (use SI units)",
+            "animals": "app listing various animals",
+            // "page about dolphins": "a page about dolphins, with text and a few pictures"
+          },
           promptDraft:
+            new URLSearchParams(window.location.search).get("prompt"),
           prompt: "",
           size: 0,
           minPromptSize: 16, // if you change this, you will need to also change in src/index.mts
               const elapsed = (lastTokenAt - this.lastTokenAt) / 1000;
               this.lastTokenAt = lastTokenAt;
               if (elapsed > this.timeoutInSec) {
+                console.log(`Something went wrong, it took more than ${this.timeoutInSec} seconds to generate a token.`);
                 this.state = "stopped";
                 return;
               }

src/daisy.mts CHANGED Viewed

@@ -1,5 +1,8 @@
-export const daisy = `# DaisyUI docs
-## To create a nice layout, wrap each article in:
-\`<article class="prose"></article>\`
-## Buttons
-\`<button class="btn"></button>\``

+export const daisy = `## 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 ..">
+`

src/index.mts CHANGED Viewed

@@ -54,7 +54,7 @@ app.get('/app', async (req, res) => {
   pending.queue.push(id)
-  const prefix = `<html><head><link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css' rel='stylesheet' type='text/css' /><script defer src='https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js'></script><script src='https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp'></script><title>Generated content</title><body`
   res.write(prefix)
   req.on('close', function() {
@@ -68,27 +68,34 @@ app.get('/app', async (req, res) => {
   const finalPrompt = `# Task
 Generate the following: ${req.query.prompt}
-# API Documentation
 ${daisy}
 # Guidelines
-- Never repeat the instruction, instead directly write the final code
-- Use a color scheme consistent with the brief and theme
-- To generate all your images, import from from this route: "/image?prompt=<description or caption of an image, photo or illustration>"
-- please be descriptive for the prompt, eg describe the scene in a few words (textures, characters, materials, camera type etc)
-- do not add more than 3 or 4 images
-- You must use Tailwind CSS and Daisy UI for the CSS classes, vanilla JS and Alpine.js for the JS.
-- All the 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, so please make the code compact (short function names etc)
-- Use a central layout by wrapping everything in a \`<div class='flex flex-col items-center'>\`
-# HTML output
-<html><head></head><body`
   try {
     let result = ''
     for await (const output of hf.textGenerationStream({
       inputs: finalPrompt,
-      parameters: { max_new_tokens: 1024 }
     })) {
       if (!pending.queue.includes(id)) {
         break

   pending.queue.push(id)
+  const prefix = `<html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script><title>Generated content</title><body>`
   res.write(prefix)
   req.on('close', function() {
   const finalPrompt = `# Task
 Generate the following: ${req.query.prompt}
+# API Doc
 ${daisy}
 # Guidelines
+- Never repeat the instructions, instead write the final code
+- To generate images use the /image endpoint: <img src="/image?prompt=caption of the photo" />
+- Be descriptive for photo caption, use at last 10 words.
+- **NEVER** add more than 3 or 4 images
+- Never write lists that are too long
+- You must use TailwindCSS utility classes (Tailwind is already injected in the page).
+- If needed, embed new custom JS code using <script>...</script>
+- You MUST use English, not Latin! Write in English! Never write "lorem ipsum.."
+- Use a central layout to wrap everything in a <div class='flex flex-col items-center'>
+# Output
+<html>
+<head>
+<title>Site</title>
+</head>
+<body>`
   try {
     let result = ''
     for await (const output of hf.textGenerationStream({
       inputs: finalPrompt,
+      parameters: {
+        do_sample: true,
+        max_new_tokens: 1200,
+        return_full_text: false,
+      }
     })) {
       if (!pending.queue.includes(id)) {
         break