mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-21 21:22:11 -03:00
107 lines
5.1 KiB
HTML
107 lines
5.1 KiB
HTML
<div id="importModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Import Recipe</h2>
|
|
<span class="close-modal" onclick="modalManager.closeModal('importModal')">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Step 1: Upload Image -->
|
|
<div id="uploadStep" class="import-step">
|
|
<p>Upload an image with LoRA metadata to import as a recipe.</p>
|
|
|
|
<div class="file-input-wrapper">
|
|
<input type="file" id="recipeImageUpload" accept="image/*" onchange="importManager.handleImageUpload(event)">
|
|
<div class="file-input-button">
|
|
<i class="fas fa-upload"></i> Select Image
|
|
</div>
|
|
</div>
|
|
|
|
<div id="uploadError" class="error-message"></div>
|
|
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" onclick="modalManager.closeModal('importModal')">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Recipe Details -->
|
|
<div id="detailsStep" class="import-step" style="display: none;">
|
|
<div class="recipe-details-layout">
|
|
<div class="recipe-image-container">
|
|
<div id="recipeImagePreview" class="recipe-image"></div>
|
|
</div>
|
|
|
|
<div class="recipe-form-container">
|
|
<div class="recipe-name-container">
|
|
<label for="recipeName">Recipe Name</label>
|
|
<input type="text" id="recipeName" placeholder="Enter recipe name"
|
|
onchange="importManager.handleRecipeNameChange(event)">
|
|
</div>
|
|
|
|
<div class="tags-section">
|
|
<label>Tags (optional)</label>
|
|
<div class="tag-input-container">
|
|
<input type="text" id="tagInput" placeholder="Add a tag">
|
|
<button class="secondary-btn" onclick="importManager.addTag()">
|
|
<i class="fas fa-plus"></i> Add
|
|
</button>
|
|
</div>
|
|
<div id="tagsContainer" class="tags-container">
|
|
<div class="empty-tags">No tags added</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loras-section">
|
|
<label>LoRAs in this Recipe <span id="loraCountInfo" class="lora-count-info">(0/0 in library)</span></label>
|
|
<div id="lorasList" class="loras-list">
|
|
<!-- LoRAs will be populated here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" onclick="importManager.backToUpload()">Back</button>
|
|
<button class="primary-btn" onclick="importManager.proceedFromDetails()">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Download Location (if needed) -->
|
|
<div id="locationStep" class="import-step" style="display: none;">
|
|
<p>The following LoRAs are not in your library and need to be downloaded:</p>
|
|
|
|
<div id="missingLorasList" class="missing-loras-list">
|
|
<!-- Missing LoRAs will be populated here -->
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="importLoraRoot">Select LoRA Root Directory</label>
|
|
<select id="importLoraRoot">
|
|
<!-- LoRA roots will be populated here -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label>Select Folder (optional)</label>
|
|
<div id="importFolderBrowser" class="folder-browser">
|
|
<!-- Folders will be populated here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="importNewFolder">Create New Folder (optional)</label>
|
|
<input type="text" id="importNewFolder" placeholder="Enter folder name">
|
|
</div>
|
|
|
|
<div class="path-preview">
|
|
<label>Download Location:</label>
|
|
<div id="importTargetPathDisplay" class="path-display"></div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" onclick="importManager.backToDetails()">Back</button>
|
|
<button class="primary-btn" onclick="importManager.saveRecipe()">Download & Save Recipe</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |