Add frontend editor.html with Alpine.js + Tailwind UI
- File open/save functionality - Layer list with visibility, rename, delete, reorder - Polygon drawing tool with canvas overlay - Mask extraction with ComfyUI integration - Krita integration button - Settings modal for ComfyUI URL config
This commit is contained in:
179
tools/ora_editor/templates/editor.html
Normal file
179
tools/ora_editor/templates/editor.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ORA Editor</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<style>
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #374151; }
|
||||
::-webkit-scrollbar-thumb { background: #6B7280; border-radius: 4px; }
|
||||
.polygon-point { position: absolute; width: 8px; height: 8px; background: #0F0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-white">
|
||||
|
||||
<div x-data="oraEditor()" class="min-h-screen p-4">
|
||||
<header class="mb-4 flex items-center gap-4">
|
||||
<div class="flex-1 flex items-center gap-2">
|
||||
<input type="text" x-model="filePath" placeholder="Path (e.g., scenes/kq4_010/pic.png)"
|
||||
class="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none">
|
||||
<button @click="openFile()" :disabled="!filePath||isLoading" class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded">Open</button>
|
||||
</div>
|
||||
<button @click="openInKrita()" :disabled="!oraPath" class="bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center gap-2">✓ Open in Krita</button>
|
||||
<button @click="saveCurrent()" :disabled="!oraPath" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded">Save</button>
|
||||
<button @click="showSettings=true" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded">⚙️</button>
|
||||
</header>
|
||||
|
||||
<div x-show="oraPath" class="flex gap-4">
|
||||
<aside class="w-72 flex-shrink-0 space-y-4">
|
||||
<!-- Layers -->
|
||||
<div class="bg-gray-800 rounded p-4 border border-gray-700">
|
||||
<h3 class="font-bold mb-3 text-gray-300">Layers</h3>
|
||||
<div class="space-y-2 max-h-64 overflow-y-auto">
|
||||
<template x-for="layer in layers">
|
||||
<div @click="selectedLayer=layer.name" class="flex items-center gap-2 bg-gray-700 hover:bg-gray-650 rounded px-2 py-1 cursor-pointer" :class="{'bg-gray-600':selectedLayer===layer.name}">
|
||||
<input type="checkbox" :checked="layer.visible" @change="toggleVisibility(layer.name,$event.target.checked)" class="w-4 h-4 rounded">
|
||||
<span class="flex-1 text-sm truncate" x-text="layer.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div x-show="selectedLayer" class="mt-3 pt-3 border-t border-gray-600 space-y-2">
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button @click="renameLayer()" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">Rename</button>
|
||||
<button @click="deleteLayer()" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm">Delete</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button @click="reorderLayer('up')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▲ Up</button>
|
||||
<button @click="reorderLayer('down')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▼ Down</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Polygon -->
|
||||
<div class="bg-gray-800 rounded p-4 border border-gray-700">
|
||||
<h3 class="font-bold mb-3 text-gray-300">Polygon</h3>
|
||||
<div class="space-y-3">
|
||||
<label class="block text-xs text-gray-400">Color: <input type="color" x-model="polygonColor" class="h-8 w-full rounded"></label>
|
||||
<label class="block text-xs text-gray-400">Width: <input type="number" x-model.number="polygonWidth" min="1" max="10" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1"></label>
|
||||
<div class="flex gap-2">
|
||||
<button @click="startDrawing()" :disabled="!oraPath||isDrawing" class="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm">Draw</button>
|
||||
<button @click="finishDrawing()" :disabled="!isDrawing||polygonPoints.length<3" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm">Done</button>
|
||||
</div>
|
||||
<div x-show="polygonPoints.length" class="text-xs text-gray-400">Points: <span x-text="polygonPoints.length"></span></div>
|
||||
<button @click="clearPolygon()" :disabled="!isDrawing&&!polygonPoints.length" class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-1.5 rounded text-sm">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mask -->
|
||||
<div class="bg-gray-800 rounded p-4 border border-gray-700">
|
||||
<h3 class="font-bold mb-3 text-gray-300">Mask Extraction</h3>
|
||||
<div class="space-y-3">
|
||||
<input type="text" x-model="maskSubject" placeholder="e.g., 'the door'" :disabled="isExtracting||!oraPath"
|
||||
class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none disabled:bg-gray-800">
|
||||
<label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" x-model="usePolygonHint" :disabled="isExtracting||!oraPath" class="w-4 h-4 rounded"><span class="text-sm">Use polygon hint</span></label>
|
||||
<button @click="extractMask()" :disabled="!maskSubject.trim()||isExtracting||!oraPath" class="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded">
|
||||
<span x-show="!isExtracting">Extract Mask</span><span x-show="isExtracting">Extracting...</span>
|
||||
</button>
|
||||
<div x-show="lastError" class="text-red-400 text-xs" x-text="lastError"></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Canvas -->
|
||||
<main class="flex-1 bg-gray-800 rounded border border-gray-700 p-4 relative overflow-auto" style="min-height:600px">
|
||||
<div x-show="oraPath&&!isLoading" class="relative inline-block" :style="`width:${imageWidth}px;height:${imageHeight}px;position:relative`">
|
||||
<img :src="'/api/image/base?ora_path='+encodeURIComponent(oraPath)" class="absolute inset-0 w-full h-full object-contain">
|
||||
<template x-for="(p,ix) in polygonPoints"><div class="polygon-point" :style="`left:${p.x*100}%;top:${p.y*100}%`"></div></template>
|
||||
<img x-show="!isDrawing&&polygonPreviewUrl" :src="polygonPreviewUrl" class="absolute inset-0 w-full h-full object-contain pointer-events-none">
|
||||
<canvas id="polyCanvas" x-show="isDrawing" :width="imageWidth" :height="imageHeight"
|
||||
class="absolute inset-0 cursor-crosshair pointer-events-auto border-2 border-dashed border-blue-500 opacity-90"></canvas>
|
||||
</div>
|
||||
<div x-show="isLoading" class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div></div>
|
||||
<div x-show="error" class="text-red-400 text-center mt-8" x-text="error"></div>
|
||||
<div x-show="isDrawing" class="mt-2 text-sm text-gray-400">Click to add points. Double-click or Enter/Escape when done.</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div x-show="!oraPath&&!isLoading" class="text-gray-400 text-center mt-20"><p class="text-xl">Open a PNG or ORA file to start editing</p></div>
|
||||
|
||||
<!-- Mask modal -->
|
||||
<div x-show="showMaskModal" @keydown.escape.window="closeMaskModal()" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
||||
<div class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 border" style="max-height:90vh;display:flex;flex-direction:column">
|
||||
<h2 class="text-xl font-bold mb-4">Extracted Mask</h2>
|
||||
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 relative" style="min-height:300px;max-height:50vh">
|
||||
<img :src="'/api/image/base?ora_path='+encodeURIComponent(oraPath)" class="relative w-full h-auto object-contain">
|
||||
<div x-show="tempMaskUrl" class="absolute inset-0 bg-green-500 opacity-30 pointer-events-none"><img :src="tempMaskUrl" class="w-full h-auto object-contain mix-blend-screen"></div>
|
||||
</div>
|
||||
<div class="flex gap-4 justify-end">
|
||||
<button @click="reroll()" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded">Re-roll</button>
|
||||
<button @click="useMask()" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded">Use Mask</button>
|
||||
<button @click="closeMaskModal()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings -->
|
||||
<div x-show="showSettings" @keydown.escape.window="showSettings=false" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
||||
<div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 border">
|
||||
<h2 class="text-xl font-bold mb-4">Settings</h2>
|
||||
<label class="block text-sm text-gray-300 mb-2">ComfyUI URL: <input type="text" x-model="comfyUrl" placeholder="127.0.0.1:8188" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"></label>
|
||||
<div class="flex gap-4 justify-end mt-4">
|
||||
<button @click="showSettings=false" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded">Cancel</button>
|
||||
<button @click="saveSettings()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script x-ignore>
|
||||
(function(){
|
||||
let dcTimer=null;
|
||||
function initCanvas(){
|
||||
var c=document.getElementById('polyCanvas');if(!c)return;
|
||||
var ctx=c.getContext('2d');
|
||||
c.onclick=function(e){
|
||||
var el=document.body.querySelector('[x-data]');if(el&&$data(el)&&!$data(el).isDrawing)return;
|
||||
var r=c.getBoundingClientRect();
|
||||
var x=(e.clientX-r.left)/r.width,y=(e.clientY-r.top)/r.height;
|
||||
var s=$data(el);if(!s)return;
|
||||
s.polygonPoints.push({x:Math.max(0,Math.min(1,x)),y:Math.max(0,Math.min(1,y))});
|
||||
ctx.fillStyle='#0F0';ctx.beginPath();ctx.arc(e.offsetX,e.offsetY,4,0,Math.PI*2);ctx.fill();
|
||||
};
|
||||
c.ondblclick=function(){clearTimeout(dcTimer);var el=document.body.querySelector('[x-data]');if(el&&$data(el))$data(el).finishDrawing();};
|
||||
}
|
||||
window.addEventListener('alpine:init',function(){setTimeout(initCanvas,100)});initCanvas();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>Alpine.data('oraEditor',()=>({
|
||||
filePath:'',oraPath:'',layers:[],imageWidth:800,imageHeight:600,selectedLayer:null,isDrawing:false,polygonPoints:[],polygonColor:'#FF0000',polygonWidth:2,polygonPreviewUrl:null,maskSubject:'',usePolygonHint:true,isExtracting:false,showMaskModal:false,tempMaskPath:null,tempMaskUrl:null,lastError:'',showSettings:false,comfyUrl:'127.0.0.1:8188',isLoading:false,error:'',
|
||||
|
||||
init(){localStorage.setItem('ora_comfy_url','127.0.0.1:8188');var self=this;document.addEventListener('keydown',function(e){if(e.key==='Escape'&&self.isDrawing)self.clearPolygon();if(e.key==='Enter'&&self.isDrawing&&self.polygonPoints.length>=3)self.finishDrawing();});},
|
||||
|
||||
async openFile(){if(!this.filePath||this.isLoading)return;this.isLoading=true;this.error='';try{var r=await fetch('/api/open',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({path:this.filePath})});var d=await r.json();if(!d.success)throw new Error(d.error||'Failed');this.oraPath=d.ora_path;this.layers=d.layers;this.imageWidth=d.width;this.imageHeight=d.height;this.clearPolygon();}catch(e){this.error=e.message;}finally{this.isLoading=false;}},
|
||||
saveCurrent(){if(!this.oraPath)return;fetch('/api/save',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath})});},
|
||||
|
||||
async toggleVisibility(ln,v){var l=this.layers.find(x=>x.name===ln);if(l)l.visible=v;await fetch('/api/layer/visibility',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,layer_name:ln,visible:v})});},
|
||||
renameLayer(){var on=this.selectedLayer,n=prompt('New name:',on);if(!n||n===on)return;var l=this.layers.find(x=>x.name===on);if(l)l.name=n;this.selectedLayer=n;fetch('/api/layer/rename',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,old_name:on,new_name:n})});},
|
||||
deleteLayer(){var l=this.selectedLayer;if(!confirm('Delete '+l+'?'))return;var i=this.layers.findIndex(x=>x.name===l);if(i>-1)this.layers.splice(i,1);this.selectedLayer=null;fetch('/api/layer/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,layer_name:l})});},
|
||||
async reorderLayer(d){var i=this.layers.findIndex(x=>x.name===this.selectedLayer);if(i<0)return;var ni=d==='up'?i-1:i+1;if(ni<0||ni>=this.layers.length)return;[this.layers[i],this.layers[ni]]=[this.layers[ni],this.layers[i]];},
|
||||
|
||||
startDrawing(){this.isDrawing=true;this.polygonPoints=[];var c=document.getElementById('polyCanvas');if(c){c.getContext('2d').clearRect(0,0,c.width,c.height);}},
|
||||
finishDrawing(){this.isDrawing=false;if(this.polygonPoints.length>=3)this.updatePolyPreview();else this.clearPolygon();},
|
||||
async updatePolyPreview(){if(!this.oraPath||this.polygonPoints.length<3)return;var r=await fetch('/api/polygon',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,points:this.polygonPoints,color:this.polygonColor,width:this.polygonWidth})});if(r.ok){var d=await r.json();this.polygonPreviewUrl=d.overlay_url;}},
|
||||
clearPolygon(){this.isDrawing=false;this.polygonPoints=[];this.polygonPreviewUrl=null;if(this.oraPath)fetch('/api/polygon/clear',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath})});},
|
||||
|
||||
async extractMask(){if(!this.maskSubject.trim())return;this.isExtracting=true;this.lastError='';try{var r=await fetch('/api/mask/extract',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({subject:this.maskSubject,use_polygon:this.usePolygonHint&&this.polygonPoints.length>=3,ora_path:this.oraPath,comfy_url:this.comfyUrl})});var d=await r.json();if(!d.success)throw new Error(d.error||'Failed');this.tempMaskPath=d.mask_path;this.tempMaskUrl=d.mask_url||'/api/file/mask?path='+encodeURIComponent(d.mask_path);this.showMaskModal=true;}catch(e){this.lastError=e.message;}finally{this.isExtracting=false;}},
|
||||
reroll(){this.extractMask();},
|
||||
async useMask(){if(!this.tempMaskPath)return;await fetch('/api/layer/add',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,entity_name:'mask',mask_path:this.tempMaskPath})});var r=await fetch('/api/layers?ora_path='+encodeURIComponent(this.oraPath));var d=await r.json();if(d.success)this.layers=d.layers;this.closeMaskModal();},
|
||||
closeMaskModal(){this.showMaskModal=false;this.tempMaskPath=null;this.tempMaskUrl=null;},
|
||||
|
||||
async openInKrita(){if(!this.selectedLayer){alert('Select a layer first');return;}var r=await fetch('/api/krita/open',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ora_path:this.oraPath,layer_name:this.selectedLayer})});var d=await r.json();if(d.success)window.open(d.file_url);},
|
||||
|
||||
saveSettings(){localStorage.setItem('ora_comfy_url',this.comfyUrl);this.showSettings=false;}
|
||||
}));</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user