Skip to content

Commit b5fd8b0

Browse files
new-sankakunew-sankaku
committed
レイヤ上下、選択解除のショートカット追加、マニュアルHtmlのデザイン統一
1 parent 16b7f9a commit b5fd8b0

File tree

11 files changed

+1832
-3459
lines changed

11 files changed

+1832
-3459
lines changed

‎html/API_Help/comfyui_settings.html‎

Lines changed: 82 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -2,206 +2,169 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title data-i18n="title">Comfyui API Setup Guide</title>
7-
<style>
8-
body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f8f8f8;}
9-
.header{background-color:#d8d0c9;color:#5c534d;padding:5px 0;text-align:center;}
10-
.btn-group{margin:15px 0;display:flex;justify-content:center;flex-wrap:wrap;}
11-
.btn-group button{background-color:#e9e4e0;color:#5c534d;border:none;padding:8px 15px;margin:5px;border-radius:4px;cursor:pointer;transition:all 0.3s;}
12-
.btn-group button:hover{background-color:#d8d0c9;}
13-
.btn-group button.active{background-color:#c5bcb5;}
14-
.container{width:90%;max-width:1200px;margin:20px auto;padding:20px;background:#fff;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,0.05);}
15-
.tab-menu{display:flex;background-color:#f9f9f9;border-radius:8px 8px 0 0;overflow:hidden;margin-bottom:20px;}
16-
.tab-btn{flex:1;padding:12px 15px;text-align:center;background-color:#f9f9f9;border:none;cursor:pointer;transition:all 0.3s;font-weight:bold;}
17-
.tab-btn:hover{background-color:#e8e8e8;}
18-
.tab-btn.active{background-color:#e9e4e0;color:#5c534d;}
19-
.tab-content{display:none;animation:fadeIn 0.5s;}
20-
.tab-content.active{display:block;}
21-
img{max-width:100%;height:auto;margin:15px 0;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.05);}
22-
h1,h2,h3{color:#5c534d;}
23-
p,li{font-size:16px;color:#666;line-height:1.6;}
24-
code{display:block;background-color:#f8f8f8;padding:15px;border-radius:5px;font-family:monospace;margin:15px 0;overflow-x:auto;border-left:4px solid #d8d0c9;}
25-
hr{border:0;height:1px;background:#eee;margin:25px 0;}
26-
.image-container{display:flex;flex-wrap:wrap;gap:20px;margin:20px 0;}
27-
.image-container img{flex:1;min-width:250px;max-width:45%;object-fit:cover;}
28-
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
29-
@media (max-width:768px){
30-
.tab-menu{flex-direction:column;}
31-
.image-container img{max-width:100%;}
32-
}
33-
</style>
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<title data-i18n="title">ComfyUI API Setup</title>
7+
<link rel="stylesheet" href="../common.css">
348
<script src="../../third/i18next/i18next.min.js"></script>
359
</head>
3610
<body>
37-
<div class="header">
38-
<h2 data-i18n="title">Comfyui API Setup Guide</h2>
39-
</div>
40-
41-
<div class="btn-group" role="group" aria-label="Language switcher">
42-
<button type="button" class="btn btn-primary" onclick="changeLanguage('en')">English</button>
43-
<button type="button" class="btn btn-secondary" onclick="changeLanguage('ja')">日本語</button>
44-
<button type="button" class="btn btn-secondary" onclick="changeLanguage('ko')">한국어</button>
45-
<button type="button" class="btn btn-secondary" onclick="changeLanguage('zh')">中文</button>
46-
<button type="button" class="btn btn-secondary" onclick="changeLanguage('fr')">Français</button>
11+
<div class="container">
12+
<div class="lang-buttons">
13+
<button class="lang-btn active" onclick="changeLanguage('en')">English</button>
14+
<button class="lang-btn" onclick="changeLanguage('ja')">日本語</button>
15+
<button class="lang-btn" onclick="changeLanguage('ko')">한국어</button>
16+
<button class="lang-btn" onclick="changeLanguage('zh')">中文</button>
17+
<button class="lang-btn" onclick="changeLanguage('fr')">Français</button>
4718
</div>
4819

49-
<div class="container">
50-
<p data-i18n="intro">This guide explains how to set up the Comfyui API.</p>
20+
<h1 data-i18n="title">ComfyUI API Setup Guide</h1>
21+
<p data-i18n="intro"></p>
5122

5223
<div class="tab-menu">
53-
<button class="tab-btn active" onclick="openTab(event, 'api-config')">ComfyUI</button>
54-
<button class="tab-btn" onclick="openTab(event, 'stability-matrix')">ComfyUI Stability Matrix</button>
55-
<button class="tab-btn" onclick="openTab(event, 'pinokio')">ComfyUI Pinokio</button>
24+
<button class="tab-btn active" onclick="openTab(event,'comfyui')">ComfyUI</button>
25+
<button class="tab-btn" onclick="openTab(event,'stability')">Stability Matrix</button>
26+
<button class="tab-btn" onclick="openTab(event,'pinokio')">Pinokio</button>
5627
</div>
5728

58-
<div id="api-config" class="tab-content active">
59-
<h2 data-i18n="config_steps">API Configuration Steps</h2>
60-
<p data-i18n="config_file_edit">Edit 'run_nvidia_gpu.bat' file in the Comfyui folder to set environment variables.</p>
61-
<p data-i18n="example_config">The configuration file is as follows</p>
62-
<img src="Comfyui_API_settings.jpg" alt="webui-user.bat settings example" style="border:2px solid #e8e8e8; max-width:80%;">
63-
64-
<h3 data-i18n="env_variables">Environment Variables to Set</h3>
65-
<code data-i18n="simple_code">--enable-cors-header</code>
29+
<div id="comfyui" class="tab-content active">
30+
<div class="card">
31+
<h2 data-i18n="config_steps"></h2>
32+
<p data-i18n="config_file_edit"></p>
33+
<p data-i18n="example_config"></p>
34+
<div class="img-container">
35+
<img src="Comfyui_API_settings.jpg" alt="ComfyUI settings">
36+
</div>
37+
<h3 data-i18n="env_variables"></h3>
38+
<code>--enable-cors-header</code>
39+
</div>
6640
</div>
6741

68-
<div id="stability-matrix" class="tab-content">
42+
<div id="stability" class="tab-content">
43+
<div class="card">
6944
<h2>Stability Matrix</h2>
70-
<p data-i18n="cors_note">Note: When launching from Stability Matrix, set this in Extra Launch Arguments.</p>
71-
<img src="StablityMatrixComfyUI.jpg" alt="Stability Matrix settings" style="border:2px solid #e8e8e8; max-width:45%;">
72-
<h3 data-i18n="env_variables">Environment Variables to Set</h3>
73-
<code data-i18n="simple_code">--enable-cors-header</code>
45+
<p class="notice" data-i18n="cors_note"></p>
46+
<div class="img-container">
47+
<img src="StablityMatrixComfyUI.jpg" alt="Stability Matrix">
48+
</div>
49+
<h3 data-i18n="env_variables"></h3>
50+
<code>--enable-cors-header</code>
51+
</div>
7452
</div>
7553

7654
<div id="pinokio" class="tab-content">
55+
<div class="card">
7756
<h2>Pinokio</h2>
78-
<p data-i18n="pinokio_edit">Pinokioではstart.jsを編集して--enable-cors-headerを追加します。</p>
79-
<p data-i18n="pinokio_open">Files -> api -> comfy.git -> start.jsを開きます。</p>
80-
<img src="pinokio_file.png" alt="Stability Matrix settings" style="border:2px solid #e8e8e8; max-width:75%;">
81-
<br>
82-
<img src="pinokio_file_mod.png" alt="Stability Matrix settings" style="border:2px solid #e8e8e8; max-width:95%;">
83-
84-
<h3 data-i18n="env_variables">Environment Variables to Set</h3>
85-
<code data-i18n="simple_code">--enable-cors-header</code>
86-
57+
<p data-i18n="pinokio_edit"></p>
58+
<p data-i18n="pinokio_open"></p>
59+
<div class="img-container">
60+
<img src="pinokio_file.png" alt="Pinokio file">
61+
</div>
62+
<div class="img-container">
63+
<img src="pinokio_file_mod.png" alt="Pinokio modification">
64+
</div>
65+
<h3 data-i18n="env_variables"></h3>
66+
<code>--enable-cors-header</code>
67+
</div>
8768
</div>
88-
8969
</div>
9070

9171
<script>
9272
const resources = {
9373
en: {
9474
translation: {
95-
"title": "Comfyui API Setup Guide",
96-
"header": "How to Configure Comfyui API",
97-
"intro": "This guide explains how to set up the Comfyui API.",
75+
"title": "ComfyUI API Setup Guide",
76+
"intro": "This guide explains how to set up the ComfyUI API.",
9877
"config_steps": "API Configuration Steps",
99-
"config_file_edit": "Edit 'run_nvidia_gpu.bat' file in the Comfyui folder to set environment variables.",
78+
"config_file_edit": "Edit 'run_nvidia_gpu.bat' file in the ComfyUI folder to set environment variables.",
10079
"example_config": "The configuration file is as follows",
101-
"env_variables": "Environment Variables to Set",
102-
"simple_code": "--enable-cors-header",
80+
"env_variables": "Environment Variables",
10381
"cors_note": "Note: When launching from Stability Matrix, set this in Extra Launch Arguments.",
10482
"pinokio_edit": "In Pinokio, edit start.js to add --enable-cors-header",
10583
"pinokio_open": "Open Files -> api -> comfy.git -> start.js"
10684
}
10785
},
10886
ja: {
10987
translation: {
110-
"title": "Comfyui API セットアップガイド",
111-
"header": "Comfyui APIの設定方法",
112-
"intro": "このガイドではComfyui APIの設定方法を説明します。",
88+
"title": "ComfyUI API セットアップガイド",
89+
"intro": "このガイドではComfyUI APIの設定方法を説明します。",
11390
"config_steps": "API設定手順",
114-
"config_file_edit": "Comfyuiフォルダ内の'run_nvidia_gpu.bat'ファイルを編集して環境変数を設定します。",
91+
"config_file_edit": "ComfyUIフォルダ内の'run_nvidia_gpu.bat'ファイルを編集して環境変数を設定します。",
11592
"example_config": "設定ファイルは以下のとおりです",
116-
"env_variables": "設定する環境変数",
117-
"simple_code": "--enable-cors-header",
118-
"cors_note": "注意：Stablity Matrixからの起動ではExtra Launch Argumentsに設定してください。",
93+
"env_variables": "環境変数",
94+
"cors_note": "注意：Stability Matrixからの起動ではExtra Launch Argumentsに設定してください。",
11995
"pinokio_edit": "Pinokioではstart.jsを編集して--enable-cors-headerを追加します。",
12096
"pinokio_open": "Files -> api -> comfy.git -> start.jsを開きます。"
12197
}
12298
},
12399
ko: {
124100
translation: {
125-
"title": "Comfyui API 설정 가이드",
126-
"header": "Comfyui API 설정 방법",
127-
"intro": "이 가이드는 Comfyui API 설정 방법을 설명합니다.",
101+
"title": "ComfyUI API 설정 가이드",
102+
"intro": "이 가이드는 ComfyUI API 설정 방법을 설명합니다.",
128103
"config_steps": "API 설정 단계",
129-
"config_file_edit": "Comfyui 폴더의 'run_nvidia_gpu.bat' 파일에서 환경변수를 설정합니다.",
104+
"config_file_edit": "ComfyUI 폴더의 'run_nvidia_gpu.bat' 파일에서 환경변수를 설정합니다.",
130105
"example_config": "설정 파일은 다음과 같습니다",
131-
"env_variables": "설정할 환경변수",
132-
"simple_code": "--enable-cors-header",
106+
"env_variables": "환경변수",
133107
"cors_note": "주의: Stability Matrix에서 실행 시 Extra Launch Arguments에 설정하세요.",
134108
"pinokio_edit": "Pinokio에서 start.js를 편집하여 --enable-cors-header를 추가합니다.",
135109
"pinokio_open": "Files -> api -> comfy.git -> start.js를 엽니다."
136110
}
137111
},
138112
zh: {
139113
translation: {
140-
"title": "Comfyui API 设置指南",
141-
"header": "Comfyui API 设置方法",
142-
"intro": "本指南说明如何设置 Comfyui API。",
114+
"title": "ComfyUI API 设置指南",
115+
"intro": "本指南说明如何设置 ComfyUI API。",
143116
"config_steps": "API 设置步骤",
144-
"config_file_edit": "编辑 Comfyui 文件夹中的 'run_nvidia_gpu.bat' 文件以设置环境变量。",
117+
"config_file_edit": "编辑 ComfyUI 文件夹中的 'run_nvidia_gpu.bat' 文件以设置环境变量。",
145118
"example_config": "配置文件如下",
146-
"env_variables": "需要设置的环境变量",
147-
"simple_code": "--enable-cors-header",
119+
"env_variables": "环境变量",
148120
"cors_note": "注意：从 Stability Matrix 启动时，请在 Extra Launch Arguments 中设置。",
149121
"pinokio_edit": "在Pinokio中编辑start.js添加--enable-cors-header",
150122
"pinokio_open": "打开Files -> api -> comfy.git -> start.js"
151123
}
152124
},
153125
fr: {
154126
translation: {
155-
"title": "Guide de Configuration API Comfyui",
156-
"header": "Configuration de l'API Comfyui",
157-
"intro": "Ce guide explique comment configurer l'API Comfyui.",
127+
"title": "Guide de Configuration API ComfyUI",
128+
"intro": "Ce guide explique comment configurer l'API ComfyUI.",
158129
"config_steps": "Étapes de Configuration API",
159-
"config_file_edit": "Modifiez le fichier 'run_nvidia_gpu.bat' dans le dossier Comfyui pour définir les variables d'environnement.",
130+
"config_file_edit": "Modifiez le fichier 'run_nvidia_gpu.bat' dans le dossier ComfyUI pour définir les variables d'environnement.",
160131
"example_config": "Le fichier de configuration est comme suit",
161-
"env_variables": "Variables d'Environnement à Définir",
162-
"simple_code": "--enable-cors-header",
163-
"cors_note": "Note : Pour le lancement depuis Stability Matrix, définissez ceci dans Extra Launch Arguments.",
132+
"env_variables": "Variables d'Environnement",
133+
"cors_note": "Note: Pour le lancement depuis Stability Matrix, définissez ceci dans Extra Launch Arguments.",
164134
"pinokio_edit": "Dans Pinokio, modifiez start.js pour ajouter --enable-cors-header",
165135
"pinokio_open": "Ouvrez Files -> api -> comfy.git -> start.js"
166136
}
167137
}
168138
};
169139

170140
function openTab(evt, tabName) {
171-
const tabContents = document.getElementsByClassName("tab-content");
172-
for (let i = 0; i < tabContents.length; i++) {
173-
tabContents[i].classList.remove("active");
174-
}
175-
const tabBtns = document.getElementsByClassName("tab-btn");
176-
for (let i = 0; i < tabBtns.length; i++) {
177-
tabBtns[i].classList.remove("active");
178-
}
179-
document.getElementById(tabName).classList.add("active");
180-
evt.currentTarget.classList.add("active");
141+
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
142+
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
143+
document.getElementById(tabName).classList.add('active');
144+
evt.currentTarget.classList.add('active');
181145
}
182146

183-
document.addEventListener("DOMContentLoaded", function() {
184147
i18next.init({
185148
lng: 'en',
186-
debug: true,
187149
resources: resources
188150
}, function(err, t) {
189151
updateContent();
190152
});
191-
});
192-
193-
function changeLanguage(lng) {
194-
i18next.changeLanguage(lng, function(err, t) {
195-
updateContent();
196-
});
197-
}
198153

199154
function updateContent() {
200155
document.title = i18next.t('title');
201156
document.querySelectorAll('[data-i18n]').forEach(function(elem) {
202157
elem.textContent = i18next.t(elem.getAttribute('data-i18n'));
203158
});
204159
}
160+
161+
function changeLanguage(lng) {
162+
document.querySelectorAll('.lang-btn').forEach(btn => btn.classList.remove('active'));
163+
event.target.classList.add('active');
164+
i18next.changeLanguage(lng, function(err, t) {
165+
updateContent();
166+
});
167+
}
205168
</script>
206169
</body>
207-
</html>
170+
</html>

0 commit comments

Comments
 (0)