mod: интерфейс (10) превью картинки. перед "скармливанием Гипоножабе"
This commit is contained in:
@@ -86,7 +86,7 @@ def generate_shape_def(shape: str, radius: int, shape_id: str) -> str:
|
||||
def generate_halftone_svg(
|
||||
image: Union[Image.Image, BinaryIO, bytes, str],
|
||||
*,
|
||||
cols: int = 80,
|
||||
cols: int = 35,
|
||||
max_radius: int = 8,
|
||||
shape: str = "circle",
|
||||
color: str = "#a855ff",
|
||||
|
||||
@@ -120,6 +120,9 @@ class HalftoneViewTests(TestCase):
|
||||
self.assertContains(response, 'id="preview"')
|
||||
self.assertContains(response, 'name="csrfmiddlewaretoken"')
|
||||
self.assertContains(response, 'X-CSRFToken')
|
||||
self.assertContains(response, "handleFileChange")
|
||||
self.assertContains(response, "imagePreviewUrl")
|
||||
self.assertContains(response, "Гипножаба облизывается на:")
|
||||
# Проверяем, что csrf_token не пустой в hx-headers
|
||||
content = response.content.decode("utf-8")
|
||||
self.assertNotIn('hx-headers=\'{"X-CSRFToken": ""}\'', content)
|
||||
|
||||
@@ -22,9 +22,29 @@
|
||||
isLoading: false, /* Идет ли процесс генерации SVG (индикация, блокировка) */
|
||||
hasChanges: true, /* Флаг наличия правок в форме для активности кнопки */
|
||||
hasImage: false, /* Флаг загрузки пользовательского файла */
|
||||
fileName: '', /* Имя выбранного файла */
|
||||
imagePreviewUrl: null, /* Превью загруженного файла (Blob URL) */
|
||||
timer: null, /* Ссылка на таймер удержания анимации размышления */
|
||||
copied: false, /* Флаг успешного копирования в буфер */
|
||||
|
||||
/* Обработка выбора файла (превью + имя) */
|
||||
handleFileChange(event) {
|
||||
const files = event.target.files;
|
||||
if (files && files.length > 0) {
|
||||
const file = files[0];
|
||||
this.hasImage = true;
|
||||
this.fileName = file.name;
|
||||
if (this.imagePreviewUrl) URL.revokeObjectURL(this.imagePreviewUrl);
|
||||
this.imagePreviewUrl = URL.createObjectURL(file);
|
||||
} else {
|
||||
this.hasImage = false;
|
||||
this.fileName = '';
|
||||
if (this.imagePreviewUrl) URL.revokeObjectURL(this.imagePreviewUrl);
|
||||
this.imagePreviewUrl = null;
|
||||
}
|
||||
this.hasChanges = true;
|
||||
},
|
||||
|
||||
/* Метод запуска состояния размышления (8 секунд) */
|
||||
startThinking() {
|
||||
this.isLoading = true;
|
||||
@@ -91,15 +111,30 @@
|
||||
<label class="block text-sm font-bold mb-2 uppercase tracking-wider text-stone-500 dark:text-zinc-400">Источник</label>
|
||||
<div class="relative group">
|
||||
<input type="file" name="image" accept="image/*"
|
||||
@change="hasImage = $el.files.length > 0; hasChanges = true"
|
||||
@change="handleFileChange($event)"
|
||||
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
|
||||
<div
|
||||
class="border-2 border-dashed border-stone-300 dark:border-zinc-700 group-hover:border-emerald-500 rounded-xl p-8 flex flex-col items-center justify-center text-center transition-colors">
|
||||
<span class="text-stone-400 group-hover:text-emerald-500 flex flex-col items-center gap-3">
|
||||
:class="hasImage ? 'border-emerald-500 bg-emerald-50/20 dark:bg-emerald-950/20' : 'border-stone-300 dark:border-zinc-700'"
|
||||
class="border-2 border-dashed group-hover:border-emerald-500 rounded-xl p-6 flex flex-col items-center justify-center text-center transition-all">
|
||||
|
||||
<!-- Состояние 1: Файл не выбран -->
|
||||
<div x-show="!hasImage" class="text-stone-400 group-hover:text-emerald-500 flex flex-col items-center gap-3 transition-colors">
|
||||
<svg class="w-20 h-20 fill-current transition-colors opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M477 174c8.812-13.708 13.948-29.993 13.948-47.466 0-48.55-39.499-88.048-88.05-88.048-32.839 0-61.516 18.084-76.651 44.803-22.773-5.031-46.356-7.586-70.424-7.586-24.003 0-47.624 2.55-70.427 7.582-15.135-26.717-43.813-44.799-76.65-44.799-48.55 0-88.048 39.498-88.048 88.049 0 17.473 5.137 33.759 13.949 47.467C11.987 204.676 0 239.016 0 274.61c0 53.849 27.194 104.194 76.573 141.763C124.677 452.97 188.399 473.125 256 473.125s131.323-20.155 179.427-56.753C484.806 378.803 512 328.457 512 274.609c0-35.59-11.986-69.935-34.822-100.219zM403.076 70.224c31.266 0 56.703 25.436 56.703 56.701s-25.437 56.702-56.703 56.702-56.701-25.436-56.701-56.702 25.436-56.701 56.701-56.701zm-294.152 0c31.266 0 56.703 25.436 56.703 56.701s-25.437 56.702-56.703 56.702-56.701-25.436-56.701-56.702 25.435-56.701 56.701-56.701zM56.629 197.71a87.57 87.57 0 0 0 52.294 17.264c48.55 0 88.05-39.498 88.05-88.049a88.25 88.25 0 0 0-1.02-13.409c19.464-4.03 39.588-6.075 60.047-6.075 20.515 0 40.613 2.041 60.048 6.068-.672 4.376-1.021 8.857-1.021 13.417 0 48.55 39.498 88.049 88.049 88.049 19.568 0 37.66-6.424 52.294-17.263 15.157 21.633 23.712 45.416 25.08 69.911-23.821 20.076-49.402 34.122-79.949 43.943-38.207 12.281-85.474 18.252-144.5 18.252s-106.292-5.971-144.499-18.253c-30.549-9.821-56.132-23.869-79.952-43.945 1.369-24.496 9.921-48.278 25.079-69.91zm199.372 244.067c-107.337 0-197.317-56.31-219.433-131.312 19.882 13.102 41.246 23.196 65.34 30.94 41.355 13.295 91.76 19.758 154.094 19.758s112.738-6.463 154.095-19.758c24.092-7.745 45.456-17.839 65.338-30.939-22.12 75.002-112.099 131.311-219.434 131.311z"/><use href="#B"/><use href="#B" x="294.153"/><path d="M219.852 256.624c-9.79 0-17.756 8.048-17.756 17.986s7.966 17.992 17.756 17.992c9.802 0 17.767-8.055 17.767-17.992s-7.965-17.986-17.767-17.986zm72.163-.14c-9.885 0-17.902 8.115-17.902 18.126s8.017 18.126 17.902 18.126c9.872 0 17.89-8.115 17.89-18.126s-8.018-18.126-17.89-18.126z"/><defs><path id="B" d="M108.931 105.926c-11.45 0-20.738 9.401-20.738 20.998s9.288 20.998 20.738 20.998c11.436 0 20.725-9.401 20.725-20.998s-9.289-20.998-20.725-20.998z"/></defs></svg>
|
||||
<span>Покорми Гипнoжабу,<br />притащи сюда img или кликни</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Состояние 2: Файл выбран -->
|
||||
<div x-show="hasImage" class="flex flex-col items-center gap-3 text-emerald-600 dark:text-emerald-400">
|
||||
<img :src="imagePreviewUrl" alt="Превью"
|
||||
class="w-24 h-24 object-cover rounded-xl border-2 border-emerald-500 shadow-md">
|
||||
<div class="text-xs font-mono">
|
||||
<p class="font-bold">Гипножаба облизывается на:</p>
|
||||
<p class="truncate max-w-[260px] text-stone-700 dark:text-zinc-300 font-semibold mt-0.5" x-text="fileName"></p>
|
||||
<p class="text-[11px] text-stone-400 dark:text-zinc-500 mt-1">кликни или притащи другой файл, чтобы скормить</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user