feat: add Profile Picture Management tab with manual crop, description editor
- profile_picture_manager.py:
- Add ORIGINAL_PATH constant; save full-res original before every crop
- Add skip_crop param to change_profile_picture() for manual crop workflow
- Add manual_crop(x,y,w,h) method with Discord avatar update + role color sync
- Add auto_crop_only() to re-run face-detection crop on stored original
- Add update_description() with Cheshire Cat declarative memory re-injection
- Add regenerate_description() via vision model
- Skip crop step if image is already at/below 512x512
- api.py:
- GET /profile-picture/image/original — serve full-res original (no-cache)
- GET /profile-picture/image/current — serve current cropped avatar (no-cache)
- POST /profile-picture/change-no-crop — acquire image, skip auto-crop
- POST /profile-picture/manual-crop — apply crop coords {x,y,width,height}
- POST /profile-picture/auto-crop — re-run intelligent crop on original
- POST /profile-picture/description — save freeform description + Cat inject
- POST /profile-picture/regenerate-description — re-generate via vision model
- GET /profile-picture/description — fetch current description text
- index.html:
- Add new tab11 '🖼️ Profile Picture Management'
- Remove PFP + role color sections from Actions tab (tab2)
- Add Cropper.js 1.6.2 via CDN for manual square crop
- Tab layout: action buttons, file upload, auto/manual crop toggle,
Cropper.js interface, side-by-side original/cropped previews,
role color management, freeform description editor, metadata box (bottom)
- Wire switchTab hook for tab11 → loadPfpTab()
- All new JS functions: pfpChangeDanbooru, pfpUploadCustom, pfpRestoreFallback,
pfpShowCropInterface, pfpApplyManualCrop, pfpApplyAutoCrop, pfpSaveDescription,
pfpRegenerateDescription, pfpRefreshPreviews, setCustomRoleColor, resetRoleColor
This commit is contained in:
@@ -4,6 +4,8 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Miku Control Panel</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
@@ -666,6 +668,76 @@
|
||||
.tab-button { font-size: 0.8rem; padding: 0.35rem 0.5rem; }
|
||||
h1 { font-size: 1.2rem; }
|
||||
}
|
||||
|
||||
/* Profile Picture Tab Styles */
|
||||
.pfp-preview-container {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin: 1.5rem 0;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pfp-preview-box {
|
||||
text-align: center;
|
||||
}
|
||||
.pfp-preview-box img {
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
border: 2px solid #444;
|
||||
border-radius: 8px;
|
||||
background: #1e1e1e;
|
||||
}
|
||||
.pfp-preview-box .label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #aaa;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.pfp-crop-container {
|
||||
max-width: 100%;
|
||||
max-height: 550px;
|
||||
background: #111;
|
||||
border: 2px solid #555;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.pfp-crop-container img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
.crop-mode-toggle {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
align-items: center;
|
||||
}
|
||||
.crop-mode-toggle label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
}
|
||||
.crop-mode-toggle input[type="radio"] {
|
||||
accent-color: #4CAF50;
|
||||
}
|
||||
.pfp-description-editor {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
background: #1e1e1e;
|
||||
color: #ddd;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
}
|
||||
.pfp-description-editor:focus {
|
||||
border-color: #61dafb;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -704,6 +776,7 @@
|
||||
<button class="tab-button" data-tab="tab7" onclick="switchTab('tab7')">💬 Chat with LLM</button>
|
||||
<button class="tab-button" data-tab="tab8" onclick="switchTab('tab8')">📞 Voice Call</button>
|
||||
<button class="tab-button" data-tab="tab9" onclick="switchTab('tab9')">🧠 Memories</button>
|
||||
<button class="tab-button" data-tab="tab11" onclick="switchTab('tab11')">🖼️ Profile Picture</button>
|
||||
<button class="tab-button" onclick="window.location.href='/static/system.html'">🎛️ System Settings</button>
|
||||
</div>
|
||||
|
||||
@@ -921,49 +994,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>🎨 Profile Picture</h3>
|
||||
<p style="font-size: 0.9rem; color: #aaa;">Change Miku's profile picture using Danbooru search or upload a custom image.</p>
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<button onclick="changeProfilePicture()">🎨 Change Profile Picture (Danbooru)</button>
|
||||
<button onclick="restoreFallbackPfp()">🔄 Restore Original Avatar</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label for="pfp-upload">Upload Custom Image:</label>
|
||||
<input type="file" id="pfp-upload" accept="image/*" style="margin-left: 0.5rem;">
|
||||
<button onclick="uploadCustomPfp()">📤 Upload & Apply</button>
|
||||
<div style="font-size: 0.8rem; color: #888; margin-top: 0.3rem; margin-left: 0.5rem;">
|
||||
💡 Supports static images (PNG, JPG) and animated GIFs<br>
|
||||
⚠️ Animated GIFs require Discord Nitro on the bot account
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pfp-status" style="margin-top: 0.5rem; font-size: 0.9rem; color: #61dafb;"></div>
|
||||
|
||||
<div id="pfp-metadata" style="margin-top: 1rem; background: #1e1e1e; padding: 0.5rem; border: 1px solid #333; display: none;">
|
||||
<h4 style="margin-top: 0;">Current Profile Picture Info:</h4>
|
||||
<pre id="pfp-metadata-content" style="margin: 0;"></pre>
|
||||
</div>
|
||||
|
||||
<!-- Role Color Management -->
|
||||
<div style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #333;">
|
||||
<h4>🎨 Role Color Management</h4>
|
||||
<p style="font-size: 0.9rem; color: #aaa;">Manually set Miku's role color or reset to fallback (#86cecb)</p>
|
||||
|
||||
<div style="margin-bottom: 1rem; display: flex; gap: 10px; align-items: end;">
|
||||
<div>
|
||||
<label for="role-color-hex">Hex Color:</label>
|
||||
<input type="text" id="role-color-hex" placeholder="#86cecb" maxlength="7" style="width: 100px; font-family: monospace;">
|
||||
</div>
|
||||
<button onclick="setCustomRoleColor()">🎨 Apply Color</button>
|
||||
<button onclick="resetRoleColor()">🔄 Reset to Fallback</button>
|
||||
</div>
|
||||
|
||||
<div id="role-color-status" style="margin-top: 0.5rem; font-size: 0.9rem; color: #61dafb;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<h3>Figurine DM Subscribers</h3>
|
||||
@@ -1740,6 +1771,113 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 11: Profile Picture Management -->
|
||||
<div id="tab11" class="tab-content">
|
||||
<div class="section">
|
||||
<h3>🖼️ Profile Picture Management</h3>
|
||||
<p style="font-size: 0.9rem; color: #aaa;">Change, crop, and manage Miku's profile picture. Edit descriptions and role colors.</p>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div style="margin-bottom: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
|
||||
<button onclick="pfpChangeDanbooru()">🎨 Change (Danbooru)</button>
|
||||
<button onclick="pfpRestoreFallback()">🔄 Restore Original Avatar</button>
|
||||
<button onclick="pfpRecrop()">✂️ Re-crop Current</button>
|
||||
</div>
|
||||
|
||||
<!-- Upload Section -->
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label for="pfp-tab-upload">Upload Custom Image:</label>
|
||||
<input type="file" id="pfp-tab-upload" accept="image/*" style="margin-left: 0.5rem;">
|
||||
<button onclick="pfpUploadCustom()">📤 Upload & Apply</button>
|
||||
<div style="font-size: 0.8rem; color: #888; margin-top: 0.3rem; margin-left: 0.5rem;">
|
||||
💡 Supports static images (PNG, JPG) and animated GIFs |
|
||||
⚠️ Animated GIFs require Discord Nitro on the bot account
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Crop Mode Toggle -->
|
||||
<div class="crop-mode-toggle">
|
||||
<span style="color: #61dafb; font-weight: bold;">Crop Mode:</span>
|
||||
<label>
|
||||
<input type="radio" name="pfp-crop-mode" value="auto" checked>
|
||||
🤖 Auto (face detection)
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="pfp-crop-mode" value="manual">
|
||||
✂️ Manual
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div id="pfp-tab-status" style="margin-top: 0.5rem; font-size: 0.9rem; color: #61dafb;"></div>
|
||||
|
||||
<!-- Manual Crop Interface (hidden by default) -->
|
||||
<div id="pfp-crop-section" style="display: none; margin: 1rem 0; padding: 1rem; background: #1a1a2e; border: 1px solid #444; border-radius: 8px;">
|
||||
<h4 style="margin-top: 0;">✂️ Manual Crop</h4>
|
||||
<p style="font-size: 0.85rem; color: #aaa; margin-bottom: 0.5rem;">
|
||||
Drag to select a square crop region. Discord avatars are displayed as circles, so keep the subject centered.
|
||||
</p>
|
||||
<div class="pfp-crop-container">
|
||||
<img id="pfp-crop-image" src="" alt="Crop source">
|
||||
</div>
|
||||
<div style="margin-top: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||
<button onclick="pfpApplyManualCrop()" style="background: #4CAF50; color: #fff; font-weight: bold;">✂️ Apply Crop</button>
|
||||
<button onclick="pfpApplyAutoCrop()">🤖 Use Auto Crop Instead</button>
|
||||
<button onclick="pfpHideCropInterface()" style="background: #666;">✖ Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Previews -->
|
||||
<div class="pfp-preview-container">
|
||||
<div class="pfp-preview-box">
|
||||
<span class="label">📷 Original (full resolution)</span>
|
||||
<img id="pfp-preview-original" src="" alt="Original" style="cursor: pointer;" onclick="pfpRecrop()" title="Click to re-crop">
|
||||
<div id="pfp-original-dims" style="font-size: 0.8rem; color: #666; margin-top: 0.3rem;"></div>
|
||||
</div>
|
||||
<div class="pfp-preview-box">
|
||||
<span class="label">🎯 Current Avatar (cropped)</span>
|
||||
<img id="pfp-preview-current" src="" alt="Current avatar" style="border-radius: 50%; max-width: 256px; max-height: 256px;">
|
||||
<div style="font-size: 0.8rem; color: #666; margin-top: 0.3rem;">512×512 · displayed as circle</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Role Color Management -->
|
||||
<div style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #333;">
|
||||
<h4>🎨 Role Color Management</h4>
|
||||
<p style="font-size: 0.9rem; color: #aaa;">Manually set Miku's role color or reset to fallback (#86cecb)</p>
|
||||
|
||||
<div style="margin-bottom: 1rem; display: flex; gap: 10px; align-items: end;">
|
||||
<div>
|
||||
<label for="pfp-tab-role-color-hex">Hex Color:</label>
|
||||
<input type="text" id="pfp-tab-role-color-hex" placeholder="#86cecb" maxlength="7" style="width: 100px; font-family: monospace;">
|
||||
</div>
|
||||
<button onclick="setCustomRoleColor()">🎨 Apply Color</button>
|
||||
<button onclick="resetRoleColor()">🔄 Reset to Fallback</button>
|
||||
</div>
|
||||
|
||||
<div id="pfp-tab-role-color-status" style="margin-top: 0.5rem; font-size: 0.9rem; color: #61dafb;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Description Editor -->
|
||||
<div style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #333;">
|
||||
<h4>📝 Profile Picture Description</h4>
|
||||
<p style="font-size: 0.9rem; color: #aaa;">Edit the description used for context when users ask about Miku's avatar. Saved to Cheshire Cat memory.</p>
|
||||
<textarea id="pfp-description-editor" class="pfp-description-editor" placeholder="Loading description..."></textarea>
|
||||
<div style="margin-top: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||
<button onclick="pfpSaveDescription()" style="background: #4CAF50; color: #fff;">💾 Save Description</button>
|
||||
<button onclick="pfpRegenerateDescription()">🔄 Re-generate (Vision Model)</button>
|
||||
</div>
|
||||
<div id="pfp-desc-status" style="margin-top: 0.5rem; font-size: 0.9rem; color: #61dafb;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Metadata (bottom) -->
|
||||
<div id="pfp-tab-metadata" style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #333; background: #1e1e1e; padding: 0.5rem; border: 1px solid #333; display: none;">
|
||||
<h4 style="margin-top: 0;">Current Profile Picture Info:</h4>
|
||||
<pre id="pfp-tab-metadata-content" style="margin: 0;"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1888,6 +2026,10 @@ function switchTab(tabId) {
|
||||
showTabLoading('tab10');
|
||||
loadDMUsers().finally(() => hideTabLoading('tab10'));
|
||||
}
|
||||
if (tabId === 'tab11') {
|
||||
console.log('🖼️ Loading Profile Picture tab');
|
||||
loadPfpTab();
|
||||
}
|
||||
}
|
||||
|
||||
function showTabLoading(tabId) {
|
||||
@@ -2187,22 +2329,9 @@ function displayServers() {
|
||||
}
|
||||
|
||||
async function loadProfilePictureMetadata() {
|
||||
try {
|
||||
const result = await apiCall('/profile-picture/metadata');
|
||||
|
||||
if (result.status === 'ok' && result.metadata) {
|
||||
const metadataDiv = document.getElementById('pfp-metadata');
|
||||
const metadataContent = document.getElementById('pfp-metadata-content');
|
||||
|
||||
metadataContent.textContent = JSON.stringify(result.metadata, null, 2);
|
||||
metadataDiv.style.display = 'block';
|
||||
|
||||
console.log('🎨 Loaded profile picture metadata:', result.metadata);
|
||||
} else {
|
||||
console.log('🎨 No profile picture metadata available');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('🎨 Failed to load profile picture metadata:', error);
|
||||
// Delegated to PFP tab loader — only runs if tab11 is active
|
||||
if (document.getElementById('tab11') && document.getElementById('tab11').classList.contains('active')) {
|
||||
await loadPfpTab();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3333,52 +3462,113 @@ async function triggerShareTweet() {
|
||||
}
|
||||
}
|
||||
|
||||
// Profile Picture Management
|
||||
async function changeProfilePicture() {
|
||||
const selectedServer = document.getElementById('server-select').value;
|
||||
const statusDiv = document.getElementById('pfp-status');
|
||||
const metadataDiv = document.getElementById('pfp-metadata');
|
||||
const metadataContent = document.getElementById('pfp-metadata-content');
|
||||
// ============================================================================
|
||||
// Profile Picture Tab (tab11) — Full Management
|
||||
// ============================================================================
|
||||
|
||||
let pfpCropper = null; // Cropper.js instance
|
||||
|
||||
function getPfpCropMode() {
|
||||
const radio = document.querySelector('input[name="pfp-crop-mode"]:checked');
|
||||
return radio ? radio.value : 'auto';
|
||||
}
|
||||
|
||||
function pfpSetStatus(text, color = '#61dafb') {
|
||||
const el = document.getElementById('pfp-tab-status');
|
||||
if (el) { el.textContent = text; el.style.color = color; }
|
||||
}
|
||||
|
||||
function pfpRefreshPreviews() {
|
||||
const t = Date.now();
|
||||
const origImg = document.getElementById('pfp-preview-original');
|
||||
const curImg = document.getElementById('pfp-preview-current');
|
||||
if (origImg) origImg.src = `/profile-picture/image/original?t=${t}`;
|
||||
if (curImg) curImg.src = `/profile-picture/image/current?t=${t}`;
|
||||
}
|
||||
|
||||
async function loadPfpTab() {
|
||||
// Load metadata
|
||||
try {
|
||||
const result = await apiCall('/profile-picture/metadata');
|
||||
if (result.status === 'ok' && result.metadata) {
|
||||
const metaDiv = document.getElementById('pfp-tab-metadata');
|
||||
const metaContent = document.getElementById('pfp-tab-metadata-content');
|
||||
metaContent.textContent = JSON.stringify(result.metadata, null, 2);
|
||||
metaDiv.style.display = 'block';
|
||||
|
||||
// Show original dimensions if available
|
||||
const dimsEl = document.getElementById('pfp-original-dims');
|
||||
if (dimsEl && result.metadata.original_width) {
|
||||
dimsEl.textContent = `${result.metadata.original_width}×${result.metadata.original_height}`;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load PFP metadata:', e);
|
||||
}
|
||||
|
||||
statusDiv.textContent = '⏳ Searching Danbooru and changing profile picture...';
|
||||
statusDiv.style.color = '#61dafb';
|
||||
// Load description
|
||||
try {
|
||||
const result = await apiCall('/profile-picture/description');
|
||||
if (result.status === 'ok') {
|
||||
document.getElementById('pfp-description-editor').value = result.description || '';
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load PFP description:', e);
|
||||
}
|
||||
|
||||
// Refresh preview images
|
||||
pfpRefreshPreviews();
|
||||
}
|
||||
|
||||
// --- Danbooru Change ---
|
||||
async function pfpChangeDanbooru() {
|
||||
const mode = getPfpCropMode();
|
||||
const selectedServer = document.getElementById('server-select').value;
|
||||
pfpSetStatus('⏳ Searching Danbooru...');
|
||||
|
||||
try {
|
||||
let endpoint = '/profile-picture/change';
|
||||
const endpoint = mode === 'manual' ? '/profile-picture/change-no-crop' : '/profile-picture/change';
|
||||
const params = new URLSearchParams();
|
||||
|
||||
// Add guild_id parameter if a specific server is selected
|
||||
if (selectedServer !== 'all') {
|
||||
params.append('guild_id', selectedServer);
|
||||
}
|
||||
|
||||
if (selectedServer !== 'all') params.append('guild_id', selectedServer);
|
||||
const url = params.toString() ? `${endpoint}?${params.toString()}` : endpoint;
|
||||
|
||||
const result = await apiCall(url, 'POST');
|
||||
|
||||
statusDiv.textContent = `✅ ${result.message}`;
|
||||
statusDiv.style.color = 'green';
|
||||
|
||||
// Display metadata if available
|
||||
if (result.metadata) {
|
||||
metadataContent.textContent = JSON.stringify(result.metadata, null, 2);
|
||||
metadataDiv.style.display = 'block';
|
||||
if (result.status === 'ok') {
|
||||
pfpSetStatus(`✅ ${result.message}`, 'green');
|
||||
showNotification('Profile picture changed!');
|
||||
|
||||
// Show metadata
|
||||
const metaDiv = document.getElementById('pfp-tab-metadata');
|
||||
const metaContent = document.getElementById('pfp-tab-metadata-content');
|
||||
if (result.metadata) {
|
||||
metaContent.textContent = JSON.stringify(result.metadata, null, 2);
|
||||
metaDiv.style.display = 'block';
|
||||
}
|
||||
|
||||
pfpRefreshPreviews();
|
||||
|
||||
// If manual mode, show crop interface
|
||||
if (mode === 'manual') {
|
||||
pfpShowCropInterface();
|
||||
}
|
||||
} else {
|
||||
throw new Error(result.message || 'Unknown error');
|
||||
}
|
||||
|
||||
showNotification('Profile picture changed successfully!');
|
||||
} catch (error) {
|
||||
console.error('Failed to change profile picture:', error);
|
||||
statusDiv.textContent = `❌ Error: ${error.message}`;
|
||||
statusDiv.style.color = 'red';
|
||||
console.error('PFP Danbooru error:', error);
|
||||
pfpSetStatus(`❌ Error: ${error.message}`, 'red');
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadCustomPfp() {
|
||||
const fileInput = document.getElementById('pfp-upload');
|
||||
// Keep old function names working (backwards compatibility for autonomous/API callers)
|
||||
async function changeProfilePicture() { await pfpChangeDanbooru(); }
|
||||
|
||||
// --- Custom Upload ---
|
||||
async function pfpUploadCustom() {
|
||||
const fileInput = document.getElementById('pfp-tab-upload');
|
||||
const mode = getPfpCropMode();
|
||||
const selectedServer = document.getElementById('server-select').value;
|
||||
const statusDiv = document.getElementById('pfp-status');
|
||||
const metadataDiv = document.getElementById('pfp-metadata');
|
||||
const metadataContent = document.getElementById('pfp-metadata-content');
|
||||
|
||||
if (!fileInput.files || fileInput.files.length === 0) {
|
||||
showNotification('Please select an image file first', 'error');
|
||||
@@ -3386,88 +3576,249 @@ async function uploadCustomPfp() {
|
||||
}
|
||||
|
||||
const file = fileInput.files[0];
|
||||
|
||||
// Validate file type
|
||||
if (!file.type.startsWith('image/')) {
|
||||
showNotification('Please select a valid image file', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
statusDiv.textContent = '⏳ Uploading and processing custom image...';
|
||||
statusDiv.style.color = '#61dafb';
|
||||
pfpSetStatus('⏳ Uploading and processing...');
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
// Add guild_id parameter if a specific server is selected
|
||||
let endpoint = '/profile-picture/change';
|
||||
if (selectedServer !== 'all') {
|
||||
endpoint += `?guild_id=${selectedServer}`;
|
||||
}
|
||||
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
const endpoint = mode === 'manual' ? '/profile-picture/change-no-crop' : '/profile-picture/change';
|
||||
let url = endpoint;
|
||||
if (selectedServer !== 'all') url += `?guild_id=${selectedServer}`;
|
||||
|
||||
const response = await fetch(url, { method: 'POST', body: formData });
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.status === 'ok') {
|
||||
statusDiv.textContent = `✅ ${result.message}`;
|
||||
statusDiv.style.color = 'green';
|
||||
|
||||
// Display metadata if available
|
||||
if (result.metadata) {
|
||||
metadataContent.textContent = JSON.stringify(result.metadata, null, 2);
|
||||
metadataDiv.style.display = 'block';
|
||||
}
|
||||
|
||||
// Clear file input
|
||||
pfpSetStatus(`✅ ${result.message}`, 'green');
|
||||
showNotification('Image uploaded successfully!');
|
||||
fileInput.value = '';
|
||||
|
||||
showNotification('Custom profile picture applied successfully!');
|
||||
if (result.metadata) {
|
||||
const metaDiv = document.getElementById('pfp-tab-metadata');
|
||||
const metaContent = document.getElementById('pfp-tab-metadata-content');
|
||||
metaContent.textContent = JSON.stringify(result.metadata, null, 2);
|
||||
metaDiv.style.display = 'block';
|
||||
}
|
||||
|
||||
pfpRefreshPreviews();
|
||||
|
||||
if (mode === 'manual') {
|
||||
pfpShowCropInterface();
|
||||
}
|
||||
} else {
|
||||
throw new Error(result.message || 'Failed to apply custom profile picture');
|
||||
throw new Error(result.message || 'Upload failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to upload custom profile picture:', error);
|
||||
statusDiv.textContent = `❌ Error: ${error.message}`;
|
||||
statusDiv.style.color = 'red';
|
||||
showNotification(error.message || 'Failed to upload custom profile picture', 'error');
|
||||
console.error('PFP upload error:', error);
|
||||
pfpSetStatus(`❌ Error: ${error.message}`, 'red');
|
||||
showNotification(error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function restoreFallbackPfp() {
|
||||
const statusDiv = document.getElementById('pfp-status');
|
||||
const metadataDiv = document.getElementById('pfp-metadata');
|
||||
// Keep old function name working
|
||||
async function uploadCustomPfp() { await pfpUploadCustom(); }
|
||||
|
||||
// --- Restore Fallback ---
|
||||
async function pfpRestoreFallback() {
|
||||
if (!confirm('Are you sure you want to restore the original fallback avatar?')) return;
|
||||
|
||||
if (!confirm('Are you sure you want to restore the original fallback avatar?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
statusDiv.textContent = '⏳ Restoring original avatar...';
|
||||
statusDiv.style.color = '#61dafb';
|
||||
pfpSetStatus('⏳ Restoring original avatar...');
|
||||
|
||||
try {
|
||||
const result = await apiCall('/profile-picture/restore-fallback', 'POST');
|
||||
|
||||
statusDiv.textContent = `✅ ${result.message}`;
|
||||
statusDiv.style.color = 'green';
|
||||
metadataDiv.style.display = 'none';
|
||||
|
||||
showNotification('Original avatar restored successfully!');
|
||||
pfpSetStatus(`✅ ${result.message}`, 'green');
|
||||
document.getElementById('pfp-tab-metadata').style.display = 'none';
|
||||
pfpRefreshPreviews();
|
||||
showNotification('Original avatar restored!');
|
||||
} catch (error) {
|
||||
console.error('Failed to restore fallback avatar:', error);
|
||||
statusDiv.textContent = `❌ Error: ${error.message}`;
|
||||
statusDiv.style.color = 'red';
|
||||
console.error('Restore fallback error:', error);
|
||||
pfpSetStatus(`❌ Error: ${error.message}`, 'red');
|
||||
}
|
||||
}
|
||||
|
||||
// Role Color Management
|
||||
async function restoreFallbackPfp() { await pfpRestoreFallback(); }
|
||||
|
||||
// --- Crop Interface ---
|
||||
function pfpShowCropInterface() {
|
||||
const section = document.getElementById('pfp-crop-section');
|
||||
const img = document.getElementById('pfp-crop-image');
|
||||
|
||||
// Destroy previous cropper if any
|
||||
if (pfpCropper) {
|
||||
pfpCropper.destroy();
|
||||
pfpCropper = null;
|
||||
}
|
||||
|
||||
// Load original image
|
||||
img.src = `/profile-picture/image/original?t=${Date.now()}`;
|
||||
section.style.display = 'block';
|
||||
|
||||
img.onload = function() {
|
||||
pfpCropper = new Cropper(img, {
|
||||
aspectRatio: 1,
|
||||
viewMode: 2,
|
||||
minCropBoxWidth: 64,
|
||||
minCropBoxHeight: 64,
|
||||
responsive: true,
|
||||
autoCropArea: 0.8,
|
||||
background: true,
|
||||
guides: true,
|
||||
center: true,
|
||||
highlight: true,
|
||||
cropBoxMovable: true,
|
||||
cropBoxResizable: true,
|
||||
toggleDragModeOnDblclick: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function pfpHideCropInterface() {
|
||||
if (pfpCropper) {
|
||||
pfpCropper.destroy();
|
||||
pfpCropper = null;
|
||||
}
|
||||
document.getElementById('pfp-crop-section').style.display = 'none';
|
||||
}
|
||||
|
||||
// Re-crop: open crop interface on stored original
|
||||
function pfpRecrop() {
|
||||
pfpShowCropInterface();
|
||||
}
|
||||
|
||||
async function pfpApplyManualCrop() {
|
||||
if (!pfpCropper) {
|
||||
showNotification('No crop region selected', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = pfpCropper.getData(true); // rounded integers
|
||||
pfpSetStatus('⏳ Applying manual crop...');
|
||||
|
||||
try {
|
||||
const response = await fetch('/profile-picture/manual-crop', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
x: Math.round(data.x),
|
||||
y: Math.round(data.y),
|
||||
width: Math.round(data.width),
|
||||
height: Math.round(data.height)
|
||||
})
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.status === 'ok') {
|
||||
pfpSetStatus(`✅ ${result.message}`, 'green');
|
||||
showNotification('Manual crop applied!');
|
||||
pfpHideCropInterface();
|
||||
pfpRefreshPreviews();
|
||||
|
||||
// Refresh metadata
|
||||
if (result.metadata) {
|
||||
const metaContent = document.getElementById('pfp-tab-metadata-content');
|
||||
const existing = metaContent.textContent ? JSON.parse(metaContent.textContent) : {};
|
||||
Object.assign(existing, result.metadata);
|
||||
metaContent.textContent = JSON.stringify(existing, null, 2);
|
||||
}
|
||||
} else {
|
||||
throw new Error(result.message || 'Crop failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Manual crop error:', error);
|
||||
pfpSetStatus(`❌ Error: ${error.message}`, 'red');
|
||||
}
|
||||
}
|
||||
|
||||
async function pfpApplyAutoCrop() {
|
||||
pfpSetStatus('⏳ Running auto-crop (face detection)...');
|
||||
|
||||
try {
|
||||
const result = await apiCall('/profile-picture/auto-crop', 'POST');
|
||||
|
||||
if (result.status === 'ok') {
|
||||
pfpSetStatus(`✅ ${result.message}`, 'green');
|
||||
showNotification('Auto-crop applied!');
|
||||
pfpHideCropInterface();
|
||||
pfpRefreshPreviews();
|
||||
} else {
|
||||
throw new Error(result.message || 'Auto-crop failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Auto-crop error:', error);
|
||||
pfpSetStatus(`❌ Error: ${error.message}`, 'red');
|
||||
}
|
||||
}
|
||||
|
||||
// --- Description ---
|
||||
async function pfpSaveDescription() {
|
||||
const descEl = document.getElementById('pfp-description-editor');
|
||||
const statusEl = document.getElementById('pfp-desc-status');
|
||||
const description = descEl.value.trim();
|
||||
|
||||
if (!description) {
|
||||
statusEl.textContent = '⚠️ Description cannot be empty';
|
||||
statusEl.style.color = 'orange';
|
||||
return;
|
||||
}
|
||||
|
||||
statusEl.textContent = '⏳ Saving description...';
|
||||
statusEl.style.color = '#61dafb';
|
||||
|
||||
try {
|
||||
const response = await fetch('/profile-picture/description', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ description })
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.status === 'ok') {
|
||||
statusEl.textContent = '✅ Description saved & injected into Cat memory';
|
||||
statusEl.style.color = 'green';
|
||||
showNotification('Description saved!');
|
||||
} else {
|
||||
throw new Error(result.message || 'Save failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Save description error:', error);
|
||||
statusEl.textContent = `❌ Error: ${error.message}`;
|
||||
statusEl.style.color = 'red';
|
||||
}
|
||||
}
|
||||
|
||||
async function pfpRegenerateDescription() {
|
||||
const statusEl = document.getElementById('pfp-desc-status');
|
||||
statusEl.textContent = '⏳ Regenerating description via vision model...';
|
||||
statusEl.style.color = '#61dafb';
|
||||
|
||||
try {
|
||||
const result = await apiCall('/profile-picture/regenerate-description', 'POST');
|
||||
|
||||
if (result.status === 'ok' && result.description) {
|
||||
document.getElementById('pfp-description-editor').value = result.description;
|
||||
statusEl.textContent = '✅ Description regenerated & saved';
|
||||
statusEl.style.color = 'green';
|
||||
showNotification('Description regenerated!');
|
||||
} else {
|
||||
throw new Error(result.message || 'Regeneration failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Regenerate description error:', error);
|
||||
statusEl.textContent = `❌ Error: ${error.message}`;
|
||||
statusEl.style.color = 'red';
|
||||
}
|
||||
}
|
||||
|
||||
// --- Role Color (updated element IDs for tab11) ---
|
||||
async function setCustomRoleColor() {
|
||||
const statusDiv = document.getElementById('role-color-status');
|
||||
const hexInput = document.getElementById('role-color-hex');
|
||||
const statusDiv = document.getElementById('pfp-tab-role-color-status');
|
||||
const hexInput = document.getElementById('pfp-tab-role-color-hex');
|
||||
const hexColor = hexInput.value.trim();
|
||||
|
||||
if (!hexColor) {
|
||||
@@ -3506,7 +3857,7 @@ async function setCustomRoleColor() {
|
||||
}
|
||||
|
||||
async function resetRoleColor() {
|
||||
const statusDiv = document.getElementById('role-color-status');
|
||||
const statusDiv = document.getElementById('pfp-tab-role-color-status');
|
||||
|
||||
statusDiv.textContent = '⏳ Resetting to fallback color...';
|
||||
statusDiv.style.color = '#61dafb';
|
||||
@@ -3517,8 +3868,7 @@ async function resetRoleColor() {
|
||||
statusDiv.textContent = `✅ ${result.message}`;
|
||||
statusDiv.style.color = 'green';
|
||||
|
||||
// Update the input to show fallback color
|
||||
document.getElementById('role-color-hex').value = '#86cecb';
|
||||
document.getElementById('pfp-tab-role-color-hex').value = '#86cecb';
|
||||
|
||||
showNotification('Role color reset to fallback #86cecb');
|
||||
} catch (error) {
|
||||
|
||||
Reference in New Issue
Block a user