From a031bc09af5cf19ef57bf432da44e727a643a7f0 Mon Sep 17 00:00:00 2001
From: xModo99 <xmodo999@gmail.com>
Date: Mon, 18 Mar 2024 14:27:50 +0000
Subject: [PATCH] Add reactive caching strategy
---
css/art/genAI.css | 5 +
devTools/types/extensions.d.ts | 4 +
devTools/types/idb/entry.d.ts | 627 ++++++++++++++++++
devTools/types/idb/index.d.ts | 7 +
devTools/types/idb/wrap-idb-value.d.ts | 35 +
js/001-lib/idb.js | 346 ++++++++++
js/003-data/gameVariableData.js | 2 +
src/art/artJS.js | 334 ++++++----
src/art/genAI/reactiveImageDB.js | 525 +++++++++++++++
src/art/genAI/stableDiffusion.js | 136 +++-
.../genAI/{imageDB.js => staticImageDB.js} | 4 +-
src/facilities/dressingRoom/dressingRoom.js | 16 +-
src/gui/options/options.js | 70 +-
13 files changed, 1929 insertions(+), 182 deletions(-)
create mode 100644 devTools/types/idb/entry.d.ts
create mode 100644 devTools/types/idb/index.d.ts
create mode 100644 devTools/types/idb/wrap-idb-value.d.ts
create mode 100644 js/001-lib/idb.js
create mode 100644 src/art/genAI/reactiveImageDB.js
rename src/art/genAI/{imageDB.js => staticImageDB.js} (98%)
diff --git a/css/art/genAI.css b/css/art/genAI.css
index e98f5a75b6b..cbd87eee3fb 100644
--- a/css/art/genAI.css
+++ b/css/art/genAI.css
@@ -1,6 +1,11 @@
.ai-art-image {
transition: filter 0.5s ease-in-out;
position: relative;
+ float:right;
+ border:3px hidden;
+ object-fit:contain;
+ height:100%;
+ width:100%;
}
.ai-art-container.refreshing .ai-art-image {
diff --git a/devTools/types/extensions.d.ts b/devTools/types/extensions.d.ts
index e39730ed292..084ed210d32 100644
--- a/devTools/types/extensions.d.ts
+++ b/devTools/types/extensions.d.ts
@@ -20,3 +20,7 @@ interface ObjectConstructor {
keys<K extends PropertyKey, V>(o: Partial<Record<K, V>>): EnumerablePropertyKey<K>[];
entries<K extends PropertyKey, V>(o: Partial<Record<K, V>>): [EnumerablePropertyKey<K>, V][];
}
+
+
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
diff --git a/devTools/types/idb/entry.d.ts b/devTools/types/idb/entry.d.ts
new file mode 100644
index 00000000000..752896fd5c3
--- /dev/null
+++ b/devTools/types/idb/entry.d.ts
@@ -0,0 +1,627 @@
+export interface OpenDBCallbacks<DBTypes extends DBSchema | unknown> {
+ /**
+ * Called if this version of the database has never been opened before. Use it to specify the
+ * schema for the database.
+ *
+ * @param database A database instance that you can use to add/remove stores and indexes.
+ * @param oldVersion Last version of the database opened by the user.
+ * @param newVersion Whatever new version you provided.
+ * @param transaction The transaction for this upgrade.
+ * This is useful if you need to get data from other stores as part of a migration.
+ * @param event The event object for the associated 'upgradeneeded' event.
+ */
+ upgrade?(database: IDBPDatabase<DBTypes>, oldVersion: number, newVersion: number | null, transaction: IDBPTransaction<DBTypes, StoreNames<DBTypes>[], 'versionchange'>, event: IDBVersionChangeEvent): void;
+ /**
+ * Called if there are older versions of the database open on the origin, so this version cannot
+ * open.
+ *
+ * @param currentVersion Version of the database that's blocking this one.
+ * @param blockedVersion The version of the database being blocked (whatever version you provided to `openDB`).
+ * @param event The event object for the associated `blocked` event.
+ */
+ blocked?(currentVersion: number, blockedVersion: number | null, event: IDBVersionChangeEvent): void;
+ /**
+ * Called if this connection is blocking a future version of the database from opening.
+ *
+ * @param currentVersion Version of the open database (whatever version you provided to `openDB`).
+ * @param blockedVersion The version of the database that's being blocked.
+ * @param event The event object for the associated `versionchange` event.
+ */
+ blocking?(currentVersion: number, blockedVersion: number | null, event: IDBVersionChangeEvent): void;
+ /**
+ * Called if the browser abnormally terminates the connection.
+ * This is not called when `db.close()` is called.
+ */
+ terminated?(): void;
+}
+/**
+ * Open a database.
+ *
+ * @param name Name of the database.
+ * @param version Schema version.
+ * @param callbacks Additional callbacks.
+ */
+export declare function openDB<DBTypes extends DBSchema | unknown = unknown>(name: string, version?: number, { blocked, upgrade, blocking, terminated }?: OpenDBCallbacks<DBTypes>): Promise<IDBPDatabase<DBTypes>>;
+export interface DeleteDBCallbacks {
+ /**
+ * Called if there are connections to this database open, so it cannot be deleted.
+ *
+ * @param currentVersion Version of the database that's blocking the delete operation.
+ * @param event The event object for the associated `blocked` event.
+ */
+ blocked?(currentVersion: number, event: IDBVersionChangeEvent): void;
+}
+/**
+ * Delete a database.
+ *
+ * @param name Name of the database.
+ */
+export declare function deleteDB(name: string, { blocked }?: DeleteDBCallbacks): Promise<void>;
+// export { unwrap, wrap } from './wrap-idb-value.js';
+declare type KeyToKeyNoIndex<T> = {
+ [K in keyof T]: string extends K ? never : number extends K ? never : K;
+};
+declare type ValuesOf<T> = T extends {
+ [K in keyof T]: infer U;
+} ? U : never;
+declare type KnownKeys<T> = ValuesOf<KeyToKeyNoIndex<T>>;
+declare type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+export interface DBSchema {
+ [s: string]: DBSchemaValue;
+}
+interface IndexKeys {
+ [s: string]: IDBValidKey;
+}
+interface DBSchemaValue {
+ key: IDBValidKey;
+ value: any;
+ indexes?: IndexKeys;
+}
+/**
+ * Extract known object store names from the DB schema type.
+ *
+ * @template DBTypes DB schema type, or unknown if the DB isn't typed.
+ */
+export declare type StoreNames<DBTypes extends DBSchema | unknown> = DBTypes extends DBSchema ? KnownKeys<DBTypes> : string;
+/**
+ * Extract database value types from the DB schema type.
+ *
+ * @template DBTypes DB schema type, or unknown if the DB isn't typed.
+ * @template StoreName Names of the object stores to get the types of.
+ */
+export declare type StoreValue<DBTypes extends DBSchema | unknown, StoreName extends StoreNames<DBTypes>> = DBTypes extends DBSchema ? DBTypes[StoreName]['value'] : any;
+/**
+ * Extract database key types from the DB schema type.
+ *
+ * @template DBTypes DB schema type, or unknown if the DB isn't typed.
+ * @template StoreName Names of the object stores to get the types of.
+ */
+export declare type StoreKey<DBTypes extends DBSchema | unknown, StoreName extends StoreNames<DBTypes>> = DBTypes extends DBSchema ? DBTypes[StoreName]['key'] : IDBValidKey;
+/**
+ * Extract the names of indexes in certain object stores from the DB schema type.
+ *
+ * @template DBTypes DB schema type, or unknown if the DB isn't typed.
+ * @template StoreName Names of the object stores to get the types of.
+ */
+export declare type IndexNames<DBTypes extends DBSchema | unknown, StoreName extends StoreNames<DBTypes>> = DBTypes extends DBSchema ? keyof DBTypes[StoreName]['indexes'] : string;
+/**
+ * Extract the types of indexes in certain object stores from the DB schema type.
+ *
+ * @template DBTypes DB schema type, or unknown if the DB isn't typed.
+ * @template StoreName Names of the object stores to get the types of.
+ * @template IndexName Names of the indexes to get the types of.
+ */
+export declare type IndexKey<DBTypes extends DBSchema | unknown, StoreName extends StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, StoreName>> = DBTypes extends DBSchema ? IndexName extends keyof DBTypes[StoreName]['indexes'] ? DBTypes[StoreName]['indexes'][IndexName] : IDBValidKey : IDBValidKey;
+declare type CursorSource<DBTypes extends DBSchema | unknown, TxStores extends ArrayLike<StoreNames<DBTypes>>, StoreName extends StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, StoreName> | unknown, Mode extends IDBTransactionMode = 'readonly'> = IndexName extends IndexNames<DBTypes, StoreName> ? IDBPIndex<DBTypes, TxStores, StoreName, IndexName, Mode> : IDBPObjectStore<DBTypes, TxStores, StoreName, Mode>;
+declare type CursorKey<DBTypes extends DBSchema | unknown, StoreName extends StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, StoreName> | unknown> = IndexName extends IndexNames<DBTypes, StoreName> ? IndexKey<DBTypes, StoreName, IndexName> : StoreKey<DBTypes, StoreName>;
+declare type IDBPDatabaseExtends = Omit<IDBDatabase, 'createObjectStore' | 'deleteObjectStore' | 'transaction' | 'objectStoreNames'>;
+/**
+ * A variation of DOMStringList with precise string types
+ */
+export interface TypedDOMStringList<T extends string> extends DOMStringList {
+ contains(string: T): boolean;
+ item(index: number): T | null;
+ [index: number]: T;
+ [Symbol.iterator](): IterableIterator<T>;
+}
+interface IDBTransactionOptions {
+ /**
+ * The durability of the transaction.
+ *
+ * The default is "default". Using "relaxed" provides better performance, but with fewer
+ * guarantees. Web applications are encouraged to use "relaxed" for ephemeral data such as caches
+ * or quickly changing records, and "strict" in cases where reducing the risk of data loss
+ * outweighs the impact to performance and power.
+ */
+ durability?: 'default' | 'strict' | 'relaxed';
+}
+export interface IDBPDatabase<DBTypes extends DBSchema | unknown = unknown> extends IDBPDatabaseExtends {
+ /**
+ * The names of stores in the database.
+ */
+ readonly objectStoreNames: TypedDOMStringList<StoreNames<DBTypes>>;
+ /**
+ * Creates a new object store.
+ *
+ * Throws a "InvalidStateError" DOMException if not called within an upgrade transaction.
+ */
+ createObjectStore<Name extends StoreNames<DBTypes>>(name: Name, optionalParameters?: IDBObjectStoreParameters): IDBPObjectStore<DBTypes, ArrayLike<StoreNames<DBTypes>>, Name, 'versionchange'>;
+ /**
+ * Deletes the object store with the given name.
+ *
+ * Throws a "InvalidStateError" DOMException if not called within an upgrade transaction.
+ */
+ deleteObjectStore(name: StoreNames<DBTypes>): void;
+ /**
+ * Start a new transaction.
+ *
+ * @param storeNames The object store(s) this transaction needs.
+ * @param mode
+ * @param options
+ */
+ transaction<Name extends StoreNames<DBTypes>, Mode extends IDBTransactionMode = 'readonly'>(storeNames: Name, mode?: Mode, options?: IDBTransactionOptions): IDBPTransaction<DBTypes, [Name], Mode>;
+ transaction<Names extends ArrayLike<StoreNames<DBTypes>>, Mode extends IDBTransactionMode = 'readonly'>(storeNames: Names, mode?: Mode, options?: IDBTransactionOptions): IDBPTransaction<DBTypes, Names, Mode>;
+ /**
+ * Add a value to a store.
+ *
+ * Rejects if an item of a given key already exists in the store.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param value
+ * @param key
+ */
+ add<Name extends StoreNames<DBTypes>>(storeName: Name, value: StoreValue<DBTypes, Name>, key?: StoreKey<DBTypes, Name> | IDBKeyRange): Promise<StoreKey<DBTypes, Name>>;
+ /**
+ * Deletes all records in a store.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ */
+ clear(name: StoreNames<DBTypes>): Promise<void>;
+ /**
+ * Retrieves the number of records matching the given query in a store.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param key
+ */
+ count<Name extends StoreNames<DBTypes>>(storeName: Name, key?: StoreKey<DBTypes, Name> | IDBKeyRange | null): Promise<number>;
+ /**
+ * Retrieves the number of records matching the given query in an index.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param indexName Name of the index within the store.
+ * @param key
+ */
+ countFromIndex<Name extends StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, Name>>(storeName: Name, indexName: IndexName, key?: IndexKey<DBTypes, Name, IndexName> | IDBKeyRange | null): Promise<number>;
+ /**
+ * Deletes records in a store matching the given query.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param key
+ */
+ delete<Name extends StoreNames<DBTypes>>(storeName: Name, key: StoreKey<DBTypes, Name> | IDBKeyRange): Promise<void>;
+ /**
+ * Retrieves the value of the first record in a store matching the query.
+ *
+ * Resolves with undefined if no match is found.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param query
+ */
+ get<Name extends StoreNames<DBTypes>>(storeName: Name, query: StoreKey<DBTypes, Name> | IDBKeyRange): Promise<StoreValue<DBTypes, Name> | undefined>;
+ /**
+ * Retrieves the value of the first record in an index matching the query.
+ *
+ * Resolves with undefined if no match is found.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param indexName Name of the index within the store.
+ * @param query
+ */
+ getFromIndex<Name extends StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, Name>>(storeName: Name, indexName: IndexName, query: IndexKey<DBTypes, Name, IndexName> | IDBKeyRange): Promise<StoreValue<DBTypes, Name> | undefined>;
+ /**
+ * Retrieves all values in a store that match the query.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param query
+ * @param count Maximum number of values to return.
+ */
+ getAll<Name extends StoreNames<DBTypes>>(storeName: Name, query?: StoreKey<DBTypes, Name> | IDBKeyRange | null, count?: number): Promise<StoreValue<DBTypes, Name>[]>;
+ /**
+ * Retrieves all values in an index that match the query.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param indexName Name of the index within the store.
+ * @param query
+ * @param count Maximum number of values to return.
+ */
+ getAllFromIndex<Name extends StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, Name>>(storeName: Name, indexName: IndexName, query?: IndexKey<DBTypes, Name, IndexName> | IDBKeyRange | null, count?: number): Promise<StoreValue<DBTypes, Name>[]>;
+ /**
+ * Retrieves the keys of records in a store matching the query.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param query
+ * @param count Maximum number of keys to return.
+ */
+ getAllKeys<Name extends StoreNames<DBTypes>>(storeName: Name, query?: StoreKey<DBTypes, Name> | IDBKeyRange | null, count?: number): Promise<StoreKey<DBTypes, Name>[]>;
+ /**
+ * Retrieves the keys of records in an index matching the query.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param indexName Name of the index within the store.
+ * @param query
+ * @param count Maximum number of keys to return.
+ */
+ getAllKeysFromIndex<Name extends StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, Name>>(storeName: Name, indexName: IndexName, query?: IndexKey<DBTypes, Name, IndexName> | IDBKeyRange | null, count?: number): Promise<StoreKey<DBTypes, Name>[]>;
+ /**
+ * Retrieves the key of the first record in a store that matches the query.
+ *
+ * Resolves with undefined if no match is found.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param query
+ */
+ getKey<Name extends StoreNames<DBTypes>>(storeName: Name, query: StoreKey<DBTypes, Name> | IDBKeyRange): Promise<StoreKey<DBTypes, Name> | undefined>;
+ /**
+ * Retrieves the key of the first record in an index that matches the query.
+ *
+ * Resolves with undefined if no match is found.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param indexName Name of the index within the store.
+ * @param query
+ */
+ getKeyFromIndex<Name extends StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, Name>>(storeName: Name, indexName: IndexName, query: IndexKey<DBTypes, Name, IndexName> | IDBKeyRange): Promise<StoreKey<DBTypes, Name> | undefined>;
+ /**
+ * Put an item in the database.
+ *
+ * Replaces any item with the same key.
+ *
+ * This is a shortcut that creates a transaction for this single action. If you need to do more
+ * than one action, create a transaction instead.
+ *
+ * @param storeName Name of the store.
+ * @param value
+ * @param key
+ */
+ put<Name extends StoreNames<DBTypes>>(storeName: Name, value: StoreValue<DBTypes, Name>, key?: StoreKey<DBTypes, Name> | IDBKeyRange): Promise<StoreKey<DBTypes, Name>>;
+}
+declare type IDBPTransactionExtends = Omit<IDBTransaction, 'db' | 'objectStore' | 'objectStoreNames'>;
+export interface IDBPTransaction<DBTypes extends DBSchema | unknown = unknown, TxStores extends ArrayLike<StoreNames<DBTypes>> = ArrayLike<StoreNames<DBTypes>>, Mode extends IDBTransactionMode = 'readonly'> extends IDBPTransactionExtends {
+ /**
+ * The transaction's mode.
+ */
+ readonly mode: Mode;
+ /**
+ * The names of stores in scope for this transaction.
+ */
+ readonly objectStoreNames: TypedDOMStringList<TxStores[number]>;
+ /**
+ * The transaction's connection.
+ */
+ readonly db: IDBPDatabase<DBTypes>;
+ /**
+ * Promise for the completion of this transaction.
+ */
+ readonly done: Promise<void>;
+ /**
+ * The associated object store, if the transaction covers a single store, otherwise undefined.
+ */
+ readonly store: TxStores[1] extends undefined ? IDBPObjectStore<DBTypes, TxStores, TxStores[0], Mode> : undefined;
+ /**
+ * Returns an IDBObjectStore in the transaction's scope.
+ */
+ objectStore<StoreName extends TxStores[number]>(name: StoreName): IDBPObjectStore<DBTypes, TxStores, StoreName, Mode>;
+}
+declare type IDBPObjectStoreExtends = Omit<IDBObjectStore, 'transaction' | 'add' | 'clear' | 'count' | 'createIndex' | 'delete' | 'get' | 'getAll' | 'getAllKeys' | 'getKey' | 'index' | 'openCursor' | 'openKeyCursor' | 'put' | 'indexNames'>;
+export interface IDBPObjectStore<DBTypes extends DBSchema | unknown = unknown, TxStores extends ArrayLike<StoreNames<DBTypes>> = ArrayLike<StoreNames<DBTypes>>, StoreName extends StoreNames<DBTypes> = StoreNames<DBTypes>, Mode extends IDBTransactionMode = 'readonly'> extends IDBPObjectStoreExtends {
+ /**
+ * The names of indexes in the store.
+ */
+ readonly indexNames: TypedDOMStringList<IndexNames<DBTypes, StoreName>>;
+ /**
+ * The associated transaction.
+ */
+ readonly transaction: IDBPTransaction<DBTypes, TxStores, Mode>;
+ /**
+ * Add a value to the store.
+ *
+ * Rejects if an item of a given key already exists in the store.
+ */
+ add: Mode extends 'readonly' ? undefined : (value: StoreValue<DBTypes, StoreName>, key?: StoreKey<DBTypes, StoreName> | IDBKeyRange) => Promise<StoreKey<DBTypes, StoreName>>;
+ /**
+ * Deletes all records in store.
+ */
+ clear: Mode extends 'readonly' ? undefined : () => Promise<void>;
+ /**
+ * Retrieves the number of records matching the given query.
+ */
+ count(key?: StoreKey<DBTypes, StoreName> | IDBKeyRange | null): Promise<number>;
+ /**
+ * Creates a new index in store.
+ *
+ * Throws an "InvalidStateError" DOMException if not called within an upgrade transaction.
+ */
+ createIndex: Mode extends 'versionchange' ? <IndexName extends IndexNames<DBTypes, StoreName>>(name: IndexName, keyPath: string | string[], options?: IDBIndexParameters) => IDBPIndex<DBTypes, TxStores, StoreName, IndexName, Mode> : undefined;
+ /**
+ * Deletes records in store matching the given query.
+ */
+ delete: Mode extends 'readonly' ? undefined : (key: StoreKey<DBTypes, StoreName> | IDBKeyRange) => Promise<void>;
+ /**
+ * Retrieves the value of the first record matching the query.
+ *
+ * Resolves with undefined if no match is found.
+ */
+ get(query: StoreKey<DBTypes, StoreName> | IDBKeyRange): Promise<StoreValue<DBTypes, StoreName> | undefined>;
+ /**
+ * Retrieves all values that match the query.
+ *
+ * @param query
+ * @param count Maximum number of values to return.
+ */
+ getAll(query?: StoreKey<DBTypes, StoreName> | IDBKeyRange | null, count?: number): Promise<StoreValue<DBTypes, StoreName>[]>;
+ /**
+ * Retrieves the keys of records matching the query.
+ *
+ * @param query
+ * @param count Maximum number of keys to return.
+ */
+ getAllKeys(query?: StoreKey<DBTypes, StoreName> | IDBKeyRange | null, count?: number): Promise<StoreKey<DBTypes, StoreName>[]>;
+ /**
+ * Retrieves the key of the first record that matches the query.
+ *
+ * Resolves with undefined if no match is found.
+ */
+ getKey(query: StoreKey<DBTypes, StoreName> | IDBKeyRange): Promise<StoreKey<DBTypes, StoreName> | undefined>;
+ /**
+ * Get a query of a given name.
+ */
+ index<IndexName extends IndexNames<DBTypes, StoreName>>(name: IndexName): IDBPIndex<DBTypes, TxStores, StoreName, IndexName, Mode>;
+ /**
+ * Opens a cursor over the records matching the query.
+ *
+ * Resolves with null if no matches are found.
+ *
+ * @param query If null, all records match.
+ * @param direction
+ */
+ openCursor(query?: StoreKey<DBTypes, StoreName> | IDBKeyRange | null, direction?: IDBCursorDirection): Promise<IDBPCursorWithValue<DBTypes, TxStores, StoreName, unknown, Mode> | null>;
+ /**
+ * Opens a cursor over the keys matching the query.
+ *
+ * Resolves with null if no matches are found.
+ *
+ * @param query If null, all records match.
+ * @param direction
+ */
+ openKeyCursor(query?: StoreKey<DBTypes, StoreName> | IDBKeyRange | null, direction?: IDBCursorDirection): Promise<IDBPCursor<DBTypes, TxStores, StoreName, unknown, Mode> | null>;
+ /**
+ * Put an item in the store.
+ *
+ * Replaces any item with the same key.
+ */
+ put: Mode extends 'readonly' ? undefined : (value: StoreValue<DBTypes, StoreName>, key?: StoreKey<DBTypes, StoreName> | IDBKeyRange) => Promise<StoreKey<DBTypes, StoreName>>;
+ /**
+ * Iterate over the store.
+ */
+ [Symbol.asyncIterator](): AsyncIterableIterator<IDBPCursorWithValueIteratorValue<DBTypes, TxStores, StoreName, unknown, Mode>>;
+ /**
+ * Iterate over the records matching the query.
+ *
+ * @param query If null, all records match.
+ * @param direction
+ */
+ iterate(query?: StoreKey<DBTypes, StoreName> | IDBKeyRange | null, direction?: IDBCursorDirection): AsyncIterableIterator<IDBPCursorWithValueIteratorValue<DBTypes, TxStores, StoreName, unknown, Mode>>;
+}
+declare type IDBPIndexExtends = Omit<IDBIndex, 'objectStore' | 'count' | 'get' | 'getAll' | 'getAllKeys' | 'getKey' | 'openCursor' | 'openKeyCursor'>;
+export interface IDBPIndex<DBTypes extends DBSchema | unknown = unknown, TxStores extends ArrayLike<StoreNames<DBTypes>> = ArrayLike<StoreNames<DBTypes>>, StoreName extends StoreNames<DBTypes> = StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, StoreName> = IndexNames<DBTypes, StoreName>, Mode extends IDBTransactionMode = 'readonly'> extends IDBPIndexExtends {
+ /**
+ * The IDBObjectStore the index belongs to.
+ */
+ readonly objectStore: IDBPObjectStore<DBTypes, TxStores, StoreName, Mode>;
+ /**
+ * Retrieves the number of records matching the given query.
+ */
+ count(key?: IndexKey<DBTypes, StoreName, IndexName> | IDBKeyRange | null): Promise<number>;
+ /**
+ * Retrieves the value of the first record matching the query.
+ *
+ * Resolves with undefined if no match is found.
+ */
+ get(query: IndexKey<DBTypes, StoreName, IndexName> | IDBKeyRange): Promise<StoreValue<DBTypes, StoreName> | undefined>;
+ /**
+ * Retrieves all values that match the query.
+ *
+ * @param query
+ * @param count Maximum number of values to return.
+ */
+ getAll(query?: IndexKey<DBTypes, StoreName, IndexName> | IDBKeyRange | null, count?: number): Promise<StoreValue<DBTypes, StoreName>[]>;
+ /**
+ * Retrieves the keys of records matching the query.
+ *
+ * @param query
+ * @param count Maximum number of keys to return.
+ */
+ getAllKeys(query?: IndexKey<DBTypes, StoreName, IndexName> | IDBKeyRange | null, count?: number): Promise<StoreKey<DBTypes, StoreName>[]>;
+ /**
+ * Retrieves the key of the first record that matches the query.
+ *
+ * Resolves with undefined if no match is found.
+ */
+ getKey(query: IndexKey<DBTypes, StoreName, IndexName> | IDBKeyRange): Promise<StoreKey<DBTypes, StoreName> | undefined>;
+ /**
+ * Opens a cursor over the records matching the query.
+ *
+ * Resolves with null if no matches are found.
+ *
+ * @param query If null, all records match.
+ * @param direction
+ */
+ openCursor(query?: IndexKey<DBTypes, StoreName, IndexName> | IDBKeyRange | null, direction?: IDBCursorDirection): Promise<IDBPCursorWithValue<DBTypes, TxStores, StoreName, IndexName, Mode> | null>;
+ /**
+ * Opens a cursor over the keys matching the query.
+ *
+ * Resolves with null if no matches are found.
+ *
+ * @param query If null, all records match.
+ * @param direction
+ */
+ openKeyCursor(query?: IndexKey<DBTypes, StoreName, IndexName> | IDBKeyRange | null, direction?: IDBCursorDirection): Promise<IDBPCursor<DBTypes, TxStores, StoreName, IndexName, Mode> | null>;
+ /**
+ * Iterate over the index.
+ */
+ [Symbol.asyncIterator](): AsyncIterableIterator<IDBPCursorWithValueIteratorValue<DBTypes, TxStores, StoreName, IndexName, Mode>>;
+ /**
+ * Iterate over the records matching the query.
+ *
+ * Resolves with null if no matches are found.
+ *
+ * @param query If null, all records match.
+ * @param direction
+ */
+ iterate(query?: IndexKey<DBTypes, StoreName, IndexName> | IDBKeyRange | null, direction?: IDBCursorDirection): AsyncIterableIterator<IDBPCursorWithValueIteratorValue<DBTypes, TxStores, StoreName, IndexName, Mode>>;
+}
+declare type IDBPCursorExtends = Omit<IDBCursor, 'key' | 'primaryKey' | 'source' | 'advance' | 'continue' | 'continuePrimaryKey' | 'delete' | 'update'>;
+export interface IDBPCursor<DBTypes extends DBSchema | unknown = unknown, TxStores extends ArrayLike<StoreNames<DBTypes>> = ArrayLike<StoreNames<DBTypes>>, StoreName extends StoreNames<DBTypes> = StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, StoreName> | unknown = unknown, Mode extends IDBTransactionMode = 'readonly'> extends IDBPCursorExtends {
+ /**
+ * The key of the current index or object store item.
+ */
+ readonly key: CursorKey<DBTypes, StoreName, IndexName>;
+ /**
+ * The key of the current object store item.
+ */
+ readonly primaryKey: StoreKey<DBTypes, StoreName>;
+ /**
+ * Returns the IDBObjectStore or IDBIndex the cursor was opened from.
+ */
+ readonly source: CursorSource<DBTypes, TxStores, StoreName, IndexName, Mode>;
+ /**
+ * Advances the cursor a given number of records.
+ *
+ * Resolves to null if no matching records remain.
+ */
+ advance<T>(this: T, count: number): Promise<T | null>;
+ /**
+ * Advance the cursor by one record (unless 'key' is provided).
+ *
+ * Resolves to null if no matching records remain.
+ *
+ * @param key Advance to the index or object store with a key equal to or greater than this value.
+ */
+ continue<T>(this: T, key?: CursorKey<DBTypes, StoreName, IndexName>): Promise<T | null>;
+ /**
+ * Advance the cursor by given keys.
+ *
+ * The operation is 'and' – both keys must be satisfied.
+ *
+ * Resolves to null if no matching records remain.
+ *
+ * @param key Advance to the index or object store with a key equal to or greater than this value.
+ * @param primaryKey and where the object store has a key equal to or greater than this value.
+ */
+ continuePrimaryKey<T>(this: T, key: CursorKey<DBTypes, StoreName, IndexName>, primaryKey: StoreKey<DBTypes, StoreName>): Promise<T | null>;
+ /**
+ * Delete the current record.
+ */
+ delete: Mode extends 'readonly' ? undefined : () => Promise<void>;
+ /**
+ * Updated the current record.
+ */
+ update: Mode extends 'readonly' ? undefined : (value: StoreValue<DBTypes, StoreName>) => Promise<StoreKey<DBTypes, StoreName>>;
+ /**
+ * Iterate over the cursor.
+ */
+ [Symbol.asyncIterator](): AsyncIterableIterator<IDBPCursorIteratorValue<DBTypes, TxStores, StoreName, IndexName, Mode>>;
+}
+declare type IDBPCursorIteratorValueExtends<DBTypes extends DBSchema | unknown = unknown, TxStores extends ArrayLike<StoreNames<DBTypes>> = ArrayLike<StoreNames<DBTypes>>, StoreName extends StoreNames<DBTypes> = StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, StoreName> | unknown = unknown, Mode extends IDBTransactionMode = 'readonly'> = Omit<IDBPCursor<DBTypes, TxStores, StoreName, IndexName, Mode>, 'advance' | 'continue' | 'continuePrimaryKey'>;
+export interface IDBPCursorIteratorValue<DBTypes extends DBSchema | unknown = unknown, TxStores extends ArrayLike<StoreNames<DBTypes>> = ArrayLike<StoreNames<DBTypes>>, StoreName extends StoreNames<DBTypes> = StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, StoreName> | unknown = unknown, Mode extends IDBTransactionMode = 'readonly'> extends IDBPCursorIteratorValueExtends<DBTypes, TxStores, StoreName, IndexName, Mode> {
+ /**
+ * Advances the cursor a given number of records.
+ */
+ advance<T>(this: T, count: number): void;
+ /**
+ * Advance the cursor by one record (unless 'key' is provided).
+ *
+ * @param key Advance to the index or object store with a key equal to or greater than this value.
+ */
+ continue<T>(this: T, key?: CursorKey<DBTypes, StoreName, IndexName>): void;
+ /**
+ * Advance the cursor by given keys.
+ *
+ * The operation is 'and' – both keys must be satisfied.
+ *
+ * @param key Advance to the index or object store with a key equal to or greater than this value.
+ * @param primaryKey and where the object store has a key equal to or greater than this value.
+ */
+ continuePrimaryKey<T>(this: T, key: CursorKey<DBTypes, StoreName, IndexName>, primaryKey: StoreKey<DBTypes, StoreName>): void;
+}
+export interface IDBPCursorWithValue<DBTypes extends DBSchema | unknown = unknown, TxStores extends ArrayLike<StoreNames<DBTypes>> = ArrayLike<StoreNames<DBTypes>>, StoreName extends StoreNames<DBTypes> = StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, StoreName> | unknown = unknown, Mode extends IDBTransactionMode = 'readonly'> extends IDBPCursor<DBTypes, TxStores, StoreName, IndexName, Mode> {
+ /**
+ * The value of the current item.
+ */
+ readonly value: StoreValue<DBTypes, StoreName>;
+ /**
+ * Iterate over the cursor.
+ */
+ [Symbol.asyncIterator](): AsyncIterableIterator<IDBPCursorWithValueIteratorValue<DBTypes, TxStores, StoreName, IndexName, Mode>>;
+}
+declare type IDBPCursorWithValueIteratorValueExtends<DBTypes extends DBSchema | unknown = unknown, TxStores extends ArrayLike<StoreNames<DBTypes>> = ArrayLike<StoreNames<DBTypes>>, StoreName extends StoreNames<DBTypes> = StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, StoreName> | unknown = unknown, Mode extends IDBTransactionMode = 'readonly'> = Omit<IDBPCursorWithValue<DBTypes, TxStores, StoreName, IndexName, Mode>, 'advance' | 'continue' | 'continuePrimaryKey'>;
+export interface IDBPCursorWithValueIteratorValue<DBTypes extends DBSchema | unknown = unknown, TxStores extends ArrayLike<StoreNames<DBTypes>> = ArrayLike<StoreNames<DBTypes>>, StoreName extends StoreNames<DBTypes> = StoreNames<DBTypes>, IndexName extends IndexNames<DBTypes, StoreName> | unknown = unknown, Mode extends IDBTransactionMode = 'readonly'> extends IDBPCursorWithValueIteratorValueExtends<DBTypes, TxStores, StoreName, IndexName, Mode> {
+ /**
+ * Advances the cursor a given number of records.
+ */
+ advance<T>(this: T, count: number): void;
+ /**
+ * Advance the cursor by one record (unless 'key' is provided).
+ *
+ * @param key Advance to the index or object store with a key equal to or greater than this value.
+ */
+ continue<T>(this: T, key?: CursorKey<DBTypes, StoreName, IndexName>): void;
+ /**
+ * Advance the cursor by given keys.
+ *
+ * The operation is 'and' – both keys must be satisfied.
+ *
+ * @param key Advance to the index or object store with a key equal to or greater than this value.
+ * @param primaryKey and where the object store has a key equal to or greater than this value.
+ */
+ continuePrimaryKey<T>(this: T, key: CursorKey<DBTypes, StoreName, IndexName>, primaryKey: StoreKey<DBTypes, StoreName>): void;
+}
diff --git a/devTools/types/idb/index.d.ts b/devTools/types/idb/index.d.ts
new file mode 100644
index 00000000000..f53c6d1924d
--- /dev/null
+++ b/devTools/types/idb/index.d.ts
@@ -0,0 +1,7 @@
+import * as allIDB from './entry.js'
+
+// IDB v7.1.1 https://github.com/jakearchibald/idb
+
+declare global {
+ const idb: typeof allIDB;
+}
diff --git a/devTools/types/idb/wrap-idb-value.d.ts b/devTools/types/idb/wrap-idb-value.d.ts
new file mode 100644
index 00000000000..3e43465666f
--- /dev/null
+++ b/devTools/types/idb/wrap-idb-value.d.ts
@@ -0,0 +1,35 @@
+
+import { IDBPCursor, IDBPCursorWithValue, IDBPDatabase, IDBPIndex, IDBPObjectStore, IDBPTransaction } from './entry.js';
+export declare const reverseTransformCache: WeakMap<object, any>;
+export declare function replaceTraps(callback: (currentTraps: ProxyHandler<any>) => ProxyHandler<any>): void;
+/**
+ * Enhance an IDB object with helpers.
+ *
+ * @param value The thing to enhance.
+ */
+export declare function wrap(value: IDBDatabase): IDBPDatabase;
+export declare function wrap(value: IDBIndex): IDBPIndex;
+export declare function wrap(value: IDBObjectStore): IDBPObjectStore;
+export declare function wrap(value: IDBTransaction): IDBPTransaction;
+export declare function wrap(value: IDBOpenDBRequest): Promise<IDBPDatabase | undefined>;
+export declare function wrap<T>(value: IDBRequest<T>): Promise<T>;
+/**
+ * Revert an enhanced IDB object to a plain old miserable IDB one.
+ *
+ * Will also revert a promise back to an IDBRequest.
+ *
+ * @param value The enhanced object to revert.
+ */
+interface Unwrap {
+ (value: IDBPCursorWithValue<any, any, any, any, any>): IDBCursorWithValue;
+ (value: IDBPCursor<any, any, any, any, any>): IDBCursor;
+ (value: IDBPDatabase): IDBDatabase;
+ (value: IDBPIndex<any, any, any, any, any>): IDBIndex;
+ (value: IDBPObjectStore<any, any, any, any>): IDBObjectStore;
+ (value: IDBPTransaction<any, any, any>): IDBTransaction;
+ <T extends any>(value: Promise<IDBPDatabase<T>>): IDBOpenDBRequest;
+ (value: Promise<IDBPDatabase>): IDBOpenDBRequest;
+ <T>(value: Promise<T>): IDBRequest<T>;
+}
+export declare const unwrap: Unwrap;
+export {};
diff --git a/js/001-lib/idb.js b/js/001-lib/idb.js
new file mode 100644
index 00000000000..5d9af975a4d
--- /dev/null
+++ b/js/001-lib/idb.js
@@ -0,0 +1,346 @@
+// IDB v7.1.1 https://github.com/jakearchibald/idb
+
+// @ts-nocheck
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+ typeof define === 'function' && define.amd ? define(['exports'], factory) :
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.idb = {}));
+})(this, (function (exports) { 'use strict';
+
+ const instanceOfAny = (object, constructors) => constructors.some((c) => object instanceof c);
+
+ let idbProxyableTypes;
+ let cursorAdvanceMethods;
+ // This is a function to prevent it throwing up in node environments.
+ function getIdbProxyableTypes() {
+ return (idbProxyableTypes ||
+ (idbProxyableTypes = [
+ IDBDatabase,
+ IDBObjectStore,
+ IDBIndex,
+ IDBCursor,
+ IDBTransaction,
+ ]));
+ }
+ // This is a function to prevent it throwing up in node environments.
+ function getCursorAdvanceMethods() {
+ return (cursorAdvanceMethods ||
+ (cursorAdvanceMethods = [
+ IDBCursor.prototype.advance,
+ IDBCursor.prototype.continue,
+ IDBCursor.prototype.continuePrimaryKey,
+ ]));
+ }
+ const cursorRequestMap = new WeakMap();
+ const transactionDoneMap = new WeakMap();
+ const transactionStoreNamesMap = new WeakMap();
+ const transformCache = new WeakMap();
+ const reverseTransformCache = new WeakMap();
+ function promisifyRequest(request) {
+ const promise = new Promise((resolve, reject) => {
+ const unlisten = () => {
+ request.removeEventListener('success', success);
+ request.removeEventListener('error', error);
+ };
+ const success = () => {
+ resolve(wrap(request.result));
+ unlisten();
+ };
+ const error = () => {
+ reject(request.error);
+ unlisten();
+ };
+ request.addEventListener('success', success);
+ request.addEventListener('error', error);
+ });
+ promise
+ .then((value) => {
+ // Since cursoring reuses the IDBRequest (*sigh*), we cache it for later retrieval
+ // (see wrapFunction).
+ if (value instanceof IDBCursor) {
+ cursorRequestMap.set(value, request);
+ }
+ // Catching to avoid "Uncaught Promise exceptions"
+ })
+ .catch(() => { });
+ // This mapping exists in reverseTransformCache but doesn't doesn't exist in transformCache. This
+ // is because we create many promises from a single IDBRequest.
+ reverseTransformCache.set(promise, request);
+ return promise;
+ }
+ function cacheDonePromiseForTransaction(tx) {
+ // Early bail if we've already created a done promise for this transaction.
+ if (transactionDoneMap.has(tx))
+ return;
+ const done = new Promise((resolve, reject) => {
+ const unlisten = () => {
+ tx.removeEventListener('complete', complete);
+ tx.removeEventListener('error', error);
+ tx.removeEventListener('abort', error);
+ };
+ const complete = () => {
+ resolve();
+ unlisten();
+ };
+ const error = () => {
+ reject(tx.error || new DOMException('AbortError', 'AbortError'));
+ unlisten();
+ };
+ tx.addEventListener('complete', complete);
+ tx.addEventListener('error', error);
+ tx.addEventListener('abort', error);
+ });
+ // Cache it for later retrieval.
+ transactionDoneMap.set(tx, done);
+ }
+ let idbProxyTraps = {
+ get(target, prop, receiver) {
+ if (target instanceof IDBTransaction) {
+ // Special handling for transaction.done.
+ if (prop === 'done')
+ return transactionDoneMap.get(target);
+ // Polyfill for objectStoreNames because of Edge.
+ if (prop === 'objectStoreNames') {
+ return target.objectStoreNames || transactionStoreNamesMap.get(target);
+ }
+ // Make tx.store return the only store in the transaction, or undefined if there are many.
+ if (prop === 'store') {
+ return receiver.objectStoreNames[1]
+ ? undefined
+ : receiver.objectStore(receiver.objectStoreNames[0]);
+ }
+ }
+ // Else transform whatever we get back.
+ return wrap(target[prop]);
+ },
+ set(target, prop, value) {
+ target[prop] = value;
+ return true;
+ },
+ has(target, prop) {
+ if (target instanceof IDBTransaction &&
+ (prop === 'done' || prop === 'store')) {
+ return true;
+ }
+ return prop in target;
+ },
+ };
+ function replaceTraps(callback) {
+ idbProxyTraps = callback(idbProxyTraps);
+ }
+ function wrapFunction(func) {
+ // Due to expected object equality (which is enforced by the caching in `wrap`), we
+ // only create one new func per func.
+ // Edge doesn't support objectStoreNames (booo), so we polyfill it here.
+ if (func === IDBDatabase.prototype.transaction &&
+ !('objectStoreNames' in IDBTransaction.prototype)) {
+ return function (storeNames, ...args) {
+ const tx = func.call(unwrap(this), storeNames, ...args);
+ transactionStoreNamesMap.set(tx, storeNames.sort ? storeNames.sort() : [storeNames]);
+ return wrap(tx);
+ };
+ }
+ // Cursor methods are special, as the behaviour is a little more different to standard IDB. In
+ // IDB, you advance the cursor and wait for a new 'success' on the IDBRequest that gave you the
+ // cursor. It's kinda like a promise that can resolve with many values. That doesn't make sense
+ // with real promises, so each advance methods returns a new promise for the cursor object, or
+ // undefined if the end of the cursor has been reached.
+ if (getCursorAdvanceMethods().includes(func)) {
+ return function (...args) {
+ // Calling the original function with the proxy as 'this' causes ILLEGAL INVOCATION, so we use
+ // the original object.
+ func.apply(unwrap(this), args);
+ return wrap(cursorRequestMap.get(this));
+ };
+ }
+ return function (...args) {
+ // Calling the original function with the proxy as 'this' causes ILLEGAL INVOCATION, so we use
+ // the original object.
+ return wrap(func.apply(unwrap(this), args));
+ };
+ }
+ function transformCachableValue(value) {
+ if (typeof value === 'function')
+ return wrapFunction(value);
+ // This doesn't return, it just creates a 'done' promise for the transaction,
+ // which is later returned for transaction.done (see idbObjectHandler).
+ if (value instanceof IDBTransaction)
+ cacheDonePromiseForTransaction(value);
+ if (instanceOfAny(value, getIdbProxyableTypes()))
+ return new Proxy(value, idbProxyTraps);
+ // Return the same value back if we're not going to transform it.
+ return value;
+ }
+ function wrap(value) {
+ // We sometimes generate multiple promises from a single IDBRequest (eg when cursoring), because
+ // IDB is weird and a single IDBRequest can yield many responses, so these can't be cached.
+ if (value instanceof IDBRequest)
+ return promisifyRequest(value);
+ // If we've already transformed this value before, reuse the transformed value.
+ // This is faster, but it also provides object equality.
+ if (transformCache.has(value))
+ return transformCache.get(value);
+ const newValue = transformCachableValue(value);
+ // Not all types are transformed.
+ // These may be primitive types, so they can't be WeakMap keys.
+ if (newValue !== value) {
+ transformCache.set(value, newValue);
+ reverseTransformCache.set(newValue, value);
+ }
+ return newValue;
+ }
+ const unwrap = (value) => reverseTransformCache.get(value);
+
+ /**
+ * Open a database.
+ *
+ * @param name Name of the database.
+ * @param version Schema version.
+ * @param callbacks Additional callbacks.
+ */
+ // @ts-ignore
+ function openDB(name, version, { blocked, upgrade, blocking, terminated } = {}) {
+ const request = indexedDB.open(name, version);
+ const openPromise = wrap(request);
+ if (upgrade) {
+ request.addEventListener('upgradeneeded', (event) => {
+ upgrade(wrap(request.result), event.oldVersion, event.newVersion, wrap(request.transaction), event);
+ });
+ }
+ if (blocked) {
+ request.addEventListener('blocked', (event) => blocked(
+ // Casting due to https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1405
+ event.oldVersion, event.newVersion, event));
+ }
+ openPromise
+ .then((db) => {
+ if (terminated)
+ db.addEventListener('close', () => terminated());
+ if (blocking) {
+ db.addEventListener('versionchange', (event) => blocking(event.oldVersion, event.newVersion, event));
+ }
+ })
+ .catch(() => { });
+ return openPromise;
+ }
+ /**
+ * Delete a database.
+ *
+ * @param name Name of the database.
+ */
+ // @ts-ignore
+ function deleteDB(name, { blocked } = {}) {
+ const request = indexedDB.deleteDatabase(name);
+ if (blocked) {
+ request.addEventListener('blocked', (event) => blocked(
+ // Casting due to https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1405
+ event.oldVersion, event));
+ }
+ return wrap(request).then(() => undefined);
+ }
+
+ const readMethods = ['get', 'getKey', 'getAll', 'getAllKeys', 'count'];
+ const writeMethods = ['put', 'add', 'delete', 'clear'];
+ const cachedMethods = new Map();
+ function getMethod(target, prop) {
+ if (!(target instanceof IDBDatabase &&
+ !(prop in target) &&
+ typeof prop === 'string')) {
+ return;
+ }
+ if (cachedMethods.get(prop))
+ return cachedMethods.get(prop);
+ const targetFuncName = prop.replace(/FromIndex$/, '');
+ const useIndex = prop !== targetFuncName;
+ const isWrite = writeMethods.includes(targetFuncName);
+ if (
+ // Bail if the target doesn't exist on the target. Eg, getAll isn't in Edge.
+ !(targetFuncName in (useIndex ? IDBIndex : IDBObjectStore).prototype) ||
+ !(isWrite || readMethods.includes(targetFuncName))) {
+ return;
+ }
+ const method = async function (storeName, ...args) {
+ // isWrite ? 'readwrite' : undefined gzipps better, but fails in Edge :(
+ const tx = this.transaction(storeName, isWrite ? 'readwrite' : 'readonly');
+ let target = tx.store;
+ if (useIndex)
+ target = target.index(args.shift());
+ // Must reject if op rejects.
+ // If it's a write operation, must reject if tx.done rejects.
+ // Must reject with op rejection first.
+ // Must resolve with op value.
+ // Must handle both promises (no unhandled rejections)
+ return (await Promise.all([
+ target[targetFuncName](...args),
+ isWrite && tx.done,
+ ]))[0];
+ };
+ cachedMethods.set(prop, method);
+ return method;
+ }
+ replaceTraps((oldTraps) => ({
+ ...oldTraps,
+ get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
+ has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop),
+ }));
+
+ const advanceMethodProps = ['continue', 'continuePrimaryKey', 'advance'];
+ const methodMap = {};
+ const advanceResults = new WeakMap();
+ const ittrProxiedCursorToOriginalProxy = new WeakMap();
+ const cursorIteratorTraps = {
+ get(target, prop) {
+ if (!advanceMethodProps.includes(prop))
+ return target[prop];
+ let cachedFunc = methodMap[prop];
+ if (!cachedFunc) {
+ cachedFunc = methodMap[prop] = function (...args) {
+ advanceResults.set(this, ittrProxiedCursorToOriginalProxy.get(this)[prop](...args));
+ };
+ }
+ return cachedFunc;
+ },
+ };
+ async function* iterate(...args) {
+ // tslint:disable-next-line:no-this-assignment
+ let cursor = this;
+ if (!(cursor instanceof IDBCursor)) {
+ cursor = await cursor.openCursor(...args);
+ }
+ if (!cursor)
+ return;
+ cursor = cursor;
+ const proxiedCursor = new Proxy(cursor, cursorIteratorTraps);
+ ittrProxiedCursorToOriginalProxy.set(proxiedCursor, cursor);
+ // Map this double-proxy back to the original, so other cursor methods work.
+ reverseTransformCache.set(proxiedCursor, unwrap(cursor));
+ while (cursor) {
+ yield proxiedCursor;
+ // If one of the advancing methods was not called, call continue().
+ cursor = await (advanceResults.get(proxiedCursor) || cursor.continue());
+ advanceResults.delete(proxiedCursor);
+ }
+ }
+ function isIteratorProp(target, prop) {
+ return ((prop === Symbol.asyncIterator &&
+ instanceOfAny(target, [IDBIndex, IDBObjectStore, IDBCursor])) ||
+ (prop === 'iterate' && instanceOfAny(target, [IDBIndex, IDBObjectStore])));
+ }
+ replaceTraps((oldTraps) => ({
+ ...oldTraps,
+ get(target, prop, receiver) {
+ if (isIteratorProp(target, prop))
+ return iterate;
+ return oldTraps.get(target, prop, receiver);
+ },
+ has(target, prop) {
+ return isIteratorProp(target, prop) || oldTraps.has(target, prop);
+ },
+ }));
+
+ exports.deleteDB = deleteDB;
+ exports.openDB = openDB;
+ exports.unwrap = unwrap;
+ exports.wrap = wrap;
+
+}));
diff --git a/js/003-data/gameVariableData.js b/js/003-data/gameVariableData.js
index 1a262cee037..d5a277d9b5d 100644
--- a/js/003-data/gameVariableData.js
+++ b/js/003-data/gameVariableData.js
@@ -181,6 +181,8 @@ App.Data.defaultGameStateVariables = {
aiAutoGenFrequency: 10,
aiCfgScale: 5,
aiTimeoutPerStep: 2.5,
+ /** @type {'static' | 'reactive'} */
+ aiCachingStrategy: 'static',
aiCustomImagePrompts: 0,
aiCustomStyleNeg: "",
aiCustomStylePos: "",
diff --git a/src/art/artJS.js b/src/art/artJS.js
index 1cdb2551559..9ffc890707d 100644
--- a/src/art/artJS.js
+++ b/src/art/artJS.js
@@ -10,6 +10,25 @@ Macro.add("SlaveArt", {
}
});
+/**
+ * @enum {number}
+ */
+App.Art.ArtSizes = {
+ /** Tiny, left. Example: facilities */
+ TINY: 0,
+ /** Small, left. Example: lists. */
+ SMALL: 1,
+ /** Medium, right. Example: random events. */
+ MEDIUM: 2,
+ /** Large, right. Example: long slave description. */
+ LARGE: 3,
+ /** Jank stuff, todo replace with proper enum system */
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3
+};
+
App.Art.SlaveArtBatch = class {
/** Prepare to render art in the same format for multiple slaves within a single passage context.
* Do not persist this object across passage contexts.
@@ -459,7 +478,7 @@ async function renderAIArt(slave, imageSize, imageNum = null) {
}
const imageIdx = imageNum || 0;
const imageDbId = slave.custom.aiImageIds[imageIdx];
- const imageData = await App.Art.GenAI.imageDB.getImage(imageDbId);
+ const imageData = await App.Art.GenAI.staticImageDB.getImage(imageDbId);
imgElement.setAttribute("src", imageData.data);
imgElement.setAttribute("title", `${slave.custom.aiDisplayImageIdx + 1}/${slave.custom.aiImageIds.length}`);
} catch (e) {
@@ -471,16 +490,15 @@ async function renderAIArt(slave, imageSize, imageNum = null) {
/** AI generated image that refreshes on click
* @param {App.Entity.SlaveState} slave
- * @param {number} imageSize
+ * @param {App.Art.ArtSizes} imageSize
* @param {boolean | null} isEventImage Which step setting to use. true => V.aiSamplingStepsEvent, false => V.aiSamplingSteps, null => chosen based on passage tags
* @returns {HTMLElement}
*/
App.Art.aiArtElement = function(slave, imageSize, isEventImage = null) {
- const container = document.createElement("div");
- container.classList.add("ai-art-container");
- const toolbar = document.createElement('div');
- toolbar.classList.add('ai-toolbar');
- container.appendChild(toolbar);
+ const container = App.UI.DOM.makeElement('div', null, ['ai-art-container']);
+ App.UI.DOM.appendNewElement('img', container, null, ['ai-art-image']);
+ const toolbar = App.UI.DOM.appendNewElement('div', container, null, ['ai-toolbar']);
+
/** @type {HTMLButtonElement} */
let replaceButton;
/** @type {HTMLButtonElement} */
@@ -496,141 +514,145 @@ App.Art.aiArtElement = function(slave, imageSize, isEventImage = null) {
* @param {HTMLDivElement} toolbar
* @param {HTMLDivElement} container
*/
- function makeZoomIn(toolbar, container) {
- zoomIn = document.createElement('button');
- zoomIn.classList.add('zoom-in');
- zoomIn.title = 'Zoom';
+ const makeZoomIn = (toolbar, container) => {
+ zoomIn = App.UI.DOM.appendNewElement('button', toolbar, null, ['zoom-in']);
+ zoomIn.title = 'Zoom In';
const onZoomInClick = () => {
const imageElement = container.querySelector('.ai-art-image');
- if (imageElement) {
- const lightbox = document.createElement('div');
- lightbox.classList.add('lightbox', 'ui-front');
- // make a separate background element so that the user can click on the image without lightbox closing
- const lightboxBackground = document.createElement('div');
- lightboxBackground.classList.add('lightbox-background');
+ if (imageElement && imageElement.getAttribute('src')) {
+ const lightbox = App.UI.DOM.appendNewElement('div', document.body, null, ['lightbox', 'ui-front']);
+ // make a seperate background element so that the user can click on the image without lightbox closing
+ const lightboxBackground = App.UI.DOM.appendNewElement('div', lightbox, null, ['lightbox-background']);
lightboxBackground.addEventListener('click', () => {
+ console.log('background clicked');
lightbox.remove();
});
- lightbox.appendChild(lightboxBackground);
// Visible button for exiting, but clicking outside of image should automatically close it anyways
- const closeButton = document.createElement('button');
- closeButton.classList.add('close');
- closeButton.innerText = '✕';
- lightboxBackground.appendChild(closeButton);
- const lightboxImg = document.createElement('img');
+ App.UI.DOM.appendNewElement('button', lightboxBackground, '✕', ['close']);
+ const lightboxImg = App.UI.DOM.appendNewElement('img', lightboxBackground);
lightboxImg.src = imageElement.getAttribute('src');
- lightboxBackground.appendChild(lightboxImg);
-
- document.body.appendChild(lightbox);
} else {
console.error('No image element found to lightbox');
}
};
-
zoomIn.addEventListener("click", onZoomInClick);
- toolbar.appendChild(zoomIn);
- }
- makeZoomIn(toolbar, container);
+ };
- /**
- * @param {HTMLDivElement} toolbar
- * @param {HTMLDivElement} container
- */
- function makeReplaceButton(toolbar, container) {
- replaceButton = document.createElement("button");
- replaceButton.innerText = '⟳';
- replaceButton.title = 'Replace';
- replaceButton.addEventListener("click", function() {
- if (!container.classList.contains("refreshing")) {
- if (slave.custom.aiImageIds.length === 0) {
- // if there is no current image, go ahead and add a new one
- updateAndRefresh();
- } else {
- updateAndRefresh(slave.custom.aiDisplayImageIdx);
- }
- }
- });
- toolbar.appendChild(replaceButton);
- }
- makeReplaceButton(toolbar, container);
- /**
- * @param {HTMLDivElement} toolbar
- * @param {HTMLDivElement} container
- */
- function makeGenerationButton(toolbar, container) {
- generationButton = document.createElement("button");
- generationButton.innerText = '+';
- generationButton.title = 'Add image';
- generationButton.addEventListener("click", function() {
- if (!container.classList.contains("refreshing")) {
- updateAndRefresh();
- }
- });
- toolbar.appendChild(generationButton);
- }
- makeGenerationButton(toolbar, container);
- async function deleteSlaveAiImage(slave, idx) {
- const deletionId = slave.custom.aiImageIds[idx];
- try {
- await App.Art.GenAI.imageDB.removeImage(deletionId);
- } catch (e) {
- // it's valid to delete an image that can't be fetched (maybe the browser data is cleared or whatever)
+ // Loading spinner
+ // eslint-disable-next-line no-unused-vars
+ spinner = App.UI.DOM.appendNewElement('div', container, '⟳', ['spinner']);
+
+
+ const reactiveSpecific = {
+ /**
+ * @param {string} imageSrc
+ * @param {string} eventId
+ */
+ setImage: (imageSrc, eventId) => {
+ let newImg = document.createElement("img");
+
+ const sz = App.Art.artSizeToPx(imageSize);
+ if (sz) {
+ newImg.setAttribute("width", sz);
+ newImg.setAttribute("height", sz);
+ }
+ newImg.classList.add("ai-art-image");
+ newImg.setAttribute("src", imageSrc);
+ newImg.setAttribute('data--eventId', eventId);
+ container.querySelector('.ai-art-image')?.remove();
+ container.prepend(newImg);
+ },
+ /**
+ *
+ * @param {Partial<App.Art.GenAI.GetImageOptions>} [options] Options
+ */
+ refresh: (options) => {
+ /** @type {App.Art.GenAI.GetImageOptions} */
+ const effectiveOptions = {
+ action: 'overview',
+ size: imageSize,
+ forceRegenerate: false,
+ isEventImage: isEventImage,
+ ...options
+ };
+ container.classList.add("refreshing");
+ App.Art.GenAI.reactiveImageDB.getImage([slave], effectiveOptions)
+ .then((imageData) => {
+ reactiveSpecific.setImage(imageData?.data?.images?.lowRes, imageData?.id?.toString() || `unknownId-${Math.random()}`);
+ })
+ .catch(e => console.error("Unexpected refresh error", e))
+ .finally(() => container.classList.remove("refreshing"));
}
- slave.custom.aiImageIds = [...slave.custom.aiImageIds.slice(0, idx), ...slave.custom.aiImageIds.slice(idx + 1)];
- if (slave.custom.aiImageIds.length === 0) {
- slave.custom.aiDisplayImageIdx = -1;
- } else if (slave.custom.aiDisplayImageIdx !== 0) {
- slave.custom.aiDisplayImageIdx--;
+ };
+
+ const staticSpecific = {
+ updateAndRefresh: (index = null) => {
+ container.classList.add("refreshing");
+
+ App.Art.GenAI.staticCache.updateSlave(slave, index, isEventImage).then(() => {
+ staticSpecific.refresh();
+ }).catch(error => {
+ console.log(error.message || error);
+ }).finally(() => {
+ container.classList.remove("refreshing");
+ });
+ },
+ refresh: () => {
+ renderAIArt(slave, imageSize, slave.custom.aiDisplayImageIdx)
+ .then((imgElement) => {
+ container.querySelector('.ai-art-image')?.remove();
+ container.prepend(imgElement); // prepend it before the toolbar and spinner, otherwise you can't see them
+ }).catch((e) => {
+ // couldn't render this image (perhaps it's been purged, or browser data cleared, or whatever)
+ // TODO: we might want to consider automatically removing the image if we can't render it, but for now the user can click Delete
+ console.log('Error in refresh:', e);
+ });
+ },
+ deleteSlaveAiImage: async (slave, idx) => {
+ const deletionId = slave.custom.aiImageIds[idx];
+ try {
+ await App.Art.GenAI.staticImageDB.removeImage(deletionId);
+ } catch (e) {
+ // it's valid to delete an image that can't be fetched (maybe the browser data is cleared or whatever)
+ }
+ slave.custom.aiImageIds = [...slave.custom.aiImageIds.slice(0, idx), ...slave.custom.aiImageIds.slice(idx + 1)];
+ if (slave.custom.aiImageIds.length === 0) {
+ slave.custom.aiDisplayImageIdx = -1;
+ } else if (slave.custom.aiDisplayImageIdx !== 0) {
+ slave.custom.aiDisplayImageIdx--;
+ }
}
- }
+ };
+
+
/**
* @param {HTMLDivElement} toolbar
* @param {HTMLDivElement} container
*/
- function makeDeleteButton(toolbar, container) {
- deletionButton = document.createElement("button");
- deletionButton.innerText = 'â“';
- deletionButton.title = 'Delete image';
- deletionButton.addEventListener("click", async function() {
+ const makeReplaceButton = (toolbar, container) => {
+ replaceButton = App.UI.DOM.appendNewElement('button', toolbar, '⟳');
+ replaceButton.title = 'Replace';
+ replaceButton.addEventListener("click", () => {
if (!container.classList.contains("refreshing")) {
- if (slave.custom.aiDisplayImageIdx === -1) { return; }
- await deleteSlaveAiImage(slave, slave.custom.aiDisplayImageIdx);
- refresh();
+ if (V.aiCachingStrategy === 'reactive') {
+ container.classList.add("refreshing");
+ reactiveSpecific.refresh({forceRegenerate: true});
+ } else { // static
+ if (slave.custom.aiImageIds.length === 0) {
+ // if there is no current image, go ahead and add a new one
+ staticSpecific.updateAndRefresh();
+ } else {
+ staticSpecific.updateAndRefresh(slave.custom.aiDisplayImageIdx);
+ }
+ }
}
});
- toolbar.appendChild(deletionButton);
- }
- makeDeleteButton(toolbar, container);
-
- /**
- * @param {HTMLDivElement} container
- */
- function makeSpinner(container) {
- spinner = document.createElement("div");
- spinner.classList.add("spinner");
- spinner.innerText = '⟳';
- container.appendChild(spinner);
- }
- makeSpinner(container);
-
-
- /** Refresh on click */
- function refresh() {
- renderAIArt(slave, imageSize, slave.custom.aiDisplayImageIdx)
- .then((imgElement) => {
- container.querySelector('.ai-art-image')?.remove();
- container.prepend(imgElement); // prepend it before the toolbar and spinner, otherwise you can't see them
- }).catch((e) => {
- // couldn't render this image (perhaps it's been purged, or browser data cleared, or whatever)
- // TODO: we might want to consider automatically removing the image if we can't render it, but for now the user can click Delete
- console.log('Error in refresh:', e);
- });
- }
+ };
- function makeImageNavigationArrows(container) {
+ const makeImageNavigationArrows = (container) => {
const leftArrow = document.createElement('button');
leftArrow.classList.add("leftArrow", "arrow");
leftArrow.name = 'leftButton';
@@ -641,14 +663,14 @@ App.Art.aiArtElement = function(slave, imageSize, isEventImage = null) {
e.stopPropagation();
if (slave.custom.aiImageIds.length === 0) {
- updateAndRefresh();
+ staticSpecific.updateAndRefresh();
} else {
if (slave.custom.aiDisplayImageIdx > 0) {
slave.custom.aiDisplayImageIdx--;
} else {
slave.custom.aiDisplayImageIdx = slave.custom.aiImageIds.length - 1;
}
- refresh();
+ staticSpecific.refresh();
}
};
container.appendChild(leftArrow);
@@ -662,38 +684,78 @@ App.Art.aiArtElement = function(slave, imageSize, isEventImage = null) {
e.stopPropagation();
if (slave.custom.aiImageIds.length === 0) {
- updateAndRefresh();
+ staticSpecific.updateAndRefresh();
} else {
if (slave.custom.aiDisplayImageIdx < slave.custom.aiImageIds.length - 1) {
slave.custom.aiDisplayImageIdx++;
} else {
slave.custom.aiDisplayImageIdx = 0;
}
- refresh();
+ staticSpecific.refresh();
}
};
container.appendChild(rightArrow);
- }
- makeImageNavigationArrows(container);
+ };
- function updateAndRefresh(index = null) {
- container.classList.add("refreshing");
+ /**
+ * @param {HTMLDivElement} toolbar
+ * @param {HTMLDivElement} container
+ */
+ const makeGenerationButton = (toolbar, container) => {
+ generationButton = document.createElement("button");
+ generationButton.innerText = '+';
+ generationButton.title = 'Add image';
+ generationButton.addEventListener("click", function() {
+ if (!container.classList.contains("refreshing")) {
+ staticSpecific.updateAndRefresh();
+ }
+ });
+ toolbar.appendChild(generationButton);
+ };
- App.Art.GenAI.staticCache.updateSlave(slave, index, isEventImage).then(() => {
- refresh();
- }).catch(error => {
- console.log(error.message || error);
- }).finally(() => {
- container.classList.remove("refreshing");
+
+ /**
+ * @param {HTMLDivElement} toolbar
+ * @param {HTMLDivElement} container
+ */
+ const makeDeleteButton = (toolbar, container) => {
+ deletionButton = document.createElement("button");
+ deletionButton.innerText = 'â“';
+ deletionButton.title = 'Delete image';
+ deletionButton.addEventListener("click", async function() {
+ if (!container.classList.contains("refreshing")) {
+ if (slave.custom.aiDisplayImageIdx === -1) { return; }
+ await staticSpecific.deleteSlaveAiImage(slave, slave.custom.aiDisplayImageIdx);
+ staticSpecific.refresh();
+ }
});
- }
+ toolbar.appendChild(deletionButton);
+ };
- if (V.aiAutoGen && slave.custom.aiImageIds.length === 0) {
- updateAndRefresh();
- } else {
- refresh();
+ if (V.aiCachingStrategy === 'reactive') {
+ makeZoomIn(toolbar, container);
+ makeReplaceButton(toolbar, container);
+
+ reactiveSpecific.refresh();
+
+ return container;
+ } else { // static
+ makeZoomIn(toolbar, container);
+ makeGenerationButton(toolbar, container);
+ makeReplaceButton(toolbar, container);
+ makeDeleteButton(toolbar, container);
+ makeImageNavigationArrows(container);
+
+
+
+
+ if (V.aiAutoGen && slave.custom.aiImageIds.length === 0) {
+ staticSpecific.updateAndRefresh();
+ } else {
+ staticSpecific.refresh();
+ }
+ return container;
}
- return container;
};
diff --git a/src/art/genAI/reactiveImageDB.js b/src/art/genAI/reactiveImageDB.js
new file mode 100644
index 00000000000..8ff4ac320ba
--- /dev/null
+++ b/src/art/genAI/reactiveImageDB.js
@@ -0,0 +1,525 @@
+/**
+ * @typedef {object} App.Art.GenAI.AIImageResponse
+ * @property {string} image Base64 image in the form of `data:${mimeType};base64,${base64Image}`
+ * @property {string} eventId Event ID
+ */
+
+/**
+ * @typedef {'headshot' | 'overview'} App.Art.GenAI.Action
+ */
+
+/**
+ * @typedef App.Art.GenAI.EventStore.OverviewData
+ * @property {object} images
+ * @property {string} [images.lowRes] Base64 encoded image, generated quickly
+ * @property {string} [images.highRes] Base64 encoded image, with upscaling/fancy stuff
+ */
+
+/**
+ * @typedef {object} App.Art.GenAI.EventStore.HeadshotData
+ * @property {object} images
+ * @property {string} [images.image] Base64 encoded image, with fancy stuff
+ */
+
+
+/**
+ * @typedef {XOR<App.Art.GenAI.EventStore.OverviewData, App.Art.GenAI.EventStore.HeadshotData>} App.Art.GenAI.EventStore.DataType
+ */
+
+
+
+/**
+ * @typedef App.Art.GenAI.EventStore.Entry
+ * @property {number[]} slaveIds Sorted (ascending) list of slaves involved in event. Indexed for fast retrieval.
+ * @property {App.Entity.SlaveState[]} slaveStates State of the slaves at the time of generation
+ * @property {App.Art.GenAI.EventStore.OverviewData} data
+ * @property {App.Art.GenAI.Action} action String describing what this contains. e.g. headshot, status, fucked vaginal, standing, etc. Move to enum/complex types later.
+ * @property {number} seed Seed used to send to SD. Likely the seed of slaveStates[0]
+ * @property {number} [id] IndexedDB id
+ *
+ */
+
+/**
+ * @typedef {object} App.Art.GenAI.GetImageOptions
+ * @property {App.Art.GenAI.Action} action
+ * @property {App.Art.ArtSizes} size
+ * @property {boolean} forceRegenerate
+ * @property {boolean} isEventImage
+ */
+
+
+
+const SIGNIFICANTLY_DIFFERENT_THRESHOLD = 50;
+
+
+App.Art.GenAI.reactiveImageDB = (function() {
+ const sleep = (/** @type {number} */ n = 100) => new Promise(r => setTimeout(r, n));
+
+ /** @type {import("../../../devTools/types/idb/entry").IDBPDatabase} */
+ let db;
+
+ /** Metadata about generated images */
+ const EVENT_STORE = {
+ path: 'eventStore',
+ indicies: {
+ bySlaveIdsActions: 'bySlaveIdsActions',
+ bySlaveId: 'bySlaveId',
+ byImageId: 'byImageId'
+ }
+ };
+
+ const ALL_STORES = [EVENT_STORE];
+
+
+
+ let initialized = false;
+ async function waitForInit() {
+ while (!initialized) {
+ await sleep();
+ }
+ initialized = true;
+ }
+
+ /**
+ * Create an IndexedDB and initialize objectStore if it doesn't already exist.
+ * @returns {Promise<import("../../../devTools/types/idb/entry").IDBPDatabase>} Promise object that resolves with the opened database
+ */
+ async function createDB() {
+ return idb.openDB('AIImages-Reactive', 1, {
+ blocked: () => {
+ throw new Error("You have an older version of the AI Image DB open in another tab. Please close it and refresh this page.");
+ },
+ upgrade: (database, oldVersion, newVersion, tx, ev) => {
+ // v1 DB spec
+ if (oldVersion < 1) {
+ const eventStore = database.createObjectStore(EVENT_STORE.path, {autoIncrement: true, keyPath: 'id'});
+ eventStore.createIndex('id', 'id', {unique: true});
+ eventStore.createIndex("bySlaveIdsActions", ['slaveIds', 'action'], {multiEntry: false}); // to check if a given actor is in _any_ scene. Does not matter who the other is.
+ eventStore.createIndex('bySlaveId', 'slaveIds', {multiEntry: true});
+ eventStore.createIndex('byImageId', 'imageId'); // for easy deletion
+ }
+ },
+ blocking: (currentVersion, blockedVersion, ev) => {
+ db.close();
+ },
+ terminated: () => {
+ console.error("Connection to xmAIImages IndexedDB unexpectedly closed.");
+ }
+ });
+ }
+
+
+ /**
+ * Generates and saves a new image and returns it.
+ *
+ * @private
+ *
+ * @param {App.Entity.SlaveState[]} slaves The ID of the image to retrieve
+ * @param {App.Art.GenAI.GetImageOptions} options Fully populated misc options.
+ *
+ * @returns {Promise<string>} Promise object that resolves with the retrieved image data
+ */
+ async function generateNewImage(slaves, options) {
+ // {isEventImage: options.isEventImage, action: options.action}
+ /** @type {string} */
+ const base64Image = await App.Art.GenAI.reactiveCache.fetchImageForSlave(slaves[0], options.isEventImage);
+ return getImageData(base64Image);
+ }
+
+ /**
+ * Compares to see whether an image may be resused for a given slave.
+ *
+ * @param {App.Entity.SlaveState} s1 The first state of the slave. You are checking to see if this one may be used.
+ * @param {App.Entity.SlaveState} s2 The second state of the same slave
+ *
+ * @returns {{
+ * canReuse: boolean,
+ * difference?: number
+ * }} Difference score from 0 to infinity. 0 is identical, and 30 is "significantly different"
+ */
+ function fuzzyCompareSlaves(s1, s2) {
+ // Potential performance setting: have different sets of dealbreakers, potentialImpact etc. for different powered machines
+
+ // TODO: migrate to what @Engineerix is building
+
+ // Immediate disqualification from usage
+ // Either they have large changes to appearance no matter how small (e.g. Style),
+ // or the prompts are already fuzzy enough to ignore minor differences (e.g. height)
+ const dealBreakers = [
+ App.Art.GenAI.StylePromptPart,
+ App.Art.GenAI.SkinPromptPart,
+ App.Art.GenAI.RacePromptPart,
+ App.Art.GenAI.GenderPromptPart,
+ App.Art.GenAI.AgePromptPart,
+ App.Art.GenAI.PregPromptPart,
+ App.Art.GenAI.ClothesPromptPart,
+ App.Art.GenAI.BreastsPromptPart,
+ App.Art.GenAI.HairPromptPart,
+ App.Art.GenAI.NationalityPromptPart,
+ App.Art.GenAI.EyePromptPart,
+ App.Art.GenAI.HealthPromptPart,
+ App.Art.GenAI.PubicHairPromptPart,
+ App.Art.GenAI.AmputationPromptPart,
+ App.Art.GenAI.AndroidPromptPart,
+ App.Art.GenAI.TattoosPromptPart,
+ App.Art.GenAI.WeightPromptPart,
+ App.Art.GenAI.HeightPromptPart,
+ App.Art.GenAI.CollarPromptPart,
+ App.Art.GenAI.WaistPromptPart,
+ App.Art.GenAI.HipsPromptPart,
+ App.Art.GenAI.CustomPromptPart // player probably cares
+ ];
+
+ for (const DealBreaker of dealBreakers) {
+ const p1 = new DealBreaker(s1);
+ const p2 = new DealBreaker(s2);
+
+ // immediate disqualification
+ if (p1.positive() !== p2.positive()) {
+ return {
+ canReuse: false
+ };
+ }
+ }
+
+ let differenceScore = 0;
+
+ // // Calculate and sum the "difference score" for each of these
+ // // TODO: calibrate scores properly
+ // const potentialImpact = [
+ // App.Art.GenAI.BeautyPromptPart,
+ // App.Art.GenAI.PosturePromptPart,
+ // App.Art.GenAI.ArousalPromptPart,
+ // App.Art.GenAI.MusclesPromptPart,
+ // App.Art.GenAI.ExpressionPromptPart,
+ // ];
+
+ /**
+ *
+ * @param {number} num1
+ * @param {number} num2
+ * @param {number} threshold Minimum difference before counting it as different
+ * @returns {number} difference score, above 0.
+ */
+ const differenceThreshold = (num1, num2, threshold) => Math.max(Math.abs(num1 - num2) - threshold, 0);
+
+ // beauty
+ differenceScore += Math.abs(s1.face - s2.face);
+ // posture (bad trust or bad devotion)
+ if (s1.devotion < -20) {
+ differenceScore += differenceThreshold(s1.devotion, s2.devotion, 0);
+ }
+ // arousal
+ if (App.Data.clothes.get(s1.clothes).exposure < 3 !== App.Data.clothes.get(s2.clothes).exposure < 3) {
+ differenceScore += differenceThreshold(s1.energy, s2.energy, 0);
+ }
+ // muscles
+ differenceScore += 0.5 * differenceThreshold(s1.muscles, s2.muscles, 0);
+ // expression (trust, devotion)
+ differenceScore += 0.5 * differenceThreshold(s1.trust, s2.trust, 0);
+ differenceScore += 0.5 * differenceThreshold(s1.devotion, s2.devotion, 0);
+
+
+ // // // Will get regenerated only when schedule says to
+ // const probablyDoesntMatter = [
+ // App.Art.GenAI.EyebrowPromptPart,
+ // App.Art.GenAI.PiercingsPromptPart
+ // ]
+
+
+ // random small amount to show that it wasn't an exact match.
+ if (s1.eyebrowHStyle !== s2.eyebrowHStyle) {
+ differenceScore += 0.1;
+ }
+ if ((new App.Art.GenAI.PiercingsPromptPart(s1)).positive() !== (new App.Art.GenAI.PiercingsPromptPart(s2)).positive()) {
+ differenceScore += 0.1;
+ }
+
+ return {
+ canReuse: differenceScore < SIGNIFICANTLY_DIFFERENT_THRESHOLD,
+ difference: differenceScore
+ };
+ }
+
+
+ /**
+ * Fuzzily compares to see if all the slaves in an array are close enough to be used again
+ *
+ * @param {App.Entity.SlaveState[]} slaveArr1
+ * @param {App.Entity.SlaveState[]} slaveArr2
+ *
+ * @returns {{canReuse: boolean, averageDifference: number}} Comparison results
+ */
+ function fuzzyCompareSlavesArr(slaveArr1, slaveArr2) {
+ let totalDifference = 0;
+ let canReuse = true;
+
+ if (slaveArr1.length !== slaveArr2.length) {
+ throw new Error(`Trying to compare slave arrays of different sizes: ${JSON.stringify(slaveArr1)}, ${JSON.stringify(slaveArr2)}`);
+ }
+
+ for (let i = 0; i < slaveArr1.length; i++) {
+ const diff = fuzzyCompareSlaves(slaveArr1[i], slaveArr2[i]);
+
+ if (!diff.canReuse) {
+ canReuse = false;
+ }
+
+ totalDifference += diff.difference;
+ }
+
+ return {
+ canReuse,
+ averageDifference: totalDifference / slaveArr1.length
+ };
+ }
+
+ /**
+ * Finds the closest events from an array of events
+ *
+ * @private
+ *
+ * @param {App.Entity.SlaveState[]} slaveStates The state of the slaves you want an image for
+ * @param {App.Art.GenAI.EventStore.Entry[]} entries Previous event entries
+ * @param {{forceRegenerate: boolean}} options Fully populated misc options.
+ *
+ * @returns {{averageDifference: number, matches: App.Art.GenAI.EventStore.Entry[]}} Matches, and the lowest difference it could find. If totalDifference is 0, then it means it was an exact match.
+ */
+ function findClosestEvents(slaveStates, entries, options) {
+ /**
+ * @private
+ * @typedef ClosestEventRecord
+ * @property {App.Art.GenAI.EventStore.Entry[]} matches
+ * @property {number} averageDifference
+ */
+ const fuzzyResults = entries.map((entry) => {
+ return {
+ entry,
+ ...fuzzyCompareSlavesArr(slaveStates, entry.slaveStates)
+ };
+ }).filter((record) => record.canReuse)
+ .reduce(( /** @type {ClosestEventRecord} */prevRecord, currentRecord) => {
+ if (currentRecord.averageDifference < prevRecord.averageDifference) {
+ return {
+ matches: [currentRecord.entry],
+ averageDifference: currentRecord.averageDifference
+ };
+ } else if (currentRecord.averageDifference === prevRecord.averageDifference) {
+ prevRecord.matches.push(currentRecord.entry);
+ return prevRecord;
+ }
+ }, {matches: [], averageDifference: Number.MAX_SAFE_INTEGER});
+ // to regenerate, we need an exact match.
+ if (options.forceRegenerate && fuzzyResults.averageDifference > 0) {
+ return {
+ matches: [],
+ averageDifference: Number.MAX_SAFE_INTEGER
+ };
+ }
+
+ return fuzzyResults;
+ }
+
+ /**
+ * Get an image from the IndexedDB
+ * @param {App.Entity.SlaveState[]} slaves The ID of the image to retrieve
+ * @param {Partial<App.Art.GenAI.GetImageOptions>} [options] Misc options.
+ * Defaults: action='overview', size=App.Art.ArtSizes.SMALL, forceRegenerate: false, isEventImage: false
+ *
+ * @returns {Promise<App.Art.GenAI.EventStore.Entry>} Promise object that resolves with the retrieved image data
+ */
+ async function getImage(slaves, options = {}) {
+ await waitForInit();
+
+ /** @type {App.Art.GenAI.GetImageOptions} */
+ const effectiveOptions = {
+ /** @type {App.Art.GenAI.Action} */
+ action: 'overview',
+ size: App.Art.ArtSizes.SMALL,
+ forceRegenerate: false,
+ isEventImage: false,
+ ...options
+ };
+
+ // Data is optional
+ /** @type {Omit<App.Art.GenAI.EventStore.Entry, "data"> & { data?: App.Art.GenAI.EventStore.DataType}} */
+ let event = {
+ slaveIds: slaves.map(s => s.ID).sort(),
+ seed: slaves[0].natural.artSeed,
+ slaveStates: structuredClone(slaves),
+ action: effectiveOptions.action,
+ };
+
+ // look for identical event
+ /** @type {App.Art.GenAI.EventStore.Entry[]} */
+ const eventEntries = await db.getAllFromIndex(EVENT_STORE.path, EVENT_STORE.indicies.bySlaveIdsActions, IDBKeyRange.only([event.slaveIds, event.action]));
+
+ const {matches, averageDifference} = findClosestEvents(slaves, eventEntries, effectiveOptions);
+ const shouldUseCache = (averageDifference <= SIGNIFICANTLY_DIFFERENT_THRESHOLD) && !effectiveOptions.forceRegenerate;
+ const isExactMatch = averageDifference === 0;
+ const chosenEvent = matches[Math.floor(Math.random() * matches.length)];
+
+ // Use the cached value
+ if (matches?.length > 0 && shouldUseCache) {
+ // Any of the allowed entries will work. Return a random one.
+ return matches[Math.floor(Math.random() * matches.length)];
+ }
+
+ const base64Image = await generateNewImage(slaves, effectiveOptions);
+
+ /** @type {App.Art.GenAI.EventStore.Entry} */
+ // @ts-expect-error
+ let fullEvent = event;
+ if (isExactMatch) {
+ // fill in with previous data
+ fullEvent = {
+ ...event,
+ ...chosenEvent
+ };
+ }
+
+ if (event.action === 'overview') {
+ fullEvent.data = {
+ images: {
+ lowRes: base64Image
+ }
+ };
+ }
+
+ // save it to the DB, unless it's temporary
+ if (!fullEvent.slaveIds.includes(0)) {
+ await db.put(EVENT_STORE.path, fullEvent);
+ }
+
+
+ return fullEvent;
+ }
+
+ /**
+ * Count the images currently in the DB
+ * @returns {Promise<number>}
+ */
+ async function count() {
+ await waitForInit();
+ return db.count(EVENT_STORE.path);
+ }
+
+ async function init() {
+ db = await createDB();
+ initialized = true;
+ }
+
+ function isInit() {
+ return initialized;
+ }
+
+ /**
+ * Purge all the images from DB
+ */
+ async function clear() {
+ await waitForInit();
+ return Promise.all(ALL_STORES.map(store => db.clear(store.path)));
+ }
+
+
+
+ // /**
+ // * Gets all images where actor(s) have participated in.
+ // *
+ // * @param {number | number[]} slaveIds Id of actor(s) in the image.
+ // * @param {{soloOnly: boolean}} options
+ // */
+ // async function getAllSlaveEvents(slaveIds, options) {
+ // // TODO for gallery view
+ // }
+
+ // /**
+ // * Gets all images where actor(s) have participated in.
+ // *
+ // * @param {number | number[]} slaveIds Id of actor(s) in the image.
+ // * @param {{soloOnly: boolean}} options
+ // */
+ // async function getAllSlaveImages(slaveIds, options) {
+ // /** @type {number[]} */
+ // let searchForIds;
+ // if (typeof slaveIds === 'number') {
+ // searchForIds = [slaveIds];
+ // } else {
+ // searchForIds = slaveIds;
+ // }
+
+ // const actorQuery = IDBKeyRange.only(slaveIds);
+
+ // const tx = db.transaction([EVENT_STORE.path]);
+ // const cursor = await tx.objectStore(EVENT_STORE.path)
+ // .index(EVENT_STORE.indicies.bySlaveId)
+ // .openCursor(actorQuery);
+
+ // const eventEntries = [];
+ // let eventEntry;
+ // while (eventEntry = await cursor?.continue()) {
+ // eventEntries.push(eventEntry);
+ // }
+ // }
+
+ /**
+ * Regenerates images for all slaves
+ */
+ async function regenAllImages() {
+ V.slaves.forEach((s) => getImage([s], {forceRegenerate: true}));
+ }
+
+
+
+ /**
+ * Count the images currently in the DB
+ * @returns {Promise<string>}
+ */
+ async function sizeInfo() {
+ await waitForInit();
+ const numImages = await count();
+
+ let sizeEstimate;
+ // Navigator.storage not supported in all browsers
+ try {
+ // Total memory usage of this origin
+ const estimate = await navigator.storage.estimate();
+ sizeEstimate = (estimate.usage / 1024 / 1024).toFixed(2) + "MB";
+ } catch (e) {
+ console.error(e);
+ }
+
+ return `${numImages} images ${sizeEstimate ? ` (${sizeEstimate})` : ''}`;
+ }
+
+ return {
+ /**
+ * Flow control
+ */
+ /** Initalizes database */
+ init,
+ /** Resolves promise when DB has been initalized */
+ waitForInit,
+ /** Checks to see if DB is initalized */
+ isInit,
+ /** Close the DB */
+ close,
+ /** Number of images in the DB */
+ count,
+ sizeInfo,
+
+ /**
+ * Intelligently (create/update/reads image) then returns it. You should use this most of the time.
+ * Ideally, the DB will deal with caching/sending requests to SD.
+ */
+ getImage,
+ /** Gets all images of a given slave */
+ // getAllSlaveImages,
+ /** Clear DB to start from scratch */
+ clear,
+ /** Regenerate images for _all slaves_ */
+ regenAllImages,
+ };
+})();
+
+App.Art.GenAI.reactiveImageDB.init();
diff --git a/src/art/genAI/stableDiffusion.js b/src/art/genAI/stableDiffusion.js
index 6e891f8eeb4..5135aaa291c 100644
--- a/src/art/genAI/stableDiffusion.js
+++ b/src/art/genAI/stableDiffusion.js
@@ -88,13 +88,22 @@ async function fetchWithTimeout(url, timeout, options) {
}
+/**
+ * @typedef App.Art.GenAI.SdQueueItem
+ * @property {number} slaveID
+ * @property {string} body
+ * @property {boolean} isEventImage
+ * @property {[function(object): void]} resolves
+ * @property {[function(string): void]} rejects
+ */
+
App.Art.GenAI.StableDiffusionClientQueue = class {
constructor() {
// Images for this current screen
- /** @type {Array<{slaveID: number, body: string, isEventImage: boolean, resolves: [function(object): void], rejects: [function(string): void]}>} */
+ /** @type {Array<App.Art.GenAI.SdQueueItem>} */
this.queue = [];
// Images for permanent slaves (i.e. not event) that were requested to be generated in previous screens
- /** @type {Array<{slaveID: number, body: string, isEventImage: boolean, resolves: [function(object): void], rejects: [function(string): void]}>} */
+ /** @type {Array<App.Art.GenAI.SdQueueItem>} */
this.backlogQueue = [];
this.interrupted = false;
/** @type {number|null} */
@@ -124,7 +133,7 @@ App.Art.GenAI.StableDiffusionClientQueue = class {
try {
this.workingOnID = top.slaveID;
- console.log(`Fetching image for slave ${top.slaveID}, ${this.queue.length} requests remaining in the queue.`);
+ console.log(`Fetching image for slave ${top.slaveID}, ${this.queue.length} requests remaining in the queue; ${this.backlogQueue.length} in backlog.`);
// console.log("Generation Settings: ", JSON.parse(top.body));
const options = {
method: "POST",
@@ -158,7 +167,7 @@ App.Art.GenAI.StableDiffusionClientQueue = class {
* await this in order to block until the queue exits the interrupted state
*/
async resumeAfterInterrupt() {
- const sleep = () => new Promise(r => setTimeout(r, 10));
+ const sleep = () => new Promise(r => setTimeout(r, 100));
while (this.interrupted) {
await sleep();
}
@@ -168,7 +177,7 @@ App.Art.GenAI.StableDiffusionClientQueue = class {
* await this in order to block until the queue stops processing
*/
async resumeAfterProcessing() {
- const sleep = () => new Promise(r => setTimeout(r, 10));
+ const sleep = () => new Promise(r => setTimeout(r, 100));
while (this.workingOnID !== null) {
await sleep();
}
@@ -188,15 +197,19 @@ App.Art.GenAI.StableDiffusionClientQueue = class {
// if an image request already exists for this ID (and ID is not zero), and it's not an event image
if (slaveID !== null && slaveID > 0) {
+ const comparisonFn = V.aiCachingStrategy === 'static'
+ ? ((/** @type {App.Art.GenAI.SdQueueItem} */ x) => x.slaveID === slaveID)
+ : ((/** @type {App.Art.GenAI.SdQueueItem} */ x) => x.body === body); // reactive needs exact match
+
// if it's in the backlog queue, and the new request is also for a permanent image, pull it into the foreground queue first
if (!isEventImage) {
- let blItem = this.backlogQueue.find(i => i.slaveID === slaveID);
+ let blItem = this.backlogQueue.find(comparisonFn);
if (blItem) {
this.queue.push(blItem);
this.backlogQueue.delete(blItem);
}
}
- let item = this.queue.find(i => i.slaveID === slaveID);
+ let item = this.queue.find(comparisonFn);
if (item) {
// if id is already queued, add a handle to receive the previously queued Promise's response and update `body` with the new query
return new Promise((resolve, reject) => {
@@ -231,7 +244,7 @@ App.Art.GenAI.StableDiffusionClientQueue = class {
}
onPassageSwitch() {
- this.backlogQueue = [...this.queue.filter((job) => !job.isEventImage), ...this.backlogQueue];
+ this.backlogQueue = [...this.queue.filter((job) => !job.isEventImage), ...this.backlogQueue];
this.queue = [];
}
@@ -280,7 +293,7 @@ App.Art.GenAI.StableDiffusionClientQueue = class {
fetchWithTimeout(`${V.aiApiUrl}/sdapi/v1/interrupt`, 1000, options)
.then(() => {
console.log("Stable Diffusion: Interrupt Sent.");
- }).catch (() => {
+ }).catch(() => {
// ignore errors
});
}
@@ -530,7 +543,7 @@ App.Art.GenAI.StaticCaching = class {
async fetchImageForSlave(slave, isEventImage = null) {
let steps = V.aiSamplingSteps;
// always render owned slaves at full steps and without the passageSwitchHandler. This allows the player to queue updates for slave images during events.
- if (globalThis.getSlave(slave.ID)){
+ if (globalThis.getSlave(slave.ID)) {
isEventImage = false;
}
if (isEventImage === null) {
@@ -594,15 +607,15 @@ App.Art.GenAI.StaticCaching = class {
}
// If new image, add or replace it in
if (imagePreexisting === -1) {
- const imageId = await App.Art.GenAI.imageDB.putImage({data: imageData});
+ const imageId = await App.Art.GenAI.staticImageDB.putImage({data: imageData});
if (replacementImageIndex !== null) {
- await App.Art.GenAI.imageDB.removeImage(slave.custom.aiImageIds[replacementImageIndex]);
+ await App.Art.GenAI.staticImageDB.removeImage(slave.custom.aiImageIds[replacementImageIndex]);
slave.custom.aiImageIds[replacementImageIndex] = imageId;
} else {
slave.custom.aiImageIds.push(imageId);
slave.custom.aiDisplayImageIdx = slave.custom.aiImageIds.indexOf(imageId);
}
- // If image already exists, just update the display idx to it
+ // If image already exists, just update the display idx to it
} else {
console.log('Generated redundant image, no image stored');
slave.custom.aiDisplayImageIdx = imagePreexisting;
@@ -614,6 +627,101 @@ App.Art.GenAI.staticCache = new App.Art.GenAI.StaticCaching();
+App.Art.GenAI.ReactiveCaching = class {
+ /**
+ * @param {FC.SlaveState} slave
+ * @param {boolean | null} isEventImage - Whether request is canceled on passage change and which step setting to use. true => V.aiSamplingStepsEvent, false => V.aiSamplingSteps, null => chosen based on passage tags
+ * @returns {Promise<string>} - Base 64 encoded image (could be a jpeg, png, or webp)
+ */
+ async fetchImageForSlave(slave, isEventImage = null) {
+ let steps = V.aiSamplingSteps;
+ // always render owned slaves at full steps and without the passageSwitchHandler. This allows the player to queue updates for slave images during events.
+ if (globalThis.getSlave(slave.ID)) {
+ isEventImage = false;
+ }
+ if (isEventImage === null) {
+ isEventImage = isTemporaryImage();
+ }
+ if (isEventImage === true) {
+ steps = V.aiSamplingStepsEvent;
+ }
+
+ const settings = await App.Art.GenAI.sdClient.buildStableDiffusionSettings(slave, steps);
+ const body = JSON.stringify(settings);
+ // set up a passage switch handler to clear queued generation of event and temporary images upon passage change
+ const oldHandler = App.Utils.PassageSwitchHandler.get();
+ if (isEventImage || isTemporaryImage()) {
+ App.Utils.PassageSwitchHandler.set(() => {
+ // find where this request is in the queue
+ let rIndex = App.Art.GenAI.sdQueue.queue.findIndex(r => r.slaveID === slave.ID && r.body === body);
+ if (rIndex > -1) {
+ const rejects = App.Art.GenAI.sdQueue.queue[rIndex].rejects;
+ // remove request from the queue as soon as possible
+ App.Art.GenAI.sdQueue.queue.splice(rIndex, 1);
+ // reject the associated promises
+ rejects.forEach(r => r(`${slave.ID} (Event): Stable Diffusion fetch interrupted`));
+ } else if (App.Art.GenAI.sdQueue.workingOnID === slave.ID) {
+ // if this request is already in progress, send interrupt request
+ App.Art.GenAI.sdQueue.sendInterrupt();
+ }
+ App.Art.GenAI.sdQueue.onPassageSwitch();
+ if (oldHandler) {
+ oldHandler();
+ }
+ });
+ } else {
+ const oldHandler = App.Utils.PassageSwitchHandler.get();
+ App.Utils.PassageSwitchHandler.set(() => {
+ App.Art.GenAI.sdQueue.onPassageSwitch();
+ if (oldHandler) {
+ oldHandler();
+ }
+ });
+ }
+
+ const response = await App.Art.GenAI.sdQueue.add(slave.ID, body, isEventImage);
+ return response.images[0];
+ }
+
+ /**
+ * Update a slave object with a new image
+ * @param {FC.SlaveState} slave - The slave to update
+ * @param {number | null} replacementImageIndex - If provided, replace the image at this index
+ * @param {boolean | null} isEventImage - Whether request is canceled on passage change and which step setting to use. true => V.aiSamplingStepsEvent, false => V.aiSamplingSteps, null => chosen based on passage tags
+ */
+ async updateSlave(slave, replacementImageIndex = null, isEventImage = null) {
+ const base64Image = await this.fetchImageForSlave(slave, isEventImage);
+ const imageData = getImageData(base64Image);
+ console.log("Image data", imageData);
+ const imagePreexisting = await compareExistingImages(slave, imageData);
+ let vSlave = globalThis.getSlave(slave.ID);
+ // if `slave` is owned but the variable has become detached from V.slaves, save the image changes to V.slaves instead
+ if (vSlave && slave !== vSlave) {
+ slave = vSlave;
+ }
+ // If new image, add or replace it in
+ if (imagePreexisting === -1) {
+ const imageId = await App.Art.GenAI.reactiveImageDB.putImage({data: imageData});
+ if (replacementImageIndex !== null) {
+ await App.Art.GenAI.reactiveImageDB.removeImage(slave.custom.aiImageIds[replacementImageIndex]);
+ slave.custom.aiImageIds[replacementImageIndex] = imageId;
+ } else {
+ slave.custom.aiImageIds.push(imageId);
+ slave.custom.aiDisplayImageIdx = slave.custom.aiImageIds.indexOf(imageId);
+ }
+ // If image already exists, just update the display idx to it
+ } else {
+ console.log('Generated redundant image, no image stored');
+ slave.custom.aiDisplayImageIdx = imagePreexisting;
+ }
+ }
+};
+
+App.Art.GenAI.reactiveCache = new App.Art.GenAI.ReactiveCaching();
+
+
+
+
/**
* Search slave's existing images for a match with the new image.
* @param {FC.SlaveState} slave - The slave we're updating
@@ -623,7 +731,7 @@ App.Art.GenAI.staticCache = new App.Art.GenAI.StaticCaching();
async function compareExistingImages(slave, newImageData) {
const aiImages = await Promise.all(
slave.custom.aiImageIds.map(id =>
- App.Art.GenAI.imageDB.getImage(id)
+ App.Art.GenAI.staticImageDB.getImage(id)
.catch(() => null) // Return null if the image is not found or there's an error
)
);
diff --git a/src/art/genAI/imageDB.js b/src/art/genAI/staticImageDB.js
similarity index 98%
rename from src/art/genAI/imageDB.js
rename to src/art/genAI/staticImageDB.js
index db54d40c19e..98960dbfff7 100644
--- a/src/art/genAI/imageDB.js
+++ b/src/art/genAI/staticImageDB.js
@@ -1,4 +1,4 @@
-App.Art.GenAI.imageDB = (function() {
+App.Art.GenAI.staticImageDB = (function() {
/** @type {IDBDatabase} */
let db;
@@ -165,4 +165,4 @@ App.Art.GenAI.imageDB = (function() {
};
})();
-App.Art.GenAI.imageDB.createDB();
+App.Art.GenAI.staticImageDB.createDB();
diff --git a/src/facilities/dressingRoom/dressingRoom.js b/src/facilities/dressingRoom/dressingRoom.js
index 1ff7722cc87..4562f79f9cb 100644
--- a/src/facilities/dressingRoom/dressingRoom.js
+++ b/src/facilities/dressingRoom/dressingRoom.js
@@ -28,7 +28,9 @@ App.UI.DressingRoom.render = function() {
}
const model = structuredClone(getSlave(App.UI.DressingRoom.modelId));
- model.ID = 0;
+ if (V.aiCachingStrategy === 'static') {
+ model.ID = 0;
+ }
App.UI.DOM.appendNewElement('p', el, `${SlaveFullName(model)} is the model.`);
for (const slave of V.slaves) {
@@ -77,7 +79,6 @@ App.UI.DressingRoom.render = function() {
for (const [k, v] of data.entries()) {
const cell = document.createElement("span");
cell.id = k;
- // @ts-expect-error
cell.append(createCell(k, v));
el.append(cell);
}
@@ -88,7 +89,7 @@ App.UI.DressingRoom.render = function() {
/**
* Create individual cell for a piece of clothing, including the display model
- * @param {keyof App.Data.clothes} clothingName
+ * @param {FC.Clothes} clothingName
* @param {clothes} clothesProperties The outfit last worn by the slave. This means that on cycling outfits, we won't immediately repeat
*/
function createCell(clothingName, clothesProperties) {
@@ -102,7 +103,6 @@ App.UI.DressingRoom.render = function() {
// Get a randomly chosen piece of clothing from the set to display
// This piece will also later be checked to see if we can purchase it or not.
- // @ts-expect-error
model.clothes = clothingName;
if (V.seeImages === 1) {
// AI deals with stuff async so we would run into a race condition.
@@ -118,8 +118,12 @@ App.UI.DressingRoom.render = function() {
return el;
function createImage() {
- let aiArtElem = App.Art.aiArtElement(structuredClone(model), 5, true);
- aiArtElem.querySelector('[title*="Replace"]').remove();
+ // For reactive, all images are saved anyways. Persist them to save processing power in future.
+ const isTempImage = V.aiCachingStrategy !== 'reactive';
+ const cellModel = structuredClone(model);
+ // cellModel.clothes = clothingName;
+ let aiArtElem = App.Art.aiArtElement(cellModel, App.Art.ArtSizes.LARGE, isTempImage);
+ // aiArtElem.querySelector('[title*="Replace"]').remove();
return aiArtElem;
}
diff --git a/src/gui/options/options.js b/src/gui/options/options.js
index d943c552a9b..e626ef78e8f 100644
--- a/src/gui/options/options.js
+++ b/src/gui/options/options.js
@@ -1,6 +1,6 @@
// cSpell:ignore SSAA
-App.UI.optionsPassage = function() {
+App.UI.optionsPassage = function () {
const el = new DocumentFragment();
App.UI.DOM.appendNewElement("h1", el, `Game Options`);
App.Utils.PassageSwitchHandler.set(App.EventHandlers.optionsChanged);
@@ -798,7 +798,7 @@ App.UI.optionsPassage = function() {
* @param {boolean} isIntro
* @returns {DocumentFragment}
*/
-App.Intro.display = function(isIntro) {
+App.Intro.display = function (isIntro) {
const el = new DocumentFragment();
let options;
let r;
@@ -956,7 +956,7 @@ App.Intro.display = function(isIntro) {
* @param {boolean} isIntro
* @returns {DocumentFragment}
*/
-App.Intro.contentAndFlavor = function(isIntro) {
+App.Intro.contentAndFlavor = function (isIntro) {
const el = new DocumentFragment();
let r;
let options;
@@ -1159,7 +1159,7 @@ App.Intro.contentAndFlavor = function(isIntro) {
/**
* @param {InstanceType<App.UI.OptionsGroup>} options
*/
-App.UI.aiPromptingOptions = function(options) {
+App.UI.aiPromptingOptions = function (options) {
options.addOption("NGBot's LoRA pack", "aiLoraPack")
.addValue("Enabled", true).on().addValue("Disabled", false).off()
.addComment("Adds prompting to support NGBot's LoRA pack; see the LoRA Pack Installation Guide for details");
@@ -1171,9 +1171,9 @@ App.UI.aiPromptingOptions = function(options) {
["Custom", 0]
]);
if (V.aiStyle === 0) {
- options.addOption("AI custom style positive prompt", "aiCustomStylePos").showTextBox({large: true, forceString: true})
+ options.addOption("AI custom style positive prompt", "aiCustomStylePos").showTextBox({ large: true, forceString: true })
.addComment("Include desired LoRA triggers (<code><lora:LowRA:0.5></code>) and general style prompts relevant to your chosen model ('<code>hand drawn, dark theme, black background</code>'), but no slave-specific prompts");
- options.addOption("AI custom style negative prompt", "aiCustomStyleNeg").showTextBox({large: true, forceString: true})
+ options.addOption("AI custom style negative prompt", "aiCustomStyleNeg").showTextBox({ large: true, forceString: true })
.addComment("Include undesired general style prompts relevant to your chosen model ('<code>greyscale, photography, forest, low camera angle</code>'), but no slave-specific prompts");
} else if (V.aiStyle === 1) {
options.addComment("For best results, use an appropriately-trained photorealistic base model, such as MajicMIX or Life Like Diffusion.");
@@ -1185,7 +1185,7 @@ App.UI.aiPromptingOptions = function(options) {
.addComment("Helps differentiate between ethnicities that share a Free Cities race, like Japanese and Korean or Spanish and Greek. May cause flags/national colors to appear unexpectedly, and can have a negative impact on slaves that belong to a minority race for their nationality.");
};
-App.UI.artOptions = function() {
+App.UI.artOptions = function () {
const el = new DocumentFragment();
let options = new App.UI.OptionsGroup();
@@ -1321,16 +1321,23 @@ App.UI.artOptions = function() {
}
options.addOption("API URL", "aiApiUrl").showTextBox().addComment("The URL of the Automatic 1111 Stable Diffusion API.");
App.UI.aiPromptingOptions(options);
- options.addOption("Automatic generation", "aiAutoGen")
- .addValue("Enabled", true).on().addValue("Disabled", false).off()
- .addComment("Generate images for new slaves on the fly. If disabled, you will need to manually click to generate each slave's image.");
- if (V.aiAutoGen) {
- if (V.aiAutoGenFrequency < 1) {
- V.aiAutoGenFrequency = 1;
+
+ options.addOption("Caching Strategy", 'aiCachingStrategy')
+ .addValue("Reactive", 'reactive').addValue("Static", 'static')
+ .addComment("Caching behavior for AI images. Reactive pictures always reflect the state of the slave at the current time. Static refreshes every set amount of weeks, or manually. Images will not be brought across different strategies, but if the model is the same the generated images will be the same as well.");
+
+ if (V.aiCachingStrategy === 'static') {
+ options.addOption("Automatic generation", "aiAutoGen")
+ .addValue("Enabled", true).on().addValue("Disabled", false).off()
+ .addComment("Generate images for new slaves on the fly. If disabled, you will need to manually click to generate each slave's image.");
+ if (V.aiAutoGen) {
+ if (V.aiAutoGenFrequency < 1) {
+ V.aiAutoGenFrequency = 1;
+ }
+ V.aiAutoGenFrequency = Math.round(V.aiAutoGenFrequency);
+ options.addOption("Regeneration Frequency", "aiAutoGenFrequency").showTextBox()
+ .addComment("How often (in weeks) regenerate slave images. Slaves will render when 'Weeks Owned' is divisible by this number.");
}
- V.aiAutoGenFrequency = Math.round(V.aiAutoGenFrequency);
- options.addOption("Regeneration Frequency", "aiAutoGenFrequency").showTextBox()
- .addComment("How often (in weeks) regenerate slave images. Slaves will render when 'Weeks Owned' is divisible by this number.");
}
const samplerListSpan = App.UI.DOM.makeElement('span', `Fetching options, please wait...`);
@@ -1487,20 +1494,35 @@ App.UI.artOptions = function() {
renderQueueOption();
options.addCustomOption("Cache database management")
.addButton("Purge all images", async () => {
- await App.Art.GenAI.imageDB.clear();
+ await App.Art.GenAI.staticImageDB.clear();
+ await App.Art.GenAI.reactiveImageDB.clear();
})
.addButton("Regenerate images for all slaves", () => {
// queue all slaves for regeneration in the background
- V.slaves.forEach(s => App.Art.GenAI.staticCache.updateSlave(s)
- .catch(error => {
- console.log(error.message || error);
- }));
+ if (V.aiCachingStrategy === 'static') {
+ V.slaves.forEach(s => App.Art.GenAI.staticCache.updateSlave(s)
+ .catch(error => {
+ console.log(error.message || error);
+ }));
+ } else {
+ // reactive
+ V.slaves.forEach(s => App.Art.GenAI.reactiveCache.updateSlave(s)
+ .catch(error => {
+ console.log(error.message || error);
+ }));
+ }
console.log(`${App.Art.GenAI.sdQueue.queue.length} requests queued for rendering.`);
})
.addComment(`Current cache size: <span id="cacheCount">Please wait...</span>. The cache database is shared between games.`);
- App.Art.GenAI.imageDB.sizeInfo().then((result) => {
- $("#cacheCount").empty().append(result);
- });
+ if (V.aiCachingStrategy === 'static') {
+ App.Art.GenAI.staticImageDB.sizeInfo().then((result) => {
+ $("#cacheCount").empty().append(result);
+ });
+ } else {
+ App.Art.GenAI.reactiveImageDB.sizeInfo().then((result) => {
+ $("#cacheCount").empty().append(result);
+ });
+ }
}
} else { // custom images only
options.addOption("Show suggested AI prompts in Customize tab", "aiCustomImagePrompts")
--
GitLab