Spaces:

huggingfacejs
/

text-generation-Mistral-7B-Instruct

Running

App Files Files Community

radames commited on Oct 13, 2023

Commit

1c59795

1 Parent(s): 5f30b16

Update index.html

Browse files

Files changed (1) hide show

index.html +92 -17

index.html CHANGED Viewed

@@ -1,19 +1,94 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Home</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="container mx-auto p-3">
+    <script type="module">
+      import { HfInference } from "https://cdn.skypack.dev/@huggingface/[email protected]";
+      async function* textStreamRes(hf, controller, input) {
+        let tokens = [];
+        for await (const output of hf.textGenerationStream(
+          {
+            model: "mistralai/Mistral-7B-Instruct-v0.1",
+            inputs: input,
+            parameters: { max_new_tokens: 1000 },
+          },
+          {
+            use_cache: false,
+            fetch: (url, options) =>
+              fetch(url, { ...options, signal: controller.signal }),
+          }
+        )) {
+          tokens.push(output);
+          yield tokens;
+        }
+      }
+      let controller;
+      async function run() {
+        controller = new AbortController();
+        const message = `<s>[INST]{:}[/INST]`;
+        const textInput = document.querySelector("#input").value;
+        const input = message.replace("{:}", textInput);
+        const token = document.querySelector("#token").value;
+        const hf = new HfInference(token);
+        const gen = document.querySelector("#generation");
+        gen.innerHTML = "";
+        const textStream = textStreamRes(hf, controller, input);
+        for await (const tokens of textStream) {
+          const lastToken = tokens[tokens.length - 1];
+          const span = document.createElement("span");
+          span.innerText = lastToken.token.text;
+          gen.appendChild(span);
+        }
+      }
+      document.addEventListener("DOMContentLoaded", () => {
+        const token = localStorage.getItem("token");
+        if (token) {
+          document.querySelector("#token").value = token;
+        }
+      });
+      document.querySelector("#token").addEventListener("change", (e)=> {
+        localStorage.setItem("token", e.target.value);
+      });
+      document.querySelector("#run").addEventListener("click", run);
+      document.querySelector("#abort").addEventListener("click", () => {
+        controller.abort();
+      });
+    </script>
+    <div>
+      <input
+        id="token"
+        class="border-2 border-gray-500 rounded-md"
+        placeholder="HF-TOKEN"
+        type="password"
+      />
+      <textarea
+        id="input"
+        class="border-2 border-gray-500 rounded-md"
+        style="width: 100%; height: 100px"
+      >
+ Write an essay about Sartre</textarea
+      >
+      <div class="flex">
+        <button
+          id="run"
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        >
+          GENERATE
+        </button>
+        <button
+          id="abort"
+          class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+        >
+          ABORT
+        </button>
+      </div>
+    </div>
+    <div id="generation" class="py-3"></div>
+  </body>
 </html>