Skip to content

Commit ef1f17b

Browse files
Dhanusha-ChittidiDhanusha-Chittidi
authored
React Graphical User Interface
1 parent c262fa0 commit ef1f17b

12 files changed

+253
-0
lines changed

‎React_Interface/App.css

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.App {height : 100%;
2+
text-align: center;
3+
}
4+
html, body, #app, #app>div{
5+
height : 100%;
6+
background: violet;
7+
background-image: linear-gradient( rgb(101, 5, 101) , violet );
8+
}
9+
.App-logo {
10+
height: 40vmin;
11+
pointer-events: none;
12+
}
13+
14+
@media (prefers-reduced-motion: no-preference) {
15+
.App-logo {
16+
animation: App-logo-spin infinite 20s linear;
17+
}
18+
}
19+
20+
.App-header {
21+
background-color: #282c34;
22+
min-height: 100vh;
23+
display: flex;
24+
flex-direction: column;
25+
align-items: center;
26+
justify-content: center;
27+
font-size: calc(10px + 2vmin);
28+
color: white;
29+
}
30+
31+
.App-link {
32+
color: #61dafb;
33+
}
34+
35+
@keyframes App-logo-spin {
36+
from {
37+
transform: rotate(0deg);
38+
}
39+
to {
40+
transform: rotate(360deg);
41+
}
42+
}
43+
#img{
44+
background-image: url(./routes/payment_fraud_detection.jpg);
45+
width : 100vh;
46+
height :100vh;
47+
}
48+
.poi{
49+
color: white;
50+
}
51+
Link{
52+
color: white;
53+
margin-right: 20px;
54+
}

‎React_Interface/App.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
2+
import './App.css';
3+
import{Form} from "./routes/Form";
4+
import {Home} from "./routes/Home";
5+
6+
import {Navbar} from "./routes/Navbar";
7+
function App() {
8+
return (
9+
<div className="App" id="app">
10+
<Router>
11+
<Navbar/>
12+
<Routes>
13+
<Route path="/" element={<Home/>}/>
14+
<Route path="/prediction" element={<Form/>}/>
15+
</Routes>
16+
</Router>
17+
</div>
18+
);
19+
}
20+
21+
export default App;

‎React_Interface/App.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { render, screen } from '@testing-library/react';
2+
import App from './App';
3+
4+
test('renders learn react link', () => {
5+
render(<App />);
6+
const linkElement = screen.getByText(/learn react/i);
7+
expect(linkElement).toBeInTheDocument();
8+
});

‎React_Interface/index.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12+
monospace;
13+
}

‎React_Interface/index.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import './index.css';
4+
import App from './App';
5+
import reportWebVitals from './reportWebVitals';
6+
7+
const root = ReactDOM.createRoot(document.getElementById('root'));
8+
root.render(
9+
<React.StrictMode>
10+
<App />
11+
</React.StrictMode>
12+
);
13+
14+
// If you want to start measuring performance in your app, pass a function
15+
// to log results (for example: reportWebVitals(console.log))
16+
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17+
reportWebVitals();

‎React_Interface/reportWebVitals.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const reportWebVitals = onPerfEntry => {
2+
if (onPerfEntry && onPerfEntry instanceof Function) {
3+
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4+
getCLS(onPerfEntry);
5+
getFID(onPerfEntry);
6+
getFCP(onPerfEntry);
7+
getLCP(onPerfEntry);
8+
getTTFB(onPerfEntry);
9+
});
10+
}
11+
};
12+
13+
export default reportWebVitals;

‎React_Interface/routes/Form.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.data{ height:30px;
2+
width: 40%;
3+
color : white;
4+
background : rgba(90, 0, 90, 0.81);
5+
}
6+
::placeholder {
7+
color: white;
8+
opacity: 1; /* Firefox */
9+
}
10+
11+
.submit{ width:10%;
12+
height:25px;
13+
background : violet;
14+
}
15+
#result{
16+
color : white;
17+
}

