Skip to content

Commit 117599a

Browse files
claudeclaude
committed
Phase5: 導線UIサンプル3パターン作成
A: コントロールパネル内インライン方式（折りたたみ） B: 設定ドロップダウン内方式（チップ表示付き） C: 専用モーダル方式（マトリクス表示） https://claude.ai/code/session_016zeauHzccdNZMjE9cGzkPN
1 parent 92dcfcf commit 117599a

File tree

3 files changed

+1174
-0
lines changed

3 files changed

+1174
-0
lines changed

‎sample/phase5_A_inline.html‎

Lines changed: 336 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,336 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Phase5 Sample A: コントロールパネル内インライン方式</title>
6+
<style>
7+
*{margin:0;padding:0;box-sizing:border-box;}
8+
body{
9+
background:#212121;
10+
color:#dedede;
11+
font-family:'Open Sans',Arial,sans-serif;
12+
font-size:12px;
13+
display:flex;
14+
justify-content:center;
15+
padding:40px 20px;
16+
}
17+
.description{
18+
position:fixed;
19+
top:0;left:0;right:0;
20+
background:#333;
21+
color:#ff7c7c;
22+
font-size:11px;
23+
padding:8px 16px;
24+
text-align:center;
25+
border-bottom:2px solid #810000;
26+
z-index:10;
27+
}
28+
.container{
29+
width:300px;
30+
border:1px solid rgba(255,255,255,0.15);
31+
overflow:hidden;
32+
margin-top:30px;
33+
}
34+
.panel{
35+
padding-top:5px;
36+
margin-bottom:10px;
37+
}
38+
.area-header{
39+
font-size:12px;
40+
font-weight:bold;
41+
padding:2px;
42+
color:#dedede;
43+
background:rgba(0,0,0,0.35);
44+
box-shadow:0 2px 6px rgba(0,0,0,0.3);
45+
text-align:center;
46+
cursor:pointer;
47+
position:relative;
48+
z-index:1;
49+
}
50+
.controls-mini{
51+
padding:4px;
52+
}
53+
.input-group{
54+
display:flex;
55+
flex-wrap:wrap;
56+
gap:2px;
57+
margin-left:7px;
58+
margin-right:7px;
59+
}
60+
button{
61+
background:rgba(255,255,255,0.07);
62+
color:#fff;
63+
border:1px solid rgba(255,255,255,0.10);
64+
border-radius:4px;
65+
cursor:pointer;
66+
padding:0px 3px;
67+
font-size:12px;
68+
margin:4px 2px;
69+
text-align:left;
70+
transition:background 0.15s,border 0.15s;
71+
}
72+
button:hover{
73+
background:rgba(255,255,255,0.15);
74+
}
75+
button.selected{
76+
background:rgba(129,0,0,0.4);
77+
border-color:rgba(160,48,48,0.6);
78+
box-shadow:0 0 8px rgba(129,0,0,0.2);
79+
}
80+
label{
81+
color:#dedede;
82+
margin:5px;
83+
font-size:12px;
84+
display:flex;
85+
align-items:center;
86+
gap:4px;
87+
}
88+
select{
89+
background:#333;
90+
color:#dedede;
91+
border:1px solid #505050;
92+
border-radius:4px;
93+
font-size:11px;
94+
padding:2px 4px;
95+
appearance:none;
96+
-webkit-appearance:none;
97+
cursor:pointer;
98+
}
99+
select:focus{
100+
outline:none;
101+
border-color:#fff;
102+
}
103+
hr{
104+
border:none;
105+
border-top:1px solid #505050;
106+
margin:6px 7px;
107+
}
108+
.role-assign-section{
109+
margin:0 7px 8px;
110+
}
111+
.role-assign-header{
112+
display:flex;
113+
align-items:center;
114+
justify-content:space-between;
115+
cursor:pointer;
116+
padding:4px 6px;
117+
background:rgba(0,0,0,0.25);
118+
border-radius:4px;
119+
margin-bottom:4px;
120+
}
121+
.role-assign-header:hover{
122+
background:rgba(0,0,0,0.4);
123+
}
124+
.role-assign-title{
125+
color:#ff7c7c;
126+
font-size:11px;
127+
font-weight:bold;
128+
}
129+
.role-assign-arrow{
130+
color:#888;
131+
font-size:10px;
132+
transition:transform 0.2s;
133+
}
134+
.role-assign-arrow.open{
135+
transform:rotate(180deg);
136+
}
137+
.role-row{
138+
display:flex;
139+
align-items:center;
140+
justify-content:space-between;
141+
padding:3px 6px;
142+
margin-bottom:2px;
143+
}
144+
.role-label{
145+
font-size:11px;
146+
color:#dedede;
147+
min-width:70px;
148+
}
149+
.role-select{
150+
flex:1;
151+
max-width:160px;
152+
font-size:11px;
153+
padding:2px 20px 2px 6px;
154+
background:#333 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 6px center;
155+
}
156+
.role-badge{
157+
display:inline-block;
158+
font-size:9px;
159+
padding:1px 4px;
160+
border-radius:3px;
161+
background:rgba(129,0,0,0.3);
162+
color:#ff7c7c;
163+
border:1px solid rgba(160,48,48,0.4);
164+
margin-left:4px;
165+
}
166+
.role-badge.default{
167+
background:rgba(255,255,255,0.05);
168+
color:#888;
169+
border-color:rgba(255,255,255,0.1);
170+
}
171+
.prompt-area{
172+
margin:0 7px;
173+
}
174+
.prompt-area textarea{
175+
width:100%;
176+
height:60px;
177+
background:#333;
178+
color:#dedede;
179+
border:1px solid #505050;
180+
border-radius:4px;
181+
font-size:11px;
182+
padding:4px 6px;
183+
resize:vertical;
184+
}
185+
.prompt-area textarea:focus{
186+
outline:none;
187+
border-color:#fff;
188+
}
189+
.param-group-header{
190+
font-weight:bold;
191+
margin-bottom:5px;
192+
color:#ff7c7c;
193+
font-size:12px;
194+
margin-left:7px;
195+
margin-top:8px;
196+
}
197+
.note{
198+
margin:16px 7px;
199+
padding:8px;
200+
background:rgba(255,149,50,0.1);
201+
border:1px solid rgba(255,149,50,0.3);
202+
border-radius:4px;
203+
font-size:10px;
204+
color:#ff9532;
205+
line-height:1.5;
206+
}
207+
</style>
208+
</head>
209+
<body>
210+
<div class="description">
211+
Sample A: コントロールパネル内インライン方式 — プロバイダーボタンの直下に折りたたみセクションとして配置
212+
</div>
213+
214+
<div class="container">
215+
<!-- esApiControlsPanel -->
216+
<div class="panel">
217+
<div class="area-header">API Controls</div>
218+
<div class="controls-mini">
219+
<div class="input-group">
220+
<button class="selected">ComfyUI</button>
221+
<button>WebUI</button>
222+
<button>RunPod</button>
223+
<button>Serverless</button>
224+
<button>Fal.ai</button>
225+
</div>
226+
</div>
227+
228+
<hr>
229+
230+
<!-- Phase5: Role Assignment Section (折りたたみ) -->
231+
<div class="role-assign-section">
232+
<div class="role-assign-header" onclick="toggleRoleAssign()">
233+
<span class="role-assign-title">&#9881; Role Assignment</span>
234+
<span class="role-assign-arrow open" id="roleArrow">&#9660;</span>
235+
</div>
236+
<div id="roleAssignBody">
237+
<div class="role-row">
238+
<span class="role-label">T2I</span>
239+
<select class="role-select">
240+
<option selected>Default (ComfyUI)</option>
241+
<option>ComfyUI</option>
242+
<option>RunPod ComfyUI</option>
243+
<option>Serverless</option>
244+
<option>Fal.ai</option>
245+
</select>
246+
</div>
247+
<div class="role-row">
248+
<span class="role-label">I2I</span>
249+
<select class="role-select">
250+
<option selected>Default (ComfyUI)</option>
251+
<option>ComfyUI</option>
252+
<option>RunPod ComfyUI</option>
253+
<option>Fal.ai</option>
254+
</select>
255+
</div>
256+
<div class="role-row">
257+
<span class="role-label">Inpaint</span>
258+
<select class="role-select">
259+
<option>Default (ComfyUI)</option>
260+
<option selected>ComfyUI</option>
261+
<option>RunPod ComfyUI</option>
262+
</select>
263+
</div>
264+
<div class="role-row">
265+
<span class="role-label">Upscale</span>
266+
<select class="role-select">
267+
<option>Default (ComfyUI)</option>
268+
<option>ComfyUI</option>
269+
<option>RunPod ComfyUI</option>
270+
<option selected>Fal.ai</option>
271+
</select>
272+
</div>
273+
<div class="role-row">
274+
<span class="role-label">RemoveBG</span>
275+
<select class="role-select">
276+
<option selected>Default (ComfyUI)</option>
277+
<option>ComfyUI</option>
278+
<option>RunPod ComfyUI</option>
279+
<option>Fal.ai</option>
280+
</select>
281+
</div>
282+
<div class="role-row">
283+
<span class="role-label">Angle</span>
284+
<select class="role-select">
285+
<option selected>Default (ComfyUI)</option>
286+
<option>ComfyUI</option>
287+
<option>RunPod ComfyUI</option>
288+
</select>
289+
</div>
290+
</div>
291+
</div>
292+
293+
<div class="input-group">
294+
<label>
295+
<input type="checkbox" checked> AI Check
296+
</label>
297+
<label style="color:#888;font-size:11px;">ComfyUI Connected</label>
298+
</div>
299+
</div>
300+
301+
<!-- baseControlsPanel -->
302+
<div class="panel">
303+
<div class="area-header">Generation</div>
304+
<div class="controls-mini">
305+
<div class="param-group-header">Prompt</div>
306+
<div class="prompt-area">
307+
<textarea placeholder="Enter prompt...">1girl, manga style, black and white</textarea>
308+
</div>
309+
</div>
310+
</div>
311+
312+
<div class="note">
313+
<b>A方式の特徴:</b><br>
314+
・プロバイダーボタンのすぐ下に折りたたみセクションとして配置<br>
315+
・画面遷移なしで即座に確認・変更可能<br>
316+
・コントロールパネルの縦幅が増える<br>
317+
・折りたたみで省スペース化可能<br>
318+
・「今どのプロバイダーがどの機能に割り当てられているか」が一目で分かる
319+
</div>
320+
</div>
321+
322+
<script>
323+
function toggleRoleAssign(){
324+
var body=document.getElementById('roleAssignBody');
325+
var arrow=document.getElementById('roleArrow');
326+
if(body.style.display==='none'){
327+
body.style.display='block';
328+
arrow.classList.add('open');
329+
}else{
330+
body.style.display='none';
331+
arrow.classList.remove('open');
332+
}
333+
}
334+
</script>
335+
</body>
336+
</html>

0 commit comments

Comments
 (0)