soeren/ai-stylegallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend richtig schick gemacht und backend geordnet. ComfyUI Prompt zum Seeder hinzugefügt.

Browse Source
This commit is contained in:
soeren
2025-12-02 21:24:18 +01:00
parent 7b7a12ed27
commit 908b1dcdff
17 changed files with 473 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
resources/js/Components/StyleSelector.vue
View File

@@ -8,9 +8,7 @@
@click="$emit('close')"
aria-label="Auswahl schließen"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6m-12 0 12 12" />
</svg>
<font-awesome-icon :icon="['fas', 'xmark']" class="h-4 w-4" />
</button>
</div>
@@ -22,31 +20,33 @@
{{ loadError }}
</p>
<template v-else>
<button
v-for="style in styles"
:key="style.id"
type="button"
class="group flex w-full items-center gap-4 rounded-2xl border border-slate-200 bg-white/90 p-3 text-left text-slate-900 transition hover:border-emerald-300 hover:bg-emerald-50/50 dark:border-white/10 dark:bg-white/5 dark:text-white"
@click="selectStyle(style)"
>
<img
v-if="style.preview_image"
:src="buildPreviewPath(style.preview_image)"
loading="lazy"
class="h-24 w-24 flex-none rounded-2xl object-cover opacity-90 transition group-hover:opacity-100"
alt="Style preview"
/>
<div
v-else
class="flex h-24 w-24 flex-none items-center justify-center rounded-2xl border border-dashed border-slate-200 text-[0.65rem] uppercase tracking-[0.4em] text-slate-500 dark:border-white/20 dark:text-slate-400"
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
<button
v-for="style in styles"
:key="style.id"
type="button"
class="group flex w-full items-center gap-4 rounded-2xl border border-slate-200 bg-white/90 p-3 text-left text-slate-900 transition hover:border-emerald-300 hover:bg-emerald-50/50 dark:border-white/10 dark:bg-white/5 dark:text-white"
@click="selectStyle(style)"
>
AI
</div>
<div class="flex flex-col">
<p class="text-base font-semibold text-slate-900 dark:text-white">{{ style.title }}</p>
<p class="text-sm text-slate-500 dark:text-slate-200">{{ style.description }}</p>
</div>
</button>
<img
v-if="style.preview_image"
:src="buildPreviewPath(style.preview_image)"
loading="lazy"
class="h-24 w-24 flex-none rounded-2xl object-cover opacity-90 transition group-hover:opacity-100"
alt="Style preview"
/>
<div
v-else
class="flex h-24 w-24 flex-none items-center justify-center rounded-2xl border border-dashed border-slate-200 text-[0.65rem] uppercase tracking-[0.4em] text-slate-500 dark:border-white/20 dark:text-slate-400"
>
AI
</div>
<div class="flex flex-col">
<p class="text-base font-semibold text-slate-900 dark:text-white">{{ style.title }}</p>
<p class="text-sm text-slate-500 dark:text-slate-200">{{ style.description }}</p>
</div>
</button>
</div>
</template>
</div>
</div>