@stellartech/image-style-widget-directus 1.0.1 → 1.0.2

package/src/composables/useDirectusApi.ts

@@ -1,549 +0,0 @@
-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' },
-];
-
-// Default service URL (used as fallback if WidgetConfig not set)
-const DEFAULT_SERVICE_URL = 'http://localhost:8004';
-
-export function useDirectusApi() {
-  const api = useApi();
-  const loading = ref(false);
-  const error = ref<string | null>(null);
-
-  /**
-   * Fetch the service URL from WidgetConfig singleton collection
-   */
-  async function fetchServiceUrl(): Promise<string> {
-    try {
-      const response = await api.get('/items/WidgetConfig');
-      return response.data.data?.service_url || DEFAULT_SERVICE_URL;
-    } catch (e: any) {
-      console.warn('Failed to fetch service URL, using default:', e.message);
-      return DEFAULT_SERVICE_URL;
-    }
-  }
-
-  /**
-   * Update the service URL in WidgetConfig singleton collection
-   */
-  async function updateServiceUrl(url: string): Promise<boolean> {
-    try {
-      await api.patch('/items/WidgetConfig', {
-        service_url: url,
-      });
-      return true;
-    } catch (e: any) {
-      error.value = e.message || 'Failed to update service URL';
-      return false;
-    }
-  }
-
-  /**
-   * Check if the current user has admin role
-   */
-  async function checkIsAdmin(): Promise<boolean> {
-    try {
-      const response = await api.get('/users/me', {
-        params: {
-          fields: ['role.admin_access'],
-        },
-      });
-      return response.data.data?.role?.admin_access === true;
-    } catch (e: any) {
-      console.warn('Failed to check admin status:', e.message);
-      return false;
-    }
-  }
-
-  /**
-   * 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',
-    serviceUrl: string = DEFAULT_SERVICE_URL
-  ): Promise<string | null> {
-    const miscServiceUrl = `${serviceUrl}/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',
-    serviceUrl: string = DEFAULT_SERVICE_URL
-  ): 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, serviceUrl),
-        generateSingleImage(prompt, model, serviceUrl),
-      ]);
-
-      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',
-    serviceUrl: string = DEFAULT_SERVICE_URL
-  ): 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, serviceUrl),
-        generateSingleImage(prompt2, model, serviceUrl),
-      ]);
-
-      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,
-    serviceUrl: string = DEFAULT_SERVICE_URL
-  ): Promise<PromptGenerationResponse | null> {
-    loading.value = true;
-    error.value = null;
-    
-    try {
-      const miscServiceUrl = `${serviceUrl}/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,
-    fetchServiceUrl,
-    updateServiceUrl,
-    checkIsAdmin,
-    fetchStyles,
-    updateStylePrompt,
-    regenerateStyleExamples,
-    regeneratePlaceholderImages,
-    getFileUrl,
-    generateImagePrompts,
-    getImageVariants,
-    saveGeneratedImages,
-    deleteImageVariant,
-    extractPlaceholders,
-    generateSingleImage,
-    updateContentWithImages,
-    updateLessonContent,
-    fetchLessonContent,
-  };
-}

package/src/index.ts

@@ -1,44 +0,0 @@
-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'],
-});