Spaces:

jbilcke-hf
/

webapp-factory-wizardcoder

Running

App Files Files Community

Julian Bilcke commited on Jun 28, 2023

Commit

e93a881

1 Parent(s): 02ac244

testing fixes for space iframe integration

Browse files

Files changed (1) hide show

public/index.html +10 -10

public/index.html CHANGED Viewed

@@ -9,13 +9,13 @@
   <body>
     <div class="flex flex-col md:flex-row" x-data="app()" x-init="init()">
       <div
-        class="hero md:h-full bg-stone-100 transition-[width] delay-150 ease-in-out"
         :class="open ? 'w-full md:w-2/6' : 'w-full md:w-6/6'"
       >
         <div class="hero-content text-center">
           <div class="flex flex-col w-full md:max-w-xl space-y-3 md:space-y-6">
             <h1
-              class="font-bold text-stone-600 mb-1 md:mb-4 transition-all delay-150 ease-in-out"
               :class="open
               ? 'text-2xl md:text-3xl lg:text-4xl'
               : 'text-2xl md:text-3xl lg:text-6xl'"
@@ -38,7 +38,7 @@
               placeholder="Describe your web app"
               class="input input-bordered w-full rounded text-stone-800 bg-stone-100 font-mono text-md md:text-lg h-24 md:h-48"
             ></textarea>
-            <p class="py-3 text-stone-700 text-italic">
               Examples:
               <a href="/?prompt=a simple page to compute the BMI using metric units" class="text-bold underline">compute my BMI</a>,
@@ -54,19 +54,19 @@
               <span x-show="promptDraft.length >= minPromptSize && state !== 'stopped'">Stop now</span>
               <span x-show="promptDraft.length >= minPromptSize && state === 'stopped'">Generate!</span>
             </button>
-            <div class="flex flex-col text-stone-700">
-              <p class="py-3 text-stone-700">
                 Model used:
                 <a href="https://huggingface.co/WizardLM/WizardCoder-15B-V1.0" class="underline" target="_blank">
                   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 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'">
-                Content size: <span x-text="humanFileSize(size, true, 2)"></span><br />Note: this version generates up
                 to 1150 tokens.
               </p>
             </div>
@@ -74,12 +74,12 @@
         </div>
       </div>
       <div
-        class="flex flex-col transition-[width] delay-150 ease-in-out md:h-full"
         :class="open ? 'w-full md:w-4/6' : 'w-full md:w-0'"
       >
         <iframe
           id="iframe"
-          class="border-none w-full md:min-h-full"
           :src="!open
             ? '/placeholder.html'
             : `/app?prompt=${encodeURIComponent(prompt)}`

   <body>
     <div class="flex flex-col md:flex-row" x-data="app()" x-init="init()">
       <div
+        class="hero md:h-screen bg-stone-100 transition-[width] delay-150 ease-in-out"
         :class="open ? 'w-full md:w-2/6' : 'w-full md:w-6/6'"
       >
         <div class="hero-content text-center">
           <div class="flex flex-col w-full md:max-w-xl space-y-3 md:space-y-6">
             <h1
+              class="font-bold text-stone-600 mb-1 md:mb-3 transition-all delay-150 ease-in-out"
               :class="open
               ? 'text-2xl md:text-3xl lg:text-4xl'
               : 'text-2xl md:text-3xl lg:text-6xl'"
               placeholder="Describe your web app"
               class="input input-bordered w-full rounded text-stone-800 bg-stone-100 font-mono text-md md:text-lg h-24 md:h-48"
             ></textarea>
+            <p class="py-1 md:py-2 text-stone-700 text-italic">
               Examples:
               <a href="/?prompt=a simple page to compute the BMI using metric units" class="text-bold underline">compute my BMI</a>,
               <span x-show="promptDraft.length >= minPromptSize && state !== 'stopped'">Stop now</span>
               <span x-show="promptDraft.length >= minPromptSize && state === 'stopped'">Generate!</span>
             </button>
+            <div class="flex flex-col text-stone-700 space-y-1 md:space-y-2">
+              <p class="text-stone-700">
                 Model used:
                 <a href="https://huggingface.co/WizardLM/WizardCoder-15B-V1.0" class="underline" target="_blank">
                   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 class="text-stone-700" x-show="state === 'loading'">
                 Waiting for the stream to begin (might take a few minutes)..
               </p>
+              <p class="text-stone-700" x-show="state === 'streaming'">
+                Content size: <span x-text="humanFileSize(size, true, 2)"></span>. This version generates up
                 to 1150 tokens.
               </p>
             </div>
         </div>
       </div>
       <div
+        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"
           :src="!open
             ? '/placeholder.html'
             : `/app?prompt=${encodeURIComponent(prompt)}`