pabloid
/
tsgames
1
0
Fork 0
Code

Multiple stories

This commit is contained in:
Pabloader 2026-02-17 11:03:28 +00:00
parent 21a26859da
commit 77802634ae
3 changed files with 158 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/games/ai-story/components/header/header.module.css
View File

@ -65,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;
}
}

62
src/games/ai-story/components/header/header.tsx
View File

@ -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";
@ -14,8 +15,29 @@ import styles from './header.module.css';
export const Header = () => {
const { contextLength, promptTokens, modelName, spentKudos } = useContext(LLMContext);
const {
messages, connection, systemPrompt, lore, userPrompt, bannedWords, summarizePrompt, summaryEnabled, totalSpentKudos,
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}>
@ -90,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}>

87
src/games/ai-story/contexts/state.tsx
View File

@ -4,19 +4,25 @@ 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;
@ -24,6 +30,8 @@ interface IContext {
interface IComputableContext {
connection: IConnection;
lore: string;
messages: IMessage[];
}
interface IActions {
@ -52,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 %}`,
@ -79,7 +92,8 @@ const DEFAULT_CONTEXT: IContext = {
}],
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 -%}
@ -94,16 +108,23 @@ 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 = async (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;
return saveObject(SAVE_KEY, contextToSave);
}
@ -118,12 +139,12 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
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);
@ -145,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,
@ -159,6 +209,7 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
setTriggerNext,
setContinueLast,
setTotalSpentKudos,
setCurrentStory,
setBannedWords: (words) => setBannedWords(words.slice()),
setAvailableConnections: (connections) => setAvailableConnections(connections.slice()),
@ -233,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,
@ -241,16 +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));