271 lines
12 KiB
HTML
271 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Preset Manager</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- New Navigation Bar -->
|
||
<div class="navbar">
|
||
<button class="sidebar-toggle" id="sidebarToggle" onclick="toggleSidebar()"> ‹ </button>
|
||
<h1>Preset Manager</h1>
|
||
<div class="tabs">
|
||
<button class="tab-button active" onclick="switchTab('characters')">
|
||
Characters
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('models')">
|
||
Models
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('styles')">
|
||
Styles
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('tags')">
|
||
Tags
|
||
</button>
|
||
</div>
|
||
<div class="search-box">
|
||
<input type="text" id="searchInput" placeholder="Search..." autocomplete="off">
|
||
<button class="clear-search" id="clearSearch" onclick="clearSearch()" style="display: none;">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status" id="status"></div>
|
||
|
||
<!-- Characters Tab -->
|
||
<div class="tab-content active" id="charactersTab">
|
||
|
||
<div class="content-with-sidebar">
|
||
<div class="sidebar" id="categorySidebar">
|
||
<div class="sidebar-header">
|
||
<span>Categories</span>
|
||
</div>
|
||
<div class="category-list" id="categoryList">
|
||
<div class="category-item active" data-category="all">
|
||
<span class="category-name">All Characters</span>
|
||
<span class="category-count" id="countAll">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main-content">
|
||
<div class="character-grid" id="characterGrid"></div>
|
||
<div class="empty-state" id="emptyState" style="display: none;">
|
||
<p>No characters found. Click the + card above to add one.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Models Tab -->
|
||
<div class="tab-content" id="modelsTab">
|
||
|
||
<div class="preset-grid" id="modelGrid"></div>
|
||
<div class="empty-state" id="modelEmptyState"
|
||
style="display: none;">
|
||
<p>No models found. Click the + card above to add one.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Styles Tab -->
|
||
<div class="tab-content" id="stylesTab">
|
||
|
||
<div class="character-grid" id="styleGrid"></div>
|
||
<div class="empty-state" id="styleEmptyState"
|
||
style="display: none;">
|
||
<p>No styles found. Click the + card above to add one.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tags Tab -->
|
||
<div class="tab-content" id="tagsTab">
|
||
<div class="preset-grid" id="tagGrid"></div>
|
||
<div class="empty-state" id="tagEmptyState"
|
||
style="display: none;">
|
||
<p>No tag presets found. Click the + card above to add one.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="modal" id="editModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<div style="flex: 1;">
|
||
<label style="display: block; margin-bottom: 5px;">Character Name</label>
|
||
<input type="text" id="editCharNameInput" class="name-input" style="margin: 0;" autocomplete="off"/>
|
||
</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Character Image</label>
|
||
<div style="display: flex; gap: 10px; align-items: center;">
|
||
<input type="file" id="editImage" accept="image/*"
|
||
style="flex: 1;">
|
||
<button onclick="removeImage()" class="delete"
|
||
style="padding: 8px 12px;">
|
||
Remove
|
||
</button>
|
||
</div>
|
||
<div id="imagePreview"
|
||
style="margin-top: 10px; display: none;">
|
||
<img id="previewImg"
|
||
style="max-width: 200px; border-radius: 4px;">
|
||
</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Character</label>
|
||
<textarea id="editCharacter"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Top</label>
|
||
<textarea id="editTop"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Bottom</label>
|
||
<textarea id="editBottom"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Negative</label>
|
||
<textarea id="editNeg"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Categories (comma-separated)</label>
|
||
<input type="text" id="editCategories"
|
||
placeholder="e.g., idolmaster, blue archive, genshin impact"
|
||
autocomplete="off">
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="delete" onclick="deleteCurrentCharacter()">
|
||
Delete
|
||
</button>
|
||
<button onclick="hideEditModal()">Cancel</button>
|
||
<button class="save" onclick="saveItem('character')">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Model Edit Modal -->
|
||
<div class="modal" id="modelEditModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<div style="flex: 1;">
|
||
<label style="display: block; margin-bottom: 5px;">Model Name</label>
|
||
<input type="text" id="editModelNameInput" class="name-input" style="margin: 0;" autocomplete="off"/>
|
||
</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Quality Positive</label>
|
||
<textarea id="editModelQualityPos"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Quality Negative</label>
|
||
<textarea id="editModelQualityNeg"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Embeddings Positive</label>
|
||
<input type="text" id="editModelEmbedPos" autocomplete="off">
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Embeddings Negative</label>
|
||
<input type="text" id="editModelEmbedNeg" autocomplete="off">
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="delete" onclick="deleteCurrentItem('model')">
|
||
Delete
|
||
</button>
|
||
<button onclick="hideEditModal('model')">Cancel</button>
|
||
<button class="save" onclick="saveItem('model')">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Style Edit Modal -->
|
||
<div class="modal" id="styleEditModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<div style="flex: 1;">
|
||
<label style="display: block; margin-bottom: 5px;">Style Name</label>
|
||
<input type="text" id="editStyleNameInput" class="name-input" style="margin: 0;" autocomplete="off"/>
|
||
</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Style Image</label>
|
||
<div style="display: flex; gap: 10px; align-items: center;">
|
||
<input type="file" id="editStyleImage" accept="image/*"
|
||
style="flex: 1;">
|
||
<button onclick="removeImage('style')" class="delete"
|
||
style="padding: 8px 12px;">
|
||
Remove
|
||
</button>
|
||
</div>
|
||
<div id="styleImagePreview"
|
||
style="margin-top: 10px; display: none;">
|
||
<img id="stylePreviewImg"
|
||
style="max-width: 200px; border-radius: 4px;">
|
||
</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Positive Tags</label>
|
||
<textarea id="editStylePos"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Negative Tags</label>
|
||
<textarea id="editStyleNeg"></textarea>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="delete" onclick="deleteCurrentItem('style')">
|
||
Delete
|
||
</button>
|
||
<button onclick="hideEditModal('style')">Cancel</button>
|
||
<button class="save" onclick="saveItem('style')">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tag Edit Modal -->
|
||
<div class="modal" id="tagEditModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<div style="flex: 1;">
|
||
<label style="display: block; margin-bottom: 5px;">
|
||
Trigger Tag
|
||
</label>
|
||
<input type="text" id="editTagNameInput" class="name-input" style="margin: 0;" placeholder="e.g., t-shirt" autocomplete="off"/>
|
||
</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Positive Tags (added when trigger is present)</label>
|
||
<textarea id="editTagPos"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Negative Tags (added when trigger is present)</label>
|
||
<textarea id="editTagNeg"></textarea>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="delete" onclick="deleteCurrentItem('tag')">
|
||
Delete
|
||
</button>
|
||
<button onclick="hideEditModal('tag')">Cancel</button>
|
||
<button class="save" onclick="saveItem('tag')">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="script.js"></script>
|
||
|
||
<!-- Autocomplete dropdown -->
|
||
<div class="autocomplete-dropdown" id="autocompleteDropdown"></div>
|
||
</body>
|
||
</html>
|