fix:memperbaiki input kernel
This commit is contained in:
parent
e1135dd91c
commit
4d6d9d27ee
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue