first commit

2024-03-29 21:30:45 +08:00
commit 4e5ea088fb
33 changed files with 6365 additions and 0 deletions
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 zombieyang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,328 @@
+from server import PromptServer
+from aiohttp import web, WSMsgType
+import json
+import asyncio
+import threading
+import torch
+from io import BytesIO
+import numpy as np
+from PIL import Image, ImageFilter, ImageOps, ImageSequence
+from nodes import LoadImage
+
+class WSCallsManager:
+    ws = None
+    def __init__(self, ws):
+        self.calls = dict()
+        self.call_id = 0
+        self.ws = ws
+    
+    async def call(self, action, params, timeout=5):
+        self.call_id += 1
+        payload = {
+            'call_id': self.call_id,
+            'action': action,
+            'params': params
+        }
+        call = self.calls[self.call_id] = asyncio.Future()
+        
+        await self.ws.send_str(json.dumps(payload))
+        start_time = asyncio.get_event_loop().time()
+        while (call.done() == False):
+            if (asyncio.get_event_loop().time() - start_time > timeout):
+                call.cancel()
+                raise ValueError('call timed out')
+            await asyncio.sleep(0.1)    
+        return call.result()
+    
+    def handle_call(self, call_id, result=None, error=None):
+        call = self._get_call_and_remove(call_id)
+        if (call.cancelled()):
+            return
+        
+        if (error is not None):
+            call.set_exception(ValueError(error))
+        else:
+            call.set_result(result)
+    
+    def _get_call_and_remove(self, call_id):
+        call = self.calls.get(call_id, None)
+        if call is not None:
+            self.calls.pop(call_id)
+        else:
+            raise ValueError(f'call {call_id} not found')
+        return call
+    
+
+class PhotoshopInstance:
+    instance = None
+    
+    def __init__(self, ws):
+        PhotoshopInstance.instance = self
+        self.wsCallsManager = WSCallsManager(ws)
+        self.destroyed = False
+        self.layers = []
+        
+    async def poll_layers(self):
+        await asyncio.sleep(1)
+        while (self.destroyed == False and self.wsCallsManager.ws.closed == False):
+            try:
+                print('start poll layers')
+                self.layers = await self.get_layers()
+                print('layers done')
+            except Exception as e:
+                await asyncio.sleep(3)
+            finally:
+                await asyncio.sleep(1)
+
+    async def run_server_loop(self):
+        print('Photoshop Connected')
+        
+        threading.Thread(target=lambda: asyncio.run(self.poll_layers())).start()
+        try:
+            async for msg in self.wsCallsManager.ws:
+                if (self.destroyed): break
+                                                                                                     
+                if msg.type == WSMsgType.TEXT:
+                    payload = json.loads(msg.data)
+                    
+                    if 'call_id' in payload:
+                        call_id = payload['call_id']
+                        if 'error' in payload:
+                            self.wsCallsManager.handle_call(call_id, error=payload['error'])
+                        elif 'result' in payload:
+                            self.wsCallsManager.handle_call(call_id, result=payload['result'])
+                        else:
+                            await self.wsCallsManager.ws.send_str(json.dumps({ call_id: call_id, 'error': 'result not found in payload'}))
+                    else: 
+                        await self.wsCallsManager.ws.send_str(json.dumps({ 'error': 'call_id not found in payload'}))
+                        
+                elif msg.type == WSMsgType.ERROR:
+                    print('ws connection closed with exception %s' % self.wsCallsManager.ws.exception())
+                    
+                else:
+                    await self.wsCallsManager.ws.send_str('invalid msg type')
+        finally:
+            print('Photoshop Disconnected')
+            PhotoshopInstance.instance = None
+            
+    async def get_layers(self):
+        result = await self.wsCallsManager.call('get_layers', {})
+        layers = result['layers']                           
+        return layers
+        
+    async def get_image(self, layer_id):
+        result = await self.wsCallsManager.call('get_image', {'layer_id': layer_id}, timeout=60)
+        id = result['upload_name']
+        return id
+    
+    async def send_images(self, image_ids):
+        result = await self.wsCallsManager.call('send_images', {'image_ids': image_ids})
+        return result
+            
+    async def destroy(self):
+        await self.wsCallsManager.ws.close()
+        self.destroyed = True
+    
+class ImageCache:
+    data = dict()
+    image_id_inc = 0
+    
+@PromptServer.instance.routes.get('/finished_images')
+async def download_handler(request):
+    try:
+        image_id = request.query.get('id')
+        if (image_id is None):
+            return web.json_response({
+                'error': 'id is required'
+            })
+        
+        image_id = int(image_id)
+        if (image_id not in ImageCache.data):
+            return web.json_response({
+                'error': 'image not found'
+            })
+        
+        image = ImageCache.data[image_id]
+        ImageCache.data.pop(image_id)
+        # image = image.tobytes()
+        
+        stream = BytesIO()
+        image.save(stream, "PNG")
+        
+        return web.Response(body=stream.getvalue(), content_type='image/png')
+    except Exception as e:
+        print('=============error============', e)
+        return web.json_response({
+            'error': str(e)
+        })
+    
+# @PromptServer.instance.routes.post('/photoshop_upload')
+# async def upload_handler(request):
+#     try:
+#         start_time = asyncio.get_event_loop().time()
+#         pixels = await request.read()
+#         print('readed pixels in ' + str(asyncio.get_event_loop().time() - start_time) + ' s')
+#         # get url param 'width'
+#         width = int(request.query.get('width'))
+#         if (width == 0 or width is None):
+#             return web.json_response({
+#                 'error': 'width is required'
+#             })
+        
+        
+#         pixels = [x for x in pixels]
+#         arr = np.array(pixels, dtype=np.uint8)
+#         arr = np.reshape(arr, (-1, width, 4))
+#         image = Image.fromarray(arr)
+#         # print(f'Parsed image width: {image.width}, height: {image.height} in {asyncio.get_event_loop().time() - start_time} ms')
+        
+#         image = image.convert("RGB")
+#         image = np.array(image).astype(np.float32) / 255.0
+#         image = torch.from_numpy(image)[None,]
+#         # print(f'image to latent in {asyncio.get_event_loop().time() - start_time} ms')
+        
+#         global image_id_inc
+#         image_id_inc += 1
+#         ImageCache.data[image_id_inc] = image
+        
+#     except Exception as e:
+#         return web.json_response({
+#             'error': str(e)
+#         })
+    
+#     return web.json_response({
+#         'name': image_id_inc
+#     })
+
+@PromptServer.instance.routes.get('/photoshop_instance')
+async def websocket_handler(request):
+    # get version from query
+    print('try connect: ' + str(request.query))
+    version = int(request.query.get('version', 0))
+    EXPECTED_VERSION = 1
+    
+    if (version is not EXPECTED_VERSION):
+        if (version == 0):
+            return web.json_response({ 
+                'error': f'version is not provided.',
+            })
+        else:
+            return web.json_response({ 
+                'error': f'version {version} not supported.',
+            })
+        
+    if (PhotoshopInstance.instance is not None):
+        # return web.json_response({ 
+        #     'error': 'only one instance of Photoshop is allowed at a time. Please close the current instance first.',
+        # })
+        print('destroying previous instance')
+        await PhotoshopInstance.instance.destroy()
+    ws = web.WebSocketResponse()
+    await ws.prepare(request)
+    
+    PhotoshopInstance(ws)
+    await PhotoshopInstance.instance.run_server_loop()
+
+class GetImageFromPhotoshopLayerNode:
+    @classmethod
+    def VALIDATE_INPUTS(s, layer):
+        if (PhotoshopInstance.instance is None):
+            return 'Photoshop is not connected'
+        return True
+    
+    @classmethod
+    def IS_CHANGED(s, layer):
+        return np.random.rand()
+    
+    @classmethod
+    def INPUT_TYPES(cls):
+        if (PhotoshopInstance.instance is None):
+            layer_strs = []
+        else:
+            layer_strs = list(map(lambda layer: 
+                f"{layer['name']} (id:{layer['id']})"
+            , PhotoshopInstance.instance.layers))
+            
+        return {
+            "required": {
+                "layer": (layer_strs, ),
+            }
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    RETURN_NAMES = ("image_out",)
+    FUNCTION = "get_image"
+    CATEGORY = "Photoshop"
+
+    def get_image(self, layer):
+        if (PhotoshopInstance.instance is None):
+            raise ValueError('Photoshop is not connected')
+        
+        layer_name_and_id_split = layer.split('(id:')
+        id = int(layer_name_and_id_split.pop().strip()[:-1])
+        image_id = _invoke_async(PhotoshopInstance.instance.get_image(layer_id=id))
+        
+        loadImage = LoadImage()
+        (output_image, output_mask) = loadImage.load_image(image_id)
+        
+        # image_out = ImageCache.data[id]
+        # ImageCache.data.pop(id)
+        
+        return (output_image,)
+    
+class SendImageToPhotoshopLayerNode:
+    @classmethod
+    def VALIDATE_INPUTS(s, images):
+        if (PhotoshopInstance.instance is None):
+            return 'Photoshop is not connected'
+        return True
+    
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "images": ("IMAGE", )
+            }
+        }
+
+    RETURN_TYPES = ()
+    FUNCTION = "send_image"
+    CATEGORY = "Photoshop"
+    OUTPUT_NODE = True
+
+    def send_image(self, images):
+        if (PhotoshopInstance.instance is None):
+            raise ValueError('Photoshop is not connected')
+        
+        ret = []
+        for (batch_number, image) in enumerate(images):
+            i = 255. * image.cpu().numpy()
+            img = Image.fromarray(np.clip(i, 0, 255).astype(np.uint8))
+            ImageCache.image_id_inc += 1
+            image_id = ImageCache.image_id_inc
+            ImageCache.data[image_id] = img
+            ret.append(image_id)
+        
+        threading.Thread(target=lambda: asyncio.run(PhotoshopInstance.instance.send_images(image_ids=ret))).start()
+        return (None,)
+
+loop = None
+def _invoke_async(call):
+    loop = asyncio.new_event_loop()
+    asyncio.set_event_loop(loop)
+    task = loop.create_task(call)
+    loop.run_until_complete(task)
+    result = task.result()
+    loop.close()
+    return result
+
+NODE_CLASS_MAPPINGS = { 
+    'Get Image From Photoshop Layer': GetImageFromPhotoshopLayerNode,
+    'Send Images To Photoshop': SendImageToPhotoshopLayerNode 
+}
+NODE_DISPLAY_NAME_MAPPINGS = { 
+    'Get Image From Photoshop Layer': 'Get image from Photoshop layer',
+    'Send Images To Photoshop': 'Send images to Photoshop' 
+}
+WEB_DIRECTORY = 'plugins'
+__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS', 'WEB_DIRECTORY']
@@ -0,0 +1,2 @@
+node_modules
+dist
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
@@ -0,0 +1,50 @@
+# React Starter Plugin
+
+This plugin is a good place to get started when building a Photoshop plugin using React. It comes defined with all the dependencies that you'll need to get started. As this is a React project, you'll need to do some initial configuration before this will be usable in Photoshop.
+
+## Install dependencies
+
+First, make sure that `npm` is installed on your system.
+
+After you ensure that your terminal is in the root of this project, use `npm` to install the various dependencies needed:
+
+```
+npm install
+```
+
+<b>Optional</b></br> 
+If you prefer to use `yarn`, after you generate the `package-lock.json` file you can run the following line to import dependencies to a `yarn.lock` file: 
+```
+yarn import
+```
+
+## Build Process
+
+There are two ways to build the plugin for use in Photoshop:
+
+* `yarn watch` (or `npm run watch`) will build a development version of the plugin, and recompile every time you make a change to the source files. The result is placed in `dist` folder. Make sure your plugin is in watch mode in UDT app.
+* `yarn build` (or `npm run build`) will build a production version of the plugin and place it in `dist` folder. It will not update every time you make a change to the source files.
+
+> You **must** run either `watch` or `build` prior to trying to use within Photoshop!
+
+## Launching in Photoshop
+
+You can use the UXP Developer Tools to load the plugin into Photoshop.
+
+If the plugin hasn't already been added to your workspace in the UXP Developer Tools, you can add it by clicking "Add Plugin...". You can either add the `manifest.json` file in the `dist` folder or the `plugin` folder.
+* If you add the one in the `plugin` folder, then you need to update the relative path to the plugin build folder ( `dist` ) by clicking the ••• button > "Options" > "Advanced" > "Plugin build folder".
+* During development, it is recommended to build the plugin using `yarn watch` and load the `manifest.json` in the (plugin build) `dist` folder. 
+
+Once added, you can load it into Photoshop by clicking the ••• button on the corresponding row, and clicking "Load". Switch to Photoshop and you should see the starter panels.
+
+## What this plugin does
+
+This plugin doesn't do much, but does illustrate how to create two panels in Photoshop with `entrypoints.setup`, and how to create flyout menus. It also demonstrates the use of several Spectrum UXP widgets to create a simple color picker in the primary panel.
+
+### Common Issues 
+
+* If you're getting errors with `npm install`, we can reinstall the project dependencies. Let's first make sure to delete `node_modules/*` from the `template` folder as well as the `package-lock.json` and `yarn.lock` file. Staying in the `template` directory, run `npm install` again and this will regenerate your `package-lock.json` file.
+* After running `yarn import` if you end up with the error `Lockfile already exists, not importing.`, then it is likely due to an already existing `yarn.lock` in your project. In such a case, you can either delete the lock file to generate a new `yarn.lock` or continue with the [Build Process](#build-process) steps.
+
+PS Version : 23.2.0 or higher
+UXP Version : 5.6 or higher
@@ -0,0 +1,37 @@
+{
+  "name": "com.adobe.uxp.starter.react",
+  "version": "1.0.0",
+  "scripts": {
+    "watch": "nodemon -w src -e js,jsx,json,css,html -w webpack.config.js -x npm run build",
+    "build": "webpack --mode development",
+    "uxp:load": "cd dist && uxp plugin load",
+    "uxp:reload": "cd dist && uxp plugin reload",
+    "uxp:watch": "cd dist && nodemon --exec \"uxp plugin reload\" -e js,css,html",
+    "uxp:debug": "cd dist && uxp plugin debug"
+  },
+  "author": "Adobe Inc",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@babel/core": "^7.8.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+    "@babel/plugin-syntax-class-properties": "^7.10.4",
+    "@babel/plugin-transform-react-jsx": "^7.8.3",
+    "babel-loader": "^8.0.6",
+    "clean-webpack-plugin": "^2.0.2",
+    "copy-webpack-plugin": "^5.0.3",
+    "css-loader": "^6.8.1",
+    "file-loader": "^5.1.0",
+    "nodemon": "^2.0.7",
+    "style-loader": "^1.1.3",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "jimp": "^0.22.12",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "resolutions": {
+    "acorn": "npm:acorn-with-stage3"
+  }
+}
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script>
+    global.screen={};
+    window.WebSocket.prototype.OPEN = 1;
+  </script>
+  <script src="index.js"></script>    
+</head>
+<body>
+</body>
+</html>
@@ -0,0 +1,128 @@
+{
+  "id": "sd-ppp",
+  "name": "SD-PPP",
+  "version": "1.0.0",
+  "main": "index.html",
+  "manifestVersion": 5,
+  "host": [
+    {
+      "app": "PS",
+      "minVersion": "25.4.0"
+    }
+  ],
+  "requiredPermissions": {
+    "network": {
+        "domains": "all"
+    },
+    "allowCodeGenerationFromStrings": true,
+    "launchProcess": {
+      "schemes": [
+        "http",
+        "https"
+      ],
+      "extensions": [
+        ".svg",
+        ".png"
+      ]
+    },
+    "webview": {
+      "allow": "yes",
+      "domains": [
+        "https://*.adobe.com"
+      ]
+    }
+  },
+  "entrypoints": [
+    {
+      "type": "panel",
+      "id": "comfy-connect",
+      "label": {
+        "default": "Connect ComfyUI"
+      },
+      "minimumSize": {
+        "width": 300,
+        "height": 100
+      },
+      "maximumSize": {
+        "width": 400,
+        "height": 100
+      },
+      "preferredDockedSize": {
+        "width": 300,
+        "height": 100
+      },
+      "preferredFloatingSize": {
+        "width": 300,
+        "height": 100
+      },
+      "icons": [
+        {
+          "width": 32,
+          "height": 32,
+          "path": "icons/icon_D.png",
+          "scale": [
+            1,
+            2
+          ],
+          "theme": [
+            "dark",
+            "darkest"
+          ],
+          "species": [
+            "generic"
+          ]
+        },
+        {
+          "width": 32,
+          "height": 32,
+          "path": "icons/icon_N.png",
+          "scale": [
+            1,
+            2
+          ],
+          "theme": [
+            "lightest",
+            "light"
+          ],
+          "species": [
+            "generic"
+          ]
+        }
+      ]
+    }
+  ],
+  "icons": [
+    {
+      "width": 32,
+      "height": 32,
+      "path": "icons/icon_D.png",
+      "scale": [
+        1,
+        2
+      ],
+      "theme": [
+        "dark",
+        "darkest"
+      ],
+      "species": [
+        "generic"
+      ]
+    },
+    {
+      "width": 32,
+      "height": 32,
+      "path": "icons/icon_N.png",
+      "scale": [
+        1,
+        2
+      ],
+      "theme": [
+        "lightest",
+        "light"
+      ],
+      "species": [
+        "generic"
+      ]
+    }
+  ]
+}
@@ -0,0 +1,76 @@
+.aboutDialog sp-heading {
+    margin-top: 0;
+}
+.aboutDialog sp-divider {
+    margin: 8px 0;
+}
+
+.aboutDialog sp-button-group {
+    margin: 16px 0 0 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+.aboutDialog sp-button-group > * {
+    margin: 0 8px;
+}
+
+.aboutDialog sp-button-group > *:first-child {
+    margin-left: 0;
+}
+
+.aboutDialog sp-button-group > *:last-child {
+    margin-right: 0;
+}
+
+.aboutDialog .well {
+    border-radius: 8px;
+    width: 100%;
+    background-color: #095aba;
+    padding: 16px;
+    padding-left: 44px;
+    position: relative;
+    color: #e1e1e1;
+}
+
+.aboutDialog .well sp-icon {
+    position: absolute;
+    top: 18px;
+    left: 16px;
+}
+
+.aboutDialog .table {
+    display: flex;
+    flex-direction: column;
+    background-color: #00000025;
+    padding: 16px;
+    border-radius: 4px;
+}
+
+.aboutDialog .table div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    height: 20px;
+    border-radius: 2px;
+}
+
+.aboutDialog .table div:nth-child(odd) {
+    background-color: #00000025;
+}
+
+.aboutDialog .table div sp-detail {
+    text-align: right;
+    flex: 0 0 66%;
+    padding-top: 2px;
+    margin-right: 1em;
+}
+
+.aboutDialog .table div sp-body {
+    flex: 1 1 auto;
+}
+
+.aboutDialog code {
+    font-family: 'Menlo', 'Courier New', Courier, monospace
+}
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { versions } from "uxp";
+import os from "os";
+
+import "./About.css";
+
+export const About = (props) => {
+    return (
+        <form method="dialog" className="aboutDialog">
+        <sp-heading>React Starter Plugin</sp-heading>
+        <sp-divider size="large"></sp-divider>
+        <sp-body>
+            This is a simple plugin that demonstrates the various capabilities of React on UXP.
+            When adapting to your own projects, you can replace <code>index.jsx</code> and the components
+            with your own. 
+        </sp-body>
+        <webview id="webview" width="100%" height="360px" src="https://www.google.com"></webview>
+        <sp-body class="well">
+            <sp-icon name="ui:InfoSmall" size="s"></sp-icon>
+            We've also included the `WC` component and a couple of controllers. You
+            do not need to use these in your own projects, but you are welcome to do so.
+        </sp-body>
+        <sp-detail>VERSIONS</sp-detail>
+        <div className="table">
+            <div><sp-detail>PLUGIN: </sp-detail><sp-body> {versions.plugin}</sp-body></div>
+            <div><sp-detail>OPERATING SYSTEM:</sp-detail><sp-body> {os.platform()} {os.release()}</sp-body></div>
+            <div><sp-detail>UNIFIED EXTENSIBILITY PLATFORM:</sp-detail><sp-body>{versions.uxp}</sp-body></div>
+        </div>
+        <sp-button-group>
+            <sp-button tabindex={0} variant="secondary" quiet="quiet" onClick={() => props.dialog.close("reasonCanceled")}>Cancel</sp-button>
+            <sp-button tabindex={0} autofocus="autofocus" variant="primary" onClick={() => props.dialog.close("ok")}>OK</sp-button>
+        </sp-button-group>
+    </form>
+    );
+}
@@ -0,0 +1,103 @@
+
+.colorPicker .color {
+    margin: 16px auto;
+    height: 64px;
+    width: 64px;
+    border-radius: 8px;
+    position: relative;
+    border: 1px solid #252525;
+    outline: 1px solid #8C8C8C;
+    outline-radius: 10px;
+}
+
+.colorPicker .color:after {
+    content: ' ';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    border: 1px solid white;
+    border-radius: 8px;
+}
+
+@media (prefers-color-scheme: darkest) {
+    .colorPicker .color {
+        outline-color: #6E6E6E;
+    }
+}
+@media (prefers-color-scheme: light), (prefers-color-scheme: lightest) {
+    .colorPicker .color {
+        outline-color: #FFFFFF;
+    }
+}
+
+
+.colorPicker .filledRange {
+    position: relative;
+}
+
+.colorPicker .sliderWithInput {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.colorPicker .sliderWithInput > *:first-child {
+    flex: 1 1 auto;
+}
+
+.colorPicker .sliderWithInput > *:last-child {
+    margin-left: 8px;
+    flex: 0 0 auto;
+    width: 50px;
+}
+.colorPicker sp-textfield {
+    height: 24px;
+    background-color: transparent;
+}
+
+.colorPicker sp-slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.colorPicker sp-slider:focus {
+    outline: 1px solid #2680eb;
+    outline-radius: 4px;
+}
+
+@media (prefers-color-scheme: darkest), (prefers-color-scheme: lightest) {
+    .colorPicker sp-slider:focus {
+        outline-color: #2185E6
+    }
+}
+@media (prefers-color-scheme: dark) {
+    .colorPicker sp-slider:focus {
+        outline-color: #3592EB
+    }
+}
+@media (prefers-color-scheme: light) {
+    .colorPicker sp-slider:focus {
+        outline-color: #0679E0
+    }
+}
+
+.colorPicker .gradient {
+    margin-top: 21px;
+    height: 14px;
+    margin-bottom: 28px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    margin-left: 8px; 
+    margin-right: 8px;
+}
+
+.colorPicker .gradient.red {
+    background: linear-gradient(to right, #000000, #FF0000);
+}
+.colorPicker .gradient.green {
+    background: linear-gradient(to right, #000000, #00FF00);
+}
+.colorPicker .gradient.blue {
+    background: linear-gradient(to right, #000000, #0000FF);
+}
@@ -0,0 +1,71 @@
+import React, { useRef, useState } from "react";
+
+import { WC } from "../components/WC.jsx";
+
+import "./ColorPicker.css";
+
+export const ColorPicker = () => {
+    const _sldR = useRef(null);
+    const _sldG = useRef(null);
+    const _sldB = useRef(null);
+    const _txtR = useRef(null);
+    const _txtG = useRef(null);
+    const _txtB = useRef(null);
+
+    const [R, setR] = useState(0xF0);
+    const [G, setG] = useState(0xC0);
+    const [B, setB] = useState(0xA0);
+
+    const updateColor = (evt) => {
+        const target = evt.target;
+        const part = target.getAttribute("data-part");
+
+        switch (part) {
+            case "R":
+                setR(Number(target.value));
+                break;
+            case "G":
+                setG(Number(target.value));
+                break;
+            case "B":
+                setB(Number(target.value));
+                break;
+            default:
+                break;
+        }
+    }
+    return (
+        <div className="colorPicker">
+                <div className="color" style={{backgroundColor: `rgb(${R}, ${G}, ${B})`}}></div>
+                <WC onInput={updateColor}>
+                    <div className="sliderWithInput">
+                        <div className="filledRange">
+                        <div className="gradient red" style={{background:`linear-gradient(to right, rgb(0, ${G}, ${B}), rgb(255, ${G}, ${B}))`}}></div>
+                            <sp-slider ref={_sldR} data-part="R" value={R} min={0} max={255}>
+                                <sp-label slot="label">Red</sp-label>
+                            </sp-slider>
+                        </div>
+                        <sp-textfield ref={_txtR} data-part="R" type="number" value={R} min={0} max={255}></sp-textfield>
+                    </div>
+                    <div className="sliderWithInput">
+                        <div className="filledRange">
+                        <div className="gradient green" style={{background:`linear-gradient(to right, rgb(${R}, 0, ${B}), rgb(${R}, 255, ${B}))`}}></div>
+                            <sp-slider ref={_sldG} data-part="G" value={G} min={0} max={255}>
+                                <sp-label slot="label">Green</sp-label>
+                            </sp-slider>
+                        </div>
+                        <sp-textfield ref={_txtG} data-part="G" type="number" value={G} min={0} max={255}></sp-textfield>
+                    </div>
+                    <div className="sliderWithInput">
+                        <div className="filledRange">
+                        <div className="gradient blue" style={{background:`linear-gradient(to right, rgb(${R}, ${G}, 0), rgb(${R}, ${G}, 255))`}}></div>
+                            <sp-slider ref={_sldB} data-part="B" value={B} min={0} max={255}>
+                                <sp-label slot="label">Blue</sp-label>
+                            </sp-slider>
+                        </div>
+                        <sp-textfield ref={_txtB} data-part="B" type="number" value={B} min={0} max={255}></sp-textfield>
+                    </div>
+                </WC>
+            </div>
+        );
+    }
@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Hello = (props) => {
+    return (
+        <sp-body>Hello, {props.message || "world"} </sp-body>
+    );
+} 
@@ -0,0 +1,3 @@
+[slot=icon] svg {
+    fill: currentColor;
+}
@@ -0,0 +1,48 @@
+import React from "react";
+
+import "./Icons.css";
+
+export const PlayIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
+        <path  d="M4.73,2H3.5a.5.5,0,0,0-.5.5v13a.5.5,0,0,0,.5.5H4.73a1,1,0,0,0,.5035-.136l11.032-6.433a.5.5,0,0,0,0-.862L5.2335,2.136A1,1,0,0,0,4.73,2Z" />
+    </svg>
+);
+
+export const SomethingBadIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
+        <path d="M9,1a8,8,0,1,0,8,8A8,8,0,0,0,9,1Zm2.7365,3.216a1.71921,1.71921,0,0,1,1.5,1.875,1.71921,1.71921,0,0,1-1.5,1.875,1.71921,1.71921,0,0,1-1.5-1.875A1.71921,1.71921,0,0,1,11.7365,4.216Zm-5.554.051a1.71855,1.71855,0,0,1,1.5,1.874,1.71956,1.71956,0,0,1-1.5,1.875,1.71956,1.71956,0,0,1-1.5-1.875A1.71819,1.71819,0,0,1,6.1825,4.267Zm7.256,8.054-.471.238a.5.5,0,0,1-.562-.076c-.1665-.15-.3635-.3295-.4145-.365a5.24348,5.24348,0,0,0-2.9705-.868,5.237,5.237,0,0,0-3,.8855c-.062.044-.2445.212-.4.3585a.5.5,0,0,1-.567.0805l-.464-.235a.5.5,0,0,1-.145-.782c.116-.1285.221-.2415.263-.279A6.504,6.504,0,0,1,9.0205,9.75a6.48448,6.48448,0,0,1,4.3645,1.575c.0235.0215.104.1095.2.216a.5.5,0,0,1-.1465.78Z" />
+    </svg>
+);
+
+export const CopyIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
+        <rect height="1" rx="0.25" width="1" x="16" y="11" />
+        <rect height="1" rx="0.25" width="1" x="16" y="9" />
+        <rect height="1" rx="0.25" width="1" x="16" y="7" />
+        <rect height="1" rx="0.25" width="1" x="16" y="5" />
+        <rect height="1" rx="0.25" width="1" x="16" y="3" />
+        <rect height="1" rx="0.25" width="1" x="16" y="1" />
+        <rect height="1" rx="0.25" width="1" x="14" y="1" />
+        <rect height="1" rx="0.25" width="1" x="12" y="1" />
+        <rect height="1" rx="0.25" width="1" x="10" y="1" />
+        <rect height="1" rx="0.25" width="1" x="8" y="1" />
+        <rect height="1" rx="0.25" width="1" x="6" y="1" />
+        <rect height="1" rx="0.25" width="1" x="6" y="3" />
+        <rect height="1" rx="0.25" width="1" x="6" y="5" />
+        <rect height="1" rx="0.25" width="1" x="6" y="7" />
+        <rect height="1" rx="0.25" width="1" x="6" y="9" />
+        <rect height="1" rx="0.25" width="1" x="6" y="11" />
+        <rect height="1" rx="0.25" width="1" x="8" y="11" />
+        <rect height="1" rx="0.25" width="1" x="10" y="11" />
+        <rect height="1" rx="0.25" width="1" x="12" y="11" />
+        <rect height="1" rx="0.25" width="1" x="14" y="11" />
+        <path d="M5,6H1.5a.5.5,0,0,0-.5.5v10a.5.5,0,0,0,.5.5h10a.5.5,0,0,0,.5-.5V13H5.5a.5.5,0,0,1-.5-.5Z" />
+    </svg>
+);
+
+export const PasteIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
+        <path d="M14,3V5.5a.5.5,0,0,1-.5.5h-9A.5.5,0,0,1,4,5.5V3H2.5a.5.5,0,0,0-.5.5v13a.5.5,0,0,0,.5.5h13a.5.5,0,0,0,.5-.5V3.5a.5.5,0,0,0-.5-.5Z" />
+        <path d="M11,3V2A2,2,0,0,0,7,2V3H5V5h8V3ZM10,3H8V2a1,1,0,0,1,2,0Z" />
+    </svg>
+);
@@ -0,0 +1,26 @@
+import React, { useEffect, useRef } from "react";
+
+export const WC = (props) => {
+    const elRef = useRef(null);
+
+    const handleEvent = (evt) => {
+        const propName = `on${evt.type[0].toUpperCase()}${evt.type.substr(1)}`;
+        if (props[propName]) {
+            props[propName].call(evt.target, evt);
+        }
+    }
+
+    useEffect(() => {
+        const el = elRef.current;
+        const eventProps = Object.entries(props).filter(([k,v]) => k.startsWith("on"));
+        eventProps.forEach(([k,v]) => el.addEventListener(k.substr(2).toLowerCase(), handleEvent));
+
+        return () => {
+            const el = elRef.current;
+            const eventProps = Object.entries(props).filter(([k,v]) => k.startsWith("on"));
+            eventProps.forEach(([k,v]) => el.removeEventListener(k.substr(2).toLowerCase(), handleEvent));
+        }
+    }, []);
+
+    return <div ref={elRef} {...props}>{props.children}</div>
+}
@@ -0,0 +1,66 @@
+import ReactDOM from "react-dom";
+
+const _id = Symbol("_id");
+const _root = Symbol("_root");
+const _attachment = Symbol("_attachment");
+const _Component = Symbol("_Component");
+const _menuItems = Symbol("_menuItems");
+
+export class PanelController {
+    
+    constructor(Component, { id, menuItems } = {}) {
+        this[_id] = null;
+        this[_root] = null;
+        this[_attachment] = null;
+        this[_Component] = null;
+        this[_menuItems] = [];
+
+        this[_Component] = Component;
+        this[_id] = id;
+        this[_menuItems] = menuItems || [];
+        this.menuItems = this[_menuItems].map(menuItem => ({
+            id: menuItem.id,
+            label: menuItem.label,
+            enabled: menuItem.enabled || true,
+            checked: menuItem.checked || false
+        }));
+
+        [ "create", "show", "hide", "destroy", "invokeMenu" ].forEach(fn => this[fn] = this[fn].bind(this));
+    }
+
+    create() {
+        this[_root] = document.createElement("div");
+        this[_root].style.height = "100vh";
+        this[_root].style.overflow = "auto";
+        this[_root].style.padding = "8px";
+
+        ReactDOM.render(this[_Component]({panel: this}), this[_root]);
+
+        return this[_root];
+    }
+
+    show(event)  {
+        if (!this[_root]) this.create();
+        this[_attachment] = event;
+        this[_attachment].appendChild(this[_root]);
+    }
+
+    hide() {
+        if (this[_attachment] && this[_root]) {
+            this[_attachment].removeChild(this[_root]);
+            this[_attachment] = null;
+        }
+    }
+
+    destroy() { }
+
+    invokeMenu(id) {
+        const menuItem = this[_menuItems].find(c => c.id === id);
+        if (menuItem) {
+            const handler = menuItem.oninvoke;
+            if (handler) {
+                handler();
+            }
+        }
+    }
+}
@@ -0,0 +1,25 @@
+import React from "react";
+
+import "./styles.css";
+import { PanelController } from "./controllers/PanelController.jsx";
+import Main from "./panels/Main.jsx";
+
+import { entrypoints } from "uxp"; 
+
+const demosController =  new PanelController(() => <Main/>, {id: "comfy-connect", menuItems: [
+    // { id: "reload1", label: "Reload Plugin", enabled: true, checked: false, oninvoke: () => location.reload() },
+    // { id: "dialog1", label: "About this Plugin", enabled: true, checked: false, oninvoke: () => aboutController.run() },
+] });
+entrypoints.setup({
+    plugin: {
+        create(plugin) { 
+            /* optional */ console.log("created", plugin);
+        },
+        destroy() {
+            /* optional */ console.log("destroyed");
+        }
+    },
+    panels: {
+        'comfy-connect': demosController,
+    }
+});
@@ -0,0 +1,60 @@
+import React from "react";
+import ComfyConnection from "../system/ComfyConnection";
+import { storage } from "uxp";
+
+export default class Main extends React.Component {
+    state = {
+        comfyURL: '', 
+        isConnected: false 
+    }
+
+    componentDidMount() {
+        ComfyConnection.onConnectStateChange(() => {
+            const instance = ComfyConnection.instance
+            console.log('isConnected：', instance?.isConnected)
+            this.setState({
+                isConnected: instance?.isConnected,
+                comfyURL: instance ? instance.comfyURL : ''
+            })
+        });
+        storage.secureStorage.getItem('comfyURL').then((value) => {
+            if (!value) return
+            this.setState({ comfyURL: Buffer.from(value).toString() })
+            if (this.state.comfyURL) {
+                console.log('comfyURL:', this.state.comfyURL)
+                this.doConnectOrDisconnect()
+            }
+        })
+    }
+
+    doConnectOrDisconnect() {
+        if (!ComfyConnection.instance?.isConnected) 
+            ComfyConnection.createInstance(this.state.comfyURL);
+        else 
+            ComfyConnection.instance.disconnect();
+    }
+
+    render() {
+        return (
+            <> 
+
+                <sp-textfield 
+                    id="url-bar" 
+                    label="ComfyURL" 
+                    onInput={(ev) => { this.state.comfyURL = ev.currentTarget.value }} 
+                    value={this.state.comfyURL} 
+                    placeholder="http://127.0.0.1:8188"
+                ></sp-textfield>
+                <div className="button-box">
+                    <sp-button 
+                        id="connect-btn"
+                        variant="primary"
+                        onClick={this.doConnectOrDisconnect.bind(this)}
+                    >{this.state.isConnected ? 'disconnect' : 'connect'}</sp-button>
+                </div>
+
+                <sp-divider size="small"></sp-divider>
+            </>
+        )
+    }
+} 
@@ -0,0 +1,36 @@
+.tabbar {
+    display: flex;
+    flex: 0 0 auto;
+    padding: 12px;
+    background-color: rgba(0,0,0,.25);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    flex-wrap: wrap;
+}
+.tabsection {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.tabsection:nth-of-type(2) {
+    justify-content: flex-end;
+}
+
+.tabsection * {
+    margin: 0 4px;
+}
+
+#url-bar {
+    width: 100%;
+}
+.button-box {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+}
+#connect-btn {
+    text-align: center;
+}
@@ -0,0 +1,252 @@
+import { app, imaging, core } from "photoshop";
+import { storage } from "uxp";
+import { findInAllSubLayer, getAllSubLayer, unTrimImageData } from "./util";
+import Jimp from "./jimp.min";
+const executeAsModal = core.executeAsModal;
+
+class ComfyConnection {
+    static instance = null;
+
+    static _connectStateCallbacks = [];
+    static onConnectStateChange(callback) {
+        ComfyConnection._connectStateCallbacks.push(callback);
+    }
+    static _callConnectStateChange() {
+        ComfyConnection._connectStateCallbacks.forEach(cb => {
+            try {
+                cb(ComfyConnection.instance?.isConnected)
+            } catch (e) { console.error(e) }
+        });
+    }
+
+    static createInstance(comfyURL) {
+        if (ComfyConnection.instance && ComfyConnection.instance.isConnected) {
+            ComfyConnection.instance.disconnect();
+        }
+        ComfyConnection.instance = new ComfyConnection(comfyURL);
+    }
+
+    get isConnected() {
+        return this._isConnected === true;
+    }
+
+    comfyURL = '';
+    constructor(comfyURL) {
+        ComfyConnection.instance = this;
+        this.comfyURL = comfyURL.replace(/\/*$/, '');
+        this.connect();
+    }
+
+    async onMessage(event) {
+        console.log("Message from comfy ", event.data);
+        try {
+            const payload = JSON.parse(event.data);
+            if (payload.action == 'get_layers') {
+                const allLayers = getAllSubLayer(app.activeDocument);
+                this.socket.send(
+                    JSON.stringify({
+                        call_id: payload.call_id,
+                        result: { layers: allLayers }
+                    })
+                )
+
+
+            } else if (payload.action == 'send_images') {
+                const imageIds = payload.params.image_ids
+                await Promise.all(
+                    imageIds.map(async imageId => {
+                        let layer;
+                        await executeAsModal(async () => {
+                            layer = await app.activeDocument.createLayer("pixel", {
+                                name: 'Comfy Images ' + imageId
+                            })
+                        })
+
+                        const jimp = await Jimp.read(this.comfyURL + '/finished_images?id=' + imageId)
+
+                        await executeAsModal(async () => {
+                            await imaging.putPixels({
+                                layerID: layer.id,
+                                imageData: await imaging.createImageDataFromBuffer(
+                                    jimp.bitmap.data,
+                                    {
+                                        width: jimp.bitmap.width,
+                                        height: jimp.bitmap.height,
+                                        components: 4,
+                                        colorSpace: "RGB"
+                                    }
+                                )
+                            })
+                        })
+                    })
+                )
+                this.socket.send(
+                    JSON.stringify({
+                        call_id: payload.call_id,
+                        result: {  }
+                    })
+                )
+
+            } else if (payload.action == 'get_image') {
+                const layerID = payload.params.layer_id
+
+                await executeAsModal(async () => {
+                    const startTime = Date.now();
+                    let uploadName = 0;
+                    try {
+                        const layer = findInAllSubLayer(app.activeDocument, layerID)
+                        if (!layer) throw new Error(`Layer(id: ${layerID}) not found`);
+
+                        const bounds = layer.bounds;
+                        // TODO support selection area
+                        const desireBounds = {
+                            left: 0,
+                            top: 0,
+                            right: app.activeDocument.width,
+                            bottom: app.activeDocument.height
+                        }
+                        const isEmptyLayer = bounds.left == 0 && bounds.top == 0 && bounds.right == 0 && bounds.bottom == 0;
+                        const isFitLayer = bounds.left == desireBounds.left && bounds.top == desireBounds.top && bounds.right == desireBounds.right && bounds.bottom == desireBounds.bottom;
+                        let pixelDataFromAPI = null;
+                        let pixelDataForReturn = null;
+                        if (!isEmptyLayer) {
+                            const pixels = await imaging.getPixels({
+                                documentID: app.activeDocument.id,
+                                layerID: layerID,
+                                applyAlpha: false,
+                                sourceBounds: {
+                                    left: 0,
+                                    top: 0,
+                                    width: app.activeDocument.width,
+                                    height: app.activeDocument.height
+                                }
+                            })
+        
+                            let psImageData = pixels.imageData
+                            // Uint8Array
+                            pixelDataFromAPI = await psImageData.getData()
+                            Promise.resolve().then(() => { psImageData.dispose() })
+                        }
+                        // console.log('getPixels', Date.now() - startTime, 'ms');
+                        if (isFitLayer) {
+                            pixelDataForReturn = pixelDataFromAPI;
+
+                        } else {
+                            pixelDataForReturn = new Uint8Array(app.activeDocument.width * app.activeDocument.height * 4)
+                            if (!isEmptyLayer) {
+                                unTrimImageData(
+                                    pixelDataFromAPI,
+                                    pixelDataForReturn, {
+                                        left: Math.max(bounds.left, 0),
+                                        top: Math.max(bounds.top, 0),
+                                        right: Math.min(bounds.right, app.activeDocument.width),
+                                        bottom: Math.min(bounds.bottom, app.activeDocument.height)
+                                    }, {
+                                        width: app.activeDocument.width,
+                                        height: app.activeDocument.height
+                                    }
+                                )
+                            }
+
+                        }
+
+                        // console.log('untrimed', Date.now() - startTime, 'ms');
+                        const image = await new Promise((resolve, reject)=> {
+                            new Jimp({
+                                data: pixelDataForReturn,
+                                width: app.activeDocument.width,
+                                height: app.activeDocument.height
+                            }, (err, image) => {
+                                err ? reject(err) : resolve(image);
+                            })                                          
+                        })
+                        image.quality(100);
+                        const file = await image.getBufferAsync(Jimp.MIME_PNG);
+                        // console.log('create pngfile', Date.now() - startTime, 'ms');
+                        
+                        const fd = new FormData();
+                        const PhotoshopBlob = new Blob([file], { type: "image/png" });
+                        fd.append('image', PhotoshopBlob, "PhotoshopBlob.png");
+                        fd.append('overwrite', "true");
+                        // console.log('start upload', Date.now() - startTime, 'ms');
+                        const promise = fetch(this.comfyURL + '/upload/image', {
+                            method: 'POST',
+                            body: fd,
+                        }).then(res => {
+                            if (res.status == 200)
+                                return res.json()
+                            else
+                                throw new Error('HTTP ' + res.status)
+                        })
+                        // console.log('finish upload', Date.now() - startTime, 'ms')
+                        const result = await promise
+                        // console.log('upload resulted', Date.now() - startTime, 'ms')
+                        
+                        if (result.error) throw new Error(result.error);
+                        if (!result.name) throw new Error('No upload_name')
+                        uploadName = result.name
+
+                    } catch(e) {
+                        this.socket.send(
+                            JSON.stringify({
+                                call_id: payload.call_id,
+                                error: e.message
+                            })
+                        )
+                        throw e
+                    }
+
+                    this.socket.send(
+                        JSON.stringify({
+                            call_id: payload.call_id,
+                            result: {
+                                upload_name: uploadName
+                            }
+                        })
+                    )
+                }, { commandName: "get content of layer " + layerID })
+
+            }
+        } catch (e) { console.error(e) }
+    }
+    reconnectTimer = null
+    
+    connect() {
+        if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        // Create WebSocket connection.
+        const socket = this.socket = new WebSocket(this.comfyURL.replace('http://', 'ws://') + '/photoshop_instance?version=1');
+
+        socket.addEventListener("open", (ev) => {
+            storage.secureStorage.setItem('comfyURL', this.comfyURL);
+            console.log('Connection open')
+            this._isConnected = true;
+            ComfyConnection._callConnectStateChange();
+        });
+
+        socket.addEventListener("message", this.onMessage.bind(this));
+
+        socket.addEventListener("close", (event) => {
+            console.log("Connection close", event.reason);
+            this._isConnected = false;
+            ComfyConnection._callConnectStateChange();
+        });
+        socket.addEventListener('error', (event) => {
+            console.log("Connection error", event);
+            this.reconnectTimer = setTimeout(() => {
+                console.log(`Reconnecting to ${this.comfyURL.replace('http://', 'ws://').replace(/\/*$/, '')}`)
+                this.connect();
+            }, 3000)
+        })
+    }
+
+    disconnect() {
+        if (this.socket) {
+            this.socket.close();
+        }
+    }
+}
+
+export default ComfyConnection;
@@ -0,0 +1,64 @@
+
+export function unTrimImageData(
+    fromImageDataArray,
+    toImageDataArray,
+    fromImageBound,
+    toImageSize
+) {
+    const boundLeft = fromImageBound.left;
+    const boundTop = fromImageBound.top;
+    const boundRight = fromImageBound.right;
+    const boundBottom = fromImageBound.bottom;
+
+    const toWidth = toImageSize.width;
+    const toHeight = toImageSize.height;
+
+    const toLength = toWidth * toHeight * 4;
+    if (toImageDataArray.length !== toLength) {
+        throw new Error(`toImageDataArray.length(${toImageDataArray.length}) !== toLength(${toLength})`);
+    }
+    if (fromImageDataArray.length !== (boundRight - boundLeft) * (boundBottom - boundTop) * 4) {
+        throw new Error(`fromImageDataArray.length(${fromImageDataArray.length}) !== boundSize(${(boundRight - boundLeft) * (boundBottom - boundTop) * 4})`);
+    }
+
+    for (let i = 0; i < toLength; i += 4) {
+        const currentLeft = (i / 4) % toWidth;
+        const currentTop = Math.floor((i / 4) / toWidth);
+        if (
+            !(currentLeft < boundLeft || 
+            currentLeft >= boundRight || 
+            currentTop < boundTop || 
+            currentTop >= boundBottom)
+        ) {
+            const fromIndex = ((currentTop - boundTop) * (boundRight - boundLeft) + (currentLeft - boundLeft)) * 4;
+            const alpha = fromImageDataArray[fromIndex + 3];
+            toImageDataArray[i] = alpha == 0 ? 0 : fromImageDataArray[fromIndex];
+            toImageDataArray[i + 1] = alpha == 0 ? 0 : fromImageDataArray[fromIndex + 1];
+            toImageDataArray[i + 2] = alpha == 0 ? 0 : fromImageDataArray[fromIndex + 2];
+            toImageDataArray[i + 3] = alpha;
+        }
+    }
+    return toImageDataArray;
+}
+
+export function getAllSubLayer(layer, level = 0) {
+    if (!layer.layers) return [];
+    return layer.layers.reduce((ret, layer) => {
+        ret.push({
+            name: '-'.repeat(level) + layer.name,
+            id: layer.id
+        });
+        return ret.concat(getAllSubLayer(layer, level + 1));
+    }, []);
+}
+
+export function findInAllSubLayer(layer, layerid) {
+    if (!layer.layers) return null;
+    for (let i = 0; i < layer.layers.length; i++) {
+        if (layer.layers[i].id === layerid) return layer.layers[i];
+
+        const result = findInAllSubLayer(layer.layers[i], layerid)
+        if (result) return result;
+    }
+    return null;
+}
@@ -0,0 +1,33 @@
+/*
+ *  Copyright 2021 Adobe Systems Incorporated. All rights reserved.
+ *  This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License. You may obtain a copy
+ *  of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software distributed under
+ *  the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ *  OF ANY KIND, either express or implied. See the License for the specific language
+ *  governing permissions and limitations under the License.
+ *
+ */
+
+/**
+ * Home page containing specific selectors and methods for a specific page
+ */
+class HomePage {
+    /**
+     * define selectors using getter methods
+     */
+    get populateLayerButton () { return $('#btnPopulate') }
+
+    /**
+     * a method to encapsule automation code to interact with the page
+     * e.g. to click on populate layer button
+     */
+
+    async clickOnPopulateLayerButton()  {
+        await (await this.populateLayerButton).click();
+    }
+}
+
+module.exports = new HomePage();
@@ -0,0 +1,29 @@
+/*
+ *  Copyright 2021 Adobe Systems Incorporated. All rights reserved.
+ *  This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License. You may obtain a copy
+ *  of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software distributed under
+ *  the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ *  OF ANY KIND, either express or implied. See the License for the specific language
+ *  governing permissions and limitations under the License.
+ *
+ */
+
+const HomePage = require('../page-objects/homepage.js');
+describe('Click on Populate Layers Button', () => {
+    it('should click on Populate layers Button', async () => {
+        await HomePage.clickOnPopulateLayerButton();
+        // Add your validation here
+        const result = await browser.execute(() => {
+            const app = require("photoshop").app;
+           	const length = app.activeDocument.layers ? app.activeDocument.layers.length : 0 ;
+            return length
+       });
+   	    const result1 = await browser.execute(() => {
+	   	    return	document.getElementsByTagName("li").length;
+   	    });
+   	    expect(result).toStrictEqual(result1);
+    });
+});
@@ -0,0 +1,53 @@
+const path = require("path");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = {
+    entry: './src/index.jsx',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'index.js',
+        //libraryTarget: "commonjs2"
+    },
+    devtool: 'eval-cheap-source-map', // won't work on XD due to lack of eval
+    devtool: false,
+    externals: {
+        uxp: 'commonjs2 uxp',
+        photoshop: 'commonjs2 photoshop',
+        os: 'commonjs2 os'
+    },
+    resolve: {
+        extensions: [".js", ".jsx"]
+    },
+    module: {
+        rules: [
+            {
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                loader: "babel-loader",
+                options: {
+                    plugins: [
+                        "@babel/transform-react-jsx",
+                        "@babel/proposal-object-rest-spread",
+                        "@babel/plugin-syntax-class-properties",
+                    ]
+                }
+            },
+            {
+                test: /\.png$/,
+                exclude: /node_modules/,
+                loader: 'file-loader'
+            },
+            {
+                test: /\.css$/,
+                use: ["style-loader", "css-loader"]
+            }
+        ]
+    },
+    plugins: [
+        //new CleanWebpackPlugin(),
+        new CopyPlugin(['plugin'], {
+            copyUnmodified: true
+        })
+    ]
+};