nodes/jammyfu-ComfyUI_PaintingCoderUtils
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix index.html

Browse Source
This commit is contained in:
jammyfu
2025-01-24 07:15:57 +08:00
parent 873cfd8124
commit d90281214a
1 changed files with 139 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.html
+139 -92
View File
@@ -1,10 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="PaintingCoder Utils - 一个为 ComfyUI 设计的实用节点集合，包含图像处理、文本处理、路径转换等多种功能。支持工作流修复、命名空间更新和跨平台路径转换。">
<meta name="keywords" content="ComfyUI, PaintingCoder, Workflow, JSON, Path Converter, AI, Stable Diffusion, Image Processing, Text Processing, SDXL">
<meta name="description"
content="PaintingCoder Utils - 一个为 ComfyUI 设计的实用节点集合，包含图像处理、文本处理、路径转换等多种功能。支持工作流修复、命名空间更新和跨平台路径转换。">
<meta name="keywords"
content="ComfyUI, PaintingCoder, Workflow, JSON, Path Converter, AI, Stable Diffusion, Image Processing, Text Processing, SDXL">
<meta name="author" content="PaintingCoder">
<meta property="og:title" content="PaintingCoder Workflow Fixer">
<meta property="og:description" content="强大的 ComfyUI 工具集，提供图像分辨率调整、文本处理、动态组合等功能，支持工作流修复和路径转换。">
@@ -35,28 +38,52 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh; /* 使用 min-height 确保内容足够时也能撑开 */
justify-content: flex-start;
/* 顶部对齐 */
min-height: 120vh;
/* 增加页面高度 */
margin: 0;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
position: relative; /* 为 fixed 定位提供相对定位的父元素 */
position: relative;
/* 为 fixed 定位提供相对定位的父元素 */
padding-top: 60px;
/* 预留顶部浮动面板空间 */
}
.loader-container {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px 20px;
border-radius: 5px;
z-index: 1000;
display: flex;
align-items: center;
gap: 10px;
}
.loader {
border: 4px solid var(--loader-bg);
border-top: 4px solid var(--loader-accent);
border-radius: 50%;
width: 40px;
height: 40px;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.message {
@@ -93,72 +120,52 @@
opacity: 0.9;
line-height: 1.5;
}
.category {
margin: 25px 0;
text-align: left;
max-width: 800px;
padding: 0 20px;
}
.category h3 {
color: var(--text-color);
margin-bottom: 10px;
}
.content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.8;
}
.title {
font-size: 2em;
margin-bottom: 1em;
text-align: center;
color: var(--text-color);
}
.section {
margin: 2em 0;
padding: 1em;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
}
.highlight {
color: var(--loader-accent);
font-weight: bold;
}
.countdown-container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 15px 30px;
background: rgba(0, 0, 0, 0.7);
border-radius: 30px;
max-width: fit-content;
position: fixed; /* 固定定位 */
bottom: 20px; /* 距离底部 20px */
left: 50%; /* 水平居中 */
transform: translateX(-50%); /* 水平居中 */
z-index: 1000; /* 确保在最顶层 */
}
.countdown-text {
color: white;
font-size: 1.1em;
}
.button-group {
display: flex;
gap: 15px;
}
.redirect-btn, .cancel-btn {
.redirect-btn,
.cancel-btn {
padding: 8px 20px;
border: none;
border-radius: 5px;
@@ -166,21 +173,22 @@
transition: opacity 0.3s;
font-size: 1em;
}
.redirect-btn {
background: var(--loader-accent);
color: white;
}
.cancel-btn {
background: #666;
color: white;
}
.redirect-btn:hover, .cancel-btn:hover {
.redirect-btn:hover,
.cancel-btn:hover {
opacity: 0.8;
}
.message-box {
position: fixed;
bottom: 20px;
@@ -196,6 +204,11 @@
<script>
// 检测浏览器语言
function detectLanguage() {
const urlParams = new URLSearchParams(window.location.search);
const langParam = urlParams.get('lang');
if (langParam) {
return langParam.toLowerCase();
}
const lang = navigator.language || navigator.userLanguage;
return lang.toLowerCase().startsWith('zh') ? 'zh' : 'en';
}
@@ -207,8 +220,10 @@
manual: "If not redirected automatically, click",
here: "here",
description: "PaintingCoder Utils is a comprehensive toolkit for ComfyUI, featuring advanced image processing, text handling, and workflow management tools. Perfect for artists and developers working with AI image generation.",
countdown: "Redirecting to Workflow Fixer in {0}s",
countdown: "Redirecting in {0}s...",
redirectCanceled: "Redirect canceled",
immediateRedirect: "Redirect Now to Workflow Fixer",
cancelRedirect: "Cancel",
mainContent: `
<h1 class="title">🚀 Unleash Your AI Art Potential with ComfyUI Programmer's Toolkit!</h1>
@@ -217,6 +232,13 @@
<p>This powerful toolkit, crafted by a programmer who loves painting, brings you unprecedented convenience and efficiency. It's not just a set of nodes, but a complete AI art creation ecosystem designed to simplify your workflow and spark your unlimited creativity.</p>
</div>
<div class="section">
<h2>🔧 ComfyUI Workflow Fixer Tool:</h2>
<p>We provide a powerful workflow fixer tool to help you easily fix old version (<0.3.0) workflow JSON files. By adding the PaintingCoder namespace to node types, we ensure your workflows run smoothly in the latest version.</p>
<p>Additionally, our tool supports path separator conversion, making it easy to switch workflow file formats between Windows and Unix (Linux/Mac) systems.</p>
<p>The usage is simple: just select the workflow files you need to fix, choose the fix type, and click the fix button. It supports batch processing and ZIP download, greatly improving your work efficiency.</p>
</div>
<div class="section">
<h2>🎨 Image Processing, At Your Command:</h2>
@@ -243,11 +265,6 @@
<p>We continuously update and improve our toolkit, bringing you more powerful features and smoother experiences. We are committed to creating a toolkit truly tailored for AI artists and developers.</p>
</div>
<div class="section">
<h2>🔥 Join Now, Start Your AI Art Creation Journey!</h2>
<p>Whether you're an experienced artist or a beginner developer, ComfyUI Programmer's Toolkit can help you improve creation efficiency and inspire unlimited imagination. Join us now and explore the infinite possibilities of AI art together!</p>
</div>
<div class="section">
<h2>Core Highlights:</h2>
<ul>
@@ -265,16 +282,26 @@
manual: "如果没有自动跳转，请点击",
here: "这里",
description: "PaintingCoder Utils 是一个综合性的 ComfyUI 工具集，提供先进的图像处理、文本处理和工作流管理工具。专为使用 AI 图像生成的艺术家和开发者设计。",
countdown: "将在 {0} 秒后跳转到工作流修复工具",
countdown: "将在 {0} 秒后跳转...",
redirectCanceled: "已取消跳转",
immediateRedirect: "立即跳转到工作流修复工具",
cancelRedirect: "取消",
mainContent: `
<h1 class="title">🚀 释放你的 AI 艺术潜能，尽在 ComfyUI 画画的程序员工具集！</h1>
<div class="section">
<p>厌倦了繁琐的图像和文本处理？渴望更高效、更灵活的 AI 艺术创作流程？ComfyUI 画画的程序员工具集，正是你梦寐以求的解决方案！</p>
<p>这个由一位热爱绘画的程序员精心打造的强大工具集，为你带来前所未有的便捷和效率。它不仅仅是一组节点，更是一套完整的 AI 艺术创作生态系统，旨在简化你的工作流程，激发你的无限创意。</p>
</div>
<div class="section">
<h2>🔧 ComfyUI工作流修复工具：</h2>
<p>我们提供强大的工作流修复工具，帮助你轻松修复旧版本 (<0.3.0) 的工作流 JSON 文件。通过添加 PaintingCoder 命名空间到节点类型，确保你的工作流在最新版本中正常运行。</p>
<p>此外，我们的工具还支持路径分隔符转换，方便你在 Windows 和 Unix（Linux/Mac）系统之间切换工作流文件格式。</p>
<p>使用方法简单，只需选择需要修复的工作流文件，选择修复类型，然后点击修复按钮即可。支持批量处理和 ZIP 下载，极大提高你的工作效率。</p>
</div>
<div class="section">
<h2>🎨 图像处理，随心所欲：</h2>
@@ -301,11 +328,6 @@
<p>我们不断更新和完善工具集，为你带来更多强大的功能和更流畅的体验。我们致力于打造一个真正为 AI 艺术家和开发者量身定制的工具集。</p>
</div>
<div class="section">
<h2>🔥 立即加入，开启你的 AI 艺术创作之旅！</h2>
<p>无论你是经验丰富的艺术家，还是刚刚入门的开发者，ComfyUI 画画的程序员工具集都能帮助你提升创作效率，激发无限灵感。现在就加入我们，一起探索 AI 艺术的无限可能！</p>
</div>
<div class="section">
<h2>核心亮点：</h2>
<ul>
@@ -322,80 +344,105 @@
let countdownTimer;
let remainingTime = 10;
let lang;
let t;
let isRedirectCanceled = false; // 添加一个标志位
function startCountdown() {
remainingTime = 10;
updateCountdown();
countdownTimer = setInterval(() => {
remainingTime--;
updateCountdown();
if (remainingTime <= 0) {
clearInterval(countdownTimer);
redirectToFixer();
}
}, 1000);
}
function updateCountdown() {
const countdownElement = document.getElementById('countdown');
const t = translations[detectLanguage()];
countdownElement.textContent = t.countdown.replace('{0}', remainingTime);
}
function redirectToFixer() {
const lang = detectLanguage();
window.location.href = `fix/workflow_fixer.html?lang=${lang}`;
}
function cancelRedirect() {
clearInterval(countdownTimer);
isRedirectCanceled = true; // 设置取消标志位
const messageBox = document.getElementById('messageBox');
const t = translations[detectLanguage()];
messageBox.textContent = t.redirectCanceled;
messageBox.style.display = 'block';
setTimeout(() => {
messageBox.style.display = 'none';
}, 3000);
document.getElementById('countdownContainer').style.display = 'none';
// 更新按钮状态
const redirectButton = document.getElementById('redirect-btn');
redirectButton.textContent = t.immediateRedirect;
redirectButton.onclick = redirectToFixer; // 修改点击事件
const cancelButton = document.getElementById('cancel-btn');
cancelButton.style.display = 'none'; // 隐藏取消按钮
// 隐藏倒计时
document.getElementById('countdown').style.display = 'none';
// 隐藏 loading 图标
document.querySelector('.loader').style.display = 'none';
}
window.onload = function() {
const lang = detectLanguage();
const t = translations[lang];
window.onload = function () {
lang = detectLanguage();
t = translations[lang];
// 更新页面文本
document.title = `PaintingCoder Utils - ${t.title}`;
document.querySelector('.message h2').textContent = t.title;
document.querySelector('.message p').innerHTML =
`${t.manual} <a href="fix/workflow_fixer.html?lang=${lang}" class="manual-link">${t.here}</a>`;
document.querySelector('.description').textContent = t.description;
// document.querySelector('.description').textContent = t.description;
// 更新页面内容
document.getElementById('mainContent').innerHTML = t.mainContent;
// 更新手动跳转链接
const manualLink = document.querySelector('.manual-link');
if (manualLink) {
manualLink.href = `fix/workflow_fixer.html?lang=${lang}`;
}
// 更新按钮文字
const redirectButton = document.getElementById('redirect-btn');
redirectButton.textContent = t.immediateRedirect;
const cancelButton = document.getElementById('cancel-btn');
cancelButton.textContent = t.cancelRedirect;
startCountdown();
updateCountdown(); // 立即更新一次倒计时
}
</script>
</head>
<body>
<div class="message">
<h2></h2>
<p></p>
</div>
<div class="loader"></div>
<div class="content" id="mainContent"></div>
<div class="description"></div>
<ul class="features"></ul>
<div class="countdown-container" id="countdownContainer">
<span class="countdown-text" id="countdown"></span>
<div class="loader-container">
<div class="loader"></div>
<span id="countdown"></span>
<div class="button-group">
<button class="redirect-btn" onclick="redirectToFixer()">立即跳转</button>
<button class="cancel-btn" onclick="cancelRedirect()">取消跳转</button>
<button class="redirect-btn" id="redirect-btn" onclick="redirectToFixer()"></button>
<button class="cancel-btn" id="cancel-btn" onclick="cancelRedirect()"></button>
</div>
</div>
<div class="content" id="mainContent"></div>
<ul class="features"></ul>
<div class="message-box" id="messageBox"></div>
<!-- 页脚 -->
<footer style="text-align: center; padding: 20px; margin-top: 30px; border-top: 1px solid var(--border-color);">
<p style="margin-bottom: 5px;">© 2025 jammyfu. All rights reserved.</p>
</footer>
</body>
</html>
</html>