feat:样式调整
This commit is contained in:
ai-business-hql
@@ -1,6 +1,6 @@
|
||||
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["copilot_web/workflowChat-CckQYsdO.js","copilot_web/input.js","copilot_web/vendor-markdown-Dek94WS0.js","copilot_web/vendor-react-V04_Axys.js","copilot_web/message-components-DHkIj9qD.js","copilot_web/assets/input-T2ACqglr.css","copilot_web/fonts.css"].map(path => {
|
||||
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["copilot_web/workflowChat-B1cnYhzC.js","copilot_web/input.js","copilot_web/vendor-markdown-Dek94WS0.js","copilot_web/vendor-react-V04_Axys.js","copilot_web/message-components-DHkIj9qD.js","copilot_web/assets/input-CfrhPaqY.css","copilot_web/fonts.css"].map(path => {
|
||||
const apiBase = window.comfyAPI?.api?.api?.api_base;
|
||||
const prefix = apiBase ? `${apiBase.substring(1)}/` : '';
|
||||
return `${prefix}${path}`;
|
||||
}))))=>i.map(i=>d[i]);
|
||||
import{_ as a}from"./input.js";import{j as t}from"./vendor-markdown-Dek94WS0.js";import{r,R as i}from"./vendor-react-V04_Axys.js";import{C as n}from"./message-components-DHkIj9qD.js";/* empty css */const o={EXPLAIN_NODE:"copilot:explain-node"},d=i.lazy(()=>a(()=>import("./workflowChat-CckQYsdO.js").then(e=>e.w),__vite__mapDeps([0,1,2,3,4,5,6])).then(e=>({default:e.default})));function p(){const[e,s]=r.useState(!1);return r.useEffect(()=>{const l=()=>{s(!0)};return window.addEventListener(o.EXPLAIN_NODE,l),()=>window.removeEventListener(o.EXPLAIN_NODE,l)},[]),t.jsx(n,{children:t.jsx("div",{className:"h-full w-full flex flex-col",children:t.jsx(r.Suspense,{fallback:t.jsx("div",{className:"h-full w-full flex items-center justify-center",children:"Loading..."}),children:t.jsx(d,{visible:!0,triggerUsage:e,onUsageTriggered:()=>s(!1)})})})})}export{p as default};
|
||||
import{_ as a}from"./input.js";import{j as t}from"./vendor-markdown-Dek94WS0.js";import{r,R as i}from"./vendor-react-V04_Axys.js";import{C as n}from"./message-components-DHkIj9qD.js";/* empty css */const o={EXPLAIN_NODE:"copilot:explain-node"},d=i.lazy(()=>a(()=>import("./workflowChat-B1cnYhzC.js").then(e=>e.w),__vite__mapDeps([0,1,2,3,4,5,6])).then(e=>({default:e.default})));function p(){const[e,s]=r.useState(!1);return r.useEffect(()=>{const l=()=>{s(!0)};return window.addEventListener(o.EXPLAIN_NODE,l),()=>window.removeEventListener(o.EXPLAIN_NODE,l)},[]),t.jsx(n,{children:t.jsx("div",{className:"h-full w-full flex flex-col",children:t.jsx(r.Suspense,{fallback:t.jsx("div",{className:"h-full w-full flex items-center justify-center",children:"Loading..."}),children:t.jsx(d,{visible:!0,triggerUsage:e,onUsageTriggered:()=>s(!1)})})})})}export{p as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
-1
File diff suppressed because one or more lines are too long
Vendored
+2
-2
@@ -1,2 +1,2 @@
|
||||
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["copilot_web/App-B0KtfaFk.js","copilot_web/vendor-markdown-Dek94WS0.js","copilot_web/vendor-react-V04_Axys.js","copilot_web/message-components-DHkIj9qD.js","copilot_web/fonts.css"])))=>i.map(i=>d[i]);
|
||||
import{j as s}from"./vendor-markdown-Dek94WS0.js";import{a as w,R as p,r as x}from"./vendor-react-V04_Axys.js";import{w as v,a as g}from"./message-components-DHkIj9qD.js";/* empty css */const R="modulepreload",b=function(e){return"/"+e},m={},C=function(c,a,P){let d=Promise.resolve();if(a&&a.length>0){document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),t=r?.nonce||r?.getAttribute("nonce");d=Promise.allSettled(a.map(o=>{if(o=b(o),o in m)return;m[o]=!0;const i=o.endsWith(".css"),h=i?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${o}"]${h}`))return;const n=document.createElement("link");if(n.rel=i?"stylesheet":R,i||(n.as="script"),n.crossOrigin="",n.href=o,t&&n.setAttribute("nonce",t),document.head.appendChild(n),i)return new Promise((y,E)=>{n.addEventListener("load",y),n.addEventListener("error",()=>E(new Error(`Unable to preload CSS for ${o}`)))})}))}function u(r){const t=new Event("vite:preloadError",{cancelable:!0});if(t.payload=r,window.dispatchEvent(t),!t.defaultPrevented)throw r}return d.then(r=>{for(const t of r||[])t.status==="rejected"&&u(t.reason);return c().catch(u)})};var l={},f=w;l.createRoot=f.createRoot,l.hydrateRoot=f.hydrateRoot;const S=p.lazy(()=>C(async()=>{const{default:e}=await import("./App-B0KtfaFk.js");return{default:e}},__vite__mapDeps([0,1,2,3,4])).then(({default:e})=>({default:e})));function j(){return new Promise(e=>{if(document.body)return e(document.body);document.addEventListener("DOMContentLoaded",()=>{e(document.body)})})}j().then(()=>v()).then(()=>{g.extensionManager.registerSidebarTab({id:"comfyui-copilot",icon:"cc-icon-logo",title:"ComfyUI Copilot",tooltip:"ComfyUI Copilot",type:"custom",render:e=>{const c=document.createElement("div");c.id="comfyui-copilot-plugin",c.className="h-full w-full flex flex-col",e.style.height="100%",e.appendChild(c),l.createRoot(c).render(s.jsx(p.StrictMode,{children:s.jsx(x.Suspense,{fallback:s.jsx("div",{className:"h-full w-full flex items-center justify-center",children:"Loading..."}),children:s.jsx(S,{})})}))}})});export{C as _};
|
||||
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["copilot_web/App-mGLMRCvd.js","copilot_web/vendor-markdown-Dek94WS0.js","copilot_web/vendor-react-V04_Axys.js","copilot_web/message-components-DHkIj9qD.js","copilot_web/fonts.css"])))=>i.map(i=>d[i]);
|
||||
import{j as s}from"./vendor-markdown-Dek94WS0.js";import{a as w,R as p,r as x}from"./vendor-react-V04_Axys.js";import{w as v,a as g}from"./message-components-DHkIj9qD.js";/* empty css */const R="modulepreload",b=function(e){return"/"+e},m={},C=function(c,a,P){let d=Promise.resolve();if(a&&a.length>0){document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),t=r?.nonce||r?.getAttribute("nonce");d=Promise.allSettled(a.map(o=>{if(o=b(o),o in m)return;m[o]=!0;const i=o.endsWith(".css"),h=i?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${o}"]${h}`))return;const n=document.createElement("link");if(n.rel=i?"stylesheet":R,i||(n.as="script"),n.crossOrigin="",n.href=o,t&&n.setAttribute("nonce",t),document.head.appendChild(n),i)return new Promise((y,E)=>{n.addEventListener("load",y),n.addEventListener("error",()=>E(new Error(`Unable to preload CSS for ${o}`)))})}))}function u(r){const t=new Event("vite:preloadError",{cancelable:!0});if(t.payload=r,window.dispatchEvent(t),!t.defaultPrevented)throw r}return d.then(r=>{for(const t of r||[])t.status==="rejected"&&u(t.reason);return c().catch(u)})};var l={},f=w;l.createRoot=f.createRoot,l.hydrateRoot=f.hydrateRoot;const S=p.lazy(()=>C(async()=>{const{default:e}=await import("./App-mGLMRCvd.js");return{default:e}},__vite__mapDeps([0,1,2,3,4])).then(({default:e})=>({default:e})));function j(){return new Promise(e=>{if(document.body)return e(document.body);document.addEventListener("DOMContentLoaded",()=>{e(document.body)})})}j().then(()=>v()).then(()=>{g.extensionManager.registerSidebarTab({id:"comfyui-copilot",icon:"cc-icon-logo",title:"ComfyUI Copilot",tooltip:"ComfyUI Copilot",type:"custom",render:e=>{const c=document.createElement("div");c.id="comfyui-copilot-plugin",c.className="h-full w-full flex flex-col",e.style.height="100%",e.appendChild(c),l.createRoot(c).render(s.jsx(p.StrictMode,{children:s.jsx(x.Suspense,{fallback:s.jsx("div",{className:"h-full w-full flex items-center justify-center",children:"Loading..."}),children:s.jsx(S,{})})}))}})});export{C as _};
|
||||
|
||||
+2
-2
File diff suppressed because one or more lines are too long
@@ -798,7 +798,7 @@ export const ParameterDebugInterface: React.FC<ParameterDebugInterfaceProps> = (
|
||||
<button
|
||||
className="text-blue-500 hover:text-blue-700 mr-2"
|
||||
onClick={toggleHistoryScreen}
|
||||
title="Show history"
|
||||
title="Show History"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||||
@@ -819,33 +819,26 @@ export const ParameterDebugInterface: React.FC<ParameterDebugInterfaceProps> = (
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="bg-blue-100 p-1.5 rounded-full text-blue-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-800">Parameter Lab</h4>
|
||||
<p className="text-xs text-gray-600">Batch‑test parameters & find the optimal combo in one click</p>
|
||||
</div>
|
||||
<div className="text-left mb-4">
|
||||
<h3 className="text-sm font-medium text-gray-800 mb-3">Batch-test parameters & find the best combo in one click.</h3>
|
||||
<div className="h-px w-full bg-gray-200 my-4"></div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="bg-indigo-100 p-1.5 rounded-full text-indigo-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<div className="text-left">
|
||||
<h4 className="text-base font-medium text-gray-800 mb-4">How to use</h4>
|
||||
|
||||
<div className="space-y-2 mb-4">
|
||||
<p className="text-sm text-gray-700">
|
||||
<span className="font-bold">1 - </span>Click any node(hold Shift to select multiple nodes)
|
||||
</p>
|
||||
<p className="text-sm text-gray-700">
|
||||
<span className="font-bold">2 - </span>Set parameter ranges and start batch generation.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-800">How To Use</h4>
|
||||
<p className="text-xs text-gray-600">1. Click any node (hold Shift to select multiple nodes).</p>
|
||||
<p className="text-xs text-gray-600">2. Set parameter ranges and start batch generation.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-xs text-blue-800 mb-3">Let’s select a node to begin!</p>
|
||||
|
||||
<div className="h-px w-full bg-gray-200 my-4"></div>
|
||||
|
||||
<p className="text-sm text-blue-600 mt-6">Let's select a node to begin!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +24,10 @@ export const ImageModal: React.FC<ImageModalProps> = ({
|
||||
|
||||
const nodeElements = Object.entries(params.nodeParams).map(([nodeId, nodeParams]) => {
|
||||
// 获取节点名称 (如果存在)
|
||||
const nodeName = params.nodeNames?.[nodeId] || `Node ${nodeId}`;
|
||||
const nodeName = params.nodeNames?.[nodeId] || // 首先尝试从 nodeNames 中获取
|
||||
(params.selectedNodeInfoMap && params.selectedNodeInfoMap[nodeId]) || // 然后尝试从 selectedNodeInfoMap 获取
|
||||
(nodeId.includes('text') ? 'Text Node' : // 针对特殊节点类型提供更友好名称
|
||||
`Node ${nodeId}`); // 最后使用默认名称
|
||||
|
||||
// 渲染每个参数
|
||||
const paramElements = Object.entries(nodeParams as Record<string, any>)
|
||||
@@ -90,7 +93,7 @@ export const ImageModal: React.FC<ImageModalProps> = ({
|
||||
{/* 右侧参数信息 */}
|
||||
<div className="w-[35%] h-full overflow-hidden flex flex-col">
|
||||
<div className="p-4 flex-1 overflow-y-auto">
|
||||
<h3 className="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">parameters</h3>
|
||||
<h3 className="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Parameters</h3>
|
||||
|
||||
{/* 显示常规参数 */}
|
||||
{params && !params.nodeParams && Object.entries(params)
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
import React from 'react';
|
||||
import { ImageModal } from '../modals/ImageModal';
|
||||
import { GeneratedImage } from '../types/parameterDebugTypes';
|
||||
import { HistoryItem, formatDate } from '../utils/historyUtils';
|
||||
import { HistoryItem, formatDate, formatNodeNameWithParams } from '../utils/historyUtils';
|
||||
|
||||
interface HistoryItemScreenProps {
|
||||
historyItem: HistoryItem;
|
||||
@@ -35,7 +35,7 @@ export const HistoryItemScreen: React.FC<HistoryItemScreenProps> = ({
|
||||
openImageModal,
|
||||
closeImageModal
|
||||
}) => {
|
||||
const { timestamp, nodeName, generatedImages } = historyItem;
|
||||
const { timestamp, nodeName, generatedImages, params } = historyItem;
|
||||
|
||||
// Calculate total pages
|
||||
const actualTotalPages = Math.ceil(generatedImages.length / imagesPerPage);
|
||||
@@ -47,13 +47,13 @@ export const HistoryItemScreen: React.FC<HistoryItemScreenProps> = ({
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||||
<div className="mb-4 border-b pb-2 flex justify-between items-center">
|
||||
<div className="mb-4 border-b pb-2 flex justify-between items-start">
|
||||
<div>
|
||||
<h3 className="text-base font-medium text-gray-800">{nodeName}</h3>
|
||||
<h3 className="text-base font-medium text-gray-800">{formatNodeNameWithParams(nodeName, params)}</h3>
|
||||
<p className="text-xs text-gray-500">{formatDate(timestamp)} • {generatedImages.length} images</p>
|
||||
</div>
|
||||
<button
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
className="text-gray-400 hover:text-gray-600 mt-0"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -66,7 +66,10 @@ export const HistoryItemScreen: React.FC<HistoryItemScreenProps> = ({
|
||||
<ImageModal
|
||||
visible={modalVisible}
|
||||
imageUrl={modalImageUrl}
|
||||
params={modalImageParams || {}}
|
||||
params={{
|
||||
...params,
|
||||
nodeNames: { [historyItem.nodeName.split('<')[0]]: historyItem.nodeName.split('<')[0] }
|
||||
}}
|
||||
onClose={closeImageModal}
|
||||
/>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: ai-business-hql qingli.hql@alibaba-inc.com
|
||||
* @Date: 2025-05-15 15:30:33
|
||||
* @LastEditors: ai-business-hql qingli.hql@alibaba-inc.com
|
||||
* @LastEditTime: 2025-05-15 16:13:38
|
||||
* @LastEditTime: 2025-05-15 18:42:45
|
||||
* @FilePath: /comfyui_copilot/ui/src/components/debug/screens/HistoryScreen.tsx
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
@@ -27,8 +27,8 @@ export const HistoryScreen: React.FC<HistoryScreenProps> = ({
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex flex-col h-full">
|
||||
<div className="mb-4 border-b pb-2 flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="text-base font-medium text-gray-800">Generation History</h3>
|
||||
<p className="text-xs text-gray-500">Last {historyItems.length} generation runs</p>
|
||||
<h3 className="text-base font-medium text-gray-800">Experiments History</h3>
|
||||
<p className="text-xs text-gray-500">Last {historyItems.length} experiments</p>
|
||||
</div>
|
||||
<button
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: ai-business-hql ai.bussiness.hql@gmail.com
|
||||
* @Date: 2025-03-31 18:29:53
|
||||
* @LastEditors: ai-business-hql qingli.hql@alibaba-inc.com
|
||||
* @LastEditTime: 2025-05-15 16:18:09
|
||||
* @LastEditTime: 2025-05-15 17:29:01
|
||||
* @FilePath: /comfyui_copilot/ui/src/components/debug/screens/InitialScreen.tsx
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
|
||||
@@ -12,6 +12,7 @@ export const MAX_HISTORY_ITEMS = 30;
|
||||
export interface HistoryItem {
|
||||
id: string;
|
||||
timestamp: number;
|
||||
title: string;
|
||||
nodeName: string;
|
||||
params: {[key: string]: any};
|
||||
generatedImages: GeneratedImage[];
|
||||
@@ -37,8 +38,15 @@ export const saveHistoryItem = async (
|
||||
const newItem: HistoryItem = {
|
||||
id: generateUUID(),
|
||||
timestamp: Date.now(),
|
||||
title: formatNodeNameWithParams(nodeName, params),
|
||||
nodeName,
|
||||
params,
|
||||
params: {
|
||||
...params,
|
||||
nodeNames: {
|
||||
...(params.nodeNames || {}),
|
||||
[nodeName.split('<')[0]]: nodeName.split('<')[0]
|
||||
}
|
||||
},
|
||||
generatedImages,
|
||||
totalCount,
|
||||
workflow
|
||||
|
||||
+10
-13
@@ -282,6 +282,10 @@
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.-ml-1 {
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
@@ -318,6 +322,9 @@
|
||||
.mr-3 {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.mt-0\.5 {
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
@@ -417,6 +424,9 @@
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
.h-px {
|
||||
height: 1px;
|
||||
}
|
||||
.max-h-60 {
|
||||
max-height: 15rem;
|
||||
}
|
||||
@@ -646,11 +656,6 @@
|
||||
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
@@ -891,10 +896,6 @@
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-indigo-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-pink-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 207 232 / var(--tw-bg-opacity, 1));
|
||||
@@ -1198,10 +1199,6 @@
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(20 83 45 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-indigo-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(79 70 229 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-pink-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(219 39 119 / var(--tw-text-opacity, 1));
|
||||
|
||||
Reference in New Issue
Block a user