new commit

flask-server/Decision_Tree/Decision_Tree.py

@@ -267,7 +267,7 @@ def sideEffectTreatments(new_person_data):
 
     elif treatments_1_prediction == 9:
 
-        treatments_1 = 'Focus your attention on a distracting activity such as reading, singing, listening to music, gardening, or exercising'
+        treatments_1 = 'Lie down until the dizziness passes, then get up slowly,move slowly and carefully, get plenty of rest, drink plenty of fluids, especially water, avoid coffee, cigarettes, alcohol and drugs'
 
     elif treatments_1_prediction == 10:
 
@@ -372,7 +372,7 @@ def sideEffectTreatments(new_person_data):
 
     elif treatments_2_prediction == 9:
 
-        treatments_2 = 'Focus your attention on a distracting activity such as reading, singing, listening to music, gardening, or exercising'
+        treatments_2 = 'Lie down until the dizziness passes, then get up slowly,move slowly and carefully, get plenty of rest, drink plenty of fluids, especially water, avoid coffee, cigarettes, alcohol and drugs'
 
     elif treatments_2_prediction == 10:
 

src/components/Destination.js

@@ -7,29 +7,7 @@ import './DestinationStyles.css';
 
 const Destination = () => {
     return(
-        <div className="destination">
-            <h1>Popular Destination</h1>
-            <p>Tours give you the opportunity to see a lot,within a time frame.</p>
-
-            <DestinationData
-                className='first-des'
-                heading='Sydney Opera House'
-                text="The Sydney Opera House is a multi-venue performing arts centre in Sydney. Located on the foreshore of Sydney Harbour, it is widely regarded as one of the world's most famous and distinctive buildings and a masterpiece of 20th-century architecture."
-
-                img1={Mountain1}
-                img2={Mountain2}
-            />
-
-            <DestinationData
-                className='first-des-reverse'
-                heading='Eiffel Tower'
-                text="The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. Locally nicknamed 'La dame de fer', it was constructed from 1887 to 1889 as the centerpiece of the 1889 World's Fair."
-
-                img1={Mountain3}
-                img2={Mountain4}
-            />
-
-           </div>
+        <div className="destination"></div>
     )
 }
 

src/components/Features.js

 import './FeaturesStyles.css';
 import React from 'react';
 import TripData from './FeaturesData';
-import Trip1 from '../assets/5.jpg';
-import Trip2 from '../assets/6.jpg';
-import Trip3 from '../assets/8.jpg';
+import Trip1 from '../assets/face.png';
+import Trip2 from '../assets/drug.jpg';
+import Trip3 from '../assets/sideeffects.png';
+import Trip4 from '../assets/rehabilitation.jpg';
 import { Link } from "react-router-dom";
  
 
