514 lines
18 KiB
TypeScript
514 lines
18 KiB
TypeScript
'use client';
|
|
import { useMemo, useState } from 'react';
|
|
import classNames from 'classnames';
|
|
import { Plus, Trash2, X, SquareDashed } from 'lucide-react';
|
|
import { boxColor, boxColorAlpha } from './BoundingBoxOverlay';
|
|
|
|
// Detects an Ideogram structured caption (the distinctive marker is the
|
|
// compositional_deconstruction block). Used by the viewer to decide whether to
|
|
// show this form editor instead of a plain textarea.
|
|
export function isIdeogramCaption(text: string): boolean {
|
|
const t = text.trim();
|
|
if (!t.startsWith('{')) return false;
|
|
try {
|
|
const d = JSON.parse(t);
|
|
return !!d && typeof d === 'object' && typeof d.compositional_deconstruction === 'object';
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Normalize an arbitrary color string to a #rrggbb value usable by <input type=color>.
|
|
function toHex6(c: string): string {
|
|
const s = (c || '').trim();
|
|
if (/^#[0-9a-fA-F]{6}$/.test(s)) return s;
|
|
if (/^#[0-9a-fA-F]{3}$/.test(s)) {
|
|
return (
|
|
'#' +
|
|
s
|
|
.slice(1)
|
|
.split('')
|
|
.map(ch => ch + ch)
|
|
.join('')
|
|
);
|
|
}
|
|
return '#000000';
|
|
}
|
|
|
|
const clamp1000 = (n: number) => Math.max(0, Math.min(1000, Math.round(isNaN(n) ? 0 : n)));
|
|
|
|
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex flex-col gap-2 rounded-lg border border-gray-800 bg-gray-900/40 p-2.5">
|
|
<div className="text-[11px] font-semibold uppercase tracking-wide text-gray-400">{title}</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TextField({
|
|
label,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
}: {
|
|
label?: string;
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
placeholder?: string;
|
|
}) {
|
|
return (
|
|
<label className="flex flex-col gap-0.5">
|
|
{label && <span className="text-[10px] text-gray-400">{label}</span>}
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
placeholder={placeholder}
|
|
spellCheck={false}
|
|
onChange={e => onChange(e.target.value)}
|
|
className="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-100 outline-none focus:border-blue-500"
|
|
/>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function TextAreaField({
|
|
label,
|
|
value,
|
|
onChange,
|
|
rows = 3,
|
|
placeholder,
|
|
}: {
|
|
label?: string;
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
rows?: number;
|
|
placeholder?: string;
|
|
}) {
|
|
return (
|
|
<label className="flex flex-col gap-0.5">
|
|
{label && <span className="text-[10px] text-gray-400">{label}</span>}
|
|
<textarea
|
|
value={value}
|
|
rows={rows}
|
|
placeholder={placeholder}
|
|
onChange={e => onChange(e.target.value)}
|
|
className="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-100 outline-none focus:border-blue-500 resize-none"
|
|
/>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function ColorPalette({ colors, max, onChange }: { colors: string[]; max: number; onChange: (c: string[]) => void }) {
|
|
const setAt = (i: number, v: string) => onChange(colors.map((c, idx) => (idx === i ? v : c)));
|
|
const removeAt = (i: number) => onChange(colors.filter((_, idx) => idx !== i));
|
|
return (
|
|
<div className="flex flex-wrap gap-1.5 items-center">
|
|
{colors.map((c, i) => (
|
|
<div key={i} className="flex items-center gap-1 bg-gray-800 border border-gray-700 rounded px-1 py-0.5">
|
|
<input
|
|
type="color"
|
|
value={toHex6(c)}
|
|
onChange={e => setAt(i, e.target.value)}
|
|
className="w-5 h-5 rounded cursor-pointer bg-transparent border-0 p-0"
|
|
title="Pick color"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={c}
|
|
spellCheck={false}
|
|
onChange={e => setAt(i, e.target.value)}
|
|
className="w-[58px] bg-transparent text-[10px] text-gray-200 outline-none font-mono"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeAt(i)}
|
|
className="text-gray-500 hover:text-rose-400"
|
|
title="Remove color"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
{colors.length < max && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange([...colors, '#888888'])}
|
|
className="flex items-center gap-1 text-[10px] text-gray-400 hover:text-gray-200 border border-dashed border-gray-700 rounded px-1.5 py-1"
|
|
>
|
|
<Plus className="w-3 h-3" /> Add
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface Props {
|
|
caption: string;
|
|
onChange: (next: string) => void;
|
|
selectedIndex: number | null;
|
|
onSelectIndex: (i: number | null) => void;
|
|
isDrawing: boolean;
|
|
onToggleDrawing: () => void;
|
|
onSave: () => void;
|
|
isDirty: boolean;
|
|
}
|
|
|
|
export default function IdeogramCaptionSidebar({
|
|
caption,
|
|
onChange,
|
|
selectedIndex,
|
|
onSelectIndex,
|
|
isDrawing,
|
|
onToggleDrawing,
|
|
onSave,
|
|
isDirty,
|
|
}: Props) {
|
|
const [showRaw, setShowRaw] = useState(false);
|
|
|
|
const data = useMemo(() => {
|
|
try {
|
|
return JSON.parse(caption);
|
|
} catch {
|
|
return null;
|
|
}
|
|
}, [caption]);
|
|
|
|
// Parse fresh from the current caption, mutate, and emit pretty JSON so the
|
|
// string remains the single source of truth (shared with the image editor).
|
|
const update = (mutator: (d: any) => void) => {
|
|
let d: any;
|
|
try {
|
|
d = JSON.parse(caption);
|
|
} catch {
|
|
return;
|
|
}
|
|
mutator(d);
|
|
onChange(JSON.stringify(d, null, 2));
|
|
};
|
|
|
|
if (!data) {
|
|
return (
|
|
<div className="rounded border border-rose-700 bg-rose-950/30 p-2 text-xs text-rose-300">
|
|
Caption is not valid JSON, so the form editor is unavailable. Fix it in the raw text below.
|
|
<textarea
|
|
value={caption}
|
|
onChange={e => onChange(e.target.value)}
|
|
rows={8}
|
|
className="mt-2 w-full bg-gray-800 border border-gray-700 rounded p-2 text-gray-100 outline-none resize-none"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const style = data.style_description || {};
|
|
const decon = data.compositional_deconstruction || {};
|
|
const elements: any[] = Array.isArray(decon.elements) ? decon.elements : [];
|
|
|
|
const setStyle = (key: string, value: string) =>
|
|
update(d => {
|
|
d.style_description = { ...(d.style_description || {}), [key]: value };
|
|
});
|
|
|
|
const setStylePalette = (cols: string[]) =>
|
|
update(d => {
|
|
const sd = { ...(d.style_description || {}) };
|
|
if (cols.length) sd.color_palette = cols;
|
|
else delete sd.color_palette;
|
|
d.style_description = sd;
|
|
});
|
|
|
|
const setElement = (i: number, mutator: (el: any) => void) =>
|
|
update(d => {
|
|
const els = d?.compositional_deconstruction?.elements;
|
|
if (Array.isArray(els) && els[i]) mutator(els[i]);
|
|
});
|
|
|
|
const addElement = () => {
|
|
update(d => {
|
|
if (!d.compositional_deconstruction || typeof d.compositional_deconstruction !== 'object') {
|
|
d.compositional_deconstruction = {};
|
|
}
|
|
if (!Array.isArray(d.compositional_deconstruction.elements)) {
|
|
d.compositional_deconstruction.elements = [];
|
|
}
|
|
d.compositional_deconstruction.elements.push({ type: 'obj', desc: '' });
|
|
});
|
|
onSelectIndex(elements.length);
|
|
};
|
|
|
|
const removeElement = (i: number) => {
|
|
update(d => {
|
|
d?.compositional_deconstruction?.elements?.splice(i, 1);
|
|
});
|
|
onSelectIndex(null);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 text-sm">
|
|
{/* Header — stays pinned while the form scrolls */}
|
|
<div className="sticky -top-3 z-20 -mx-3 -mt-3 px-3 pt-3 pb-2 bg-gray-950/95 backdrop-blur border-b border-gray-800 flex items-center gap-2">
|
|
<span className="text-xs font-semibold text-gray-200">Ideogram Caption</span>
|
|
{isDirty && (
|
|
<span
|
|
className="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_6px] shadow-blue-500/60"
|
|
title="Unsaved changes"
|
|
/>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={onSave}
|
|
disabled={!isDirty}
|
|
className={classNames('ml-auto px-4 py-1.5 rounded-md border text-xs font-medium transition-colors', {
|
|
'bg-green-600 border-green-500 text-white hover:bg-green-500 shadow-sm': isDirty,
|
|
'border-gray-700 text-gray-500 cursor-default': !isDirty,
|
|
})}
|
|
>
|
|
{isDirty ? 'Save' : 'Saved'}
|
|
</button>
|
|
</div>
|
|
|
|
<TextAreaField
|
|
label="High-level description"
|
|
value={data.high_level_description ?? ''}
|
|
onChange={v => update(d => (d.high_level_description = v))}
|
|
rows={3}
|
|
placeholder="One-sentence summary of the image..."
|
|
/>
|
|
|
|
<Section title="Style">
|
|
<TextField label="Aesthetics" value={style.aesthetics ?? ''} onChange={v => setStyle('aesthetics', v)} />
|
|
<TextField label="Lighting" value={style.lighting ?? ''} onChange={v => setStyle('lighting', v)} />
|
|
<TextField label="Photo / render" value={style.photo ?? ''} onChange={v => setStyle('photo', v)} />
|
|
<TextField
|
|
label="Medium"
|
|
value={style.medium ?? ''}
|
|
onChange={v => setStyle('medium', v)}
|
|
placeholder="Photograph."
|
|
/>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[10px] text-gray-400">Color palette (max 16)</span>
|
|
<ColorPalette
|
|
colors={Array.isArray(style.color_palette) ? style.color_palette : []}
|
|
max={16}
|
|
onChange={setStylePalette}
|
|
/>
|
|
</div>
|
|
</Section>
|
|
|
|
<Section title="Background">
|
|
<TextAreaField
|
|
label=""
|
|
value={decon.background ?? ''}
|
|
onChange={v =>
|
|
update(d => {
|
|
d.compositional_deconstruction = { ...(d.compositional_deconstruction || {}), background: v };
|
|
})
|
|
}
|
|
rows={4}
|
|
placeholder="The scene shell: walls, floor, sky, ambient light..."
|
|
/>
|
|
</Section>
|
|
|
|
<Section title={`Elements (${elements.length})`}>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={addElement}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-gray-600 text-gray-300 hover:bg-gray-800 text-xs transition-colors"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" /> Add element
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onToggleDrawing}
|
|
title="Draw a new box on the image"
|
|
className={classNames('flex items-center gap-1.5 px-3 py-1.5 rounded-md border text-xs transition-colors', {
|
|
'bg-blue-600 border-blue-500 text-white': isDrawing,
|
|
'border-gray-600 text-gray-300 hover:bg-gray-800': !isDrawing,
|
|
})}
|
|
>
|
|
<SquareDashed className="w-3.5 h-3.5" /> {isDrawing ? 'Drawing… (esc to cancel)' : 'Draw box'}
|
|
</button>
|
|
</div>
|
|
|
|
{elements.map((el, i) => {
|
|
const isText = el.type === 'text';
|
|
const selected = selectedIndex === i;
|
|
const bbox = Array.isArray(el.bbox) && el.bbox.length === 4 ? el.bbox : null;
|
|
const palette = Array.isArray(el.color_palette) ? el.color_palette : [];
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={classNames('rounded-md border p-2.5 flex flex-col gap-2.5 transition-colors', {
|
|
'ring-1 ring-blue-500/40': selected,
|
|
})}
|
|
style={{
|
|
backgroundColor: boxColorAlpha(i, selected ? 0.22 : 0.12),
|
|
borderColor: selected ? boxColor(i) : boxColorAlpha(i, 0.4),
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-1.5">
|
|
<button
|
|
type="button"
|
|
onClick={() => onSelectIndex(selected ? null : i)}
|
|
className={classNames(
|
|
'flex items-center gap-1.5 text-[11px] font-semibold px-2.5 py-1 rounded-md transition-colors',
|
|
{
|
|
'bg-blue-600 text-white': selected,
|
|
'bg-gray-800 text-gray-400 hover:text-gray-200': !selected,
|
|
},
|
|
)}
|
|
title="Select (highlights its box on the image)"
|
|
>
|
|
<span
|
|
className="w-2.5 h-2.5 rounded-sm border border-black/30"
|
|
style={{ backgroundColor: boxColor(i) }}
|
|
/>
|
|
#{i + 1}
|
|
</button>
|
|
<div className="flex items-center rounded-md border border-gray-700 overflow-hidden">
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
setElement(i, e => {
|
|
e.type = 'obj';
|
|
delete e.text;
|
|
})
|
|
}
|
|
className={classNames('text-[11px] px-3 py-1 transition-colors', {
|
|
'bg-cyan-600 text-white': !isText,
|
|
'text-gray-300 hover:bg-gray-800': isText,
|
|
})}
|
|
>
|
|
obj
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
setElement(i, e => {
|
|
e.type = 'text';
|
|
if (e.text == null) e.text = '';
|
|
})
|
|
}
|
|
className={classNames('text-[11px] px-3 py-1 border-l border-gray-700 transition-colors', {
|
|
'bg-amber-600 text-white': isText,
|
|
'text-gray-300 hover:bg-gray-800': !isText,
|
|
})}
|
|
>
|
|
text
|
|
</button>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeElement(i)}
|
|
className="ml-auto text-gray-500 hover:text-rose-400 transition-colors"
|
|
title="Delete element"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{isText && (
|
|
<TextAreaField
|
|
label="Text (rendered in image)"
|
|
value={el.text ?? ''}
|
|
onChange={v => setElement(i, e => (e.text = v))}
|
|
rows={2}
|
|
/>
|
|
)}
|
|
|
|
<TextAreaField
|
|
label="Description"
|
|
value={el.desc ?? ''}
|
|
onChange={v => setElement(i, e => (e.desc = v))}
|
|
rows={3}
|
|
/>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] text-gray-400">Bounding box {bbox ? '' : '(none)'}</span>
|
|
{bbox ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => setElement(i, e => delete e.bbox)}
|
|
className="text-[10px] text-rose-400 hover:text-rose-300"
|
|
>
|
|
remove
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => setElement(i, e => (e.bbox = [250, 250, 750, 750]))}
|
|
className="text-[10px] text-blue-400 hover:text-blue-300"
|
|
>
|
|
+ add box
|
|
</button>
|
|
)}
|
|
</div>
|
|
{bbox && (
|
|
<div className="grid grid-cols-4 gap-1">
|
|
{['y1', 'x1', 'y2', 'x2'].map((lbl, k) => (
|
|
<label key={k} className="flex flex-col">
|
|
<span className="text-[9px] text-gray-500">{lbl}</span>
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
max={1000}
|
|
value={bbox[k]}
|
|
onChange={e =>
|
|
setElement(i, el2 => {
|
|
const bb = [...el2.bbox];
|
|
bb[k] = clamp1000(parseInt(e.target.value, 10));
|
|
el2.bbox = bb;
|
|
})
|
|
}
|
|
className="bg-gray-800 border border-gray-700 rounded px-1 py-0.5 text-[11px] text-gray-100 outline-none focus:border-blue-500"
|
|
/>
|
|
</label>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[10px] text-gray-400">Colors (max 5)</span>
|
|
<ColorPalette
|
|
colors={palette}
|
|
max={5}
|
|
onChange={cols =>
|
|
setElement(i, e => {
|
|
if (cols.length) e.color_palette = cols;
|
|
else delete e.color_palette;
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</Section>
|
|
|
|
{/* Advanced raw-JSON escape hatch */}
|
|
<div className="border-t border-gray-800 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowRaw(s => !s)}
|
|
className="text-[11px] text-gray-500 hover:text-gray-300"
|
|
>
|
|
{showRaw ? '▾ Hide raw JSON' : '▸ Raw JSON'}
|
|
</button>
|
|
{showRaw && (
|
|
<textarea
|
|
value={caption}
|
|
onChange={e => onChange(e.target.value)}
|
|
rows={10}
|
|
spellCheck={false}
|
|
className="mt-1 w-full bg-gray-800 border border-gray-700 rounded p-2 text-[11px] font-mono text-gray-100 outline-none resize-none"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|