ok, let's use any model from the HF Inference API

README.md

@@ -1,5 +1,5 @@
 ---
-title: Webapp Factory OpenAssistant
+title: Webapp Factory (any model)
 emoji: 🏭🧙
 colorFrom: brown
 colorTo: red
@@ -10,7 +10,7 @@ app_port: 7860
 
 A basic demo of generating HTML content using the Hugging Face Inference API
 
-This version is using OpenAssistant, and can only work to generate basic HTML content.
+This version can use any model from the Hugging Face Inference API.
 
 Ready to be used in a Hugging Face Space.
 
@@ -39,6 +39,6 @@ npm run docker
 This script is a shortcut executing the following commands:
 
 ```bash
-docker build -t webapp-factory-openassistant .
-docker run -it -p 7860:7860 webapp-factory-openassistant
-```
+docker build -t webapp-factory-any-model .
+docker run -it -p 7860:7860 webapp-factory-any-model
+```

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "webapp-factory-openassistant",
+  "name": "webapp-factory-any-model",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "webapp-factory-openassistant",
+      "name": "webapp-factory-any-model",
       "version": "1.0.0",
       "license": "Apache License",
       "dependencies": {

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "webapp-factory-openassistant",
+  "name": "webapp-factory-any-model",
   "version": "1.0.0",
   "description": "A basic demo of generating HTML content using the Hugging Face Inference API. Designed to run in a Hugging Face space.",
   "main": "src/index.mts",
   "scripts": {
     "start": "node --loader ts-node/esm src/index.mts",
     "docker": "npm run docker:build && npm run docker:run",
-    "docker:build": "docker build -t webapp-factory-openassistant .",
-    "docker:run": "docker run -it -p 7860:7860 webapp-factory-openassistant"
+    "docker:build": "docker build -t webapp-factory-any-model .",
+    "docker:run": "docker run -it -p 7860:7860 webapp-factory-any-model"
   },
   "author": "Julian Bilcke <julian.bilcke@huggingface.co>",
   "license": "Apache License",

public/index.html

@@ -19,25 +19,30 @@
             <div
               class="py-2 space-y-4 text-stone-600 transition-all delay-150 ease-in-out"
               :class="open ? 'md:text-lg lg:text-xl' : 'text-2xl'">
-              <p>A space to generate web content with OpenAssistant using the Inference API.</p>
-              <p>Feel free to duplicate and create interesting forks 🔧</p>
+              <p>A space to generate web content using models hosted on Huggging Face.</p>
             </div>
+            <input
+              type="text"
+              name="modelDraft"
+              x-model="modelDraft"
+              class="input input-bordered w-full rounded text-lg text-stone-500 bg-stone-200 font-mono"
+            />
             <textarea
-              name="draft"
-              x-model="draft"
+              name="promptDraft"
+              x-model="promptDraft"
               rows="10"
               placeholder="A simple page to compute the bmi, using kg and meters"
               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, prompt = draft, 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, model = modelDraft, 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'">
@@ -53,7 +58,7 @@
           class="border-none w-full h-screen"
           :src="!open
             ? '/placeholder.html'
-            : `/app?prompt=${prompt}`
+            : `/app?model=${encodeURIComponent(model)}&prompt=${encodeURIComponent(prompt)}`
           "></iframe>
       </div>
     </div>
@@ -90,10 +95,13 @@ function humanFileSize(bytes, si=false, dp=1) {
   return bytes.toFixed(dp) + ' ' + units[u];
 }
 function app() {
+  const defaultModel = 'OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5'
   return {
     open: false,
-    draft: new URLSearchParams(window.location.search).get('prompt') || 'A simple page to compute the bmi, using kg and meters',
+    promptDraft: new URLSearchParams(window.location.search).get('prompt') || 'A simple page to compute the bmi, using kg and meters',
     prompt: '',
+    modelDraft: defaultModel,
+    model: defaultModel,
     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

src/index.mts

@@ -55,6 +55,10 @@ app.get("/debug", (req, res) => {
 
 app.get("/app", async (req, res) => {
 
+  const model = `${req.query.model || 'OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5'}`
+
+  console.log('model:', model)
+
   if (`${req.query.prompt}`.length < minPromptSize) {
     res.write(`prompt too short, please enter at least ${minPromptSize} characters`)
     res.end()
@@ -96,7 +100,7 @@ ${prefix}`
   try {
     let result = ''
     for await (const output of hf.textGenerationStream({
-      model: 'OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5',
+      model,
       inputs: finalPrompt,
       parameters: { max_new_tokens: 1024 }
     })) {