predictions added

package.json

@@ -18,6 +18,7 @@
     "react-dom": "^18.2.0",
     "react-file-base64": "^1.0.3",
     "react-icons": "^4.10.1",
+    "react-loader-spinner": "^5.4.5",
     "react-qr-reader": "^3.0.0-beta-1",
     "react-router": "^6.15.0",
     "react-router-dom": "^6.15.0",

src/App.js

@@ -1,32 +1,32 @@
 
 import React from 'react';
-import AddHealthinfoForm from "./components/AddHealth/AddHealthinfoForm";
 import Patient from "./components/Registration/Patient";
-import RegistrationForm from "./components/registrationform/RegistrationForm";
-import Facilities from "./components/Facilities/Facilities";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./App.scss";
 import Home from "./Pages/Home";
 import Legal from "./Pages/Legal";
 import NotFound from "./Pages/NotFound";
 import Appointment from "./Pages/Appointment";
-import { hairFields, heartFields} from './components/ModelForm/constFields'
+import { breastFields, diabetesFields, hairFields, heartFields} from './components/ModelForm/constFields'
 import CustomForm from './components/ModelForm/CustomForm';
+import TestPrediction from './components/ModelForm/TestPrediction';
+import { checkBreastCancer, checkDiabetes, checkHairLoss, checkHeart } from './api/Modelapi';
+import Navbar from './components/Navbar';
 
 function App() {
   return (
   <BrowserRouter >
+
+      <Navbar />
      <Routes>
             <Route
               path="/"
               element={
               <>
               <Home/>
 
-              <CustomForm endpoint="/api/endpoint4" inputFields={hairFields} />
-              {/* <Facilities/>
-              <AddHealthinfoForm />
-              <RegistrationForm /> */}
+
+              <TestPrediction />
 
               </>
               } />
@@ -36,7 +36,12 @@ function App() {
               path="/patient"
               element={<Patient/>} />
           <Route path="/legal" element={<Legal />} />
-          <Route path="/appointment" element={<Appointment />} />
+           <Route path="/appointment" element={<Appointment />} />
+          <Route path="/predict_hair" element={<CustomForm apiFunction={checkHairLoss} inputFields={hairFields} />} />
+            <Route path="/predict_heart" element={<CustomForm apiFunction={checkHeart} inputFields={heartFields} />} />
+             <Route path="/predict_breastCancer" element={<CustomForm apiFunction={checkBreastCancer} inputFields={breastFields} />} />
+             <Route path="/predict_diabetes" element={<CustomForm apiFunction={checkDiabetes} inputFields={diabetesFields} />} />
+
           <Route path="*" element={<NotFound />} />
               </Routes>
 

src/Pages/Home.js

@@ -11,7 +11,6 @@ import Footer from "../components/Footer";
 function Home() {
   return (
     <div className="home-section">
-      <Navbar />
       <Hero />
       <Info />
       <About />

src/Styles/Hero.css

@@ -4,7 +4,7 @@
     justify-content: center;
     align-items: center;
     gap: 24px;
-    background: linear-gradient(to right, #ECF2FF, #FBFCFF);
+    background: linear-gradient(to right, #f1f1f1, #0040ff);
 }
 /* Text section */
 .text-section {
@@ -41,15 +41,15 @@
     border: 1px solid transparent;
     border-radius: 28px;
     outline: transparent;
-    background-color: #1A8EFD;
+    background-color: #000000;
     font-size: 18px;
     font-family: 'Rubik', sans-serif;
     letter-spacing: .8px;
     cursor: pointer;
     transition: all .4s ease;
 }
 .text-appointment-btn:hover {
-    color: #1A8EFD;
+    color: #081e32;
     background-color: transparent;
     border: 1px solid #1A8EFD;
 }
@@ -64,14 +64,14 @@
     text-align: center;
 }
 .text-stats-container > p {
-    color: rgb(77, 75, 75);
+    color: rgb(0, 0, 0);
     font-family: 'Poppins', sans-serif;
     font-size: 22px;
     letter-spacing: .7px;
 }
 .text-stats-container p:first-child {
     margin-bottom: 8px;
-    color: #1A8EFD;
+    color: #0e3559;
     font-family: 'Rubik', sans-serif;
     font-size: 32px;
     font-weight: bold;
@@ -83,7 +83,6 @@
     text-align: center;
 }
 .hero-image1 {
-    width: 100%;
     height: auto;
 }
 /* Scroll Btn */
@@ -97,7 +96,7 @@
     color: white;
     border: 3px solid white;
     border-radius: 50%;
-    background-color: #1A8EFD;
+    background-color: #000000;
     position: fixed;
     bottom: 50px;
     right: 50px;

src/api/Modelapi.js

@@ -1,15 +1,15 @@
 import axios from 'axios';
 
-const API= axios.create({ baseURL: 'http://127.0.0.1:5000'}) ;
+const API= axios.create({ baseURL: 'http://127.0.0.1:5000/'}) ;
 
-const config=(data)=>({
-method: 'POST',
-body: JSON.stringify(data), // converts it to string objects means keys bhi string hoti h
-headers: {
-  'Content-type': 'application/json; charset=UTF-8',
+// const config=(data)=>({
+// method: 'POST',
+// body: JSON.stringify(data), // converts it to string objects means keys bhi string hoti h
+// headers: {
+//   'Content-type': 'application/json; charset=UTF-8',
 
-},
-})
+// },
+// })
 
 export const checkHairLoss = (data) => API.post('/hairloss/predict_hair', data);
 export const checkBreastCancer = (data) => API.post('/breast/predict_breast', data);

src/components/Hero.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import Doctor from "../assets/doctor_picture.png";
+import Doctor from "../assets/doc.png";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCalendarCheck, faAngleUp } from "@fortawesome/free-solid-svg-icons";
 import { useNavigate  } from "react-router-dom";
@@ -36,7 +36,7 @@ function Hero() {
     <div className="section-container">
       <div className="hero-section">
         <div className="text-section">
-          <p className="text-headline">❤️ Health comes first</p>
+          <p className="text-headline">Digitalizing HealthCare</p>
           <h2 className="text-title">
             Find your Doctor and make an Appointments
           </h2>