feat: add image editing support with debug logging capabilities

Author: jchris

examples/react-example/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { ImgGen } from 'use-vibes';
 import { useFireproof } from 'use-fireproof';
 import type { DocBase, DocFileMeta } from 'use-fireproof';
@@ -18,6 +18,9 @@ function App() {
   const [isGenerating, setIsGenerating] = useState(false);
   const [selectedImageId, setSelectedImageId] = useState<string | undefined>();
   const [quality, setQuality] = useState<'low' | 'medium' | 'high' | 'auto'>('low');
+  const [uploadedImage, setUploadedImage] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Use Fireproof to query all images
   const { useLiveQuery } = useFireproof('ImgGen');
@@ -57,6 +60,28 @@ function App() {
     setIsGenerating(false);
   };
 
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      setUploadedImage(file);
+
+      // Create preview URL for the uploaded image
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        setImagePreview(event.target?.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleClearImage = () => {
+    setUploadedImage(null);
+    setImagePreview(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
   // Get all documents with type: 'image'
   const { docs: imageDocuments } = useLiveQuery<ImageDocument>('type', {
     key: 'image',
@@ -118,16 +143,55 @@ function App() {
           className="generate-button"
           disabled={isGenerating || !inputPrompt.trim()}
         >
-          {isGenerating ? 'Generating...' : 'Generate Image'}
+          {isGenerating ? 'Generating...' : uploadedImage ? 'Edit Image' : 'Generate Image'}
         </button>
       </form>
 
+      <div className="image-upload-container" style={{ marginTop: '20px', marginBottom: '20px' }}>
+        <h3>Upload an image to edit</h3>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleImageUpload}
+            ref={fileInputRef}
+            style={{ flexGrow: 1 }}
+          />
+          {uploadedImage && (
+            <button
+              onClick={handleClearImage}
+              style={{
+                padding: '5px 10px',
+                backgroundColor: '#f44336',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              Clear
+            </button>
+          )}
+        </div>
+        {imagePreview && (
+          <div style={{ marginTop: '10px', maxWidth: '300px' }}>
+            <img
+              src={imagePreview}
+              alt="Preview"
+              style={{ width: '100%', borderRadius: '8px', border: '2px solid #ddd' }}
+            />
+          </div>
+        )}
+      </div>
+
       <div className="img-wrapper">
         <ImgGen
           prompt={activePrompt}
           _id={selectedImageId}
+          images={uploadedImage ? [uploadedImage] : undefined}
           options={{
-            quality: quality,
+            debug: true,
+            quality,
             imgUrl: 'https://vibecode.garden',
             size: '1024x1024',
           }}

src/components/ImgGen.tsx

@@ -3,6 +3,7 @@ import { v4 as uuid } from 'uuid';
 import type { ImageGenOptions } from 'call-ai';
 import { useImageGen } from '../hooks/image-gen/use-image-gen';
 import { useFireproof, Database } from 'use-fireproof';
+import { setDebugMode } from '../hooks/image-gen/types';
 import { ImageDocument } from '../hooks/image-gen/types';
 import {
   ImgGenPromptWaiting,
@@ -32,6 +33,9 @@ export interface ImgGenProps {
   /** Image generation options */
   options?: ImageGenOptions;
 
+  /** Enable debug logging */
+  debug?: boolean;
+
   /** Database name or instance to use for storing images */
   database?: string | Database;
 
@@ -79,8 +83,16 @@ function ImgGenCore(props: ImgGenProps): React.ReactElement {
     onDelete,
     onPromptEdit,
     classes = defaultClasses,
+    debug,
   } = props;
 
+  // Set debug mode based on prop
+  React.useEffect(() => {
+    if (debug) {
+      setDebugMode(true);
+    }
+  }, [debug]);
+
   // Get access to the Fireproof database directly
   const { database: db } = useFireproof(database || 'ImgGen');
 
@@ -348,7 +360,15 @@ function ImgGenCore(props: ImgGenProps): React.ReactElement {
 export function ImgGen(props: ImgGenProps): React.ReactElement {
   // Destructure key props for identity-change tracking
   // classes prop is used via the props spread to ImgGenCore
-  const { _id, prompt } = props;
+  const { _id, prompt, debug } = props;
+
+  // Enable debug mode if requested
+  React.useEffect(() => {
+    if (debug) {
+      setDebugMode(true);
+      console.log('[ImgGen] Debug mode enabled, images prop:', props.images);
+    }
+  }, [debug, props.images]);
 
   // Generate a unique mountKey for this instance
   const [mountKey, setMountKey] = React.useState(() => uuid());

src/hooks/image-gen/image-generator.ts

@@ -4,6 +4,7 @@ import {
   imageGen as originalImageGen,
 } from 'call-ai';
 import { MODULE_STATE, getRelevantOptions } from './utils';
+import { DEBUG_MODE } from './types';
 
 // Extend the ImageGenOptions type to include our regeneration ID
 interface ImageGenOptions extends BaseImageGenOptions {
@@ -15,6 +16,24 @@ interface ImageGenOptions extends BaseImageGenOptions {
  * This function maintains a module-level cache to prevent duplicate API calls
  */
 export function imageGen(prompt: string, options?: ImageGenOptions): Promise<ImageResponse> {
+  // Debug: Log options if debug mode is enabled
+  if (DEBUG_MODE) {
+    console.log('[ImgGen Debug] imageGen called with prompt:', prompt);
+    console.log('[ImgGen Debug] imageGen options:', options);
+    if (options?.images) {
+      console.log('[ImgGen Debug] imageGen images:', {
+        count: options.images.length,
+        fileInfo: options.images.map((img) => ({
+          name: img.name,
+          type: img.type,
+          size: img.size,
+        })),
+      });
+    } else {
+      console.log('[ImgGen Debug] No images provided in options');
+    }
+  }
+
   // Get the relevant options to form a stable key
   const relevantOptions = getRelevantOptions(options);
 
@@ -47,6 +66,9 @@ export function imageGen(prompt: string, options?: ImageGenOptions): Promise<Ima
 
   try {
     // Direct import from call-ai - this works consistently with test mocks
+    if (DEBUG_MODE) {
+      console.log(`[ImgGen Debug] Calling originalImageGen for request #${requestId}`);
+    }
     promise = originalImageGen(prompt, options);
   } catch (e) {
     console.error(`[ImgGen Debug] Error with imageGen for request #${requestId}:`, e);
@@ -85,6 +107,13 @@ export function createImageGenerator(requestHash: string) {
     // Options key no longer used for logging
     JSON.stringify(getRelevantOptions(genOptions)); // Still generate to maintain behavior
 
+    // Debug: Log options if debug mode is enabled
+    if (DEBUG_MODE) {
+      console.log(`[ImgGen Debug] createImageGenerator wrapper called [ID:${requestHash}]`);
+      console.log('[ImgGen Debug] Prompt:', promptText);
+      console.log('[ImgGen Debug] Full genOptions:', genOptions);
+    }
+
     // Log detailed information about this request - including request hash and options
 
     try {

src/hooks/image-gen/types.ts

@@ -1,6 +1,17 @@
 import type { DocFileMeta, Database } from 'use-fireproof';
 import { ImageGenOptions, ImageResponse } from 'call-ai';
 
+// Global debug mode flag
+export let DEBUG_MODE = false;
+
+// Function to set debug mode
+export function setDebugMode(enabled: boolean): void {
+  DEBUG_MODE = enabled;
+  if (DEBUG_MODE) {
+    console.log('[ImgGen Debug] Debug mode enabled');
+  }
+}
+
 // Interface for our image documents in Fireproof
 // Interface for prompt entry
 export interface PromptEntry {

src/hooks/image-gen/use-image-gen.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { useFireproof } from 'use-fireproof';
 import { ImageResponse } from 'call-ai';
-import { UseImageGenOptions, UseImageGenResult, ImageDocument } from './types';
+import { UseImageGenOptions, UseImageGenResult, ImageDocument, DEBUG_MODE } from './types';
 
 import {
   hashInput,
@@ -48,16 +48,44 @@ export function useImageGen({
   const size = options?.size || '1024x1024';
   const [width, height] = size.split('x').map(Number);
 
+  // Debug logging for options and images prop
+  useEffect(() => {
+    if (DEBUG_MODE) {
+      console.log('[useImageGen Debug] Original options:', options);
+      if (options.images) {
+        console.log('[useImageGen Debug] Images in options:', options.images);
+        console.log(
+          '[useImageGen Debug] Images info:',
+          options.images.map((img) => ({
+            name: img.name,
+            type: img.type,
+            size: img.size,
+          }))
+        );
+      } else {
+        console.log('[useImageGen Debug] No images in options');
+      }
+    }
+  }, [options]);
+
   // Memoize options to prevent unnecessary re-renders and regeneration
-  const memoizedOptions = useMemo(
-    () => ({
+  const memoizedOptions = useMemo(() => {
+    // Include all options including images
+    const finalOptions = {
       size: options?.size,
       quality: options?.quality,
       model: options?.model,
       style: options?.style,
-    }),
-    [options?.size, options?.quality, options?.model, options?.style]
-  );
+      // Explicitly pass through the images array
+      images: options?.images,
+    };
+
+    if (DEBUG_MODE) {
+      console.log('[useImageGen Debug] Memoized options:', finalOptions);
+    }
+
+    return finalOptions;
+  }, [options?.size, options?.quality, options?.model, options?.style, options?.images]);
 
   // Store reference to previous options to detect changes
   const prevOptionsRef = useRef<ReturnType<typeof getRelevantOptions>>(getRelevantOptions({}));

tests/ImgGenImageEdit.test.tsx

@@ -196,4 +196,37 @@ describe('ImgGen Component - Image Editing', () => {
     const callArgs = mockImageGen.mock.calls[0][1];
     expect(callArgs.images.length).toBe(2);
   });
+
+  it('should log debug information when debug prop is true', async () => {
+    // Create mock files
+    const mockImageFile = createMockFile('debug-test.png');
+
+    // Spy on console.log
+    const consoleSpy = vi.spyOn(console, 'log');
+
+    // Reset the mock
+    mockImageGen.mockClear();
+
+    // Render ImgGen with debug prop
+    render(<ImgGen prompt="debug image edit" images={[mockImageFile]} debug={true} />);
+
+    // Wait for component to render and process
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    // Verify debug logs were called
+    expect(consoleSpy).toHaveBeenCalled();
+
+    // Verify imageGen was called with the image
+    expect(mockImageGen).toHaveBeenCalledWith(
+      'debug image edit',
+      expect.objectContaining({
+        images: [mockImageFile],
+      })
+    );
+
+    // Clean up
+    consoleSpy.mockRestore();
+  });
 });