fix:memperbaiki input kernel

This commit is contained in:
muhamad fais aizat 2025-05-08 11:27:28 +07:00
parent e1135dd91c
commit 4d6d9d27ee
1 changed files with 34 additions and 24 deletions

View File

@ -11,10 +11,17 @@ const InputKernel = ({ setShowProses, dataHarga, result, setResult }) => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [selectedKernel, setSelectedKernel] = useState(""); const [selectedKernel, setSelectedKernel] = useState("");
const [params, setParams] = useState({ C: "0", epsilon: "0", gamma: "0", degree: "0", coef0: "0" }); const [params, setParams] = useState({ C: "0", epsilon: "0", gamma: "0", degree: "0", coef0: "0" });
const kernelParamsMap = {
linear: ['C', 'epsilon'],
rbf: ['C', 'epsilon', 'gamma'],
sigmoid: ['C', 'epsilon', 'gamma', 'coef0'],
poly: ['C', 'epsilon', 'gamma', 'coef0', 'degree']
};
const handleCheckboxChange = (kernel) => { const handleCheckboxChange = (kernel) => {
setSelectedKernel(kernel); setSelectedKernel(kernel);
setParams({ C: "0", epsilon: "0", gamma: "0", degree: "0", coef0: "0" });
}; };
const handleChange = (e) => { const handleChange = (e) => {
@ -52,7 +59,7 @@ const InputKernel = ({ setShowProses, dataHarga, result, setResult }) => {
poly: 2, poly: 2,
rbf: 4 rbf: 4
}; };
const id_kernel = kernelMapping[selectedKernel]; const id_kernel = kernelMapping[selectedKernel];
if (!id_kernel) { if (!id_kernel) {
console.error("Kernel tidak ditemukan:", selectedKernel); console.error("Kernel tidak ditemukan:", selectedKernel);
@ -62,7 +69,7 @@ const InputKernel = ({ setShowProses, dataHarga, result, setResult }) => {
const tanggalSekarang = new Date().toISOString().split('T')[0]; const tanggalSekarang = new Date().toISOString().split('T')[0];
let infoHyperparameter = `C=${params.C}, epsilon=${params.epsilon}`; let infoHyperparameter = `C=${params.C}, epsilon=${params.epsilon}`;
if (selectedKernel === 'rbf' ) { if (selectedKernel === 'rbf') {
infoHyperparameter += `, gamma=${params.gamma}`; infoHyperparameter += `, gamma=${params.gamma}`;
} else if (selectedKernel === 'sigmoid') { } else if (selectedKernel === 'sigmoid') {
infoHyperparameter += `, gamma=${params.gamma}, coef()=${params.coef0}`; infoHyperparameter += `, gamma=${params.gamma}, coef()=${params.coef0}`;
@ -81,7 +88,7 @@ const InputKernel = ({ setShowProses, dataHarga, result, setResult }) => {
try { try {
await axios.post(`${API_URL}/riwayat/`, postData, { await axios.post(`${API_URL}/riwayat/`, postData, {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
} }
@ -94,7 +101,7 @@ const InputKernel = ({ setShowProses, dataHarga, result, setResult }) => {
} catch (error) { } catch (error) {
console.error("Error fetching data:", error); console.error("Error fetching data:", error);
setIsLoading(false); setIsLoading(false);
} }
}; };
return ( return (
@ -107,9 +114,9 @@ const InputKernel = ({ setShowProses, dataHarga, result, setResult }) => {
<div className="flex flex-wrap gap-3 px-5"> <div className="flex flex-wrap gap-3 px-5">
{["linear", "poly", "sigmoid", "rbf"].map((kernel) => ( {["linear", "poly", "sigmoid", "rbf"].map((kernel) => (
<div key={kernel} className="flex items-center space-x-2 xl:w-1/4 md:w-full w-full"> <div key={kernel} className="flex items-center space-x-2 xl:w-1/4 md:w-full w-full">
<Checkbox <Checkbox
id={kernel} id={kernel}
checked={selectedKernel === kernel} checked={selectedKernel === kernel}
onCheckedChange={() => handleCheckboxChange(kernel)} onCheckedChange={() => handleCheckboxChange(kernel)}
/> />
<label htmlFor={kernel} className="text-sm cursor-pointer"> <label htmlFor={kernel} className="text-sm cursor-pointer">
@ -122,21 +129,24 @@ const InputKernel = ({ setShowProses, dataHarga, result, setResult }) => {
</div> </div>
<div className="xl:w-[70%] md:w-full w-full px-5 py-2"> <div className="xl:w-[70%] md:w-full w-full px-5 py-2">
<div className="grid grid-cols-auto-fit md:grid-cols-2 xl:grid-cols-3 gap-4"> <div className="grid grid-cols-auto-fit md:grid-cols-2 xl:grid-cols-3 gap-4">
{Object.keys(params).map((key) => ( {Object.keys(params).map((key) => {
<div key={key} className="grid w-full items-center gap-1.5"> const isEnabled = kernelParamsMap[selectedKernel]?.includes(key);
<Label>Masukan nilai {key}</Label> return (
<Input <div key={key} className="grid w-full items-center gap-1.5">
type="text" <Label>Masukan nilai {key}</Label>
placeholder={`nilai ${key}`} <Input
name={key} type="text"
value={params[key]} placeholder={`nilai ${key}`}
onChange={handleChange} name={key}
style={{ value={params[key]}
color: params[key] === 0 || params[key] === "0" ? "gray" : "black" onChange={handleChange}
}} disabled={!isEnabled}
/> className={!isEnabled ? 'opacity-50 cursor-not-allowed' : ''}
</div> />
))} </div>
);
})}
</div> </div>
</div> </div>
</div> </div>
@ -150,7 +160,7 @@ const InputKernel = ({ setShowProses, dataHarga, result, setResult }) => {
{isLoading ? 'Memproses...' : 'Proses'} {isLoading ? 'Memproses...' : 'Proses'}
</Button> </Button>
</div> </div>
</div> </div>
); );
}; };