132 lines
5.9 KiB
TypeScript
132 lines
5.9 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { AnimatePresence, motion } from "framer-motion";
|
||
|
||
/**
|
||
* 高级控制面板（Phase 2 占位）
|
||
*
|
||
* 对应 INFOLAYER.md 3.3 节「高级控制」：提供给高级用户的参数调节抽屉。
|
||
* 当前所有参数均为占位，不会真实下发到后端。
|
||
*/
|
||
export function AdvancedControls() {
|
||
const [open, setOpen] = useState(false);
|
||
const [cfg, setCfg] = useState(7.5);
|
||
const [steps, setSteps] = useState(28);
|
||
const [sampler, setSampler] = useState("DPM++ 2M Karras");
|
||
const [seed, setSeed] = useState("");
|
||
const [styleWeight, setStyleWeight] = useState(0.8);
|
||
const [charWeight, setCharWeight] = useState(0.85);
|
||
|
||
return (
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setOpen(!open)}
|
||
className="h-7 px-2 rounded-lg text-xs flex items-center gap-1.5
|
||
border border-[var(--border)] bg-[var(--bg-tertiary)]
|
||
text-[var(--text-secondary)] hover:text-[var(--text-primary)]
|
||
hover:border-[var(--accent)]/40 cursor-pointer transition-all"
|
||
title="高级控制（占位）"
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<circle cx="12" cy="12" r="3" />
|
||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||
</svg>
|
||
高级
|
||
<span className="phase-chip">P2</span>
|
||
</button>
|
||
|
||
<AnimatePresence>
|
||
{open && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 8 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: 8 }}
|
||
className="absolute bottom-full mb-2 right-0 w-80 max-w-[calc(100vw-24px)]
|
||
rounded-xl surface-2 border border-[var(--border)] shadow-xl
|
||
backdrop-blur-xl z-40 p-3"
|
||
>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<span className="typo-strong text-xs">高级控制（占位）</span>
|
||
<button
|
||
onClick={() => setOpen(false)}
|
||
className="text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] cursor-pointer"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<Slider label="CFG Scale" value={cfg} min={1} max={20} step={0.5} onChange={setCfg} />
|
||
<Slider label="Steps" value={steps} min={10} max={60} step={1} onChange={setSteps} />
|
||
<Slider label="风格强度" value={styleWeight} min={0} max={1.5} step={0.05} onChange={setStyleWeight} />
|
||
<Slider label="角色一致性" value={charWeight} min={0} max={1.5} step={0.05} onChange={setCharWeight} />
|
||
|
||
<div>
|
||
<label className="block typo-micro mb-1" style={{ textTransform: "none" }}>采样器</label>
|
||
<select
|
||
value={sampler}
|
||
onChange={(e) => setSampler(e.target.value)}
|
||
className="w-full px-2 py-1.5 text-xs rounded-md bg-[var(--bg-primary)]
|
||
border border-[var(--border)] focus:border-[var(--accent)]/40 outline-none"
|
||
>
|
||
{["DPM++ 2M Karras", "Euler a", "DDIM", "UniPC"].map((s) => (
|
||
<option key={s} value={s}>{s}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block typo-micro mb-1" style={{ textTransform: "none" }}>Seed</label>
|
||
<div className="flex gap-1.5">
|
||
<input
|
||
value={seed}
|
||
onChange={(e) => setSeed(e.target.value)}
|
||
placeholder="留空为随机"
|
||
className="flex-1 px-2 py-1.5 text-xs rounded-md bg-[var(--bg-primary)]
|
||
border border-[var(--border)] focus:border-[var(--accent)]/40 outline-none font-mono"
|
||
/>
|
||
<button
|
||
onClick={() => setSeed(Math.floor(Math.random() * 9_999_999).toString())}
|
||
className="px-2 py-1.5 text-xs rounded-md border border-[var(--border)]
|
||
text-[var(--text-secondary)] hover:text-[var(--text-primary)]
|
||
cursor-pointer"
|
||
>
|
||
🎲
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-3 pt-3 border-t border-[var(--border)] text-[10px] text-[var(--text-secondary)]">
|
||
参数为占位，真实生效链路待 Phase 2 交付。
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Slider({
|
||
label, value, min, max, step, onChange,
|
||
}: { label: string; value: number; min: number; max: number; step: number; onChange: (v: number) => void }) {
|
||
return (
|
||
<div>
|
||
<div className="flex items-center justify-between mb-1">
|
||
<label className="typo-micro" style={{ textTransform: "none" }}>{label}</label>
|
||
<span className="text-[11px] text-[var(--accent)] font-mono">{value}</span>
|
||
</div>
|
||
<input
|
||
type="range"
|
||
min={min}
|
||
max={max}
|
||
step={step}
|
||
value={value}
|
||
onChange={(e) => onChange(parseFloat(e.target.value))}
|
||
className="w-full accent-[var(--accent)]"
|
||
/>
|
||
</div>
|
||
);
|
||
}
|