root/PaintPlus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: real-world selection actions — scale %, AI edit, clipboard paste

Browse Source 
Backend (3 new endpoints under /api/image/):
- POST /api/image/scale-selection  — scale selected object by any % in-place;
  LaMa/OpenCV fills the exposed gap so the scene looks natural
- POST /api/image/ai-edit-region   — AI redraws the masked region via the
  configured inpaint provider (local_gpu / InvokeAI / ComfyUI / OpenAI)
- POST /api/image/paste-into-selection — scales clipboard image to fit the
  selection bounding box, masks it to the selection shape, composites result

Frontend (selection_actions.js + tool integration):
- New SelectionActions panel: fixed bottom-center HUD that appears
  automatically after every SAM selection (click or paint)
- Panel actions: Scale by % (default 3%), Make less symmetrical (AI),
  custom AI Edit prompt, Replace with clipboard, Copy/Cut to layer, Erase
- Both smart_select.js and brush_select.js updated to show the panel,
  add updateLayerWithResult(), and hide panel on clearSelection/on_leave
- brush_select: offerFloatSelection() replaced with richer action panel

Real-world workflows now supported in one click after painting over object:
  "Make this 3% bigger" → scale-selection (LaMa fills gap)
  "Make this less symmetrical" → ai-edit-region with asymmetry prompt
  "Replace this with what I copied" → paste-into-selection

