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

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) => {