updated the readme

resources/js/Pages/Home.vue

@@ -29,6 +29,13 @@
       @back="goBackToContextMenu" 
       @close="currentOverlayComponent = null" 
     />
+
+    <StyledImageDisplay
+      v-if="currentOverlayComponent === 'styledImageDisplay'"
+      :image="styledImage"
+      @keep="keepStyledImage"
+      @delete="deleteStyledImage"
+    />
   </div>
 </template>
 
@@ -37,15 +44,17 @@ import Navigation from '../Components/Navigation.vue';
 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 axios from 'axios';
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 
 const images = ref([]);
 const imagesPerPage = 12;
 const currentPage = ref(1);
-const currentOverlayComponent = ref(null); // null, 'contextMenu', 'styleSelector'
+const currentOverlayComponent = ref(null); // null, 'contextMenu', 'styleSelector', 'styledImageDisplay'
 const contextMenuPosition = ref({ x: 0, y: 0 });
 const selectedImage = ref(null);
+const styledImage = ref(null); // To store the newly styled image
 let fetchInterval = null;
 
 const totalPages = computed(() => {
@@ -89,17 +98,37 @@ const goBackToContextMenu = () => {
 
 const applyStyle = (style) => {
   console.log('Applying style:', style.title, 'to image:', selectedImage.value);
+  currentOverlayComponent.value = null; // Close style selector immediately
+  // You might want to show a loading indicator here
+
   axios.post('/api/images/style-change', {
     image_id: selectedImage.value.id,
     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
   })
   .catch(error => {
     console.error('Error applying style:', error);
+    // Handle error, maybe show a notification
   });
-  currentOverlayComponent.value = null;
+};
+
+const keepStyledImage = (imageToKeep) => {
+  console.log('Keeping styled image:', imageToKeep);
+  // Implement API call to mark image as kept/permanent if needed
+  // For now, just refresh the image list to show the new image
+  fetchImages();
+  currentOverlayComponent.value = null; // Close the display
+};
+
+const deleteStyledImage = (imageToDelete) => {
+  console.log('Deleting styled image:', imageToDelete);
+  // Implement API call to delete the temporary styled image
+  currentOverlayComponent.value = null; // Close the display
 };
 
 const prevPage = () => {