New search parsing; Add gallery tab; Directory support; Fixed image loading with # in path

Author: WebDev9000

README.md

@@ -15,8 +15,9 @@ Advantages over the Extra Network Tabs:
 * [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). Hover over a card & click the folder icon.
+* 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.
+* [Gallery](#modal) tab for arbitrary image folders, such as saved generation results.
 
 <br />
 
@@ -52,7 +53,7 @@ cd ../app && npm install
 
 Then add content:
 
-- Populate the folders in `api/networks/` with your files: `lora`, `checkpoints`, `embeddings`, `hypernets`, and `styles`.
+- Populate the folders in `api/networks/` with your files: `lora`, `checkpoints`, `embeddings`, `hypernets`, `styles`, 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***
@@ -89,16 +90,30 @@ ln -s ~/webui/styles.csv styles.csv
 Filenames following the suggested naming convention are ***optional***, but to get the full convivence of the Extra Network Browser, the following format is suggested:
 
 ``` ini
-name_v1_author [keyword1, keyword2] [keyword3, keyword4] (suggested model) {weight1-weight2} #tag1 #tag2.safetensors
+name_v1_author [keyword1, keyword2] [keyword3, keyword4] (suggested model) {weight1-weight2}.safetensors
 ```
 
-With matching files of the same name ending in **.jpeg** in the same folder, max height 336px.  *(Width is auto-cropped to center at 224px)*
+Or simply:
+```
+My-LoRA.safetensors
+```
+
+and a matching file of the same name ending in **.jpeg** (e.g. ```My-LoRA.jpeg```) in the same folder for the preview.  Max height is auto-sized to 336px, width is auto centered at a max 224px.
+
+#### Additional Images
 <a id="modal"></a>
-Saving additional images as `filename. (1).jpeg`, `filename. (2).jpeg` and so on will populate a modal gallery popup.  You can then navigate to the prev / next network card with the left / right arrow keys while the modal is open.
+*Option 1:*<br/>
+Saving additional images as `My-LoRA. (1).jpeg`, `My-LoRA. (2).jpeg` and so on will populate a modal gallery popup.  You can then navigate to the prev / next network card with the left / right arrow keys while the modal is open.
 
 To quickly rename a batch of images in this pattern in Windows, select multiple images, then rename them as `filename..jpeg` (two dots) -- windows will automatically add ` (1)`, ` (2)` and so on.
 
-Finally, add a `filename.txt` file in the same folder for a quick info modal.  Great for storing descriptions, notes, and sample prompts.  You can switch between the modal gallery and the modal notes with the up / down arrow keys while the modal is open.
+*Option 2:*<br/>
+Make additional subfolders with the same name as the model, and place .jpegs inside with any name you'd like.<br/>
+e.g. `api/networks/lora/My-LoRA/file123.jpg`
+
+Finally, you can add a `filename.txt` file in the same folder for a quick info modal.  Great for storing descriptions, notes, and sample prompts.  You can switch between the modal gallery and the modal notes with the up / down arrow keys while the modal is open.
+
+**Note: Use the full matching filename, minus extension, of the related model/item.**
 
 <br />
 
@@ -127,8 +142,8 @@ magick mogrify -format jpeg *.png
 <a id="keywords"></a>
 ### the LoRA / image pair:
 
-`api/networks/lora/example-lora_v1_johndoe [mylora] [anotherkeyword] (RevAnimated) {0.7-0.8} #style.safetensors`<br />
-`api/networks/lora/example-lora_v1_johndoe [mylora] [anotherkeyword] (RevAnimated) {0.7-0.8} #style.jpeg`
+`api/networks/lora/example-lora_v1_johndoe [mylora] [anotherkeyword] (RevAnimated) {0.7-0.8}.safetensors`<br />
+`api/networks/lora/example-lora_v1_johndoe [mylora] [anotherkeyword] (RevAnimated) {0.7-0.8}.jpeg`
 
 will copy to the clipboard:
 
@@ -144,13 +159,13 @@ If you choose to follow a different naming convention without keywords or weight
 <a id="weights"></a>
 ### Another example, Keywords with Weights:
 
-`api/networks/lora/example-lora_v1_johndoe [anotherlora, watercolor (medium), (awesome©️1.4}] [anotherkeyword] (RevAnimated) {1.0} #style.safetensors`
+`api/networks/lora/example-lora_v1_johndoe [anotherlora, watercolor (medium), (awesome©️1.4}] [anotherkeyword] (RevAnimated) {1.0}.safetensors`
 
-`api/networks/lora/example-lora_v1_johndoe [anotherlora, watercolor (medium), (awesome©️1.4}] [anotherkeyword] (RevAnimated) {1.0} #style.jpeg`
+`api/networks/lora/example-lora_v1_johndoe [anotherlora, watercolor (medium), (awesome©️1.4}] [anotherkeyword] (RevAnimated) {1.0}.jpeg`
 
 Will copy to the clipboard:
 
-`anotherlora, watercolor \(medium\), (awesome:1.4), anotherkeyword <lora:nother-lora_v1_johndoe [anotherlora, (awesome:1.4}] [anotherkeyword] (RevAnimated) {1.0} #style:1.0>`
+`anotherlora, watercolor \(medium\), (awesome:1.4), anotherkeyword <lora:nother-lora_v1_johndoe [anotherlora, (awesome:1.4}] [anotherkeyword] (RevAnimated) {1.0}:1.0>`
 
 Note the ( )'s are escaped as needed on non-weights, and ©️ is replaced by : (because : can't be in a filename).  I've found this very useful when dealing with keywords that have suggested weights.
 
@@ -211,6 +226,34 @@ In this example, your matching image files in `api/networks/styles` would be:
 `api/networks/styles/My-LoRA (John Doe) - Style 1.jpeg`<br/>
 `api/networks/styles/My-LoRA (John Doe) - Style 2.jpeg`
 
+---
+
+<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`.
+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
+```
+
+<a id="search"></a>
+## Advanced Search:
+Searching in field at the top will filter the results of the tab you are in: LoRAs / Models / Styles / Gallery, and etc.
+
+You can further drill-down to the *"additional images"* in the [modal gallery](#modal) using a **`>`** character followed by a filename found *inside* of one of the results
+
+Examples:
+```
+Watercolor          # Filters tab to Watercolor-Lora, Watercolor_v2, etc
+Watercolor > 2024   # Filters to individual images inside Watercolor-Lora, Watercolor_v2, etc with filenames containing "2024"
+>2024               # Filters to any filename containing '2024' in any LoRA/model/style/etc in the tab.
+```
+
 <br />
 
 ## Contributing

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('/gallery', express.static('networks/gallery'))
 
 // Endpoint to return images
 app.get('/images', (req, res) => {
@@ -65,72 +66,128 @@ app.get('/images', (req, res) => {
     // ********* GLOB *********
     // Everything else uses a GLOB
 
-    const pattern = searchTerm ? `*${searchTerm}*` : '*'
-    let ext = null
-    if (searchType == "lora" || searchType == "checkpoints") {
-      ext = "safetensors"
-    } else if (searchType == "embeddings" || searchType == "hypernets") {
-      ext = "(pt|safetensors)"
-    } else {
-      return res.status(400).send({
-        message: 'Invalid type requested.'
-      });
-    }
-    const files = fg.globSync([`networks/${searchType}/**/${pattern}.${ext}`], { dot: true, caseSensitiveMatch: false, stats: true })
-    images = files.map(file => {
-
-      // Expected filename example:
-      // "name1-name2_author [keyword1, keyword2] [keyword3, keyword4] (model) {weight1-weight2} #tag1 #tag2.jpeg"
-
-      let filematch = file.name.match(/(.*)\.(safetensors|ckpt|pt|bin)$/)
-      filename = filematch ? filematch[1] + "." + imgExt : ""
-      let noext = filematch ? filematch[1] : ""
-      let words = noext.split(' ')
-      let path = file.path.replace(file.name, '').replace('networks/', '').toLowerCase()
-      let name =  noext.match(/^(.*)_([0-9a-zA-Z]+)\s/)
-      name = name ? name[1] : null
-      let author = noext.match(/_([0-9a-zA-Z]+)\s/)
-      author = author ? author[1] : null
-      let hashtagWords = words.filter(word => word.startsWith("#"))
-      let tags = hashtagWords.map(word => word.slice(1))
-      let weight = noext.match(/{(?:[0-9]*\.?[0-9]+\s?-)?([0-9]*\.?[0-9]+)}/)
-      weight = weight ? weight[1] : "1.0"
-
-      let keywords = filename.match(/\[(.*)\]/)
-      if (keywords) {
-        keywords = keywords[1]
-        keywords = keywords.replaceAll(/©️/g, ':')
-        keywords = keywords.replaceAll(/≻/g, '>')
-        keywords = keywords.replaceAll(/≺/g, '<')
-        keywords = keywords.replaceAll(/(\w+?) \((\w+?)\)/gi, '$1 \\($2\\)')
-        keywords = keywords.replaceAll('[', '')
-        keywords = keywords.replaceAll(']', ', ')
+    if (searchType == "gallery") {
+      // Gallery searches for a list of folders rather than a list of models.
+
+      let pattern = ''
+      let extraPattern = ''
+      let _onlyDirectories = true
+
+      if (searchTerm) {
+        if (searchTerm.split(">").length > 1) {
+          pattern = searchTerm.split(">")[0] ? `*${searchTerm.split(">")[0]}*` : '*'
+          extraPattern = '/' + (searchTerm.split(">")[1] ? `*${searchTerm.split(">")[1]}*` : '*')
+          _onlyDirectories = false
+        } else {
+          pattern = `*${searchTerm}*`
+        }
+      } else {
+        pattern = '*'
       }
 
-      let prompt = null
-      if (searchType == "lora") {
-        prompt = `${keywords ? keywords+" " : ""}<lora:${noext}:${weight}>`
-      } else if (searchType == "hypernets") {
-        prompt = `${keywords ? keywords+" " : ""}<hypernet:${noext}:${weight}>`
+      const files = fg.globSync([`networks/${searchType}/**/${pattern}${extraPattern}`], { onlyDirectories: _onlyDirectories, dot: true, caseSensitiveMatch: false, stats: true })
+
+      images = files.map(file => {
+        // Expected filename example:
+        // "name1-name2_author [keyword1, keyword2] [keyword3, keyword4] (model) {weight1-weight2} #tag1 #tag2.jpeg"
+
+        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
+        return {
+          filename: filename,
+          path: path,
+        }
+      })
+      res.json(images)
+
+    } else {
+      let ext = null
+      if (searchType == "lora" || searchType == "checkpoints") {
+        ext = "safetensors"
+      } else if (searchType == "embeddings" || searchType == "hypernets") {
+        ext = "(pt|safetensors)"
       } else {
-        prompt = noext
+        return res.status(400).send({
+          message: 'Invalid type requested.'
+        });
       }
 
-      // This return is for the files map
-      return {
-        filename: filename,
-        path: path,
-        name: name,
-        author: author,
-        tags: tags,
-        keywords: keywords,
-        weight: weight,
-        prompt: prompt,
-        mtimeMs: file.stats.mtimeMs,
-        mtime: file.stats.mtime,
+      let pattern = ''
+      let extraPattern = ''
+
+      if (searchTerm) {
+        if (searchTerm.split(">").length > 1) {
+          pattern = searchTerm.split(">")[0] ? `*${searchTerm.split(">")[0]}*` : '*'
+          extraPattern = '/' + (searchTerm.split(">")[1] ? `*${searchTerm.split(">")[1]}*` : '*')
+        } else {
+          pattern = `*${searchTerm}*`
+          extraPattern = "." + ext
+        }
+      } else {
+        pattern = '*'
+        extraPattern = "." + ext
       }
-    })
-    res.json(images)
+
+      const files = fg.globSync([`networks/${searchType}/**/${pattern}${extraPattern}`], { dot: true, caseSensitiveMatch: false, stats: true })
+
+      images = files.map(file => {
+        // Expected filename example:
+        // "name1-name2_author [keyword1, keyword2] [keyword3, keyword4] (model) {weight1-weight2} #tag1 #tag2.jpeg"
+
+        let filematch = file.name.match(/(.*)\.(.*?)$/)
+        let filename = filematch ? filematch[1] + "." + imgExt : ""
+        let noext = filematch ? filematch[1] : ""
+        let words = noext.split(' ')
+        let path = file.path.replace(file.name, '').replace('networks/', '').toLowerCase()
+        let name =  noext.match(/^(.*)_([0-9a-zA-Z]+)\s/)
+        name = name ? name[1] : null
+        let author = noext.match(/_([0-9a-zA-Z]+)\s/)
+        author = author ? author[1] : null
+        let hashtagWords = words.filter(word => word.startsWith("#"))
+        let tags = hashtagWords.map(word => word.slice(1))
+        let weight = noext.match(/{(?:[0-9]*\.?[0-9]+\s?-)?([0-9]*\.?[0-9]+)}/)
+        weight = weight ? weight[1] : "1.0"
+
+        let keywords = filename.match(/\[(.*)\]/)
+        if (keywords) {
+          keywords = keywords[1]
+          keywords = keywords.replaceAll(/©️/g, ':')
+          keywords = keywords.replaceAll(/≻/g, '>')
+          keywords = keywords.replaceAll(/≺/g, '<')
+          keywords = keywords.replaceAll(/(\w+?) \((\w+?)\)/gi, '$1 \\($2\\)')
+          keywords = keywords.replaceAll('[', '')
+          keywords = keywords.replaceAll(']', ', ')
+        }
+
+        let prompt = null
+        if (searchType == "lora") {
+          prompt = `${keywords ? keywords+" " : ""}<lora:${noext}:${weight}>`
+        } else if (searchType == "hypernets") {
+          prompt = `${keywords ? keywords+" " : ""}<hypernet:${noext}:${weight}>`
+        } else {
+          prompt = noext
+        }
+
+        // This return only for files.map
+        return {
+          filename: filename,
+          path: path,
+          name: name,
+          author: author,
+          tags: tags,
+          keywords: keywords,
+          weight: weight,
+          prompt: prompt,
+          mtimeMs: file.stats.mtimeMs,
+          mtime: file.stats.mtime,
+        }
+      })
+
+      res.json(images)
+    }
+
   }
 })
 
@@ -141,24 +198,28 @@ app.get('/moreImages', (req, res) => {
     message: 'Missing query.'
   });
 
-  const noext = search.replace('.' + imgExt, '')
-    .replaceAll('$','\\$')
+  // Chars like {} break the glob search if unescaped.
+  const filteredSearch = search.replaceAll('$','\\$')
     .replaceAll('^','\\^')
-    .replaceAll('+','\\+')
     .replaceAll('?','\\?')
     .replaceAll('(','\\(')
     .replaceAll(')','\\)')
     .replaceAll('[','\\[')
     .replaceAll(']','\\]')
     .replaceAll('{','\\{')
     .replaceAll('}','\\}')
-  const query = `networks/${noext}(.*|).${imgExt}`
-  const files = fg.globSync([query], { dot: true, caseSensitiveMatch: false, stats: true })
+
+  const noext = filteredSearch.substring(filteredSearch.lastIndexOf('/') + 1).replace('.' + imgExt, '')
+  const searchPath = filteredSearch.substring(0, filteredSearch.lastIndexOf('/'))
+
+  const query = `networks/${searchPath}/${noext}(.*|).${imgExt}`
+  const queryFolder = `networks/${searchPath}/${noext}/*.${imgExt}`
+  const files = fg.globSync([query, queryFolder], { dot: true, caseSensitiveMatch: false, stats: true })
 
   const images = files.map(file => {
-    const path = file.path.replace(file.name, '').replace('networks/', '').toLowerCase()
+  const path = file.path.replace(file.name, '').replace('networks/', '').toLowerCase()
 
-    // This return is for the files map
+    // This return is only for files.map
     return {
       filename: file.name,
       path: path,

api/networks/init.bat

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

app/src/GetImages.jsx

@@ -223,6 +223,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="Gallery" className={`typeOption ${type == "gallery" ? "highlight" : ""}`} onClick={() => handleTypeChange("gallery")}>G</span>
 					</div>
 					<input id="imgSearch" icon='search' placeholder='Search...'
 						onChange={handleSearchInputChange}
@@ -260,7 +261,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 + encodeURIComponent(image.filename)}
+										src={"http://localhost:3000/" + image.path.replace('#','%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 + encodeURIComponent(props.filename)}
+				src={"http://localhost:3000/" + props.path.replace('#','%23') + encodeURIComponent(props.filename)}
 				loading={props.index <= 60 ? "eager" : "lazy"}
 				title={props.path + props.filename}
 			/>

update.bat

@@ -5,6 +5,7 @@ git pull
 cd %~dp0api && call npm install --no-audit
 cd %~dp0app && call npm install --no-audit
 cd %~dp0app && call npm run build
+cd %~dp0api/networks && call init.bat
 cd %~dp0
 echo Update complete.
 echo Run start.bat to begin.