the RunwareAI Plugin is working now

resources/js/Components/LoadingSpinner.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+        <div class="bg-white p-6 rounded-lg shadow-lg text-center flex flex-col items-center">
+            <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"></div>
+            <p class="text-gray-700 text-lg">{{ __('loading_spinner.processing_image') }}</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// No script logic needed for a simple spinner
+</script>
+
+<style scoped>
+.loader {
+  border-top-color: #3498db; /* Blue color for the spinner */
+  -webkit-animation: spinner 1.5s linear infinite;
+  animation: spinner 1.5s linear infinite;
+}
+
+@-webkit-keyframes spinner {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spinner {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>

resources/js/Components/StyleSelector.vue

@@ -10,7 +10,7 @@
           v-for="style in styles"
           :key="style.id"
           class="style-item"
-          @click="$emit('styleSelected', style)"
+          @click="selectStyle(style)"
         >
           <img :src="'/storage/' + style.preview_image" :alt="style.title" class="style-thumbnail" />
           <div class="style-details">
@@ -29,6 +29,19 @@ import { ref, onMounted } from 'vue';
 
 const styles = ref([]);
 
+const props = defineProps({
+  position: {
+    type: Object,
+    required: true,
+  },
+  image_id: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emits = defineEmits(['styleSelected', 'back', 'close']);
+
 const fetchStyles = () => {
   axios.get('/api/styles')
     .then(response => {
@@ -39,18 +52,14 @@ const fetchStyles = () => {
     });
 };
 
+const selectStyle = (style) => {
+  console.log('StyleSelector.vue: emitting styleSelected with image_id:', props.image_id);
+  emits('styleSelected', style, props.image_id);
+};
+
 onMounted(() => {
   fetchStyles();
 });
-
-const props = defineProps({
-  position: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emits = defineEmits(['styleSelected', 'back', 'close']);
 </script>
 
 <style scoped>

resources/js/Components/StyledImageDisplay.vue

@@ -32,6 +32,8 @@ const props = defineProps({
 });
 
 const emits = defineEmits(['keep', 'delete']);
+
+console.log('StyledImageDisplay: image prop:', props.image);
 </script>
 
 <style scoped>