update to use js sdk

Author: bourdakos1

package.json

@@ -5,11 +5,11 @@
   "keywords": [],
   "main": "src/index.js",
   "dependencies": {
-    "@tensorflow/tfjs": "1.0.0",
-    "react": "16.5.2",
-    "react-dom": "16.5.2",
-    "react-magic-dropzone": "1.0.1",
-    "react-scripts": "2.0.3"
+    "@cloud-annotations/models": "^0.0.9",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-magic-dropzone": "^1.0.1",
+    "react-scripts": "^3.3.1"
   },
   "devDependencies": {},
   "scripts": {
@@ -18,5 +18,10 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
-}
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

src/App.module.css

@@ -0,0 +1,42 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin: 48px 16px 32px 16px;
+}
+
+.dropzoneBase {
+  position: relative;
+  padding: 12px;
+  color: var(--detailText);
+  border: 2px var(--textInputUnderline) dashed;
+  border-radius: 5px;
+  width: 100%;
+  min-height: 144px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 500px;
+}
+
+.dropzone {
+  composes: dropzoneBase;
+  cursor: pointer;
+}
+
+.dropzone:hover {
+  background: var(--highlight);
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  border: thin solid rgba(64, 64, 64, 0.15);
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.canvas {
+  position: absolute;
+}