@@ -17,24 +18,24 @@ export default function Trip() {
         <TripData
           Link="/test"
           image={Trip1}
-          heading="Thisara"
+          heading="Image-based Substance Abuse Detection"
         />
 
         <TripData
           
-          image={Trip3}
-          heading="Ravindu"
+          image={Trip2}
+          heading="Drug Type & Addiction Status"
         />
 
         <TripData
           Link="/sideEffectsAndTreatments"
-          image={Trip2}
+          image={Trip3}
           heading="Side Effects & Treatments"
         />
 
         <TripData
-          image={Trip1}
-          heading="Rehabilitation Process"
+          image={Trip4}
+          heading="Rehabilitation Status"
         />
 
       </div>

src/components/SideEffectsAndTreatments.css

@@ -26,8 +26,8 @@
 }
 
 .form{
-    width: 35vw;
-    height: 950px;
+    width: 37vw;
+    height: 915px;
     display: flex;
     flex-direction: column;
     justify-content: start;
@@ -71,8 +71,30 @@ input{
     margin-right:400px;
 }
 
-.input-group1{
+.input-group1 {
+    text-align: left;
+  }
   
-    align-items: left;
+.input-group1 p {
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+  
+.input-group1 ul {
+    list-style-type: none; 
+    padding-left: 0;
+}
+  
+.input-group1 li {
+    margin-bottom: 10px;
+}
+
+.error-message {
+    color: red;
+    font-size: 14px;
+    margin-top: 5px;
+}
 
+.required-star {
+    color: red;
 }
\ No newline at end of file

src/components/SideEffectsAndTreatments.js

@@ -13,6 +13,8 @@ function SideEffectsAndTreatments() {
     const [coOccurringSubstances, setCoOccurringSubstances] = useState(''); 
     const [preExistingMedicalCondition, setPreExistingMedicalCondition] = useState('');
     const [predictions, setPredictions] = useState(null);
+    const [formSubmitted, setFormSubmitted] = useState(false);
+
 
     const mapGender = (selectedGender) => {
         switch (selectedGender) {
@@ -93,6 +95,52 @@ function SideEffectsAndTreatments() {
 
         try {
             
+          // Form validation
+          if (!age) {
+            setFormSubmitted(true);
+            return;
+          }
+
+          if (!drugType) {
+            setFormSubmitted(true);
+            return;
+          }
+
+          if (!drugUsageMg) {
+            setFormSubmitted(true);
+            return;
+          }
+
+          if (!months) {
+            setFormSubmitted(true);
+            return;
+          }
+
+          if (!gender) {
+            setFormSubmitted(true);
+            return;
+          }
+
+          if (!routeOfAdministration) {
+            setFormSubmitted(true);
+            return;
+          }
+
+          if (!takingCooccurringSubstances) {
+            setFormSubmitted(true);
+            return;
+          }
+
+          if (!coOccurringSubstances) {
+            setFormSubmitted(true);
+            return;
+          }
+
+          if (!preExistingMedicalCondition) {
+            setFormSubmitted(true);
+            return;
+          }
+
           //console.log('Parsed Data:', requestData);
           const genderValue = mapGender(gender);
           const drugTypeValue = mapDrugTypeToValue(drugType);
@@ -133,18 +181,20 @@ function SideEffectsAndTreatments() {
         <h1 className='title'>Side Effect & Treatments</h1><br/>
         <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)}}/>
+                <label>Age <span className='required-star'> *</span>:</label>
+                <input type='number' placeholder='Age' value={age} onChange={(e) => {const inputValue = e.target.value;if (/^\d+$/.test(inputValue) || inputValue === '') {setAge(inputValue);}}}/>
+                {formSubmitted && !age && (<div className='error-message'>Age is Required!</div>)}
             </div>
             <div className='input-group'>
-                <label>Gender: </label>
+                <label>Gender<span className='required-star'> *</span>: </label>
                 <input type='radio' name='gender' value='male' onChange={(e) => setGender(e.target.value)}/>
                 <span>Male</span>
                 <input type='radio' name='gender' value='female' onChange={(e) => setGender(e.target.value)}/>
                 <span>Female</span>
+                {formSubmitted && !gender && (<div className='error-message'>Gender is Required!</div>)}
             </div>
             <div className='input-group'>
-                <label>Drug Type: </label>
+                <label>Drug Type<span className='required-star'> *</span>: </label>
                 <select value={drugType} name="drugtype" onChange={(e) => setDrugType(e.target.value)}>
                     <option>Choose a Drug Type</option>
                     <option>Heroin</option>
@@ -154,17 +204,20 @@ function SideEffectsAndTreatments() {
                     <option>Cocaine</option>
                     <option>Methamphetamine</option>
                 </select>
+                {formSubmitted && !drugType && (<div className='error-message'>Drug Type is Required!</div>)}
             </div>
             <div className='input-group'>
-                <label>Measures of drug used per day(mg): </label>
-                <input type='number' placeholder='mg' value={drugUsageMg} onChange={(e)=>{setDrugUsageMg(e.target.value)}}/>
+                <label>Measures of drug used per day(mg)<span className='required-star'> *</span>: </label>
+                <input type='number' placeholder='mg' value={drugUsageMg} onChange={(e) => {const inputValue = e.target.value;if (/^\d+$/.test(inputValue) || inputValue === '') {setDrugUsageMg(inputValue);}}}/>
             </div>
+            {formSubmitted && !drugUsageMg && (<div className='error-message'>Measures of drug used per day is Required!</div>)}
             <div className='input-group'>
-                <label>Time Used(Month): </label>
-                <input type='number' placeholder='No of months' value={months} onChange={(e)=>{setMonths(e.target.value)}}/>
+                <label>Time Used(Month)<span className='required-star'> *</span>: </label>
+                <input type='number' placeholder='No of months' value={months} onChange={(e) => {const inputValue = e.target.value;if (/^\d+$/.test(inputValue) || inputValue === '') {setMonths(inputValue);}}}/>
+                {formSubmitted && !months && (<div className='error-message'>Time Used is Required!</div>)}
             </div>
             <div className='input-group'>
-                <label>Route of Administration: </label>
+                <label>Route of Administration<span className='required-star'> *</span>: </label>
                 <select value={routeOfAdministration} name="route_of_administration " onChange={(e) => setRouteOfAdministration(e.target.value)}>
                     <option>Choose a Route of Administration</option>
                     <option>Inhalation</option>
@@ -172,15 +225,17 @@ function SideEffectsAndTreatments() {
                     <option>Smoking</option>
                 </select>
             </div>
+            {formSubmitted && !routeOfAdministration && (<div className='error-message'>Route of Administration is Required!</div>)}
             <div className='input-group'>
-                <label>Taking Co-occurring Substances: </label>
+                <label>Taking Co-occurring Substances<span className='required-star'> *</span>: </label>
                 <input type='radio' name='takingCooccurringSubstances' value='yes' checked={takingCooccurringSubstances === 'yes'} onChange={() => setTakingCooccurringSubstances('yes')}/>
                 <span>Yes</span>
                 <input type='radio' name='takingCooccurringSubstances' value='no' checked={takingCooccurringSubstances === 'no'} onChange={() => setTakingCooccurringSubstances('no')}/>
                 <span>No</span>
             </div>
+            {formSubmitted && !takingCooccurringSubstances && (<div className='error-message'>Taking Co-occurring Substances is Required!</div>)}
             <div className='input-group'>
-                <label>Co-occurring Substances: </label>
+                <label>Co-occurring Substances<span className='required-star'> *</span>: </label>
                 <select value={coOccurringSubstances} name="co-occurringsubstances " onChange={(e) => setCoOccurringSubstances(e.target.value)}>
                     <option>Choose a Co-occurring Substances</option>
                     <option>Cannabis</option>
@@ -192,19 +247,35 @@ function SideEffectsAndTreatments() {
                     <option>No</option>
                 </select>
             </div>
+            {formSubmitted && !coOccurringSubstances && (<div className='error-message'>Co-occurring Substances is Required!</div>)}
             <div className='input-group'>
-                <label>Any pre-existing medical conditions?: </label>
+                <label>Any pre-existing medical conditions?<span className='required-star'> *</span>: </label>
                 <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')}/>
                 <span>No</span>
             </div>
+            {formSubmitted && !preExistingMedicalCondition && (<div className='error-message'>Pre-existing medical conditions is Required!</div>)}
 
             <div className='btn-area'>
                 <button type="submit" className='btn'>Predict</button>
             </div>
             <div className='input-group1'>
-            {predictions && (<p>Predictions: {JSON.stringify(predictions)}</p>)}
+                {predictions && (
+                <div>
+                    <p><h1>Predictions</h1></p>
+                        <ul>
+                            {Object.keys(predictions).map((key) => {
+                            const predictionText = predictions[key];
+                            return (
+                                <li key={key}>
+                                    <strong>{key}:</strong> {predictionText}
+                                </li>
+                            );
+                            })}
+                        </ul>
+                </div>
+                )}
             </div>
         </form>
     </div></div>