From 580546958125eb523e1b07eb5893df2064b23720 Mon Sep 17 00:00:00 2001
From: Pabloader <pabloader@pabloader.ru>
Date: Sun, 3 Nov 2024 13:06:06 +0000
Subject: [PATCH] AI story: load model template from HF & count tokens

---
 bun.lockb                                     | Bin 30275 -> 31377 bytes
 package.json                                  |   1 +
 src/games/ai/components/ace.tsx               |   2 +
 .../ai/components/header/header.module.css    |   5 +
 src/games/ai/components/header/header.tsx     |  29 +--
 src/games/ai/contexts/llm.tsx                 | 192 ++++++++++++++----
 src/games/ai/huggingface.ts                   |  68 +++++++
 7 files changed, 235 insertions(+), 62 deletions(-)
 create mode 100644 src/games/ai/huggingface.ts

diff --git a/bun.lockb b/bun.lockb
index 6ebbd7a561e199a2402f8320b2badd58edbeb577..597e5c52cb15522c32ca7bfe92a904b08f5b46ee 100755
GIT binary patch
delta 5132
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

delta 4584
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

diff --git a/package.json b/package.json
index 13645a1..4960a8d 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "bake": "bun build/build.ts"
   },
   "dependencies": {
+    "@huggingface/hub": "0.19.0",
     "@huggingface/jinja": "0.3.1",
     "@inquirer/select": "2.3.10",
     "ace-builds": "1.36.3",
diff --git a/src/games/ai/components/ace.tsx b/src/games/ai/components/ace.tsx
index cd82bd4..e5af98f 100644
--- a/src/games/ai/components/ace.tsx
+++ b/src/games/ai/components/ace.tsx
@@ -26,6 +26,8 @@ export const Ace = ({ value, onInput }: IAceProps) => {
                 displayIndentGuides: false,
                 fontSize: 16,
                 maxLines: Infinity,
+                tabSize: 2,
+                useSoftTabs: true,
                 wrap: "free",
             });
             return e;
diff --git a/src/games/ai/components/header/header.module.css b/src/games/ai/components/header/header.module.css
index ee7f15e..4e6b9d6 100644
--- a/src/games/ai/components/header/header.module.css
+++ b/src/games/ai/components/header/header.module.css
@@ -23,6 +23,11 @@
         }
     }
 
