Skip to content

Commit 6046aa4

Browse files
deca109deca109
committedOct 15, 2024
Mushroom Frontend
1 parent e31f3c5 commit 6046aa4

File tree

5 files changed

+236
-6
lines changed

5 files changed

+236
-6
lines changed
 

‎frontend/src/MainContent.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import FertilizerRequirementsCalculator from './components/tools/FertilizerRequi
4747
import SoilMoistureCalculator from './components/tools/SoilMoisture';
4848
import WaterRequirementCalculator from './components/tools/WaterRequirement';
4949
import CropYieldCalculator from './components/tools/CropYield';
50+
import MushroomEdibility from './components/tools/Mushroom';
5051
import PrivacyPolicy from './components/PrivacyPolicy';
5152
import Feedback from './components/Feedback';
5253
import SoilTestingCentres from './components/SoilTestingCenters';
@@ -119,6 +120,7 @@ const MainContent = () => {
119120
<Route path="/SoilMoistureCalculator" element={<SoilMoistureCalculator />} />
120121
<Route path="/WaterRequirementCalculator" element={<WaterRequirementCalculator />} />
121122
<Route path="/CropYieldCalculator" element={<CropYieldCalculator />} />
123+
<Route path="/MushroomEdibility" element={<MushroomEdibility/>}/>
122124
<Route path="/products" element={<Products />} />
123125
<Route path="/Auth-page" element={<AuthPage />} />
124126
<Route path="/whyai" element={<WhyAI />} /> {/* Add the route for Why AI */}

‎frontend/src/assets/images/mushroom_bg.jpg

72.9 KB
Loading

‎frontend/src/components/tools/Mushroom.jsx

+228
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
import React, { useEffect, useState } from "react";
2+
import Spinner from "../Spinner.jsx";
3+
import img2 from "../../assets/images/mushroom_bg.jpg";
4+
5+
const MushroomEdibility = () => {
6+
useEffect(() => {
7+
const timer = setTimeout(() => {
8+
setLoading(false);
9+
}, 1000);
10+
return () => clearTimeout(timer);
11+
}, []);
12+
13+
const toPascalCase = str => (str.match(/[a-zA-Z0-9]+/g) || []).map(w => `${w.charAt(0).toUpperCase()}${w.slice(1)}`).join(' ');
14+
const [loading, setLoading] = useState(true);
15+
const [formData, setFormData] = useState({
16+
'cap-shape': "",
17+
'cap-surface': "",
18+
'cap-color': "",
19+
'bruises': "",
20+
'odor': "",
21+
'gill-attachment': "",
22+
'gill-spacing': "",
23+
'gill-size': "",
24+
'gill-color': "",
25+
'stalk-shape': "",
26+
'stalk-root': "",
27+
'stalk-surface-above-ring': "",
28+
'stalk-surface-below-ring': "",
29+
'stalk-color-above-ring': "",
30+
'stalk-color-below-ring': "",
31+
'veil-type': "",
32+
'veil-color': "",
33+
'ring-number': "",
34+
'ring-type': "",
35+
'spore-print-color': "",
36+
'population': "",
37+
'habitat': ""
38+
});
39+
40+
41+
const options = {
42+
"cap_shape": ["bell", "conical", "convex", "flat", "knobbed", "sunken"],
43+
"cap_surface": ["fibrous", "grooves", "scaly", "smooth"],
44+
"cap_color": ["brown", "buff", "cinnamon", "gray", "green", "pink", "purple", "red", "white", "yellow"],
45+
"bruises": ["bruises", "no bruises"],
46+
"odor": ["almond", "anise", "creosote", "fishy", "foul", "musty", "none", "pungent", "spicy"],
47+
"gill_attachment": ["attached", "free"],
48+
"gill_spacing": ["close", "crowded"],
49+
"gill_size": ["broad", "narrow"],
50+
"gill_color": ["black", "brown", "buff", "chocolate", "gray", "green", "orange", "pink", "purple", "red", "white", "yellow"],
51+
"stalk_shape": ["enlarging", "tapering"],
52+
"stalk_root": ["bulbous", "club", "equal", "rooted", "missing"],
53+
"stalk_surface_above_ring": ["fibrous", "scaly", "silky", "smooth"],
54+
"stalk_surface_below_ring": ["fibrous", "scaly", "silky", "smooth"],
55+
"stalk_color_above_ring": ["brown", "buff", "cinnamon", "gray", "orange", "pink", "red", "white", "yellow"],
56+
"stalk_color_below_ring": ["brown", "buff", "cinnamon", "gray", "orange", "pink", "red", "white", "yellow"],
57+
"veil_type": ["partial"],
58+
"veil_color": ["brown", "orange", "white", "yellow"],
59+
"ring_number": ["none", "one", "two"],
60+
"ring_type": ["evanescent", "flaring", "large", "none", "pendant"],
61+
"spore_print_color": ["black", "brown", "buff", "chocolate", "green", "orange", "purple", "white", "yellow"],
62+
"population": ["abundant", "clustered", "numerous", "scattered", "several", "solitary"],
63+
"habitat": ["grasses", "leaves", "meadows", "paths", "urban", "waste", "woods"]
64+
};
65+
66+
67+
const keyMapping = {
68+
'cap-shape': 'cap_shape',
69+
'cap-surface': 'cap_surface',
70+
'cap-color': 'cap_color',
71+
'gill-attachment': 'gill_attachment',
72+
'gill-spacing': 'gill_spacing',
73+
'gill-size': 'gill_size',
74+
'gill-color': 'gill_color',
75+
'stalk-shape': 'stalk_shape',
76+
'stalk-root': 'stalk_root',
77+
'stalk-surface-above-ring': 'stalk_surface_above_ring',
78+
'stalk-surface-below-ring': 'stalk_surface_below_ring',
79+
'stalk-color-above-ring': 'stalk_color_above_ring',
80+
'stalk-color-below-ring': 'stalk_color_below_ring',
81+
'veil-type': 'veil_type',
82+
'veil-color': 'veil_color',
83+
'ring-number': 'ring_number',
84+
'ring-type': 'ring_type',
85+
'spore-print-color': 'spore_print_color',
86+
'population': 'population',
87+
'habitat': 'habitat',
88+
'bruises': 'bruises',
89+
'odor': 'odor'
90+
};
91+
92+
const [errorMessage, setErrorMessage] = useState("");
93+
const [result, setResult] = useState(null);
94+
95+
const handleSubmit = async () => {
96+
if (Object.values(formData).some((field) => field === "")) {
97+
setErrorMessage("Please fill out all the fields.");
98+
return;
99+
}
100+
101+
try {
102+
const response = await fetch("http://localhost:5000/mushroom_edibility", {
103+
method: "POST",
104+
body: new URLSearchParams(formData),
105+
});
106+
107+
const data = await response.json();
108+
109+
if (data.error) {
110+
setErrorMessage(data.error);
111+
} else {
112+
setResult(data.edibility);
113+
}
114+
} catch (error) {
115+
setErrorMessage("Failed to connect to the server.");
116+
}
117+
};
118+
119+
const handleChange = (e) => {
120+
setFormData({
121+
...formData,
122+
[e.target.name]: e.target.value,
123+
});
124+
setResult(null);
125+
setErrorMessage("");
126+
};
127+
128+
return (
129+
<>
130+
{loading ? (
131+
<Spinner />
132+
) : (
133+
<div
134+
className="flex items-center justify-center min-h-screen p-24 pt-40"
135+
style={{
136+
backgroundImage: `url(${img2})`,
137+
backgroundSize: "cover",
138+
backgroundPosition: "center",
139+
backgroundRepeat: "no-repeat",
140+
}}
141+
>
142+
143+
<div className="absolute inset-0 bg-black opacity-50" />
144+
145+
<div className="relative bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-10 w-full max-w-3xl z-10">
146+
<h1 className="text-3xl font-bold text-center text-white mb-12">
147+
Mushroom Edibility Prediction
148+
</h1>
149+
150+
<div className="flex flex-col justify-center mb-8">
151+
<p className="text-lg text-white text-justify">
152+
🍄 Enter mushroom characteristics to predict whether it is edible or poisonous.
153+
</p>
154+
<p className="md:text-xl text-lg font-bold py-4 text-white">
155+
🤔 How it Works!
156+
</p>
157+
<p className="text-lg text-white text-left">
158+
🌱 Input various mushroom features, such as cap shape, color, bruising, and more.
159+
<br />
160+
📊 The system predicts the edibility based on the data.
161+
</p>
162+
</div>
163+
164+
<form className="space-y-6" name="mushroomEdibility">
165+
<div className="flex flex-wrap -mx-2 justify-center">
166+
{Object.keys(formData).map((field) => (
167+
<div className="relative w-1/3 px-2 mb-4" key={field}> {/* Adjusted width to 1/3 */}
168+
<label htmlFor={field} className="block text-gray-200 text-left font-bold capitalize">
169+
{field.replace(/-/g, " ")}:
170+
</label>
171+
<select
172+
name={field}
173+
id={field}
174+
value={formData[field]}
175+
onChange={handleChange}
176+
className="peer w-full p-4 border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-60 backdrop-blur-md mt-2"
177+
required
178+
>
179+
<option value="" selected disabled style={{ color: 'lightgray' }}>
180+
Select {toPascalCase(field.replace(/-/g, " "))}
181+
</option>
182+
{options[keyMapping[field]].map((option) => (
183+
<option key={option} value={option}>
184+
{option.charAt(0).toUpperCase() + option.slice(1)}
185+
</option>
186+
))}
187+
</select>
188+
</div>
189+
))}
190+
</div>
191+
192+
<button
193+
type="button"
194+
onClick={handleSubmit}
195+
className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-60"
196+
>
197+
Predict
198+
</button>
199+
</form>
200+
201+
202+
203+
{result && (
204+
<div className={`mt-8 p-4 rounded-md ${result === "Edible" ? "bg-green-200" : "bg-red-200"}`}>
205+
<h2 className={`text-2xl font-bold mb-4 ${result === "Edible" ? "text-green-800" : "text-red-800"}`}>
206+
Prediction:
207+
</h2>
208+
<p className={`text-lg ${result === "Edible" ? "text-green-600" : "text-red-600"}`}>
209+
The mushroom is <span className="font-bold">{result.toLowerCase()}</span>.
210+
</p>
211+
</div>
212+
)}
213+
214+
{errorMessage && (
215+
<div
216+
className={`mt-6 bg-red-500 text-white font-bold py-3 px-6 rounded-lg text-center transition-opacity duration-1000 ${errorMessage ? 'opacity-100' : 'opacity-0'}`}
217+
>
218+
{errorMessage}
219+
</div>
220+
)}
221+
</div>
222+
</div>
223+
)}
224+
</>
225+
);
226+
};
227+
228+
export default MushroomEdibility;

‎mushroom-edibility/data/__pycache__/maps.cpython-311.pyc

-196 Bytes
Binary file not shown.

‎mushroom-edibility/data/maps.py

+6-6
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717
'almond': 'a', 'anise': 'l', 'creosote': 'c', 'fishy': 'y', 'foul': 'f', 'musty': 'm', 'none': 'n', 'pungent': 'p', 'spicy': 's'
1818
}
1919
gill_attachment_mapping = {
20-
'attached': 'a', 'descending': 'd', 'free': 'f', 'notched': 'n'
20+
'attached': 'a', 'free': 'f',
2121
}
2222
gill_spacing_mapping = {
23-
'close': 'c', 'crowded': 'w', 'distant': 'd'
23+
'close': 'c', 'crowded': 'w'
2424
}
2525
gill_size_mapping = {
2626
'broad': 'b', 'narrow': 'n'
@@ -32,7 +32,7 @@
3232
'enlarging': 'e', 'tapering': 't'
3333
}
3434
stalk_root_mapping = {
35-
'bulbous': 'b', 'club': 'c', 'cup': 'u', 'equal': 'e', 'rhizomorphs': 'z', 'rooted': 'r', 'missing': '?'
35+
'bulbous': 'b', 'club': 'c', 'equal': 'e', 'rooted': 'r', 'missing': '?'
3636
}
3737
stalk_surface_above_ring_mapping = {
3838
'fibrous': 'f', 'scaly': 'y', 'silky': 'k', 'smooth': 's'
@@ -44,10 +44,10 @@
4444
'brown': 'n', 'buff': 'b', 'cinnamon': 'c', 'gray': 'g', 'orange': 'o', 'pink': 'p', 'red': 'e', 'white': 'w', 'yellow': 'y'
4545
}
4646
stalk_color_below_ring_mapping = {
47-
'brown': 'n', 'buff': 'b', 'cinnamon': 'c', 'gray': 'g', 'green': 'r', 'orange': 'o', 'pink': 'p', 'red': 'e', 'white': 'w', 'yellow': 'y'
47+
'brown': 'n', 'buff': 'b', 'cinnamon': 'c', 'gray': 'g', 'orange': 'o', 'pink': 'p', 'red': 'e', 'white': 'w', 'yellow': 'y'
4848
}
4949
veil_type_mapping = {
50-
'partial': 'p', 'universal': 'u'
50+
'partial': 'p'
5151
}
5252
veil_color_mapping = {
5353
'brown': 'n', 'orange': 'o', 'white': 'w', 'yellow': 'y'
@@ -56,7 +56,7 @@
5656
'none': 'n', 'one': 'o', 'two': 't'
5757
}
5858
ring_type_mapping = {
59-
'cobwebby': 'c', 'evanescent': 'e', 'flaring': 'f', 'large': 'l', 'none': 'n', 'pendant': 'p', 'sheathing': 's', 'zone': 'z'
59+
'evanescent': 'e', 'flaring': 'f', 'large': 'l', 'none': 'n', 'pendant': 'p'
6060
}
6161
spore_print_color_mapping = {
6262
'black': 'k', 'brown': 'n', 'buff': 'b', 'chocolate': 'h', 'green': 'r', 'orange': 'o', 'purple': 'u', 'white': 'w', 'yellow': 'y'

0 commit comments

Comments
 (0)
Please sign in to comment.