big improvement to the quality

public/index.html

@@ -42,11 +42,11 @@
               Examples:
 
               <a href="/?prompt=a simple page to compute the BMI using metric units" class="text-bold underline">compute my BMI</a>,
-              <a href="/?prompt=app listing various animals from the savanna, with their photos" class="text-bold underline">photos of animals</a>
+              <a href="/?prompt=app listing various types of llamas with their photos" class="text-bold underline">photos of llamas</a>
             </p>
             <button
               class="btn disabled:text-stone-400"
-              @click="open = true, prompt = promptDraft, state = state === 'stopped' ? 'loading' : 'stopped'"
+              @click="open = true, prompt = promptDraft, state = state === 'stopped' ? 'loading' : 'stopped', stopGeneration()"
               :class="promptDraft.length < minPromptSize ? 'btn-neutral' : state === 'stopped' ? 'btn-accent' : 'btn-warning'"
               :disabled="promptDraft.length < minPromptSize"
             >
@@ -61,30 +61,39 @@
                   WizardCoder-15B-1.0
                 </a>
               </p>
-              <p>Powered by 🤗 <a href="https://huggingface.co/inference-endpoints" class="underline" target="_blank">Inference Endpoints</a>.</p>
+              <p>Powered by 🤗 <a href="https://huggingface.co/inference-endpoints" class="underline" target="_blank">Inference Endpoints</a></p>
               <p class="py-3 text-stone-700" x-show="state === 'loading'">
                 Waiting for the stream to begin (might take a few minutes)..
               </p>
               <p class="py-3 text-stone-700" x-show="state === 'streaming'">
-                Streamed <span x-text="humanFileSize(size, true, 2)"></span> so far..<br />Note: this version generates up
-                to 1200 tokens.
+                Content size: <span x-text="humanFileSize(size, true, 2)"></span><br />Note: this version generates up
+                to 1150 tokens.
               </p>
             </div>
           </div>
         </div>
       </div>
       <div
-        class="flex transition-[width] delay-150 ease-in-out md:h-screen"
+        class="flex flex-col transition-[width] delay-150 ease-in-out md:h-screen"
         :class="open ? 'w-full md:w-4/6' : 'w-full md:w-0'"
       >
         <iframe
           id="iframe"
-          class="border-none w-full md:min-h-screen p-4 md:p-8"
+          class="border-none w-full md:min-h-screen"
           :src="!open
             ? '/placeholder.html'
             : `/app?prompt=${encodeURIComponent(prompt)}`
           "
         ></iframe>
+
+        <div
+          x-show="state !== 'stopped'"
+          class="flex w-full -mt-20 items-end justify-center pointer-events-none">
+          <div class="flex flex-row py-3 px-8 text-center bg-stone-200 text-stone-600 rounded-md shadow-md">
+            <div class="animate-bounce duration-150 mr-1">🤖</div>
+            <div>Generating your app..</div>
+          </div>
+        </div>
       </div>
     </div>
     <script>
@@ -118,6 +127,11 @@
 
         return bytes.toFixed(dp) + " " + units[u];
       }
+
+      function stopGeneration() {
+        document?.getElementById("iframe")?.stop();
+      }
+
       function app() {
         return {
           open: false,
@@ -126,7 +140,7 @@
           prompt: "",
           size: 0,
           minPromptSize: 16, // if you change this, you will need to also change in src/index.mts
-          timeoutInSec: 10, // time before we determine something went wrong
+          timeoutInSec: 5, // time before we determine something went wrong
           state: "stopped",
           lastTokenAt: +new Date(),
           init() {
@@ -143,20 +157,24 @@
                 this.state = "loading";
                 return;
               }
-              this.size = new Blob([html]).size;
+
               this.state = "streaming";
-              const lastTokenAt = +new Date();
-              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;
+
+              const now = +new Date();
+              const newSize = new Blob([html]).size;
+              const hasChanged = newSize !== this.size;
+
+              if (hasChanged) {
+                this.lastTokenAt = now;
               }
-              if (html.includes("</html>")) {
-                // console.log('We reached the natural end of the stream, it seems.')
-                // this.state === 'stopped'
-                return;
+
+              this.size = newSize;
+     
+              const timeSinceLastUpdate = (now - this.lastTokenAt) / 1000;
+
+              if (timeSinceLastUpdate > this.timeoutInSec) {
+                console.log(`no changed detected for the past ${this.timeoutInSec} seconds -> considering we're done`);
+                this.state = "stopped";
               }
             }, 100);
           },

src/daisy.mts

@@ -1,8 +1,7 @@
-export const daisy = `## DaisyUI docs
-### To create a nice layout, wrap each article in:
+export const daisy = `# DaisyUI docs
+## To create a nice layout, wrap each article in:
 <article class="prose"></article>
-### Use appropriate CSS classes
+## Use appropriate CSS classes
 <button class="btn ..">
 <table class="table ..">
-<footer class="footer ..">
-`
+<footer class="footer ..">`

src/index.mts

@@ -10,7 +10,7 @@ const app = express()
 const port = 7860
 
 const minPromptSize = 16 // if you change this, you will need to also change in public/index.html
-const timeoutInSec = 30 * 60
+const timeoutInSec = 10 * 60
 
 console.log('timeout set to 30 minutes')
 
@@ -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"></script><title>Generated content</title><body>`
+  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"></script><title>Generated content</title><body class="p-4 md:p-8">`
   res.write(prefix)
 
   req.on('close', function() {
@@ -67,23 +67,22 @@ app.get('/app', async (req, res) => {
 
 
   const finalPrompt = `# Task
-Generate the following: ${req.query.prompt}
-# API Doc
+Generate ${req.query.prompt}
 ${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" />
-- Only generate a few images, and be descriptive for photo caption, use at last 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'>
-# Output
+# 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>Site</title>
+<title>App</title>
 </head>
-<body>`
+<body class="p-4 md:p-8">`
 
   try {
     let result = ''
@@ -91,7 +90,9 @@ ${daisy}
       inputs: finalPrompt,
       parameters: {
         do_sample: true,
-        max_new_tokens: 1200,
+
+        // hard limit for max_new_tokens is 1512
+        max_new_tokens: 1150,
         return_full_text: false,
       }
     })) {
@@ -127,15 +128,17 @@ app.get('/image', async (req, res) => {
   try {
     const blob = await hfi.textToImage({
       inputs: [
-        `${req.query.prompt || 'generic placeholder'}`,
+        `${req.query.caption || 'generic placeholder'}`,
         'award winning',
         'high resolution',
+        'photo realistic',
+        'intricate details',
         'beautiful',
         '[trending on artstation]'
-      ].join(','),
-      model: 'stabilityai/stable-diffusion-2',
+      ].join(', '),
+      model: 'stabilityai/stable-diffusion-2-1',
       parameters: {
-        negative_prompt: 'blurry, cropped, low quality, ugly',
+        negative_prompt: 'blurry, artificial, cropped, low quality, ugly',
       }
     })
     const buffer = Buffer.from(await blob.arrayBuffer())