卢阳 / front_backend_zImage

Go to a project
Toggle navigation Toggle navigation pinning
ly0303521
7592da80 1 parent cf5de959

删除视频生成的冗余参数，以及添加"参数详情"的分辨率和随机中

Inline Side-by-side
Showing 3 changed files with 98 additions and 85 deletions
@@ -127,6 +127,9 @@ const App: React.FC = () => { @@ -127,6 +127,9 @@ const App: React.FC = () => {
127 prompt: params.prompt, 127 prompt: params.prompt,
128 authorId: currentUser.employeeId, 128 authorId: currentUser.employeeId,
129 createdAt: Date.now(), 129 createdAt: Date.now(),
  130 + width: params.width,
  131 + height: params.height,
  132 + seed: params.seed,
130 likes: 0, 133 likes: 0,
131 isLikedByCurrentUser: false, 134 isLikedByCurrentUser: false,
132 generationTime: finalStatus.processing_time, 135 generationTime: finalStatus.processing_time,
@@ -89,26 +89,30 @@ const DetailModal: React.FC<DetailModalProps> = ({ image, onClose, onEdit, onGen @@ -89,26 +89,30 @@ const DetailModal: React.FC<DetailModalProps> = ({ image, onClose, onEdit, onGen
89 </div> 89 </div>
90 </div> 90 </div>
91 91
92 - {!isVideo && (  
93 - <div className="grid grid-cols-2 gap-4">  
94 - <div>  
95 - <label className="block text-xs font-semibold text-gray-400 uppercase mb-1">分辨率</label>  
96 - <p className="text-gray-800 dark:text-gray-200 font-mono">{image.width} x {image.height}</p>  
97 - </div>  
98 - <div>  
99 - <label className="block text-xs font-semibold text-gray-400 uppercase mb-1">随机种子</label>  
100 - <p className="text-gray-800 dark:text-gray-200 font-mono">{image.seed}</p>  
101 - </div> 92 + <div className="grid grid-cols-2 gap-4">
  93 + <div>
  94 + <label className="block text-xs font-semibold text-gray-400 uppercase mb-1">分辨率</label>
  95 + <p className="text-gray-800 dark:text-gray-200 font-mono">
  96 + {image.width || (isVideo ? 1280 : 'N/A')} x {image.height || (isVideo ? 720 : 'N/A')}
  97 + </p>
  98 + </div>
  99 + <div>
  100 + <label className="block text-xs font-semibold text-gray-400 uppercase mb-1">随机种子</label>
  101 + <p className="text-gray-800 dark:text-gray-200 font-mono">{image.seed !== undefined ? image.seed : 'N/A'}</p>
  102 + </div>
  103 + {!isVideo && (
  104 + <>
102 <div> 105 <div>
103 <label className="block text-xs font-semibold text-gray-400 uppercase mb-1">生成步数</label> 106 <label className="block text-xs font-semibold text-gray-400 uppercase mb-1">生成步数</label>
104 - <p className="text-gray-800 dark:text-gray-200 font-mono">{image.num_inference_steps}</p> 107 + <p className="text-gray-800 dark:text-gray-200 font-mono">{image.num_inference_steps || 'N/A'}</p>
105 </div> 108 </div>
106 <div> 109 <div>
107 <label className="block text-xs font-semibold text-gray-400 uppercase mb-1">引导系数</label> 110 <label className="block text-xs font-semibold text-gray-400 uppercase mb-1">引导系数</label>
108 - <p className="text-gray-800 dark:text-gray-200 font-mono">{image.guidance_scale.toFixed(1)}</p> 111 + <p className="text-gray-800 dark:text-gray-200 font-mono">{image.guidance_scale ? image.guidance_scale.toFixed(1) : 'N/A'}</p>
109 </div> 112 </div>
110 - </div>  
111 - )} 113 + </>
  114 + )}
  115 + </div>
112 116
113 <div className="pt-6 mt-auto space-y-3"> 117 <div className="pt-6 mt-auto space-y-3">
114 {!isVideo && onGenerateSimilar && ( 118 {!isVideo && onGenerateSimilar && (
@@ -142,84 +142,90 @@ const InputBar: React.FC<InputBarProps> = ({ onGenerate, isGenerating, incomingP @@ -142,84 +142,90 @@ const InputBar: React.FC<InputBarProps> = ({ onGenerate, isGenerating, incomingP
142 </div> 142 </div>
143 143
144 <div className="space-y-2"> 144 <div className="space-y-2">
145 - <label className="text-xs font-semibold text-gray-500 uppercase">分辨率 (宽高比)</label>  
146 - <div className="flex flex-wrap gap-2">  
147 - {ASPECT_RATIOS.map((r) => (  
148 - <button  
149 - key={r.label}  
150 - onClick={() => handleRatioSelect(r)}  
151 - className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors border ${  
152 - activeRatio === r.label  
153 - ? 'bg-black dark:bg-white text-white dark:text-black border-transparent shadow-sm'  
154 - : 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800'  
155 - }`}  
156 - >  
157 - {r.label}  
158 - </button>  
159 - ))}  
160 - </div>  
161 - {activeRatio === 'Custom' && (  
162 - <div className="flex gap-4 mt-2 animate-fade-in">  
163 - <div className="flex items-center gap-2">  
164 - <span className="text-xs text-gray-400">W:</span>  
165 - <input  
166 - type="number"  
167 - min="64" max="2048"  
168 - value={width}  
169 - onChange={(e) => setWidth(Number(e.target.value))}  
170 - className="w-20 p-1 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded text-center text-sm"  
171 - />  
172 - </div>  
173 - <div className="flex items-center gap-2">  
174 - <span className="text-xs text-gray-400">H:</span>  
175 - <input  
176 - type="number"  
177 - min="64" max="2048"  
178 - value={height}  
179 - onChange={(e) => setHeight(Number(e.target.value))}  
180 - className="w-20 p-1 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded text-center text-sm"  
181 - />  
182 - </div>  
183 - </div> 145 + {!isVideoMode && (
  146 + <>
  147 + <label className="text-xs font-semibold text-gray-500 uppercase">分辨率 (宽高比)</label>
  148 + <div className="flex flex-wrap gap-2">
  149 + {ASPECT_RATIOS.map((r) => (
  150 + <button
  151 + key={r.label}
  152 + onClick={() => handleRatioSelect(r)}
  153 + className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors border ${
  154 + activeRatio === r.label
  155 + ? 'bg-black dark:bg-white text-white dark:text-black border-transparent shadow-sm'
  156 + : 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800'
  157 + }`}
  158 + >
  159 + {r.label}
  160 + </button>
  161 + ))}
  162 + </div>
  163 + {activeRatio === 'Custom' && (
  164 + <div className="flex gap-4 mt-2 animate-fade-in">
  165 + <div className="flex items-center gap-2">
  166 + <span className="text-xs text-gray-400">W:</span>
  167 + <input
  168 + type="number"
  169 + min="64" max="2048"
  170 + value={width}
  171 + onChange={(e) => setWidth(Number(e.target.value))}
  172 + className="w-20 p-1 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded text-center text-sm"
  173 + />
  174 + </div>
  175 + <div className="flex items-center gap-2">
  176 + <span className="text-xs text-gray-400">H:</span>
  177 + <input
  178 + type="number"
  179 + min="64" max="2048"
  180 + value={height}
  181 + onChange={(e) => setHeight(Number(e.target.value))}
  182 + className="w-20 p-1 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded text-center text-sm"
  183 + />
  184 + </div>
  185 + </div>
  186 + )}
  187 + </>
184 )} 188 )}
185 </div> 189 </div>
186 190
187 - <div className="grid grid-cols-1 md:grid-cols-2 gap-6">  
188 - <div className="space-y-2">  
189 - <div className="flex justify-between">  
190 - <label className="text-xs font-semibold text-gray-500 uppercase">生成步数 (Steps)</label>  
191 - <span className="text-xs font-mono text-gray-800 dark:text-gray-200">{steps}</span>  
192 - </div>  
193 - <input  
194 - type="range"  
195 - min="6"  
196 - max="12"  
197 - step="1"  
198 - value={steps}  
199 - onChange={(e) => setSteps(Number(e.target.value))}  
200 - className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-black dark:accent-white"  
201 - />  
202 - <div className="flex justify-between text-[10px] text-gray-400">  
203 - <span>6</span>  
204 - <span>12</span>  
205 - </div>  
206 - </div>  
207 -  
208 - <div className="space-y-2">  
209 - <label className="text-xs font-semibold text-gray-500 uppercase block">引导系数 (Guidance)</label>  
210 - <div className="flex items-center gap-2"> 191 + {!isVideoMode && (
  192 + <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  193 + <div className="space-y-2">
  194 + <div className="flex justify-between">
  195 + <label className="text-xs font-semibold text-gray-500 uppercase">生成步数 (Steps)</label>
  196 + <span className="text-xs font-mono text-gray-800 dark:text-gray-200">{steps}</span>
  197 + </div>
211 <input 198 <input
212 - type="number"  
213 - min="0"  
214 - max="10"  
215 - step="0.1"  
216 - value={guidance}  
217 - onChange={(e) => setGuidance(Number(e.target.value))}  
218 - className="w-full p-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm" 199 + type="range"
  200 + min="6"
  201 + max="12"
  202 + step="1"
  203 + value={steps}
  204 + onChange={(e) => setSteps(Number(e.target.value))}
  205 + className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-black dark:accent-white"
219 /> 206 />
  207 + <div className="flex justify-between text-[10px] text-gray-400">
  208 + <span>6</span>
  209 + <span>12</span>
  210 + </div>
  211 + </div>
  212 +
  213 + <div className="space-y-2">
  214 + <label className="text-xs font-semibold text-gray-500 uppercase block">引导系数 (Guidance)</label>
  215 + <div className="flex items-center gap-2">
  216 + <input
  217 + type="number"
  218 + min="0"
  219 + max="10"
  220 + step="0.1"
  221 + value={guidance}
  222 + onChange={(e) => setGuidance(Number(e.target.value))}
  223 + className="w-full p-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm"
  224 + />
  225 + </div>
220 </div> 226 </div>
221 </div> 227 </div>
222 - </div> 228 + )}
223 229
224 <div className="space-y-2"> 230 <div className="space-y-2">
225 <label className="text-xs font-semibold text-gray-500 uppercase">随机种子 (Seed)</label> 231 <label className="text-xs font-semibold text-gray-500 uppercase">随机种子 (Seed)</label>