removing classifygif and all that relates to it (#819)

Author: mazenchami

.all-contributorsrc

@@ -37,6 +37,18 @@
         "content"
       ]
     },
+    {
+      "login": "mazenchami",
+      "name": "Mazen Chami",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9324607?v=4",
+      "profile": "https://github.com/mazenchami",
+      "contributions": [
+        "doc",
+        "code",
+        "review",
+        "test"
+      ]
+    },
     {
       "login": "jstudenski",
       "name": "Jeff Studenski",

README.md

@@ -60,10 +60,6 @@ <h3>Images</h3>
       <div class="main-item">
         <h3>Animations</h3>
         <div class="wrapper">
-          <div class="item">
-            <p>GIF animation</p>
-            <img crossorigin="anonymous" class='animations' width="280" height="250" src="http://localhost/data/animations/smile.gif"></img>
-          </div>
 
           <div class="item">
             <p>WebP animation</p>
@@ -105,12 +101,6 @@ <h3>Animations</h3>
               .then(predictions => showResults(images[i], predictions, true))
               .catch(error => showError(images[i], error))
           }
-
-          if (images[i].classList[0] === 'animations') {
-            model.classifyGif(images[i], { topk: 3, fps: 1 })
-              .then(predictions => showResults(images[i], predictions))
-              .catch(error => showError(images[i], error))
-          }
         }
       })
 

__tests__/classifyGif.ts

@@ -17,8 +17,7 @@
     "react-webcam": "^1.1.0",
     "seedrandom": "^3.0.1",
     "stream-browserify": "^3.0.0",
-    "tether-drop": "^1.4.2",
-    "victory": "^36.0.0"
+    "tether-drop": "^1.4.2"
   },
   "scripts": {
     "start": "react-app-rewired start",

example/manual-testing/data/animations/smile.gif

@@ -38,7 +38,6 @@ class App extends Component {
     loading: true,
     fileType: null,
     hardReset: false,
-    gifControl: null,
     currentModelName: 'mobilenetMid',
   }
 
@@ -84,76 +83,29 @@ class App extends Component {
 
   detectBlurStatus = (predictions, blurNSFW = this.state.blurNSFW) => {
     let droppedImageStyle = clean
-    if (this.state.fileType === 'image/gif') {
-      const deemedEvil = this.detectGifEvil(predictions)
-      droppedImageStyle = deemedEvil > 0 && blurNSFW ? blurred : clean
-    } else {
-      if (blurNSFW) {
-        switch (predictions[0].className) {
-          case 'Hentai':
-          case 'Porn':
-          case 'Sexy':
-            droppedImageStyle = blurred
-        }
+    if (blurNSFW) {
+      switch (predictions[0].className) {
+        case 'Hentai':
+        case 'Porn':
+        case 'Sexy':
+          droppedImageStyle = blurred
       }
     }
     return droppedImageStyle
   }
 
-  detectGifEvil = (predictions) =>
-    predictions
-      .filter((c) => {
-        return ['Hentai', 'Porn', 'Sexy'].includes(c[0].className)
-      })
-      .flat().length
-
   checkContent = async () => {
     // Sleep bc it's grabbing image before it's rendered
     // Not really a problem of this library
     await this.sleep(100)
     const img = this.refs.dropped
-    if (this.state.fileType === 'image/gif') {
-      this.setState({
-        message: `0% - Parsing GIF frames`,
-        predictions: [],
-        loading: true,
-      })
-      const predictions = await this.state.model.classifyGif(img, {
-        topk: 1,
-        setGifControl: (gifControl) => {
-          this.setState({
-            gifControl,
-          })
-        },
-        onFrame: ({ index, totalFrames, predictions }) => {
-          const percent = ((index / totalFrames) * 100).toFixed(0)
-          this.setState({
-            message: `${percent}% - Frame ${index} is ${predictions[0].className}`,
-          })
-        },
-      })
-      const deemedEvil = this.detectGifEvil(predictions)
-      // If any frame is NSFW, blur it (if blur is on)
-      const droppedImageStyle = this.detectBlurStatus(predictions)
-      const gifMessage =
-        deemedEvil > 0
-          ? `Detected ${deemedEvil} NSFW frames`
-          : 'All frames look clean'
-      this.setState({
-        message: `GIF Result: ${gifMessage}`,
-        predictions,
-        droppedImageStyle,
-        loading: false,
-      })
-    } else {
-      const predictions = await this.state.model.classify(img)
-      let droppedImageStyle = this.detectBlurStatus(predictions)
-      this.setState({
-        message: `Identified as ${predictions[0].className}`,
-        predictions,
-        droppedImageStyle,
-      })
-    }
+    const predictions = await this.state.model.classify(img)
+    let droppedImageStyle = this.detectBlurStatus(predictions)
+    this.setState({
+      message: `Identified as ${predictions[0].className}`,
+      predictions,
+      droppedImageStyle,
+    })
   }
 
   setFile = (file) => {
@@ -171,7 +123,7 @@ class App extends Component {
 
   onDrop = (accepted, rejected) => {
     if (rejected.length > 0) {
-      window.alert('JPG, PNG, WEBP, GIF only plz')
+      window.alert('JPG, PNG, WEBP only plz')
     } else {
       let droppedImageStyle = this.state.blurNSFW ? blurred : clean
       this.setState({
@@ -236,7 +188,6 @@ class App extends Component {
         />
       )
     } else {
-      // SuperGif kills our React Component
       // Only way I can seem to revive it is
       // to force a full re-render of Drop area
       if (this.state.hardReset) {
@@ -246,7 +197,7 @@ class App extends Component {
       return (
         <Dropzone
           id="dropBox"
-          accept="image/jpeg, image/png, image/gif, image/webp"
+          accept="image/jpeg, image/png, image/webp"
           className="photo-box"
           onDrop={this.onDrop.bind(this)}
         >
@@ -299,7 +250,6 @@ class App extends Component {
           <Loading showLoading={this.state.loading} />
           <Results
             message={this.state.message}
-            gifControl={this.state.gifControl}
             predictions={this.state.predictions}
           />
         </main>

example/manual-testing/data/index.html

@@ -1,7 +1,6 @@
 import React from 'react'
-import GifBar from './GifBar'
 
-// Render Text Prediction OR GifBar
+// Render Text Prediction
 const renderPredictions = props => {
   // only render if predictions is in singular format
   if (props.predictions[0] && props.predictions[0].className) {
@@ -17,8 +16,6 @@ const renderPredictions = props => {
         </ul>
       </div>
     )
-  } else if (props.predictions[0]) {
-    return <GifBar data={props.predictions} gifControl={props.gifControl} />
   }
 }