Delete web directory
This commit is contained in:
danieljanata
@@ -1,373 +0,0 @@
|
||||
/**
|
||||
* Prompt Library Styles
|
||||
* Custom styling for Prompting System nodes
|
||||
*/
|
||||
|
||||
/* Prompt Saver Node */
|
||||
.comfy-node.PromptSaver {
|
||||
border: 2px solid #6b6bff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.comfy-node.PromptSaver .locked-indicator {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.comfy-node.PromptSaver .locked-indicator.unlocked {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smart Text Input Node */
|
||||
.comfy-node.SmartTextInput {
|
||||
border: 2px solid #4ecdc4;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.comfy-node.SmartTextInput.new-prompt {
|
||||
animation: flash-red 0.5s ease-out;
|
||||
}
|
||||
|
||||
.comfy-node.SmartTextInput.edit-prompt {
|
||||
animation: flash-blue 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes flash-red {
|
||||
0% { background-color: rgba(255, 107, 107, 0.3); }
|
||||
100% { background-color: transparent; }
|
||||
}
|
||||
|
||||
@keyframes flash-blue {
|
||||
0% { background-color: rgba(78, 205, 196, 0.3); }
|
||||
100% { background-color: transparent; }
|
||||
}
|
||||
|
||||
/* Library Browser Node */
|
||||
.comfy-node.PromptLibraryBrowser {
|
||||
border: 2px solid #ffd700;
|
||||
border-radius: 8px;
|
||||
min-width: 600px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.prompt-library-container {
|
||||
padding: 16px;
|
||||
background: #1a1a2e;
|
||||
border-radius: 8px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.prompt-library-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #ffd700;
|
||||
}
|
||||
|
||||
.prompt-library-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.prompt-library-stats {
|
||||
font-size: 14px;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
.prompt-search-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.prompt-search-input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
background: #16213e;
|
||||
border: 1px solid #4a4a6a;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.prompt-search-input:focus {
|
||||
outline: none;
|
||||
border-color: #ffd700;
|
||||
}
|
||||
|
||||
.prompt-filter-button {
|
||||
padding: 8px 16px;
|
||||
background: #4a4a6a;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.prompt-filter-button:hover {
|
||||
background: #6a6a8a;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.prompt-filter-button.active {
|
||||
background: #ffd700;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.prompt-results {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.prompt-result-item {
|
||||
background: #16213e;
|
||||
border: 1px solid #4a4a6a;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.prompt-result-item:hover {
|
||||
border-color: #ffd700;
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
|
||||
.prompt-result-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.prompt-result-id {
|
||||
font-weight: bold;
|
||||
color: #ffd700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.prompt-result-rating {
|
||||
color: #ffaa00;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.prompt-result-category {
|
||||
display: inline-block;
|
||||
background: #4a4a6a;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.prompt-result-text {
|
||||
color: #e0e0e0;
|
||||
font-size: 14px;
|
||||
margin: 8px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prompt-result-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.prompt-tag {
|
||||
background: #2a2a4a;
|
||||
padding: 3px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
color: #a0a0ff;
|
||||
}
|
||||
|
||||
.prompt-result-thumbnails {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.prompt-thumbnail {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prompt-thumbnail:hover {
|
||||
border-color: #ffd700;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.prompt-thumbnail.locked {
|
||||
border-color: #ff6b6b;
|
||||
box-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
|
||||
}
|
||||
|
||||
.prompt-result-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.prompt-action-button {
|
||||
padding: 6px 12px;
|
||||
background: #4a4a6a;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.prompt-action-button:hover {
|
||||
background: #6a6a8a;
|
||||
}
|
||||
|
||||
.prompt-action-button.primary {
|
||||
background: #ffd700;
|
||||
color: #1a1a2e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.prompt-action-button.primary:hover {
|
||||
background: #ffed4e;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.prompt-action-button.danger {
|
||||
background: #ff6b6b;
|
||||
}
|
||||
|
||||
.prompt-action-button.danger:hover {
|
||||
background: #ff5252;
|
||||
}
|
||||
|
||||
/* Export Manager Node */
|
||||
.comfy-node.ExportManager {
|
||||
border: 2px solid #6bff6b;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.export-button {
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.export-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.export-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
.prompt-results::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.prompt-results::-webkit-scrollbar-track {
|
||||
background: #16213e;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.prompt-results::-webkit-scrollbar-thumb {
|
||||
background: #4a4a6a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.prompt-results::-webkit-scrollbar-thumb:hover {
|
||||
background: #6a6a8a;
|
||||
}
|
||||
|
||||
/* Loading animation */
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(255, 215, 0, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: #ffd700;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Toast notifications */
|
||||
.prompt-toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #16213e;
|
||||
border: 2px solid #ffd700;
|
||||
border-radius: 8px;
|
||||
padding: 16px 24px;
|
||||
color: #e0e0e0;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
animation: slide-in 0.3s ease-out;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
from {
|
||||
transform: translateX(400px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-toast.success {
|
||||
border-color: #6bff6b;
|
||||
}
|
||||
|
||||
.prompt-toast.error {
|
||||
border-color: #ff6b6b;
|
||||
}
|
||||
|
||||
.prompt-toast.info {
|
||||
border-color: #4ecdc4;
|
||||
}
|
||||
@@ -1,207 +0,0 @@
|
||||
/**
|
||||
* Prompt Library UI - Enhanced browser interface
|
||||
* Provides rich UI for browsing, searching, and managing prompts
|
||||
*/
|
||||
|
||||
import { app } from "../../scripts/app.js";
|
||||
import { ComfyWidgets } from "../../scripts/widgets.js";
|
||||
|
||||
// Custom widget for displaying prompt library
|
||||
class PromptLibraryWidget {
|
||||
constructor(node, inputName, inputData, app) {
|
||||
this.node = node;
|
||||
this.name = inputName;
|
||||
this.type = "custom_prompt_library";
|
||||
|
||||
// Create widget element
|
||||
const widget = {
|
||||
type: this.type,
|
||||
name: inputName,
|
||||
size: [600, 400],
|
||||
draw: function(ctx, node, widgetWidth, widgetY, height) {
|
||||
// Custom drawing if needed
|
||||
},
|
||||
computeSize: function(width) {
|
||||
return [width, 400];
|
||||
},
|
||||
value: ""
|
||||
};
|
||||
|
||||
return widget;
|
||||
}
|
||||
}
|
||||
|
||||
// Register custom widget
|
||||
ComfyWidgets.PROMPTLIBRARY = function(node, inputName, inputData, app) {
|
||||
return new PromptLibraryWidget(node, inputName, inputData, app);
|
||||
};
|
||||
|
||||
// Extension for Prompt Saver Node
|
||||
app.registerExtension({
|
||||
name: "PromptingSystem.PromptSaver",
|
||||
|
||||
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
||||
if (nodeData.name === "PromptSaver") {
|
||||
// Add custom styling for lock button
|
||||
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
||||
|
||||
nodeType.prototype.onNodeCreated = function() {
|
||||
const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
|
||||
|
||||
// Find locked widget and add pulsing animation
|
||||
const lockedWidget = this.widgets?.find(w => w.name === "locked");
|
||||
|
||||
if (lockedWidget) {
|
||||
const originalDraw = lockedWidget.draw;
|
||||
|
||||
lockedWidget.draw = function(ctx, node, widgetWidth, y, height) {
|
||||
// Call original draw
|
||||
if (originalDraw) {
|
||||
originalDraw.apply(this, arguments);
|
||||
}
|
||||
|
||||
// Add pulsing effect when unlocked
|
||||
if (!this.value) {
|
||||
const time = Date.now() / 1000;
|
||||
const pulse = Math.sin(time * 3) * 0.3 + 0.7;
|
||||
|
||||
ctx.save();
|
||||
ctx.globalAlpha = pulse;
|
||||
ctx.fillStyle = "#ff6b6b";
|
||||
ctx.fillRect(node.pos[0], node.pos[1] + y - 5, widgetWidth, height + 10);
|
||||
ctx.restore();
|
||||
|
||||
// Request redraw for animation
|
||||
node.graph?.setDirtyCanvas(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return r;
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Extension for Prompt Library Browser
|
||||
app.registerExtension({
|
||||
name: "PromptingSystem.LibraryBrowser",
|
||||
|
||||
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
||||
if (nodeData.name === "PromptLibraryBrowser") {
|
||||
// Enhance node with custom UI
|
||||
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
||||
|
||||
nodeType.prototype.onNodeCreated = function() {
|
||||
const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
|
||||
|
||||
// Make node larger by default
|
||||
this.size = [600, 400];
|
||||
|
||||
// Add custom title
|
||||
this.title = "📚 Prompt Library";
|
||||
this.color = "#2a2a4a";
|
||||
this.bgcolor = "#1a1a2a";
|
||||
|
||||
return r;
|
||||
};
|
||||
|
||||
// Handle results display
|
||||
const onExecuted = nodeType.prototype.onExecuted;
|
||||
|
||||
nodeType.prototype.onExecuted = function(message) {
|
||||
if (onExecuted) {
|
||||
onExecuted.apply(this, arguments);
|
||||
}
|
||||
|
||||
// Parse and display results
|
||||
if (message?.text && message.text[2]) {
|
||||
const resultsText = message.text[2];
|
||||
|
||||
// Try to parse as JSON
|
||||
try {
|
||||
const results = JSON.parse(resultsText);
|
||||
|
||||
if (Array.isArray(results)) {
|
||||
console.log(`[Prompt Library] Loaded ${results.length} prompts`);
|
||||
|
||||
// Could create custom UI here
|
||||
this.displayResults = results;
|
||||
}
|
||||
} catch (e) {
|
||||
// Not JSON, just text info
|
||||
console.log(`[Prompt Library] ${resultsText}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Extension for Smart Text Input
|
||||
app.registerExtension({
|
||||
name: "PromptingSystem.SmartTextInput",
|
||||
|
||||
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
||||
if (nodeData.name === "SmartTextInput") {
|
||||
// Add visual indicator for change detection
|
||||
const onExecuted = nodeType.prototype.onExecuted;
|
||||
|
||||
nodeType.prototype.onExecuted = function(message) {
|
||||
if (onExecuted) {
|
||||
onExecuted.apply(this, arguments);
|
||||
}
|
||||
|
||||
// Show change detection result
|
||||
if (message?.text) {
|
||||
const isNewPrompt = message.text[1]; // boolean
|
||||
const similarity = message.text[2]; // float
|
||||
|
||||
// Update node color based on detection
|
||||
if (isNewPrompt) {
|
||||
this.color = "#4a2a2a"; // Red tint for new prompt
|
||||
this.bgcolor = "#2a1a1a";
|
||||
console.log(`[Smart Text] New prompt detected (similarity: ${similarity.toFixed(2)})`);
|
||||
} else {
|
||||
this.color = "#2a2a4a"; // Blue tint for edit
|
||||
this.bgcolor = "#1a1a2a";
|
||||
console.log(`[Smart Text] Edit detected (similarity: ${similarity.toFixed(2)})`);
|
||||
}
|
||||
|
||||
// Reset color after 2 seconds
|
||||
setTimeout(() => {
|
||||
this.color = "#222";
|
||||
this.bgcolor = "#000";
|
||||
app.graph?.setDirtyCanvas(true);
|
||||
}, 2000);
|
||||
|
||||
app.graph?.setDirtyCanvas(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Extension for Export Manager
|
||||
app.registerExtension({
|
||||
name: "PromptingSystem.ExportManager",
|
||||
|
||||
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
||||
if (nodeData.name === "ExportManager") {
|
||||
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
||||
|
||||
nodeType.prototype.onNodeCreated = function() {
|
||||
const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
|
||||
|
||||
// Style node
|
||||
this.title = "📤 Export Manager";
|
||||
this.color = "#2a4a2a";
|
||||
this.bgcolor = "#1a2a1a";
|
||||
|
||||
return r;
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log("🎨 Prompt Library UI extensions loaded!");
|
||||
Reference in New Issue
Block a user