New commit

flask-server/server.py

+from flask import Flask, request, jsonify
+import pandas as pd
+from Decision_Tree.Decision_Tree import sideEffectTreatments
+import numpy as np
+from flask_cors import CORS
+
+app = Flask(__name__)
+CORS(app)
+
+def convert_ndarray_to_list(data_dict):
+    converted_dict = {}
+    for key, value in data_dict.items():
+        if isinstance(value, np.ndarray):
+            converted_dict[key] = value.tolist()
+        else:
+            converted_dict[key] = value
+    return converted_dict
+
+@app.route('/predict', methods=['OPTIONS', 'GET', 'POST'])
+def predict():
+
+    if request.method == 'OPTIONS':
+        # Handle CORS preflight request here
+        return '', 200
+    elif request.method == 'POST':
+        try:
+            # Extract data from the JSON request
+            data = request.get_json()
+
+            
+            # Convert the JSON data to a pandas DataFrame
+            new_person_data = pd.DataFrame(data)
+            print(new_person_data)
+
+            # Call the test function to make predictions
+            predictions = sideEffectTreatments(new_person_data)
+
+            # Convert NumPy ndarray predictions to a serializable format
+            converted_predictions = convert_ndarray_to_list(predictions)
+            
+            return jsonify(converted_predictions)
+        except Exception as e:
+            return jsonify({'error': str(e)})
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5500)

package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.10.0",
@@ -5065,6 +5066,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
+      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -14030,6 +14054,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0",

src/components/SideEffectsAndTreatments.css

@@ -16,8 +16,9 @@
     border-radius:6px;
     box-shadow:0 0 8px #696969;
     padding-block: 10px;
-    width: 45vw;
+    width: 47vw;
     margin-top: 80px;
