the RunwareAI Plugin is working now

resources/js/Pages/Home.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="home">
     <div class="main-content">
-      <div class="gallery-container">
-        <h1 class="text-2xl font-bold text-center my-4">{{ __('gallery_title') }}</h1>
+      <div class="gallery-container" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
+        <h1 class="text-2xl font-bold text-center my-4">Style Gallery</h1>
         <GalleryGrid :images="paginatedImages" @imageTapped="showContextMenu" />
         <Navigation 
           :currentPage="currentPage" 
@@ -25,6 +25,7 @@
     <StyleSelector 
       v-if="currentOverlayComponent === 'styleSelector'" 
       :position="contextMenuPosition" 
+      :image_id="selectedImage.image_id"
       @styleSelected="applyStyle" 
       @back="goBackToContextMenu" 
       @close="currentOverlayComponent = null" 
@@ -39,6 +40,8 @@
       @keep="keepStyledImage"
       @delete="deleteStyledImage"
     />
+
+    <LoadingSpinner v-if="isLoading" />
       </div>
 </template>
 
@@ -48,6 +51,7 @@ import GalleryGrid from '../Components/GalleryGrid.vue';
 import ImageContextMenu from '../Components/ImageContextMenu.vue';
 import StyleSelector from '../Components/StyleSelector.vue';
 import StyledImageDisplay from '../Components/StyledImageDisplay.vue'; // Import the new component
+import LoadingSpinner from '../Components/LoadingSpinner.vue'; // Import the new component
 import axios from 'axios';
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 
@@ -59,7 +63,11 @@ const contextMenuPosition = ref({ x: 0, y: 0 });
 const selectedImage = ref(null);
 const styledImage = ref(null); // To store the newly styled image
 const errorMessage = ref(null); // New ref for error messages
+const isLoading = ref(false); // New ref for loading state
 let fetchInterval = null;
+let touchStartX = 0;
+let touchEndX = 0;
+
 
 const totalPages = computed(() => {
   return Math.ceil(images.value.length / imagesPerPage);
@@ -108,26 +116,27 @@ const goBackToContextMenu = () => {
   currentOverlayComponent.value = 'contextMenu';
 };
 
-const applyStyle = (style) => {
-  console.log('Applying style:', style.title, 'to image:', selectedImage.value);
+const applyStyle = (style, imageId) => {
+  console.log('Applying style:', style.title, 'to image:', imageId);
   currentOverlayComponent.value = null; // Close style selector immediately
-  // You might want to show a loading indicator here
+  isLoading.value = true; // Show loading spinner
 
   axios.post('/api/images/style-change', {
-    image_id: selectedImage.value.id,
+    image_id: imageId,
     style_id: style.id,
   })
   .then(response => {
     console.log('Style change request successful:', response.data);
-    // Assuming the response contains the new styled image data
-    styledImage.value = response.data.styled_image; // Adjust based on your API response structure
-    currentOverlayComponent.value = 'styledImageDisplay'; // Show the new component
+    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
   });
-  currentOverlayComponent.value = null;
 };
 
 const keepStyledImage = (imageToKeep) => {
@@ -156,6 +165,26 @@ const nextPage = () => {
   }
 };
 
+const handleTouchStart = (event) => {
+  touchStartX = event.touches[0].clientX;
+};
+
+const handleTouchEnd = (event) => {
+  touchEndX = event.changedTouches[0].clientX;
+  handleSwipeGesture();
+};
+
+const handleSwipeGesture = () => {
+  const swipeThreshold = 50; // Minimum distance for a swipe
+  if (touchEndX < touchStartX - swipeThreshold) {
+    // Swiped left
+    nextPage();
+  } else if (touchEndX > touchStartX + swipeThreshold) {
+    // Swiped right
+    prevPage();
+  }
+};
+
 onMounted(() => {
   fetchImages();
   fetchInterval = setInterval(fetchImages, 5000);