https://claude.ai/code/session_01WVDg7amsy1TTtxvpku7bcM
This commit is contained in:
Claude
2026-06-13 16:10:32 +00:00
parent 9b895673eb
commit a97834fda3
4 changed files with 552 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/js/tools/brush_select.js
+21 -23
View File
@@ -11,6 +11,7 @@ import Base_layers_class from './../core/base-layers.js';
import Helper_class from './../libs/helpers.js';
import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
import apiService from './../services/api.js';
import { SelectionActions, updateLayerWithResult } from './selection_actions.js';
class Brush_select_class extends Base_tools_class {
@@ -39,6 +40,9 @@ class Brush_select_class extends Base_tools_class {
// Processing state
this.isProcessing = false;
// Quick-action panel shown after selection
this.selectionActions = new SelectionActions(this);
}
load() {
@@ -300,31 +304,23 @@ class Brush_select_class extends Base_tools_class {
}
/**
* Offer to float the selection to a new layer for manipulation (Canva-like workflow)
* Show quick-action panel after selection (AI operations, scale, clipboard paste, etc.)
*/
offerFloatSelection() {
var _this = this;
var imageData = this.getLayerImageData();
var maskData = this.maskCanvas
? this.maskCanvas.toDataURL('image/png').split(',')[1]
: null;
if (maskData) {
this.selectionActions.show(imageData, maskData);
}
}
alertify.confirm(
'Selection Complete',
'Would you like to move/scale this selection? This will copy it to a new layer.',
function() {
// Yes - copy to layer and switch to Select tool
_this.copyToLayer();
// Switch to Select tool
setTimeout(function() {
var selectTool = document.querySelector('.sidebar_left .item[data-tool="select"]');
if (selectTool) {
selectTool.click();
}
}, 100);
},
function() {
// No - just keep the selection
alertify.message('Tip: Use Ctrl+C to copy or Ctrl+X to cut the selection.');
}
).set('labels', {ok: 'Yes, Move/Scale', cancel: 'Keep Selection'});
/**
* Update the current layer canvas with a base64 result from a backend operation.
*/
updateLayerWithResult(base64) {
updateLayerWithResult(base64, this);
}
/**
@@ -781,6 +777,7 @@ class Brush_select_class extends Base_tools_class {
}
clearSelection() {
this.selectionActions.hide();
this.currentMask = null;
this.maskCanvas = null;
this.edgeCanvas = null;
@@ -793,8 +790,9 @@ class Brush_select_class extends Base_tools_class {
}
on_leave() {
this.selectionActions.hide();
this.isDrawing = false;
this.isProcessing = false; // Reset processing state when leaving tool
this.isProcessing = false;
this.brushPath = [];
return [];
}
frontend/src/js/tools/selection_actions.js
+346
View File
@@ -0,0 +1,346 @@
/**
* SelectionActions — floating quick-action panel that appears after a SAM selection.
*
* Surfaces high-value real-world workflows directly in the UI:
* • Scale by % — make object 3% (or any %) bigger/smaller, gap AI-filled
* • Make less symmetrical — AI redraws the region with organic variation
* • Replace with clipboard — paste clipboard image into the selection shape
* • Copy / Cut to layer — classic Photoshop workflow
* • AI Edit (custom prompt) — full inpaint with user text
*
* Usage:
* this.selectionActions = new SelectionActions(this);
* // after successful selection:
* this.selectionActions.show(imageBase64, maskBase64);
*/
import app from './../app.js';
import config from './../config.js';
import Base_layers_class from './../core/base-layers.js';
import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
const BASE = window.API_BASE_URL || '';
export class SelectionActions {
constructor(tool) {
this.tool = tool;
this.Base_layers = new Base_layers_class();
this._panel = null;
this._imageData = null;
this._maskData = null;
this._escHandler = null;
}
show(imageBase64, maskBase64) {
this.hide();
this._imageData = imageBase64;
this._maskData = maskBase64;
var panel = document.createElement('div');
panel.id = 'sel-actions-panel';
panel.style.cssText = [
'position:fixed',
'bottom:80px',
'left:50%',
'transform:translateX(-50%)',
'background:#1a1a2e',
'border:1px solid #3a3a6a',
'border-radius:12px',
'padding:14px 16px',
'z-index:10000',
'font-family:sans-serif',
'font-size:12px',
'color:#d0d0e0',
'min-width:340px',
'box-shadow:0 8px 32px rgba(0,0,0,0.7)',
'display:flex',
'flex-direction:column',
'gap:6px',
].join(';');
// ── Title row ────────────────────────────────────────────────────────
var titleRow = document.createElement('div');
titleRow.style.cssText = 'display:flex;align-items:center;justify-content:space-between;margin-bottom:4px';
var title = document.createElement('span');
title.textContent = 'Selection Actions';
title.style.cssText = 'font-size:13px;font-weight:bold;color:#aaaaff';
var closeX = document.createElement('button');
closeX.textContent = '✕';
closeX.style.cssText = 'background:none;border:none;color:#666;cursor:pointer;font-size:14px;padding:0;line-height:1';
closeX.title = 'Close panel (keep selection)';
closeX.onclick = () => this.hide();
titleRow.appendChild(title);
titleRow.appendChild(closeX);
panel.appendChild(titleRow);
// ── Scale by % ───────────────────────────────────────────────────────
var scaleRow = document.createElement('div');
scaleRow.style.cssText = 'display:flex;align-items:center;gap:6px;background:#16213e;border-radius:7px;padding:7px 10px';
var scaleLabel = document.createElement('span');
scaleLabel.textContent = 'Scale by';
scaleLabel.style.color = '#aaa';
var scaleInput = document.createElement('input');
scaleInput.type = 'number';
scaleInput.value = '103';
scaleInput.min = '1';
scaleInput.max = '500';
scaleInput.title = '103 = 3% bigger · 95 = 5% smaller';
scaleInput.style.cssText = 'width:52px;background:#0f0f1a;color:#fff;border:1px solid #4a4a8a;border-radius:4px;padding:2px 5px;font-size:12px';
var scaleUnit = document.createElement('span');
scaleUnit.textContent = '%';
scaleUnit.style.color = '#888';
var scaleBtn = _btn('Apply', '#1a2a4a', '#8aacff');
scaleBtn.style.marginLeft = 'auto';
scaleBtn.onclick = () => {
var pct = parseFloat(scaleInput.value) || 103;
this._scaleSelection(pct);
};
scaleRow.appendChild(scaleLabel);
scaleRow.appendChild(scaleInput);
scaleRow.appendChild(scaleUnit);
scaleRow.appendChild(scaleBtn);
panel.appendChild(scaleRow);
// ── AI actions ───────────────────────────────────────────────────────
panel.appendChild(
_actionBtn('Make less symmetrical', '#1c1a2e', '#cc99ff',
'⟳ AI redraws the region with natural, organic asymmetry',
() => this._makeAsymmetric())
);
panel.appendChild(
_actionBtn('Replace with clipboard', '#1a2a1a', '#88dd88',
'📋 Scales your clipboard image into the selection shape',
() => this._pasteFromClipboard())
);
// ── Custom AI edit prompt ─────────────────────────────────────────────
var aiRow = document.createElement('div');
aiRow.style.cssText = 'display:flex;align-items:center;gap:6px;background:#16213e;border-radius:7px;padding:7px 10px';
var aiInput = document.createElement('input');
aiInput.type = 'text';
aiInput.placeholder = 'AI edit: "add a scar", "make it look aged", …';
aiInput.style.cssText = 'flex:1;background:#0f0f1a;color:#fff;border:1px solid #4a4a8a;border-radius:4px;padding:3px 7px;font-size:11px';
var aiBtn = _btn('Edit', '#1a2a4a', '#8aacff');
aiBtn.onclick = () => {
var instruction = aiInput.value.trim();
if (!instruction) { alertify.warning('Enter an AI edit instruction first.'); return; }
this._aiEditRegion(instruction);
};
aiRow.appendChild(aiInput);
aiRow.appendChild(aiBtn);
panel.appendChild(aiRow);
// ── Divider ──────────────────────────────────────────────────────────
var hr = document.createElement('div');
hr.style.cssText = 'border-top:1px solid #2a2a4a;margin:2px 0';
panel.appendChild(hr);
// ── Classic selection ops ─────────────────────────────────────────────
var classicRow = document.createElement('div');
classicRow.style.cssText = 'display:flex;gap:6px';
var copyBtn = _btn('Copy to layer', '#1a2a1a', '#88cc88');
copyBtn.style.flex = '1';
copyBtn.title = 'Ctrl+C';
copyBtn.onclick = () => { this.tool.copyToLayer(); this.hide(); };
var cutBtn = _btn('Cut to layer', '#2a1a1a', '#cc8888');
cutBtn.style.flex = '1';
cutBtn.title = 'Ctrl+X';
cutBtn.onclick = () => { this.tool.cutToLayer(); this.hide(); };
var delBtn = _btn('Erase', '#2a1a1a', '#ff7766');
delBtn.style.flex = '0 0 auto';
delBtn.title = 'Delete key';
delBtn.onclick = () => { this.tool.deleteSelection(); this.hide(); };
classicRow.appendChild(copyBtn);
classicRow.appendChild(cutBtn);
classicRow.appendChild(delBtn);
panel.appendChild(classicRow);
document.body.appendChild(panel);
this._panel = panel;
this._escHandler = (e) => { if (e.key === 'Escape') this.hide(); };
document.addEventListener('keydown', this._escHandler);
}
hide() {
if (this._panel) { this._panel.remove(); this._panel = null; }
if (this._escHandler) {
document.removeEventListener('keydown', this._escHandler);
this._escHandler = null;
}
}
// ── Actions ─────────────────────────────────────────────────────────────
async _scaleSelection(scalePct) {
if (!this._check()) return;
this.hide();
alertify.message('Scaling object and filling gap…');
try {
var res = await _post('/api/image/scale-selection', {
image: this._imageData,
mask: this._maskData,
scale_pct: scalePct,
});
this.tool.updateLayerWithResult(res.result);
this.tool.clearSelection();
alertify.success('Scaled by ' + scalePct + '%!');
} catch (e) {
alertify.error('Scale failed: ' + e.message);
}
}
async _makeAsymmetric() {
if (!this._check()) return;
this.hide();
alertify.message('AI is adding natural asymmetry…');
try {
var res = await _post('/api/image/ai-edit-region', {
image: this._imageData,
mask: this._maskData,
instruction: 'natural asymmetry, slight organic variation, realistic, subtle imperfection',
negative_prompt:'perfectly symmetric, mirror image, artificial, identical halves',
steps: 30,
cfg_scale: 7.5,
});
this.tool.updateLayerWithResult(res.result);
this.tool.clearSelection();
alertify.success('Made less symmetrical!');
} catch (e) {
alertify.error('AI edit failed: ' + e.message);
}
}
async _aiEditRegion(instruction) {
if (!this._check()) return;
this.hide();
alertify.message('AI is editing the region…');
try {
var res = await _post('/api/image/ai-edit-region', {
image: this._imageData,
mask: this._maskData,
instruction: instruction,
steps: 30,
cfg_scale: 7.5,
});
this.tool.updateLayerWithResult(res.result);
this.tool.clearSelection();
alertify.success('Done!');
} catch (e) {
alertify.error('AI edit failed: ' + e.message);
}
}
async _pasteFromClipboard() {
if (!this._check()) return;
if (!navigator.clipboard || !navigator.clipboard.read) {
alertify.error('Clipboard API not available. Use HTTPS or enable clipboard permissions.');
return;
}
try {
var items = await navigator.clipboard.read();
var clipBlob = null;
for (var item of items) {
for (var type of item.types) {
if (type.startsWith('image/')) {
clipBlob = await item.getType(type);
break;
}
}
if (clipBlob) break;
}
if (!clipBlob) {
alertify.error('No image in clipboard. Copy an image first (e.g., right-click → Copy image).');
return;
}
var clipBase64 = await _blobToBase64(clipBlob);
this.hide();
alertify.message('Pasting clipboard into selection…');
var res = await _post('/api/image/paste-into-selection', {
image: this._imageData,
mask: this._maskData,
paste_image: clipBase64,
});
this.tool.updateLayerWithResult(res.result);
this.tool.clearSelection();
alertify.success('Clipboard pasted into selection!');
} catch (e) {
alertify.error('Paste failed: ' + e.message);
}
}
_check() {
if (!this._imageData || !this._maskData) {
alertify.error('No selection data. Make a new selection first.');
return false;
}
return true;
}
}
// ── Shared method: patch into both smart_select and brush_select instances ───
/**
* Update the active layer canvas with a base64 result image from the backend.
* Call as `this.updateLayerWithResult(base64)` on any tool that extends Base_tools_class.
*/
export function updateLayerWithResult(base64, tool) {
var img = new Image();
img.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
app.State.do_action(
new app.Actions.Bundle_action('ai_transform', 'AI Transform', [
new app.Actions.Update_layer_image_action(canvas, config.layer.id)
])
);
// Trigger re-render
config.need_render = true;
};
img.src = 'data:image/png;base64,' + base64;
}
// ── Private helpers ──────────────────────────────────────────────────────────
function _btn(text, bg, color) {
var b = document.createElement('button');
b.textContent = text;
b.style.cssText = 'background:' + bg + ';color:' + color + ';border:1px solid #3a3a6a;padding:4px 10px;border-radius:5px;cursor:pointer;font-size:11px;white-space:nowrap';
return b;
}
function _actionBtn(text, bg, color, tooltip, handler) {
var b = _btn(text, bg, color);
b.style.cssText += ';display:block;width:100%;text-align:left;padding:7px 10px;border-radius:7px;font-size:12px';
if (tooltip) b.title = tooltip;
b.onclick = handler;
return b;
}
async function _post(path, body) {
var r = await fetch(BASE + path, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
if (!r.ok) {
var err = await r.json().catch(() => ({ detail: r.statusText }));
throw new Error(err.detail || 'Request failed');
}
return r.json();
}
function _blobToBase64(blob) {
return new Promise((resolve, reject) => {
var reader = new FileReader();
reader.onload = (e) => resolve(e.target.result.split(',')[1]);
reader.onerror = reject;
reader.readAsDataURL(blob);
});
}
frontend/src/js/tools/smart_select.js
+27 -2
View File
@@ -13,6 +13,7 @@ import Helper_class from './../libs/helpers.js';
import Dialog_class from './../libs/popup.js';
import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
import apiService from './../services/api.js';
import { SelectionActions, updateLayerWithResult } from './selection_actions.js';
class Smart_select_class extends Base_tools_class {
@@ -35,6 +36,9 @@ class Smart_select_class extends Base_tools_class {
// Edge canvas for drawing the mask outline
this.edgeCanvas = null;
// Quick-action panel shown after selection
this.selectionActions = new SelectionActions(this);
}
load() {
@@ -146,7 +150,7 @@ class Smart_select_class extends Base_tools_class {
if (isAdditive && this.currentMask) {
alertify.success('Added to selection! Shift+Click to add more.');
} else {
alertify.success('Selection complete! Shift+Click to add more, Ctrl+C to copy, Ctrl+X to cut.');
this._showActionPanel();
}
} catch (error) {
@@ -633,10 +637,31 @@ class Smart_select_class extends Base_tools_class {
alertify.success('Selection deleted!');
}
/**
* Show the quick-action panel for the current selection.
*/
_showActionPanel() {
var imageData = this.getLayerImageData();
var maskData = this.maskCanvas
? this.maskCanvas.toDataURL('image/png').split(',')[1]
: null;
if (maskData) {
this.selectionActions.show(imageData, maskData);
}
}
/**
* Update the current layer canvas with a base64 result from a backend operation.
*/
updateLayerWithResult(base64) {
updateLayerWithResult(base64, this);
}
/**
* Clear the current selection
*/
clearSelection() {
this.selectionActions.hide();
this.currentMask = null;
this.maskCanvas = null;
this.edgeCanvas = null;
@@ -647,7 +672,7 @@ class Smart_select_class extends Base_tools_class {
}
on_leave() {
// Don't clear mask when switching tools - AI inpaint needs it
this.selectionActions.hide();
return [];
}
}