+    margin-left: 80px;
 }
 
 .title{
@@ -26,7 +27,7 @@
 
 .form{
     width: 35vw;
-    height: 750px;
+    height: 950px;
     display: flex;
     flex-direction: column;
     justify-content: start;
@@ -71,9 +72,7 @@ input{
 }
 
 .input-group1{
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-    padding: 5px;
+    
+    align-items: left;
+    
 }

src/components/SideEffectsAndTreatments.js

 import React, { useState } from 'react'
 import './SideEffectsAndTreatments.css';
 
-export default function SideEffectsAndTreatments() {
+function SideEffectsAndTreatments() {
+    // Define state variables for your input fields and predictions
     const [age, setAge] = useState('');
+    const [gender, setGender] = useState('');
+    const [drugType, setDrugType] = useState('');
     const [drugUsageMg, setDrugUsageMg] = useState('');
     const [months, setMonths] = useState('');
+    const [routeOfAdministration, setRouteOfAdministration] = useState(''); 
     const [takingCooccurringSubstances, setTakingCooccurringSubstances] = useState('');
-    const [preExistingmedicalcondition, setPreExistingmedicalcondition] = useState('');
+    const [coOccurringSubstances, setCoOccurringSubstances] = useState(''); 
+    const [preExistingMedicalCondition, setPreExistingMedicalCondition] = useState('');
+    const [predictions, setPredictions] = useState(null);
+
+    const mapGender = (selectedGender) => {
+        switch (selectedGender) {
+        case 'male':
+            return 1;
+        case 'female':
+            return 2;
+        }
+    };
+    
+    const mapDrugTypeToValue = (selectedDrugType) => {
+        switch (selectedDrugType) {
+        case 'Heroin':
+            return 1;
+        case 'Cannabis':
+            return 2;
+        case 'Opium':
+            return 3;
+        case 'Hashish':
+            return 4;
+        case 'Cocaine':
+            return 5;
+        case 'Methamphetamine':
+            return 6;
+        }
+    };
+
+    const maprouteOfAdministration = (selectedrouteOfAdministration) => {
+        switch (selectedrouteOfAdministration) {
+        case 'Inhalation':
+            return 1;
+        case 'Injection':
+            return 2;
+        case 'Smoking':
+            return 3;
+        }
+    };
+
+    const maptakingCooccurringSubstances = (selectedtakingCooccurringSubstances) => {
+        switch (selectedtakingCooccurringSubstances) {
+        case 'yes':
+            return 1;
+        case 'no':
+            return 2;
+        }
+    };
+
+    const mapcoOccurringSubstances = (selectedcoOccurringSubstances) => {
+        switch (selectedcoOccurringSubstances) {
+            case 'Cannabis':
+                return 1;
+            case 'Cocaine':
+                return 2;
+            case 'Hashish':
+                return 3;
+            case 'Heroin':
+                return 4;
+            case 'Methamphetamine':
+                return 5;
+            case 'Alcohol':
+                return 6;
+            case 'No':
+                return 7;
+        }
+    };
+
+    const mappreExistingMedicalCondition = (selectedpreExistingMedicalCondition) => {
+        switch (selectedpreExistingMedicalCondition) {
+        case 'yes':
+            return 1;
+        case 'no':
+            return 2;
+        }
+    };
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+
+        try {
+    
+          //console.log('Parsed Data:', requestData);
+          const genderValue = mapGender(gender);
+          const drugTypeValue = mapDrugTypeToValue(drugType);
+          const routeOfAdministrationValue = maprouteOfAdministration(routeOfAdministration);
+          const takingCooccurringSubstancesValue = maptakingCooccurringSubstances(takingCooccurringSubstances);
+          const coOccurringSubstancesValue = mapcoOccurringSubstances(coOccurringSubstances);
+          const preExistingMedicalConditionValue = mappreExistingMedicalCondition(preExistingMedicalCondition);
+          
+          const response = await fetch('http://localhost:5500/predict', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                age:[age],
+                gender: [genderValue],
+                drug_type: [drugTypeValue],
+                measures_of_drug_used_per_day: [drugUsageMg],
+                time_used: [months],
+                taking_co_occurring_substances: [takingCooccurringSubstancesValue],
+                co_occurring_substances: [coOccurringSubstancesValue],
+                route_of_administration: [routeOfAdministrationValue],
+                pre_existing_condision: [preExistingMedicalConditionValue]
+            }),
+          });
+
+          const data = await response.json();
+          setPredictions(data);
+    
+        } catch (error) {
+            console.error('Error fetching predictions:', error);
+        }
+      };
+    
     
     return (
         <div className='side-effect-wrapper'><div className='side-effect-form'><br/>
         <h1 className='title'>Side Effect & Treatments</h1><br/>
-    <form className='form'>
+        <form onSubmit={handleSubmit} className='form'>
             <div className='input-group'>
                 <label>Age: </label>
                 <input type='number' placeholder='Age' value={age} onChange={(e)=>{setAge(e.target.value)}}/>
             </div>
             <div className='input-group'>
                 <label>Gender: </label>
-            <input type='radio' name='gender' value='male'/>
+                <input type='radio' name='gender' value='male' onChange={(e) => setGender(e.target.value)}/>
                 <span>Male</span>
-            <input type='radio' name='gender' value='female'/>
+                <input type='radio' name='gender' value='female' onChange={(e) => setGender(e.target.value)}/>
                 <span>Female</span>
             </div>
             <div className='input-group'>
                 <label>Drug Type: </label>
-            <select name="drugtype">
+                <select value={drugType} name="drugtype" onChange={(e) => setDrugType(e.target.value)}>
                     <option>Choose a Drug Type</option>
                     <option>Heroin</option>
                     <option>Cannabis</option>
@@ -45,7 +165,7 @@ export default function SideEffectsAndTreatments() {
             </div>
             <div className='input-group'>
                 <label>Route of Administration: </label>
-            <select name="route_of_administration ">
+                <select value={routeOfAdministration} name="route_of_administration " onChange={(e) => setRouteOfAdministration(e.target.value)}>
                     <option>Choose a Route of Administration</option>
                     <option>Inhalation</option>
                     <option>Injection</option>
@@ -61,7 +181,7 @@ export default function SideEffectsAndTreatments() {
             </div>
             <div className='input-group'>
                 <label>Co-occurring Substances: </label>
-            <select name="co-occurringsubstances ">
+                <select value={coOccurringSubstances} name="co-occurringsubstances " onChange={(e) => setCoOccurringSubstances(e.target.value)}>
                     <option>Choose a Co-occurring Substances</option>
                     <option>Cannabis</option>
                     <option>Cocaine</option>
@@ -74,20 +194,21 @@ export default function SideEffectsAndTreatments() {
             </div>
             <div className='input-group'>
                 <label>Any pre-existing medical conditions?: </label>
-            <input type='radio' name='preExistingmedicalcondition' value='yes' checked={preExistingmedicalcondition === 'yes'} onChange={() => setPreExistingmedicalcondition('yes')}/>
+                <input type='radio' name='preExistingmedicalcondition' value='yes' checked={preExistingMedicalCondition === 'yes'} onChange={() => setPreExistingMedicalCondition('yes')}/>
                 <span>Yes</span>
-            <input type='radio' name='preExistingmedicalcondition' value='no' checked={preExistingmedicalcondition === 'no'} onChange={() => setPreExistingmedicalcondition('no')}/>
+                <input type='radio' name='preExistingmedicalcondition' value='no' checked={preExistingMedicalCondition === 'no'} onChange={() => setPreExistingMedicalCondition('no')}/>
                 <span>No</span>
             </div>
 
             <div className='btn-area'>
-            <div className='btn'>Predict</div>
+                <button type="submit" className='btn'>Predict</button>
             </div>
             <div className='input-group1'>
-        <h2>Predictions:</h2>  
+            {predictions && (<p>Predictions: {JSON.stringify(predictions)}</p>)}
             </div>
-        
         </form>
-</div></div>
+    </div></div>
     )
 }
+
+export default SideEffectsAndTreatments;
\ No newline at end of file