feat: image_prompt_instructions in ChannelEdit

- Добавлен state imagePromptInstructions с дефолтом из style.image_prompt_instructions
- Новая карточка UI с textarea (макс 500 символов + счётчик)
- Поле включено в PATCH payload
- Размещено между палиткой и info-блоком «Как это работает»
This commit is contained in:
Ник (Claude)
2026-06-09 10:48:38 +03:00
parent 69226cbbde
commit d413f5f018
+22
View File
@@ -80,6 +80,7 @@ export default function ChannelEdit({ channel }) {
const [imageStyle, setImageStyle] = useState(style.image_style || 'flat-illustration'); const [imageStyle, setImageStyle] = useState(style.image_style || 'flat-illustration');
const [imagePalette, setImagePalette] = useState(style.image_palette || 'auto'); const [imagePalette, setImagePalette] = useState(style.image_palette || 'auto');
const [imageCustomColors, setImageCustomColors] = useState(style.image_custom_colors || ''); const [imageCustomColors, setImageCustomColors] = useState(style.image_custom_colors || '');
const [imagePromptInstructions, setImagePromptInstructions] = useState(style.image_prompt_instructions || '');
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [deleting, setDeleting] = useState(false); const [deleting, setDeleting] = useState(false);
@@ -103,6 +104,7 @@ export default function ChannelEdit({ channel }) {
image_style: imageStyle, image_style: imageStyle,
image_palette: imagePalette, image_palette: imagePalette,
image_custom_colors: imageCustomColors.trim() || null, image_custom_colors: imageCustomColors.trim() || null,
image_prompt_instructions: imagePromptInstructions.trim() || null,
}, },
}; };
const res = await fetch(`/api/channels/${channel.id}`, { const res = await fetch(`/api/channels/${channel.id}`, {
@@ -329,6 +331,26 @@ export default function ChannelEdit({ channel }) {
</div> </div>
</div> </div>
{/* Инструкции для AI */}
<div className="card p-5">
<h3 className="font-semibold text-sm mb-1 flex items-center gap-2">
<Sparkles className="w-4 h-4 text-accent" />
Инструкции для AI
</h3>
<p className="text-xs text-gray-500 mb-3">
Опиши, какими должны быть картинки. Например: <em>«тёмный фон, минималистичные 3D-объекты, технологичная эстетика, без людей»</em>.
Применяется ко всем постам и обложкам статей этого канала.
</p>
<textarea
className="input min-h-[90px] text-sm"
value={imagePromptInstructions}
onChange={e => setImagePromptInstructions(e.target.value)}
placeholder="Примеры:&#10;— технологичный объект на тёмном градиентном фоне, как Stripe/Vercel blog&#10;— реалистичное фото молочного производства, без людей, фокус на деталях&#10;— мягкая пастельная акварель, природа и животные, тёплый тон"
maxLength={500}
/>
<div className="text-xs text-gray-500 text-right mt-1">{imagePromptInstructions.length}/500</div>
</div>
{/* Preview подсказка */} {/* Preview подсказка */}
<div className="card p-4 bg-accent/5 border-accent/20 text-sm text-gray-300"> <div className="card p-4 bg-accent/5 border-accent/20 text-sm text-gray-300">
<div className="font-medium text-accent mb-1">Как это работает</div> <div className="font-medium text-accent mb-1">Как это работает</div>