Rework the ui of ideogram dataset image caption editor
This commit is contained in:
Jaret Burkett
513
ui/src/components/IdeogramCaptionSidebar.tsx
Normal file
513
ui/src/components/IdeogramCaptionSidebar.tsx
Normal file
@@ -0,0 +1,513 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user