Compare commits

..
33 Commits
Author SHA1 Message Date
Dan Petro 52992277a1 Merge pull request #69 from six2dez/patch-2
Update requirements.txt
2024-02-19 09:17:56 -07:00
six2dez d9a3b39f5a Update requirements.txt
Fixing requirements
2023-04-14 13:11:37 +02:00
six2dez 71bc1e5bff Update requirements.txt 2023-04-14 13:07:54 +02:00
Dan Petro 5b15ce71b1 Merge pull request #68 from six2dez/patch-1
Update requirements.txt
2023-01-05 10:50:11 -07:00
Dan Petro cf71009811 Add link to eyeballer.bishopfox.com to readme 2023-01-05 10:44:13 -07:00
six2dez ba73c9d37a Update requirements.txt
Most distros return the error `ModuleNotFoundError: No module named 'sklearn'` because of missing dependency `scipy`
2022-12-30 23:59:36 +01:00
Dan Petro d1d5182411 Update readme to include new kaggle location of data 2021-06-10 15:30:37 -07:00
Dan Petro b7a4ce2ca3 Minor tweak to verify util script 2021-06-10 13:22:46 -07:00
Dan Petro 79b6f9f808 Fix typo in readme 2021-04-27 11:38:43 -07:00
Dan Petro 19cbae58e5 Added performance stats to readme 2021-04-27 11:32:53 -07:00
Dan Petro a390bf5644 Documentation for v3.0 training data 2021-04-22 14:01:04 -07:00
Dan Petro 92738b16a4 Add verify util script 2021-04-21 16:23:30 -07:00
Dan Petro 361b47bea8 Change resizer script to properly resize to 224x224, not 224x140 2021-04-21 08:22:57 -07:00
Dan Petro 616116d9a2 Documentation for parked domains 2021-04-20 15:28:52 -07:00
Dan Petro ecef89c4f9 Add extra field in prebuilt html template for parked domains 2021-04-20 14:46:29 -07:00
Dan Petro 818166f607 Support parked domains in the code 2021-04-02 13:56:46 -07:00
Dan Petro c50eae4dc4 Update readme with pretrained weights instructions 2021-03-01 16:49:40 -07:00
Dan Petro 3c8e161f82 Updated readme to say correct pretrained network name 2021-03-01 13:59:46 -07:00
Dan Petro 3b39a0c244 Merge branch 'application-label' 2021-03-01 13:57:53 -07:00
Dan Petro 42a4d6d037 Change readme dropbox link to v2 images/labels/pretrained model 2021-03-01 13:53:33 -07:00
Dan Petro c8eec3de4a Change name in HTML output file to "webapp" 2021-02-22 13:03:37 -07:00
Dan Petro 28234dac76 Trying logo again 2021-02-18 16:16:00 -07:00
Dan Petro bb46582e74 Minor logo readme fix 2021-02-18 16:15:07 -07:00
Dan Petro 33086f2f78 Add logo to readme 2021-02-18 16:13:46 -07:00
Dan Petro a3be157768 Change name from homepage to webapp 2021-02-18 14:51:16 -07:00
Dan Petro 8703982fe0 Readme clarification on label meanings 2021-02-12 11:51:34 -07:00
Dan Petro c90d90c07c Removed some commented code 2021-02-11 11:33:10 -07:00
Dan Petro 87e7ce3741 Fix bug where predict woulnd't load model from file
- Update some minor API things to not use deprecated features
2021-02-11 11:13:27 -07:00
Dan Petro ba6d6f0f49 Remove deprecated fit_generator() in tf2.0 2021-02-05 16:12:17 -07:00
Dan Petro 99fd136a0d Moved label init so that it's not necessary for prediction
- IE: So you don't need a labels.csv file if you just want to use a pretrained model
2021-02-04 15:50:20 -07:00
Dan Petro b7063bc517 De-lint, gitignore 2021-02-04 15:18:54 -07:00
Pi Esposito b031377f83 Added tensorboard callback for later visualization 2021-02-04 14:30:59 -07:00
Dan Petro b6e1f630f5 TF 2.0 is default now, so remove warning from readme 2021-02-04 14:27:27 -07:00
21 changed files with 162 additions and 336 deletions

