Verfügbarkeitstest für API Provider ergänzt.

resources/js/Components/ImageContextMenu.vue

@@ -33,25 +33,66 @@
                 {{ image?.path }}
               </p>
             </div>
-            <button
-              type="button"
-              class="rounded-full border border-white/20 bg-white/10 p-2 text-slate-900 shadow-sm transition hover:border-rose-400 hover:text-rose-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400 dark:text-white"
-              @click="$emit('close')"
-              aria-label="Kontextmenü schließen"
-            >
-              <font-awesome-icon :icon="['fas', 'xmark']" class="h-5 w-5" />
-            </button>
+            <div class="flex items-center gap-2">
+              <div class="relative">
+                <div class="flex items-center gap-2 rounded-full bg-white/80 px-3 py-1.5 text-xs font-medium shadow-sm dark:bg-slate-800/80">
+                  <span class="h-2 w-2 rounded-full"
+                        :class="aiAvailable ? 'bg-emerald-500' : 'bg-rose-500'"></span>
+                  <span class="text-slate-600 dark:text-slate-300">
+                    AI {{ aiAvailable ? 'verfügbar' : 'nicht verfügbar' }}
+                  </span>
+                  <button @click="showAiStatusDetails = !showAiStatusDetails"
+                          class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200">
+                    <font-awesome-icon :icon="['fas', 'info-circle']" class="h-3.5 w-3.5"/>
+                  </button>
+                </div>
+                <div v-if="showAiStatusDetails"
+                     class="absolute right-0 mt-2 w-64 rounded-lg bg-white p-3 shadow-lg dark:bg-slate-800">
+                  <div class="space-y-2 text-sm">
+                    <div class="flex justify-between">
+                      <span class="font-medium">API-Provider Status:</span>
+                      <span :class="aiAvailable ? 'text-emerald-600' : 'text-rose-600'">
+                        {{ aiAvailable ? 'Online' : 'Offline' }}
+                      </span>
+                    </div>
+                    <div v-if="!aiAvailable" class="text-xs text-slate-500">
+                      Einige Funktionen sind derzeit nicht verfügbar
+                    </div>
+                    <button @click="refreshAiStatus"
+                            class="mt-2 w-full rounded-md bg-slate-100 px-2 py-1 text-xs hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600">
+                      Status aktualisieren
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <button
+                type="button"
+                class="rounded-full border border-white/20 bg-white/10 p-2 text-slate-900 shadow-sm transition hover:border-rose-400 hover:text-rose-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400 dark:text-white"
+                @click="$emit('close')"
+                aria-label="Kontextmenü schließen"
+              >
+                <font-awesome-icon :icon="['fas', 'xmark']" class="h-5 w-5" />
+              </button>
+            </div>
           </div>
 
           <div v-if="!showStyleSelectorView" class="space-y-3">
             <button
               type="button"
-              class="flex w-full items-center justify-between gap-3 rounded-2xl border border-white/20 bg-white/40 px-4 py-3 text-left font-semibold text-slate-900 transition hover:border-emerald-400 hover:bg-white/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 dark:border-white/10 dark:bg-white/5 dark:text-white"
+              class="flex w-full items-center justify-between gap-3 rounded-2xl border px-4 py-3 text-left font-semibold text-slate-900 transition focus:outline-none focus-visible:ring-2 dark:text-white"
+              :class="[aiAvailable ? 'border-white/20 bg-white/40 hover:border-emerald-400 hover:bg-white/70 dark:border-white/10 dark:bg-white/5' : 'border-rose-200 bg-rose-50 cursor-not-allowed opacity-70']"
+              :disabled="!aiAvailable"
               @click="showStyleSelectorView = true"
             >
-              <div>
-                <p class="text-base">Stile anzeigen</p>
-                <p class="text-sm font-normal text-slate-500 dark:text-slate-400">Lass die KI dein Motiv verzaubern.</p>
+              <div class="flex items-center gap-3">
+                <span class="h-2 w-2 rounded-full"
+                      :class="aiAvailable ? 'bg-emerald-500' : 'bg-rose-500'"></span>
+                <div>
+                  <p class="text-base">Stile anzeigen</p>
+                  <p class="text-sm font-normal text-slate-500 dark:text-slate-400">
+                    {{ aiAvailable ? 'Lass die KI dein Motiv verzaubern' : 'AI-Dienste derzeit nicht verfügbar' }}
+                  </p>
+                </div>
               </div>
               <span class="flex h-12 w-12 items-center justify-center rounded-full bg-white/60 text-slate-900 shadow-md dark:bg-slate-800/70 dark:text-white">
                 <font-awesome-icon :icon="['fas', 'magic-wand-sparkles']" class="h-5 w-5" />
@@ -129,9 +170,10 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 import StyleSelector from './StyleSelector.vue';
+import axios from 'axios';
 
 const page = usePage();
 
@@ -157,6 +199,31 @@ const shouldShowDownload = computed(() => {
 });
 
 const showStyleSelectorView = ref(false);
+const aiAvailable = ref(false);
+const aiStatus = ref({});
+const showAiStatusDetails = ref(false);
+
+const checkAiStatus = async () => {
+  try {
+    const response = await axios.get('/api/ai-status');
+    aiStatus.value = response.data;
+    aiAvailable.value = response.data.some(provider => provider.available);
+  } catch (error) {
+    console.error('Error checking AI status:', error);
+    aiAvailable.value = false;
+  }
+};
+
+const refreshAiStatus = async () => {
+  await checkAiStatus();
+  showAiStatusDetails.value = false;
+};
+
+onMounted(() => {
+  checkAiStatus();
+  // Check every 5 minutes
+  setInterval(checkAiStatus, 300000);
+});
 
 watch(
   () => props.image,

resources/js/Components/StyleSelector.vue

@@ -54,11 +54,12 @@
 
 <script setup>
 import axios from 'axios';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 
 const styles = ref([]);
 const isLoading = ref(true);
 const loadError = ref(null);
+const aiAvailable = ref(true);
 
 const props = defineProps({
   image_id: {
@@ -69,21 +70,35 @@ const props = defineProps({
 
 const emits = defineEmits(['styleSelected', 'close']);
 
-const fetchStyles = () => {
+const fetchStyles = async () => {
   isLoading.value = true;
   loadError.value = null;
-  axios
-    .get('/api/styles')
-    .then((response) => {
-      styles.value = response.data;
-    })
-    .catch((error) => {
-      console.error('Error fetching styles:', error);
-      loadError.value = 'Stile konnten nicht geladen werden.';
-    })
-    .finally(() => {
+
+  try {
+    // Check AI availability first
+    const aiStatusResponse = await axios.get('/api/ai-status');
+    const aiStatus = aiStatusResponse.data;
+    aiAvailable.value = aiStatus.some(provider => provider.available);
+
+    if (!aiAvailable.value) {
+      loadError.value = 'AI-Dienste sind derzeit nicht verfügbar. Bitte versuchen Sie es später erneut.';
       isLoading.value = false;
+      return;
+    }
+
+    // Fetch styles only if AI is available
+    const stylesResponse = await axios.get('/api/styles');
+    styles.value = stylesResponse.data.filter(style => {
+      // Only show styles from available providers
+      return style.ai_model && style.ai_model.api_provider && style.ai_model.api_provider.enabled;
     });
+
+  } catch (error) {
+    console.error('Error fetching styles:', error);
+    loadError.value = 'Stile konnten nicht geladen werden.';
+  } finally {
+    isLoading.value = false;
+  }
 };
 
 const selectStyle = (style) => {