feat(tags): AI tag files

Adds the ability to tag files using AI models via local API service such as https://github.com/cmeka/media-tag-service

Author: cmeka

src/api/tag.ts

@@ -11,4 +11,5 @@ export type TagDTO = {
   subTags: ID[];
   /** Whether any files with this tag should be hidden */
   isHidden: boolean;
+  isAi: boolean;
 };

src/backend/backend.ts

@@ -56,6 +56,7 @@ export default class Backend implements DataStorage {
           subTags: [],
           color: '',
           isHidden: false,
+          isAi: false,
         });
       }
     });

src/frontend/containers/ContentView/menu-items.tsx

@@ -81,6 +81,11 @@ export const FileViewerMenuItems = ({ file }: { file: ClientFile }) => {
         text="Open Tag Selector (T)"
         icon={IconSet.TAG}
       />
+      <MenuItem
+        onClick={uiStore.aiTagSelection}
+        text="AI Tag Selection"
+        icon={IconSet.TAG}
+      />
       <MenuItem
         onClick={handleRemoveAllTags}
         text="Remove All Tags"

src/frontend/containers/Outliner/LocationsPanel/index.tsx

@@ -142,7 +142,7 @@ const DirectoryMenu = observer(
     location: ClientLocation | ClientSubLocation;
     onExclude: (subLocation: ClientSubLocation) => void;
   }) => {
-    const { uiStore } = useStore();
+    const { uiStore, fileStore } = useStore();
 
     const path = location instanceof ClientLocation ? location.path : location.path;
 
@@ -158,6 +158,11 @@ const DirectoryMenu = observer(
       [path, uiStore],
     );
 
+    const handleAiTagDirectory = useCallback(
+      () => fileStore.aiTagDirectory(path),
+      [path, fileStore],
+    );
+
     return (
       <>
         <MenuItem onClick={handleAddToSearch} text="Add to Search Query" icon={IconSet.SEARCH} />
@@ -167,6 +172,12 @@ const DirectoryMenu = observer(
           icon={IconSet.REPLACE}
         />
         <MenuDivider />
+        <MenuItem
+          onClick={handleAiTagDirectory}
+          text="AI Tag this Directory"
+          icon={IconSet.TAG_GROUP}
+        />
+        <MenuDivider />
         {location instanceof ClientSubLocation && (
           <MenuItem
             // Only show alert when excluding, not when re-including

src/frontend/containers/Settings/Advanced.tsx

@@ -14,6 +14,7 @@ import ExternalLink from 'src/frontend/components/ExternalLink';
 export const Advanced = observer(() => {
   const { uiStore, fileStore } = useStore();
   const thumbnailDirectory = uiStore.thumbnailDirectory;
+  const aiTagUrl: string = fileStore.aiTagUrl;
 
   const [defaultThumbnailDir, setDefaultThumbnailDir] = useState('');
   useEffect(() => {
@@ -74,6 +75,12 @@ export const Advanced = observer(() => {
         <div className="filepicker-path">{thumbnailDirectory}</div>
       </div>
 
+      <h3>AI Tagging API</h3>
+      <Callout icon={IconSet.INFO}>
+        A tagging service such as <ExternalLink url="https://github.com/cmeka/media-tag-service">media-tag-service</ExternalLink> must be running.
+      </Callout>
+      <input name="aiTagUrl" defaultValue={aiTagUrl} size={40} onChange={fileStore.setAiTagUrl}></input>
+
       <h3>Development</h3>
       <ButtonGroup>
         <ClearDbButton />

src/frontend/entities/File.ts

@@ -117,6 +117,16 @@ export class ClientFile {
     return this.annotations;
   }
 
+  @computed get hasAiTags(): boolean {
+    if (this.tags.size === 0) return false;
+    for (const obj of this.tags) {
+      if (obj.isAi === true) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   @action.bound setThumbnailPath(thumbnailPath: string): void {
     this.thumbnailPath = thumbnailPath;
   }

src/frontend/entities/Tag.ts

@@ -19,6 +19,7 @@ export class ClientTag {
   @observable name: string;
   @observable color: string;
   @observable isHidden: boolean;
+  @observable isAi: boolean;
   @observable private _parent: ClientTag | undefined;
   readonly subTags = observable<ClientTag>([]);
   // icon, (fileCount?)
@@ -37,6 +38,7 @@ export class ClientTag {
     dateAdded: Date,
     color: string,
     isHidden: boolean,
+    isAi: boolean,
   ) {
     this.store = store;
     this.id = id;
@@ -45,6 +47,7 @@ export class ClientTag {
     this.color = color;
     this.fileCount = 0;
     this.isHidden = isHidden;
+    this.isAi = isAi;
 
     // observe all changes to observable fields
     this.saveHandler = reaction(
@@ -199,6 +202,7 @@ export class ClientTag {
       color: this.color,
       subTags: this.subTags.map((subTag) => subTag.id),
       isHidden: this.isHidden,
+      isAi: this.isAi,
     };
   }