No files matched your search

+4 -7
View File
@@ -104,10 +104,9 @@ venv.bak/
.mypy_cache/
#screenshot data
images*
#Graphs and Results
graphs/*
*.png
*.jpg
*.tar
#model files
*.h5
@@ -120,6 +119,4 @@ results.html
!tests/models/*
!tests/data/*
!docs/*
#Leave the webui things alone for their own gitignore
!webui/*
logs/*
+64 -32
View File
@@ -1,8 +1,13 @@
# Eyeballer
![Logo](/docs/eyeballer_logo.png)
Give those screenshots of yours a quick eyeballing.
Eyeballer is meant for large-scope network penetration tests where you need to find "interesting" targets from a huge set of web-based hosts. Go ahead and use your favorite screenshotting tool like normal (EyeWitness or GoWitness) and then run them through Eyeballer to tell you what's likely to contain vulnerabilities, and what isn't.
Give it a try live at: https://eyeballer.bishopfox.com
### Example Labels
@@ -10,38 +15,32 @@ Eyeballer is meant for large-scope network penetration tests where you need to f
| ------ |:-----:|
| ![Sample Old-looking Page](/docs/old-looking.png) | ![Sample Login Page](/docs/login.png) |
| Homepages | Custom 404's |
| Webapp | Custom 404's |
| ------ |:-----:|
| ![Sample Homepage](/docs/homepage.png) | ![Sample Custom 404](/docs/404.png) |
| ![Sample Webapp](/docs/homepage.png) | ![Sample Custom 404](/docs/404.png) |
## Web UI Setup
| Parked Domains |
| ------ |
| ![Sample Webapp](/docs/parked.png) |
Eyeballer's Web UI uses TensorflowJS and React. It runs entirely in your browser locally, with no backend functionality whatsoever. So you can "upload" files to classify and get results without the files ever leaving your computer. To run the Eyeballer Web UI locally, you'll need Node. On Debian, you can install that with the npm package:
## What the Labels Mean
```
sudo apt install npm
```
**Old-Looking Sites**
Blocky frames, broken CSS, that certain "je ne sais quoi" of a website that looks like it was designed in the early 2000's. You know it when you see it. Old websites aren't just ugly, they're also typically super vulnerable. When you're looking to hack into something, these websites are a gold mine.
Then you'll need to install some Node dependencies:
**Login Pages**
Login pages are valuable to pen testing, they indicate that there's additional functionality you don't currently have access to. It also means there's a simple follow-up process of credential enumeration attacks. You might think that you can set a simple heuristic to find login pages, but in practice it's really hard. Modern sites don't just use a simple input tag we can grep for.
```
cd webui/
npm install
```
**Webapp**
This tells you that there is a larger group of pages and functionality available here that can serve as surface area to attack. This is in contrast to a simple login page, with no other functionality. Or a default IIS landing page which has no other functionality. This label should indicate to you that there is a web application here to attack.
Copy a pre-trained model file (in TensorflowJS format) into a jsmodel/ folder under public/, so that it's available in the web server.
**Custom 404**
Modern sites love to have cutesy custom 404 pages with pictures of broken robots or sad looking dogs. Unfortunately, they also love to return HTTP 200 response codes while they do it. More often, the "404" page doesn't even contain the text "404" in it. These pages are typically uninteresting, despite having a lot going on visually, and Eyeballer can help you sift them out.
```
cp YOUR_MODEL/ webui/public/
```
**Parked Domains**
Parked domains are websites that look real, but aren't valid attack surface. They're stand-in pages, usually devoid of any real functionality, consist almost entirely of ads, and are usually not run by our actual target. It's what you get when the domain specified is wrong or lapsed. Finding these pages and removing them from scope is really valuable over time.
Then you can run the Web UI with:
```
npm start
```
## Python Setup
## Setup
Download required packages on pip:
```
@@ -55,33 +54,66 @@ sudo pip3 install -r requirements-gpu.txt
**NOTE**: Setting up a GPU for use with TensorFlow is way beyond the scope of this README. There's hardware compatibility to consider, drivers to install... There's a lot. So you're just going to have to figure this part out on your own if you want a GPU. But at least from a Python package perspective, the above requirements file has you covered.
**Pretrained Weights**
For the latest pretrained weights, check out the releases here on GitHub.
**Training Data** You can find our training data here:
https://www.dropbox.com/sh/7aouywaid7xptpq/AAD_-I4hAHrDeiosDAQksnBma?dl=1
https://www.kaggle.com/altf42600/pentest-screensots
Pretty soon, we're going to add this as a TensorFlow DataSet, so you don't need to download this separately like this. It'll also let us version the data a bit better. But for now, just deal with it. There's two things you need from the training data:
There's two things you need from the training data:
1. `images/` folder, containing all the screenshots (resized down to 224x140. We'll have the full-size images up soon)
1. `images/` folder, containing all the screenshots (resized down to 224x224)
2. `labels.csv` that has all the labels
3. `bishop-fox-pretrained-v1.h5` A pretrained weights file you can use right out of the box without training.
Copy all three into the root of the Eyeballer code tree.
Copy both into the root of the Eyeballer code tree.
Additionally, you can find a pretrained weights file you can use right out of the box without training.
1. `bishop-fox-pretrained-vN.h5`
It's here on GitHub, look at the `releases` section for the latest one.
## Predicting Labels
NOTE: For best results, make sure you screenshot your websites in a native 1.6x aspect ratio. IE: 1440x900. Eyeballer will scale the image down automatically to the right size for you, but if it's the wrong aspect ratio then it will squish in a way that will affect prediction performance.
To eyeball some screenshots, just run the "predict" mode:
```
eyeballer.py --model YOUR_MODEL.h5 predict YOUR_FILE.png
eyeballer.py --weights YOUR_WEIGHTS.h5 predict YOUR_FILE.png
```
Or for a whole directory of files:
```
eyeballer.py --model YOUR_MODEL.h5 predict PATH_TO/YOUR_FILES/
eyeballer.py --weights YOUR_WEIGHTS.h5 predict PATH_TO/YOUR_FILES/
```
Eyeballer will spit the results back to you in human readable format (a `results.html` file so you can browse it easily) and machine readable format (a `results.csv` file).
## Performance
Eyeballer's performance is measured against an evaluation dataset, which is 20% of the overall screenshots chosen at random. Since these screenshots are never used in training, they can be an effective way to see how well the model is performing. Here are the latest results:
| Overall Binary Accuracy | 93.52% |
| ------ |:-----:|
| **All-or-Nothing Accuracy** | **76.09%** |
**Overall Binary Accuracy** is probably what you think of as the model's "accuracy". It's the chance, given any single label, that it is correct.
**All-or-Nothing Accuracy** is more strict. For this, we consider all of an image's labels and consider it a failure if ANY label is wrong. This accuracy rating is the chance that the model correctly predicts all labels for any given image.
| Label | Precision | Recall |
| ------ | ------ |:-----:|
| Custom 404 | 80.20% | 91.01% |
| Login Page | 86.41% | 88.47% |
| Webapp | 95.32% | 96.83% |
| Old Looking | 91.70% | 62.20% |
| Parked Domain | 70.99% | 66.43% |
For a detailed explanation on [Precision vs Recall, check out Wikipedia](https://en.wikipedia.org/wiki/Precision_and_recall).
## Training
To train a new model, run:
@@ -91,14 +123,14 @@ eyeballer.py train
You'll want a machine with a good GPU for this to run in a reasonable amount of time. Setting that up is outside the scope of this readme, however.
This will output a new model file (model.h5 by default).
This will output a new model file (weights.h5 by default).
## Evaluation
You just trained a new model, cool! Let's see how well it performs against some images it's never seen before, across a variety of metrics:
```
eyeballer.py --model YOUR_MODEL.h5 evaluate
eyeballer.py --weights YOUR_WEIGHTS.h5 evaluate
```
The output will describe the model's accuracy in both recall and precision for each of the program's labels. (Including "none of the above" as a pseudo-label)
Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

+4 -4
View File
@@ -9,12 +9,12 @@ from jinja2 import Template
@click.group(invoke_without_command=True)
@click.option('--model', default=None, type=click.Path(), help="Model file for input/output")
@click.option('--weights', default=None, type=click.Path(), help="Weights file for input/output")
@click.option('--summary/--no-summary', default=False, help="Print model summary at start")
@click.option('--seed', default=None, type=int, help="RNG seed for data shuffling and transformations, defaults to random value")
@click.pass_context
def cli(ctx, model, summary, seed):
model_kwargs = {"model_file": model,
def cli(ctx, weights, summary, seed):
model_kwargs = {"weights_file": weights,
"print_summary": summary,
"seed": seed}
@@ -54,7 +54,7 @@ def predict(ctx, screenshot, heatmap, threshold):
print(results)
else:
with open("results.csv", "w", newline="") as csvfile:
fieldnames = ["filename", "custom404", "login", "homepage", "oldlooking"]
fieldnames = ["filename", "custom404", "login", "webapp", "oldlooking", "parked"]
labelwriter = csv.DictWriter(csvfile, fieldnames=fieldnames)
labelwriter.writeheader()
labelwriter.writerows(results)
+45 -34
View File
@@ -17,7 +17,7 @@ from tensorflow.keras.applications.mobilenet import preprocess_input
from sklearn.metrics import classification_report, accuracy_score, hamming_loss
from eyeballer.augmentation import EyeballerAugmentation
DATA_LABELS = ["custom404", "login", "homepage", "oldlooking"]
DATA_LABELS = ["custom404", "login", "webapp", "oldlooking", "parked"]
class EyeballModel:
@@ -26,17 +26,17 @@ class EyeballModel:
Contains high-level functions for training, evaluating, and predicting.
"""
graphs_directory = "graphs/"
checkpoint_file = "model.h5"
checkpoint_file = "weights.h5"
image_dir = "images/"
image_width, image_height = 224, 224
input_shape = (image_width, image_height, 3)
def __init__(self, model_file, print_summary=False, seed=None, quiet=False):
def __init__(self, weights_file, print_summary=False, seed=None, quiet=False):
"""Constructor for model class.
Keyword arguments:
print_summary -- Whether or not to print to stdout the keras model summary, containing a detailed description of every model layer
model_file -- A filename for where to load the model's model.
weights_file -- A filename for where to load the model's weights.
seed -- PRNG seed, useful for repeating a previous run and using the same data. Training/Validation split is determined randomly.
"""
# # Build the model
@@ -54,14 +54,25 @@ class EyeballModel:
loss="binary_crossentropy",
metrics=["accuracy"])
# for layer in pretrained_layer.layers:
# layer.trainable = False
if weights_file is not None and os.path.isfile(weights_file):
try:
self.model.load_weights(weights_file)
except OSError:
print("ERROR: Unable to open weights file '{}'".foramt(weights_file))
sys.exit(-1)
print("Loaded model from file.")
else:
if weights_file is not None:
raise FileNotFoundError
print("WARN: No model loaded from file. Generating random model")
if print_summary:
print(self.model.summary())
self.quiet = quiet
self.seed = seed
def _init_labels(self):
# Pull out our labels for use in generators later
data = pd.read_csv("labels.csv")
self.training_labels = data.loc[data['evaluation'] == False] # noqa: E712
@@ -69,7 +80,6 @@ class EyeballModel:
# Shuffle the training labels
self.random_seed = False
self.seed = seed
if self.seed is None:
self.random_seed = True
self.seed = random.randint(0, 999999)
@@ -78,18 +88,6 @@ class EyeballModel:
random.seed(self.seed)
self.training_labels = self.training_labels.sample(frac=1)
if model_file is not None and os.path.isfile(model_file):
try:
self.model = tf.keras.models.load_model(model_file)
except OSError:
print("ERROR: Unable to open model file '{}'".format(model_file))
sys.exit(-1)
print("Loaded model from file.")
else:
if model_file is not None:
raise FileNotFoundError
print("WARN: No model loaded from file. Generating random model")
# Data augmentation
augmentor = Augmentor.Pipeline()
augmentor.set_seed(self.seed)
@@ -105,7 +103,7 @@ class EyeballModel:
self.preprocess_training_function = augmentor.keras_preprocess_func()
def train(self, epochs=20, batch_size=32, print_graphs=False):
"""Train the model, making a new model file at each successfull checkpoint. You'll probably need a GPU for this to realistically run.
"""Train the model, making a new weights file at each successfull checkpoint. You'll probably need a GPU for this to realistically run.
Keyword arguments:
epochs -- The number of epochs to train for. (An epoch is one pass-through of the dataset)
@@ -114,6 +112,7 @@ class EyeballModel:
"""
print("Training with seed: " + str(self.seed))
self._init_labels()
data_generator = tf.keras.preprocessing.image.ImageDataGenerator(
preprocessing_function=self.preprocess_training_function,
validation_split=0.2,
@@ -129,7 +128,7 @@ class EyeballModel:
subset='training',
shuffle=True,
seed=self.seed,
class_mode="other")
class_mode="raw")
validation_generator = data_generator.flow_from_dataframe(
self.training_labels,
directory=self.image_dir,
@@ -140,17 +139,26 @@ class EyeballModel:
subset='validation',
shuffle=False,
seed=self.seed,
class_mode="other")
class_mode="raw")
# Model checkpoint - Saves model when validation accuracy improves
# Model checkpoint - Saves model weights when validation accuracy improves
callbacks = [tf.keras.callbacks.ModelCheckpoint(self.checkpoint_file,
monitor='val_loss',
verbose=1,
save_best_only=True,
save_weights_only=False,
mode='min')]
monitor='val_loss',
verbose=1,
save_best_only=True,
save_weights_only=True,
mode='min'),
tf.keras.callbacks.TensorBoard(log_dir='logs',
histogram_freq=2,
write_graph=True,
write_images=False,
update_freq='epoch',
profile_batch=2,
embeddings_freq=0,
embeddings_metadata=None),
]
history = self.model.fit_generator(
history = self.model.fit(
training_generator,
steps_per_epoch=len(training_generator.filenames) // batch_size,
epochs=epochs,
@@ -197,8 +205,9 @@ class EyeballModel:
result["filename"] = "custom-image"
result["custom404"] = prediction[0][0]
result["login"] = prediction[0][1]
result["homepage"] = prediction[0][2]
result["webapp"] = prediction[0][2]
result["oldlooking"] = prediction[0][3]
result["parked"] = prediction[0][4]
return result
def predict(self, path, threshold=0.5):
@@ -241,8 +250,9 @@ class EyeballModel:
result["filename"] = screenshot
result["custom404"] = prediction[0][0]
result["login"] = prediction[0][1]
result["homepage"] = prediction[0][2]
result["webapp"] = prediction[0][2]
result["oldlooking"] = prediction[0][3]
result["parked"] = prediction[0][4]
results.append(result)
return results
@@ -253,6 +263,7 @@ class EyeballModel:
threshold -- Value between 0->1. The cutoff where the numerical prediction becomes boolean. Default: 0.5
"""
# Prepare the data
self._init_labels()
data_generator = tf.keras.preprocessing.image.ImageDataGenerator(
preprocessing_function=preprocess_input)
evaluation_generator = data_generator.flow_from_dataframe(
@@ -263,7 +274,7 @@ class EyeballModel:
target_size=(self.image_width, self.image_height),
shuffle=False,
batch_size=1,
class_mode="other")
class_mode="raw")
# If a seed was selected, then also evaluate on the validation set for that seed
if not self.random_seed:
print("Using validation set...")
@@ -282,11 +293,11 @@ class EyeballModel:
subset='validation',
shuffle=False,
seed=self.seed,
class_mode="other")
class_mode="raw")
else:
print("Using evaluation set...")
predictions = self.model.predict_generator(
predictions = self.model.predict(
evaluation_generator,
verbose=1,
steps=len(evaluation_generator))
+2 -1
View File
@@ -7,8 +7,9 @@
<button class="btn all" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('custom404')"> 404</button>
<button class="btn" onclick="filterSelection('login')"> Login</button>
<button class="btn" onclick="filterSelection('homepage')"> Home Page</button>
<button class="btn" onclick="filterSelection('webapp')"> Web Application</button>
<button class="btn" onclick="filterSelection('oldlooking')"> Old Looking</button>
<button class="btn" onclick="filterSelection('parked')"> Parked Domain</button>
<select onchange="numOnPage=this.value; filterSelection([]);" style="float:right; margin:5px; margin-right:30px; height:30px; width:auto;">
<option value="25">25</option>
<option value="50">50</option>
+2 -1
View File
@@ -4,7 +4,8 @@ matplotlib
numpy
pandas
pillow
sklearn
scikit-learn
tensorflow
jinja2
progressbar2
scipy
+7 -7
View File
@@ -15,16 +15,16 @@ class PredictTest(unittest.TestCase):
def flush(self): pass
sys.stdout = DummyFile()
model_file = "tests/models/model_file.h5"
if not os.path.isfile(model_file):
print("Error: Symlink the latest model file to " + model_file)
weights_file = "tests/models/test_weights.h5"
if not os.path.isfile(weights_file):
print("Error: Symlink the latest weights file to " + weights_file)
raise FileNotFoundError(
errno.ENOENT,
os.strerror(errno.ENOENT),
model_file)
weights_file)
model_kwargs = {
"model_file": model_file,
"weights_file": weights_file,
"print_summary": False,
"seed": None,
"quiet": True
@@ -33,7 +33,7 @@ class PredictTest(unittest.TestCase):
def test_different_seed_predict(self):
model_kwargs = {
"model_file": None,
"weights_file": None,
"print_summary": False,
"seed": 12345678,
"quiet": True
@@ -49,7 +49,7 @@ class PredictTest(unittest.TestCase):
def test_same_seed_predict(self):
model_kwargs = {
"model_file": None,
"weights_file": None,
"print_summary": False,
"seed": 12345678,
"quiet": True
+3 -2
View File
@@ -1,7 +1,8 @@
#!/bin/bash
# Converts full-size images to a given size (replacing the originals)
for f in images_full_size/*
for f in images/*
do
convert -resize 224x224 $f $f
echo $f
convert -resize 224x224\! $f $f
done
+31
View File
@@ -0,0 +1,31 @@
#!/usr/bin/env python3
import csv
import random
from os import listdir
from os.path import isfile, join
with open("labels.csv", newline="") as csvfile:
# Get the header labels
csvreader = csv.DictReader(csvfile)
# fieldnames = next(csvreader)
file_list = [f for f in listdir("images") if isfile(join("images", f))]
label_list = []
for row in csvreader:
label_list.append(row["filename"])
print(len(file_list), "files")
print(len(label_list), "labels")
# Loop through the file
print("Rows in labels.csv, but no image exists:")
for label in label_list:
if label not in file_list:
print(label)
print("Images that exist, but don't have labels:")
i = 0
for image in file_list:
if image not in label_list:
print(image)
-20
View File
@@ -1,20 +0,0 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*
#Model files
public/jsmodel/*
-20
View File
@@ -1,20 +0,0 @@
{
"name": "eyeballer-webui",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-dropzone": "^10.1.10",
"react-scripts": "0.9.5",
"bootstrap": "^4.3.1",
"@tensorflow/tfjs": "^1.3.2"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

-31
View File
@@ -1,31 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
-23
View File
@@ -1,23 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 100px;
}
.App-header {
background-color: #222;
height: 170px;
padding: 10px;
color: white;
}
.App-intro {
font-size: large;
}
.thumbnail {
height: 280px;
width: 480px;
}
-132
View File
@@ -1,132 +0,0 @@
import React, { Component } from 'react';
import logo from './eyeballer_logo.png';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as tf from '@tensorflow/tfjs';
class App extends Component {
constructor(props) {
super(props);
this.state = {
fileContents: "Try uploading a file",
}
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Eyeballer</h2>
</div>
<PredictButton />
<ImageFile />
</div>
);
}
}
export default App;
class ImageFile extends React.Component {
constructor(props){
super(props);
this.state = {
id : "someUniqueId", // I would use this.props.id for a real world implementation
imageURI : null
}
}
buildImgTag(){
let imgTag = null;
if (this.state.imageURI !== null)
imgTag = (<div className="row">
<div className="small-9 small-centered columns">
<img className="thumbnail" id="thumbnail" alt="Screenshot to be classified" src={this.state.imageURI}></img>
</div>
</div>);
return imgTag;
}
readURI(e){
if(e.target.files && e.target.files[0]){
let reader = new FileReader();
reader.onload = function(ev){
this.setState({imageURI:ev.target.result});
}.bind(this);
reader.readAsDataURL(e.target.files[0]);
}
}
handleChange(e){
this.readURI(e); // maybe call this with webworker or async library?
if (this.props.onChange !== undefined)
this.props.onChange(e); // propagate to parent component
}
render() {
const imgTag = this.buildImgTag();
return <div>
<label
htmlFor={this.state.id}
className="button">
Upload an image
</label>
<input
id={this.state.id}
type="file"
onChange={this.handleChange.bind(this)}
className="show-for-sr" />
{imgTag}
</div>;
}
}
class PredictButton extends Component {
constructor(props) {
super(props);
this.state = {
classification: ""
}
}
onpress = async () => {
const modelUrl = 'jsmodel/model.json';
const model = await tf.loadLayersModel(modelUrl);
const offset = tf.scalar(127.5);
const image = tf.browser.fromPixels(document.getElementById('thumbnail'))
.resizeNearestNeighbor([224,224])
.toFloat()
.sub(offset)
.div(offset)
.expandDims();
const predictions = Array.from(model.predict(image).dataSync());
this.setState({classification: ""});
if (predictions[0] > 0.5) {
this.setState({classification: this.state.classification + "Custom 404, "});
}
if (predictions[1] > 0.5) {
this.setState({classification: this.state.classification + "Login Page, "});
}
if (predictions[2] > 0.5) {
this.setState({classification: this.state.classification + "Homepage, "});
}
if (predictions[3] > 0.5) {
this.setState({classification: this.state.classification + "Old Looking "});
}
}
render() {
return (
<div className="custom-file">
<button className="default" type="button" id="predictButton" onClick={this.onpress}>Classify</button>
{this.state.classification}
</div>
);
}
}
-8
View File
@@ -1,8 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
Binary file not shown.

Before

Width:  |  Height:  |  Size: 962 KiB

-5
View File
@@ -1,5 +0,0 @@
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
-9
View File
@@ -1,9 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);