feat: add AI-powered alt text generation for recipe images
All checks were successful
CI / update (push) Successful in 1m10s

- Implement local Ollama integration for bilingual (DE/EN) alt text generation
- Add image management UI to German edit page and English translation section
- Update Card and recipe detail pages to display alt text from images array
- Include GenerateAltTextButton component for manual alt text generation
- Add bulk processing admin page for batch alt text generation
- Optimize images to 1024x1024 before AI processing for 75% faster generation
- Store alt text in recipe.images[].alt and translations.en.images[].alt
This commit is contained in:
2026-01-05 17:28:17 +01:00
parent cc978e73b4
commit 4ffc0940ef
14 changed files with 1512 additions and 11 deletions

View File

@@ -44,6 +44,11 @@
const hero_img_src = $derived("https://bocken.org/static/rezepte/full/" + img_filename);
const placeholder_src = $derived("https://bocken.org/static/rezepte/placeholder/" + img_filename);
// Get alt text from images array (with fallback to recipe name)
const img_alt = $derived(
data.images?.[0]?.alt || stripHtmlTags(data.name)
);
const months = $derived(isEnglish
? ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
@@ -318,7 +323,7 @@ h2{
<link rel="alternate" hreflang="x-default" href="https://bocken.org/rezepte/{data.germanShortName}" />
</svelte:head>
<TitleImgParallax src={hero_img_src} {placeholder_src}>
<TitleImgParallax src={hero_img_src} {placeholder_src} alt={img_alt}>
<div class=title>
<a class="category" href='/{data.recipeLang}/category/{data.category}'>{data.category}</a>
<a class="icon" href='/{data.recipeLang}/icon/{data.icon}'>{data.icon}</a>