Commit

backend/index.js

@@ -24,8 +24,10 @@ mongoose.connect("mongodb+srv://arg007:Freelancer%402022@cluster0.gp52g.mongodb.
     );
 
 app.use(express.json());
+
 app.use("/api/auth", require("./routes/auth.routes"));
 app.use("/api/heart", require("./routes/heart.routes"));
+app.use("/api/diabetes", require("./routes/diabetes.routes"));
 
 app.listen(process.env.port || 4000, () => {
     console.log("Server running")

backend/mlmodel2/main.py

@@ -0,0 +1,14 @@
+import pickle
+import numpy as np
+import sys
+
+model = pickle.load(open('./mlmodel2/diabetes_model.pkl', 'rb'))
+input_data = (float(sys.argv[1]), float(sys.argv[2]), float(sys.argv[3]), float(sys.argv[4]), float(sys.argv[5]), float(sys.argv[6]), float(sys.argv[7]), float(sys.argv[8]), float(sys.argv[9]), float(sys.argv[10]), float(sys.argv[11]), float(sys.argv[12]))
+# change the input data to a numpy array
+input_data_as_numpy_array = np.asarray(input_data)
+
+#reshaping numpy array since we are prediciting for one data point
+input_data_reshaped = input_data_as_numpy_array.reshape(1, -1)
+
+prediction = model.predict(input_data_reshaped)
+print(prediction[0])

backend/routes/diabetes.routes.js

@@ -0,0 +1,39 @@
+const express = require("express");
+const router = express.Router();
+const Users = require("../model/user.model");
+const {spawn} = require('child_process');
+const {PythonShell} =require('python-shell');
+
+router.post('/predict',async(req,res)=>{
+    const Age = req.body.Age;  
+    const Sex = req.body.Sex  
+    const HighChol = req.body.HighChol   
+    const BMI = req.body.BMI  
+    const Smoker = req.body.Smoker  
+    const PhysActivity = req.body.PhysActivity  
+    const PhysHlth = req.body.PhysHlth  
+    const Fruits = req.body.Fruits 
+    const Veggies = req.body.Veggies
+    const HvyAlcoholConsump = req.body.HvyAlcoholConsump  
+    const Stroke = req.body.Stroke  
+    const HighBP = req.body.HighBP
+
+    var dataToSend;
+    const python = spawn('python', ['./mlmodel2/main.py',Age, Sex, HighChol, BMI, Smoker, PhysActivity, PhysHlth, Fruits, Veggies, HvyAlcoholConsump, Stroke, HighBP]);
+    python.stdout.on('data', function (data) {
+        console.log('Pipe data from python script ...');
+        dataToSend = data.toString();
+        console.log(dataToSend)
+        if (dataToSend == 1){
+            res.json({"message":"High chance of diabetes"})
+        }
+        else{
+            res.json({"message":"Low chance of diabetes"})
+        }
+       });
+    python.stderr.on('data',function(data){
+        console.log(`${data}`)
+    })
+})
+
+module.exports = router;

frontend/src/pages/Details2/Details2.js

@@ -1,18 +1,97 @@
-import React from 'react';
+import React, { useState } from 'react'
 import 'bootstrap/dist/css/bootstrap.css';
 import './Details2.css';
+import axios from "axios";
 import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
-function Details2() {
+import {
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+  } from "@mui/material";
+const Details2 = ()=>{
+
+
+    const addData = (e)=>{
+        // console.log(e.target);
+        const {name,value} = e.target;
+        setData(()=>{
+            return{
+                ...logdata,
+                [name]:value
+            }
+
+        })
+    }
+
+    const [res,setRes] = useState({
+        data:""
+    })
+    const baseURL = "http://localhost:4000/api"
+    async function predict(){
+        await axios.post(`${baseURL}/diabetes/predict`,{
+            Age:logdata.Age,  
+            Sex:logdata.Sex,  
+            HighChol:logdata.HighChol,
+            BMI:logdata.BMI,  
+            Smoker:logdata.Smoker,  
+            PhysActivity:logdata.PhysActivity,  
+            PhysHlth:logdata.PhysHlth,  
+            Fruits:logdata.Fruits, 
+            Veggies:logdata.Veggies,  
+            HvyAlcoholConsump:logdata.HvyAlcoholConsump,  
+            Stroke:logdata.Stroke,  
+            HighBP:logdata.HighBP
+        }).then((response)=>{
+            console.log(response.data)
+            setRes(()=>{
+                return{
+                    ...res,
+                    ["data"]:response.data.message
+                }
+
+            })
+        })
+    }
+    const [logdata,setData] = useState({
+        Age:"",  
+        Sex:"",  
+        HighChol:"",   
+        BMI:"",  
+        Smoker:"",  
+        PhysActivity:"",  
+        PhysHlth:"",  
+        Fruits:"", 
+        Veggies:"",  
+        HvyAlcoholConsump:"",  
+        Stroke:"",  
+        HighBP:""
+    })
+
     var _a = React.useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
     var handleClick = function (event) {
         setAnchorEl(event.currentTarget);
     };
     var handleClose = function () {
         setAnchorEl(null);
     };
+
+
     const open = Boolean(anchorEl);
     const id = open ? 'simple-popover' : undefined;
+
+    const [open1, setOpen1] = React.useState(false);
+
+  const handleClickOpen = (e) => {
+    e.preventDefault()
+    setOpen1(true);
+  };
+
+  const handleClose1 = () => {
+    setOpen1(false);
+  };
     return (
         <div className='whole'>
             <div className='container'>
@@ -24,18 +103,18 @@ function Details2() {
                     <div class="form-group row">
                         <label class="control-label col-sm-2" for="age">Age :</label>
                         <div class="col-sm-3">
-                            <input type="number" class="form-control" id="age" min='1' />
+                            <input type="number" class="form-control" id="age" name='Age' min='1' value={logdata.Age} onChange={addData} />
                         </div>
                         <label class="control-label col-sm-2 offset-1" for="gender">Gender:</label>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" name='Sex' onChange={addData} value={logdata.Sex} />
                         </div>
                     </div>
                     <br />
                     <div class="form-group row">
                         <label className='control-label col-sm-2'>High Cholestrol :</label>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" name='HighChol' value={logdata.HighChol} onChange={addData}/>
                         </div>
                         <a className='control-label col-sm-2 offset-1' aria-describedby={id} variant="contained" onClick={handleClick}>Body Mass Index(BMI) :
                         </a>
@@ -52,57 +131,62 @@ function Details2() {
                             <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
                         </Popover>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" name='BMI' value={logdata.BMI} onChange={addData}/>
                         </div>
                     </div>
                     <br />
                     <div class="form-group row">
                         <label className='control-label col-sm-2'>Are you a smoker? :</label>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" name='Smoker' value={logdata.Smoker} onChange={addData}/>
                         </div>
                         <a className='control-label col-sm-2 offset-1' aria-describedby={id} variant="contained" onClick={handleClick}>Physical Activity:</a>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" name='PhysActivity' value={logdata.PhysActivity} onChange={addData} />
                         </div>
                     </div>
                     <br />
                     <div class="form-group row">
                         <label className='control-label col-sm-2' aria-describedby={id} variant="contained" onClick={handleClick}>Physical Health :</label>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" name='PhysHlth' value={logdata.PhysHlth} onChange={addData} />
                         </div>
                         <label className='control-label col-sm-2 offset-1' aria-describedby={id} variant="contained" onClick={handleClick}>Fruits :</label>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" name='Fruits' value={logdata.Fruits} onChange={addData}/>
                         </div>
                     </div>
                     <br />
                     <div class="form-group row">
                         <label className='control-label col-sm-2' aria-describedby={id} variant="contained" onClick={handleClick}>Vegetables :</label>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" name='Veggies' value={logdata.Veggies} onChange={addData} />
                         </div>
                         <label className='control-label col-sm-2 offset-1' aria-describedby={id} variant="contained" onClick={handleClick}>Heavy Alcohol Consumption :</label>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" name='HvyAlcoholConsump' value={logdata.HvyAlcoholConsump} onChange={addData} />
                         </div>
                     </div>
                     <br />
                     <div class="form-group row">
                         <label className='control-label col-sm-2' aria-describedby={id} variant="contained" onClick={handleClick}>Stroke :</label>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" name='Stroke' value={logdata.Stroke} onChange={addData} />
                         </div>
                         <label className='control-label col-sm-2 offset-1' aria-describedby={id} variant="contained" onClick={handleClick}>High Blood Pressure :</label>
                         <div class="col-sm-3">
-                            <input type="text" class="form-control" />
+                            <input type="text" class="form-control" value={logdata.HighBP} name='HighBP' onChange={addData} />
                         </div>
                     </div>
 
                     <br />
                     <div className='row'>
-                        <input type="submit" class="btn btn-danger col-1 offset-5" value="Submit" />
+                        <input type="submit" class="btn btn-danger col-1 offset-5" value="Submit" onClick={(e)=>{
+                            e.preventDefault();
+                            predict()
+                            handleClickOpen(e)
+                            console.log(logdata)
+                        }}/>
                     </div>
                 </form>
 
@@ -135,6 +219,21 @@ function Details2() {
                 <br />
                 <h2 className='g1'>*High Blood Pressure: 0 = no High BP,1 = Yes High BP </h2>
             </div>
+            <Dialog
+        open={open1}
+        onClose={handleClose1}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">
+          {"Message"}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {res.data}
+          </DialogContentText>
+        </DialogContent>
+      </Dialog>
         </div >
     )
 }