@stellartech/image-style-widget-directus 1.0.0

package/src/interface.vue

@@ -0,0 +1,970 @@
+git<template>
+  <div class="image-style-widget">
+    <!-- Processing State -->
+    <div v-if="processing" class="widget__processing">
+      <div class="widget__progress">
+        <v-icon name="refresh" class="spinning" />
+        <span>{{ processingMessage }}</span>
+      </div>
+      <div class="widget__progress-bar">
+        <div class="widget__progress-fill" :style="{ width: progressPercent + '%' }"></div>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-else-if="loading && !styles.length" class="widget__loading">
+      <v-icon name="refresh" />
+      <span>Loading styles...</span>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="error" class="widget__error">
+      <v-icon name="error" />
+      <span>{{ error }}</span>
+      <button class="widget__retry" @click="loadStyles">Retry</button>
+    </div>
+
+    <!-- Mode 1: Style Selection -->
+    <template v-else-if="currentMode === 'style-select'">
+      <div class="widget__header">
+        <div class="widget__header-row">
+          <div class="widget__header-text">
+            <h2 class="widget__title">
+              <v-icon name="palette" />
+              Select Image Style
+            </h2>
+            <p class="widget__subtitle">
+              Choose a style for your generated images
+            </p>
+          </div>
+          <div class="widget__model-selector">
+            <label class="widget__model-label">AI Model:</label>
+            <div class="widget__model-buttons">
+              <button
+                v-for="model in IMAGE_MODELS"
+                :key="model.id"
+                class="widget__model-btn"
+                :class="{ 'widget__model-btn--active': selectedModel === model.id }"
+                @click="selectedModel = model.id"
+              >
+                {{ model.name }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="widget__list">
+        <StyleCard
+          v-for="style in styles"
+          :key="style.id"
+          :style="style"
+          :is-selected="selectedStyleId === style.id"
+          :loading="regeneratingStyleId === style.id"
+          :radio-group-name="`style-select-${uid}`"
+          :get-file-url="getFileUrl"
+          @select="handleStyleSelect"
+          @edit="openEditModal(style)"
+          @regenerate="handleStyleRegenerate"
+        />
+      </div>
+
+      <div v-if="styles.length === 0" class="widget__empty">
+        <v-icon name="palette" />
+        <p>No styles available</p>
+        <span>Add styles to the {{ stylesCollection }} collection</span>
+      </div>
+    </template>
+
+    <!-- Mode 2: Image Review -->
+    <template v-else-if="currentMode === 'image-review'">
+      <div class="widget__header">
+        <div class="widget__header-row">
+          <div class="widget__header-text">
+            <h2 class="widget__title">
+              <v-icon name="photo_library" />
+              Review Generated Images
+            </h2>
+            <p class="widget__subtitle">
+              Select the best image for each placeholder
+            </p>
+          </div>
+          <div class="widget__model-selector">
+            <label class="widget__model-label">AI Model:</label>
+            <div class="widget__model-buttons">
+              <button
+                v-for="model in IMAGE_MODELS"
+                :key="model.id"
+                class="widget__model-btn"
+                :class="{ 'widget__model-btn--active': selectedModel === model.id }"
+                @click="selectedModel = model.id"
+              >
+                {{ model.name }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="widget__list">
+        <ImageCard
+          v-for="item in imageItems"
+          :key="item.placeholder"
+          :item="item"
+          :loading="regeneratingPlaceholder === item.placeholder"
+          :get-file-url="getFileUrl"
+          @select-image="handleImageSelect"
+          @edit="openImageEditModal(item)"
+          @regenerate="handleImageRegenerate"
+          @delete="handleImageDelete"
+        />
+      </div>
+
+      <div v-if="imageItems.length === 0" class="widget__empty">
+        <v-icon name="photo_library" />
+        <p>No images to review</p>
+        <span>Generate images first</span>
+      </div>
+    </template>
+
+    <!-- Footer Buttons -->
+    <div class="widget__footer" v-if="!processing">
+      <!-- Back button always visible in image-review mode -->
+      <button 
+        v-if="currentMode === 'image-review'"
+        class="widget__back"
+        @click="goBackToStyleSelect"
+      >
+        <v-icon name="arrow_back" />
+        <span>Back</span>
+      </button>
+      <!-- View Images button in style-select mode when styles exist -->
+      <button 
+        v-if="currentMode === 'style-select' && styles.length > 0"
+        class="widget__view-images"
+        @click="viewGeneratedImages"
+      >
+        <v-icon name="photo_library" />
+        <span>View Generated Images</span>
+      </button>
+      <button 
+        class="widget__confirm"
+        :disabled="!isValid"
+        @click="handleConfirm"
+      >
+        <v-icon :name="currentMode === 'style-select' ? 'arrow_forward' : 'check'" />
+        <span>{{ confirmButtonText }}</span>
+      </button>
+    </div>
+
+    <!-- Edit Modal -->
+    <EditModal
+      :is-open="editModalOpen"
+      :title="editModalTitle"
+      :prompt="editModalPrompt"
+      :saving="savingPrompt"
+      placeholder="Enter prompt text..."
+      @close="closeEditModal"
+      @save="handleSavePrompt"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, inject } from 'vue';
+import StyleCard from './components/StyleCard.vue';
+import ImageCard from './components/ImageCard.vue';
+import EditModal from './components/EditModal.vue';
+import { useDirectusApi, type Style, type GeneratedImageSet, type ImageVariant, type ImageModel, IMAGE_MODELS } from './composables/useDirectusApi';
+import type { ImageItem } from './components/ImageCard.vue';
+
+// Generate unique ID for radio group
+const uid = Math.random().toString(36).substring(2, 9);
+
+// Props from Directus interface options
+const props = withDefaults(defineProps<{
+  value: any;
+  mode?: 'style-select' | 'image-review';
+  stylesCollection?: string;
+  primaryKey?: string | number;
+  collection?: string;
+}>(), {
+  mode: 'style-select',
+  stylesCollection: 'ImageStyles',
+});
+
+const emit = defineEmits<{
+  (e: 'input', value: any): void;
+}>();
+
+// Get injected values from Directus form context
+// In Directus, the 'values' context is provided as a Ref containing all field values
+const injectedValuesRef = inject<any>('values');
+
+// Helper to get actual values (handles both ref and plain object)
+function getValues(): Record<string, any> {
+  if (!injectedValuesRef) return {};
+  // If it's a Vue ref, access .value
+  if (injectedValuesRef.value !== undefined) {
+    return injectedValuesRef.value;
+  }
+  return injectedValuesRef;
+}
+
+// Computed to get the lesson ID
+const lessonId = computed(() => {
+  const vals = getValues();
+  return props.primaryKey || vals?.id || null;
+});
+
+// Computed to get the Description content
+// Note: field name is 'description' (lowercase) in Directus schema
+const lessonContent = computed(() => {
+  const vals = getValues();
+  // Try both 'description' (lowercase - actual field) and 'Description' (for compatibility)
+  const desc = vals?.description || vals?.Description || '';
+  return desc;
+});
+
+// API composable
+const { 
+  loading, 
+  error, 
+  fetchStyles, 
+  updateStylePrompt, 
+  regenerateStyleExamples,
+  regeneratePlaceholderImages,
+  getFileUrl,
+  extractPlaceholders,
+  generateImagePrompts,
+  generateSingleImage,
+  updateContentWithImages,
+  updateLessonContent,
+  fetchLessonContent,
+  getImageVariants,
+  saveGeneratedImages,
+  deleteImageVariant,
+} = useDirectusApi();
+
+// State for mode management (can switch dynamically)
+const currentMode = ref<'style-select' | 'image-review'>(props.mode);
+
+// State for Style Selection mode
+const styles = ref<Style[]>([]);
+const selectedStyleId = ref<string | null>(null);
+const regeneratingStyleId = ref<string | null>(null);
+const selectedModel = ref<ImageModel>('flux-kontext-pro');
+
+// State for Image Review mode
+const imageItems = ref<ImageItem[]>([]);
+const regeneratingPlaceholder = ref<string | null>(null);
+
+// Processing state for generation flow
+const processing = ref(false);
+const processingMessage = ref('');
+const progressPercent = ref(0);
+
+// Edit Modal state
+const editModalOpen = ref(false);
+const editModalTitle = ref('');
+const editModalPrompt = ref('');
+const editingStyle = ref<Style | null>(null);
+const editingImageItem = ref<ImageItem | null>(null);
+const savingPrompt = ref(false);
+
+// Computed
+const canConfirm = computed(() => {
+  if (currentMode.value === 'style-select') {
+    return styles.value.length > 0;
+  }
+  return imageItems.value.length > 0;
+});
+
+const isValid = computed(() => {
+  if (currentMode.value === 'style-select') {
+    return selectedStyleId.value !== null;
+  }
+  return imageItems.value.every(item => item.selected);
+});
+
+const confirmButtonText = computed(() => {
+  if (currentMode.value === 'style-select') {
+    return 'Generate Images';
+  }
+  return 'Confirm Selections';
+});
+
+// Initialize from value prop
+function initFromValue() {
+  if (!props.value) return;
+  
+  if (typeof props.value === 'object') {
+    if (props.value.selectedStyleId) {
+      selectedStyleId.value = props.value.selectedStyleId;
+    }
+    if (props.value.items && props.value.items.length > 0) {
+      imageItems.value = props.value.items;
+      currentMode.value = 'image-review';
+    }
+    if (props.value.currentMode) {
+      currentMode.value = props.value.currentMode;
+    }
+  }
+}
+
+// Load styles for style-select mode
+async function loadStyles() {
+  styles.value = await fetchStyles(props.stylesCollection);
+  
+  // Auto-select first style if none selected
+  if (!selectedStyleId.value && styles.value.length > 0) {
+    selectedStyleId.value = styles.value[0].id;
+  }
+}
+
+// Go back to style selection
+function goBackToStyleSelect() {
+  currentMode.value = 'style-select';
+  emitValue();
+}
+
+// Navigate to view generated images in ImageVariants collection
+async function viewGeneratedImages() {
+  if (!lessonId.value) return;
+  
+  processing.value = true;
+  processingMessage.value = 'Loading existing images...';
+  progressPercent.value = 10;
+  
+  try {
+    // Fetch existing ImageVariants for this lesson
+    const variants = await getImageVariants(String(lessonId.value));
+    
+    progressPercent.value = 50;
+    
+    if (!variants || variants.length === 0) {
+      error.value = 'No generated images found for this lesson. Generate images first.';
+      processing.value = false;
+      return;
+    }
+    
+    // Transform ImageVariants to ImageItem format
+    const existingItems: ImageItem[] = variants.map((variant: ImageVariant) => {
+      const images = variant.images || [];
+      // Get first two images (if available)
+      const img1 = images[0];
+      const img2 = images[1];
+      
+      return {
+        placeholder: variant.title || 'Untitled',
+        prompt1: img1?.prompt || '',
+        prompt2: img2?.prompt || img1?.prompt || '',
+        image1: img1?.image || null,
+        image2: img2?.image || null,
+        selected: img1?.image ? 1 : (img2?.image ? 2 : null),
+      };
+    });
+    
+    progressPercent.value = 90;
+    
+    // Set the image items and switch to review mode
+    imageItems.value = existingItems;
+    currentMode.value = 'image-review';
+    
+    progressPercent.value = 100;
+    emitValue();
+    
+  } catch (e: any) {
+    error.value = e.message || 'Failed to load existing images';
+  } finally {
+    processing.value = false;
+  }
+}
+
+// Handle style selection
+function handleStyleSelect(styleId: string) {
+  selectedStyleId.value = styleId;
+  emitValue();
+}
+
+// Handle style regenerate
+async function handleStyleRegenerate(style: Style) {
+  regeneratingStyleId.value = style.id;
+  
+  const result = await regenerateStyleExamples(style.id, style.prompt, props.stylesCollection, selectedModel.value);
+  
+  if (result) {
+    // Update local style data
+    const index = styles.value.findIndex(s => s.id === style.id);
+    if (index >= 0) {
+      styles.value[index] = {
+        ...styles.value[index],
+        example_1: result.example_1,
+        example_2: result.example_2,
+      };
+    }
+  }
+  
+  regeneratingStyleId.value = null;
+}
+
+// Handle image selection in review mode
+function handleImageSelect(placeholder: string, imageNum: 1 | 2) {
+  const item = imageItems.value.find(i => i.placeholder === placeholder);
+  if (item) {
+    item.selected = imageNum;
+    emitValue();
+  }
+}
+
+// Handle image regenerate
+async function handleImageRegenerate(item: ImageItem) {
+  regeneratingPlaceholder.value = item.placeholder;
+  
+  const result = await regeneratePlaceholderImages(item.prompt1, item.prompt2, selectedModel.value);
+  
+  if (result) {
+    const index = imageItems.value.findIndex(i => i.placeholder === item.placeholder);
+    if (index >= 0) {
+      imageItems.value[index] = {
+        ...imageItems.value[index],
+        image1: result.image1,
+        image2: result.image2,
+        selected: 1, // Reset selection to first image
+      };
+      emitValue();
+    }
+  }
+  
+  regeneratingPlaceholder.value = null;
+}
+
+// Handle image delete
+async function handleImageDelete(item: ImageItem) {
+  if (!lessonId.value) return;
+  
+  // Confirm deletion
+  if (!confirm(`Delete "${item.placeholder}" and its images? This cannot be undone.`)) {
+    return;
+  }
+  
+  regeneratingPlaceholder.value = item.placeholder;
+  
+  const success = await deleteImageVariant(String(lessonId.value), item.placeholder);
+  
+  if (success) {
+    // Remove from local state
+    const index = imageItems.value.findIndex(i => i.placeholder === item.placeholder);
+    if (index >= 0) {
+      imageItems.value.splice(index, 1);
+      emitValue();
+    }
+  }
+  
+  regeneratingPlaceholder.value = null;
+}
+
+// Edit Modal handlers
+function openEditModal(style: Style) {
+  editingStyle.value = style;
+  editingImageItem.value = null;
+  editModalTitle.value = `Style: ${style.name}`;
+  editModalPrompt.value = style.prompt;
+  editModalOpen.value = true;
+}
+
+function openImageEditModal(item: ImageItem) {
+  editingStyle.value = null;
+  editingImageItem.value = item;
+  editModalTitle.value = `Image: ${item.placeholder}`;
+  editModalPrompt.value = item.prompt1;  // Edit prompt1 (used for regeneration)
+  editModalOpen.value = true;
+}
+
+function closeEditModal() {
+  editModalOpen.value = false;
+  editingStyle.value = null;
+  editingImageItem.value = null;
+}
+
+async function handleSavePrompt(newPrompt: string) {
+  savingPrompt.value = true;
+  
+  if (editingStyle.value) {
+    // Save style prompt
+    const success = await updateStylePrompt(
+      props.stylesCollection,
+      editingStyle.value.id,
+      newPrompt
+    );
+    
+    if (success) {
+      const index = styles.value.findIndex(s => s.id === editingStyle.value!.id);
+      if (index >= 0) {
+        styles.value[index] = {
+          ...styles.value[index],
+          prompt: newPrompt,
+        };
+      }
+      closeEditModal();
+    }
+  } else if (editingImageItem.value) {
+    // Save image item prompt (local only - updates prompt1 used for regeneration)
+    const index = imageItems.value.findIndex(
+      i => i.placeholder === editingImageItem.value!.placeholder
+    );
+    if (index >= 0) {
+      imageItems.value[index] = {
+        ...imageItems.value[index],
+        prompt1: newPrompt,
+      };
+      emitValue();
+      closeEditModal();
+    }
+  }
+  
+  savingPrompt.value = false;
+}
+
+// Emit value to Directus
+function emitValue() {
+  emit('input', {
+    currentMode: currentMode.value,
+    selectedStyleId: selectedStyleId.value,
+    selectedStyle: styles.value.find(s => s.id === selectedStyleId.value) || null,
+    items: imageItems.value,
+  });
+}
+
+// Handle confirm
+async function handleConfirm() {
+  if (!isValid.value) return;
+  
+  if (currentMode.value === 'style-select') {
+    // Phase 1: Generate images for placeholders
+    await runImageGenerationFlow();
+  } else {
+    // Phase 2: Apply selected images to content
+    await applySelectedImages();
+  }
+}
+
+// Run the full image generation flow
+async function runImageGenerationFlow() {
+  const selectedStyle = styles.value.find(s => s.id === selectedStyleId.value);
+  
+  // Provide specific error messages
+  if (!selectedStyle) {
+    error.value = 'No style selected. Please select an image style first.';
+    return;
+  }
+  
+  if (!lessonContent.value) {
+    error.value = 'No content available in the Description field. Add text with [image placeholders] first.';
+    return;
+  }
+  
+  processing.value = true;
+  progressPercent.value = 0;
+  
+  try {
+    // Step 1: Generate image prompts using the Python service
+    processingMessage.value = 'Generating image prompts with AI...';
+    progressPercent.value = 10;
+    
+    const promptResponse = await generateImagePrompts(selectedStyle.prompt, lessonContent.value);
+    
+    if (!promptResponse || !promptResponse.images || promptResponse.images.length === 0) {
+      error.value = 'No [image placeholders] found in content. Add placeholders like [Rabbit image] to generate images.';
+      processing.value = false;
+      return;
+    }
+    
+    progressPercent.value = 30;
+    
+    // Step 2: Generate 2 images per placeholder using the AI-generated prompts
+    processingMessage.value = `Generating images for ${promptResponse.images.length} placeholder(s)...`;
+    
+    const newImageItems: ImageItem[] = [];
+    const progressPerItem = 60 / promptResponse.images.length;
+    
+    for (let i = 0; i < promptResponse.images.length; i++) {
+      const imagePrompt = promptResponse.images[i];
+      processingMessage.value = `Generating images for "${imagePrompt.placeholder}"... (${i + 1}/${promptResponse.images.length})`;
+      
+      // Use the 2 AI-generated prompts to create 2 different images
+      const prompt1 = imagePrompt.prompts[0] || `${selectedStyle.prompt}. Subject: ${imagePrompt.placeholder}`;
+      const prompt2 = imagePrompt.prompts[1] || prompt1;
+      
+      // Generate one image per prompt (2 API calls total)
+      const [img1Result, img2Result] = await Promise.all([
+        generateSingleImage(prompt1, selectedModel.value),
+        generateSingleImage(prompt2, selectedModel.value),
+      ]);
+      
+      newImageItems.push({
+        placeholder: imagePrompt.placeholder,
+        prompt1: prompt1,
+        prompt2: prompt2,
+        image1: img1Result,
+        image2: img2Result,
+        selected: img1Result ? 1 : (img2Result ? 2 : null), // Default select first available image
+      });
+      
+      progressPercent.value = 30 + (i + 1) * progressPerItem;
+    }
+    
+    // Step 3: Save generated images to database
+    processingMessage.value = 'Saving generated images...';
+    progressPercent.value = 90;
+    
+    if (lessonId.value) {
+      await saveGeneratedImages(String(lessonId.value), newImageItems);
+    }
+    
+    // Step 4: Switch to image review mode
+    processingMessage.value = 'Preparing image review...';
+    progressPercent.value = 95;
+    
+    imageItems.value = newImageItems;
+    currentMode.value = 'image-review';
+    
+    progressPercent.value = 100;
+    emitValue();
+    
+  } catch (e: any) {
+    error.value = e.message || 'Image generation failed';
+  } finally {
+    processing.value = false;
+  }
+}
+
+// Apply selected images to content
+async function applySelectedImages() {
+  if (!lessonId.value) {
+    error.value = 'No lesson ID available';
+    return;
+  }
+
+  // Capture selections immediately (before any await) so we don't lose them
+  // if props.value watch overwrites imageItems during the async flow
+  const selections = imageItems.value
+    .filter(item => item.selected && (item.selected === 1 ? item.image1 : item.image2))
+    .map(item => ({
+      caption: item.placeholder,
+      fileId: item.selected === 1 ? item.image1! : item.image2!,
+    }));
+
+  if (selections.length === 0) {
+    error.value = 'No images selected. Please select at least one image.';
+    return;
+  }
+
+  processing.value = true;
+  processingMessage.value = 'Fetching current content...';
+  progressPercent.value = 20;
+
+  try {
+    // Fetch the current content directly from the API (more reliable than inject context)
+    const currentContent = await fetchLessonContent(String(lessonId.value));
+
+    if (!currentContent) {
+      error.value = 'Could not fetch lesson content. Make sure Description field has content.';
+      processing.value = false;
+      return;
+    }
+
+    progressPercent.value = 40;
+    processingMessage.value = 'Applying selected images to content...';
+
+    // Update content with HTML image tags (using captured selections)
+    const updatedContent = updateContentWithImages(currentContent, selections);
+    
+    // Save back to lesson
+    progressPercent.value = 80;
+    const success = await updateLessonContent(String(lessonId.value), updatedContent);
+    
+    if (success) {
+      progressPercent.value = 100;
+      processingMessage.value = 'Images applied successfully! Refreshing...';
+      
+      // Reload the page to show updated content
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    } else {
+      error.value = 'Failed to update lesson content';
+    }
+  } catch (e: any) {
+    error.value = e.message || 'Failed to apply images';
+  } finally {
+    processing.value = false;
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  initFromValue();
+  loadStyles();
+});
+
+// Watch for mode changes
+watch(() => props.mode, (newMode) => {
+  if (newMode) {
+    currentMode.value = newMode;
+  }
+});
+
+// Watch for value changes from parent
+watch(() => props.value, () => {
+  initFromValue();
+}, { deep: true });
+</script>
+
+<style scoped>
+.image-style-widget {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.widget__loading,
+.widget__error,
+.widget__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--theme--foreground-subdued, #666);
+}
+
+.widget__loading v-icon,
+.widget__error v-icon,
+.widget__empty v-icon {
+  font-size: 32px;
+}
+
+.widget__error {
+  color: var(--theme--danger, #f44336);
+}
+
+.widget__retry {
+  padding: 8px 16px;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.widget__header {
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);
+}
+
+.widget__header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.widget__header-text {
+  flex: 1;
+}
+
+.widget__model-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-end;
+}
+
+.widget__model-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--theme--foreground-subdued, #666);
+}
+
+.widget__model-buttons {
+  display: flex;
+  gap: 4px;
+  background: var(--theme--background-subdued, #f5f5f5);
+  padding: 4px;
+  border-radius: 6px;
+}
+
+.widget__model-btn {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--theme--foreground-subdued, #666);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.widget__model-btn:hover {
+  color: var(--theme--foreground, #333);
+}
+
+.widget__model-btn--active {
+  background: var(--theme--primary, #6644ff);
+  color: #fff;
+}
+
+.widget__model-btn--active:hover {
+  color: #fff;
+}
+
+.widget__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--theme--foreground, #333);
+}
+
+.widget__subtitle {
+  margin: 4px 0 0 0;
+  font-size: 13px;
+  color: var(--theme--foreground-subdued, #666);
+}
+
+.widget__list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.widget__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 16px;
+  border-top: 1px solid var(--theme--border-color-subdued, #e0e0e0);
+}
+
+.widget__confirm {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  background: var(--theme--primary, #6644ff);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.widget__confirm:hover:not(:disabled) {
+  background: var(--theme--primary-accent, #5533ee);
+}
+
+.widget__confirm:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.widget__back {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: 1px solid var(--theme--border-color, #ccc);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--theme--foreground, #333);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-right: auto;
+}
+
+.widget__back:hover {
+  background: var(--theme--background-subdued, #f0f0f0);
+}
+
+.widget__view-images {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  border: 2px solid var(--theme--primary, #6644ff);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--theme--primary, #6644ff);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.widget__view-images:hover {
+  background: var(--theme--primary-background, #f5f3ff);
+}
+
+.widget__processing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.widget__progress {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--theme--foreground, #333);
+}
+
+.widget__progress-bar {
+  width: 100%;
+  max-width: 300px;
+  height: 6px;
+  background: var(--theme--border-color-subdued, #e0e0e0);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.widget__progress-fill {
+  height: 100%;
+  background: var(--theme--primary, #6644ff);
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.widget__empty p {
+  margin: 0;
+  font-weight: 600;
+  color: var(--theme--foreground, #333);
+}
+
+.widget__empty span {
+  font-size: 13px;
+}
+</style>