added laser finder
This commit is contained in:
parent
2dc03c85fe
commit
62114470de
2 changed files with 509 additions and 0 deletions
322
app/buying-guide/finder/page.tsx
Normal file
322
app/buying-guide/finder/page.tsx
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
// app/buying-guide/finder/page.tsx
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import type { Answers, LaserType } from "@/lib/laser-finder";
|
||||
import { scoreAnswers, LASER_LABEL, TYPE_INFO } from "@/lib/laser-finder";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function LaserFinderPage() {
|
||||
const [result, setResult] = useState<{
|
||||
top: LaserType[];
|
||||
score: Record<LaserType, number>;
|
||||
why: Record<LaserType, string[]>;
|
||||
} | null>(null);
|
||||
|
||||
const { register, handleSubmit, reset, watch } = useForm<Answers>({
|
||||
defaultValues: {
|
||||
materials: [],
|
||||
operations: [],
|
||||
part_size: "medium",
|
||||
detail: "medium",
|
||||
throughput: "medium",
|
||||
budget: "mid",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (vals: Answers) => {
|
||||
const { ranked, score, why } = scoreAnswers(vals);
|
||||
setResult({ top: ranked.slice(0, 2), score, why });
|
||||
// (Optional) later: POST vals to Directus for analytics
|
||||
};
|
||||
|
||||
const selectedMaterials = watch("materials");
|
||||
const selectedOps = watch("operations");
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto py-8 space-y-6">
|
||||
<h1 className="text-2xl font-semibold">Laser Type Finder</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Answer a few questions and we’ll suggest the best laser <em>types</em> for your work
|
||||
with clear use-cases, materials, and cautions. No product pitches—just guidance.
|
||||
</p>
|
||||
|
||||
{!result && (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Materials */}
|
||||
<fieldset className="border rounded p-4">
|
||||
<legend className="font-medium">Materials (select all that apply)</legend>
|
||||
<div className="grid sm:grid-cols-2 gap-2 mt-2">
|
||||
{[
|
||||
["metals_bare", "Bare metals"],
|
||||
["metals_coated", "Coated/painted metals"],
|
||||
["plastics", "Plastics"],
|
||||
["wood_paper_leather", "Wood, paper, leather"],
|
||||
["glass_ceramic", "Glass / ceramic"],
|
||||
["stone", "Stone"],
|
||||
["textiles", "Textiles"],
|
||||
].map(([val, label]) => (
|
||||
<label key={val} className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" value={val} {...register("materials")} /> {label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{selectedMaterials?.length === 0 && (
|
||||
<p className="text-xs text-amber-600 mt-2">Tip: choose at least one material for a better match.</p>
|
||||
)}
|
||||
</fieldset>
|
||||
|
||||
{/* Operations */}
|
||||
<fieldset className="border rounded p-4">
|
||||
<legend className="font-medium">Typical operations (select all that apply)</legend>
|
||||
<div className="grid sm:grid-cols-2 gap-2 mt-2">
|
||||
{[
|
||||
["deep_mark_metal", "Deep mark on metal"],
|
||||
["color_mark_stainless", "Color mark stainless"],
|
||||
["fine_engraving", "Fine engraving (small features)"],
|
||||
["photo_engrave", "Photo engraving"],
|
||||
["cut_nonmetals_thick", "Cut thick non-metals (e.g., 6+ mm acrylic/wood)"],
|
||||
["cut_nonmetals_thin", "Cut thin non-metals"],
|
||||
["mark_coated", "Mark coated items"],
|
||||
].map(([val, label]) => (
|
||||
<label key={val} className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" value={val} {...register("operations")} /> {label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{selectedOps?.length === 0 && (
|
||||
<p className="text-xs text-amber-600 mt-2">Tip: pick one or more to sharpen the recommendation.</p>
|
||||
)}
|
||||
</fieldset>
|
||||
|
||||
{/* Size / Detail / Speed / Budget */}
|
||||
<div className="grid sm:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Part size</label>
|
||||
<select className="w-full border rounded px-2 py-1" {...register("part_size")}>
|
||||
<option value="small">Small (≤ 200 mm)</option>
|
||||
<option value="medium">Medium (≤ 600 mm)</option>
|
||||
<option value="large">Large (> 600 mm)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Detail</label>
|
||||
<select className="w-full border rounded px-2 py-1" {...register("detail")}>
|
||||
<option value="low">Low</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="high">High</option>
|
||||
<option value="micro">Micro</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Throughput</label>
|
||||
<select className="w-full border rounded px-2 py-1" {...register("throughput")}>
|
||||
<option value="low">Low</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="high">High</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Budget</label>
|
||||
<select className="w-full border rounded px-2 py-1" {...register("budget")}>
|
||||
<option value="low">Lower</option>
|
||||
<option value="mid">Mid</option>
|
||||
<option value="high">Higher</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button className="px-3 py-2 border rounded bg-accent text-background hover:opacity-90" type="submit">
|
||||
Get recommendations
|
||||
</button>
|
||||
<Link className="text-sm underline hover:no-underline" href="/buying-guide">
|
||||
Back to Buying Guide
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{!!result && (
|
||||
<div className="space-y-6">
|
||||
<ResultCard
|
||||
title="Top recommendation"
|
||||
type={result.top[0]}
|
||||
why={result.why[result.top[0]]}
|
||||
/>
|
||||
|
||||
{result.top[1] && (
|
||||
<ResultCard
|
||||
title="Alternative to consider"
|
||||
type={result.top[1]}
|
||||
why={result.why[result.top[1]]}
|
||||
secondary
|
||||
/>
|
||||
)}
|
||||
|
||||
<CompareMatrix />
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button className="px-3 py-2 border rounded hover:bg-muted" onClick={() => setResult(null)}>
|
||||
Start over
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-2 border rounded hover:bg-muted"
|
||||
onClick={() => { reset(); setResult(null); }}
|
||||
>
|
||||
New answers
|
||||
</button>
|
||||
<Link className="text-sm underline hover:no-underline" href="/buying-guide">
|
||||
Back to Buying Guide
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ResultCard({
|
||||
title,
|
||||
type,
|
||||
why,
|
||||
secondary,
|
||||
}: {
|
||||
title: string;
|
||||
type: LaserType;
|
||||
why?: string[];
|
||||
secondary?: boolean;
|
||||
}) {
|
||||
const info = TYPE_INFO[type];
|
||||
|
||||
return (
|
||||
<div className="rounded border p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">{title}</h2>
|
||||
{!secondary && <span className="text-xs rounded bg-muted px-2 py-0.5">Best match</span>}
|
||||
</div>
|
||||
<div className="text-base font-medium">{LASER_LABEL[type]}</div>
|
||||
<p className="text-sm text-muted-foreground">{info.summary}</p>
|
||||
|
||||
{!!why?.length && (
|
||||
<div>
|
||||
<div className="text-sm font-medium mb-1">Why this fits</div>
|
||||
<ul className="list-disc pl-5 text-sm space-y-1">
|
||||
{why.slice(0, 5).map((w, i) => <li key={i}>{w}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid sm:grid-cols-3 gap-3 text-sm">
|
||||
<TagList label="Best for" items={info.bestFor} />
|
||||
<TagList label="Materials" items={info.materials} />
|
||||
<TagList label="Cautions" items={info.cautions} tone="warn" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-1">
|
||||
<Link className="text-sm underline hover:no-underline" href={info.learnLink}>
|
||||
See community settings
|
||||
</Link>
|
||||
<Link className="text-sm underline hover:no-underline" href="/submit/settings?target=settings_fiber">
|
||||
Suggest new settings
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TagList({
|
||||
label,
|
||||
items,
|
||||
tone,
|
||||
}: {
|
||||
label: string;
|
||||
items: string[];
|
||||
tone?: "warn";
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<div className="text-sm font-medium mb-1">{label}</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{items.map((t, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className={`text-xs px-2 py-1 rounded border ${
|
||||
tone === "warn" ? "bg-amber-50 border-amber-200" : "bg-muted"
|
||||
}`}
|
||||
>
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CompareMatrix() {
|
||||
const rows: Array<{
|
||||
k: LaserType;
|
||||
label: string;
|
||||
best: string[];
|
||||
ok: string[];
|
||||
avoid: string[];
|
||||
}> = [
|
||||
{
|
||||
k: "fiber",
|
||||
label: LASER_LABEL.fiber,
|
||||
best: ["Bare metals", "Deep metal engrave", "Color marking stainless"],
|
||||
ok: ["Some coated items", "Some plastics w/ additives"],
|
||||
avoid: ["Thick organics cutting"],
|
||||
},
|
||||
{
|
||||
k: "co2_gantry",
|
||||
label: LASER_LABEL.co2_gantry,
|
||||
best: ["Acrylic cutting", "Wood cutting/engraving", "Large panels"],
|
||||
ok: ["Leathers, textiles, rubber"],
|
||||
avoid: ["Bare metals (no coat)"],
|
||||
},
|
||||
{
|
||||
k: "co2_galvo",
|
||||
label: LASER_LABEL.co2_galvo,
|
||||
best: ["Fast marking organics", "Photo engraving organics"],
|
||||
ok: ["Coated metals/non-metals"],
|
||||
avoid: ["Thick sheet cutting", "Large panels"],
|
||||
},
|
||||
{
|
||||
k: "uv",
|
||||
label: LASER_LABEL.uv,
|
||||
best: ["Micro features", "Glass/ceramic/plastics marking"],
|
||||
ok: ["Fine logos on coated metals"],
|
||||
avoid: ["Thick cutting"],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="rounded border p-4">
|
||||
<div className="text-sm font-medium mb-2">Compare laser types</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-left border-b">
|
||||
<th className="py-2 pr-3">Type</th>
|
||||
<th className="py-2 pr-3">Best for</th>
|
||||
<th className="py-2 pr-3">Okay for</th>
|
||||
<th className="py-2">Not ideal</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r) => (
|
||||
<tr key={r.k} className="border-b last:border-0 align-top">
|
||||
<td className="py-2 pr-3 font-medium">{r.label}</td>
|
||||
<td className="py-2 pr-3">{r.best.join(", ")}</td>
|
||||
<td className="py-2 pr-3">{r.ok.join(", ")}</td>
|
||||
<td className="py-2">{r.avoid.join(", ")}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
187
lib/laser-finder.ts
Normal file
187
lib/laser-finder.ts
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
// lib/laser-finder.ts
|
||||
export type LaserType = "fiber" | "co2_gantry" | "co2_galvo" | "uv";
|
||||
|
||||
export const LASER_LABEL: Record<LaserType, string> = {
|
||||
fiber: "Fiber (MOPA/QR)",
|
||||
co2_gantry: "CO₂ Gantry",
|
||||
co2_galvo: "CO₂ Galvo",
|
||||
uv: "UV (355 nm)",
|
||||
};
|
||||
|
||||
export const TYPE_INFO: Record<
|
||||
LaserType,
|
||||
{
|
||||
summary: string;
|
||||
bestFor: string[]; // show as tags
|
||||
materials: string[]; // show as tags
|
||||
cautions: string[]; // negatives / limits
|
||||
learnLink: string; // link to your settings pages
|
||||
}
|
||||
> = {
|
||||
fiber: {
|
||||
summary:
|
||||
"Best for marking/engraving bare metals, color marking on stainless (MOPA), and high-throughput galvo jobs.",
|
||||
bestFor: [
|
||||
"Bare metal marking",
|
||||
"Deep engraving on metals",
|
||||
"Color marking stainless",
|
||||
"Serials/QR/codes on parts",
|
||||
],
|
||||
materials: ["Steel", "Stainless", "Aluminum", "Brass", "Titanium"],
|
||||
cautions: [
|
||||
"Not for cutting wood/acrylic",
|
||||
"Limited on organics/plastics (unless additives/coatings)",
|
||||
],
|
||||
learnLink: "/fiber-settings",
|
||||
},
|
||||
co2_gantry: {
|
||||
summary:
|
||||
"Large work area; best for cutting & engraving non-metals (wood, acrylic, leather, textiles).",
|
||||
bestFor: ["Thick acrylic cuts", "Wood cutting/engraving", "Signage", "Textiles"],
|
||||
materials: ["Wood", "Acrylic", "Leather", "Paper", "Textiles", "Rubber"],
|
||||
cautions: [
|
||||
"Poor on bare metals without coatings",
|
||||
"Slower for fine micro-engraving",
|
||||
],
|
||||
learnLink: "/co2-gantry-settings",
|
||||
},
|
||||
co2_galvo: {
|
||||
summary:
|
||||
"High-speed CO₂ marking/engraving on organics/non-metals with small scan fields.",
|
||||
bestFor: ["Fast marking on organics", "Photo engraving on wood/leather", "High throughput"],
|
||||
materials: ["Wood", "Leather", "Paper/Card", "Anodized/painted items"],
|
||||
cautions: [
|
||||
"Small scan field vs gantry",
|
||||
"Not for cutting thick sheets",
|
||||
"Poor on bare metals",
|
||||
],
|
||||
learnLink: "/co2-galvo-settings",
|
||||
},
|
||||
uv: {
|
||||
summary:
|
||||
"Ultra-fine marking/engraving on plastics, glass, ceramics; low heat-affected zone for micro features.",
|
||||
bestFor: ["Micro text/logos", "Fine plastic marking", "Glass/ceramic marking"],
|
||||
materials: ["Plastics", "Glass", "Ceramics", "PCB/silicon (marking)"],
|
||||
cautions: [
|
||||
"Typically lower power; not for thick cutting",
|
||||
"Higher $/W, smaller working areas",
|
||||
],
|
||||
learnLink: "/uv-settings",
|
||||
},
|
||||
};
|
||||
|
||||
export type Answers = {
|
||||
materials: Array<
|
||||
| "metals_bare"
|
||||
| "metals_coated"
|
||||
| "plastics"
|
||||
| "wood_paper_leather"
|
||||
| "glass_ceramic"
|
||||
| "stone"
|
||||
| "textiles"
|
||||
>;
|
||||
operations: Array<
|
||||
| "deep_mark_metal"
|
||||
| "color_mark_stainless"
|
||||
| "fine_engraving"
|
||||
| "photo_engrave"
|
||||
| "cut_nonmetals_thick"
|
||||
| "cut_nonmetals_thin"
|
||||
| "mark_coated"
|
||||
>;
|
||||
part_size: "small" | "medium" | "large"; // ~ scan field or bed
|
||||
detail: "low" | "medium" | "high" | "micro";
|
||||
throughput: "low" | "medium" | "high";
|
||||
budget: "low" | "mid" | "high";
|
||||
};
|
||||
|
||||
type Score = Record<LaserType, number>;
|
||||
const bump = (s: Score, k: LaserType, n: number) => (s[k] += n);
|
||||
|
||||
export function scoreAnswers(a: Answers): {
|
||||
score: Score;
|
||||
ranked: LaserType[];
|
||||
why: Record<LaserType, string[]>;
|
||||
} {
|
||||
const s: Score = { fiber: 0, co2_gantry: 0, co2_galvo: 0, uv: 0 };
|
||||
const why: Record<LaserType, string[]> = {
|
||||
fiber: [],
|
||||
co2_gantry: [],
|
||||
co2_galvo: [],
|
||||
uv: [],
|
||||
};
|
||||
|
||||
// Materials
|
||||
if (a.materials.includes("metals_bare")) {
|
||||
bump(s, "fiber", 6); why.fiber.push("Bare metals benefit from fiber.");
|
||||
bump(s, "uv", 2); why.uv.push("UV can mark some metals with fine detail.");
|
||||
bump(s, "co2_gantry", -3);
|
||||
bump(s, "co2_galvo", -3);
|
||||
}
|
||||
if (a.materials.includes("metals_coated")) {
|
||||
bump(s, "fiber", 3); why.fiber.push("Coated metals are fiber-friendly.");
|
||||
bump(s, "uv", 2); why.uv.push("UV works well on coatings and labels.");
|
||||
bump(s, "co2_galvo", 1); why.co2_galvo.push("CO₂ galvo can mark coated items quickly.");
|
||||
}
|
||||
if (a.materials.includes("plastics") || a.materials.includes("wood_paper_leather")) {
|
||||
bump(s, "co2_gantry", 3); why.co2_gantry.push("Organics & plastics suit CO₂ gantry cutting/engraving.");
|
||||
bump(s, "co2_galvo", 3); why.co2_galvo.push("CO₂ galvo is fast for organic marking.");
|
||||
bump(s, "uv", 1); why.uv.push("UV excels at fine marking plastics.");
|
||||
}
|
||||
if (a.materials.includes("glass_ceramic")) {
|
||||
bump(s, "uv", 4); why.uv.push("Glass/ceramic: UV has low HAZ for crisp marks.");
|
||||
bump(s, "co2_galvo", 1);
|
||||
}
|
||||
if (a.materials.includes("textiles")) {
|
||||
bump(s, "co2_gantry", 3); why.co2_gantry.push("Textiles: CO₂ gantry handles larger panels.");
|
||||
}
|
||||
if (a.materials.includes("stone")) {
|
||||
bump(s, "co2_gantry", 1); bump(s, "co2_galvo", 1);
|
||||
}
|
||||
|
||||
// Operations
|
||||
if (a.operations.includes("deep_mark_metal")) { bump(s, "fiber", 5); why.fiber.push("Deep metal marking favors fiber."); }
|
||||
if (a.operations.includes("color_mark_stainless")) { bump(s, "fiber", 5); why.fiber.push("Color marking stainless = MOPA fiber."); }
|
||||
if (a.operations.includes("fine_engraving")) {
|
||||
bump(s, "uv", 4); why.uv.push("Micro features need UV’s small spot.");
|
||||
bump(s, "fiber", 2); why.fiber.push("Fiber can achieve fine detail on metals.");
|
||||
bump(s, "co2_galvo", 2);
|
||||
}
|
||||
if (a.operations.includes("photo_engrave")) {
|
||||
bump(s, "uv", 3); why.uv.push("UV gives clean dithers on many materials.");
|
||||
bump(s, "co2_galvo", 2); why.co2_galvo.push("CO₂ galvo is common for photo engraving organics.");
|
||||
}
|
||||
if (a.operations.includes("cut_nonmetals_thick")) { bump(s, "co2_gantry", 6); why.co2_gantry.push("Thick cutting needs gantry CO₂."); }
|
||||
if (a.operations.includes("cut_nonmetals_thin")) {
|
||||
bump(s, "co2_gantry", 3); why.co2_gantry.push("Thin cutting works well on gantry CO₂.");
|
||||
bump(s, "co2_galvo", 2);
|
||||
}
|
||||
if (a.operations.includes("mark_coated")) {
|
||||
bump(s, "fiber", 2); why.fiber.push("Coated marks are straightforward on fiber.");
|
||||
bump(s, "uv", 2); why.uv.push("UV marks coatings with low HAZ.");
|
||||
bump(s, "co2_galvo", 1);
|
||||
}
|
||||
|
||||
// Part size & throughput
|
||||
if (a.part_size === "large") { bump(s, "co2_gantry", 5); why.co2_gantry.push("Large work area points to gantry CO₂."); }
|
||||
if (a.part_size === "small") { bump(s, "co2_galvo", 2); }
|
||||
if (a.throughput === "high") {
|
||||
bump(s, "co2_galvo", 3); why.co2_galvo.push("High throughput favors galvo systems.");
|
||||
bump(s, "fiber", 2); why.fiber.push("Fiber galvos are fast on metals.");
|
||||
}
|
||||
|
||||
// Detail requirement
|
||||
if (a.detail === "micro") {
|
||||
bump(s, "uv", 5); why.uv.push("Micro detail → UV’s spot and short wavelength.");
|
||||
bump(s, "fiber", 2);
|
||||
} else if (a.detail === "high") {
|
||||
bump(s, "uv", 3); bump(s, "fiber", 2); bump(s, "co2_galvo", 1);
|
||||
}
|
||||
|
||||
// Budget (very soft tie-breaker)
|
||||
if (a.budget === "low") bump(s, "co2_gantry", 1);
|
||||
if (a.budget === "high") { bump(s, "fiber", 1); bump(s, "uv", 1); }
|
||||
|
||||
const ranked = (Object.keys(s) as LaserType[]).sort((x, y) => s[y] - s[x]);
|
||||
return { score: s, ranked, why };
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue