Merge pull request #8 from egrobar/tensorflow

moved tensor to didmount and fed it html
Sortera · Feb 19, 2020 · c0fef32 · c0fef32
2 parents 82e21bf + 04b4231
commit c0fef32
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/client/App.jsx b/client/App.jsx
@@ -8,11 +8,11 @@ export default class App extends Component {
     }
 
     render () {
-        //if (this.state.imageList) {
-            //let images = <tabbedImages images={this.state.imageList}></tabbedImages>
+        //if (this.state."image"List) {
+            //let "image"s = <tabbed"Image"s "image"s={this.state."image"List}></tabbed"Image"s>
         //}
 
-        let images = <TabbedImages images={[<img src='./assets/pineapple.png'></img>,<img src='./assets/trees.jpg'></img>,<img src='./assets/seth-rogen-premiere-this-is-the-end-04-copy.png'></img>]}></TabbedImages>
+        let images = <TabbedImages images={[<img src='./assets/pineapple.png' className={"image"}></img>,<img src='./assets/trees.jpg' className={"image"}></img>,<img src='./assets/seth-rogen-premiere-this-is-the-end-04-copy.png' className={"image"}></img>]}></TabbedImages>
 
         return (
             <div>

diff --git a/client/components/tabbedImages.jsx b/client/components/tabbedImages.jsx
@@ -1,7 +1,7 @@
 import { Component } from "react";
 import * as mobilenet from '@tensorflow-models/mobilenet';
 import React from 'react'
-
+import ReactDOMServer from 'react-dom/server';
 export default class TabbedImages extends Component {
     constructor(props) {
         super(props);
@@ -20,23 +20,39 @@ componentDidMount() {
 
 
   }
-  let images = this.props.images;
+  let images = document.getElementsByClassName('image')
   let taggedImages = [];
-
-  images = images.forEach(async (image) => {
-  //call predictImage on each image tag, and push the new labelled image to array for render
-  await predictImage(image);
-  taggedImages.push(
-    <div>
-      {image}
-      <label> {predictions[0].className + '.png'} </label>
-    </div>
-    ) 
-  })
+  const imageTagger = async (images) => {
+    for (let i = 0; i < images.length; i += 1) {
+      let image = images[i];
+      console.log(image)
+      await predictImage(image);
+      taggedImages.push(
+        <div>
+          {image}
+          <label> {predictions[0].className + '.png'} </label>
+        </div>
+        ) 
+      }
+  }
+  imageTagger(images);
+  // images = images.forEach(async (image) => {
+  //   console.log(image)
+  // //call predictImage on each image tag, and push the new labelled image to array for render
+  // image = ReactDOMServer.renderToStaticMarkup(image);
+  // console.log(image)
+  // await predictImage(image);
+  // taggedImages.push(
+  //   <div>
+  //     {image}
+  //     <label> {predictions[0].className + '.png'} </label>
+  //   </div>
+  //   ) 
+  // })
   //need to dispatch filenames to states
 }
 render() {
-  let taggedImages =  this.props.images;
+  let taggedImages =  taggedImages || this.props.images;
 
 
   return (