Add mlp backend

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

.eslintrc.js

@@ -0,0 +1,32 @@
+module.exports = {
+  extends: ['airbnb-typescript', 'eslint-config-prettier'],
+  parserOptions: {
+    project: './tsconfig.eslint.json',
+  },
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        printWidth: 80,
+        arrowParens: 'avoid',
+        trailingComma: 'all',
+        endOfLine: 'auto',
+      },
+    ],
+    // incompatible with prettier
+    'react/jsx-curly-newline': 'off',
+    'react/jsx-indent': 'off',
+    'react/jsx-wrap-multilines': 'off',
+    'react/jsx-closing-tag-location': 'off',
+    'react/no-array-index-key': 'warn',
+    '@typescript-eslint/indent': 'off',
+
+    // we're using typescript, so we have prop types
+    'react/prop-types': 'off',
+
+    // personal preference
+    'react/jsx-props-no-spreading': 'off',
+  },
+};

package.json

@@ -7,36 +7,55 @@
   "dependencies": {
     "@material-ui/core": "4.11.0",
     "@material-ui/icons": "4.9.1",
+    "@material-ui/styles": "4.11.3",
     "@testing-library/jest-dom": "4.2.4",
     "@testing-library/react": "9.3.2",
     "@testing-library/user-event": "7.1.2",
     "@types/jest": "26.0.13",
     "@types/node": "14.14.10",
     "@types/react": "16.9.49",
     "@types/react-dom": "16.9.8",
+    "@visx/axis": "^1.7.0",
+    "@visx/event": "1.7.0",
+    "@visx/gradient": "1.7.0",
+    "@visx/grid": "^1.7.0",
+    "@visx/group": "1.7.0",
+    "@visx/mock-data": "1.7.0",
+    "@visx/scale": "1.7.0",
+    "@visx/shape": "1.8.0",
+    "@visx/voronoi": "1.7.0",
     "autoprefixer": "10.0.2",
-    "chart.js": "2.9.3",
+    "chart.js": "2.9.4",
     "chartjs-plugin-dragdata": "1.1.3",
+    "csstype": "3.0.6",
     "distance-to-line-segment": "0.2.0",
     "filter": "0.1.1",
     "flowpoints": "1.0.18",
     "gaussian-convolution-kernel": "1.0.0",
     "jsxgraph": "1.2.1",
+    "hog-features": "1.0.0",
+    "image-js": "0.31.4",
+    "jimp": "0.16.1",
+    "mathjs": "^9.3.0",
     "ml-dataset-iris": "1.1.1",
     "ml-distance-euclidean": "2.0.0",
     "ml-kmeans": "5.0.0",
     "ml-pca": "4.0.1",
     "node-forge": "0.10.0",
     "pixelmatch": "5.2.1",
-    "postcss": "8.0.4",
+    "postcss": "8.1.3",
     "postcss-cli": "7.1.2",
     "python-bridge": "1.1.0",
     "randomcolor": "0.6.2",
     "react": "16.13.1",
     "react-chartjs-2": "2.10.0",
     "react-dom": "16.13.1",
+    "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "serialize-javascript": "4.0.0",
+    "tailwind": "4.0.0",
+    "tailwindcss": "1.9.6",
+    "tailwindcss-blend-mode": "1.0.0",
     "typeface-open-sans": "0.0.75",
     "typeface-roboto": "0.0.75",
     "typeface-roboto-mono": "0.0.75",
@@ -48,30 +67,37 @@
     "@testing-library/react": "9.3.2",
     "@testing-library/user-event": "7.1.2",
     "@types/jest": "26.0.13",
-    "@types/node": "14.6.4",
+    "@types/node": "14.14.10",
     "@types/randomcolor": "0.5.5",
     "@types/react": "16.9.49",
     "@types/react-dom": "16.9.8",
     "@types/react-router-dom": "5.1.7",
+    "@visx/tooltip": "^1.7.2",
+    "@typescript-eslint/eslint-plugin": "4.14.1",
+    "@typescript-eslint/parser": "4.14.1",
+    "eslint": "7.19.0",
+    "eslint-config-airbnb-typescript": "12.0.0",
+    "eslint-config-prettier": "7.2.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-react-hooks": "4.2.0",
     "postcss": "8.1.13",
     "postcss-cli": "7.1.2",
+    "prettier": "2.2.1",
     "react-scripts": "4.0.1",
-    "tailwind": "4.0.0",
-    "tailwindcss": "1.9.6",
-    "tailwindcss-blend-mode": "1.0.0",
     "typescript": "4.0.2"
   },
   "scripts": {
     "start": "npm run watch:css && react-scripts start",
     "build": "npm run build:css && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "lint": "eslint . --fix",
     "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
     "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

postcss.config.js

@@ -1,6 +1,5 @@
 const tailwindcss = require('tailwindcss');
+
 module.exports = {
-    plugins: [
-        tailwindcss('./tailwind.config.js')
-    ]
+  plugins: [tailwindcss('./tailwind.config.js')],
 };

public/index.html

@@ -1,44 +1,28 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en-us">
   <head>
     <meta charset="utf-8" />
-    <!--<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />-->
-    <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="A student-developed project to teach students about artificial intelligence techniques using interactive demos"/>
+    <meta name="keywords" content="a-eye, artificial intelligence, sandbox, northeastern"/>
+    <meta name="author" content="SandboxNU"/>
+    <meta property="og:title" content="Your Eye and A-Eye" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://a-eye.sandboxnu.com" />
+    <meta property="og:image" content="%PUBLIC_URL%/logo192.png"/>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags 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`.
-    -->
+    <meta name="twitter:card" content="summary"/>
+    <meta name="twitter:description" content="A student-developed project to teach students about artificial intelligence techniques using interactive demos"/>
+    <meta name="twitter:title" content="Your Eye and AI"/>
+    <meta name="twitter:site" content="https://a-eye.sandboxnu.com"/>
+    <meta name="twitter:image" content="%PUBLIC_URL%/logo192.png"/>
     <title>Your Eye and AI</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <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` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

public/manifest.json

@@ -1,6 +1,8 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "A-Eye",
+  "name": "Your Eye and A-Eye",
+  "version": "0.0.1",
+  "manifest_version": 2,
   "icons": [
     {
       "src": "favicon.ico",

src/App.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { createMuiTheme } from '@material-ui/core/styles';

src/App.jsx

@@ -0,0 +1,51 @@
+/* eslint-disable */
+import React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
+import Navbar from './Navbar';
+import Footer from './footer';
+
+import './index.css';
+import AboutPage from './aboutPage/AboutPage';
+import LandingPage from './landingPage/LandingPage';
+import ModulePage from './modulePage/ModulePage';
+
+// change colors as needed
+const THEME = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#394D73', // same as footer color
+    },
+    secondary: {
+      main: '#0FD4C0', // logo teal
+    },
+  },
+});
+
+function App() {
+  return (
+    <BrowserRouter>
+      <div className="App" id="app">
+        <ThemeProvider theme={THEME}>
+          <div className="App-header">
+            <Navbar />
+          </div>
+          <main className="font-mono text-lg font-charcoal">
+            <Switch>
+              <Route exact path="/" component={LandingPage} />
+              <Route path="/home" component={LandingPage} />
+              <Route path="/modules/:module" component={ModulePage} />
+              <Route path="/about" component={AboutPage} />
+            </Switch>
+          </main>
+          <div>
+            <Footer />
+          </div>
+        </ThemeProvider>
+      </div>
+    </BrowserRouter>
+  );
+}
+
+export default App;

