ci/qwen-image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ci:bf3773bfd47561df688055026929d79bb7004b5b
Branches Tags
ci:main
...
compare: ci:6ad11fc6c0ea5e4af8e0d3a5e528e0d2cba28947
Branches Tags
ci:main

4 Commits
bf3773bfd4 ... 6ad11fc6c0

Author SHA1 Message Date
mike
6ad11fc6c0 reorder 2026-06-28 02:29:31 +02:00
mike
3f91694491 reorder 2026-06-28 00:51:07 +02:00
mike
19e0656ccb reorder 2026-06-28 00:23:48 +02:00
mike
03b754112c reorder 2026-06-28 00:09:26 +02:00
5 changed files with 649 additions and 145 deletions
Expand all files Collapse all files

159
AGENTS.md
View File

@@ -63,42 +63,122 @@ FastAPI :8500 (edit_api.py)
- **Systemd**: `comfyui-api`
- **DB**: PostgreSQL at `192.168.1.160:5433`, database `dv`, table `person`
#### Core Endpoints
#### Endpoints Library
##### Core Generation & Upload
| Method | Path | Purpose |
|--------|------|---------|
| `POST` | `/upload` | Upload image; optionally add to existing group (`group_id` + `skip_poses`) |
| `POST` | `/batch` | Queue multi-prompt generation job (async) |
| `GET` | `/batch/{job_id}` | Poll batch job status / per-item progress |
| `DELETE` | `/batch/{job_id}` | Cancel active batch job |
| `POST` | `/multi-ref` | Queue a generation job with multiple reference images |
| `POST` | `/refine-prompt` | Refine a generation prompt using the external uncensored chat LLM |
| `POST` | `/edit` | Edit uploaded image |
| `POST` | `/generate-scenery` | Generate scenery background based on video frame + reference image |
| `GET` | `/scenery/library` | Return all scenery images grouped by source video reference |
##### Image Editing & Canvas Expansion (Padding & Crop)
| Method | Path | Purpose |
|--------|------|---------|
| `POST` | `/images/{filename}/crop` | Crop to pixel rect; `as_copy:true` crops a referenced copy instead of modifying in-place |
| `POST` | `/images/{filename}/autocrop` | Auto-trim transparent borders in-place |
| `POST` | `/images/{filename}/pad` | Expand image canvas with custom padding on each side, optional background fills (`transparent`, `black`, `white`), and optional Qwen-based Outpainting (`outpaint:true`) |
| `POST` | `/images/{filename}/rotate` | Rotate clockwise in 90° steps (lossless transpose, in-place) |
| `POST` | `/images/{filename}/invert-alpha` | Invert the alpha channel (recovers background removal errors) |
| `POST` | `/images/{filename}/duplicate` | Copy image into the same group with timestamp-based filename and `source_refs=[original]` |
| `POST` | `/restore-background/{filename}` | Flatten RGBA to opaque RGB via white composite background |
##### Background Removal
| Method | Path | Purpose |
|--------|------|---------|
| `POST` | `/remove-background/{filename}` | rembg BG removal, overwrites in-place; sets `has_background=false` + refreshes static data |
| `POST` | `/remove-background-sam/{filename}` | SAM2 BG removal → `.nobg.png` sidecar |
| `POST` | `/remove-background/group/{group_id}` | Queue background removal for all group members as an async background task |
| `GET` | `/sam2/check` | Return whether SAM2 background remover is available |
##### Metadata, Custom Labels & Group Management
| Method | Path | Purpose |
|--------|------|---------|
| `GET` | `/images` | List all images with DB metadata |
| `GET` | `/images/{filename}` | Serve image file |
| `POST` | `/upload` | Upload image; optionally add to existing group (`group_id` + `skip_poses`) |
| `POST` | `/batch` | Queue multi-prompt generation job (async) |
| `GET` | `/jobs/{id}` | Poll batch job status / per-item progress |
| `POST` | `/images/{filename}/set-preferred` | Move to group slot 0; triggers face extraction background task |
| `POST` | `/images/{filename}/extract-face` | Extract & save face crop via insightface (background task) |
| `POST` | `/images/{filename}/archive` | Soft-archive (hidden from default view) |
| `POST` | `/images/{filename}/unarchive` | Restore archived image |
| `POST` | `/images/{filename}/set-hidden` | Toggle studio visibility |
| `DELETE` | `/images/{filename}` | Delete image + DB record |
| `POST` | `/images/{filename}/crop` | Crop to pixel rect; `as_copy:true` crops a referenced copy instead of in-place |
| `POST` | `/images/{filename}/autocrop` | Auto-trim transparent border |
| `POST` | `/images/{filename}/rotate` | Rotate clockwise in 90° steps (lossless transpose, in-place) |
| `POST` | `/images/{filename}/invert-alpha` | Invert the alpha channel (fixes wrong-segment BG removal) |
| `POST` | `/images/{filename}/duplicate` | Copy into same group with `source_refs=[original]` |
| `POST` | `/faceswap` | insightface video faceswap |
| `POST` | `/remove-background/{filename}` | rembg BG removal, overwrites in-place; sets `has_background=false` + refreshes static data |
| `POST` | `/remove-background-sam/{filename}` | SAM2 BG removal → `.nobg.png` sidecar |
| `GET` | `/wireframe/frame/{video_name}` | Extract frame at `?t=` (0–1) from wireframe video |
| `GET` | `/groups` | List all groups with members |
| `GET` | `/group-names` | Return map of custom group names |
| `POST` | `/group-names/{group_id}` | Save custom group name |
| `POST` | `/groups/merge` | Merge several groups into one group |
| `POST` | `/groups/extract` | Extract a file into its own solo group |
| `GET` | `/groups/{group_id}/order` | Return order of members in a group |
| `POST` | `/groups/{group_id}/order` | Set custom sort order of group members |
| `GET` | `/similar/{filename}` | Find visually similar images using database embeddings |
| `GET` | `/names` | Map `filename → person name` |
| `GET/POST` | `/config` | Read / write `config.json` |
| `GET` | `/poses` | Load pose library from `poses.md` |
| `POST` | `/poses` | Create / update / rename a pose (`old_name` to rename) → rewrites `poses.md` |
| `DELETE` | `/poses/{name}` | Delete a pose from `poses.md` |
| `GET` | `/pose/check` | Report pose-estimator availability + backend |
| `POST` | `/names/{filename}` | Map image file to custom character name |
##### Visibility, Archiving & Deletion
| Method | Path | Purpose |
|--------|------|---------|
| `POST` | `/images/{filename}/hidden` | Toggle studio visibility (soft-hide) |
| `POST` | `/images/{filename}/archive` | Soft-archive image (hidden from default view) |
| `POST` | `/images/{filename}/unarchive` | Restore soft-archived image |
| `DELETE` | `/images/{filename}` | Delete image file + DB record |
| `POST` | `/groups/{group_id}/archive` | Soft-archive an entire group |
| `POST` | `/groups/{group_id}/unarchive` | Restore an archived group |
| `DELETE` | `/groups/{group_id}` | Delete entire group files and DB records |
##### 2D Body Pose Tools (rtmlib / RTMPose)
| Method | Path | Purpose |
|--------|------|---------|
| `GET` | `/pose/check` | Report pose-estimator availability + backend (rtmlib or mediapipe) |
| `POST` | `/images/{filename}/pose` | Estimate COCO-17 body keypoints (caches descriptor for similar-search) |
| `GET` | `/pose/similar/{filename}` | Rank library images by pose similarity to this image |
| `POST` | `/pose/similar` | Rank library images by similarity to a supplied (edited) skeleton |
| `POST` | `/pose/index` | Build pose descriptors for the whole library (daemon thread) |
| `GET` | `/pose/index/status` | Poll pose-index build progress |
| `POST` | `/pose/from-wireframe` | Extract frame from a wireframe video and estimate body pose keypoints |
| `POST` | `/pose/render` | Render keypoints as OpenPose skeleton image (base64) |
| `POST` | `/generate-with-pose` | Generate image from a specific pose skeleton (avoids wireframe bleed-through) |
| `GET` | `/poses` | Load pose library from `poses.md` |
| `POST` | `/poses` | Create / update / rename a pose (`old_name` to rename) → rewrites `poses.md` |
| `DELETE` | `/poses/{name}` | Delete a pose from `poses.md` |
##### 3D Turntable & Orbit Previews
| Method | Path | Purpose |
|--------|------|---------|
| `POST` | `/orbit` | Queue an orbit preview generation. Engine `depth` (fast 2.5D card parallax) or `qwen` (turntable) |
| `GET` | `/turntable/status` | Return background turntable generation state/progress summary |
| `GET` | `/turntable/status/{group_id}` | Return turntable state for a specific group |
| `POST` | `/turntable/pause` | Pause background turntable generation |
| `POST` | `/turntable/resume` | Resume background turntable generation |
| `DELETE` | `/turntable/{group_id}` | Reset turntable cache & records for group to force re-generation |
##### Face Processing (insightface)
| Method | Path | Purpose |
|--------|------|---------|
| `POST` | `/faceswap` | insightface video faceswap |
| `GET` | `/faceswap/check` | Report available face enhancement backends |
| `POST` | `/images/{filename}/extract-face` | Extract & save face crop via insightface (background task) |
| `POST` | `/faces/similar` | Find groups with visually similar faces using embeddings |
| `POST` | `/faces/index` | Build face embedding index for all preferred faces in library |
| `GET` | `/faces/index/status` | Poll face-indexing progress status |
| `GET` | `/faces/{group_id}` | Check if face crop exists for group |
##### Videos & Wireframe Guides
| Method | Path | Purpose |
|--------|------|---------|
| `GET` | `/videos` | List all available wireframe guide videos |
| `GET` | `/wireframe/frame/{video_name}` | Extract frame at `?t=` (0–1) from wireframe video |
| `GET` | `/wireframe/duration/{video_name}` | Get video duration (seconds) via ffprobe |
| `POST` | `/wireframe/trim` | Trim a wireframe video to given start/end offsets |
| `POST` | `/wireframe/frame` | Extract frame at timestamp, returns base64 PNG |
| `POST` | `/generate-video` | Stitch list of output images into a short looping MP4 video |
##### Database, Config & System Diagnostics
| Method | Path | Purpose |
|--------|------|---------|
| `GET/POST` | `/config` | Read / write `config.json` |
| `GET` | `/db/inconsistencies` | Retrieve consistency report or run a check with `?run_now=true` |
| `POST` | `/db/repair` | Run repair actions (restore, import file, assign group, permanently delete) |
| `POST` | `/db/cleanup` | Delete DB records of files that are missing on disk |
| `GET` | `/health` | API health check status |
---
@@ -111,6 +191,10 @@ prompt
│ YES → strip keywords from Qwen prompt (keeps `is_transparent` flag)
│ set negative: "deformed anatomy, watermark, logo"
│
├─ Canvas Expansion / Outpainting requested?
│ YES → if outpaint=True, append/use natural outpainting instructions:
│ "Naturally outpaint and extend the borders of the image to complete the scene."
│
├─ Upload reference image(s) to ComfyUI /upload/image
│ image1 = source image
│ image2 = wireframe pose guide frame (optional)
@@ -229,6 +313,8 @@ Model: `buffalo_l`
| source_refs | TEXT (JSON) | Original filenames this was derived from |
| content_type | TEXT | `image` or `video` |
| faceswap_source_video | TEXT | Source video for faceswapped clips |
| face_embedding | `vector(512)` | Face recognition embedding for visually matching character faces |
| is_source | `BOOLEAN` | Whether the file is a primary reference/source asset |
---
@@ -239,17 +325,33 @@ Single-page application (~5000 lines). No build step — pure HTML/CSS/JS.
**Modes**:
- **Gallery** — grid of all groups; click to open Studio
- **Studio** — filmstrip + large viewer + sidebar tabs
- **Database Consistency** (`trash.html` SPA) — dedicated panel for identifying legacy/orphaned records, untracked files, and manual restore/delete of archived assets
**Sidebar tabs**:
| Tab | Purpose |
|-----|---------|
| Generate | Camera angle picker, pose selector (with inline edit/add/delete → `poses.md`), wireframe guide, auto-growing prompt override with history autocomplete, fine-tune textareas, multi-ref thumbnails (click to deselect), batch submit |
| Info | Metadata, preferred toggle, face-book thumbnail, hide/archive/delete, manual crop (copy or in-place), rotate ±90°, No-BG / Invert-α, duplicate, Pose preview (draggable + similar-pose search) |
| Info | Metadata, preferred toggle, face-book thumbnail, hide/archive/delete, manual crop/expand padding (copy or in-place), rotate ±90°, No-BG / Invert-α, duplicate, Pose preview (draggable + similar-pose search) |
| Faceswap | Source face selector, target video, preview quality toggle |
| Segment | SAM2 and rembg BG removal buttons |
| Scenery | Scenery video reference for generation |
### Key Studio Features
#### Canvas Expansion & Manual Padding (Interactive Tooling)
The **Info** sidebar and dedicated toolbar provide professional, reactive manual padding controls:
- **Percent/Pixel Harmony**: Seamlessly accepts both absolute integer pixel values (e.g., `100px`) and percentage-based inputs (e.g., `10%` or `0.1`), ensuring perfect formatting and suffix preservation.
- **Quick Adjustment Presets**: Rapidly adjust margins with single-click actions for `+10%`, `+20%`, `+50%`, `+100px`, or `Reset` to clear all.
- **Uniform Locking**: Enabling the **Uniform** option synchronizes changes on any single padding field to all four sides simultaneously.
- **Intelligent Previews**: Dynamically renders real-time color-coded canvas border previews based on the selected fill type (Amber dashed for `transparent`, translucent black for `black`, and translucent white for `white`).
- **Shortcuts**: Confirm cropping or padding instantly with `Enter`, or dismiss/cancel the operation using `Escape`.
#### Reactive Layout Optimization
To prevent desyncs during image transitions, crops, canvas expansion, or 2.2x zooming:
- A `ResizeObserver` is registered on the primary studio viewer image (`lbImg`).
- Automatically triggers a layout and geometry recalculation, cleanly and immediately adjusting the background transparency checkerboard grid and padding visual overlays to match the actual visual boundaries of the contained image.
**Key state variables**:
- `lbCurrentGid` — active group ID
- `lbIdx` — current filmstrip position
@@ -304,15 +406,16 @@ skeleton). Results render as a thumbnail strip; clicking one opens that image's
```
qwen-image-edit-rapid-aio-nsfw-v23/
├── tour-comfy/
│ ├── car.html # frontend SPA
│ ├── car.html # frontend SPA (Studio Interface)
│ ├── trash.html # frontend Database Consistency Panel SPA
│ ├── edit_api.py # FastAPI backend
│ ├── database.py # PostgreSQL helpers
│ ├── watcher.py # output dir auto-processor
│ ├── config.json # output_dir, comfy_url, etc.
│ └── workflow_qwen_edit.json # ComfyUI graph template
├── a6000-comfy/ # ComfyUI install (symlinked to ~/comfyui)
├── AGENTS.md # this file
├── architecture2.svg # system architecture diagram
├── AGENTS.md # this file (System Documentation)
├── ARCHETECTURE.svg # system architecture diagram
├── backlog.md # feature backlog
└── requirements.txt # Python deps
```

