卢阳 / 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 = () => {
prompt: params.prompt,
authorId: currentUser.employeeId,
createdAt: Date.now(),
width: params.width,
height: params.height,
seed: params.seed,
likes: 0,
isLikedByCurrentUser: false,
generationTime: finalStatus.processing_time,
... ...
... ... @@ -89,26 +89,30 @@ const DetailModal: React.FC<DetailModalProps> = ({ image, onClose, onEdit, onGen
</div>
</div>
{!isVideo && (
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-xs font-semibold text-gray-400 uppercase mb-1">分辨率</label>
<p className="text-gray-800 dark:text-gray-200 font-mono">{image.width} x {image.height}</p>
</div>
<div>
<label className="block text-xs font-semibold text-gray-400 uppercase mb-1">随机种子</label>
<p className="text-gray-800 dark:text-gray-200 font-mono">{image.seed}</p>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-xs font-semibold text-gray-400 uppercase mb-1">分辨率</label>
<p className="text-gray-800 dark:text-gray-200 font-mono">
{image.width || (isVideo ? 1280 : 'N/A')} x {image.height || (isVideo ? 720 : 'N/A')}
</p>
</div>
<div>
<label className="block text-xs font-semibold text-gray-400 uppercase mb-1">随机种子</label>
<p className="text-gray-800 dark:text-gray-200 font-mono">{image.seed !== undefined ? image.seed : 'N/A'}</p>
</div>
{!isVideo && (
<>
<div>
<label className="block text-xs font-semibold text-gray-400 uppercase mb-1">生成步数</label>
<p className="text-gray-800 dark:text-gray-200 font-mono">{image.num_inference_steps}</p>
<p className="text-gray-800 dark:text-gray-200 font-mono">{image.num_inference_steps || 'N/A'}</p>
</div>
<div>
<label className="block text-xs font-semibold text-gray-400 uppercase mb-1">引导系数</label>
<p className="text-gray-800 dark:text-gray-200 font-mono">{image.guidance_scale.toFixed(1)}</p>
<p className="text-gray-800 dark:text-gray-200 font-mono">{image.guidance_scale ? image.guidance_scale.toFixed(1) : 'N/A'}</p>
</div>
</div>
)}
</>
)}
</div>
<div className="pt-6 mt-auto space-y-3">
{!isVideo && onGenerateSimilar && (
... ...
... ... @@ -142,84 +142,90 @@ const InputBar: React.FC<InputBarProps> = ({ onGenerate, isGenerating, incomingP
</div>
<div className="space-y-2">
<label className="text-xs font-semibold text-gray-500 uppercase">分辨率 (宽高比)</label>
<div className="flex flex-wrap gap-2">
{ASPECT_RATIOS.map((r) => (
<button
key={r.label}
onClick={() => handleRatioSelect(r)}
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors border ${
activeRatio === r.label
? 'bg-black dark:bg-white text-white dark:text-black border-transparent shadow-sm'
: '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'
}`}
>
{r.label}
</button>
))}
</div>
{activeRatio === 'Custom' && (
<div className="flex gap-4 mt-2 animate-fade-in">
<div className="flex items-center gap-2">
<span className="text-xs text-gray-400">W:</span>
<input
type="number"
min="64" max="2048"
value={width}
onChange={(e) => setWidth(Number(e.target.value))}
className="w-20 p-1 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded text-center text-sm"
/>
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-gray-400">H:</span>
<input
type="number"
min="64" max="2048"
value={height}
onChange={(e) => setHeight(Number(e.target.value))}
className="w-20 p-1 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded text-center text-sm"
/>
</div>
</div>
{!isVideoMode && (
<>
<label className="text-xs font-semibold text-gray-500 uppercase">分辨率 (宽高比)</label>
<div className="flex flex-wrap gap-2">
{ASPECT_RATIOS.map((r) => (
<button
key={r.label}
onClick={() => handleRatioSelect(r)}
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors border ${
activeRatio === r.label
? 'bg-black dark:bg-white text-white dark:text-black border-transparent shadow-sm'
: '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'
}`}
>
{r.label}
</button>
))}
</div>
{activeRatio === 'Custom' && (
<div className="flex gap-4 mt-2 animate-fade-in">
<div className="flex items-center gap-2">
<span className="text-xs text-gray-400">W:</span>
<input
type="number"
min="64" max="2048"
value={width}
onChange={(e) => setWidth(Number(e.target.value))}
className="w-20 p-1 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded text-center text-sm"
/>
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-gray-400">H:</span>
<input
type="number"
min="64" max="2048"
value={height}
onChange={(e) => setHeight(Number(e.target.value))}
className="w-20 p-1 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded text-center text-sm"
/>
</div>
</div>
)}
</>
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<div className="flex justify-between">
<label className="text-xs font-semibold text-gray-500 uppercase">生成步数 (Steps)</label>
<span className="text-xs font-mono text-gray-800 dark:text-gray-200">{steps}</span>
</div>
<input
type="range"
min="6"
max="12"
step="1"
value={steps}
onChange={(e) => setSteps(Number(e.target.value))}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-black dark:accent-white"
/>
<div className="flex justify-between text-[10px] text-gray-400">
<span>6</span>
<span>12</span>
</div>
</div>
<div className="space-y-2">
<label className="text-xs font-semibold text-gray-500 uppercase block">引导系数 (Guidance)</label>
<div className="flex items-center gap-2">
{!isVideoMode && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<div className="flex justify-between">
<label className="text-xs font-semibold text-gray-500 uppercase">生成步数 (Steps)</label>
<span className="text-xs font-mono text-gray-800 dark:text-gray-200">{steps}</span>
</div>
<input
type="number"
min="0"
max="10"
step="0.1"
value={guidance}
onChange={(e) => setGuidance(Number(e.target.value))}
className="w-full p-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm"
type="range"
min="6"
max="12"
step="1"
value={steps}
onChange={(e) => setSteps(Number(e.target.value))}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-black dark:accent-white"
/>
<div className="flex justify-between text-[10px] text-gray-400">
<span>6</span>
<span>12</span>
</div>
</div>
<div className="space-y-2">
<label className="text-xs font-semibold text-gray-500 uppercase block">引导系数 (Guidance)</label>
<div className="flex items-center gap-2">
<input
type="number"
min="0"
max="10"
step="0.1"
value={guidance}
onChange={(e) => setGuidance(Number(e.target.value))}
className="w-full p-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm"
/>
</div>
</div>
</div>
</div>
)}
<div className="space-y-2">
<label className="text-xs font-semibold text-gray-500 uppercase">随机种子 (Seed)</label>
... ...