Skip to content

fix: correct playground upload preview URLs #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nblog wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: correct playground upload preview URLs #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
17123ae
fix: honor light theme in playground
nblog Jun 9, 2026
a19f59e
Add OpenAI image model adapter
nblog Jun 10, 2026
b709c06
fix: correct playground upload preview URLs
nblog Jun 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions frontend/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,22 +61,22 @@ html.dark {
}

html.light {
--color-bg-base: #f8f9fa;
--color-bg-surface: #ffffff;
--color-bg-base: #eef1f6;
--color-bg-surface: rgba(247, 249, 252, 0.86);
--color-bg-elevated: #ffffff;
--color-bg-input: #f1f3f5;
--color-bg-hover: rgba(0, 0, 0, 0.04);
--color-glass: rgba(0, 0, 0, 0.03);
--color-border-default: rgba(0, 0, 0, 0.1);
--color-border-subtle: rgba(0, 0, 0, 0.06);
--color-bg-input: rgba(255, 255, 255, 0.72);
--color-bg-hover: rgba(15, 23, 42, 0.06);
--color-glass: rgba(15, 23, 42, 0.035);
--color-border-default: rgba(15, 23, 42, 0.12);
--color-border-subtle: rgba(15, 23, 42, 0.07);
--color-text-primary: #1a1a1a;
--color-text-secondary: #6b7280;
--color-text-muted: #9ca3af;
--color-overlay: rgba(0, 0, 0, 0.2);
--color-bg-inset: rgba(0, 0, 0, 0.02);
--color-bg-inset: rgba(15, 23, 42, 0.035);
--foreground-rgb: 26, 26, 26;
--background-start-rgb: 248, 249, 250;
--background-end-rgb: 248, 249, 250;
--background-start-rgb: 238, 241, 246;
--background-end-rgb: 238, 241, 246;

/* Light theme: same hues, slightly higher chroma + darker lightness
so chips read with enough weight against a white surface. */
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/layout/GlobalSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function GlobalSidebar({ activeTab, onTabChange }: GlobalSidebarP
};

return (
<aside className="w-56 flex-shrink-0 h-full border-r border-glass-border bg-surface backdrop-blur-xl flex flex-col">
<aside className="w-56 flex-shrink-0 h-full border-r border-glass-border bg-glass backdrop-blur-xl flex flex-col">
{/* Branding */}
<div className="p-5 border-b border-glass-border">
<LumenXBranding size="sm" />
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/layout/LumenXBranding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,22 @@ export default function LumenXBranding({ size = "md", showSlogan = true }: Lumen
</div>
<div className="flex flex-col justify-center">
<div className="flex items-baseline gap-0">
<span className={`font-mono ${titleSize} font-bold tracking-tight text-white`}>
<span className={`font-mono ${titleSize} font-bold tracking-normal text-foreground`}>
LUMEN
</span>
<span className={`font-mono ${titleSize} font-black tracking-tight text-[#646cff]`}>
<span className={`font-mono ${titleSize} font-black tracking-normal text-primary`}>
X
</span>
</div>
{size !== "sm" && (
<span className="font-mono text-[10px] text-white/30 tracking-[0.2em] uppercase -mt-0.5">
<span className="font-mono text-[10px] text-text-muted tracking-[0.2em] uppercase -mt-0.5">
Studio
</span>
)}
</div>
</div>
{showSlogan && (
<p className="font-mono text-[8px] text-white/20 tracking-[0.15em] text-center mt-2.5 uppercase">
<p className="font-mono text-[8px] text-text-muted tracking-[0.15em] text-center mt-2.5 uppercase">
Render Noise into Narrative
</p>
)}
Expand Down
42 changes: 21 additions & 21 deletions frontend/src/components/modules/playground/AssetPickerModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export default function AssetPickerModal({
<AnimatePresence>
{isOpen && (
<motion.div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
variants={overlayVariants}
initial="hidden"
animate="visible"
Expand All @@ -233,7 +233,7 @@ export default function AssetPickerModal({
<motion.div
className="
w-[640px] max-h-[80vh]
bg-[#141416] border border-white/[0.08]
bg-elevated border border-glass-border
rounded-2xl shadow-2xl
flex flex-col overflow-hidden
"
Expand All @@ -248,7 +248,7 @@ export default function AssetPickerModal({
{/* Header */}
{/* -------------------------------------------------------------- */}
<div className="flex items-center justify-between px-5 pt-5 pb-3">
<h2 className="text-sm font-semibold text-white/90">
<h2 className="text-sm font-semibold text-foreground">
选择素材
</h2>

Expand All @@ -257,7 +257,7 @@ export default function AssetPickerModal({
onClick={onClose}
className="
w-7 h-7 rounded-lg flex items-center justify-center
text-white/40 hover:text-white/80 hover:bg-white/[0.06]
text-text-secondary hover:text-foreground hover:bg-hover-bg
transition-colors
"
>
Expand All @@ -278,8 +278,8 @@ export default function AssetPickerModal({
transition-colors
${
activeTab === tab.key
? 'bg-[#646cff]/15 text-[#646cff] border border-[#646cff]/30'
: 'text-white/50 hover:text-white/70 hover:bg-white/[0.04] border border-transparent'
? 'bg-primary/15 text-primary border border-primary/30'
: 'text-text-secondary hover:text-foreground hover:bg-hover-bg border border-transparent'
}
`}
>
Expand All @@ -296,8 +296,8 @@ export default function AssetPickerModal({
<div className="flex-1 overflow-y-auto px-5 pb-2 min-h-0">
{loading && (
<div className="flex flex-col items-center justify-center py-16 gap-3">
<Loader2 className="w-6 h-6 text-white/30 animate-spin" />
<span className="text-xs text-white/40">加载中...</span>
<Loader2 className="w-6 h-6 text-text-secondary animate-spin" />
<span className="text-xs text-text-secondary">加载中...</span>
</div>
)}

Expand All @@ -307,7 +307,7 @@ export default function AssetPickerModal({
<button
type="button"
onClick={fetchAssets}
className="text-xs text-[#646cff] hover:underline"
className="text-xs text-primary hover:underline"
>
重试
</button>
Expand All @@ -316,11 +316,11 @@ export default function AssetPickerModal({

{!loading && !error && filteredAssets.length === 0 && (
<div className="flex flex-col items-center justify-center py-16 gap-2">
<Image className="w-8 h-8 text-white/20" />
<span className="text-xs text-white/40">
<Image className="w-8 h-8 text-text-muted" />
<span className="text-xs text-text-secondary">
暂无可用素材
</span>
<span className="text-[11px] text-white/25">
<span className="text-[11px] text-text-muted">
在 Playground 中生成内容后，输出将出现在这里
</span>
</div>
Expand All @@ -343,12 +343,12 @@ export default function AssetPickerModal({
}
className={`
relative aspect-square rounded-lg overflow-hidden
bg-white/[0.04] cursor-pointer
bg-input-bg cursor-pointer
transition-all duration-150
${
isSelected
? 'border-2 border-[#646cff] ring-2 ring-[#646cff]/30'
: 'border border-white/[0.04] hover:border-[#646cff]/50'
? 'border-2 border-primary ring-2 ring-primary/30'
: 'border border-glass-border hover:border-primary/50'
}
`}
>
Expand Down Expand Up @@ -378,7 +378,7 @@ export default function AssetPickerModal({

{/* Selected checkmark */}
{isSelected && (
<div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-[#646cff] flex items-center justify-center">
<div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-primary flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
)}
Expand All @@ -399,14 +399,14 @@ export default function AssetPickerModal({
{/* -------------------------------------------------------------- */}
{/* Footer */}
{/* -------------------------------------------------------------- */}
<div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-white/[0.06]">
<div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-glass-border">
<button
type="button"
onClick={onClose}
className="
px-4 py-2 rounded-lg text-xs
text-white/60 hover:text-white/80
hover:bg-white/[0.04]
text-text-secondary hover:text-foreground
hover:bg-hover-bg
transition-colors
"
>
Expand All @@ -421,8 +421,8 @@ export default function AssetPickerModal({
transition-all
${
selected
? 'bg-[#646cff] text-white hover:bg-[#545ae0] shadow-lg shadow-[#646cff]/20'
: 'bg-white/[0.06] text-white/30 cursor-not-allowed'
? 'bg-primary text-white hover:bg-secondary shadow-lg shadow-primary/20'
: 'bg-glass text-text-muted cursor-not-allowed'
}
`}
>
Expand Down
42 changes: 21 additions & 21 deletions frontend/src/components/modules/playground/DetailPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,9 +203,9 @@ export default function DetailPanel({
/>

{/* Container */}
<div className="fixed inset-4 md:inset-8 z-50 bg-[#0e0e11] border border-white/[0.06] rounded-2xl shadow-2xl flex overflow-hidden">
<div className="fixed inset-4 md:inset-8 z-50 bg-elevated border border-glass-border rounded-2xl shadow-2xl flex overflow-hidden">
{/* ─── LEFT SIDE (Media) ─────────────────────────────────────────── */}
<div className="relative w-[60%] h-full bg-[#080809] flex items-center justify-center">
<div className="relative w-[60%] h-full bg-surface-inset flex items-center justify-center">
{mediaUrl ? (
isVideo ? (
<video
Expand All @@ -221,7 +221,7 @@ export default function DetailPanel({
/>
)
) : (
<div className="flex flex-col items-center gap-2 text-white/20">
<div className="flex flex-col items-center gap-2 text-text-muted">
<Video className="w-12 h-12" />
<span className="font-mono text-xs">No media</span>
</div>
Expand All @@ -247,29 +247,29 @@ export default function DetailPanel({
</div>

{/* ─── RIGHT SIDE (Details) ──────────────────────────────────────── */}
<div className="relative w-[40%] h-full overflow-y-auto p-6 border-l border-white/[0.06]">
<div className="relative w-[40%] h-full overflow-y-auto p-6 border-l border-glass-border">
{/* Close button */}
<button
onClick={onClose}
className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-white/[0.04] border border-white/[0.08] flex items-center justify-center hover:bg-white/[0.10] transition-colors"
className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-glass border border-glass-border flex items-center justify-center hover:bg-hover-bg transition-colors"
>
<X className="w-4 h-4 text-white/60" />
<X className="w-4 h-4 text-text-secondary" />
</button>

{/* Section 1: Title */}
<div className="mb-6 pr-10">
<h2 className="text-lg font-semibold text-white mb-1">
<h2 className="text-lg font-semibold text-foreground mb-1">
{generation.model_id}
</h2>
<div className="flex items-center gap-2 mb-1">
<span className="font-mono text-[10px] bg-white/[0.06] text-white/60 rounded px-[6px] py-[2px] uppercase">
<span className="font-mono text-[10px] bg-glass text-text-secondary rounded px-[6px] py-[2px] uppercase">
{MODE_LABELS[generation.mode] || generation.mode}
</span>
<span className="font-mono text-[10px] text-white/30">
<span className="font-mono text-[10px] text-text-muted">
{generation.id.slice(0, 8)}
</span>
</div>
<p className="font-mono text-[11px] text-white/30">
<p className="font-mono text-[11px] text-text-muted">
{formatTimestamp(generation.created_at)}
</p>
</div>
Expand All @@ -279,7 +279,7 @@ export default function DetailPanel({
{mediaUrl && (
<button
onClick={handleDownload}
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-white/[0.06] border border-white/[0.08] text-white/80 text-sm font-medium hover:bg-white/[0.10] transition-colors"
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-glass border border-glass-border text-text-secondary text-sm font-medium hover:bg-hover-bg hover:text-foreground transition-colors"
>
<Download className="w-4 h-4" />
Download
Expand All @@ -291,8 +291,8 @@ export default function DetailPanel({
disabled={saving}
className={`w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border text-sm font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-wait ${
saved
? 'bg-white/[0.04] border-green-500/20 text-green-400 hover:border-white/[0.12] hover:text-white/60'
: 'bg-white/[0.06] border-white/[0.08] text-white/80 hover:bg-white/[0.10]'
? 'bg-green-500/10 border-green-500/25 text-green-500 hover:bg-green-500/15'
: 'bg-glass border-glass-border text-text-secondary hover:bg-hover-bg hover:text-foreground'
}`}
>
<Star
Expand All @@ -304,7 +304,7 @@ export default function DetailPanel({
{!isVideo && output?.media_path && onGenerateVideo && (
<button
onClick={() => onGenerateVideo(output.media_path)}
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-[#646cff]/10 border border-[#646cff]/20 text-[#646cff] text-sm font-medium hover:bg-[#646cff]/20 transition-colors"
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-primary/10 border border-primary/20 text-primary text-sm font-medium hover:bg-primary/20 transition-colors"
>
<Video className="w-4 h-4" />
Generate Video
Expand Down Expand Up @@ -337,14 +337,14 @@ export default function DetailPanel({
</h3>
<button
onClick={handleCopyPrompt}
className="flex items-center gap-1 px-2 py-1 rounded text-[10px] text-white/40 hover:text-white/60 hover:bg-white/[0.06] transition-colors"
className="flex items-center gap-1 px-2 py-1 rounded text-[10px] text-text-secondary hover:text-foreground hover:bg-hover-bg transition-colors"
>
<Copy className="w-3 h-3" />
{copied ? 'Copied' : 'Copy'}
</button>
</div>
<div className="max-h-40 overflow-y-auto rounded-lg bg-white/[0.03] border border-white/[0.06] p-3">
<p className="text-[12px] text-white/70 leading-relaxed whitespace-pre-wrap break-words">
<div className="max-h-40 overflow-y-auto rounded-lg bg-input-bg border border-glass-border p-3">
<p className="text-[12px] text-text-secondary leading-relaxed whitespace-pre-wrap break-words">
{generation.prompt || '(empty)'}
</p>
</div>
Expand All @@ -359,8 +359,8 @@ export default function DetailPanel({
<div className="grid grid-cols-2 gap-x-4 gap-y-2">
{paramEntries.map(([label, value]) => (
<div key={label}>
<p className="text-[10px] text-white/40 mb-0.5">{label}</p>
<p className="text-[12px] text-white font-mono truncate">
<p className="text-[10px] text-text-secondary mb-0.5">{label}</p>
<p className="text-[12px] text-foreground font-mono truncate">
{value}
</p>
</div>
Expand All @@ -375,8 +375,8 @@ export default function DetailPanel({
<h3 className="font-mono text-[10px] uppercase tracking-[0.18em] text-amber-500/80 mb-2">
NEGATIVE PROMPT
</h3>
<div className="max-h-28 overflow-y-auto rounded-lg bg-white/[0.03] border border-white/[0.06] p-3">
<p className="text-[12px] text-white/50 leading-relaxed whitespace-pre-wrap break-words">
<div className="max-h-28 overflow-y-auto rounded-lg bg-input-bg border border-glass-border p-3">
<p className="text-[12px] text-text-secondary leading-relaxed whitespace-pre-wrap break-words">
{generation.negative_prompt}
</p>
</div>
Expand Down
Loading