miku-discord/bot/static/js/image-gen.js

// ============================================================================
// Miku Control Panel — Image Generation Module
// ============================================================================

async function checkImageSystemStatus() {
  try {
    const statusDisplay = document.getElementById('image-status-display');
    statusDisplay.innerHTML = '🔄 Checking system status...';

    const result = await apiCall('/image/status');

    const workflowStatus = result.workflow_template_exists ? '✅ Found' : '❌ Missing';
    const comfyuiStatus = result.comfyui_running ? '✅ Running' : '❌ Not running';

    statusDisplay.innerHTML = `
<strong>System Status:</strong>
• Workflow Template (Miku_BasicWorkflow.json): ${workflowStatus}
• ComfyUI Server: ${comfyuiStatus}
${result.comfyui_running ? `• Detected ComfyUI URL: ${result.comfyui_url}` : ''}

<strong>Overall Status:</strong> ${result.ready ? '✅ Ready for image generation' : '⚠️ Setup required'}

${!result.workflow_template_exists ? '⚠️ Place Miku_BasicWorkflow.json in bot directory\n' : ''}${!result.comfyui_running ? '⚠️ Start ComfyUI server on localhost:8188 (bot will auto-detect correct URL)\n' : ''}`;
  } catch (error) {
    console.error('Failed to check image system status:', error);
    document.getElementById('image-status-display').innerHTML = `❌ Error: ${error.message}`;
  }
}

async function testImageDetection() {
  const message = document.getElementById('detection-test-message').value.trim();
  const resultsDiv = document.getElementById('detection-test-results');

  if (!message) {
    resultsDiv.innerHTML = '❌ Please enter a test message';
    resultsDiv.style.color = 'red';
    return;
  }

  try {
    resultsDiv.innerHTML = '🔍 Testing detection...';
    resultsDiv.style.color = '#4CAF50';

    const result = await apiCall('/image/test-detection', 'POST', { message: message });

    const detectionIcon = result.is_image_request ? '✅' : '❌';
    const detectionText = result.is_image_request ? 'WILL trigger image generation' : 'will NOT trigger image generation';

    resultsDiv.innerHTML = `
<strong>Detection Result:</strong> ${detectionIcon} This message ${detectionText}
${result.is_image_request ? `<br><strong>Extracted Prompt:</strong> "${result.extracted_prompt}"` : ''}
<br><strong>Original Message:</strong> "${result.original_message}"`;

    resultsDiv.style.color = result.is_image_request ? '#4CAF50' : '#ff9800';
  } catch (error) {
    console.error('Failed to test image detection:', error);
    resultsDiv.innerHTML = `❌ Error: ${error.message}`;
    resultsDiv.style.color = 'red';
  }
}

async function generateManualImage() {
  const prompt = document.getElementById('manual-image-prompt').value.trim();
  const statusDiv = document.getElementById('manual-image-status');
  const previewDiv = document.getElementById('manual-image-preview');

  if (!prompt) {
    statusDiv.innerHTML = '❌ Please enter an image prompt';
    statusDiv.style.color = 'red';
    return;
  }

  try {
    previewDiv.innerHTML = '';

    statusDiv.innerHTML = '🎨 Generating image... This may take a few minutes.';
    statusDiv.style.color = '#4CAF50';

    const result = await apiCall('/image/generate', 'POST', { prompt: prompt });

    statusDiv.innerHTML = `✅ Image generated successfully!`;
    statusDiv.style.color = '#4CAF50';

    if (result.image_path) {
      const filename = result.image_path.split('/').pop();
      const imageUrl = `/image/view/${encodeURIComponent(filename)}`;

      const imgContainer = document.createElement('div');
      imgContainer.style.cssText = 'background: #1e1e1e; padding: 1rem; border-radius: 8px; border: 1px solid #333;';

      const img = document.createElement('img');
      img.src = imageUrl;
      img.alt = 'Generated Image';
      img.style.cssText = 'max-width: 100%; max-height: 600px; border-radius: 4px; display: block; margin: 0 auto;';

      img.onload = function() {
        console.log('Image loaded successfully:', imageUrl);
      };

      img.onerror = function() {
        console.error('Failed to load image:', imageUrl);
        imgContainer.innerHTML = `
          <div style="color: #f44336; padding: 1rem; text-align: center;">
            ❌ Failed to load image<br>
            <span style="font-size: 0.85rem;">Path: ${result.image_path}</span><br>
            <span style="font-size: 0.85rem;">URL: ${imageUrl}</span>
          </div>
        `;
      };

      imgContainer.appendChild(img);

      const pathInfo = document.createElement('div');
      pathInfo.style.cssText = 'margin-top: 0.5rem; color: #aaa; font-size: 0.85rem; text-align: center;';
      pathInfo.innerHTML = `<strong>File:</strong> ${filename}`;
      imgContainer.appendChild(pathInfo);

      previewDiv.appendChild(imgContainer);
    }

    document.getElementById('manual-image-prompt').value = '';
  } catch (error) {
    console.error('Failed to generate image:', error);
    statusDiv.innerHTML = `❌ Error: ${error.message}`;
    statusDiv.style.color = 'red';
  }
}