Civitai Explorer tab fails to load - JavaScript error on undefined URL split

[drockthedoc]

Description

Summary

The Civitai Explorer tab in sd-webui-ux loads to 100% but displays no content due to a JavaScript error when processing image URLs from the CivitAI API.

Environment

• Extension: sd-webui-ux (built-in with WebUI Forge)
• WebUI: Stable Diffusion WebUI UX Forge
• Browser: Chrome/Safari (any browser)
• OS: Linux/macOS

Steps to Reproduce

1. Enable Civitai Explorer in settings (uiux_enable_civitai_explorer: true)
2. Restart WebUI
3. Navigate to the Civitai Explorer tab
4. Tab loads progress bar to 100% but shows no content
5. Open browser console (F12) - see JavaScript error

Expected Behavior

Civitai Explorer tab should display models and images from CivitAI API.

Actual Behavior

Tab appears blank. Browser console shows:

Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at qi (index.js:60:8959)
    at Wi.d.createItemElement (index.js:60:14606)

Root Cause

File: javascript/src/utils/renderers.js (lines 354-355, 439-440)

The code assumes all CivitAI image URLs contain a width= parameter:

const img_parts = imageUrl.split('width=');
const img_file = img_parts[1].split('/')[1];  // ❌ Crashes if img_parts[1] is undefined

Some CivitAI URLs don't have the width= parameter, causing img_parts[1] to be undefined, which crashes when calling .split('/').

Proposed Fix

Add safety checks before attempting to split:

In javascript/src/utils/renderers.js at lines ~354-356 and ~439-441:

// Replace this:
const img_parts = imageUrl.split('width=');
const img_file = img_parts[1].split('/')[1];
imageUrl = img_parts[0]+'width=320/'+img_file;

// With this:
const img_parts = imageUrl.split('width=');
if (img_parts.length > 1 && img_parts[1].includes('/')) {
    const img_file = img_parts[1].split('/')[1];
    imageUrl = img_parts[0]+'width=320/'+img_file;
}
// Otherwise use imageUrl as-is

Verification

After applying the fix:

• ✅ Civitai Explorer tab loads successfully
• ✅ Models and images display correctly
• ✅ No JavaScript errors in console
• ✅ Full functionality restored

Additional Notes

The compiled file javascript/dist/index.js also needs to be rebuilt after fixing the source, or manually patched at the corresponding location.

Backend API endpoints are working correctly - verified with:

curl -X POST http://localhost:7860/sd_webui_ux/civitai_proxy/models \
  -H "Content-Type: application/json" \
  -d '{"limit": 5}'
# Returns 200 OK with valid data

The issue is purely in the frontend JavaScript rendering logic.

[anapnoe]

Thanks @drockthedoc
here is an alternative one line version
imageUrl = imageUrl.replace(/width=\d+//, 'width=320/') || imageUrl;