GenarrativeAI/Genarrative
10
0
Fork 0
Code Issues 18 Pull Requests 6 Actions Packages Projects 1 Releases Wiki Activity

Add UI-design asset extraction & spritesheet support

Browse Source 
Introduce a new UI design asset extraction flow: add POST /api/editor/ui-designs/assets/extractions handler that always uses gpt-image-2 with the fixed prompt "提取画面中的所有独立并整理成spritesheet"; parse Data URL references, call OpenAI image edits, return a spritesheet and sliced icon assets. Increase request body limit for image Data URLs and wire the route with bearer auth. Add platform-image slicing: slice_generated_icon_spritesheet_all_by_connected_components (with auto-naming "素材 1..N", foreground estimation and heuristics) and export it. Add Rust tests for the handler, prompt constant, and slicing behavior. Update frontend client and integration tests to call the new extractEditorUiDesignAssets API and verify spritesheet + icon layers are added to the canvas and persisted. Update multiple docs to describe the extraction UI, toolbar placement, and related audio/playback pitfalls. Minor related updates: toolbar button ordering and audio duration / signed read-url notes.
This commit is contained in:
高物
2026-06-19 10:09:19 +08:00
parent ea29887d9c
commit 097170836d
36 changed files with 1092 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+33 -3
View File
@@ -4040,16 +4040,37 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
}
.image-canvas-editor__audio-card {
display: grid;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
gap: 0.38rem;
border-radius: 0.85rem;
background: linear-gradient(135deg, #0f172a, #263449);
padding: 0.85rem;
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
}
.image-canvas-editor__audio-card-title,
.image-canvas-editor__audio-card-meta {
overflow: hidden;
color: rgba(255, 255, 255, 0.86);
font-size: 0.74rem;
font-weight: 800;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.image-canvas-editor__audio-card-title {
color: #ffffff;
}
.image-canvas-editor__audio-card-meta {
color: rgba(226, 232, 240, 0.72);
}
.image-canvas-editor__audio-card audio {
width: 100%;
}
@@ -4436,7 +4457,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
}
.image-canvas-editor__metadata-corner--beside-kind {
right: var(--image-canvas-editor-beside-kind-offset, 3.95rem);
right: var(--image-canvas-editor-corner-offset, 0.35rem);
}
.image-canvas-editor__spec-badge {
@@ -4479,6 +4500,10 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
transform-origin: top right;
}
.image-canvas-editor__kind-badge--beside-info {
right: var(--image-canvas-editor-beside-kind-offset, 3.95rem);
}
.image-canvas-editor__kind-badge--spec {
background: rgba(37, 99, 235, 0.9);
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
@@ -4499,6 +4524,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
box-shadow: 0 8px 18px rgba(16, 185, 129, 0.24);
}
.image-canvas-editor__kind-badge--icon-spritesheet {
background: rgba(20, 184, 166, 0.92);
box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
}
.image-canvas-editor__kind-badge--icon-spec {
background: rgba(13, 148, 136, 0.92);
box-shadow: 0 8px 18px rgba(13, 148, 136, 0.24);