upgrade to laravel 12 done

resources/js/Components/LoadingSpinner.vue

@@ -3,12 +3,20 @@
         <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>
+            <p v-if="progress > 0" class="text-gray-700 text-sm mt-2">{{ progress }}%</p>
         </div>
     </div>
 </template>
 
 <script setup>
-// No script logic needed for a simple spinner
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  progress: {
+    type: Number,
+    default: 0,
+  },
+});
 </script>
 
 <style scoped>

resources/js/Pages/Home.vue

@@ -38,7 +38,7 @@
       @delete="deleteStyledImage"
     />
 
-    <LoadingSpinner v-if="isLoading" />
+    <LoadingSpinner v-if="isLoading" :progress="processingProgress" />
       </div>
 </template>
 
@@ -79,6 +79,8 @@ const currentOverlayComponent = ref(null); // null, 'contextMenu', 'styleSelecto
 const contextMenuPosition = ref({ x: 0, y: 0 });
 const selectedImage = ref(null);
 const styledImage = ref(null); // To store the newly styled image
+const processingImageUuid = ref(null); // To store the UUID of the image being processed
+const processingProgress = ref(0); // To store the progress percentage
 const errorMessage = ref(null); // New ref for error messages
 const isLoading = ref(false); // New ref for loading state
 const currentTheme = ref('light'); // New ref for current theme
@@ -138,23 +140,91 @@ const applyStyle = (style, imageId) => {
   console.log('Applying style:', style.title, 'to image:', imageId);
   currentOverlayComponent.value = null; // Close style selector immediately
   isLoading.value = true; // Show loading spinner
+  processingImageUuid.value = selectedImage.value.uuid; // Set the UUID of the image being processed
+  processingProgress.value = 0; // Reset progress
 
-  axios.post('/api/images/style-change', {
-    image_id: imageId,
-    style_id: style.id,
-  })
-  .then(response => {
-    console.log('Style change request successful:', response.data);
-    styledImage.value = response.data.styled_image;
-    currentOverlayComponent.value = 'styledImageDisplay';
-  })
-  .catch(error => {
-    console.error('Error applying style:', error);
-    showError(error.response?.data?.error || 'Failed to apply style.');
-  })
-  .finally(() => {
-    isLoading.value = false; // Hide loading spinner
-  });
+  axios.get('/api/comfyui-url')
+    .then(response => {
+      const comfyUiBaseUrl = response.data.comfyui_url;
+      const wsUrl = `ws://${new URL(comfyUiBaseUrl).host}/ws`;
+      const ws = new WebSocket(wsUrl);
+
+      ws.onopen = () => {
+        console.log('WebSocket connected to ComfyUI.');
+        // Send prompt to ComfyUI via HTTP, then listen for progress via WS
+        axios.post('/api/images/style-change', {
+          image_id: imageId,
+          style_id: style.id,
+        })
+        .then(response => {
+          console.log('Style change request sent:', response.data);
+          // Store the prompt_id from the backend response
+          const promptId = response.data.prompt_id;
+
+          ws.onmessage = (event) => {
+        const message = JSON.parse(event.data);
+        if (message.type === 'progress') {
+          console.log('ComfyUI Progress Message:', message);
+          const { value, max } = message.data;
+          const progress = (max > 0) ? (value / max) * 100 : 0;
+          if (message.data.prompt_id === promptId) {
+            processingProgress.value = progress;
+
+            if (processingProgress.value >= 100) {
+              console.log('Frontend: Progress reached 100%. Attempting to fetch final image.', { promptId: promptId });
+              // Fetch the final styled image from the backend
+              axios.get(`/api/images/fetch-styled/${promptId}`)
+                .then(imageResponse => {
+                  console.log('Frontend: Successfully fetched styled image.', imageResponse.data);
+                  styledImage.value = imageResponse.data.styled_image;
+                  currentOverlayComponent.value = 'styledImageDisplay';
+                  fetchImages(); // Refresh gallery
+                })
+                .catch(imageError => {
+                  console.error('Frontend: Error fetching styled image:', imageError.response?.data?.error || imageError.message);
+                  showError(imageError.response?.data?.error || 'Failed to fetch styled image.');
+                })
+                .finally(() => {
+                  console.log('Frontend: Final fetch process completed.');
+                  isLoading.value = false;
+                  processingImageUuid.value = null;
+                  processingProgress.value = 0;
+                  ws.close();
+                });
+            }
+          }
+        } else {
+          console.warn('Received unexpected WebSocket message type:', message.type, message);
+        }
+      };
+        })
+        .catch(error => {
+          console.error('Error applying style:', error);
+          showError(error.response?.data?.error || 'Failed to apply style.');
+          isLoading.value = false;
+          processingImageUuid.value = null;
+          processingProgress.value = 0;
+          ws.close();
+        });
+      };
+
+      ws.onerror = (error) => {
+        console.error('WebSocket error:', error);
+        showError('WebSocket connection error.');
+        isLoading.value = false;
+        processingImageUuid.value = null;
+        processingProgress.value = 0;
+      };
+
+      ws.onclose = () => {
+        console.log('WebSocket closed.');
+      };
+    })
+    .catch(error => {
+      console.error('Error fetching ComfyUI URL:', error);
+      showError(error.response?.data?.error || 'Failed to get ComfyUI URL.');
+      isLoading.value = false;
+    });
 };
 
 const keepStyledImage = (imageToKeep) => {

resources/js/bootstrap.js

@@ -9,6 +9,12 @@ window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
 /**
  * Echo exposes an expressive API for subscribing to channels and listening
  * for events that are broadcast by Laravel. Echo and event broadcasting