src/ModuleDropdown.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import descriptions from './media/modules/module_descriptions.json';
 
@@ -20,7 +21,7 @@ export default class ModuleDropdown extends React.Component {
                     <br/>
                     {
                         descriptions.modules.map((module) =>
-                            <div className="py-1 mx-2 text-left">
+                            <div className="py-1 mx-2 text-left" key={module.dropdownTitle}>
                                 <a className="text-xs uppercase font-opensans font-bold text-white hover:text-moduleTeal" href={`/modules/${module.path}`} key={module.number.toString()}>
                                     {module.dropdownTitle}
                                 </a>

src/ModuleDropdown.jsx

@@ -0,0 +1,48 @@
+/* eslint-disable */
+import React, { useState } from 'react';
+import descriptions from './media/modules/module_descriptions.json';
+
+export default function ModuleDropdown() {
+  const [buttonHover, setButtonHover] = useState(false);
+  const [dropdownHover, setDropdownHover] = useState(false);
+
+  return (
+    <div className="">
+      <button
+        type="button"
+        onMouseOver={() => setButtonHover(true)}
+        onFocus={() => setButtonHover(true)}
+        onMouseOut={() => setButtonHover(false)}
+        onBlur={() => setButtonHover(false)}
+      >
+        <p className="text-xs text-white uppercase font-opensans font-bold">
+          Modules
+        </p>
+      </button>
+      <div
+        className={`absolute ${
+          !(buttonHover || dropdownHover) && 'hidden'
+        } -mt-1 -ml-10 justify-start rounded-b divide-y divide-moduleDarkBlue bg-navbar`}
+        onMouseOver={() => setDropdownHover(true)}
+        onFocus={() => setDropdownHover(true)}
+        onMouseOut={() => setDropdownHover(false)}
+        onBlur={() => setDropdownHover(false)}
+      >
+        <br />
+        {descriptions.modules
+          .filter(({ active }) => active)
+          .map(module => (
+            <div className="py-1 mx-2 text-left">
+              <a
+                className="text-xs uppercase font-opensans font-bold text-white hover:text-moduleTeal"
+                href={`/modules/${module.path}`}
+                key={module.number.toString()}
+              >
+                {module.dropdownTitle}
+              </a>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+}