Allow using video for ControlNet for target type image

src/BuiltinExtensions/ComfyUIBackend/WorkflowGeneratorSteps.cs

@@ -1081,14 +1081,22 @@ bool getBestFor(string phrase)
                     {
                         JArray preprocActual = g.CreatePreprocessor(preprocessor, imageNodeActual);
                         g.NodeHelpers["controlnet_preprocessor"] = $"{preprocActual[0]}";
+                        imageNodeActual = imageNodeActual.WithPath(preprocActual);
+                        string multipleOf8 = g.CreateNode("ResizeImageMaskNode", new JObject()
+                        {
+                            ["input"] = imageNodeActual.Path,
+                            ["resize_type"] = "scale to multiple",
+                            ["resize_type.multiple"] = 8,
+                            ["scale_method"] = "lanczos"
+                        });
+                        imageNodeActual = imageNodeActual.WithPath([multipleOf8, 0]);
                         if (g.UserInput.Get(T2IParamTypes.ControlNetPreviewOnly))
                         {
-                            g.CurrentMedia = imageNodeActual.WithPath(preprocActual);
+                            g.CurrentMedia = imageNodeActual;
                             g.CurrentMedia.SaveOutput(g.CurrentVae, g.CurrentAudioVae, id: "9");
                             g.SkipFurtherSteps = true;
                             return;
                         }
-                        imageNodeActual = imageNodeActual.WithPath(preprocActual);
                     }
                     else if (g.UserInput.Get(T2IParamTypes.ControlNetPreviewOnly))
                     {
@@ -1098,6 +1106,16 @@ bool getBestFor(string phrase)
                     {
                         throw new SwarmUserErrorException("Cannot use ControlNet without a model selected.");
                     }
+                    if (imageNodeActual.DataType == WGNodeData.DT_VIDEO && !g.IsVideoModel())
+                    {
+                        string singleFrame = g.CreateNode("ImageFromBatch", new JObject()
+                        {
+                            ["image"] = imageNodeActual.Path,
+                            ["batch_index"] = 0,
+                            ["length"] = 1
+                        });
+                        imageNodeActual = imageNodeActual.WithPath([singleFrame, 0], WGNodeData.DT_IMAGE);
+                    }
                     if (controlModel.ModelClass?.ID?.EndsWith("/control-diffpatch") ?? false)
                     {
                         string modelPatchLoader = g.CreateNode("ModelPatchLoader", new JObject()

src/wwwroot/css/genpage.css

@@ -1218,7 +1218,7 @@ body {
     height: 2px;
     background-color: var(--green);
 }
-.controlnet-preview-result img {
+.controlnet-preview-result img, .controlnet-preview-result video {
     max-width: 200px;
     max-height: 200px;
     margin-left: 2rem;

src/wwwroot/js/genpage/gentab/params.js

@@ -1490,10 +1490,25 @@ function controlnetShowPreview() {
             if (!data.image) {
                 return;
             }
-            let imgElem = document.createElement('img');
-            imgElem.src = data.image;
             let resultBox = createDiv(null, 'controlnet-preview-result');
-            resultBox.append(imgElem);
+            let isVideo = isVideoExt(data.image);
+            if (isVideo) {
+                let vidElem = document.createElement('video');
+                vidElem.loop = true;
+                vidElem.autoplay = true;
+                vidElem.muted = true;
+                vidElem.controls = true;
+                let sourceObj = document.createElement('source');
+                sourceObj.src = data.image;
+                sourceObj.type = isVideo;
+                vidElem.append(sourceObj);
+                resultBox.append(vidElem);
+            }
+            else {
+                let imgElem = document.createElement('img');
+                imgElem.src = data.image;
+                resultBox.append(imgElem);
+            }
             clearPreview();
             previewArea.append(resultBox);
         });