Spaces:

arsalagrey
/

streaming-text-generation-vue

Running

App Files Files Community

Arsala Grey commited on Oct 26, 2023

Commit

c2d5ffe

1 Parent(s): 247453d

added temp param and restructured ui

Browse files

Files changed (3) hide show

index.html +42 -22
index.js +22 -20
utils.css → main.css +32 -27

index.html CHANGED Viewed

@@ -4,43 +4,63 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>Generate Text Stream - HuggingFace.js Live Examples</title>
-    <link rel="stylesheet" href="/utils.css" />
     <link rel="stylesheet" href="/pico.classless.min.css" />
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   </head>
   <body>
     <div id="app" class="container">
       <h1>Generate Text Stream with Vue</h1>
-      <label for="hf-token">Hugging Face Token</label>
-      <input
-        id="hf-token"
-        v-model="token"
-        placeholder="HF-TOKEN"
-        type="password"
-      />
-      <label for="model-select">Select a model</label>
-      <select id="model-select" v-model="selectedModel">
-        <option v-for="model in models" :value="model">{{ model }}</option>
-      </select>
-      <label for="response-length">Response Length</label>
-      <select id="response-length" v-model="responseLength">
-        <option value="short">Short</option>
-        <option value="medium">Medium</option>
-        <option value="long">Long</option>
-      </select>
       <label for="user-prompt">Prompt</label>
       <textarea
         id="user-prompt"
         v-model="userPrompt"
-        style="width: 100%; height: 100px"
       ></textarea>
       <div class="grid grid-cols-2 gap-2">
         <button class="btn-error" @click="stop">STOP</button>
         <button class="btn-success" @click="run">GENERATE</button>
       </div>
-      <h2>Result</h2>
-      <div v-if="currentGeneratedText.length == 0 && isRunning">Loading...</div>
-      <div style="white-space: pre-wrap;" v-html="currentGeneratedText"></div>
     </div>
     <script type="module" src="./index.js"></script>
   </body>

     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>Generate Text Stream - HuggingFace.js Live Examples</title>
+    <link rel="stylesheet" href="/main.css" />
     <link rel="stylesheet" href="/pico.classless.min.css" />
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   </head>
   <body>
     <div id="app" class="container">
       <h1>Generate Text Stream with Vue</h1>
+      <div class="grid grid-cols-2 gap-2">
+        <div>
+          <label for="hf-token"
+            >Hugging Face Token (optional but limited if absent)</label
+          >
+          <input
+            id="hf-token"
+            v-model="token"
+            placeholder="HF-TOKEN"
+            type="password"
+          />
+        </div>
+        <div>
+          <label for="model-select">Select a model</label>
+          <select id="model-select" v-model="selectedModel">
+            <option v-for="model in models" :value="model">{{ model }}</option>
+          </select>
+        </div>
+      </div>
+      <div class="grid grid-cols-2 gap-2">
+        <div>
+          <label for="response-length">Response Length</label>
+          <select id="response-length" v-model="responseLength">
+            <option value="50">Short</option>
+            <option value="150">Medium</option>
+            <option value="250">Long</option>
+          </select>
+        </div>
+        <div>
+          <label for="temp">Temperature (Controls Randomness)</label>
+          <select id="temp" v-model="temperature">
+            <option value="1.0">1.0</option>
+            <option value="0.7">0.7</option>
+            <option value="0.5">0.5</option>
+            <option value="0.3">0.3</option>
+            <option value="0.1">0.1</option>
+          </select>
+        </div>
+      </div>
       <label for="user-prompt">Prompt</label>
       <textarea
         id="user-prompt"
         v-model="userPrompt"
       ></textarea>
       <div class="grid grid-cols-2 gap-2">
         <button class="btn-error" @click="stop">STOP</button>
         <button class="btn-success" @click="run">GENERATE</button>
       </div>
+      <h3>{{statusMessage}}</h3>
+      <div style="white-space: pre-wrap" v-html="currentGeneratedText"></div>
     </div>
     <script type="module" src="./index.js"></script>
   </body>

index.js CHANGED Viewed

@@ -1,34 +1,34 @@
-const { createApp, ref, onMounted } = Vue;
 import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@latest";
