[Draft] Model library sidebar tab (#837)

* basic/empty model library sidebar tab

in-progress

* make it actually list out models

* extremely primitive search impl

* list out available folders

(incomplete list atm)

* load list dynamically

* nice lil loading icon

* that's not doing anything

* run autoformatter

* fix up some absolute vue shenanigans

* swap to pi-box

* is_fake_object

* i think apply the tailwind thingo

* trim '.safetensors' from end of display title

* oop

* after load, retain title if no new title is given

* is_load_requested to prevent duplication

* dirty initial model metadata load & preview

based on node preview code

* update model store tests

* initial image icon for model lib

* i hate this

* better empty spacer

* add api handler for '/models'

* load model folders list instead of hardcoding

* add a 'no content' placeholder for empty folders

* autoformat

* autoload model metadata

* error handling on metadata loading

* larger model icons

* click a model to spawn a node for it

* draggable model nodes

* add a setting for whether to autoload or not

* autoformat will be the death of me

* cleanup promise code

* make the model preview actually half-decent

* revert bad unchecked change

* put registration back

src/scripts/api.ts

@@ -330,6 +330,18 @@ class ComfyApi extends EventTarget {
     return await res.json()
   }
 
+  /**
+   * Gets a list of model folder keys (eg ['checkpoints', 'loras', ...])
+   * @returns The list of model folder keys
+   */
+  async getModelFolders(): Promise<string[]> {
+    const res = await this.fetchApi(`/models`)
+    if (res.status === 404) {
+      return null
+    }
+    return await res.json()
+  }
+
   /**
    * Gets a list of models in the specified folder
    * @param {string} folder The folder to list models from, such as 'checkpoints'
@@ -353,7 +365,22 @@ class ComfyApi extends EventTarget {
     const res = await this.fetchApi(
       `/view_metadata/${folder}?filename=${encodeURIComponent(model)}`
     )
-    return await res.json()
+    const rawResponse = await res.text()
+    if (!rawResponse) {
+      return null
+    }
+    try {
+      return JSON.parse(rawResponse)
+    } catch (error) {
+      console.error(
+        'Error viewing metadata',
+        res.status,
+        res.statusText,
+        rawResponse,
+        error
+      )
+      return null
+    }
   }
 
   /**