Commit b23ff275 authored by W.H.M Kasun Sampath's avatar W.H.M Kasun Sampath

Final Project

parent 6d090051
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
kill -9 $(lsof -t -i:5000)
python -W ignore server.py &
sleep 5
npm start
kill -9 $(lsof -t -i:5000)
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 1000, height: 800})
// and load the index.html of the app.
mainWindow.loadURL('http:localhost:5000/')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
app.quit()
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
from keras.models import Sequential
from keras.layers import Dense, Dropout
def mlp(classes):
model = Sequential()
model.add(Dense(units=600, activation='relu', input_dim=784))
model.add(Dropout(0.3))
model.add(Dense(units=400, activation='relu'))
model.add(Dropout(0.3))
model.add(Dense(units=100, activation='relu'))
model.add(Dropout(0.3))
model.add(Dense(units=25, activation='relu'))
model.add(Dropout(0.3))
model.add(Dense(units=classes, activation='softmax'))
return model
from keras.models import Sequential
from keras.layers import Dense, Dropout, Conv2D, MaxPooling2D, Flatten
def conv(classes, input_shape):
model = Sequential()
model.add(Conv2D(32, kernel_size=(3, 3), activation='relu', input_shape=input_shape))
model.add(Conv2D(64, (3, 3), activation='relu'))
model.add(MaxPooling2D(pool_size=(2, 2)))
model.add(Dropout(0.25))
model.add(Flatten())
model.add(Dense(128, activation='relu'))
model.add(Dropout(0.5))
model.add(Dense(classes, activation='softmax'))
return model
This diff is collapsed.
{
"name": "doodle-classifier",
"version": "1.0.0",
"description": "Use a neural network to classify hand-drawn fruits",
"main": "main.js",
"name": "smarties",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/lab": "^4.0.0-alpha.60",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@workday/canvas-kit-react-text-input": "^4.8.1",
"chart.js": "^3.5.1",
"material-ui": "^0.20.2",
"ml5": "0.1.1",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-canvas-draw": "^1.1.1",
"react-chartjs-2": "^3.0.5",
"react-dom": "^17.0.2",
"react-hook-speech-to-text": "^0.7.0",
"react-horizontal-timeline": "^1.5.3",
"react-modal-video": "^1.2.8",
"react-scripts": "4.0.3",
"react-signature-canvas": "^1.0.3",
"react-simple-chatbot": "^0.6.1",
"react-speech-recognition": "^3.8.2",
"react-toastify": "^8.0.3",
"styled-components": "^5.3.0",
"tesseract.js": "^1.0.14",
"tesseract.ts": "^1.1.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "electron ."
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"repository": "",
"keywords": [
"Electron",
"tensorflow",
"neural network",
"classify",
"doodle"
],
"devDependencies": {
"electron": "^1.8.4"
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"json-loader": "^0.5.7",
"react-router-dom": "^5.2.0"
}
}
import numpy as np
import os
from PIL import Image
def load(dir, files, reshaped):
"Load .npy or .npz files from disk and return them as numpy arrays. \
Takes in a list of filenames and returns a list of numpy arrays."
data = []
for file in files:
f = np.load(dir + file)
if reshaped:
new_f = []
for i in range(len(f)):
x = np.reshape(f[i], (28, 28))
x = np.expand_dims(x, axis=0)
x = np.reshape(f[i], (28, 28, 1))
new_f.append(x)
f = new_f
data.append(f)
return data
def normalize(data):
"Takes a list or a list of lists and returns its normalized form"
return np.interp(data, [0, 255], [-1, 1])
def denormalize(data):
"Takes a list or a list of lists and returns its denormalized form"
return np.interp(data, [-1, 1], [0, 255])
def visualize(array):
"Visulaze a 2D array as an Image"
img = Image.fromarray(array)
img.show(title="Visulizing array")
def set_limit(arrays, n):
"Limit elements from each array up to n elements and return a single list"
new = []
for array in arrays:
i = 0
for item in array:
if i == n:
break
new.append(item)
i += 1
return new
def make_labels(N1, N2):
"make labels from 0 to N1, each repeated N2 times"
labels = []
for i in range(N1):
labels += [i] * N2
return labels
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/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"
/>
<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`.
-->
<title>React App</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>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
from flask import Flask, render_template, request
import numpy as np
import re
import base64
from PIL import Image
#import imageio
from scipy.misc import imsave,imread, imresize
#from scipy import misc
from tensorflow.keras.models import load_model
from prepare_data import normalize
import json
app = Flask(__name__)
mlp = load_model("./models/mlp_94.h5")
conv = load_model("./models/conv_97.h5")
FRUITS = {0: "Apple", 1: "Banana", 2: "Grape", 3: "Pineapple"}
@app.route("/", methods=["GET", "POST"])
def ready():
if request.method == "GET":
return render_template("index1.html")
if request.method == "POST":
data = request.form["payload"].split(",")[1]
net = request.form["net"]
img = base64.b64decode(data)
with open('temp.png', 'wb') as output:
output.write(img)
x = imread('temp.png', mode='L')
# resize input image to 28x28
x = imresize(x, (28, 28))
if net == "MLP":
model = mlp
# invert the colors
x = np.invert(x)
# flatten the matrix
x = x.flatten()
# brighten the image a bit (by 60%)
for i in range(len(x)):
if x[i] > 50:
x[i] = min(255, x[i] + x[i] * 0.60)
if net == "ConvNet":
model = conv
x = np.expand_dims(x, axis=0)
x = np.reshape(x, (28, 28, 1))
# invert the colors
x = np.invert(x)
# brighten the image by 60%
for i in range(len(x)):
for j in range(len(x)):
if x[i][j] > 50:
x[i][j] = min(255, x[i][j] + x[i][j] * 0.60)
# normalize the values between -1 and 1
x = normalize(x)
val = model.predict(np.array([x]))
pred = FRUITS[np.argmax(val)]
classes = ["Apple", "Banana", "Grape", "Pineapple"]
print (pred)
print (list(val[0]))
return render_template("index1.html", preds=list(val[0]), classes=json.dumps(classes), chart=True, putback=request.form["payload"], net=net)
app.run()
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
import './App.css';
import React from 'react';
import {useState} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import PrivateRoute from '../src/pages/component/PrivateRoute';
import MainLayout from "./layouts/MainLayout";
import Login from './pages/Login';
import SignUp from "./pages/SignUp";
import IndividualIntro from "./pages/IndividualIntro";
import Timelines from "./pages/timeline";
import Draw from "./pages/component/draw";
import Grade from "./pages/Grade.js";
import Home from "./pages/Home";
import KinderArt from "./pages/KiderArt"
import LetStart from "./pages/component/LetStart";
import Progress from "./pages/Progress";
import ReportKinderArt from "./pages/ReportKinderArt";
import ReportMath from "./pages/ReportMath"
import ReportSpeak from "./pages/ReportSpeak";
import Talk from "./pages/Talk";
import PlayWithMath from './pages/PlayWithMath'
import AdditionSelect from "./pages/AdditionSelect";
import DrawFruitTimeline from './pages/DrawFruitsTimeline'
import Identification from './pages/identification';
import NumberIdentify from './pages/NumberIdentify';
import Pronunciation from './pages/Pronunciation'
import Chat from './pages/ChatBot'
import Chips from './pages/check'
import ChatEnter from "./pages/ChatEnter";
import {MathMarksContext} from './Context/MathMarks'
import {TalkMarksContext} from './Context/TalkMarks'
import {DrawMarksContext} from "./Context/DrawMarks";
function App() {
const[mathMarks,setMathMarks] = useState([0,0,0,0,0,0]);
const[talkMarks,setTalkMarks] = useState([0,0,0,0,0,0]);
const[drawMarks,setDrawMarks] = useState([0,0,0]);
return (
<MathMarksContext.Provider value={[mathMarks,setMathMarks]}>
<TalkMarksContext.Provider value={[talkMarks,setTalkMarks]}>
<DrawMarksContext.Provider value={[drawMarks,setDrawMarks]}>
<BrowserRouter>
<MainLayout>
<Switch>
<Route exact path='/' component={Login}/>
<Route exact path='/login' component={Login}/>
<Route exact path='/signup' component={SignUp}/>
<PrivateRoute exact path='/individualIntro' component={IndividualIntro}/>
<PrivateRoute exact path='/timeline' component={Timelines}/>
<PrivateRoute exact path='/draw' component={Draw}/>
<PrivateRoute exact path='/home' component={Home}/>
<PrivateRoute exact path='/kinderArt' component={KinderArt}/>
<PrivateRoute exact path='/letStart' component={LetStart}/>
<PrivateRoute exact path='/progress' component={Progress}/>
<PrivateRoute exact path='/reportKinderArt' component={ReportKinderArt}/>
<PrivateRoute exact path='/reportMath' component={ReportMath}/>
<PrivateRoute exact path='/reportSpeak' component={ReportSpeak}/>
<PrivateRoute exact path='/talk' component={Talk}/>
<PrivateRoute exact path='/selectGrade' component={Grade}/>
<PrivateRoute exact path='/playWithMath' component={PlayWithMath}/>
<PrivateRoute exact path='/additionSelect' component={AdditionSelect}/>
<PrivateRoute exact path='/drawFruitTimeline' component={DrawFruitTimeline}/>
<PrivateRoute exact path='/identification' component={Identification}/>
<PrivateRoute exact path='/numberIdentify' component={NumberIdentify}/>
<PrivateRoute exact path='/pronunciation' component={Pronunciation}/>
<PrivateRoute exact path='/chips' component={Chips}/>
<PrivateRoute exact path='/chat' component={Chat}/>
<PrivateRoute exact path='/chatEnter' component={ChatEnter}/>
</Switch>
</MainLayout>
</BrowserRouter>
</DrawMarksContext.Provider>
</TalkMarksContext.Provider>
</MathMarksContext.Provider>
);
}
export default App;
import {render, screen} from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App/>);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
import { createContext } from 'react';
export const AuthContext = createContext(0);
\ No newline at end of file
import { createContext } from 'react';
export const DrawMarksContext = createContext([0,0,0]); //[level,correct,total]
\ No newline at end of file
import { createContext } from 'react';
export const MathMarksContext = createContext([0,0,0,0,0,0]); //[addition level,addition correct,addition total,numberid level,number idi correct,total]
\ No newline at end of file
import { createContext } from 'react';
export const SelectionMarksContext = createContext(0);
\ No newline at end of file
import { createContext } from 'react';
export const TalkMarksContext = createContext([0,0,0,0,0,0]); //[Identification level,Identification correct,Identification total,Pronunciation level,Pronunciation correct,Pronunciation total]
\ No newline at end of file
import { createContext } from 'react';
export const TotalAdditionContext = createContext(0);
\ No newline at end of file
@font-face {
font-family: "Jokerman";
src: url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.eot");
src: url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.woff") format("woff"), url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.svg#Jokerman") format("svg");
}
\ No newline at end of file
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
This diff is collapsed.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
This diff is collapsed.
import React from 'react';
import ChatBot from 'react-simple-chatbot';
import {ThemeProvider} from 'styled-components'
import themeX from '../theme/index'
import {Grid} from '@material-ui/core';
import bg from "../images/bg.jpeg";
import ChartMath from './component/ChartMath'
import ChartKiderArt from "./component/ChartKiderArt";
import ChartSpeak from "./component/ChartSpeak";
const theme = {
background: 'transparent',
fontFamily: 'Comic Sans MS',
headerBgColor: themeX.palette.primary.main,
headerFontColor: '#fff',
headerFontSize: '35px',
botBubbleColor: 'transparent',
botFontColor: '#000',
userBubbleColor: '#fff',
userFontColor: '#4a4a4a',
};
class Chat extends React.Component {
render() {
return (
<container>
<Grid style={{
backgroundImage: `url(${bg})`,
backgroundOverlay: "black",
width: "85%",
backgroundPosition: "center",
backgroundSize: "100%"
}}>
<Grid style={{justifyContent: 'center', backgroundColor: "rgba(255, 255, 255, 0.85)",}}>
<ThemeProvider theme={theme}>
<ChatBot style={{botFontColor: 'red'}}
steps={[
{
id: '1',
message: 'What is your name?',
trigger: '2',
},
{
id: '2',
user: true,
trigger: '3',
},
{
id: '3',
message: 'Hi {previousValue}, what would you like to know?',
trigger: '4',
},
{
id: '4',
options: [
{ value: 1, label: 'Report of Play with Math', trigger: '5' },
{ value: 2, label: 'Report of Speak with SMARTE\'s', trigger: '6' },
{ value: 3, label: 'Report of Kinder Art', trigger: '7' },
],
},
// {
// id: '4',
// user: true,
// trigger: '5',
// },
{
id: '5',
component: (
<div> <ChartMath/> </div>
),
trigger: '8',
},
{
id: '6',
component: (
<div> <ChartSpeak/> </div>
),
trigger: '8',
},
{
id: '7',
component: (
<div> <ChartKiderArt/></div>
),
trigger: '8',
},
{
id: '8',
message: 'Do you need more report?',
trigger: '9',
},
{
id: '9',
options: [
{ value: 1, label: 'Yes', trigger: '4' },
{ value: 2, label: 'No', trigger: '10' },
],
},
{
id: '10',
message: 'Do you Require any suggestions to improve?',
trigger: '11',
},
{
id: '11',
options: [
{ value: 1, label: 'Yes', trigger: '12' },
{ value: 2, label: 'No', trigger: '13' },
],
},
// {
// id: '11',
// user: true,
// trigger: '14',
// },
{
id: '12',
message: 'https://www.youtube.com/watch?v=S-PJwUVwoiI',
trigger: '13',
},
{
id: '13',
message: 'Thank You, Bye...',
// trigger: '15',
end:true,
},
]}
/>
</ThemeProvider>
</Grid>
</Grid>
</container>
)
}
}
export default Chat;
import React from 'react';
import ChatBot from 'react-simple-chatbot';
import {ThemeProvider} from 'styled-components'
import themeX from '../theme/index'
import {Button, Grid} from '@material-ui/core';
import bg from "../images/bg.jpeg";
import Typography from '@material-ui/core/Typography';
import bot from '../images/bot.png'
import {useHistory} from "react-router";
const theme = {
background: 'transparent',
fontFamily: 'Comic Sans MS',
headerBgColor: themeX.palette.primary.main,
headerFontColor: '#fff',
headerFontSize: '35px',
botBubbleColor: 'transparent',
botFontColor: '#000',
userBubbleColor: '#fff',
userFontColor: '#4a4a4a',
};
class ChatEnter extends React.Component {
handleClick = e => {
this.props.history.push("/chat");
};
render() {
return (
<container>
<Grid container style={{
backgroundImage: `url(${bg})`,
backgroundOverlay: "black",
width: "85%",
backgroundPosition: "center",
backgroundSize: "100%"
}}>
<Grid container style={{justifyContent: 'center', backgroundColor: "rgba(255, 255, 255, 0.85)",}}>
<Grid container item style={{justifyContent: 'center'}}>
<Grid container item style={{
height: 520,
width: 350,
border: "1px solid black",
borderRadius: 10,
paddingBottom: 50
}}>
<Grid container item style={{
height: 56,
backgroundColor: themeX.palette.primary.main,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
justifyContent: 'center'
}}>
<Typography variant='h5' style={{
fontFamily: 'Comic Sans MS',
color: 'white',
fontWeight: 'bold',
paddingTop: 16
}}>
Welcome to ChatBot
</Typography>
</Grid>
<Grid container item style={{justifyContent: 'center'}}>
<Grid item md={3}></Grid>
<Grid item md={6}>
<Typography variant="h3" style={{fontFamily: 'Comic Sans MS'}}>
Hello
</Typography>
</Grid>
<Grid item md={3}></Grid>
<Grid item md={3}></Grid>
<Grid item md={6}>
<Typography variant="h5" style={{fontFamily: 'Comic Sans MS'}}>
<Typography variant="h6" lign="center"
style={{fontFamily: 'Comic Sans MS'}}>
I'm Chatty
</Typography>
</Typography>
</Grid>
<Grid item md={3}></Grid>
<Grid container item>
<Grid item md={3}></Grid>
<Grid item md={6} style={{justifyContent: 'center'}}>
<img align='center' src={bot} style={{height: 100, width: 100}}/>
</Grid>
<Grid item md={3}></Grid>
</Grid>
<Grid item>
<Typography variant="h5" lign="center" style={{fontFamily: 'Comic Sans MS'}}>
<Typography variant="h6" lign="center"
style={{fontFamily: 'Comic Sans MS'}}>
How can I help you?
</Typography>
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" style={{fontFamily: 'Comic Sans MS'}}>
<Button variant="h6"
onClick={this.handleClick}
style={{fontFamily: 'Comic Sans MS', border: "1px solid black"}}>
I want to know...
</Button>
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</container>
)
}
}
export default ChatEnter;
This diff is collapsed.
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import {useHistory} from "react-router";
import bg from '../images/bg.jpeg'
export default function Home() {
let history = useHistory()
return (
<container >
<Grid container style={{backgroundImage: `url(${bg})`,backgroundOverlay:"black",width:"85%",backgroundPosition:"center",backgroundSize:"100%"}}>
<Grid container item style={{backgroundColor:"rgba(255, 255, 255, 0.7)",height:500}} >
<Grid container item>
<Grid container md={3}>
</Grid>
<Grid item md={6}>
<Grid item style={{width:"100%",justifyContent:"center",paddingBottom:0}}>
<Typography align="center" style={{ maxWidth: "100%",margin:15,opacity:0.6 ,fontFamily:"Comic Sans MS",fontStyle:"italic", fontSize:35}} >Join Smarties</Typography>
</Grid>
<Grid item style={{paddingTop:35,width:"100%",justifyContent:"center",paddingBottom:0}}>
<Button onClick={
() => {
history.push({
pathname: '/home',
})
}
} align="center" style={{borderRadius:0, width: "80%",fontFamily:"Comic Sans MS",fontStyle:"italic",color:"white",padding:15,fontSize:30,margin:5,backgroundColor:"#1986aa",opacity:0.6}} >Grade 1</Button>
<Button onClick={
() => {
history.push({
pathname: '/home',
})
}
} align="center" style={{ borderRadius:0, width: "80%",fontFamily:"Comic Sans MS",fontStyle:"italic",color:"white",padding:15,fontSize:30,margin:5,backgroundColor:"#1986aa",opacity:0.6}} >Grade 2</Button>
<Button onClick={
() => {
history.push({
pathname: '/home',
})
}
} align="center" style={{ borderRadius:0, width: "80%",fontFamily:"Comic Sans MS",fontStyle:"italic",color:"white",padding:15,fontSize:30,margin:5,backgroundColor:"#1986aa",opacity:0.6}} >Grade 3</Button>
</Grid>
</Grid>
<Grid container md={3}>
</Grid>
</Grid>
</Grid>
</Grid>
</container>
);
}
\ No newline at end of file
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import {makeStyles} from '@material-ui/core/styles';
import {Link} from 'react-router-dom';
// import {AlertSnack} from '../pages/component';
// import {AuthContext} from '../context/AuthContext';
import mainImag from "../images/mainImag.jpg"
import slogo from "../images/slogo.png"
import CssBaseline from "@material-ui/core/CssBaseline";
import Avatar from "@material-ui/core/Avatar";
import LockOpenOutlined from "@material-ui/icons/LockOpenOutlined";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import themeX from "../theme";
import {useHistory} from "react-router";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1
},
menuButton: {
marginRight: theme.spacing(2)
},
title: {
flexGrow: 1
},
headerBar: {
display: 'flex',
marginTop: '6rem'
},
main: {
display: 'flex',
minHeight: window.innerHeight
}
}));
export default function Home() {
const classes = useStyles();
let history = useHistory()
return (
<container>
<Grid item>
<Grid container item>
<Grid container item style={{justifyContent: 'center', height: "100%"}}>
<Grid item md={6}>
<img style={{padding: 5, margin: 2, maxWidth: "100%", opacity: 0.8}} src={mainImag}></img>
</Grid>
<Grid container item md={6} style={{justifyContent: "center"}}>
<img style={{padding: 5, margin: 2, maxWidth: "50%", maxHeight: "15%", opacity: 0.6}}
src={slogo}></img>
<Grid item style={{width: "100%", justifyContent: "center", paddingBottom: 0}}>
<Typography align="center"
style={{maxWidth: "60%", margin: 15, opacity: 0.6, fontSize: 20}}>A smart
way to recommend primary student(Grade 1-3) course using their skills.</Typography>
</Grid>
<Grid item
style={{paddingTop: 35, width: "100%", justifyContent: "center", paddingBottom: 0}}>
<Grid container item md={3}></Grid>
<Grid container item md={6}>
<Button
onClick={
() => {
history.push('/kinderArt')
}
}
align="center" style={{
borderRadius: 0,
maxWidth: "100%",
fontFamily: "papyrus",
color: "white",
fontWeight: "bold",
width: '100%',
paddingTop: 20,
paddingBottom: 20,
marginBottom: 10,
backgroundColor: "#1986aa"
}}>Kinder Art</Button>
<Button
onClick={
() => {
history.push('/playWithMath')
}
}
align="center" style={{
borderRadius: 0,
maxWidth: "100%",
fontFamily: "papyrus",
color: "white",
fontWeight: "bold",
width: '100%',
paddingTop: 20,
paddingBottom: 20,
marginBottom: 10,
backgroundColor: "#1986aa"
}}>Play With Math</Button>
<Button
onClick={
() => {
history.push('/talk')
}
}
align="center" style={{
borderRadius: 0,
maxWidth: "100%",
fontFamily: "papyrus",
color: "white",
fontWeight: "bold",
width: '100%',
paddingTop: 20,
paddingBottom: 20,
backgroundColor: "#1986aa"
}}>Talk With Smarti'es</Button>
</Grid>
<Grid container item md={3}></Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</container>
);
}
\ No newline at end of file
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import individualIntro1 from "../images/individualIntro1.png"
import individualIntro2 from "../images/individualIntro2.png"
import individualIntro3 from "../images/individualIntro3.png"
import Image from "../images/individualIntroBg.png";
const IndividualIntro = ({children}) => {
return (
<container>
<Grid container item style={{backgroundImage: `url(${Image})`,
backgroundPosition: 'center',backgroundSize:"60%",backgroundRepeat : 'no-repeat',}}>
<Grid container item style={{justifyContent: 'center',backgroundColor:"rgba(255, 255, 255, 0.6)",}}>
<Typography style={{margin:50,fontSize:30,fontFamily: "papyrus",
fontWeight: "bold",}} >
Start Here
</Typography>
<Grid container item >
<Grid container item style={{marginLeft:40,marginRight:40}}>
<Grid container style={{height:200}} item md={3} >
<img style={{height:200, border: "1px solid black"}} src={individualIntro1}/>
</Grid>
<Grid container item md={3} >
</Grid>
<Grid container style={{height:200}} item md={3} >
<img style={{height:200, border: "1px solid black"}} src={individualIntro3}/>
</Grid>
<Grid container item md={3}>
</Grid>
</Grid>
<Grid container item >
<Grid container item md={3}>
</Grid>
<Grid container style={{height:200}} item md={3} >
<img style={{height:200, border: "1px solid black"}} src={individualIntro2}/>
</Grid>
<Grid container item md={3} >
</Grid>
<Grid container style={{height:200}} item md={3} >
<img style={{height:200, border: "1px solid black"}} src={individualIntro2}/>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</container>
);
};
export default IndividualIntro;
\ No newline at end of file
This diff is collapsed.
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import mainImag from "../images/mainImag.jpg"
import themeX from "../theme";
export default function LetStart(){
return(
<Container>
<Grid item>
<Grid container item>
<Grid container md={6}>
<img style={{padding:5,margin:2,maxWidth: "100%",opacity:0.8}} src={mainImag}></img>
</Grid>
<Grid container md={6} >
<Grid container item style={{width:"100%",height:"10%",justifyContent:"center" , paddingTop:150}}>
<Button align="center" style={{ maxWidth: "100%",fontFamily:"Comic Sans MS",fontStyle:"italic",color:"white",borderRadius:0,paddingLeft:100,paddingBottom:30,paddingTop:30,paddingRight:100,fontSize:30,margin:15,backgroundColor:themeX.palette.primary.main}} >Let's Start</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
)
}
\ No newline at end of file
import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOpenOutlined from '@material-ui/icons/LockOpenOutlined';
import Typography from '@material-ui/core/Typography';
import {makeStyles} from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import themeX from "../theme/index"
import bg from "../images/bg.jpeg"
import '../fonts/index.css'
import {useHistory} from "react-router";
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(6),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(3),
backgroundColor: themeX.palette.primary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function Login() {
const classes = useStyles();
let history = useHistory()
return (
<Container style={{justifyContent: 'center', height: "100%",}} component="main">
<CssBaseline/>
<Grid item container style={{
backgroundImage: `url(${bg})`, backgroundHeight: 300, backgroundOverlay: "black",
backgroundPosition: 'center', backgroundSize: 'cover'
}}>
<Grid item container style={{backgroundColor: "rgba(255, 255, 255, 0.8)",}}>
<Grid container md={3}>
</Grid>
<Grid container md={6}>
<Grid item style={{padding: 20}}>
<Typography style={{
fontFamily: "papyrus",
fontWeight: "bold",
fontSize: "30px",
margin: 40
}}> SignIn</Typography>
<Avatar fontSize="large" className={classes.avatar}>
<LockOpenOutlined/>
</Avatar>
<hr align="center" style={{width: "50%",}}/>
<form className={classes.form} noValidate>
<TextField
color="white"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
borderColor="black"
/>
<FormControlLabel
control={<Checkbox value="remember" style={{color: themeX.palette.primary.main}}/>}
label="Remember me"
/>
<Button
type="submit"
fullWidth
color="white"
variant="contained"
style={{
backgroundColor: themeX.palette.primary.main,
color: "white",
fontFamily: 'jokerman-regular, sans-serif'
}}
className={classes.submit}
>
Sign In
</Button>
<Grid container>
<Grid item md={6} justifyContent="left"
>
<Link onClick={
() => {
history.push('/signup')
}
} variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item md={6}>
<Link onClick={
() => {
history.push('/signup')
}
} variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</Grid>
</Grid>
<Grid container md={3}>
</Grid>
</Grid>
</Grid>
</Container>
);
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment