fix(preview): resolve CORS error when setting CivitAI remote media as preview

- Add new endpoint POST /api/lm/{prefix}/set-preview-from-url to handle
  remote image downloads server-side, avoiding CORS issues
- Use rewrite_preview_url() to download optimized smaller images (450px width)
- Use Downloader service for reliable downloads with retry logic and proxy support
- Update frontend to call new endpoint instead of fetching images in browser

fixes #837
This commit is contained in:
Will Miao
2026-03-02 13:21:18 +08:00
parent 8b924b1551
commit bde11b153f
6 changed files with 445 additions and 72 deletions

View File

@@ -527,17 +527,18 @@ function initSetPreviewHandlers(container) {
const response = await fetch(mediaElement.dataset.localSrc);
const blob = await response.blob();
const file = new File([blob], 'preview.jpg', { type: blob.type });
// Use the existing baseModelApi uploadPreview method with nsfw level
await apiClient.uploadPreview(modelFilePath, file, modelType, nsfwLevel);
await apiClient.uploadPreview(modelFilePath, file, nsfwLevel);
} else {
// We need to download the remote file first
const response = await fetch(mediaElement.src);
const blob = await response.blob();
const file = new File([blob], 'preview.jpg', { type: blob.type });
// Use the existing baseModelApi uploadPreview method with nsfw level
await apiClient.uploadPreview(modelFilePath, file, modelType, nsfwLevel);
// Remote file - send URL to backend to download (avoids CORS issues)
const imageUrl = mediaElement.src || mediaElement.dataset.remoteSrc;
if (!imageUrl) {
throw new Error('No image URL available');
}
// Use the new setPreviewFromUrl method
await apiClient.setPreviewFromUrl(modelFilePath, imageUrl, nsfwLevel);
}
} catch (error) {
console.error('Error setting preview:', error);