Spaces:

nico-martin
/

transformers.js-text-generation

Running

App Files Files Community

nico-martin HF Staff commited on 24 days ago

Commit

cc1f67c

1 Parent(s): 9185156

hashchange

Browse files

Files changed (10) hide show

dist/assets/{index-H_rCVADf.js → index-DekWw0AL.js} +0 -0
dist/assets/{textGenerationWorker-3qlqwFPf.js → textGenerationWorker-BB6zZU4k.js} +0 -0
dist/index.html +1 -1
src/chat/Chat.tsx +4 -1
src/main.tsx +18 -7
src/textGeneration/types.ts +1 -0
src/textGeneration/worker/textGenerationWorker.ts +4 -3
src/utils/context/chatSettings/ChatSettingsContextProvider.tsx +0 -1
src/utils/context/chatSettings/ChatSettingsModal.tsx +1 -0
src/utils/context/chatSettings/ChatSettingsModalForm.tsx +14 -0

dist/assets/{index-H_rCVADf.js → index-DekWw0AL.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

dist/assets/{textGenerationWorker-3qlqwFPf.js → textGenerationWorker-BB6zZU4k.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

dist/index.html CHANGED Viewed

@@ -11,7 +11,7 @@
       rel="stylesheet"
     />
     <title>Transformers.js TextGeneration</title>
-    <script type="module" crossorigin src="/assets/index-H_rCVADf.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DitayMGw.css">
   </head>
   <body>

       rel="stylesheet"
     />
     <title>Transformers.js TextGeneration</title>
+    <script type="module" crossorigin src="/assets/index-DekWw0AL.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DitayMGw.css">
   </head>
   <body>

src/chat/Chat.tsx CHANGED Viewed

@@ -150,7 +150,10 @@ export default function Chat({ className = "" }: { className?: string }) {
               <div className="gap- flex flex-col border-t border-gray-300 dark:border-gray-700">
                 {CONVERSATION_STARTERS[starterCategory].prompts.map(
                   (prompt, index) => (
-                    <div className="border-b border-gray-300 py-1 dark:border-gray-700">
                       <Button
                         key={index}
                         onClick={() => generate(prompt)}

               <div className="gap- flex flex-col border-t border-gray-300 dark:border-gray-700">
                 {CONVERSATION_STARTERS[starterCategory].prompts.map(
                   (prompt, index) => (
+                    <div
+                      key={prompt}
+                      className="border-b border-gray-300 py-1 dark:border-gray-700"
+                    >
                       <Button
                         key={index}
                         onClick={() => generate(prompt)}

src/main.tsx CHANGED Viewed

@@ -1,10 +1,21 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)

+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
+  </StrictMode>
+);
+window.addEventListener("hashchange", () =>
+  window.parent.postMessage(
+    {
+      queryString: "",
+      hash: window.location.hash,
+    },
+    "https://huggingface.co"
+  )
+);

src/textGeneration/types.ts CHANGED Viewed

@@ -84,6 +84,7 @@ export interface GenerationMetadata {
   modelKey: keyof typeof MODELS;
   model: string;
   template: string;
 }
 interface ResponseGenerateTextAborted {

   modelKey: keyof typeof MODELS;
   model: string;
   template: string;
+  useKvCache: boolean;
 }
 interface ResponseGenerateTextAborted {

src/textGeneration/worker/textGenerationWorker.ts CHANGED Viewed

@@ -143,13 +143,13 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
     });
     const cacheKey = MODEL.modelId + JSON.stringify(messages.slice(0, -1));
-    const useCache = cacheKey === cache.key;
-    console.log("useCache", useCache);
     const { sequences, past_key_values } = (await model.generate({
       ...input,
       max_new_tokens: 1024,
-      //past_key_values: useCache ? cache.pastKeyValues : null,
       return_dict_in_generate: true,
       temperature: data.temperature,
       stopping_criteria: stoppingCriteria,
@@ -198,6 +198,7 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
         modelKey: MODEL.modelId,
         model: MODEL.title,
         template,
       },
       interrupted: stoppingCriteria.interrupted,
       requestId,

     });
     const cacheKey = MODEL.modelId + JSON.stringify(messages.slice(0, -1));
+    const useCache = false; // cacheKey === cache.key;
+    console.log("useCache", useCache, cacheKey);
     const { sequences, past_key_values } = (await model.generate({
       ...input,
       max_new_tokens: 1024,
+      past_key_values: useCache ? cache.pastKeyValues : null,
       return_dict_in_generate: true,
       temperature: data.temperature,
       stopping_criteria: stoppingCriteria,
         modelKey: MODEL.modelId,
         model: MODEL.title,
         template,
+        useKvCache: useCache,
       },
       interrupted: stoppingCriteria.interrupted,
       requestId,

src/utils/context/chatSettings/ChatSettingsContextProvider.tsx CHANGED Viewed

@@ -47,7 +47,6 @@ export default function ChatSettingsContextProvider({
   useEffect(() => {
     const settings = getSettingsFromURL();
-    console.log(settings);
     if (settings) {
       setSettings({
         tools: settings?.tools,

   useEffect(() => {
     const settings = getSettingsFromURL();
     if (settings) {
       setSettings({
         tools: settings?.tools,

src/utils/context/chatSettings/ChatSettingsModal.tsx CHANGED Viewed

@@ -48,6 +48,7 @@ export default function ChatSettingsModal({
         }
         onSubmit={handleSubmit}
         downloadedModels={downloadedModels}
       />
     </Modal>
   );

         }
         onSubmit={handleSubmit}
         downloadedModels={downloadedModels}
+        visible={isOpen}
       />
     </Modal>
   );

src/utils/context/chatSettings/ChatSettingsModalForm.tsx CHANGED Viewed

@@ -9,6 +9,7 @@ import {
 import { formatBytes } from "@utils/format.ts";
 import { MODELS } from "@utils/models.ts";
 import { TOOLS } from "@utils/tools.ts";
 import { Controller, useForm } from "react-hook-form";
 import type { ChatSettings } from "./types.ts";
@@ -17,11 +18,14 @@ export default function ChatSettingsModalForm({
   defaultValues,
   onSubmit,
   downloadedModels,
 }: {
   defaultValues: ChatSettings;
   onSubmit: (data: ChatSettings) => void;
   downloadedModels: Array<string>;
 }) {
   const {
     control,
     handleSubmit,
@@ -41,6 +45,15 @@ export default function ChatSettingsModalForm({
     description: tool.description,
   }));
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
       <Controller
@@ -57,6 +70,7 @@ export default function ChatSettingsModalForm({
             options={modelOptions}
             required
             tooltip="(*) are already downloaded"
           />
         )}
       />

 import { formatBytes } from "@utils/format.ts";
 import { MODELS } from "@utils/models.ts";
 import { TOOLS } from "@utils/tools.ts";
+import { useEffect, useRef } from "react";
 import { Controller, useForm } from "react-hook-form";
 import type { ChatSettings } from "./types.ts";
   defaultValues,
   onSubmit,
   downloadedModels,
+  visible,
 }: {
   defaultValues: ChatSettings;
   onSubmit: (data: ChatSettings) => void;
   downloadedModels: Array<string>;
+  visible: boolean;
 }) {
+  const selectModelRef = useRef<HTMLSelectElement>(null);
   const {
     control,
     handleSubmit,
     description: tool.description,
   }));
+  useEffect(() => {
+    if (visible && selectModelRef.current) {
+      // Use setTimeout to ensure the element is rendered and ready for focus
+      setTimeout(() => {
+        selectModelRef.current?.focus();
+      }, 200);
+    }
+  }, [visible]);
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
       <Controller
             options={modelOptions}
             required
             tooltip="(*) are already downloaded"
+            ref={selectModelRef}
           />
         )}
       />