Skip to content

2
2023-142
Commit 0f807f7d authored by IT20013950 Lakshani N.V.M.'s avatar IT20013950 Lakshani N.V.M.
Browse files
Options

Revert "fix: remove unnecessary code" 

This reverts commit d3f12845.
parent 4521d87e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 41573 additions and 0 deletions
Models/K-Nearest-Neighbour/Model_training_KNN.ipynb 0 → 100644
View file @ 0f807f7d
This diff is collapsed.
Models/Logistic Regression/Untitled51.ipynb 0 → 100644
View file @ 0f807f7d
This diff is collapsed.
Models/Random Forest/Model_Training_RF.ipynb 0 → 100644
View file @ 0f807f7d
This diff is collapsed.
Models/Support Vector Machine/Model_Training_SVM.ipynb 0 → 100644
View file @ 0f807f7d
This diff is collapsed.
frontend/.gitignore 0 → 100644
View file @ 0f807f7d
# 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*
frontend/package-lock.json 0 → 100644
View file @ 0f807f7d
This diff is collapsed.
frontend/package.json 0 → 100644
View file @ 0f807f7d
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.5",
"@mantine/core": "6.0.0",
"@mantine/hooks": "6.0.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.2.3",
"@types/node": "^18.11.9",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.11.2",
"react-scripts": "5.0.1",
"typescript": "^4.9.3",
"web-vitals": "^3.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"typecheck": "tsc --noEmit"
},
"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"
]
}
}
frontend/public/index.html 0 → 100644
View file @ 0f807f7d
<!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>
frontend/public/manifest.json 0 → 100644
View file @ 0f807f7d
{
"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"
}
frontend/public/robots.txt 0 → 100644
View file @ 0f807f7d
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
frontend/src/App.tsx 0 → 100644
View file @ 0f807f7d
import { createStyles } from "@mantine/core";
import { ThemeProvider } from "./ThemeProvider";
import { NavbarSimpleColored } from "./Components/NavBar/NavBar";
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Knn from "./Components/k-NN/k-NN";
import SVM from "./Components/SVM/SVM";
import RandomForest from "./Components/RandomForest/RandomForest";
import LogisticRegression from "./Components/LogisticRegression/LogisticRegression";
import Settings from "./Components/Settings/Settings";
import Home from "./Components/Home/Home";
const useStyles = createStyles((theme) => ({
sections: {
display: "flex",
flexDirection: "row",
position: "relative",
}
}))
export default function App() {
const { classes } = useStyles()
return (
<ThemeProvider>
<Router>
<div className={classes.sections}>
<NavbarSimpleColored />
<div style={{width: window.innerWidth/5*4, position: "absolute", right: 0}}>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/svm' element={<SVM />} />
<Route path='/knn' element={<Knn />} />
<Route path='/rf' element={<RandomForest />} />
<Route path='/lr' element={<LogisticRegression />} />
<Route path='/settings' element={<Settings />} />
</Routes>
</div>
</div>
</Router>
</ThemeProvider>
);
}
frontend/src/Components/Card/CardCustom.tsx 0 → 100644
View file @ 0f807f7d
import { Card, Image, Text } from '@mantine/core';
export function CardCustom(data: {src: string, title: string}) {
return (
<Card
shadow="xl"
padding="xl"
component="a"
// href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
target="_blank"
>
<Card.Section>
<Image
src={data.src}
height={160}
alt="No way!"
/>
</Card.Section>
<Text weight={500} size="lg" mt="md">
{data.title}
</Text>
{/* <Text mt="xs" color="dimmed" size="sm">
try {data.title} ...
</Text> */}
</Card>
);
}
\ No newline at end of file
frontend/src/Components/Home/Home.tsx 0 → 100644
View file @ 0f807f7d
This diff is collapsed.
frontend/src/Components/LogisticRegression/LogisticRegression.tsx 0 → 100644
View file @ 0f807f7d
function LogisticRegression() {
return (
<div>LogisticRegression</div>
)
}
export default LogisticRegression
\ No newline at end of file
frontend/src/Components/NavBar/NavBar.tsx 0 → 100644
View file @ 0f807f7d
import { useState } from 'react';
import { createStyles, Navbar, Group, Code, getStylesRef, rem } from '@mantine/core';
import { useNavigate } from "react-router-dom";
import HOME_IMG from '../../assets/home-icon.png';
import SVM_IMG from '../../assets/svm-icon.png'
import KNN_IMG from '../../assets/knn-icon.png'
import LR_IMG from '../../assets/lr-icon.png'
import RF_IMG from '../../assets/rf-icon.png'
import SETTING_IMG from '../../assets/setting-icon.png'
import { LOGO } from '../consts';
const useStyles = createStyles((theme) => ({
navbar: {
backgroundColor: theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background,
position: "fixed",
},
version: {
backgroundColor: theme.fn.lighten(
theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
0.1
),
color: theme.white,
fontWeight: 700,
},
header: {
paddingBottom: theme.spacing.md,
marginBottom: `calc(${theme.spacing.md} * 1.5)`,
borderBottom: `${rem(1)} solid ${theme.fn.lighten(
theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
0.1
)}`,
},
footer: {
paddingTop: theme.spacing.md,
marginTop: theme.spacing.md,
borderTop: `${rem(1)} solid ${theme.fn.lighten(
theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
0.1
)}`,
},
link: {
...theme.fn.focusStyles(),
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
fontSize: theme.fontSizes.sm,
color: theme.white,
padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
borderRadius: theme.radius.sm,
fontWeight: 500,
'&:hover': {
backgroundColor: theme.fn.lighten(
theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
0.1
),
},
},
linkIcon: {
ref: getStylesRef('icon'),
color: theme.white,
// opacity: 0.75,
marginRight: theme.spacing.sm,
width: "30px",
height: "30px"
},
linkActive: {
'&, &:hover': {
backgroundColor: theme.fn.lighten(
theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background!,
0.15
),
[`& .${getStylesRef('icon')}`]: {
opacity: 0.9,
},
},
},
}));
const data = [
{ link: '/', label: 'Home', icon: HOME_IMG },
{ link: '/svm', label: 'Get Your Rule', icon: SVM_IMG },
// { link: '/knn', label: 'Documentation', icon: KNN_IMG },
// { link: '/rf', label: 'Random Forest', icon: RF_IMG },
// { link: '/lr', label: 'Logistic Regression', icon: LR_IMG },
];
export function NavbarSimpleColored() {
const { classes, cx } = useStyles();
const [active, setActive] = useState('Billing');
const navigate = useNavigate();
const links = data.map((item) => (
<a
className={cx(classes.link, { [classes.linkActive]: item.label === active })}
href=""
key={item.label}
onClick={(event) => {
event.preventDefault();
setActive(item.label);
navigate(item.link)
}}
>
{/* <item.icon className={classes.linkIcon} stroke={1.5} /> */}
<img src={item.icon} className={classes.linkIcon} />
<span>{item.label}</span>
</a>
));
return (
<Navbar height={window.innerHeight} width={{ sm: window.innerWidth/5 }} p="md" className={classes.navbar}>
<Navbar.Section grow>
<Group className={classes.header} position="apart">
{/* <MantineLogo size={28} inverted /> */}
<img src={LOGO} className={classes.linkIcon} />
<Code className={classes.version}>v1.0.0</Code>
</Group>
{links}
</Navbar.Section>
{/* <Navbar.Section className={classes.footer}>
<a href="#" className={classes.link} onClick={(event) => {
event.preventDefault()
navigate("/settings")
}}>
<img src={SETTING_IMG} className={classes.linkIcon} />
<span>Settings</span>
</a>
</Navbar.Section> */}
</Navbar>
);
}
\ No newline at end of file
frontend/src/Components/RandomForest/RandomForest.tsx 0 → 100644
View file @ 0f807f7d
function RandomForest() {
return (
<div>RandomForest</div>
)
}
export default RandomForest
\ No newline at end of file
frontend/src/Components/SVM/CounterfactualTable.tsx 0 → 100644
View file @ 0f807f7d
import { Title, createStyles } from '@mantine/core'
import React from 'react'
const useStyle = createStyles((theme) => ({
table: {
border: "1px solid #ddd",
borderCollapse: "collapse",
},
td: {
border: "1px solid #ddd",
width: window.innerHeight / 4,
padding: "5px 10px",
},
negative: {
border: "1px solid #ddd",
width: window.innerHeight / 4,
padding: "5px 10px",
background: "green",
color: "white",
},
positive: {
border: "1px solid #ddd",
width: window.innerHeight / 4,
padding: "5px 10px",
background: "red",
color: "white",
}
}))
function CounterfactualTable(data: {tableData: any}) {
const { classes } = useStyle();
return (
<div>
<Title order={6} mt={30} mb={10}>Results</Title>
<table className={classes.table}>
{
data.tableData.map((e: any, i: number) => {
return (
<tr key={i}>
<td className={classes.positive}>{e.initial}</td>
{i === 0 ? <td className={classes.td} rowSpan={data.tableData.length}>Changes to</td> : null}
<td className={classes.negative}>{e.changedTo}</td>
</tr>
);
})
}
</table>
</div>
)
}
export default CounterfactualTable
\ No newline at end of file
frontend/src/Components/SVM/Prediction.tsx 0 → 100644
View file @ 0f807f7d
import { Text, Title } from '@mantine/core';
export function Prediction(data: {prediction: string}) {
return (
<div>
<Title order={6} mt={60}>Prediction</Title>
<Text size={30} mt={10}>
{data.prediction}
</Text>
</div>
);
}
\ No newline at end of file
frontend/src/Components/SVM/SVM.tsx 0 → 100644
View file @ 0f807f7d
import { createStyles } from "@mantine/core"
import { TextAreaCustom } from "../_common/TextAreaCustom"
import { DropDownWidget } from "../_common/DropDownWidget";
import { ButtonCustom } from "../_common/ButtonCustom";
import { ScrollButton } from "../_common/ScrollButton";
import { CustomTitle } from "../_common/CustomTitle";
import { useWindowScroll } from "@mantine/hooks";
import { Sentence } from "./Sentence";
import { Prediction } from "./Prediction";
import CounterfactualTable from "./CounterfactualTable";
const useStyle = createStyles((theme) => ({
mainContainer: {
display: "flex",
flexDirection: "column",
alignItems: "center",
}
}))
function SVM() {
const { classes } = useStyle();
const [scroll, scrollTo] = useWindowScroll();
const tableData = [
{initial: "like", changedTo: "do not like"},
{initial: "happy", changedTo: "sad"},
{initial: "good", changedTo: "bad"},
];
return (
<div className={classes.mainContainer}>
<div id="getData">
<CustomTitle title="Get Your Rule" />
<TextAreaCustom
label="Enter the review"
placeholder="Enter the review"
/>
<DropDownWidget
label="Select the Algorithm"
placeholder="Algorithm"
/>
<ButtonCustom
label="Get the rule"
onClick={() => scrollTo({ y: window.innerHeight })}
/>
<ScrollButton />
</div>
<div id="viewResult" style={{width: window.innerWidth / 5 * 3, height: window.innerHeight}}>
<CustomTitle title="Counterfactual Result" />
<Sentence
sentence="I like apple"
hightLightWords={["like"]}
/>
<Prediction prediction="Positive" />
<CounterfactualTable tableData={tableData} />
</div>
</div>
)
}
export default SVM
\ No newline at end of file
frontend/src/Components/SVM/Sentence.tsx 0 → 100644
View file @ 0f807f7d
import { Highlight, Text, Title } from '@mantine/core';
export function Sentence(data: {sentence: string, hightLightWords: string[]}) {
return (
<div>
<Title order={6} mt={30}>Sentence</Title>
<Text size={30} mt={10}>
<Highlight highlight={data.hightLightWords}>
{data.sentence}
</Highlight>
</Text>
</div>
);
}
\ No newline at end of file
frontend/src/Components/Settings/Settings.tsx 0 → 100644
View file @ 0f807f7d
function Settings() {
return (
<div>Settings</div>
)
}
export default Settings
\ No newline at end of file
frontend/src/Components/_common/ButtonCustom.tsx 0 → 100644
View file @ 0f807f7d
import { Button, createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
container: {
width: window.innerWidth / 5 * 3,
display: "flex",
justifyContent: "end",
}
}))
export function ButtonCustom(data: {label: string, onClick: any}) {
const { classes } = useStyles()
return (
<div className={classes.container}>
<Button
variant="gradient"
gradient={{ from: 'teal', to: 'blue', deg: 60 }}
radius="xl"
size="lg"
mt={30}
mb={100}
onClick={data.onClick}
>
{data.label}
</Button>
</div>
);
}
\ No newline at end of file
frontend/src/Components/_common/CustomTitle.tsx 0 → 100644
View file @ 0f807f7d
import { Title } from '@mantine/core';
export function CustomTitle(data: {title: string}) {
return (
<>
<Title order={1} align='left' mt={50}>{data.title}</Title>
</>
);
}
\ No newline at end of file
frontend/src/Components/_common/DropDownWidget.tsx 0 → 100644
View file @ 0f807f7d
import { Select } from '@mantine/core';
export function DropDownWidget(data: {label: string, placeholder: string}) {
return (
<Select
mt={30}
label={data.label}
placeholder={data.placeholder}
data={[
{ value: 'SVM', label: 'Support Vector Machine' },
{ value: 'random forest', label: 'Random Forest' },
{ value: 'logistic Regression', label: 'Logistic Regression' },
{ value: 'KNN', label: 'K-Nearest Neighbor' },
]}
style={{width: window.innerWidth / 5 * 3}}
/>
);
}
\ No newline at end of file
frontend/src/Components/_common/ScrollButton.tsx 0 → 100644
View file @ 0f807f7d
import { useWindowScroll } from '@mantine/hooks';
import { Button, createStyles } from '@mantine/core';
const useStyle = createStyles((theme) => ({
button: {
position: "fixed",
bottom: 50,
right: 50,
width: "50px",
height: "50px",
borderRadius: "50%",
}
}))
export function ScrollButton() {
const [scroll, scrollTo] = useWindowScroll();
const { classes } = useStyle()
return (
<Button className={classes.button} onClick={() => scrollTo({ y: 0 })}>^</Button>
);
}
\ No newline at end of file
frontend/src/Components/_common/TextAreaCustom.tsx 0 → 100644
View file @ 0f807f7d
import { Textarea } from "@mantine/core";
export function TextAreaCustom(data: {placeholder: string, label: string}) {
return (
<Textarea
mt={30}
placeholder={data.placeholder}
label={data.label}
style={{width: window.innerWidth / 5 * 3}}
minRows={10}
autosize={true}
withAsterisk
/>
);
}
\ No newline at end of file
frontend/src/Components/consts.ts 0 → 100644
View file @ 0f807f7d
import LOGO_IMG from '../assets/logo.png';
export const LOGO = LOGO_IMG;
\ No newline at end of file
frontend/src/Components/k-NN/k-NN.tsx 0 → 100644
View file @ 0f807f7d
function Knn() {
return (
<div>k-NN</div>
)
}
export default Knn
\ No newline at end of file
frontend/src/ThemeProvider.tsx 0 → 100644
View file @ 0f807f7d
import { MantineProvider, MantineThemeOverride } from "@mantine/core";
export const theme: MantineThemeOverride = {
colorScheme: "light",
};
interface ThemeProviderProps {
children: React.ReactNode;
}
export function ThemeProvider({ children }: ThemeProviderProps) {
return (
<MantineProvider withGlobalStyles withNormalizeCSS theme={theme}>
{children}
</MantineProvider>
);
}
frontend/src/index.tsx 0 → 100644
View file @ 0f807f7d
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<StrictMode>
<App />
</StrictMode>
);
// 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();
frontend/src/react-app-env.d.ts 0 → 100644
View file @ 0f807f7d
/// <reference types="react-scripts" />
frontend/src/reportWebVitals.ts 0 → 100644
View file @ 0f807f7d
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
frontend/src/setupTests.ts 0 → 100644
View file @ 0f807f7d
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
frontend/tsconfig.json 0 → 100644
View file @ 0f807f7d
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
frontend/yarn.lock 0 → 100644
View file @ 0f807f7d
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