Spaces:

arsalagrey
/

streaming-text-generation-vue

Running

App Files Files Community

Arsala Grey commited on Oct 18, 2023

Commit

fac66ea

1 Parent(s): 0d92137

refactored code

Browse files

Files changed (2) hide show

index.html +6 -78
main.js +74 -0

index.html CHANGED Viewed

@@ -6,97 +6,25 @@
     <title>My static Space</title>
     <link rel="stylesheet" href="./style.css" />
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-    <script type="module">
-      const { createApp, ref, onMounted } = Vue;
-      import { HfInference } from "https://cdn.skypack.dev/@huggingface/[email protected]";
-      const app = createApp({
-        setup() {
-          const title = ref("Mistral-7B-Instruct-v0.1");
-          const subtitle = ref("huggingface.js");
-          const token = ref(localStorage.getItem("token") || "");
-          const inputText = ref("Write an essay about Star Wars");
-          const generatedText = ref("");
-          let controller;
-          const textStreamRes = async function* (hf, controller, input) {
-            let tokens = [];
-            for await (const output of hf.textGenerationStream(
-              {
-                model: "mistralai/Mistral-7B-Instruct-v0.1",
-                inputs: `[INST]${input}[/INST]`,
-                parameters: { max_new_tokens: 450 },
-              },
-              {
-                use_cache: false,
-                signal: controller.signal,
-              }
-            )) {
-              tokens.push(output.token.text);
-              generatedText.value += output.token.text;
-              yield;
-            }
-          };
-          const run = async () => {
-            controller = new AbortController();
-            localStorage.setItem("token", token.value);
-            const hf = new HfInference(token.value);
-            try {
-              for await (const text of textStreamRes(
-                hf,
-                controller,
-                inputText.value
-              )) {
-                console.log(text);
-              }
-            } catch (e) {
-              console.log(e);
-            }
-          };
-          const abort = () => {
-            if (controller) {
-              controller.abort();
-            }
-          };
-          onMounted(() => {
-            if (localStorage.getItem("token")) {
-              token.value = localStorage.getItem("token");
-            }
-          });
-          return {
-            title,
-            subtitle,
-            token,
-            inputText,
-            generatedText,
-            run,
-            abort,
-          };
-        },
-      }).mount("#app");
-    </script>
   </head>
   <body>
     <div id="app">
       <header>
-        <h1>{{title}}</h1>
-        <h2>{{subtitle}}</h2>
       </header>
       <input v-model="token" placeholder="HF-TOKEN" type="password" />
       <textarea
-        v-model="inputText"
         style="width: 100%; height: 100px"
       ></textarea>
       <div>
         <button @click="run">GENERATE</button>
-        <button @click="abort">ABORT</button>
       </div>
       <div>{{generatedText}}</div>
     </div>
   </body>
 </html>

     <title>My static Space</title>
     <link rel="stylesheet" href="./style.css" />
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   </head>
   <body>
     <div id="app">
       <header>
+        <h1>Generate Text With Mistral-7B-Instruct-v0.1</h1>
       </header>
+      <h3>Hugging Face Token</h3>
       <input v-model="token" placeholder="HF-TOKEN" type="password" />
+      <h3>Prompt</h3>
       <textarea
+        v-model="userPrompt"
         style="width: 100%; height: 100px"
       ></textarea>
       <div>
         <button @click="run">GENERATE</button>
+        <button @click="stop">STOP</button>
       </div>
       <div>{{generatedText}}</div>
     </div>
+    <script type="module" src="./main.js"></script>
   </body>
 </html>

main.js ADDED Viewed

	@@ -0,0 +1,74 @@

+const { createApp, ref, onMounted } = Vue;
+import { HfInference } from "https://cdn.skypack.dev/@huggingface/[email protected]";
+const app = createApp({
+    setup() {
+        const token = ref(localStorage.getItem("token") || "");
+        const userPrompt = ref("Write an essay about Star Wars");
+        const generatedText = ref("");
+        let controller;
+        const createTextGenerationStream = (hfInstance, prompt, abortControllerSignal) => {
+            return hfInstance.textGenerationStream(
+                {
+                    model: "mistralai/Mistral-7B-Instruct-v0.1",
+                    inputs: `[INST]${prompt}[/INST]`,
+                    parameters: { max_new_tokens: 450 },
+                },
+                {
+                    use_cache: false,
+                    signal: abortControllerSignal,
+                }
+            );
+        };
+        const generateTextStream = async function* (hfInstance, abortSignal, prompt) {
+            let textFragments = [];
+            for await (const output of createTextGenerationStream(hfInstance, prompt, abortSignal)) {
+                textFragments.push(output.token.text);
+                generatedText.value += output.token.text;
+                yield;
+            }
+        };
+        const run = async () => {
+            controller = new AbortController();
+            localStorage.setItem("token", token.value);
+            const hfInstance = new HfInference(token.value);
+            try {
+                for await (const text of generateTextStream(
+                    hfInstance,
+                    controller.signal,
+                    userPrompt.value
+                )) {
+                    console.log(text);
+                }
+            } catch (e) {
+                console.log(e);
+            }
+        };
+        const stop = () => {
+            if (controller) {
+                controller.abort();
+            }
+        };
+        onMounted(() => {
+            if (localStorage.getItem("token")) {
+                token.value = localStorage.getItem("token");
+            }
+        });
+        return {
+            token,
+            userPrompt,
+            generatedText,
+            run,
+            stop,
+        };
+    },
+});
+app.mount("#app");