+    .info {
+        margin: 0 8px;
+        line-height: 36px;
+    }
+
     .buttons {
         display: flex;
         flex-direction: row;
diff --git a/src/games/ai/components/header/header.tsx b/src/games/ai/components/header/header.tsx
index d0c4ab1..8031bc8 100644
--- a/src/games/ai/components/header/header.tsx
+++ b/src/games/ai/components/header/header.tsx
@@ -11,38 +11,25 @@ import styles from './header.module.css';
 import { Ace } from "../ace";
 
 export const Header = () => {
-    const { getContextLength } = useContext(LLMContext);
+    const { modelName, modelTemplate, contextLength, promptTokens, blockConnection } = useContext(LLMContext);
     const {
         messages, connectionUrl, systemPrompt, lore, userPrompt, bannedWords, instruct,
         setConnectionUrl, setSystemPrompt, setLore, setUserPrompt, addSwipe, setBannedWords, setInstruct
     } = useContext(StateContext);
-    const [urlValid, setUrlValid] = useState(false);
-    const [urlEditing, setUrlEditing] = useState(false);
 
     const loreOpen = useBool();
     const promptsOpen = useBool();
     const assistantOpen = useBool();
 
     const bannedWordsInput = useMemo(() => bannedWords.join('\n'), [bannedWords]);
-
-    const handleFocusUrl = useCallback(() => setUrlEditing(true), []);
+    const urlValid = useMemo(() => contextLength > 0, [contextLength]);
 
     const handleBlurUrl = useCallback(() => {
         const regex = /^(?:http(s?):\/\/)?(.*?)\/?$/i
         const normalizedConnectionUrl = connectionUrl.replace(regex, 'http$1://$2');
-        console.log({ connectionUrl, normalizedConnectionUrl })
         setConnectionUrl(normalizedConnectionUrl);
-        setUrlEditing(false);
-        setUrlValid(false);
-    }, [connectionUrl, setConnectionUrl]);
-
-    useEffect(() => {
-        if (!urlEditing) {
-            getContextLength().then(length => {
-                setUrlValid(length > 0);
-            });
-        }
-    }, [connectionUrl, urlEditing]);
+        blockConnection.setFalse();
+    }, [connectionUrl, setConnectionUrl, blockConnection]);
 
     const handleAssistantAddSwipe = useCallback((answer: string) => {
         const index = messages.findLastIndex(m => m.role === 'assistant');
@@ -69,17 +56,21 @@ export const Header = () => {
             <div class={styles.inputs}>
                 <input value={connectionUrl}
                     onInput={setConnectionUrl}
-                    onFocus={handleFocusUrl}
+                    onFocus={blockConnection.setTrue}
                     onBlur={handleBlurUrl}
-                    class={urlEditing ? '' : urlValid ? styles.valid : styles.invalid}
+                    class={blockConnection.value ? '' : urlValid ? styles.valid : styles.invalid}
                 />
                 <select value={instruct} onChange={setInstruct}>
+                    {modelName && modelTemplate && <option value={modelTemplate}>{modelName}</option>}
                     {Object.entries(Instruct).map(([label, value]) => (
                         <option value={value} key={value}>
                             {label.toLowerCase()}
                         </option>
                     ))}
                 </select>
+                <div class={styles.info}>
+                    {promptTokens} / {contextLength}
+                </div>
             </div>
             <div class={styles.buttons}>
                 <button class='icon color' title='Edit lore' onClick={loreOpen.setTrue}>
diff --git a/src/games/ai/contexts/llm.tsx b/src/games/ai/contexts/llm.tsx
index a8a9e04..c8b6852 100644
--- a/src/games/ai/contexts/llm.tsx
+++ b/src/games/ai/contexts/llm.tsx
@@ -1,11 +1,12 @@
 import Lock from "@common/lock";
 import SSE from "@common/sse";
 import { createContext } from "preact";
-import { useContext, useEffect, useMemo } from "preact/hooks";
+import { useCallback, useContext, useEffect, useMemo, useState } from "preact/hooks";
 import { MessageTools, type IMessage } from "../messages";
 import { StateContext } from "./state";
 import { useBool } from "@common/hooks/useBool";
 import { Template } from "@huggingface/jinja";
+import { Huggingface } from "../huggingface";
 
 
 interface ITemplateMessage {
@@ -25,6 +26,11 @@ interface ICompiledPrompt {
 
 interface IContext {
     generating: boolean;
+    blockConnection: ReturnType<typeof useBool>;
+    modelName: string;
+    modelTemplate: string;
+    promptTokens: number;
+    contextLength: number;
 }
 
 const DEFAULT_GENERATION_SETTINGS = {
@@ -44,23 +50,65 @@ const DEFAULT_GENERATION_SETTINGS = {
 type IGenerationSettings = Partial<typeof DEFAULT_GENERATION_SETTINGS>;
 
 interface IActions {
-    applyChatTemplate: (messages: ITemplateMessage[], templateString: string, eosToken?: string) => string;
     compilePrompt: (messages: IMessage[], args?: ICompileArgs) => Promise<ICompiledPrompt>;
     generate: (prompt: string, extraSettings?: IGenerationSettings) => AsyncGenerator<string>;
-    countTokens(prompt: string): Promise<number>;
-    getContextLength(): Promise<number>;
-
+    countTokens: (prompt: string) => Promise<number>;
 }
 export type ILLMContext = IContext & IActions;
 
+export const normalizeModel = (model: string) => {
+    let currentModel = model.split(/[\\\/]/).at(-1);
+    currentModel = currentModel.split('::').at(0);
+    let normalizedModel: string;
+
+    do {
+        normalizedModel = currentModel;
+
+        currentModel = currentModel
+            .replace(/[ ._-]\d(\d*k|\d+)(-context|$)/i, '') // remove context length, i.e. -32k
+            .replace(/[ ._-](gptq|awq|exl2?|imat|i\d)/i, '') // remove quant name
+            .replace(/([ ._-]?gg(uf|ml)[ ._-]?(v[ ._-]?\d)?)/i, '') // remove gguf-v3/ggml/etc
+            .replace(/[ ._-]i?q([ ._-]?\d[ ._-]?(k?[ ._-]?x*[ ._-]?[lms]?)?)+/i, '') // remove quant size
+            .replace(/[ ._-]\d+(\.\d+)?bpw/i, '') // remove bpw
+            .replace(/[ ._-]f(p|loat)?(8|16|32)/i, '')
+            .replace(/^(debug-?)+/i, '')
+            .trim();
+    } while (normalizedModel !== currentModel);
+
+    return normalizedModel
+        .replace(/[ _-]+/ig, '-')
+        .replace(/\.{2,}/, '-')
+        .replace(/[ ._-]+$/ig, '')
+        .trim();
+}
+
+export const applyChatTemplate = (messages: ITemplateMessage[], templateString: string) => {
+    const template = new Template(templateString);
+
+    console.log(`Applying template:\n${templateString}`, messages);
+
+    const prompt = template.render({
+        messages,
+        add_generation_prompt: true,
+    });
+
+    return prompt;
+};
+
 export const LLMContext = createContext<ILLMContext>({} as ILLMContext);
 
 export const LLMContextProvider = ({ children }: { children?: any }) => {
     const {
         connectionUrl, messages, triggerNext, lore, userPrompt, systemPrompt, bannedWords, instruct,
-        setTriggerNext, addMessage, editMessage,
+        setTriggerNext, addMessage, editMessage, setInstruct,
     } = useContext(StateContext);
+
     const generating = useBool(false);
+    const blockConnection = useBool(false);
+    const [promptTokens, setPromptTokens] = useState(0);
+    const [contextLength, setContextLength] = useState(0);
+    const [modelName, setModelName] = useState('');
+    const [modelTemplate, setModelTemplate] = useState('');
 
     const userPromptTemplate = useMemo(() => {
         try {
@@ -72,17 +120,41 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
         }
     }, [userPrompt]);
 
+    const getContextLength = useCallback(async () => {
+        if (!connectionUrl || blockConnection.value) {
+            return 0;
+        }
+        try {
+            const response = await fetch(`${connectionUrl}/api/extra/true_max_context_length`);
+            if (response.ok) {
+                const { value } = await response.json();
+                return value;
+            }
+        } catch (e) {
+            console.log('Error getting max tokens', e);
+        }
+
+        return 0;
+    }, [connectionUrl, blockConnection.value]);
+
+    const getModelName = useCallback(async () => {
+        if (!connectionUrl || blockConnection.value) {
+            return '';
+        }
+        try {
+            const response = await fetch(`${connectionUrl}/api/v1/model`);
+            if (response.ok) {
+                const { result } = await response.json();
+                return result;
+            }
+        } catch (e) {
+            console.log('Error getting max tokens', e);
+        }
+
+        return '';
+    }, [connectionUrl, blockConnection.value]);
+
     const actions: IActions = useMemo(() => ({
-        applyChatTemplate: (messages: ITemplateMessage[], templateString: string) => {
-            const template = new Template(templateString);
-
-            const prompt = template.render({
-                messages,
-                add_generation_prompt: true,
-            });
-
-            return prompt;
-        },
         compilePrompt: async (messages, { keepUsers } = {}) => {
             const promptMessages = messages.slice();
             const lastMessage = promptMessages.at(-1);
@@ -128,15 +200,6 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
                         templateMessages.push({ role, content });
                     }
                 }
-
-                if (templateMessages[1]?.role !== 'user') {
-                    const prompt = MessageTools.getSwipe(firstUserMessage)?.content;
-
-                    templateMessages.splice(1, 0, {
-                        role: 'user',
-                        content: userPromptTemplate.render({ prompt, isStart: true }),
-                    });
-                }
             } else {
                 const story = promptMessages.filter(m => m.role === 'assistant')
                     .map(m => MessageTools.getSwipe(m)?.content.trim()).join('\n\n');
@@ -157,7 +220,16 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
                 }
             }
 
-            const prompt = actions.applyChatTemplate(templateMessages, instruct);
+            if (templateMessages[1]?.role !== 'user') {
+                const prompt = MessageTools.getSwipe(firstUserMessage)?.content;
+
+                templateMessages.splice(1, 0, {
+                    role: 'user',
+                    content: userPromptTemplate.render({ prompt, isStart: true }),
+                });
+            }
+
+            const prompt = applyChatTemplate(templateMessages, instruct);
             return {
                 prompt,
                 isContinue,
@@ -248,22 +320,6 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
                 console.log('Error counting tokens', e);
             }
 
-            return 0;
-        },
-        getContextLength: async () => {
-            if (!connectionUrl) {
-                return 0;
-            }
-            try {
-                const response = await fetch(`${connectionUrl}/api/extra/true_max_context_length`);
-                if (response.ok) {
-                    const { value } = await response.json();
-                    return value;
-                }
-            } catch (e) {
-                console.log('Error getting max tokens', e);
-            }
-
             return 0;
         },
     }), [connectionUrl, lore, userPromptTemplate, systemPrompt, bannedWords, instruct]);
@@ -276,6 +332,8 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
             let text: string = '';
 
             const { prompt, isRegen } = await actions.compilePrompt(messages);
+            const tokens = await actions.countTokens(prompt);
+            setPromptTokens(tokens);
 
             if (!isRegen) {
                 addMessage('', 'assistant');
@@ -284,18 +342,66 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
 
             for await (const chunk of actions.generate(prompt)) {
                 text += chunk;
+                setPromptTokens(tokens + 1);
                 editMessage(messageId, text);
             }
 
             text = MessageTools.trimSentence(text);
             editMessage(messageId, text);
 
+            const generatedTokens = await actions.countTokens(text);
+
+            setPromptTokens(tokens + generatedTokens);
+
             MessageTools.playReady();
         }
-    })(), [triggerNext, messages, generating.value]);
+    })(), [actions, triggerNext, messages, generating.value]);
+
+    useEffect(() => {
+        if (!blockConnection.value) {
+            setPromptTokens(0);
+            setContextLength(0);
+
+            getContextLength().then(setContextLength);
+        }
+    }, [connectionUrl, instruct, blockConnection.value]);
+
+    useEffect(() => {
+        if (!blockConnection.value) {
+            setModelName('');
+            getModelName().then(normalizeModel).then(setModelName);
+        }
+    }, [connectionUrl, blockConnection.value]);
+
+    useEffect(() => {
+        setModelTemplate('');
+        if (modelName) {
+            Huggingface.findModelTemplate(modelName)
+                .then((template) => {
+                    if (template) {
+                        setModelTemplate(template);
+                        setInstruct(template);
+                    }
+                });
+        }
+    }, [modelName]);
+
+    useEffect(() => {
+        if (promptTokens === 0 && !blockConnection.value) {
+            actions.compilePrompt(messages)
+                .then(({ prompt }) => actions.countTokens(prompt))
+                .then(setPromptTokens)
+                .catch(e => console.error(`Could not count tokens`, e));
+        }
+    }, [actions, promptTokens, messages, blockConnection.value]);
 
     const rawContext: IContext = {
         generating: generating.value,
+        blockConnection,
+        modelName,
+        modelTemplate,
+        promptTokens,
+        contextLength,
     };
 
     const context = useMemo(() => rawContext, Object.values(rawContext));
