Fix huggingface tokenizer config

src/games/ai-story/assets/style.css

@@ -88,6 +88,7 @@ body {
         display: flex;
         flex-direction: row;
         justify-content: center;
+        background-color: var(--backgroundColor);
     }
 
     .app {

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

@@ -2,11 +2,9 @@ import { Header } from "./header/header";
 import { Chat } from "./chat";
 import { Input } from "./input";
 
-import bgImage from '../assets/bg.jpg';
-
 export const App = () => {
     return (
-        <div class='root' style={{ backgroundImage: `url('${bgImage.src}')` }}>
+        <div class='root'>
             <div class='app'>
                 <Header />
                 <Chat />

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

@@ -35,7 +35,12 @@ export const ConnectionEditor = ({ connection, setConnection }: IProps) => {
             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))));
+                .then(m => setHordeModels(Array.from(
+                    m.values())
+                    .sort((a, b) =>
+                        b.maxContext - a.maxContext || a.name.localeCompare(b.name)
+                    )
+                ));
         }
     }, [connection]);
 

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

@@ -66,11 +66,12 @@
     flex-wrap: wrap;
 }
 
-.lore {
+.modal {
     display: flex;
     flex-direction: column;
     gap: 10px;
     min-height: 80dvh;
+}
 
 .currentStory {
     display: flex;
@@ -88,4 +89,3 @@
 .loreText {
     flex-grow: 1;
 }
-}

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

@@ -130,7 +130,7 @@ export const Header = () => {
                 <h3 class={styles.modalTitle}>Connection settings</h3>
                 <ConnectionEditor connection={connection} setConnection={setConnection} />
             </Modal>
-            <Modal open={loreOpen.value} onClose={loreOpen.setFalse} class={styles.lore}>
+            <Modal open={loreOpen.value} onClose={loreOpen.setFalse} class={styles.modal}>
                 <h3 class={styles.modalTitle}>Lore Editor</h3>
                 <div class={styles.currentStory}>
                     <select value={currentStory} onChange={handleChangeStory} class={styles.storiesSelector}>
@@ -152,7 +152,7 @@ export const Header = () => {
                     class={styles.loreText}
                 />
             </Modal>
-            <Modal open={genparamsOpen.value} onClose={genparamsOpen.setFalse}>
+            <Modal open={genparamsOpen.value} onClose={genparamsOpen.setFalse} class={styles.modal}>
                 <h3 class={styles.modalTitle}>Generation Parameters</h3>
                 <div className={styles.scrollPane}>
                     <h4 class={styles.modalTitle}>Banned phrases</h4>

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

@@ -104,9 +104,12 @@ export namespace Huggingface {
 
             try {
                 console.log(`[huggingface] searching config in '${name}/tokenizer_config.json'`);
-                const fileResponse = await hub.downloadFile({ repo: name, path: 'tokenizer_config.json' });
+                const fileResponse = await hub.downloadFile({
+                    repo: name,
+                    path: 'tokenizer_config.json',                 
+                });
                 if (fileResponse) {
-                    const maybeConfig = await fileResponse.json();
+                    const maybeConfig = JSON.parse(await fileResponse.text());
                     if (isTokenizerConfig(maybeConfig)) {
                         tokenizerConfig = maybeConfig;
                         foundName = `${name}/tokenizer_config.json`;