-const textGenerationModels = [
-    "mistralai/Mistral-7B-v0.1",
-    "bigscience/bloom"
-]
-const responseLengthToTokenCount = {
-    "short": 100,
-    "medium": 250,
-    "long": 500,
-}
 const app = createApp({
     setup() {
         const token = ref(localStorage.getItem("token") || "");
-        const userPrompt = ref("Write about the difference between Star Wars and Star Trek");
         const currentGeneratedText = ref("");
-        const models = ref([]);
-        const selectedModel = ref("");
         const isRunning = ref(false);
-        const responseLength = ref("medium");
         let controller;
         const createTextGenerationStream = (hfInstance, prompt, abortControllerSignal) => {
             return hfInstance.textGenerationStream(
                 {
                     model: selectedModel.value,
                     inputs: prompt,
-                    parameters: { max_new_tokens: responseLengthToTokenCount[responseLength.value] },
                 },
                 {
                     use_cache: false,
@@ -39,10 +39,12 @@ const app = createApp({
         const generateTextStream = async function* (hfInstance, abortSignal, prompt) {
             let generatedText = ""
             for await (const output of createTextGenerationStream(hfInstance, prompt, abortSignal)) {
                 generatedText += output.token.text;
                 yield generatedText;
             }
         };
         const run = async () => {
@@ -77,8 +79,6 @@ const app = createApp({
             if (localStorageToken) {
                 token.value = localStorageToken;
             }
-            models.value = textGenerationModels
-            selectedModel.value = textGenerationModels[0]
         });
         return {
@@ -90,7 +90,9 @@ const app = createApp({
             models,
             selectedModel,
             isRunning,
-            responseLength,
         };
     },
 });

+const { createApp, ref, onMounted, computed } = Vue;
 import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@latest";
 const app = createApp({
     setup() {
         const token = ref(localStorage.getItem("token") || "");
+        const userPrompt = ref("Write about the difference between AI Engineering");
         const currentGeneratedText = ref("");
+        const models = ref(["mistralai/Mistral-7B-v0.1",
+            "google/flan-t5-xxl"]);
+        const selectedModel = ref("mistralai/Mistral-7B-v0.1");
         const isRunning = ref(false);
+        const responseLength = ref("150");
+        const temperature = ref("1.0");
+        const generating = ref(false);
         let controller;
+        const statusMessage = computed(() => {
+            if (generating.value) return "Generating..."
+            return "Ready"
+        })
         const createTextGenerationStream = (hfInstance, prompt, abortControllerSignal) => {
             return hfInstance.textGenerationStream(
                 {
                     model: selectedModel.value,
                     inputs: prompt,
+                    parameters: {
+                        max_new_tokens: parseInt(responseLength.value),
+                        temperature: parseFloat(temperature.value),
+                    },
                 },
                 {
                     use_cache: false,
         const generateTextStream = async function* (hfInstance, abortSignal, prompt) {
             let generatedText = ""
+            generating.value = true
             for await (const output of createTextGenerationStream(hfInstance, prompt, abortSignal)) {
                 generatedText += output.token.text;
                 yield generatedText;
             }
+            generating.value = false
         };
         const run = async () => {
             if (localStorageToken) {
                 token.value = localStorageToken;
             }
         });
         return {
             models,
             selectedModel,
             isRunning,
+            responseLength,
+            temperature,
+            statusMessage
         };
     },
 });

utils.css → main.css RENAMED Viewed

@@ -1,89 +1,89 @@
 /* Flexbox utilities */
 .flex {
-	display: flex;
 }
 .flex-row {
-	flex-direction: row;
 }
 .flex-column {
-	flex-direction: column;
 }
 .justify-center {
-	justify-content: center;
 }
 .align-center {
-	align-items: center;
 }
 /* Grid utilities */
 .grid {
-	display: grid;
 }
 .grid-cols {
-	grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 @media (min-width: 640px) {
-	.grid-cols {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
 }
 @media (min-width: 768px) {
-	.grid-cols {
-		grid-template-columns: repeat(3, minmax(0, 1fr));
-	}
 }
 .grid-cols-1 {
-	grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 .grid-cols-2 {
-	grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .grid-cols-3 {
-	grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 .grid-cols-4 {
-	grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 /* Gap utilities */
 .gap-0 {
-	gap: 0;
 }
 .gap-1 {
-	gap: 0.25rem;
 }
 .gap-2 {
-	gap: 0.5rem;
 }
 .gap-3 {
-	gap: 0.75rem;
 }
 .gap-4 {
-	gap: 1rem;
 }
 /* Responsive container class */
 .container {
-	width: 100%;
-	max-width: 1280px;
-	margin: 0 auto;
-	padding: 2rem;
 }
 .btn-error {
@@ -114,4 +114,9 @@
 .btn-success:hover {
   background-color: #0ca83d;
   border-color: #0ca83d;
-}

 /* Flexbox utilities */
 .flex {
+  display: flex;
 }
 .flex-row {
+  flex-direction: row;
 }
 .flex-column {
+  flex-direction: column;
 }
 .justify-center {
+  justify-content: center;
 }
 .align-center {
+  align-items: center;
 }
 /* Grid utilities */
 .grid {
+  display: grid;
 }
 .grid-cols {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 @media (min-width: 640px) {
+  .grid-cols {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 @media (min-width: 768px) {
+  .grid-cols {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 .grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 .grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 .grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 /* Gap utilities */
 .gap-0 {
+  gap: 0;
 }
 .gap-1 {
+  gap: 0.25rem;
 }
 .gap-2 {
+  gap: 0.5rem;
 }
 .gap-3 {
+  gap: 0.75rem;
 }
 .gap-4 {
+  gap: 1rem;
 }
 /* Responsive container class */
 .container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
 }
 .btn-error {
 .btn-success:hover {
   background-color: #0ca83d;
   border-color: #0ca83d;
+}
+#user-prompt {
+  width: 100%;
+  height: 100px;
+}