diff --git a/src/games/ai/huggingface.ts b/src/games/ai/huggingface.ts
new file mode 100644
index 0000000..e083908
--- /dev/null
+++ b/src/games/ai/huggingface.ts
@@ -0,0 +1,68 @@
+import * as hub from '@huggingface/hub';
+
+export namespace Huggingface {
+    interface TokenizerConfig {
+        chat_template: string;
+        eos_token: string;
+    }
+
+    const hasField = <T extends string>(obj: unknown, field: T): obj is Record<T, unknown> => (
+        obj != null && typeof obj === 'object' && (field in obj)
+    );
+    const isTokenizerConfig = (obj: unknown): obj is TokenizerConfig => (
+        hasField(obj, 'chat_template') && typeof obj.chat_template === 'string'
+        && hasField(obj, 'eos_token') && typeof obj.eos_token === 'string'
+    );
+
+    const loadHuggingfaceTokenizerConfig = async (model: string): Promise<TokenizerConfig | null> => {
+        console.log(`Searching for model '${model}'`);
+
+        const models = hub.listModels({ search: { query: model }, additionalFields: ['config'] });
+
+        let tokenizerConfig: TokenizerConfig | null = null;
+
+        for await (const model of models) {
+            const { config } = model;
+            if (hasField(config, 'tokenizer_config') && isTokenizerConfig(config.tokenizer_config)) {
+                tokenizerConfig = config.tokenizer_config;
+                break;
+            }
+
+            try {
+                const fileResponse = await hub.downloadFile({ repo: model.name, path: 'tokenizer_config.json' });
+                if (fileResponse?.ok) {
+                    const maybeConfig = await fileResponse.json();
+                    if (isTokenizerConfig(maybeConfig)) {
+                        tokenizerConfig = maybeConfig;
+                        break;
+                    }
+                }
+            } catch { }
+        }
+
+        if (tokenizerConfig) {
+            console.log(`Huggingface config for '${model}' found.`);
+            return {
+                chat_template: tokenizerConfig.chat_template,
+                eos_token: tokenizerConfig.eos_token,
+            };
+        }
+
+        console.log(`Huggingface config for '${model}' not found.`);
+        return null;
+    };
+
+    export const findModelTemplate = async (modelName: string): Promise<string | null> => {
+        const config = await loadHuggingfaceTokenizerConfig(modelName);
+
+        if (config?.chat_template?.trim()) {
+            const template = config.chat_template.trim()
+                .replace('eos_token', `'${config.eos_token}'`)
+                .replace('bos_token', `''`);
+
+            return template;
+        }
+
+        return null;
+    }
+}
\ No newline at end of file