Add Poses tab; Update Readme.

Author: WebDev9000

README.md

@@ -4,19 +4,20 @@
 
 Inspired by the Extra Network tabs in Automatic1111's WebUI, Extra Network Browser is a stand-alone take on the concept with additional features.
 
-Easily choose a LoRA, HyperNetwork, Embedding, Checkpoint, or Style visually and copy the trigger, keywords, and suggested weight *to the clipboard* for easy pasting into the application of your choice.
+Easily choose a **LoRA, HyperNetwork, Embedding, Checkpoint, or Style** visually and copy the trigger, keywords, and suggested weight to the clipboard for easy pasting into the application of your choice.
 
-Advantages over the Extra Network Tabs:
+Features of Extra Network Browser:
 
 * Great for UI's like ComfyUI when used with nodes like [Lora Tag Loader](https://github.com/badjeff/comfyui_lora_tag_loader/) or [ComfyUI Prompt Control](https://github.com/asagi4/comfyui-prompt-control).
-* Considerably faster, loads thousands of LoRA.
+* Considerably fast, loads thousands of LoRA easily.
 * A [Styles](#styles) tab that parses a styles CSV for thumbnail previews just like networks.
 * [Keywords](#keywords) in the filename inside brackets [ ]'s are copied along with the LoRA trigger.
 * [Weights](#weights) placed in braces { }'s *(eg {1.0} or {0.7-0.8})* in the filename are automatically set in the LoRA's trigger.
 * Some characters not compatible with filenames are automatically converted from placeholders, such as ©️ to : *(for [keywords with weights](#weights))*
 * Sort by Name, Date Modified, or try Random sort for inspiration.
 * Support for multiple images per LoRA/model/etc in a [modal gallery](#modal) (including filename [search](#search)). Hover over a card & click the folder icon.
 * Support for [displaying a companion .txt file](#modal) to store descriptions, notes, and prompts. Hover over a card & click the document icon.
+* [Poses](#poses) tab to visually display OpenPose collections and examples.
 * [Gallery](#modal) tab for arbitrary image folders, such as saved generation results.
 
 <br />
@@ -53,7 +54,7 @@ cd ../app && npm install
 
 Then add content:
 
-- Populate the folders in `api/networks/` with your files: `lora`, `checkpoints`, `embeddings`, `hypernets`, `styles`, and `gallery`.
+- Populate the folders in `api/networks/` with your files: `lora`, `checkpoints`, `embeddings`, `hypernets`, `styles`, `poses`, and `gallery`.
 - Edit `api/networks/styles.csv` with *(only)* `name,prompt` on the first line, and your styles (following the format shown [below](#styles)) on the subsequent lines.
 
 ***OR***
@@ -228,17 +229,49 @@ In this example, your matching image files in `api/networks/styles` would be:
 
 ---
 
+<a id="poses"></a>
+### Poses:
+
+The Poses tab ("P") is designed to work with OpenPose images used with ControlNet.  In this tab, you can manage examples of those poses for easy browing.
+
+This tab works somewhat differently than the model tabs, in that it looks for images rather than model files.<br />
+I've tried to somewhat match the format of many zipped packs I've seen, and as such I recommend the following folder structure:
+
+```
+/api/poses/<pose>/
+/api/poses/<posefolder>/pose1.png
+/api/poses/<posefolder>/pose2.png
+/api/poses/<posefolder>/OpenPose/pose1.png   #optional
+/api/poses/<posefolder>/OpenPose/pose2.png   #optional
+/api/poses/<posefolder>/Depth/pose1.png      #optional
+/api/poses/<posefolder>/Canny/pose2.png      #optional
+```
+
+The structure here is:
+* A general name for the pose folder *(e.g. "Heart Hands" or "T Pose")*
+* Example images with the pose inside that folder
+* OpenPose mannequin files inside a subfolder called OpenPose
+* Optionally any other ControlNet files stored likewise *(e.g. Depth, Canny, or Lineart folders)*
+
+For best compatibility this tab uses **.png** instead of **.jpeg**.
+*This can be changed in `api/index.js` by editing `const ext ... "png" : imgExt`, on line 260 to `jpeg`, etc.*
+
+---
+
 <a id="gallery"></a>
 ### Gallery:
 
-The Gallery tab *("G")* looks for *subfolders* inside the `api/networks/gallery/` folder and displays a card for each, using a .jpeg matching the folder name in the `/gallery`.
+The Gallery tab ("G") looks for *subfolders* inside the `api/networks/gallery/` folder and displays a card for each, using a .jpeg matching the folder name in the `/gallery`.
 Examples:
 ```
-api/networks/gallery/saved-images/      # Gallery folder with images
-api/networks/gallery/saved-images.jpeg  # Gallery folder thumbnail image
-
-api/networks/gallery/testing-images/      # Gallery folder with images
-api/networks/gallery/testing-images.jpeg  # Gallery folder thumbnail image
+api/networks/gallery/saved-images.jpeg     # Gallery folder thumbnail image
+api/networks/gallery/saved-images/one.jpeg     # Gallery folder with images
+api/networks/gallery/saved-images/two.jpeg     # Gallery folder with images
+api/networks/gallery/saved-images/three.jpeg   # Gallery folder with images
+
+api/networks/gallery/testing-images.jpeg   # Gallery folder thumbnail image
+api/networks/gallery/testing-images/cat.jpeg   # Gallery folder with images
+api/networks/gallery/testing-images/dog.jpeg   # Gallery folder with images
 ```
 
 <a id="search"></a>

api/index.js

@@ -19,6 +19,7 @@ app.use('/styles', express.static('networks/styles'))
 app.use('/checkpoints', express.static('networks/checkpoints'))
 app.use('/embeddings', express.static('networks/embeddings'))
 app.use('/hypernets', express.static('networks/hypernets'))
+app.use('/poses', express.static('networks/poses'))
 app.use('/gallery', express.static('networks/gallery'))
 
 // Endpoint to return images
@@ -94,15 +95,58 @@ app.get('/images', (req, res) => {
         let filename = (file.name.indexOf("." + imgExt) > -1) ? file.name : file.name + "." + imgExt
         let path = file.path.replace(file.name, '').replace('networks/', '').toLowerCase()
 
-        // This return only for files.map
+        // This return is only for files.map
         return {
           filename: filename,
           path: path,
         }
       })
       res.json(images)
 
+    } else if (searchType == "poses") {
+        // Poses searches for a list of png one level deep.
+
+        let pattern = ''
+        let extraPattern = ''
+        let _onlyDirectories = false
+        let ext = "png"
+
+        if (searchTerm) {
+          if (searchTerm.split(">").length > 1) {
+            pattern = searchTerm.split(">")[0] ? `*${searchTerm.split(">")[0]}*` : '*'
+            extraPattern = '/' + (searchTerm.split(">")[1] ? `*${searchTerm.split(">")[1]}*` : '*')
+            extraPattern += "." + ext
+          } else {
+            pattern = `*${searchTerm}*`
+            extraPattern += "." + ext
+          }
+        } else {
+          pattern = '*'
+          extraPattern += "." + ext
+        }
+
+        const files = fg.globSync([`networks/${searchType}/*/${pattern}${extraPattern}`], { onlyDirectories: _onlyDirectories, dot: false, caseSensitiveMatch: false, stats: true })
+
+        images = files.flatMap(file => {
+
+          let filename = (file.name.indexOf("." + ext) > -1) ? file.name : file.name + "." + ext
+          let path = file.path.replace(file.name, '').replace('networks/', '').toLowerCase()
+          // Set the containing directory name as the nameplate.
+          let name = /poses\/(.+?)\//.exec(path)[1]
+          // Skip files with ". (\d+)", e.g. "filename. (2).png" etc.
+          if (filename.match(/\. \([0-9]+\)\./)) { return [] }
+
+          // This return is only for files.flatMap
+          return {
+            filename: filename,
+            path: path,
+            name: name
+          }
+        })
+        res.json(images)
+
     } else {
+      // Everything else searches for model files
       let ext = null
       if (searchType == "lora" || searchType == "checkpoints") {
         ext = "safetensors"
@@ -173,7 +217,7 @@ app.get('/images', (req, res) => {
           prompt = noext
         }
 
-        // This return only for files.map
+        // This return is only for files.map
         return {
           filename: filename,
           path: path,
@@ -200,6 +244,7 @@ app.get('/moreImages', (req, res) => {
   const search = req.query.search || res.status(400).send({
     message: 'Missing query.'
   });
+  const type = req.query.type
 
   // Chars like {} break the glob search if unescaped.
   const filteredSearch = search.replaceAll('$','\\$')
@@ -212,11 +257,14 @@ app.get('/moreImages', (req, res) => {
     .replaceAll('{','\\{')
     .replaceAll('}','\\}')
 
-  const noext = filteredSearch.substring(filteredSearch.lastIndexOf('/') + 1).replace('.' + imgExt, '')
+  const ext = (type == "poses") ? "png" : imgExt
+  const noext = filteredSearch.substring(filteredSearch.lastIndexOf('/') + 1).replace('.' + ext, '')
   const searchPath = filteredSearch.substring(0, filteredSearch.lastIndexOf('/'))
 
-  const query = `networks/${searchPath}/${noext}(.*|).${imgExt}`
-  const queryFolder = `networks/${searchPath}/${noext}/*.${imgExt}`
+  // (.*|) is NOT REGEX. It's ( literal dot, wildstar; OR empty )  e.g. ( example". (2)".jpeg OR example"".jpeg )
+  // Not to be confused with regex ".*"
+  const query = `networks/${searchPath}/${noext}(.*|).${ext}`
+  const queryFolder = `networks/${searchPath}/${noext}/*.${ext}`
   const files = fg.globSync([query, queryFolder], { dot: false, caseSensitiveMatch: false, stats: true })
 
   const images = files.map(file => {

api/networks/init.bat

@@ -4,5 +4,6 @@ mkdir checkpoints
 mkdir embeddings
 mkdir hypernets
 mkdir styles
+mkdir poses
 mkdir gallery
 echo n | copy /-y styles.csv.example styles.csv

app/src/GetImages.jsx

@@ -92,7 +92,7 @@ export default function GetImages() {
 		const image = images[moreIndex]
 		const query = encodeURIComponent(image.path + image.filename)
 
-		axios.get(`http://localhost:3000/moreImages?search=${query}`)
+		axios.get(`http://localhost:3000/moreImages?type=${type}&search=${query}`)
 			.then(response => {
 				setMoreLoading(false)
 				setMoreError(false)
@@ -152,9 +152,11 @@ export default function GetImages() {
 		setMoreDocument(null)
 
 		const image = images[index]
-		const file = encodeURIComponent(image.filename.substring(0, image.filename.lastIndexOf('.')) + '.txt')
+		const file = (type == "poses") ?
+			'readme.txt'
+			: encodeURIComponent(image.filename.substring(0, image.filename.lastIndexOf('.')) + '.txt')
 
-		axios.get(`http://localhost:3000/${image.path}${file}`)
+		axios.get(`http://localhost:3000/${image.path.replaceAll('#','%23')}${file}`)
 			.then(response => {
 				setMoreLoading(false)
 				setMoreError(false)
@@ -223,6 +225,7 @@ export default function GetImages() {
 						<span title="Embedding" className={`typeOption ${type == "embeddings" ? "highlight" : ""}`} onClick={() => handleTypeChange("embeddings")}>E</span>
 						<span title="HyperNetwork" className={`typeOption ${type == "hypernets" ? "highlight" : ""}`} onClick={() => handleTypeChange("hypernets")}>H</span>
 						<span title="Checkpoint" className={`typeOption ${type == "checkpoints" ? "highlight" : ""}`} onClick={() => handleTypeChange("checkpoints")}>C</span>
+						<span title="Poses" className={`typeOption ${type == "Poses" ? "highlight" : ""}`} onClick={() => handleTypeChange("poses")}>P</span>
 						<span title="Gallery" className={`typeOption ${type == "gallery" ? "highlight" : ""}`} onClick={() => handleTypeChange("gallery")}>G</span>
 					</div>
 					<input id="imgSearch" icon='search' placeholder='Search...'
@@ -261,7 +264,7 @@ export default function GetImages() {
 							{!moreLoading && !moreError && images[moreIndex] && moreImages[0] && !moreDocument && moreImages.map((image, index) => (
 								<div key={index+1000000} className="imgCard" onClick={() => {navigator.clipboard.writeText(images[moreIndex].prompt)}}>
 									<img width="224" height="336"
-										src={"http://localhost:3000/" + image.path.replace('#','%23') + encodeURIComponent(image.filename)}
+										src={"http://localhost:3000/" + image.path.replaceAll('#','%23') + encodeURIComponent(image.filename)}
 										loading={index <= 60 ? "eager" : "lazy"}
 										title={image.filename}
 									/>

app/src/Image.jsx

@@ -2,7 +2,7 @@ export default function Image(props) {
 	return (
 		<div className="imgCard" onClick={() => {navigator.clipboard.writeText(props.prompt)}}>
 			<img width="224" height="336"
-				src={"http://localhost:3000/" + props.path.replace('#','%23') + encodeURIComponent(props.filename)}
+				src={"http://localhost:3000/" + props.path.replaceAll('#','%23') + encodeURIComponent(props.filename)}
 				loading={props.index <= 60 ? "eager" : "lazy"}
 				title={props.path + props.filename}
 			/>