@stellartech/image-style-widget-directus 1.0.0

package/src/composables/useDirectusApi.ts

@@ -0,0 +1,493 @@
+import { useApi } from '@directus/extensions-sdk';
+import { ref } from 'vue';
+
+export interface Style {
+  id: string;
+  name: string;
+  prompt: string;
+  example_1: string | null;
+  example_2: string | null;
+  is_active: boolean;
+  sort: number;
+}
+
+export interface RegenerateResponse {
+  file_id: string;
+  url: string;
+}
+
+export interface ContentImage {
+  id: number;
+  image: string | null;  // file UUID
+  prompt: string | null;
+  status: string;
+}
+
+export interface ImageVariant {
+  id: string;
+  title: string;  // placeholder/caption
+  status: string;
+  lesson?: string;
+  images?: ContentImage[];  // related ContentImage items
+}
+
+export interface GeneratedImageSet {
+  placeholder: string;
+  prompt: string;
+  image1: string | null;
+  image2: string | null;
+  selected: number | null;
+}
+
+// Response from the prompt generation service
+export interface ImagePrompt {
+  placeholder: string;
+  prompts: string[];
+}
+
+export interface PromptGenerationResponse {
+  images: ImagePrompt[];
+}
+
+// Supported image generation models
+export type ImageModel = 'flux-kontext-pro' | 'gemini-2.5-flash-image';
+
+export const IMAGE_MODELS: { id: ImageModel; name: string }[] = [
+  { id: 'flux-kontext-pro', name: 'Flux' },
+  { id: 'gemini-2.5-flash-image', name: 'Nano Banana' },
+];
+
+const MISC_SERVICE_URL = 'http://localhost:8004';
+
+export function useDirectusApi() {
+  const api = useApi();
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  /**
+   * Fetch all active styles from the ImageStyles collection
+   */
+  async function fetchStyles(collection: string = 'ImageStyles'): Promise<Style[]> {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      const response = await api.get(`/items/${collection}`, {
+        params: {
+          filter: { is_active: { _eq: true } },
+          sort: ['sort'],
+          fields: ['id', 'name', 'prompt', 'example_1', 'example_2', 'is_active', 'sort'],
+        },
+      });
+      return response.data.data || [];
+    } catch (e: any) {
+      error.value = e.message || 'Failed to fetch styles';
+      return [];
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Update a style's prompt
+   */
+  async function updateStylePrompt(collection: string, styleId: string, newPrompt: string): Promise<boolean> {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      await api.patch(`/items/${collection}/${styleId}`, {
+        prompt: newPrompt,
+      });
+      return true;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to update prompt';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Helper function to generate a single image via misc service
+   */
+  async function generateSingleImage(prompt: string, model: ImageModel = 'flux-kontext-pro'): Promise<string | null> {
+    const miscServiceUrl = `${MISC_SERVICE_URL}/api/misc/images/upload`;
+    
+    const response = await fetch(miscServiceUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        prompt,
+        model,
+        format: 'png',
+        aspect_ratio: '16:9',
+      })
+    });
+    
+    if (!response.ok) {
+      throw new Error(`Image generation failed: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    return data?.id || null;  // Backend returns 'id' not 'file_id'
+  }
+
+  /**
+   * Regenerate example images for a style
+   */
+  async function regenerateStyleExamples(
+    styleId: string,
+    prompt: string,
+    collection: string = 'ImageStyles',
+    model: ImageModel = 'flux-kontext-pro'
+  ): Promise<{ example_1: string; example_2: string } | null> {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      // Generate two new images via misc service directly
+      const [example_1, example_2] = await Promise.all([
+        generateSingleImage(prompt, model),
+        generateSingleImage(prompt, model),
+      ]);
+
+      if (example_1 && example_2) {
+        // Update the style with new example images
+        await api.patch(`/items/${collection}/${styleId}`, {
+          example_1,
+          example_2,
+        });
+        return { example_1, example_2 };
+      }
+      
+      error.value = 'Failed to generate images';
+      return null;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to regenerate images';
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Regenerate images for a specific placeholder using both prompts
+   */
+  async function regeneratePlaceholderImages(
+    prompt1: string,
+    prompt2: string,
+    model: ImageModel = 'flux-kontext-pro'
+  ): Promise<{ image1: string; image2: string } | null> {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      // Generate one image per prompt
+      const [image1, image2] = await Promise.all([
+        generateSingleImage(prompt1, model),
+        generateSingleImage(prompt2, model),
+      ]);
+
+      if (image1 && image2) {
+        return { image1, image2 };
+      }
+      
+      error.value = 'Failed to generate images';
+      return null;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to regenerate images';
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Get the URL for a file by its ID
+   */
+  function getFileUrl(fileId: string | null): string {
+    if (!fileId) return '';
+    return `/assets/${fileId}?width=200&height=200&fit=cover`;
+  }
+
+  /**
+   * Generate image prompts using the Python misc service
+   * Calls the misc service directly (not through Directus)
+   */
+  async function generateImagePrompts(
+    style: string,
+    description: string
+  ): Promise<PromptGenerationResponse | null> {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      const miscServiceUrl = `${MISC_SERVICE_URL}/api/misc/prompts`;
+      
+      const response = await fetch(miscServiceUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          style,
+          description,
+          model: 'gpt-4o-mini'
+        })
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ detail: response.statusText }));
+        throw new Error(errorData.detail || `HTTP ${response.status}`);
+      }
+      
+      return await response.json() as PromptGenerationResponse;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to generate image prompts';
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Get ImageVariants created for a specific lesson, including their images
+   */
+  async function getImageVariants(lessonId: string): Promise<ImageVariant[]> {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      const response = await api.get('/items/ImageVariants', {
+        params: {
+          filter: { lesson: { _eq: lessonId } },
+          fields: ['id', 'title', 'status', 'lesson', 'images.id', 'images.image', 'images.prompt', 'images.status'],
+        },
+      });
+      return response.data.data || [];
+    } catch (e: any) {
+      error.value = e.message || 'Failed to fetch image variants';
+      return [];
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Save generated images to ImageVariants and ContentImage collections
+   */
+  async function saveGeneratedImages(
+    lessonId: string,
+    items: Array<{
+      placeholder: string;
+      prompt1: string;
+      prompt2: string;
+      image1: string | null;
+      image2: string | null;
+    }>
+  ): Promise<boolean> {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      for (const item of items) {
+        // Create ImageVariant record
+        const variantResponse = await api.post('/items/ImageVariants', {
+          title: item.placeholder,
+          lesson: lessonId,
+          status: 'found',
+        });
+        
+        const variantId = variantResponse.data.data.id;
+        
+        // Create ContentImage records for each image
+        const contentImages = [];
+        
+        if (item.image1) {
+          contentImages.push({
+            image: item.image1,
+            prompt: item.prompt1,
+            variants: variantId,
+            status: 'generated',
+          });
+        }
+        
+        if (item.image2) {
+          contentImages.push({
+            image: item.image2,
+            prompt: item.prompt2,
+            variants: variantId,
+            status: 'generated',
+          });
+        }
+        
+        // Batch create ContentImage records
+        if (contentImages.length > 0) {
+          await api.post('/items/ContentImage', contentImages);
+        }
+      }
+      
+      return true;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to save generated images';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Delete an ImageVariant and its associated ContentImage records and files
+   */
+  async function deleteImageVariant(lessonId: string, placeholder: string): Promise<boolean> {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      // Find the ImageVariant by lesson and title (placeholder), including image file IDs
+      const response = await api.get('/items/ImageVariants', {
+        params: {
+          filter: { 
+            lesson: { _eq: lessonId },
+            title: { _eq: placeholder }
+          },
+          fields: ['id', 'images.id', 'images.image'],
+        },
+      });
+      
+      const variants = response.data.data || [];
+      
+      for (const variant of variants) {
+        // Collect file IDs to delete
+        const fileIdsToDelete: string[] = [];
+        
+        // Delete associated ContentImage records first
+        if (variant.images && variant.images.length > 0) {
+          for (const img of variant.images) {
+            // Collect the file ID if present
+            if (img.image) {
+              fileIdsToDelete.push(img.image);
+            }
+            // Delete the ContentImage record
+            await api.delete(`/items/ContentImage/${img.id}`);
+          }
+        }
+        
+        // Delete the ImageVariant
+        await api.delete(`/items/ImageVariants/${variant.id}`);
+        
+        // Delete the actual files from directus_files
+        for (const fileId of fileIdsToDelete) {
+          try {
+            await api.delete(`/files/${fileId}`);
+          } catch (fileError: any) {
+            // Log but don't fail if file deletion fails (file might already be deleted)
+            console.warn(`Failed to delete file ${fileId}:`, fileError.message);
+          }
+        }
+      }
+      
+      return true;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to delete image variant';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Extract [placeholder] patterns from content
+   */
+  function extractPlaceholders(content: string): string[] {
+    const regex = /\[([^\]]+)\]/g;
+    const matches: string[] = [];
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+      matches.push(match[1]);
+    }
+    return matches;
+  }
+
+  /**
+   * Update lesson content by replacing [placeholder] with HTML image tag
+   * Uses HTML format for WYSIWYG compatibility
+   */
+  function updateContentWithImages(
+    content: string,
+    selections: { caption: string; fileId: string }[]
+  ): string {
+    let updated = content;
+    for (const { caption, fileId } of selections) {
+      const placeholder = `[${caption}]`;
+      const html = `<img src="/assets/${fileId}" alt="${caption}" />`;
+      updated = updated.replace(placeholder, html);
+    }
+    return updated;
+  }
+
+  /**
+   * Save updated content back to the lesson
+   * Note: field name is 'description' (lowercase) in Directus schema
+   */
+  async function updateLessonContent(
+    lessonId: string,
+    content: string
+  ): Promise<boolean> {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      await api.patch(`/items/SM_Lessons/${lessonId}`, {
+        description: content,
+      });
+      return true;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to update lesson content';
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Fetch lesson content from the API
+   * This is more reliable than relying on inject('values') context
+   */
+  async function fetchLessonContent(lessonId: string): Promise<string | null> {
+    try {
+      const response = await api.get(`/items/SM_Lessons/${lessonId}`, {
+        params: {
+          fields: ['description'],
+        },
+      });
+      // Try both lowercase and capitalized field names for compatibility
+      return response.data.data?.description || response.data.data?.Description || null;
+    } catch (e: any) {
+      console.error('Failed to fetch lesson content:', e);
+      return null;
+    }
+  }
+
+  return {
+    loading,
+    error,
+    fetchStyles,
+    updateStylePrompt,
+    regenerateStyleExamples,
+    regeneratePlaceholderImages,
+    getFileUrl,
+    generateImagePrompts,
+    getImageVariants,
+    saveGeneratedImages,
+    deleteImageVariant,
+    extractPlaceholders,
+    generateSingleImage,
+    updateContentWithImages,
+    updateLessonContent,
+    fetchLessonContent,
+  };
+}

package/src/index.ts

@@ -0,0 +1,44 @@
+import { defineInterface } from '@directus/extensions-sdk';
+import InterfaceComponent from './interface.vue';
+
+export default defineInterface({
+  id: 'image-style-widget',
+  name: 'Image Style Widget',
+  icon: 'palette',
+  description: 'Visual style selector and image reviewer',
+  component: InterfaceComponent,
+  options: [
+    {
+      field: 'mode',
+      name: 'Mode',
+      type: 'string',
+      meta: {
+        width: 'half',
+        interface: 'select-dropdown',
+        options: {
+          choices: [
+            { text: 'Style Selection', value: 'style-select' },
+            { text: 'Image Review', value: 'image-review' },
+          ],
+        },
+      },
+      schema: {
+        default_value: 'style-select',
+      },
+    },
+    {
+      field: 'stylesCollection',
+      name: 'Styles Collection',
+      type: 'string',
+      meta: {
+        width: 'half',
+        interface: 'input',
+        note: 'Collection containing style definitions (default: ImageStyles)',
+      },
+      schema: {
+        default_value: 'ImageStyles',
+      },
+    },
+  ],
+  types: ['json', 'string'],
+});