Enhance image loading strategy in modal and add security-related meta tags for improved performance and safety

This commit is contained in:
Will Miao
2025-01-31 16:52:14 +08:00
parent 57a4694f28
commit decaf7759c
2 changed files with 25 additions and 2 deletions

View File

@@ -193,11 +193,26 @@ function showLoraModal(lora) {
const escapedWords = lora.trainedWords?.length ?
lora.trainedWords.join(', ').toUpperCase().replace(/'/g, '\\\'') : '';
// 添加图片加载策略
const imageMarkup = lora.images.map(img => {
if (img.type === 'video') {
return `<video controls autoplay muted loop crossorigin="anonymous" referrerpolicy="no-referrer">
<source src="${img.url}" type="video/mp4">
Your browser does not support the video tag.
</video>`;
} else {
return `<img src="${img.url}" alt="Preview"
crossorigin="anonymous"
referrerpolicy="no-referrer"
loading="lazy">`;
}
}).join('');
const content = `
<div class="modal-content">
<h2>${lora.model.name}</h2>
<div class="carousel">
${lora.images.map(img => img.type === 'video' ? `<video controls autoplay muted loop><source src="${img.url}" type="video/mp4">Your browser does not support the video tag.</video>` : `<img src="${img.url}" alt="Preview">`).join('')}
${imageMarkup}
</div>
<div class="description">About this version: ${lora.description ? lora.description : 'N/A'}</div>
<div class="trigger-words">

View File

@@ -4,7 +4,7 @@
<title>LoRA Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/loras_static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="icon" type="image/png" sizes="32x32" href="/loras_static/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/loras_static/images/favicon-16x16.png">
<link rel="manifest" href="/loras_static/images/site.webmanifest">
@@ -24,6 +24,14 @@
performance.measure('page-load', 'page-start', 'page-end');
});
</script>
<!-- 添加安全相关的 meta 标签 -->
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
<!-- 添加资源加载策略 -->
<link rel="preconnect" href="https://civitai.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
</head>
<body>
<div class="theme-toggle" onclick="toggleTheme()">