feat: Object Detection Sample

object-detection-plugin-sample/.gitignore

@@ -0,0 +1,5 @@
+# Dependency directory
+node_modules/
+
+#Build directory
+dist/

object-detection-plugin-sample/README.md

@@ -0,0 +1,41 @@
+# 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 ensure that your terminal is in the root of this project. Then:
+
+For `yarn` users, install all dependencies using:
+
+```
+yarn install
+```
+
+For `npm` users, install all dependencies using:
+
+```
+npm install
+```
+
+## 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 everytime you make a change to the source files. The result is placed in `dist`. 
+* `yarn build` or `npm run build` will build a production version of the plugin and place it in `dist`. 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..." and selecting `dist/manifest.json`. **DO NOT** select the `manifest.json` file inside the `plugin` 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.
+

object-detection-plugin-sample/backend/index.js

@@ -0,0 +1,37 @@
+const express = require("express");
+const multer  = require('multer');
+require('@tensorflow/tfjs-backend-cpu');
+require('@tensorflow/tfjs-node');
+require('@tensorflow/tfjs-backend-webgl');
+const tf = require('@tensorflow/tfjs');
+const imageGet = require('get-image-data');
+const cocoSsd = require('@tensorflow-models/coco-ssd');
+
+const { createCanvas, loadImage } = require('canvas')
+
+
+const upload = multer({ dest: 'uploads/' })
+const app = express();
+
+
+app.get("/", (req, res) => {
+    res.send("Hello World");
+});
+
+app.post("/detect", upload.single('image'), async (req, res) => {
+    const model = await cocoSsd.load();
+
+    loadImage(req.file.path).then((image) => {
+        const { width, height } = image;
+        const canvas = createCanvas(width, height);
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(image, 0, 0, width, height);
+        model.detect(canvas).then((predictions) => {
+            res.json({predictions, width, height});
+        });
+      })
+});
+
+app.listen(3000, () => {
+    console.log("Server is running on port 3000");
+});