‎React_Interface/routes/Form.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { useForm } from "react-hook-form";
2+
import * as yup from "yup";
3+
import { yupResolver } from "@hookform/resolvers/yup";
4+
import Axios from "axios";
5+
import './Form.css'
6+
import { useState } from "react";
7+
8+
9+
10+
export const Form = () => {
11+
12+
const [res, setRes] = useState("");
13+
const schema = yup.object().shape({
14+
step: yup.number().positive().integer().required(),
15+
amount: yup.number().positive().required(),
16+
oldbalanceOrg: yup.number().required(),
17+
newbalanceOrig: yup.number().required(),
18+
oldbalanceDest: yup.number().required(),
19+
newbalanceDest: yup.number().required(),
20+
isFlaggedFraud: yup.number().required(),
21+
type_1: yup.number().oneOf([0, 1]).required(),
22+
type_2: yup.number().oneOf([0, 1]).required(),
23+
type_3: yup.number().oneOf([0, 1]).required(),
24+
type_4: yup.number().oneOf([0, 1]).required(),
25+
type_5: yup.number().oneOf([0, 1]).required(),
26+
27+
})
28+
const { register, handleSubmit, formState: { errors } } = useForm({
29+
resolver: yupResolver(schema)
30+
});
31+
32+
const onSubmit = (data) => {
33+
console.log(data);
34+
const result = Axios.post('https://179b-34-138-90-190.ngrok-free.app/online_fraud_detection_prediction', data, {
35+
headers: {
36+
'Access-Control-Allow-Origin': '*',
37+
mode: 'no-cors',
38+
}
39+
}
40+
);
41+
const printPrediction = async () => {
42+
const a = await result;
43+
setRes(a.data);
44+
};
45+
46+
printPrediction();
47+
48+
document.getElementById("form-payment").reset();
49+
50+
51+
}
52+
53+
return (<div className="body">
54+
<form onSubmit={handleSubmit(onSubmit)} id="form-payment">
55+
<input type="number" className="data" placeholder="step..." {...register("step")} />
56+
<p>{errors.step?.message}</p>
57+
<input type="number" className="data" placeholder="Amount..." {...register("amount")} />
58+
<p>{errors.amount?.message}</p>
59+
<input type="number" className="data" placeholder="sender_oldBalance..." {...register("oldbalanceOrg")} />
60+
<p>{errors.oldbalanceOrg?.message}</p>
61+
<input type="number" className="data" placeholder="sender_newbalance..." {...register("newbalanceOrig")} />
62+
<p>{errors.newbalanceOrig?.message}</p>
63+
<input type="number" className="data" placeholder="receiver_oldbalance..." {...register("oldbalanceDest")} />
64+
<p>{errors.oldbalanceDest?.message}</p>
65+
<input type="number" className="data" placeholder="receiver_newbalance..." {...register("newbalanceDest")} />
66+
<p>{errors.newbalanceDest?.message}</p>
67+
<input type="number" className="data" placeholder="dpf..." {...register("isFlaggedFraud")} />
68+
<p>{errors.isFlaggedFraud?.message}</p>
69+
<input type="number" className="data" placeholder="CASH_OUT..." {...register("type_1")} />
70+
<p>{errors.type_1?.message}</p>
71+
<input type="number" className="data" placeholder="PAYMENT..." {...register("type_2")} />
72+
<p>{errors.type_2?.message}</p>
73+
<input type="number" className="data" placeholder=" CASH_IN ..." {...register("type_3")} />
74+
<p>{errors.type_3?.message}</p>
75+
<input type="number" className="data" placeholder="TRANSFER..." {...register("type_4")} />
76+
<p>{errors.type_4?.message}</p>
77+
<input type="number" className="data" placeholder="DEBIT..." {...register("type_5")} />
78+
<p>{errors.type_5?.message}</p>
79+
<input type="submit" className="submit" />
80+
</form>
81+
<h1 id='result'>{res}</h1>
82+
</div>
83+
);
84+
}

‎React_Interface/routes/Home.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from "react";
2+
import payment_fraud_detection from "./payment_fraud_detection.jpg";
3+
export const Home=()=>{
4+
return (
5+
<div className="poi">
6+
Welcome to<h1> Fraud Prediction System</h1>
7+
<img src={payment_fraud_detection} alt="Fraud Prediction System" id="img" />
8+
</div>
9+
);
10+
}

‎React_Interface/routes/Navbar.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
export const Navbar=()=>{
4+
return(
5+
<div>
6+
<Link to="/">Home</Link>
7+
<Link to="/prediction">Form</Link>
8+
9+
</div>
10+
);
11+
}

‎React_Interface/routes/payment_fraud_detection.jpg

136 KB
Loading

‎React_Interface/setupTests.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// jest-dom adds custom jest matchers for asserting on DOM nodes.
2+
// allows you to do things like:
3+
// expect(element).toHaveTextContent(/react/i)
4+
// learn more: https://github.com/testing-library/jest-dom
5+
import '@testing-library/jest-dom';

0 commit comments

Comments
 (0)