fix

public/index.html

@@ -21,21 +21,21 @@
               <p>No 3rd party service or token needed: feel free to duplicate and create interesting forks of this space 🔧</p>
             </div>
             <textarea
-              name="draft"
-              x-model="draft"
+              name="promptDraft"
+              x-model="promptDraft"
               rows="10"
               placeholder="a pong clone made using the canvas.."
               class="input input-bordered w-full rounded text-lg text-stone-500 bg-stone-300 font-mono h-48"
             ></textarea>
             <button
               class="btn disabled:text-stone-400"
-              @click="open = true, state = state === 'stopped' ? 'loading' : 'stopped'"
-              :class="draft.length < minPromptSize ? 'btn-neutral' : state === 'stopped' ? 'btn-accent' : 'btn-warning'"
-              :disabled="draft.length < minPromptSize"
+              @click="open = true, prompt = promptDraft, state = state === 'stopped' ? 'loading' : 'stopped'"
+              :class="promptDraft.length < minPromptSize ? 'btn-neutral' : state === 'stopped' ? 'btn-accent' : 'btn-warning'"
+              :disabled="promptDraft.length < minPromptSize"
             >
-              <span x-show="draft.length < minPromptSize">Prompt too short to generate</span>
-              <span x-show="draft.length >= minPromptSize && state !== 'stopped'">Stop now</span>
-              <span x-show="draft.length >= minPromptSize && state === 'stopped'">Generate!</span>
+              <span x-show="promptDraft.length < minPromptSize">Prompt too short to generate</span>
+              <span x-show="promptDraft.length >= minPromptSize && state !== 'stopped'">Stop now</span>
+              <span x-show="promptDraft.length >= minPromptSize && state === 'stopped'">Generate!</span>
             </button>
             <span class="py-3" x-show="state === 'loading'">Waiting for the stream to begin (might take a few minutes)..</span>
             <span class="py-3" x-show="state === 'streaming'">
@@ -49,9 +49,9 @@
         <iframe
           id="iframe"
           class="border-none w-full h-screen"
-          :src="(draft.length < minPromptSize)
+          :src="!open
             ? '/placeholder.html'
-            : `/app?prompt=${draft}`
+            : `/app?prompt=${encodeURIComponent(prompt)}`
           "></iframe>
       </div>
     </div>
@@ -90,7 +90,8 @@ function humanFileSize(bytes, si=false, dp=1) {
 function app() {
   return {
     open: false,
-    draft: new URLSearchParams(window.location.search).get('prompt') || '',
+    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
     timeoutInSec: 3 * 60, // time before we determine something went wrong
@@ -133,4 +134,4 @@ function app() {
     <script src="/js/alpinejs@3.12.2.js"></script>
     <script src="/js/tailwindcss@3.3.2.js"></script>
   </body>
-</html>
+</html>

src/index.mts

@@ -132,7 +132,7 @@ ${daisy}
 - 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, 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">\`
+- Use a central layout by wrapping everything in a \`<div class="flex flex-col items-center">\`
 # HTML Code
 ${prefix}`
 
@@ -167,4 +167,4 @@ ${prefix}`
   
 })
 
-app.listen(port, () => { console.log(`Open http://localhost:${port}/?prompt=a%20webpage%20recipe%20for%20making%20chocolate%20chip%20cookies`) })
+app.listen(port, () => { console.log(`Open http://localhost:${port}/?prompt=a%20webpage%20recipe%20for%20making%20chocolate%20chip%20cookies`) })