Multiple stories

src/games/ai-story/components/header/connectionEditor.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
 import styles from './header.module.css';
-import { Connection, HORDE_ANON_KEY, isHordeConnection, isKoboldConnection, type IConnection, type IHordeModel } from '../../tools/connection';
+import { Connection, HORDE_ANON_KEY, type IConnection, type IHordeModel } from '../../tools/connection';
 import { Instruct } from '../../contexts/state';
 import { useInputState } from '@common/hooks/useInputState';
 import { useInputCallback } from '@common/hooks/useInputCallback';
@@ -23,24 +23,17 @@ export const ConnectionEditor = ({ connection, setConnection }: IProps) => {
     const [hordeModels, setHordeModels] = useState<IHordeModel[]>([]);
     const [contextLength, setContextLength] = useState<number>(0);
 
-    const backendType = useMemo(() => {
-        if (isKoboldConnection(connection)) return 'kobold';
-        if (isHordeConnection(connection)) return 'horde';
-        return 'unknown';
-    }, [connection]);
-
     const isOnline = useMemo(() => contextLength > 0, [contextLength]);
 
     useEffect(() => {
         setInstruct(connection.instruct);
-
-        if (isKoboldConnection(connection)) {
-            setConnectionUrl(connection.url);
-            Connection.getContextLength(connection).then(setContextLength);
-        } else if (isHordeConnection(connection)) {
-            setModelName(connection.model);
+        connection.url && setConnectionUrl(connection.url);
+        connection.model && setModelName(connection.model);
         setApiKey(connection.apiKey || HORDE_ANON_KEY);
 
+        if (connection.type === 'kobold') {
+            Connection.getContextLength(connection).then(setContextLength);
+        } else if (connection.type === 'horde') {
             Connection.getHordeModels()
                 .then(m => setHordeModels(Array.from(m.values()).sort((a, b) => a.name.localeCompare(b.name))));
         }
@@ -59,17 +52,17 @@ export const ConnectionEditor = ({ connection, setConnection }: IProps) => {
     }, [modelName]);
 
     const setBackendType = useInputCallback((type) => {
-        if (type === 'kobold') {
+        switch (type) {
+            case 'kobold':
+            case 'horde':
                 setConnection({
+                    type,
                     instruct,
                     url: connectionUrl,
-            });
-        } else if (type === 'horde') {
-            setConnection({
-                instruct,
                     apiKey,
                     model: modelName,
                 });
+                break;
         }
     }, [setConnection, connectionUrl, apiKey, modelName, instruct]);
 
@@ -82,14 +75,19 @@ export const ConnectionEditor = ({ connection, setConnection }: IProps) => {
         const url = connectionUrl.replace(regex, 'http$1://$2');
 
         setConnection({
+            type: 'kobold',
             instruct,
             url,
+            apiKey,
+            model: modelName,
         });
     }, [connectionUrl, instruct, setConnection]);
 
     const handleBlurHorde = useCallback(() => {
         setConnection({
+            type: 'horde',
             instruct,
+            url: connectionUrl,
             apiKey,
             model: modelName,
         });
@@ -97,7 +95,7 @@ export const ConnectionEditor = ({ connection, setConnection }: IProps) => {
 
     return (
         <div class={styles.connectionEditor}>
-            <select value={backendType} onChange={setBackendType}>
+            <select value={connection.type} onChange={setBackendType}>
                 <option value='kobold'>Kobold CPP</option>
                 <option value='horde'>Horde</option>
             </select>
@@ -116,13 +114,13 @@ export const ConnectionEditor = ({ connection, setConnection }: IProps) => {
                     <option value={connection.instruct}>Custom</option>
                 </optgroup>}
             </select>
-            {isKoboldConnection(connection) && <input
+            {connection.type === 'kobold' && <input
                 value={connectionUrl}
                 onInput={setConnectionUrl}
                 onBlur={handleBlurUrl}
                 class={isOnline ? styles.valid : styles.invalid}
             />}
-            {isHordeConnection(connection) && <>
+            {connection.type === 'horde' && <>
                 <input
                     placeholder='Horde API key'
                     title='Horde API key'

src/games/ai-story/components/header/header.module.css

@@ -22,6 +22,11 @@
     .info {
         margin: 0 8px;
         line-height: 36px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
     }
 
     .buttons {
@@ -60,3 +65,27 @@
     gap: 8px;
     flex-wrap: wrap;
 }
+
+.lore {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-height: 80dvh;
+
+    .currentStory {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        .storiesSelector {
+            height: 24px;
+            flex-grow: 1;
+        }
+    }
+
+    .loreText {
+        flex-grow: 1;
+    }
+}

src/games/ai-story/components/header/header.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useContext, useMemo } from "preact/hooks";
 import { useBool } from "@common/hooks/useBool";
 import { Modal } from "@common/components/modal/Modal";
+import { useInputCallback } from "@common/hooks/useInputCallback";
 
-import { StateContext } from "../../contexts/state";
+import { DEFAULT_STORY, StateContext } from "../../contexts/state";
 import { LLMContext } from "../../contexts/llm";
 import { MiniChat } from "../minichat/minichat";
 import { AutoTextarea } from "../autoTextarea";
@@ -12,10 +13,31 @@ import { ConnectionEditor } from "./connectionEditor";
 import styles from './header.module.css';
 
 export const Header = () => {
-    const { contextLength, promptTokens, modelName } = useContext(LLMContext);
+    const { contextLength, promptTokens, modelName, spentKudos } = useContext(LLMContext);
     const {
-        messages, connection, systemPrompt, lore, userPrompt, bannedWords, summarizePrompt, summaryEnabled,
-        setSystemPrompt, setLore, setUserPrompt, addSwipe, setBannedWords, setInstruct, setSummarizePrompt, setSummaryEnabled, setConnection,
+        messages,
+        connection,
+        systemPrompt,
+        lore,
+        userPrompt,
+        bannedWords,
+        summarizePrompt,
+        summaryEnabled,
+        totalSpentKudos,
+        stories,
+        currentStory,
+        setSystemPrompt,
+        setLore,
+        setUserPrompt,
+        addSwipe,
+        setBannedWords,
+        setInstruct,
+        setSummarizePrompt,
+        setSummaryEnabled,
+        setConnection,
+        setCurrentStory,
+        createStory,
+        deleteStory,
     } = useContext(StateContext);
 
     const connectionsOpen = useBool();
@@ -53,6 +75,24 @@ export const Header = () => {
         }
     }, [setSummaryEnabled]);
 
+    const handleChangeStory = useInputCallback((story) => {
+        if (story === '@new') {
+            const id = prompt('Story id');
+            if (id) {
+                createStory(id);
+                setCurrentStory(id);
+            }
+        } else {
+            setCurrentStory(story);
+        }
+    }, []);
+
+    const handleDeleteStory = useCallback(() => {
+        if (confirm(`Delete story "${currentStory}"?`)) {
+            deleteStory(currentStory);
+        } 
+    }, [currentStory]);
+
     return (
         <div class={styles.header}>
             <div class={styles.inputs}>
@@ -62,7 +102,12 @@ export const Header = () => {
                     </button>
                 </div>
                 <div class={styles.info}>
-                    {modelName} - {promptTokens} / {contextLength}
+                    <span>{modelName}</span>
+                    <span>📃{promptTokens}/{contextLength}</span>
+                    {connection.type === 'horde' ? <>
+                        <span>💲{spentKudos}</span>
+                        <span>💰{totalSpentKudos}</span>
+                    </> : null}
                 </div>
             </div>
             <div class={styles.buttons}>
@@ -85,12 +130,26 @@ export const Header = () => {
                 <h3 class={styles.modalTitle}>Connection settings</h3>
                 <ConnectionEditor connection={connection} setConnection={setConnection} />
             </Modal>
-            <Modal open={loreOpen.value} onClose={loreOpen.setFalse}>
+            <Modal open={loreOpen.value} onClose={loreOpen.setFalse} class={styles.lore}>
                 <h3 class={styles.modalTitle}>Lore Editor</h3>
+                <div class={styles.currentStory}>
+                    <select value={currentStory} onChange={handleChangeStory} class={styles.storiesSelector}>
+                        {Object.keys(stories).map((story) => (
+                            <option key={story} value={story}>{story}</option>
+                        ))}
+                        <option value='@new'>New Story...</option>
+                    </select>
+                    {currentStory !== DEFAULT_STORY
+                        ? <button class='icon' onClick={handleDeleteStory}>
+                            🗑️
+                        </button>
+                        : null}
+                </div>
                 <AutoTextarea
                     value={lore}
                     onInput={setLore}
                     placeholder="Describe your world, for example: World of Awoo has big mountains and wide rivers."
+                    class={styles.loreText}
                 />
             </Modal>
             <Modal open={genparamsOpen.value} onClose={genparamsOpen.setFalse}>

src/games/ai-story/contexts/llm.tsx

@@ -26,6 +26,7 @@ interface IContext {
     hasToolCalls: boolean;
     promptTokens: number;
     contextLength: number;
+    spentKudos: number;
 }
 
 const MESSAGES_TO_KEEP = 10;
@@ -49,7 +50,7 @@ const processing = {
 export const LLMContextProvider = ({ children }: { children?: any }) => {
     const {
         connection, messages, triggerNext, continueLast, lore, userPrompt, systemPrompt, bannedWords, summarizePrompt, summaryEnabled,
-        setTriggerNext, setContinueLast, addMessage, editMessage, editSummary,
+        setTriggerNext, setContinueLast, addMessage, editMessage, editSummary, setTotalSpentKudos,
     } = useContext(StateContext);
 
     const generating = useBool(false);
@@ -57,6 +58,7 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
     const [contextLength, setContextLength] = useState(0);
     const [modelName, setModelName] = useState('');
     const [hasToolCalls, setHasToolCalls] = useState(false);
+    const [spentKudos, setSpentKudos] = useState(0);
 
     const isOnline = useMemo(() => contextLength > 0, [contextLength]);
 
@@ -170,10 +172,15 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
             try {
                 console.log('[LLM.generate]', prompt);
 
-                yield* Connection.generate(connection, prompt, {
+                setSpentKudos(0);
+                for await (const { text, cost } of Connection.generate(connection, prompt, {
                     ...extraSettings,
                     banned_tokens: bannedWords.filter(w => w.trim()),
-                });
+                })) {
+                    setSpentKudos(sk => sk + cost);
+                    setTotalSpentKudos(sk => sk + cost);
+                    yield text;
+                }
             } catch (e) {
                 if (e instanceof Error && e.name !== 'AbortError') {
                     alert(e.message);
@@ -188,9 +195,16 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
                 const prompt = Huggingface.applyChatTemplate(connection.instruct, [{ role: 'user', content }]);
                 console.log('[LLM.summarize]', prompt);
 
-                const tokens = await Array.fromAsync(Connection.generate(connection, prompt, {}));
+                const tokens = await Array.fromAsync(Connection.generate(connection, prompt));
+                const summary = tokens.reduce((sum, token) => ({
+                    text: sum.text + token.text,
+                    cost: sum.cost + token.cost,
+                }), { text: '', cost: 0 });
 
-                return MessageTools.trimSentence(tokens.join(''));
+                setSpentKudos(sk => sk + summary.cost);
+                setTotalSpentKudos(sk => sk + summary.cost);
+
+                return MessageTools.trimSentence(summary.text);
             } catch (e) {
                 console.error('Error summarizing:', e);
                 return '';
@@ -297,6 +311,7 @@ export const LLMContextProvider = ({ children }: { children?: any }) => {
         hasToolCalls,
         promptTokens,
         contextLength,
+        spentKudos,
     };
 
     const context = useMemo(() => rawContext, Object.values(rawContext));

src/games/ai-story/contexts/state.tsx

@@ -1,20 +1,28 @@
 import { createContext } from "preact";
-import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useState, type Dispatch, type StateUpdater } from "preact/hooks";
 import { MessageTools, type IMessage } from "../tools/messages";
 import { useInputState } from "@common/hooks/useInputState";
 import { type IConnection } from "../tools/connection";
+import { loadObject, saveObject } from "../tools/storage";
+import { useInputCallback } from "@common/hooks/useInputCallback";
+
+interface IStory {
+    lore: string;
+    messages: IMessage[];
+}
 
 interface IContext {
     currentConnection: number;
     availableConnections: IConnection[];
     input: string;
     systemPrompt: string;
-    lore: string;
     userPrompt: string;
     summarizePrompt: string;
     summaryEnabled: boolean;
     bannedWords: string[];
-    messages: IMessage[];
+    totalSpentKudos: number;
+    stories: Record<string, IStory>;
+    currentStory: string;
     // 
     triggerNext: boolean;
     continueLast: boolean;
@@ -22,6 +30,8 @@ interface IContext {
 
 interface IComputableContext {
     connection: IConnection;
+    lore: string;
+    messages: IMessage[];
 }
 
 interface IActions {
@@ -36,6 +46,7 @@ interface IActions {
     setSummarizePrompt: (prompt: string | Event) => void;
     setBannedWords: (words: string[]) => void;
     setSummaryEnabled: (summaryEnabled: boolean) => void;
+    setTotalSpentKudos: Dispatch<StateUpdater<number>>;
 
     setTriggerNext: (triggerNext: boolean) => void;
     setContinueLast: (continueLast: boolean) => void;
@@ -49,9 +60,14 @@ interface IActions {
     addSwipe: (index: number, content: string) => void;
 
     continueMessage: (continueLast?: boolean) => void;
+
+    setCurrentStory: (id: string) => void;
+    createStory: (id: string) => void;
+    deleteStory: (id: string) => void;
 }
 
 const SAVE_KEY = 'ai_game_save_state';
+export const DEFAULT_STORY = 'default';
 
 export enum Instruct {
     CHATML = `{% for message in messages %}{{'<|im_start|>' + message['role'] + '\\n\\n' + message['content'] + '<|im_end|>' + '\\n'}}{% endfor %}{% if add_generation_prompt %}{{ '<|im_start|>assistant\\n\\n' }}{% endif %}`,
@@ -70,12 +86,14 @@ export enum Instruct {
 const DEFAULT_CONTEXT: IContext = {
     currentConnection: 0,
     availableConnections: [{
+        type: 'kobold',
         url: 'http://localhost:5001',
-        instruct: Instruct.CHATML,
+        instruct: Instruct.MISTRAL,
     }],
     input: '',
     systemPrompt: 'You are a creative writer. Write a story based on the world description below. Story should be adult and mature; and could include swearing, violence and unfairness. Portray characters realistically and stay in the lore.',
-    lore: '',
+    stories: {},
+    currentStory: DEFAULT_STORY,
     userPrompt: `{% if isStart -%}
 Write a novel using information above as a reference.
 {%- else -%}
@@ -90,48 +108,45 @@ Make sure to follow the world description and rules exactly. Avoid cliffhangers
     summarizePrompt: 'Summarize following text in one paragraph:\n\n{{ message }}\n\nAnswer with shortened text only.',
     summaryEnabled: true,
     bannedWords: [],
-    messages: [],
+    totalSpentKudos: 0,
     triggerNext: false,
     continueLast: false,
 };
 
-export const saveContext = (context: IContext) => {
-    const contextToSave: Partial<IContext> = { ...context };
+const EMPTY_STORY: IStory = {
+    lore: '',
+    messages: [],
+};
+
+const saveContext = async (context: IContext & IComputableContext) => {
+    const contextToSave: Partial<IContext & IComputableContext> = { ...context };
+    delete contextToSave.connection;
     delete contextToSave.triggerNext;
     delete contextToSave.continueLast;
+    delete contextToSave.lore;
+    delete contextToSave.messages;
 
-    localStorage.setItem(SAVE_KEY, JSON.stringify(contextToSave));
-}
-
-export const loadContext = (): IContext => {
-    let loadedContext: Partial<IContext> = {};
-
-    try {
-        const json = localStorage.getItem(SAVE_KEY);
-        if (json) {
-            loadedContext = JSON.parse(json);
-        }
-    } catch { }
-
-    return { ...DEFAULT_CONTEXT, ...loadedContext };
+    return saveObject(SAVE_KEY, contextToSave);
 }
 
 export type IStateContext = IContext & IActions & IComputableContext;
 
 export const StateContext = createContext<IStateContext>({} as IStateContext);
 
+const loadedContext = await loadObject(SAVE_KEY, DEFAULT_CONTEXT);
+
 export const StateContextProvider = ({ children }: { children?: any }) => {
-    const loadedContext = useMemo(() => loadContext(), []);
     const [currentConnection, setCurrentConnection] = useState<number>(loadedContext.currentConnection);
     const [availableConnections, setAvailableConnections] = useState<IConnection[]>(loadedContext.availableConnections);
     const [input, setInput] = useInputState(loadedContext.input);
-    const [lore, setLore] = useInputState(loadedContext.lore);
+    const [stories, setStories] = useState(loadedContext.stories);
+    const [currentStory, setCurrentStory] = useState(loadedContext.currentStory);
     const [systemPrompt, setSystemPrompt] = useInputState(loadedContext.systemPrompt);
     const [userPrompt, setUserPrompt] = useInputState(loadedContext.userPrompt);
     const [summarizePrompt, setSummarizePrompt] = useInputState(loadedContext.summarizePrompt);
     const [bannedWords, setBannedWords] = useState<string[]>(loadedContext.bannedWords);
-    const [messages, setMessages] = useState(loadedContext.messages);
     const [summaryEnabled, setSummaryEnabled] = useState(loadedContext.summaryEnabled);
+    const [totalSpentKudos, setTotalSpentKudos] = useState(loadedContext.totalSpentKudos);
 
     const connection = availableConnections[currentConnection] ?? DEFAULT_CONTEXT.availableConnections[0];
 
@@ -151,6 +166,35 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
 
     useEffect(() => setConnection({ ...connection, instruct }), [instruct]);
 
+    const setLore = useInputCallback((lore) => {
+        if (!currentStory) return;
+        setStories(ss => ({
+            ...ss,
+            [currentStory]: {
+                ...EMPTY_STORY,
+                ...stories[currentStory],
+                lore,
+            }
+        }));
+    }, [currentStory]);
+
+    const setMessages = useCallback((msg: StateUpdater<IMessage[]>) => {
+        if (!currentStory) return;
+
+        let messages = (typeof msg === 'function')
+            ? msg(stories[currentStory]?.messages ?? EMPTY_STORY.messages)
+            : msg;
+
+        setStories(ss => ({
+            ...ss,
+            [currentStory]: {
+                ...EMPTY_STORY,
+                ...stories[currentStory],
+                messages,
+            }
+        }));
+    }, [currentStory]);
+
     const actions: IActions = useMemo(() => ({
         setConnection,
         setCurrentConnection,
@@ -164,6 +208,8 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
 
         setTriggerNext,
         setContinueLast,
+        setTotalSpentKudos,
+        setCurrentStory,
 
         setBannedWords: (words) => setBannedWords(words.slice()),
         setAvailableConnections: (connections) => setAvailableConnections(connections.slice()),
@@ -238,7 +284,19 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
             setTriggerNext(true);
             setContinueLast(c);
         },
-    }), []);
+        createStory: (id: string) => {
+            setStories(ss => ({
+                ...ss,
+                [id]: { ...EMPTY_STORY }
+            }))
+        },
+        deleteStory: (id: string) => {
+            if (id === DEFAULT_STORY) return;
+
+            setStories(ss => Object.fromEntries(Object.entries(ss).filter(([k]) => k !== id)));
+            setCurrentStory(cs => cs === id ? DEFAULT_STORY : cs);
+        }
+    }), [setLore, setMessages]);
 
     const rawContext: IContext & IComputableContext = {
         connection,
@@ -246,15 +304,18 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
         availableConnections,
         input,
         systemPrompt,
-        lore,
         userPrompt,
         summarizePrompt,
         summaryEnabled,
         bannedWords,
-        messages,
+        totalSpentKudos,
+        stories,
+        currentStory,
         //
         triggerNext,
         continueLast,
+        lore: stories[currentStory]?.lore ?? '',
+        messages: stories[currentStory]?.messages ?? [],
     };
 
     const context = useMemo(() => rawContext, Object.values(rawContext));

src/games/ai-story/tools/connection.ts

@@ -6,26 +6,24 @@ import { Huggingface } from "./huggingface";
 import { approximateTokens, normalizeModel } from "./model";
 
 interface IBaseConnection {
+    type: 'kobold' | 'horde';
     instruct: string;
+    url?: string;
+    apiKey?: string;
+    model?: string;
 }
 
 interface IKoboldConnection extends IBaseConnection {
+    type: 'kobold';
     url: string;
 }
 
 interface IHordeConnection extends IBaseConnection {
+    type: 'horde';
     apiKey?: string;
     model: string;
 }
 
-export const isKoboldConnection = (obj: unknown): obj is IKoboldConnection => (
-    obj != null && typeof obj === 'object' && 'url' in obj && typeof obj.url === 'string'
-);
-
-export const isHordeConnection = (obj: unknown): obj is IHordeConnection => (
-    obj != null && typeof obj === 'object' && 'model' in obj && typeof obj.model === 'string'
-);
-
 export type IConnection = IKoboldConnection | IHordeConnection;
 
 interface IHordeWorker {
@@ -51,6 +49,7 @@ interface IHordeResult {
     faulted: boolean;
     done: boolean;
     finished: number;
+    kudos: number;
     generations?: {
         text: string;
     }[];
@@ -88,7 +87,12 @@ export namespace Connection {
 
     let abortController = new AbortController();
 
-    async function* generateKobold(url: string, prompt: string, extraSettings: IGenerationSettings = {}): AsyncGenerator<string> {
+    export interface TextChunk {
+        text: string;
+        cost: number;
+    }
+
+    async function* generateKobold(url: string, prompt: string, extraSettings: IGenerationSettings = {}): AsyncGenerator<TextChunk> {
         const sse = new SSE(`${url}/api/extra/generate/stream`, {
             payload: JSON.stringify({
                 ...DEFAULT_GENERATION_SETTINGS,
@@ -130,10 +134,10 @@ export namespace Connection {
 
         while (!end || messages.length) {
             while (messages.length > 0) {
-                const message = messages.shift();
-                if (message != null) {
+                const text = messages.shift();
+                if (text != null) {
                     try {
-                        yield message;
+                        yield { text, cost: 0 };
                     } catch { }
                 }
             }
@@ -145,7 +149,7 @@ export namespace Connection {
         sse.close();
     }
 
-    async function* generateHorde(connection: IHordeConnection, prompt: string, extraSettings: IGenerationSettings = {}): AsyncGenerator<string> {
+    async function* generateHorde(connection: IHordeConnection, prompt: string, extraSettings: IGenerationSettings = {}): AsyncGenerator<TextChunk> {
         if (!connection.model) {
             throw new Error('Horde not connected');
         }
@@ -190,14 +194,14 @@ export namespace Connection {
                 }
 
                 const { id } = await generateResponse.json() as { id: string };
-                const request = async (method = 'GET'): Promise<string | null> => {
+                const request = async (method = 'GET'): Promise<TextChunk | null> => {
                     const response = await fetch(`${AIHORDE}/api/v2/generate/text/status/${id}`, { method });
                     if (response.ok && response.status < 400) {
                         const result: IHordeResult = await response.json();
                         if (result.generations?.length === 1) {
                             const { text } = result.generations[0];
 
-                            return text;
+                            return { text, cost: result.kudos };
                         }
                     } else {
                         throw new Error(await response.text());
@@ -206,16 +210,17 @@ export namespace Connection {
                     return null;
                 };
 
-                const deleteRequest = async () => (await request('DELETE')) ?? '';
+                const deleteRequest = async () => (await request('DELETE')) ?? { text: '', cost: 0 };
                 let text: string | null = null;
 
                 while (!text) {
                     try {
                         await delay(2500, { signal });
 
-                        text = await request();
+                        const response = await request();
 
-                        if (text) {
+                        if (response?.text) {
+                            text = response.text;
                             for (const sequence of requestData.params.stop_sequence) {
                                 const stopIdx = text.indexOf(sequence);
                                 if (stopIdx >= 0) {
@@ -233,7 +238,7 @@ export namespace Connection {
                                 }
                             }
 
-                            yield unsloppedText;
+                            yield { text: unsloppedText, cost: response.cost };
 
                             requestData.prompt += unsloppedText;
 
@@ -257,9 +262,9 @@ export namespace Connection {
     }
 
     export async function* generate(connection: IConnection, prompt: string, extraSettings: IGenerationSettings = {}) {
-        if (isKoboldConnection(connection)) {
+        if (connection.type === 'kobold') {
             yield* generateKobold(connection.url, prompt, extraSettings);
-        } else if (isHordeConnection(connection)) {
+        } else if (connection.type === 'horde') {
             yield* generateHorde(connection, prompt, extraSettings);
         }
     }
@@ -324,7 +329,7 @@ export namespace Connection {
     export const getHordeModels = throttle(requestHordeModels, 10000);
 
     export async function getModelName(connection: IConnection): Promise<string> {
-        if (isKoboldConnection(connection)) {
+        if (connection.type === 'kobold') {
             try {
                 const response = await fetch(`${connection.url}/api/v1/model`);
                 if (response.ok) {
@@ -334,7 +339,7 @@ export namespace Connection {
             } catch (e) {
                 console.error('Error getting max tokens', e);
             }
-        } else if (isHordeConnection(connection)) {
+        } else if (connection.type === 'horde') {
             return connection.model;
         }
 
@@ -342,7 +347,7 @@ export namespace Connection {
     }
 
     export async function getContextLength(connection: IConnection): Promise<number> {
-        if (isKoboldConnection(connection)) {
+        if (connection.type === 'kobold') {
             try {
                 const response = await fetch(`${connection.url}/api/extra/true_max_context_length`);
                 if (response.ok) {
@@ -352,7 +357,7 @@ export namespace Connection {
             } catch (e) {
                 console.error('Error getting max tokens', e);
             }
-        } else if (isHordeConnection(connection) && connection.model) {
+        } else if (connection.type === 'horde' && connection.model) {
             const models = await getHordeModels();
             const model = models.get(connection.model);
             if (model) {
@@ -364,7 +369,7 @@ export namespace Connection {
     }
 
     export async function countTokens(connection: IConnection, prompt: string) {
-        if (isKoboldConnection(connection)) {
+        if (connection.type === 'kobold') {
             try {
                 const response = await fetch(`${connection.url}/api/extra/tokencount`, {
                     body: JSON.stringify({ prompt }),
@@ -378,7 +383,7 @@ export namespace Connection {
             } catch (e) {
                 console.error('Error counting tokens:', e);
             }
-        } else {
+        } else if (connection.type === 'horde') {
             const model = await getModelName(connection);
             const tokenizer = await Huggingface.findTokenizer(model);
             if (tokenizer) {

src/games/ai-story/tools/huggingface.ts

@@ -3,6 +3,7 @@ import * as hub from '@huggingface/hub';
 import { Template } from '@huggingface/jinja';
 import { AutoTokenizer, PreTrainedTokenizer } from '@huggingface/transformers';
 import { normalizeModel } from './model';
+import { loadObject, saveObject } from './storage';
 
 export namespace Huggingface {
     export interface ITemplateMessage {
@@ -60,27 +61,9 @@ export namespace Huggingface {
 
     const TEMPLATE_CACHE_KEY = 'ai_game_template_cache';
 
-    const loadCache = (): Record<string, string> => {
-        const json = localStorage.getItem(TEMPLATE_CACHE_KEY);
+    const templateCache: Record<string, string> = {};
+    loadObject(TEMPLATE_CACHE_KEY, {}).then(c => Object.assign(templateCache, c));
 
-        try {
-            if (json) {
-                const cache = JSON.parse(json);
-                if (cache && typeof cache === 'object') {
-                    return cache
-                }
-            }
-        } catch { }
-
-        return {};
-    };
-
-    const saveCache = (cache: Record<string, string>) => {
-        const json = JSON.stringify(cache);
-        localStorage.setItem(TEMPLATE_CACHE_KEY, json);
-    };
-
-    const templateCache: Record<string, string> = loadCache();
     const compiledTemplates = new Map<string, Template>();
     const tokenizerCache = new Map<string, PreTrainedTokenizer | null>();
 
@@ -261,7 +244,7 @@ export namespace Huggingface {
         }
 
         templateCache[modelName] = template;
-        saveCache(templateCache);
+        saveObject(TEMPLATE_CACHE_KEY, templateCache);
 
         return template;
     }

src/games/ai-story/tools/storage.ts

@@ -0,0 +1,44 @@
+const API_KEY = 'awoorwa32';
+
+export const loadObject = async <T>(key: string, defaultObject: T): Promise<T> => {
+    let localObject: Partial<T> = {};
+
+    try {
+        const json = localStorage.getItem(key);
+        if (json) {
+            localObject = JSON.parse(json);
+        }
+    } catch { }
+
+    let remoteObject: Partial<T> = {};
+    try {
+        const response = await fetch(`https://demo.pabloader.ru/storage/${key}`);
+        if (response.ok) {
+            remoteObject = await response.json();
+        }
+    } catch { }
+
+    return { ...defaultObject, ...localObject, ...remoteObject };
+}
+
+export const saveObject = async <T>(key: string, obj: T) => {
+    const saveData = JSON.stringify(obj);
+
+    localStorage.setItem(key, saveData);
+    try {
+        const url = new URL('https://demo.pabloader.ru/storage/index.php');
+        url.searchParams.set('filename', key);
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${API_KEY}`,
+            },
+            body: saveData,
+        });
+        if (!response.ok) {
+            throw new Error('Failed to save context');
+        }
+    } catch {
+    }
+}