2
backlog.md
View File

@@ -61,7 +61,7 @@ Scenery:
- allow re-ordering of the images in the orbit generated frames
- sometimes the UI renders two orbits in the same orbitFullViewer, must be a timer not being cleared in the ui
- The UI wants to car.html:2817 GET file:///mnt/zim/tour-comfy/output/_turntable/up_34e48ffb/turntable.jpg?t=1782562827857 net::ERR_FILE_NOT_FOUND, often want to show the wireframe - pose
- Jun 27 14:38:03 MIKE bash[3607206]: INFO: 127.0.0.1:53442 - "GET /output/_turntable/up_a1104f04/views/view_023_345deg.png HTTP/1.1" 304 Not Modified those files should be statically served from filesystem, not via server
- ✅ Fixed: statically serve turntable and orbit preview files from filesystem, not via server (avoid GET /output/... 304 Not Modified log spam)
- Check face similarity in a group of images.
- implement a tag-system for images, will be used to filter, group, sort and search images. Obvious tags are VISIBLE, ARCHIVED, LIKE, DISLIKE, RATED, GROUP_ANCHOR, GROUP_MEMBER, BACKGROUND etc..
- mark image as source

541
tour-comfy/car.html
View File

@@ -169,10 +169,10 @@
.pad-preview-overlay {
position: absolute;
background: rgba(245,158,11,0.25);
background: rgba(245,158,11,0.4);
border: 1px dashed #f59e0b;
pointer-events: none;
z-index: 5;
z-index: 10;
}
.action-btn {
@@ -1323,6 +1323,9 @@
position: relative; height: 100%; border-radius: 6px; overflow: hidden;
}
.studio-viewer.show-checker {
background-color: transparent;
}
#studioCheckerboard {
background-color: #888;
background-image:
linear-gradient(45deg,#555 25%,transparent 25%),
@@ -1331,11 +1334,13 @@
linear-gradient(-45deg,transparent 75%,#555 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
z-index: 1;
}
#lbImg {
max-width: 100%; max-height: 100%;
object-fit: contain; border-radius: 4px;
cursor: zoom-in; transition: transform 0.25s; display: block;
z-index: 2; position: relative;
}
#lbImg.zoomed { cursor: zoom-out; transform: scale(2.2); transform-origin: center; }
#lbVideo { max-width: 100%; max-height: 100%; border-radius: 4px; }
@@ -1960,6 +1965,7 @@
onblur="updateGroupName()" onkeydown="if(event.key==='Enter')this.blur()"
title="Group name (applies to all images in this group)" />
<span id="lbPoseTag" style="font-size:11px;color:#f59e0b;display:none"></span>
<span id="lbImgDims" style="font-size:11px;color:#444;margin:0 8px"></span>
<span id="lbCounter" style="font-size:12px;color:#555"></span>
</div>
<div class="studio-topbar-right">
@@ -1975,6 +1981,7 @@
<div class="studio-viewer-row">
<button class="studio-nav-btn" id="lbPrev" onclick="lbNav(-1)">‹</button>
<div class="studio-viewer" id="studioViewer">
<div id="studioCheckerboard" style="display:none;position:absolute;pointer-events:none;z-index:1"></div>
<img id="lbImg" src="" alt="" onclick="toggleImageZoom(this)" />
<video id="lbVideo" style="display:none;max-width:100%;max-height:100%;border-radius:4px" controls autoplay muted loop></video>
<div class="lb-hidden-badge">Hidden from preview</div>
@@ -2051,7 +2058,7 @@
<button class="sb-btn" id="lbCropBtn" style="display:none" onclick="lbAutoCrop()" title="Crop away transparent border">Crop</button>
<button class="sb-btn" id="lbDuplicateBtn" onclick="lbDuplicate()" title="Duplicate image into same group">Duplicate</button>
<button class="sb-btn" id="lbManualCropBtn" onclick="startManualCrop()" title="Drag to crop image">Crop…</button>
<button class="sb-btn" id="lbManualPadBtn" onclick="startManualPad()" title="Expand canvas by padding each side">Pad…</button>
<button class="sb-btn" id="lbManualPadBtn" onclick="startManualPad()" title="Expand canvas by padding each side">Expand…</button>
<button class="sb-btn" id="lbRotateLeftBtn" onclick="lbRotate(-90)" title="Rotate 90° counter-clockwise">⟲ 90°</button>
<button class="sb-btn" id="lbRotateRightBtn" onclick="lbRotate(90)" title="Rotate 90° clockwise">⟳ 90°</button>
<button class="sb-btn" id="lbPoseBtn" onclick="lbTogglePose()" title="Preview body pose skeleton">Pose</button>
@@ -2220,8 +2227,86 @@
// --- HYDRATION_START ---
const PRELOADED_IMAGES = [
"20260627_232843_pad_20260626_035101_pad_20260626_034830_jb.nobg.png",
"20260628_020853_pad_20260628_015651_img_12.nobg.png",
"20260628_020642_pad_20260628_015651_img_12.nobg.png",
"20260628_020610_pad_20260628_015651_img_12.nobg.png",
"20260628_020546_pad_20260628_015651_img_12.nobg.png",
"20260628_020519_pad_20260628_015651_img_12.nobg.png",
"20260628_020428_pad_20260628_015651_img_12.nobg.png",
"20260628_020302_pad_20260628_015651_img_12.nobg.png",
"20260628_020125_pad_20260628_015651_img_12.nobg.png",
"20260628_015815_pad_20260628_015651_img_12.nobg.png",
"20260628_015832_pad_20260628_015651_img_12.png",
"20260628_015815_pad_20260628_015651_img_12.png",
"20260628_015707_img_12.png",
"20260628_015651_img_12.png",
"20260615_153426_img_12.png",
"20260628_015423_img_12.png",
"cg_5991f3f2_face.png",
"20260628_012806_pad_20260624_143523_Screenshot_From_2026-06-17_07-41-27.nobg.nobg.png",
"20260628_014614_p10.nobg.png",
"p10.png_face.png",
"20260628_014614_p10.png",
"20260628_014603_p10.png",
"up_2687be75_face.png",
"20260628_013521_pad_20260627_213816_best_01_person_0.874_2026-06-27_12-18-49.nobg.png",
"20260628_013511_pad_20260627_213816_best_01_person_0.874_2026-06-27_12-18-49.nobg.png",
"20260628_013459_pad_20260627_213816_best_01_person_0.874_2026-06-27_12-18-49.nobg.png",
"20260628_013429_pad_20260627_213816_best_01_person_0.874_2026-06-27_12-18-49.nobg.png",
"20260628_013429_pad_20260627_213816_best_01_person_0.874_2026-06-27_12-18-49.png",
"20260628_013412_pad_20260627_213816_best_01_person_0.874_2026-06-27_12-18-49.png",
"20260628_012832_pad_20260624_143523_Screenshot_From_2026-06-17_07-41-27.nobg.nobg.png",
"_turntable/cg_5991f3f2/views/view_022_330deg.png",
"20260628_011700_pad_20260624_154318_img_72.png",
"20260628_012006_pad_20260624_154318_img_72.png",
"20260628_011837_pad_20260624_154318_img_72.png",
"20260628_012240_crop_20260628_011837_pad_20260624_154318_img_72.png",
"20260628_011227_dup_Pasted image (9).png",
"20260628_011118_pad_20260628_010755_pad_20260626_005644_dup_20260626_005504_Pasted image (9).nobg.nobg.png",
"20260628_010957_pad_20260628_010755_pad_20260626_005644_dup_20260626_005504_Pasted image (9).nobg.nobg.png",
"20260628_010947_pad_20260628_010755_pad_20260626_005644_dup_20260626_005504_Pasted image (9).nobg.nobg.png",
"20260628_010858_pad_20260628_010755_pad_20260626_005644_dup_20260626_005504_Pasted image (9).nobg.nobg.png",
"20260628_010858_pad_20260628_010755_pad_20260626_005644_dup_20260626_005504_Pasted image (9).nobg.png",
"20260628_010841_pad_20260628_010755_pad_20260626_005644_dup_20260626_005504_Pasted image (9).nobg.png",
"20260628_010755_pad_20260626_005644_dup_20260626_005504_Pasted image (9).nobg.png",
"20260628_010630_pad_20260626_005644_dup_20260626_005504_Pasted image (9).nobg.png",
"20260628_010408_image.png",
"20260627_203626_image.png",
"up_7b6eaabb_face.png",
"cg_809653a0_face.png",
"bb_01.png_face.png",
"_turntable/up_aa1add4d/views/view_023_345deg.png",
"_turntable/up_aa1add4d/views/view_003_045deg.png",
"_turntable/up_aa1add4d/views/view_001_015deg.png",
"_turntable/up_7b6eaabb/views/view_001_015deg.png",
"_turntable/up_7b6eaabb/views/view_000_000deg.png",
"_turntable/up_6ed4293c/views/view_023_345deg.png",
"_turntable/up_6ed4293c/views/view_022_330deg.png",
"_turntable/up_6ed4293c/views/view_021_315deg.png",
"_turntable/up_6ed4293c/views/view_020_300deg.png",
"_turntable/up_6ed4293c/views/view_019_285deg.png",
"_turntable/up_6ed4293c/views/view_018_270deg.png",
"_turntable/up_6ed4293c/views/view_017_255deg.png",
"_turntable/up_6ed4293c/views/view_016_240deg.png",
"_turntable/up_6ed4293c/views/view_015_225deg.png",
"_turntable/up_6ed4293c/views/view_014_210deg.png",
"_turntable/up_6ed4293c/views/view_013_195deg.png",
"_turntable/up_6ed4293c/views/view_012_180deg.png",
"_turntable/up_6ed4293c/views/view_011_165deg.png",
"_turntable/up_6ed4293c/views/view_010_150deg.png",
"_turntable/up_6ed4293c/views/view_009_135deg.png",
"_turntable/up_6ed4293c/views/view_008_120deg.png",
"_turntable/up_6ed4293c/views/view_007_105deg.png",
"_turntable/up_6ed4293c/views/view_006_090deg.png",
"_turntable/up_6ed4293c/views/view_005_075deg.png",
"_turntable/up_6ed4293c/views/view_004_060deg.png",
"_turntable/up_6ed4293c/views/view_003_045deg.png",
"_turntable/up_6ed4293c/views/view_002_030deg.png",
"_turntable/up_6ed4293c/views/view_001_015deg.png",
"_turntable/up_6ed4293c/views/view_000_000deg.png",
"20260628_001216_pad_20260626_035101_pad_20260626_034830_jb.nobg.png",
"20260627_232502_pad_20260626_035101_pad_20260626_034830_jb.nobg.png",
"20260627_232843_pad_20260626_035101_pad_20260626_034830_jb.nobg.png",
"20260627_232526_pad_20260626_035101_pad_20260626_034830_jb.nobg.png",
"20260627_232302_pad_20260627_232133_image.png",
"20260627_232238_pad_20260627_232133_image.png",
@@ -2257,9 +2342,6 @@
"_turntable/cg_7c7b22c9/views/view_022_330deg.png",
"20260618_015124_20260618_010617_20260615_153426_img_12.nobg.png",
"_turntable/cg_5991f3f2/views/view_002_030deg.png",
"_turntable/cg_5991f3f2/views/view_022_330deg.png",
"_turntable/up_6ed4293c/views/view_021_315deg.png",
"_turntable/up_6ed4293c/views/view_020_300deg.png",
"20260627_213910_best_02_person_0.874_2026-06-27_12-18-49.png",
"20260627_213840_best_02_person_0.874_2026-06-27_12-18-49.png",
"20260627_213816_best_01_person_0.874_2026-06-27_12-18-49.png",
@@ -2286,7 +2368,6 @@
"20260627_213202_9_20260627_212803_best_01_person_0.874_2026-06-27_20-05-05.jpg.png",
"20260627_213149_8_20260627_212803_best_01_person_0.874_2026-06-27_20-05-05.jpg.png",
"_turntable/cg_74544975/views/view_004_060deg.png",
"_turntable/up_6ed4293c/views/view_019_285deg.png",
"_turntable/cg_74544975/views/view_001_015deg.png",
"_turntable/cg_74544975/views/view_000_000deg.png",
"20260627_213102_12_20260627_212658_best_00_person_0.874_2026-06-27_12-18-49.png",
@@ -2318,25 +2399,6 @@
"20260627_212723_1_20260627_212658_best_00_person_0.874_2026-06-27_12-18-49.png",
"20260627_212710_0_20260627_212658_best_00_person_0.874_2026-06-27_12-18-49.png",
"20260627_212658_best_00_person_0.874_2026-06-27_12-18-49.png",
"_turntable/up_6ed4293c/views/view_018_270deg.png",
"_turntable/up_6ed4293c/views/view_017_255deg.png",
"_turntable/up_6ed4293c/views/view_016_240deg.png",
"_turntable/up_6ed4293c/views/view_015_225deg.png",
"_turntable/up_6ed4293c/views/view_014_210deg.png",
"_turntable/up_6ed4293c/views/view_013_195deg.png",
"_turntable/up_6ed4293c/views/view_012_180deg.png",
"_turntable/up_6ed4293c/views/view_011_165deg.png",
"_turntable/up_6ed4293c/views/view_010_150deg.png",
"_turntable/up_6ed4293c/views/view_009_135deg.png",
"_turntable/up_6ed4293c/views/view_008_120deg.png",
"_turntable/up_6ed4293c/views/view_007_105deg.png",
"_turntable/up_6ed4293c/views/view_006_090deg.png",
"_turntable/up_6ed4293c/views/view_005_075deg.png",
"_turntable/up_6ed4293c/views/view_004_060deg.png",
"_turntable/up_6ed4293c/views/view_003_045deg.png",
"_turntable/up_6ed4293c/views/view_002_030deg.png",
"_turntable/up_6ed4293c/views/view_001_015deg.png",
"_turntable/up_6ed4293c/views/view_000_000deg.png",
"20260627_204815_image.png",
"20260627_204804_image.png",
"20260627_204756_image.png",
@@ -2360,10 +2422,8 @@
"_turntable/cg_75340e8e/views/view_001_015deg.png",
"_turntable/cg_75340e8e/views/view_000_000deg.png",
"20260627_203706_11_20260627_200330_image.png",
"up_7b6eaabb_face.png",
"20260627_203654_11_20260627_200330_image.png",
"20260627_203642_11_20260627_200330_image.png",
"20260627_203626_image.png",
"20260627_203607_image.png",
"20260627_203549_image.png",
"20260627_203531_Screenshot_From_2026-06-27_20-04-11.png",
@@ -2408,7 +2468,6 @@
"_turntable/up_c8be3aa7/views/view_004_060deg.png",
"_turntable/up_c8be3aa7/views/view_001_015deg.png",
"20260627_200711_11_20260627_200330_image.png",
"20260627_200632_9_20260627_200330_image.png",
"20260627_200506_image.png",
"20260627_200422_2_20260627_200330_image.png",
"20260627_200414_image.png",
@@ -2439,7 +2498,6 @@
"_turntable/img_87.png/views/view_017_255deg.png",
"_turntable/img_87.png/views/view_016_240deg.png",
"_turntable/img_87.png/views/view_015_225deg.png",
"_turntable/up_aa1add4d/views/view_023_345deg.png",
"_turntable/up_aa1add4d/views/view_022_330deg.png",
"_turntable/up_aa1add4d/views/view_021_315deg.png",
"_turntable/up_aa1add4d/views/view_020_300deg.png",
@@ -2459,9 +2517,7 @@
"_turntable/up_aa1add4d/views/view_006_090deg.png",
"_turntable/up_aa1add4d/views/view_005_075deg.png",
"_turntable/up_aa1add4d/views/view_004_060deg.png",
"_turntable/up_aa1add4d/views/view_003_045deg.png",
"_turntable/up_aa1add4d/views/view_002_030deg.png",
"_turntable/up_aa1add4d/views/view_001_015deg.png",
"_turntable/up_aa1add4d/views/view_000_000deg.png",
"_turntable/up_ae825fce/views/view_023_345deg.png",
"_turntable/up_ae825fce/views/view_022_330deg.png",
@@ -4327,7 +4383,6 @@
"_turntable/cg_f0049873/views/view_002_030deg.png",
"_turntable/cg_f0049873/views/view_001_015deg.png",
"_turntable/cg_f0049873/views/view_000_000deg.png",
"_turntable/cg_08203e88/turntable.mp4",
"_turntable/cg_08203e88/views/view_023_345deg.png",
"_turntable/cg_08203e88/views/view_022_330deg.png",
"_turntable/cg_08203e88/views/view_021_315deg.png",
@@ -4625,7 +4680,6 @@
"20260626_021942_pad_20260625_205913_8_20260625_205722_image.png",
"20260626_021533_pad_20260625_205828_4_20260625_205722_image.png",
"20260626_014422_pad_20260626_005644_dup_20260626_005504_Pasted image (9).nobg.png",
"cg_809653a0_face.png",
"20260626_005644_dup_20260626_005504_Pasted image (9).nobg.png",
"20260626_005504_Pasted image (9).nobg.png",
"20260626_005504_Pasted image (9).png",
@@ -4994,7 +5048,6 @@
"20260624_154453_img_72.png",
"20260624_154442_img_72.png",
"20260624_154318_img_72.png",
"cg_b7e71d34_face.png",
"20260624_154236_img_72.png",
"20260624_154125_img_72.png",
"20260624_153940_img_72.png",
@@ -5002,7 +5055,6 @@
"20260624_153614_Screenshot_From_2026-06-17_07-41-27.png",
"20260624_153417_Screenshot_From_2026-06-17_07-41-27.png",
"20260624_153344_Screenshot_From_2026-06-17_07-41-27.png",
"20260624_153311_Screenshot_From_2026-06-17_07-41-27.png",
"20260624_153102_Screenshot_From_2026-06-17_07-41-27.png",
"20260624_153051_Screenshot_From_2026-06-17_07-41-27.png",
"20260624_153040_Screenshot_From_2026-06-17_07-41-27.png",
@@ -6615,7 +6667,6 @@
"20260616_004250_img_18.png",
"20260616_003916_img_15.png",
"20260616_003803_img_14.png",
"20260615_153426_img_12.png",
"20260615_152252_imgxxx.png",
"20260615_151829_img_92.png",
"20260615_151614_img_93.png",
@@ -6724,6 +6775,7 @@
let _sbPadBottom = 0;
let _sbPadLeft = 0;
let _sbPadOutpaint = false;
let _sbPadUniform = false;
const CAMERA_ANGLES = [
// Absolute camera positions
@@ -6882,43 +6934,218 @@
}
function formatPadValue(v) {
if (v === undefined || v === null || v === '') return '0.00';
let val = parseFloat(v);
if (isNaN(val)) return '0.00';
const s = v.toString();
// User requested: show 0.00 if it contains a decimal see it as percentage.
// if integer and its greater than 10 its pixel value
if (s.includes('.') || s.includes('%')) return val.toFixed(2);
if (val > 10) return val.toString();
return val.toFixed(2);
if (v === undefined || v === null || v === '') return '0.00%';
const s = v.toString().trim().toLowerCase();
let val = parseFloat(s);
if (isNaN(val)) return '0.00%';
// If the user explicitly typed px
if (s.endsWith('px')) {
return val.toString(); // integer pixels
}
// If the user explicitly typed %
if (s.endsWith('%')) {
return val.toFixed(2) + '%';
}
// If contains a decimal, or if it's <= 10 (or < 1.0), it's percentage
if (s.includes('.') || val <= 10) {
// If it's a fraction like 0.1, convert to 10%
if (val > 0 && val < 1.0) {
return (val * 100).toFixed(2) + '%';
}
return val.toFixed(2) + '%';
}
// Otherwise, it's integer > 10, treat as pixels
return val.toString();
}
function syncPadFields(el) {
const id = el.id; // padLeft or sbPadLeft
let pairId = null;
if (id.endsWith('Left')) pairId = id.replace('Left', 'Right');
else if (id.endsWith('Right')) pairId = id.replace('Right', 'Left');
else if (id.endsWith('Top')) pairId = id.replace('Top', 'Bottom');
else if (id.endsWith('Bottom')) pairId = id.replace('Bottom', 'Top');
const id = el.id; // padLeft, padTop, etc. or sbPadLeft, sbPadTop
const val = el.value;
const prefix = id.startsWith('sbPad') ? 'sbPad' : 'pad';
const isSb = id.startsWith('sbPad');
if (pairId) {
const pairEl = document.getElementById(pairId);
// only sync if the other side is 'empty' (0)
if (pairEl && (pairEl.value === '0.00' || pairEl.value === '0' || pairEl.value === '')) {
pairEl.value = el.value;
// Check if Uniform mode is active for this context
const uniformEl = document.getElementById(isSb ? 'sbPadUniform' : 'padUniform');
const isUniform = uniformEl ? uniformEl.checked : false;
if (isUniform) {
// Set all four sides to the same value
['Top', 'Right', 'Bottom', 'Left'].forEach(side => {
const targetId = prefix + side;
const targetEl = document.getElementById(targetId);
if (targetEl && targetEl !== el) {
targetEl.value = val;
}
});
} else {
// Standard opposite-side sync if other side is 0
let pairId = null;
if (id.endsWith('Left')) pairId = id.replace('Left', 'Right');
else if (id.endsWith('Right')) pairId = id.replace('Right', 'Left');
else if (id.endsWith('Top')) pairId = id.replace('Top', 'Bottom');
else if (id.endsWith('Bottom')) pairId = id.replace('Bottom', 'Top');
if (pairId) {
const pairEl = document.getElementById(pairId);
if (pairEl && (pairEl.value === '0.00' || pairEl.value === '0' || pairEl.value === '0.00%' || pairEl.value === '')) {
pairEl.value = val;
}
}
}
if (id.startsWith('sbPad')) {
if (isSb) {
updateSbGenBtn();
}
updatePadPreview();
}
function togglePadUniform(cb) {
const isSb = cb.id.startsWith('sbPad');
const prefix = isSb ? 'sbPad' : 'pad';
if (isSb) _sbPadUniform = cb.checked;
if (cb.checked) {
// Find a non-zero value, or default to Top, and propagate
const sides = ['Top', 'Right', 'Bottom', 'Left'];
let val = '0.00%';
for (let side of sides) {
const el = document.getElementById(prefix + side);
if (el && el.value && el.value !== '0' && el.value !== '0.00' && el.value !== '0.00%') {
val = el.value;
break;
}
}
sides.forEach(side => {
const el = document.getElementById(prefix + side);
if (el) el.value = val;
});
updatePadPreview();
}
}
function applyPadPreset(presetVal, isSb) {
const prefix = isSb ? 'sbPad' : 'pad';
const sides = ['Top', 'Right', 'Bottom', 'Left'];
if (presetVal === '0') {
// Reset all
sides.forEach(side => {
const el = document.getElementById(prefix + side);
if (el) el.value = '0.00%';
});
const uniformEl = document.getElementById(isSb ? 'sbPadUniform' : 'padUniform');
if (uniformEl) uniformEl.checked = false;
if (isSb) _sbPadUniform = false;
} else {
// If it ends with %
let formatted = presetVal;
if (presetVal.endsWith('%')) {
formatted = parseFloat(presetVal).toFixed(2) + '%';
} else if (presetVal.endsWith('px')) {
formatted = parseFloat(presetVal).toString();
}
sides.forEach(side => {
const el = document.getElementById(prefix + side);
if (el) el.value = formatted;
});
const uniformEl = document.getElementById(isSb ? 'sbPadUniform' : 'padUniform');
if (uniformEl) uniformEl.checked = true;
if (isSb) _sbPadUniform = true;
}
if (isSb) {
updateSbGenBtn();
}
updatePadPreview();
}
function getImageDisplayRect(img) {
if (!img || !img.naturalWidth) return null;
// If the image is zoomed, getBoundingClientRect() returns the SCALED dimensions.
// We need to account for this to find the actual visible image area.
const isZoomed = img.classList.contains('zoomed');
const scale = isZoomed ? 2.2 : 1.0;
const rect = img.getBoundingClientRect();
const container = img.parentElement;
const crect = container.getBoundingClientRect();
// The natural aspect ratio
const iw = img.naturalWidth;
const ih = img.naturalHeight;
const aspect = iw / ih;
// The container dimensions for the image (before scaling)
const cw = rect.width / scale;
const ch = rect.height / scale;
const caspect = cw / ch;
let dw, dh, dl, dt;
if (aspect > caspect) {
dw = cw;
dh = cw / aspect;
dl = 0;
dt = (ch - dh) / 2;
} else {
dh = ch;
dw = ch * aspect;
dt = 0;
dl = (cw - dw) / 2;
}
// Adjust for scale: the visual center stays the same,
// but the width/height and offsets from the top-left change.
if (isZoomed) {
const centerRelX = cw / 2;
const centerRelY = ch / 2;
// dw, dh are unscaled visual dimensions of the content.
// dl, dt are unscaled offsets within the img element's box.
// We want the scaled versions.
dw *= scale;
dh *= scale;
// The top-left of the content relative to the center of the img element:
const contentRelCenterX = dl - centerRelX;
const contentRelCenterY = dt - centerRelY;
// The top-left of the content relative to the center of the img element (scaled):
const contentRelCenterXScaled = contentRelCenterX * scale;
const contentRelCenterYScaled = contentRelCenterY * scale;
// The new offsets relative to the top-left of the scaled img element:
// Actually, rect.left/top are already for the scaled element's bounding box.
// We just need to find where the content starts within that bounding box.
const finalDl = contentRelCenterXScaled + (rect.width / 2);
const finalDt = contentRelCenterYScaled + (rect.height / 2);
return {
left: rect.left - crect.left + finalDl,
top: rect.top - crect.top + finalDt,
width: dw,
height: dh
};
}
const finalLeft = rect.left - crect.left + dl;
const finalTop = rect.top - crect.top + dt;
return { left: finalLeft, top: finalTop, width: dw, height: dh };
}
function updatePadPreview() {
const viewer = document.getElementById('studioViewer');
if (!viewer) return;
// Clean up existing preview overlays
viewer.querySelectorAll('.pad-preview-overlay').forEach(el => el.remove());
if (viewer) {
// Clean up existing preview overlays
viewer.querySelectorAll('.pad-preview-overlay').forEach(el => el.remove());
}
const img = document.getElementById('lbImg');
if (!viewer || !img || img.style.display === 'none') return;
const rect = getImageDisplayRect(img);
if (!rect) return;
const isManual = !!document.getElementById('padBar');
const getV = (side) => {
@@ -6926,27 +7153,52 @@
return el ? el.value : '0';
};
const sides = ['Left', 'Right'];
const fill = document.getElementById('padFill')?.value || 'transparent';
const sides = ['Left', 'Right', 'Top', 'Bottom'];
sides.forEach(side => {
const vStr = getV(side);
if (!vStr || vStr === '0' || vStr === '0.00') return;
if (!vStr || vStr === '0' || vStr === '0.00' || vStr === '0.00%') return;
const val = parseFloat(vStr);
if (isNaN(val) || val <= 0) return;
const isPercent = vStr.includes('%') || vStr.includes('.');
const width = isPercent ? (val + '%') : (val + 'px');
const isPercent = vStr.includes('%');
const overlay = document.createElement('div');
overlay.className = 'pad-preview-overlay';
overlay.style.top = '0';
overlay.style.bottom = '0';
if (side === 'Left') {
overlay.style.left = '0';
overlay.style.width = width;
// Style based on selected fill mode to make preview professional & intuitive
if (isManual) {
if (fill === 'black') {
overlay.style.background = 'rgba(0, 0, 0, 0.7)';
overlay.style.borderColor = '#444';
} else if (fill === 'white') {
overlay.style.background = 'rgba(255, 255, 255, 0.7)';
overlay.style.borderColor = '#ccc';
} else {
overlay.style.background = 'rgba(245, 158, 11, 0.4)';
overlay.style.borderColor = '#f59e0b';
}
} else {
overlay.style.right = '0';
overlay.style.width = width;
// Sidebar is always transparent background before outpaint
overlay.style.background = 'rgba(245, 158, 11, 0.4)';
overlay.style.borderColor = '#f59e0b';
}
if (side === 'Left' || side === 'Right') {
const w = isPercent ? (rect.width * val / 100) : val;
overlay.style.width = w + 'px';
overlay.style.top = rect.top + 'px';
overlay.style.height = rect.height + 'px';
if (side === 'Left') overlay.style.left = (rect.left - w) + 'px';
else overlay.style.left = (rect.left + rect.width) + 'px';
} else {
const h = isPercent ? (rect.height * val / 100) : val;
overlay.style.height = h + 'px';
overlay.style.left = rect.left + 'px';
overlay.style.width = rect.width + 'px';
if (side === 'Top') overlay.style.top = (rect.top - h) + 'px';
else overlay.style.top = (rect.top + rect.height) + 'px';
}
viewer.appendChild(overlay);
});
@@ -7071,21 +7323,54 @@
const fname = lbNames[lbIdx];
if (document.getElementById('poseCanvas')) _removePoseOverlay(); // skeleton is per-image
document.getElementById('poseResults')?.remove();
_fsModelFilename = fname; // keep faceswap/scenery/segment in sync
const isVid = isVideo(fname) || fileContentType[fname] === 'video';
const lbImgEl = document.getElementById('lbImg');
const lbVideoEl = document.getElementById('lbVideo');
lbImgEl.onload = () => {
const dimEl = document.getElementById('lbImgDims');
if (dimEl) dimEl.textContent = `${lbImgEl.naturalWidth} x ${lbImgEl.naturalHeight}`;
// Force layout recalculation and overlay sync when a new image loads
requestAnimationFrame(() => {
updatePadPreview();
const cb = document.getElementById('sbCheckerboard');
if (cb && cb.checked) toggleCheckerboard(true);
});
};
_fsModelFilename = fname; // keep faceswap/scenery/segment in sync
const isVid = isVideo(fname) || fileContentType[fname] === 'video';
// Show image dimensions
const dimEl = document.getElementById('lbImgDims');
if (dimEl) {
if (!isVid && lbImgEl.naturalWidth) {
dimEl.textContent = `${lbImgEl.naturalWidth} x ${lbImgEl.naturalHeight}`;
} else {
dimEl.textContent = '';
}
}
if (isVid) {
lbImgEl.style.display = 'none';
lbVideoEl.style.display = '';
lbVideoEl.poster = posterFor(lbUrls[lbIdx]);
lbVideoEl.src = lbUrls[lbIdx];
// Explicitly clean up pad previews and hide checkerboard when navigating to a video
updatePadPreview();
toggleCheckerboard(false);
} else {
lbVideoEl.style.display = 'none';
lbVideoEl.src = '';
lbImgEl.style.display = '';
lbImgEl.classList.remove('zoomed');
lbImgEl.src = lbUrls[lbIdx];
// If it's already in cache, onload might not fire or already fired
if (lbImgEl.complete && lbImgEl.naturalWidth) {
lbImgEl.onload();
}
}
const backBtn = document.getElementById('lbBackBtn');
@@ -7863,7 +8148,7 @@
const timeLabel = document.getElementById('pvmTimeLabel');
function pvmSetVideo(filename) {
vidEl.src = `${API}/output/${encodeURIComponent(filename)}`;
vidEl.src = IMAGE_FOLDER + filename;
vidEl.load();
vidEl.addEventListener('loadedmetadata', () => {
const dur = vidEl.duration || 10;
@@ -8198,15 +8483,24 @@
const numInput = (id, label) => {
const onInput = `syncPadFields(this)`;
const onBlur = `this.value = formatPadValue(this.value); updatePadPreview()`;
return `<label style="display:flex;align-items:center;gap:3px;font-size:11px;color:#ccc">${label}<input type="text" id="${id}" value="0.00" oninput="${onInput}" onblur="${onBlur}" style="width:52px;background:#111;border:1px solid #333;color:#ccc;border-radius:4px;padding:2px 4px;font-size:11px;text-align:right" placeholder="px or %"></label>`;
const onKeyDown = `if(event.key === 'Enter') { confirmManualPad(); event.preventDefault(); } if(event.key === 'Escape') { cancelManualPad(); event.preventDefault(); }`;
return `<label style="display:flex;align-items:center;gap:3px;font-size:11px;color:#ccc">${label}<input type="text" id="${id}" value="0.00%" oninput="${onInput}" onblur="${onBlur}" onkeydown="${onKeyDown}" style="width:52px;background:#111;border:1px solid #333;color:#ccc;border-radius:4px;padding:2px 4px;font-size:11px;text-align:right" placeholder="px or %"></label>`;
};
bar.innerHTML =
`<span style="flex:1;font-size:11px;color:#aaa">Pad canvas (px or %):</span>`
`<span style="font-size:11px;color:#aaa">Preset:</span>`
+ `<button class="sb-btn" style="padding:2px 6px;font-size:10px;margin-right:2px;" onclick="applyPadPreset('10%', false)">+10%</button>`
+ `<button class="sb-btn" style="padding:2px 6px;font-size:10px;margin-right:2px;" onclick="applyPadPreset('20%', false)">+20%</button>`
+ `<button class="sb-btn" style="padding:2px 6px;font-size:10px;margin-right:2px;" onclick="applyPadPreset('50%', false)">+50%</button>`
+ `<button class="sb-btn" style="padding:2px 6px;font-size:10px;margin-right:4px;" onclick="applyPadPreset('100px', false)">+100px</button>`
+ `<button class="sb-btn" style="padding:2px 6px;font-size:10px;margin-right:8px;background:#3b0764;color:#d8b4fe;border-color:#581c87" onclick="applyPadPreset('0', false)">Reset</button>`
+ `<span style="font-size:11px;color:#aaa;margin-right:4px;">Custom:</span>`
+ numInput('padTop','↑')
+ numInput('padRight','→')
+ numInput('padBottom','↓')
+ numInput('padLeft','←')
+ `<select id="padFill" style="background:#111;border:1px solid #333;color:#aaa;border-radius:4px;font-size:11px;padding:2px 5px">
+ `<label style="display:flex;align-items:center;gap:3px;font-size:11px;color:#ccc;cursor:pointer" title="Keep all padding values equal">`
+ `<input type="checkbox" id="padUniform" style="cursor:pointer" onchange="togglePadUniform(this)">Uniform</label>`
+ `<select id="padFill" onchange="updatePadPreview()" style="background:#111;border:1px solid #333;color:#aaa;border-radius:4px;font-size:11px;padding:2px 5px">
<option value="transparent">Transparent</option>
<option value="black">Black</option>
<option value="white">White</option>
@@ -8216,7 +8510,7 @@
+ `<label style="display:flex;align-items:center;gap:4px;font-size:11px;color:#ccc;cursor:pointer" title="Instruct the model to fill in the padded area">`
+ `<input type="checkbox" id="padOutpaint" style="cursor:pointer">Outpaint</label>`
+ `<button class="sb-btn" onclick="cancelManualPad()">Cancel</button>`
+ `<button class="sb-btn primary" id="padConfirmBtn" onclick="confirmManualPad()">Pad</button>`;
+ `<button class="sb-btn primary" id="padConfirmBtn" onclick="confirmManualPad()">Expand</button>`;
viewer.appendChild(bar);
updatePadPreview();
}
@@ -8279,12 +8573,11 @@
refreshNow(true);
} else {
showToast('Padded', 'success');
lbUrls[lbIdx] = IMAGE_FOLDER + fname + '?t=' + Date.now();
updateStudio();
_bustStudioImage(fname);
}
} else {
showToast('Pad failed: ' + await r.text(), 'error');
if (btn) { btn.disabled = false; btn.textContent = 'Pad'; }
if (btn) { btn.disabled = false; btn.textContent = 'Expand'; }
}
} catch (e) {
showToast('Pad error: ' + e, 'error');
@@ -8600,7 +8893,7 @@
} else if (jd.video_filename) {
// Depth-card MP4 fallback
const mp4 = jd.video_filename;
const src = mp4.includes('/') ? `${API}/output/${mp4}` : IMAGE_FOLDER + mp4;
const src = IMAGE_FOLDER + mp4;
const vid = document.getElementById('orbitVideo');
vid.src = src + '?t=' + Date.now();
vid.style.display = '';
@@ -8618,7 +8911,7 @@
// ---- Frame flipper engine ----
function _orbitStartFlipper(frameRelPaths) {
_orbitFlipperStop();
_orbitFrames = frameRelPaths.map(p => `${API}/output/${p}`);
_orbitFrames = frameRelPaths.map(p => IMAGE_FOLDER + p);
_orbitFlipperIdx = 0;
_orbitFlipperRunning = true;
@@ -8648,7 +8941,7 @@
_orbitFlipperStop();
document.getElementById('orbitFlipperPlayBtn').textContent = '▶ Play';
} else {
_orbitStartFlipper(_orbitFrames.map(u => u.replace(`${API}/output/`, '')));
_orbitStartFlipper(_orbitFrames.map(u => u.startsWith(IMAGE_FOLDER) ? u.slice(IMAGE_FOLDER.length) : u));
document.getElementById('orbitFlipperPlayBtn').textContent = '⏸ Pause';
}
}
@@ -8658,7 +8951,7 @@
if (_orbitFlipperRunning && _orbitFrames.length > 0) {
// Restart with new interval
_orbitFlipperStop();
_orbitStartFlipper(_orbitFrames.map(u => u.replace(`${API}/output/`, '')));
_orbitStartFlipper(_orbitFrames.map(u => u.startsWith(IMAGE_FOLDER) ? u.slice(IMAGE_FOLDER.length) : u));
}
}
@@ -8666,9 +8959,7 @@
function orbitDownload() {
if (!_orbitCurrentMp4) return;
const a = document.createElement('a');
a.href = _orbitCurrentMp4.includes('/')
? `${API}/output/${_orbitCurrentMp4}`
: IMAGE_FOLDER + _orbitCurrentMp4;
a.href = IMAGE_FOLDER + _orbitCurrentMp4;
a.download = _orbitCurrentMp4.split('/').pop();
a.click();
}
@@ -8787,7 +9078,7 @@
for (const t of _turntablesData) {
const label = t.group_name || t.group_id.slice(0, 8);
const thumb = t.frames.length > 0 ? `${API}/output/${t.frames[0]}` : '';
const thumb = t.frames.length > 0 ? IMAGE_FOLDER + t.frames[0] : '';
const compClass = t.completed ? ' complete' : '';
html += `<div class="orbit-tab-card${compClass}" onclick="_orbitTabOpen('${t.group_id}')" id="otc_${t.group_id}">
<div class="otc-img-wrap"><img id="otcImg_${t.group_id}" src="${thumb}" alt="${label}"></div>
@@ -8809,7 +9100,7 @@
function _orbitStartTabFlipper(groupId, frameRels) {
const imgEl = document.getElementById(`otcImg_${groupId}`);
if (!imgEl) return;
const urls = frameRels.map(f => `${API}/output/${f}`);
const urls = frameRels.map(f => IMAGE_FOLDER + f);
let idx = 0;
if (_orbitTabFlippers[groupId]) clearInterval(_orbitTabFlippers[groupId].timer);
const timer = setInterval(() => {
@@ -8830,7 +9121,7 @@
// Stop any existing full-player
if (viewer._flipperTimer) { clearTimeout(viewer._flipperTimer); viewer._flipperTimer = null; }
const urls = t.frames.map(f => `${API}/output/${f}`);
const urls = t.frames.map(f => IMAGE_FOLDER + f);
let idx = 0;
const label = t.group_name || t.group_id.slice(0, 8);
@@ -9802,6 +10093,29 @@
// Initialize
document.addEventListener('DOMContentLoaded', () => {
const img = document.getElementById('lbImg');
if (img) {
const ro = new ResizeObserver(() => {
if (_isStudioOpen()) {
requestAnimationFrame(() => {
updatePadPreview();
const cb = document.getElementById('sbCheckerboard');
if (cb && cb.checked) toggleCheckerboard(true);
});
}
});
ro.observe(img);
}
window.addEventListener('resize', () => {
if (_isStudioOpen()) {
requestAnimationFrame(() => {
updatePadPreview();
const cb = document.getElementById('sbCheckerboard');
if (cb && cb.checked) toggleCheckerboard(true);
});
}
});
loadPromptHistory();
loadImages();
autoRefreshTimer = setInterval(_timedRefresh, REFRESH_INTERVAL * 1000);
@@ -10049,7 +10363,11 @@
}
function toggleImageZoom() {
document.getElementById('lbImg')?.classList.toggle('zoomed');
const img = document.getElementById('lbImg');
if (img) {
img.classList.toggle('zoomed');
// The ResizeObserver will handle the follow-up logic automatically.
}
}
// ---- sidebar panels ----
@@ -10064,6 +10382,7 @@
_sbPadBottom = document.getElementById('sbPadBottom')?.value ?? _sbPadBottom;
_sbPadLeft = document.getElementById('sbPadLeft')?.value ?? _sbPadLeft;
_sbPadOutpaint = document.getElementById('sbPadOutpaint')?.checked ?? _sbPadOutpaint;
_sbPadUniform = document.getElementById('sbPadUniform')?.checked ?? _sbPadUniform;
_fsSelectedPoses.forEach(name => {
const el = document.getElementById('sbPoseEdit_' + CSS.escape(name));
if (el) _sbPoseEdits[name] = el.value;
@@ -10233,8 +10552,15 @@
return `<label style="display:flex;align-items:center;gap:2px;font-size:11px;color:#888">${side[0]}
<input type="text" id="sbPad${side}" value="${val}" placeholder="px or %"
style="width:48px;background:#111;border:1px solid #2a2a2a;color:#ccc;border-radius:4px;padding:2px 4px;font-size:11px;text-align:right"
oninput="${onInput}" onblur="${onBlur}"></label>`;
oninput="${onInput}" onblur="${onBlur}"
onkeydown="if(event.key === 'Enter') { submitSbGenerate(); event.preventDefault(); }"></label>`;
}).join('')}
<label style="display:flex;align-items:center;gap:2px;font-size:11px;color:#888;cursor:pointer" title="Keep all padding values equal">
<input type="checkbox" id="sbPadUniform" ${_sbPadUniform?'checked':''} onchange="togglePadUniform(this)" style="cursor:pointer">Uniform</label>
<button class="sb-btn" style="padding:2px 5px;font-size:9px;margin:0" onclick="applyPadPreset('10%', true)">+10%</button>
<button class="sb-btn" style="padding:2px 5px;font-size:9px;margin:0" onclick="applyPadPreset('20%', true)">+20%</button>
<button class="sb-btn" style="padding:2px 5px;font-size:9px;margin:0" onclick="applyPadPreset('50%', true)">+50%</button>
<button class="sb-btn" style="padding:2px 5px;font-size:9px;margin:0;background:#3b0764;color:#d8b4fe;border-color:#581c87" onclick="applyPadPreset('0', true)">Reset</button>
<label style="display:flex;align-items:center;gap:3px;font-size:11px;color:#888;cursor:pointer" title="Instruct the model to fill in the padded area">
<input type="checkbox" id="sbPadOutpaint" ${(_sbPadOutpaint??false)?'checked':''} onchange="updateSbGenBtn()" style="cursor:pointer">Outpaint</label>
</div>
@@ -11646,9 +11972,30 @@
if (btn) btn.disabled = false;
}
function toggleCheckerboard(on) {
function toggleCheckerboard(on, isRetry=false) {
const viewer = document.getElementById('studioViewer');
const cbLayer = document.getElementById('studioCheckerboard');
const img = document.getElementById('lbImg');
if (viewer) viewer.classList.toggle('show-checker', on);
if (cbLayer) {
if (on && img && img.style.display !== 'none') {
const rect = getImageDisplayRect(img);
if (rect) {
cbLayer.style.display = 'block';
cbLayer.style.left = rect.left + 'px';
cbLayer.style.top = rect.top + 'px';
cbLayer.style.width = rect.width + 'px';
cbLayer.style.height = rect.height + 'px';
} else {
cbLayer.style.display = 'none';
}
} else {
cbLayer.style.display = 'none';
}
}
const cb = document.getElementById('sbCheckerboard');
if (cb) cb.checked = on;
}

87
tour-comfy/edit_api.py
View File

@@ -307,6 +307,8 @@ def _idle_turntable_daemon():
fname, group_id, sort_order = row[0], row[2], row[6]
if not group_id:
continue
if fname.startswith("_turntable/"):
continue
if group_id not in groups:
groups[group_id] = (fname, sort_order)
else:
@@ -1378,24 +1380,73 @@ def _write_turntable_static() -> None:
except Exception:
group_names = {}
# Preferred filename per group (sort_order=0)
preferred: dict = {}
# Fetch active and existing group IDs and filenames from the database (excluding turntable assets)
all_db_gids = set()
active_db_gids = set()
all_db_filenames = set()
active_db_filenames = set()
try:
for row in database.list_persons():
fname, gid, sort_order = row[0], row[2], row[6]
if not gid:
continue
if gid not in preferred:
preferred[gid] = (fname, sort_order)
else:
cur = preferred[gid][1]
if sort_order is not None and (cur is None or sort_order < cur):
preferred[gid] = (fname, sort_order)
except Exception:
pass
conn = database.get_db_connection()
cur = conn.cursor()
cur.execute("""
SELECT filename, group_id, archived, hidden
FROM person
WHERE NOT (filename LIKE '_turntable/%')
""")
for fname, gid, archived, hidden in cur.fetchall():
is_archived = bool(archived) if archived is not None else False
is_hidden = bool(hidden) if hidden is not None else False
all_db_filenames.add(fname)
if not is_archived and not is_hidden:
active_db_filenames.add(fname)
if gid:
all_db_gids.add(gid)
if not is_archived and not is_hidden:
active_db_gids.add(gid)
cur.close()
database._put_db_connection(conn)
except Exception as db_err:
print(f"[static] DB check error: {db_err}")
turntables = []
for gid in tc.list_cached_group_ids(output_dir):
is_orphaned = False
is_active = False
if gid.startswith("file_"):
fname = gid[5:]
if all_db_filenames and fname not in all_db_filenames:
is_orphaned = True
elif active_db_filenames and fname in active_db_filenames:
is_active = True
else:
if all_db_gids and gid not in all_db_gids:
is_orphaned = True
elif active_db_gids and gid in active_db_gids:
is_active = True
# 1. Truly orphaned turntable caches (no associated base images or files in DB)
if is_orphaned:
print(f"[static] Deleting truly orphaned turntable cache and DB records for group/file {gid}")
tc.delete_state(output_dir, gid)
try:
conn = database.get_db_connection()
cur = conn.cursor()
cur.execute("DELETE FROM person WHERE group_id = %s", (gid,))
conn.commit()
cur.close()
database._put_db_connection(conn)
except Exception as del_err:
print(f"[static] Failed to clean DB records for orphaned group/file {gid}: {del_err}")
continue
# 2. Inactive turntable caches (associated group/file is fully archived or hidden)
if not is_active:
# Keep cache on disk but do not write to turntables.json (hide from UI)
continue
state = tc.load_state(output_dir, gid)
if not state:
continue
@@ -3496,6 +3547,7 @@ def autocrop_image(filename: str):
cmin, cmax = np.where(cols)[0][[0, -1]]
cropped = img.crop((cmin, rmin, cmax + 1, rmax + 1))
cropped.save(path, format="PNG")
_invalidate_static()
return {"status": "success", "filename": filename, "box": [int(cmin), int(rmin), int(cmax+1), int(rmax+1)]}
@@ -3558,8 +3610,7 @@ def manual_crop_image(filename: str, req: CropRequest):
cropped = img.crop((x1, y1, x2, y2))
fmt = "PNG" if path.lower().endswith(".png") else "JPEG"
cropped.save(path, format=fmt)
if req.as_copy:
_invalidate_static()
_invalidate_static()
return {"status": "success", "filename": filename, "new_filename": new_filename,
"new_url": f"/output/{new_filename}", "as_copy": req.as_copy,
"box": [x1, y1, x2, y2]}
@@ -3679,8 +3730,7 @@ def pad_image(filename: str, req: PadRequest):
if req.fill == "transparent":
fmt = "PNG" # JPEG cannot store alpha
padded.save(path, format=fmt)
if req.as_copy:
_invalidate_static()
_invalidate_static()
return {
"status": "success", "filename": filename, "new_filename": new_filename,
"new_url": f"/output/{new_filename}", "as_copy": req.as_copy,
@@ -3712,6 +3762,7 @@ def rotate_image(filename: str, req: RotateRequest):
img = Image.open(path).transpose(cw_to_transpose[deg])
fmt = "PNG" if path.lower().endswith(".png") else "JPEG"
img.save(path, format=fmt)
_invalidate_static()
return {"status": "success", "filename": filename, "degrees": deg}

5
tour-comfy/trash.html
View File

@@ -101,7 +101,10 @@
<div id="toast"></div>
<script>
const API = window.location.origin;
let API = window.location.origin;
if (API === 'null' || API.startsWith('file://')) {
API = 'http://127.0.0.1:8500';
}
function showToast(msg) {
const t = document.getElementById('toast');