Skip to content

Commit e6273b0

Browse files
Thanus-KumaarThanus-Kumaar
authored
Merge pull request #103 from Evolutionary-Algorithms-On-Click/bo
Integrated BO and MOBO modules in Frontend
2 parents b99397a + b6aa8e2 commit e6273b0

27 files changed

Lines changed: 7263 additions & 6 deletions

‎app/_components/bo/preview.js‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
export default function PreviewBO({
2+
currentStep,
3+
algorithmType,
4+
objective,
5+
direction,
6+
surrogate,
7+
acquisition,
8+
kernel,
9+
bounds,
10+
design,
11+
params,
12+
}) {
13+
return (
14+
<div className="p-4 rounded-xl bg-white/60 border border-gray-100 shadow-sm">
15+
<h3 className="text-lg font-bold mb-3">BO Config Summary</h3>
16+
17+
<div className="space-y-4">
18+
19+
{/* Algorithm Type */}
20+
<div>
21+
<div className="text-xs text-gray-500">Algorithm Type</div>
22+
<div className="mt-1 inline-block rounded-full border border-pink-300 px-3 py-1 text-sm">
23+
{algorithmType || "—"}
24+
</div>
25+
</div>
26+
27+
{/* Objective */}
28+
<div>
29+
<div className="text-xs text-gray-500">Objective Function</div>
30+
<div className="mt-1 inline-block rounded-full border border-blue-300 px-3 py-1 text-sm">
31+
{objective || "—"}
32+
</div>
33+
</div>
34+
35+
{/* Direction */}
36+
<div>
37+
<div className="text-xs text-gray-500">Direction</div>
38+
<div className="mt-1 inline-block rounded-full border border-red-300 px-3 py-1 text-sm">
39+
{direction || "—"}
40+
</div>
41+
</div>
42+
43+
{/* Surrogate */}
44+
<div>
45+
<div className="text-xs text-gray-500">Surrogate Model</div>
46+
<div className="mt-1 inline-block rounded-full border border-purple-300 px-3 py-1 text-sm">
47+
{surrogate || "—"}
48+
</div>
49+
</div>
50+
51+
{/* Acquisition */}
52+
<div>
53+
<div className="text-xs text-gray-500">Acquisition Function</div>
54+
<div className="mt-1 inline-block rounded-full border border-green-300 px-3 py-1 text-sm">
55+
{acquisition || "—"}
56+
</div>
57+
</div>
58+
59+
{/* Kernel (GP only) */}
60+
{surrogate === "gp" && (
61+
<div>
62+
<div className="text-xs text-gray-500">Kernel</div>
63+
<div className="mt-1 inline-block rounded-full border border-yellow-300 px-3 py-1 text-sm">
64+
{kernel || "—"}
65+
</div>
66+
</div>
67+
)}
68+
69+
{/* Bounds */}
70+
<div>
71+
<div className="text-xs text-gray-500">Bounds</div>
72+
<div className="mt-1 text-sm">
73+
{bounds && bounds.length > 0 ? (
74+
<div className="space-y-1">
75+
{bounds.map((b, i) => (
76+
<div
77+
key={i}
78+
className="inline-block rounded-full border border-orange-300 px-3 py-1 text-xs mr-2"
79+
>
80+
x{i}: [{b.min} , {b.max}]
81+
</div>
82+
))}
83+
</div>
84+
) : (
85+
<div className="inline-block rounded-full border border-orange-300 px-3 py-1 text-sm">
86+
—
87+
</div>
88+
)}
89+
</div>
90+
</div>
91+
92+
{/* Initial Sampling Strategy */}
93+
<div>
94+
<div className="text-xs text-gray-500">Initial Design</div>
95+
96+
<div className="mt-1 space-y-1 text-sm">
97+
<div className="inline-block rounded-full border border-indigo-300 px-3 py-1">
98+
{design?.strategy || "—"}
99+
</div>
100+
101+
{/* LHS extra fields */}
102+
{design?.strategy === "lhs" && (
103+
<>
104+
<div className="inline-block rounded-full border border-indigo-200 px-3 py-1 ml-2">
105+
LHS Type: {design.lhs_type || "—"}
106+
</div>
107+
<div className="inline-block rounded-full border border-indigo-200 px-3 py-1 ml-2">
108+
Criterion: {design.criterion || "—"}
109+
</div>
110+
</>
111+
)}
112+
</div>
113+
</div>
114+
115+
{/* BO Parameters */}
116+
<div>
117+
<div className="text-xs text-gray-500">BO Hyperparameters</div>
118+
119+
<div className="mt-1 text-sm flex flex-wrap gap-2">
120+
<div className="inline-block rounded-full border border-slate-300 px-3 py-1">
121+
Initial Points: {params.initialPoints}
122+
</div>
123+
124+
<div className="inline-block rounded-full border border-slate-300 px-3 py-1">
125+
Iterations: {params.iterations}
126+
</div>
127+
128+
129+
{/* Xi for EI/PI */}
130+
{["ei", "pi"].includes(acquisition) && params.xi !== undefined && (
131+
<div className="inline-block rounded-full border border-slate-300 px-3 py-1">
132+
Xi (ξ): {params.xi}
133+
</div>
134+
)}
135+
136+
{/* Kappa for UCB */}
137+
{acquisition === "lcb" && params.kappa !== undefined && (
138+
<div className="inline-block rounded-full border border-slate-300 px-3 py-1">
139+
Kappa (κ): {params.kappa}
140+
</div>
141+
)}
142+
143+
<div className="inline-block rounded-full border border-slate-300 px-3 py-1">
144+
Random Seed: {params.randomSeed}
145+
</div>
146+
147+
<div className="inline-block rounded-full border border-slate-300 px-3 py-1">
148+
Verbose: {params.verbose ? "Yes" : "No"}
149+
</div>
150+
151+
</div>
152+
</div>
153+
154+
</div>
155+
</div>
156+
);
157+
}

0 commit comments

Comments
 (0)