Continued work on UI and sample inputs

Author: mcmonkey4eva

Diff for: README.md

@@ -36,7 +36,7 @@ TODO
 - Open the WebUI
 - Go to the `txt2img` or `img2img` tab
 - At the bottom of the page, find the `Script` selection box, and select `Generate Infinite-Axis Grid`
-- Select options at will. You can hover over each option for extra usage information.
+- Select options at will. You can hover your mouse over each option for extra usage information.
 - Select your grid definition file from earlier.
 - Hit your `Generate` button, and wait.
 

Diff for: assets/short_example.yml

@@ -0,0 +1,69 @@
+# This is a YAML file, so all content must be configured per YAML specification.
+
+# This key is required configuration of the grid itself.
+grid:
+    # Give a page title
+    title: My Short Example Grid
+    # Give a page description
+    description: >
+                 This is to demonstrate the concept of how the infinite-axis grid system works.
+                 This description here demonstrates multi-line YAML strings.
+                 <br>It also shows that you can write <b>HTML</b> if you want to.
+
+# "axes" is the root key of the list of axes
+axes:
+    # Simply number these keys.
+    # The key names are ignored and just used to organize the file, so feel free to put random values here instead if you want to I guess.
+    1:
+        # Name your axis.
+        name: Sampler
+        # Add any description text you want.
+        description: Different samplers can produce slightly different output.
+        # "values" is where the options go
+        values:
+            # Again, number the keys.
+            1:
+                # As usual, name and optional description.
+                name: Euler A
+                description: Euler Ancestral is like Euler, but with <b>ancestral</b> stuff.
+                # You can configure multiple parameter settings arbitrarily here.
+                params:
+                    # View the readme for accepted parameter types and formats.
+                    Sampler: Euler A
+            2:
+                name: Euler
+                description: Good ol k_euler.
+                params:
+                    Sampler: Euler
+            3:
+                name: DDIM
+                description: The original.
+                params:
+                    Sampler: DDIM
+    2:
+        name: Steps
+        description: How many times to run the sampler.
+        values:
+            1:
+                name: 10
+                description: Ten times.
+                params:
+                    Steps: 10
+            # You can be lazy too. This will set param 'steps' to '15' and set name to '15'.
+            2: steps=15
+            3: steps=20
+    3:
+        name: CFG Scale
+        values:
+            1: CFG scale=3
+            2: CFG scale=5
+            3: CFG scale=7
+            4: CFG scale=9
+            5: CFG scale=11
+    4:
+        name: Seed
+        values:
+            1: seed=1
+            2: seed=2
+            3: seed=3
+

Diff for: javascript/infinity_grid.js

@@ -16,7 +16,8 @@ ex_titles = titles;
 
 new_titles = {
     "Save Grid Images As JPEG": "If checked, images in the infinity grid will be simple JPEG files. These use less space, but will be missing metadata. If unchecked, images will be PNG files, which have metadata or other custom settings, at the cost of using much more filespace.",
-    "Select grid definition file": "Select the grid definition yaml file, in your '(extension)/assets' folder. Refer to the README for info."
+    "Select grid definition file": "Select the grid definition yaml file, in your '(extension)/assets' folder. Refer to the README for info.",
+    "Overwrite existing images (for updating grids)": "If checked, any existing image files will be overwritten - this is useful if you want to redo the grid with completely different base settings. If unchecked, if an image already exists, it will be skipped - this is useful for adding new options to an existing grid."
 }
 
 ex_titles = Object.assign({}, ex_titles, new_titles);

Diff for: scripts/infinity_grid.py

@@ -20,31 +20,46 @@
 from modules.processing import Processed
 from modules.shared import opts, cmd_opts, state
 
+refresh_symbol = '\U0001f504'  # 🔄
 INF_GRID_README = "https://github.com/mcmonkeyprojects/sd-infinity-grid-generator-script"
 
 class GridFileHelper:
 
     def getNameList():
-        return glob.glob(scripts.basedir() + "/assets/*.yml")
+        relPath = os.path.join(Script.BASEDIR, "assets")
+        fileList = glob.glob(relPath + "/*.yml")
+        justFileNames = list(map(lambda f: os.path.relpath(f, relPath), fileList))
+        print(f"rel {relPath} files {fileList} justName {justFileNames}")
+        return justFileNames
 
 class Script(scripts.Script):
 
+    BASEDIR = scripts.basedir()
+
     def title(self):
         return "Generate Infinite-Axis Grid"
 
     def show(self, is_img2img):
         return True
 
-
     def ui(self, is_img2img):
-        help_info = gr.Label(label=f"Confused/new? View <a href=\"{INF_GRID_README}\">the README</a> for usage instructions.")
+        help_info = gr.HTML(value=f"<br>Confused/new? View <a style=\"border-bottom: 1px #00ffff dotted;\" href=\"{INF_GRID_README}\">the README</a> for usage instructions.<br><br>")
         use_jpg = gr.Checkbox(value=True, label="Save Grid Images As JPEG")
-        grid_file = gr.Dropdown(value=None,label="Select grid definition file", choices=GridFileHelper.getNameList())
+        do_overwrite = gr.Checkbox(value=False, label="Overwrite existing images (for updating grids)")
+        # Maintain our own refreshable list of yaml files, to avoid all the oddities of other scripts demanding you drag files and whatever
+        # Refresh code based roughly on how the base WebUI does refreshing of model files and all
+        with gr.Row():
+            grid_file = gr.Dropdown(value=None,label="Select grid definition file", choices=GridFileHelper.getNameList())
+            def refresh():
+                newChoices = GridFileHelper.getNameList()
+                grid_file.choices = newChoices
+                return gr.update(choices=newChoices)
+            refresh_button = gr.Button(value=refresh_symbol, elem_id="infinity_grid_refresh_button")
+            refresh_button.click(fn=refresh, inputs=[], outputs=[grid_file])
         # TODO
-        return [help_info, use_jpg, grid_file]
-
+        return [help_info, use_jpg, do_overwrite, grid_file, refresh_button]
 
-    def run(self, p, use_jpg, grid_file):
+    def run(self, p, help_info, use_jpg, do_overwrite, grid_file, refresh_button):
         # TODO
         proc = process_images(p)
         return proc

Diff for: style.css

@@ -0,0 +1,9 @@
+/**
+ * This file is part of Stable Diffusion Infinity Grid Generator, view the README.md for more information.
+ */
+
+#infinity_grid_refresh_button {
+    max-width: 2.5em;
+    min-width: 2.5em;
+    height: 2.4em;
+}