update

frontend/src/App.vue

@@ -3,6 +3,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import MovieCard from './components/MovieCard.vue'
 import FilterSidebar from './components/FilterSidebar.vue'
 import AehnlichTab from './components/AehnlichTab.vue'
+import KiTab from './components/KiTab.vue'
 import MerklisteTab from './components/MerklisteTab.vue'
 import SammlungFilter from './components/SammlungFilter.vue'
 import MovieDetail from './components/MovieDetail.vue'
@@ -85,6 +86,7 @@ const tabs = computed(() => [
   },
   { id: 'search', label: 'Suche', count: null },
   { id: 'aehnlich', label: 'Ähnlichkeitsuche', count: null },
+  { id: 'ki', label: 'KI-Suche', count: null },
   ...(host.value ? [] : [{ id: 'merkliste', label: 'Sammlungen', count: null }]),
   { id: 'wheel', label: 'Rad', count: null },
   { id: 'stream', label: 'Stream', count: null },
@@ -99,7 +101,7 @@ const tabs = computed(() => [
 // legt sie sich über einen Knopf über die Seite
 const filterOffen = ref(false)
 const mitFilter = computed(() =>
-  ['netflix', 'canon', 'search', 'aehnlich', 'merkliste'].includes(activeTab.value)
+  ['netflix', 'canon', 'search', 'aehnlich', 'ki', 'merkliste'].includes(activeTab.value)
 )
 
 // Der Sammlungen-Reiter filtert nach Person und Genre, nicht nach Regler —
@@ -269,6 +271,34 @@ onMounted(load)
       />
     </div>
 
+    <div v-else-if="activeTab === 'ki'" class="layout">
+      <KiTab
+        :angemeldet="angemeldet"
+        :gesehen-ids="gesehenIds"
+        :ohne-gesehene="ohneGesehene"
+        :filter="suchFilter"
+        :ansicht="ansicht"
+        @open="selected = $event"
+      />
+
+      <FilterSidebar
+        v-model:ansicht="ansicht"
+        v-model:ohne-gesehene="ohneGesehene"
+        v-model:ranges="ranges"
+        :class="{ offen: filterOffen }"
+        :regler="REGLER"
+        :grenzen="grenzen"
+        :options="genreOptions"
+        :include="include"
+        :exclude="exclude"
+        :ohne-suche="true"
+        :ohne-sort="true"
+        @toggle="toggleGenre"
+        @all="toggleAll"
+        @reset="resetGenres"
+      />
+    </div>
+
     <WheelTab
       v-else-if="activeTab === 'wheel'"
       ref="rad"

frontend/src/components/FilterSidebar.vue

@@ -12,6 +12,8 @@ const props = defineProps({
   ohneSuche: Boolean,
   // Nur wo TMDB die Reihenfolge liefert: Suche und Ähnlichkeitsuche
   mitRelevanz: Boolean,
+  // Die KI-Suche hat keine Sortierung — ihre Reihenfolge ist die Relevanz
+  ohneSort: Boolean,
 })
 
 const emit = defineEmits(['toggle', 'all', 'reset'])
@@ -57,7 +59,7 @@ function beschriften(regler) {
         type="search"
         placeholder="Titel suchen…"
       />
-      <select v-model="sort">
+      <select v-if="!ohneSort" v-model="sort">
         <option v-if="mitRelevanz" value="relevanz">Wie auf IMDb</option>
         <option value="random">Zufällig</option>
         <option value="rating">Beste Bewertung</option>

frontend/src/components/KiTab.vue

@@ -0,0 +1,225 @@
+<script setup>
+// Filme finden, indem man beschreibt, was man sucht. Die KI schlägt vor,
+// TMDB bestätigt — was es dort nicht gibt, kommt nicht an. Auf Wunsch
+// geht die eigene Sammlung mit, dann kennt die KI den Geschmack. Die
+// Filterleiste geht als Vorgabe mit und siebt hinterher noch einmal.
+import { computed, ref } from 'vue'
+import MovieCard from './MovieCard.vue'
+import { filterParameter } from '../filter.js'
+
+const props = defineProps({
+  angemeldet: Boolean,
+  gesehenIds: { type: Set, default: () => new Set() },
+  ohneGesehene: { type: Boolean, default: true },
+  filter: { type: Object, default: () => ({}) },
+  ansicht: { type: String, default: 'kompakt' },
+})
+
+const emit = defineEmits(['open'])
+
+const MAX = 1000
+
+const beschreibung = ref('')
+const mitSammlung = ref(false)
+const vorschlaege = ref([])
+const laden = ref(false)
+const fehler = ref('')
+const gefragt = ref(false)
+
+// Eine verstellte Leiste ist schon eine Frage: "Horror ab 2015" reicht
+const leisteVerstellt = computed(() => {
+  const { sort, ...rest } = filterParameter(props.filter)
+  return Object.values(rest).some((w) => w !== '' && w != null)
+})
+
+const kannFragen = computed(
+  () =>
+    !laden.value &&
+    (beschreibung.value.trim().length > 0 || mitSammlung.value || leisteVerstellt.value)
+)
+
+async function fragen() {
+  if (!kannFragen.value) return
+  laden.value = true
+  fehler.value = ''
+  try {
+    const resp = await fetch('/api/ki-suche', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        beschreibung: beschreibung.value.trim(),
+        mit_sammlung: props.angemeldet && mitSammlung.value,
+        ohne_gesehene: props.ohneGesehene,
+        ...filterParameter(props.filter),
+      }),
+    })
+    if (!resp.ok) {
+      const daten = await resp.json().catch(() => ({}))
+      throw new Error(daten.detail || 'Das hat nicht geklappt.')
+    }
+    vorschlaege.value = await resp.json()
+    gefragt.value = true
+  } catch (err) {
+    fehler.value = err.message
+  } finally {
+    laden.value = false
+  }
+}
+
+async function open(movie) {
+  const resp = await fetch(`/api/search/${movie.id}`)
+  if (resp.ok) emit('open', await resp.json())
+}
+</script>
+
+<template>
+  <div class="ki-tab">
+    <div class="frage">
+      <textarea
+        v-model="beschreibung"
+        :maxlength="MAX"
+        rows="3"
+        placeholder="Was suchst du? Zum Beispiel: langsamer Folk-Horror ohne viel Gore, gern aus Europa, ab 2010 …"
+        @keydown.ctrl.enter="fragen"
+      ></textarea>
+      <div class="zeile">
+        <label v-if="angemeldet" class="schalter">
+          <input v-model="mitSammlung" type="checkbox" />
+          Meine Sammlung mitgeben
+        </label>
+        <span class="rest"></span>
+        <button type="button" class="los" :disabled="!kannFragen" @click="fragen">
+          {{ laden ? 'Überlegt …' : 'Vorschlagen' }}
+        </button>
+      </div>
+    </div>
+
+    <p v-if="laden" class="note">Die KI überlegt. Das dauert ein paar Sekunden.</p>
+    <p v-else-if="fehler" class="note error">{{ fehler }}</p>
+    <p v-else-if="gefragt && !vorschlaege.length" class="note">
+      Nichts Brauchbares gefunden. Beschreib es anders.
+    </p>
+
+    <!-- Wo sonst die Inhaltsangabe steht, sagt hier die KI, warum der
+         Film passt -->
+    <div class="grid" :class="ansicht">
+      <MovieCard
+        v-for="movie in vorschlaege"
+        :key="movie.id"
+        :movie="{ ...movie, teaser: movie.grund }"
+        :ansicht="ansicht"
+        :gesehen="gesehenIds.has(movie.id)"
+        @open="open"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ki-tab {
+  min-width: 0;
+}
+
+.frage {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  margin-bottom: 1.5rem;
+}
+
+textarea {
+  width: 100%;
+  min-height: 5.5rem;
+  padding: 0.9rem 1.1rem;
+  color: var(--text);
+  font: inherit;
+  font-size: 1.05rem;
+  line-height: 1.5;
+  background: var(--bg-soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  resize: vertical;
+}
+
+textarea:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
+}
+
+.zeile {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.schalter {
+  display: flex;
+  gap: 0.45rem;
+  align-items: center;
+  color: var(--muted);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.schalter input {
+  accent-color: var(--accent);
+}
+
+.rest {
+  flex: 1;
+}
+
+.los {
+  padding: 0.6rem 1.4rem;
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 600;
+  background: var(--accent);
+  border-radius: 8px;
+}
+
+.los:hover:not(:disabled) {
+  filter: brightness(1.15);
+}
+
+.los:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* Wie in der Suche: Poster im Raster, Detailkarten zu zweit nebeneinander */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: 1.1rem;
+}
+
+.grid.details {
+  grid-template-columns: repeat(
+    auto-fill,
+    min(calc(50% - 0.55rem), calc(4 * 190px + 3 * 1.1rem))
+  );
+}
+
+.note {
+  padding: 2.5rem 0;
+  color: var(--muted);
+  text-align: center;
+}
+
+.note.error {
+  color: var(--accent);
+}
+
+@media (max-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
+    gap: 0.6rem;
+  }
+
+  .grid.details {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

frontend/src/composables/useFilter.js

@@ -38,7 +38,7 @@ export function useFilter({ activeTab, netflixMovies, canonMovies, gesehenIds, o
   const include = ref([])
   const exclude = ref([])
 
-  const suchReiter = () => activeTab.value === 'search' || activeTab.value === 'aehnlich'
+  const suchReiter = () => ['search', 'aehnlich', 'ki'].includes(activeTab.value)
   const pool = () => (activeTab.value === 'netflix' ? netflixMovies.value : canonMovies.value)
 
   const grenzen = computed(() => {