Building an AI Photo Editor App with Rork — Complete Implementation Guide for Filters, Background Removal, and Style Transfer

// Editor state management — non-destructive editing with undo/redo stack
// Rork prompt: "Create a state manager for a photo editor with
//   non-destructive editing. Operations are stacked with undo/redo
//   support. Each operation has type, params, and timestamp."
 
interface EditOperation {
  id: string;
  type: 'filter' | 'crop' | 'background_removal' | 'style_transfer';
  params: Record<string, unknown>;
  timestamp: number;
}
 
interface EditorState {
  originalUri: string;           // Never modified
  currentUri: string;            // Currently displayed result
  operations: EditOperation[];   // Applied operations stack
  undoneOperations: EditOperation[]; // Redo stack
  isProcessing: boolean;
  processingProgress: number;    // 0-100
}
 
// Undo: pop from operations, push to undoneOperations
// Redo: pop from undoneOperations, push back to operations
// New operation: clear undoneOperations (no branching)

// Image filter system with presets and custom adjustments
// Rork prompt: "Build an image filter system with brightness,
//   contrast, saturation, blur, sepia, and monochrome filters.
//   Slider changes should update the preview in real time."
 
import React, { useState, useCallback, useMemo } from 'react';
import {
  View,
  Image,
  ScrollView,
  TouchableOpacity,
  Text,
  StyleSheet,
} from 'react-native';
import Slider from '@react-native-community/slider';
 
const FILTER_PRESETS = [
  {
    id: 'original',
    name: 'Original',
    params: { brightness: 0, contrast: 1, saturation: 1, sepia: 0 },
  },
  {
    id: 'vivid',
    name: 'Vivid',
    params: { brightness: 0.05, contrast: 1.2, saturation: 1.4, sepia: 0 },
  },
  {
    id: 'warm',
    name: 'Warm',
    params: { brightness: 0.03, contrast: 1.05, saturation: 1.1, sepia: 0.3 },
  },
  {
    id: 'cool',
    name: 'Cool',
    params: { brightness: -0.02, contrast: 1.1, saturation: 0.8, sepia: 0 },
  },
  {
    id: 'mono',
    name: 'Mono',
    params: { brightness: 0.05, contrast: 1.3, saturation: 0, sepia: 0 },
  },
  {
    id: 'sepia',
    name: 'Sepia',
    params: { brightness: 0, contrast: 1.05, saturation: 0.6, sepia: 0.8 },
  },
] as const;
 
type FilterParams = {
  brightness: number;
  contrast: number;
  saturation: number;
  sepia: number;
};
 
interface FilterEditorProps {
  imageUri: string;
  onApply: (params: FilterParams) => void;
  onCancel: () => void;
}
 
export function FilterEditor({ imageUri, onApply, onCancel }: FilterEditorProps) {
  const [activePreset, setActivePreset] = useState('original');
  const [customParams, setCustomParams] = useState<FilterParams>({
    brightness: 0,
    contrast: 1,
    saturation: 1,
    sepia: 0,
  });
  const [showAdvanced, setShowAdvanced] = useState(false);
 
  const handlePresetSelect = useCallback(
    (preset: typeof FILTER_PRESETS[number]) => {
      setActivePreset(preset.id);
      setCustomParams(preset.params);
    },
    [],
  );
 
  const filterStyle = useMemo(() => ({
    filter: [
      `brightness(${1 + customParams.brightness})`,
      `contrast(${customParams.contrast})`,
      `saturate(${customParams.saturation})`,
      `sepia(${customParams.sepia})`,
    ].join(' '),
  }), [customParams]);
 
  return (
    <View style={styles.container}>
      <View style={styles.previewContainer}>
        <Image
          source={{ uri: imageUri }}
          style={[styles.previewImage, filterStyle]}
          resizeMode="contain"
        />
      </View>
 
      {/* Preset thumbnails — horizontal scroll */}
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.presetScroll}
        contentContainerStyle={styles.presetContent}
      >
        {FILTER_PRESETS.map((preset) => (
          <TouchableOpacity
            key={preset.id}
            onPress={() => handlePresetSelect(preset)}
            style={[
              styles.presetItem,
              activePreset === preset.id && styles.presetItemActive,
            ]}
          >
            <Image
              source={{ uri: imageUri }}
              style={styles.presetThumb}
            />
            <Text style={[
              styles.presetLabel,
              activePreset === preset.id && styles.presetLabelActive,
            ]}>
              {preset.name}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
 
      {/* Fine-tuning sliders */}
      {showAdvanced && (
        <View style={styles.slidersContainer}>
          <SliderRow
            label="Brightness"
            value={customParams.brightness}
            min={-0.5}
            max={0.5}
            onChange={(v) => {
              setCustomParams(prev => ({ ...prev, brightness: v }));
              setActivePreset('custom');
            }}
          />
          <SliderRow
            label="Contrast"
            value={customParams.contrast}
            min={0.5}
            max={2.0}
            onChange={(v) => {
              setCustomParams(prev => ({ ...prev, contrast: v }));
              setActivePreset('custom');
            }}
          />
          <SliderRow
            label="Saturation"
            value={customParams.saturation}
            min={0}
            max={2.0}
            onChange={(v) => {
              setCustomParams(prev => ({ ...prev, saturation: v }));
              setActivePreset('custom');
            }}
          />
        </View>
      )}
 
      <View style={styles.actions}>
        <TouchableOpacity onPress={onCancel} style={styles.cancelButton}>
          <Text style={styles.cancelText}>Cancel</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => setShowAdvanced(\!showAdvanced)}
          style={styles.advancedButton}
        >
          <Text style={styles.advancedText}>
            {showAdvanced ? 'Hide' : 'Fine-tune'}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => onApply(customParams)}
          style={styles.applyButton}
        >
          <Text style={styles.applyText}>Apply</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}
 
function SliderRow({
  label, value, min, max, onChange,
}: {
  label: string; value: number; min: number; max: number;
  onChange: (v: number) => void;
}) {
  return (
    <View style={styles.sliderRow}>
      <Text style={styles.sliderLabel}>{label}</Text>
      <Slider
        style={styles.slider}
        minimumValue={min}
        maximumValue={max}
        value={value}
        onValueChange={onChange}
        minimumTrackTintColor="#007AFF"
        maximumTrackTintColor="#E0E0E0"
      />
      <Text style={styles.sliderValue}>{value.toFixed(2)}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#000' },
  previewContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  previewImage: { width: '100%', height: '100%' },
  presetScroll: { maxHeight: 100 },
  presetContent: { paddingHorizontal: 12, gap: 8 },
  presetItem: {
    alignItems: 'center', padding: 4, borderRadius: 8,
    borderWidth: 2, borderColor: 'transparent',
  },
  presetItemActive: { borderColor: '#007AFF' },
  presetThumb: { width: 60, height: 60, borderRadius: 6 },
  presetLabel: { fontSize: 11, color: '#999', marginTop: 4 },
  presetLabelActive: { color: '#007AFF', fontWeight: '600' },
  slidersContainer: { paddingHorizontal: 16, paddingVertical: 8 },
  sliderRow: { flexDirection: 'row', alignItems: 'center', marginVertical: 4 },
  sliderLabel: { color: '#FFF', width: 80, fontSize: 13 },
  slider: { flex: 1 },
  sliderValue: { color: '#999', width: 50, textAlign: 'right', fontSize: 12 },
  actions: {
    flexDirection: 'row', justifyContent: 'space-between',
    padding: 16, paddingBottom: 32,
  },
  cancelButton: { padding: 12 },
  cancelText: { color: '#FF3B30', fontSize: 16 },
  advancedButton: { padding: 12 },
  advancedText: { color: '#FFF', fontSize: 16 },
  applyButton: { padding: 12, backgroundColor: '#007AFF', borderRadius: 8 },
  applyText: { color: '#FFF', fontSize: 16, fontWeight: '600' },
});

// Background removal service — cloud API with on-device fallback
// Production-quality implementation with error handling and retries
 
interface BackgroundRemovalResult {
  success: boolean;
  imageUri?: string;
  method: 'cloud' | 'ondevice' | 'failed';
  error?: string;
  processingTimeMs: number;
}
 
const CLOUD_API_TIMEOUT_MS = 30000;
const MAX_RETRIES = 2;
const RETRY_DELAY_MS = 1000;
 
async function removeBackground(
  imageUri: string,
  apiKey: string,
): Promise<BackgroundRemovalResult> {
  const startTime = Date.now();
 
  // 1. Try cloud API with retries
  for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
    try {
      const result = await callCloudApi(imageUri, apiKey);
      return {
        success: true,
        imageUri: result.outputUri,
        method: 'cloud',
        processingTimeMs: Date.now() - startTime,
      };
    } catch (error) {
      const isLastAttempt = attempt === MAX_RETRIES;
      const isRetryable = isRetryableError(error);
 
      if (isLastAttempt || \!isRetryable) {
        console.warn(
          `Cloud API failed (attempt ${attempt + 1}/${MAX_RETRIES + 1}):`,
          error instanceof Error ? error.message : 'Unknown error'
        );
        break;
      }
 
      // Exponential backoff
      await sleep(RETRY_DELAY_MS * Math.pow(2, attempt));
    }
  }
 
  // 2. Fallback: on-device processing
  try {
    console.log('Falling back to on-device processing...');
    const onDeviceResult = await processOnDevice(imageUri);
    return {
      success: true,
      imageUri: onDeviceResult.outputUri,
      method: 'ondevice',
      processingTimeMs: Date.now() - startTime,
    };
  } catch (onDeviceError) {
    return {
      success: false,
      method: 'failed',
      error: onDeviceError instanceof Error
        ? onDeviceError.message
        : 'Background removal failed',
      processingTimeMs: Date.now() - startTime,
    };
  }
}
 
async function callCloudApi(
  imageUri: string,
  apiKey: string,
): Promise<{ outputUri: string }> {
  const response = await fetch(imageUri);
  const blob = await response.blob();
 
  // Size check (most APIs cap at 12MB)
  if (blob.size > 12 * 1024 * 1024) {
    throw new Error('Image too large. Maximum size is 12MB.');
  }
 
  const formData = new FormData();
  formData.append('image_file', blob, 'image.png');
  formData.append('size', 'auto');
 
  const controller = new AbortController();
  const timeoutId = setTimeout(
    () => controller.abort(),
    CLOUD_API_TIMEOUT_MS,
  );
 
  try {
    const apiResponse = await fetch('https://api.remove.bg/v1.0/removebg', {
      method: 'POST',
      headers: { 'X-Api-Key': apiKey },
      body: formData,
      signal: controller.signal,
    });
 
    if (\!apiResponse.ok) {
      const errorBody = await apiResponse.text().catch(() => '');
      throw new ApiError(
        `API returned ${apiResponse.status}: ${errorBody}`,
        apiResponse.status,
      );
    }
 
    const resultBlob = await apiResponse.blob();
    const outputUri = await saveBlobToFile(resultBlob, 'bg_removed.png');
    return { outputUri };
  } finally {
    clearTimeout(timeoutId);
  }
}
 
function isRetryableError(error: unknown): boolean {
  if (error instanceof ApiError) {
    return error.statusCode === 429 || error.statusCode >= 500;
  }
  if (error instanceof TypeError && error.message.includes('network')) {
    return true;
  }
  return false;
}
 
class ApiError extends Error {
  constructor(message: string, public statusCode: number) {
    super(message);
    this.name = 'ApiError';
  }
}
 
function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// AI style transfer via Replicate API
// Note: API tokens should be loaded from environment variables
 
interface StyleTransferResult {
  success: boolean;
  outputUri?: string;
  error?: string;
  style: string;
}
 
const STYLE_PROMPTS: Record<string, { prompt: string; strength: number }> = {
  watercolor: {
    prompt: 'watercolor painting, soft brushstrokes, artistic, delicate colors',
    strength: 0.65,
  },
  oilpainting: {
    prompt: 'oil painting on canvas, thick impasto brushwork, rich vibrant colors, classical art',
    strength: 0.70,
  },
  anime: {
    prompt: 'anime style illustration, clean lines, vibrant colors, Studio Ghibli inspired',
    strength: 0.60,
  },
  sketch: {
    prompt: 'pencil sketch drawing, detailed linework, crosshatching, black and white',
    strength: 0.75,
  },
  cyberpunk: {
    prompt: 'cyberpunk neon art style, glowing neon lights, futuristic, high contrast',
    strength: 0.55,
  },
};
 
async function applyStyleTransfer(
  imageUri: string,
  styleId: keyof typeof STYLE_PROMPTS,
  replicateApiToken: string,
): Promise<StyleTransferResult> {
  const style = STYLE_PROMPTS[styleId];
  if (\!style) {
    return { success: false, error: `Unknown style: ${styleId}`, style: styleId };
  }
 
  try {
    const imageBase64 = await imageToBase64(imageUri);
    const dataUri = `data:image/png;base64,${imageBase64}`;
 
    const createResponse = await fetch(
      'https://api.replicate.com/v1/predictions',
      {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${replicateApiToken}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          version: 'stability-ai/sdxl:latest',
          input: {
            image: dataUri,
            prompt: style.prompt,
            prompt_strength: style.strength,
            num_inference_steps: 30,
            guidance_scale: 7.5,
          },
        }),
      },
    );
 
    if (\!createResponse.ok) {
      const errorText = await createResponse.text();
      throw new Error(`Replicate API error: ${createResponse.status} ${errorText}`);
    }
 
    const prediction = await createResponse.json();
    const result = await pollPrediction(prediction.id, replicateApiToken, 60000);
 
    if (result.status === 'succeeded' && result.output) {
      const outputUrl = Array.isArray(result.output)
        ? result.output[0]
        : result.output;
      const localUri = await downloadAndSave(outputUrl, `style_${styleId}.png`);
      return { success: true, outputUri: localUri, style: styleId };
    }
 
    return {
      success: false,
      error: result.error || 'Style transfer failed',
      style: styleId,
    };
  } catch (error) {
    return {
      success: false,
      error: error instanceof Error ? error.message : 'Unknown error',
      style: styleId,
    };
  }
}
 
async function pollPrediction(
  predictionId: string,
  apiToken: string,
  timeoutMs: number,
): Promise<{ status: string; output?: string | string[]; error?: string }> {
  const deadline = Date.now() + timeoutMs;
  const pollInterval = 2000;
 
  while (Date.now() < deadline) {
    const response = await fetch(
      `https://api.replicate.com/v1/predictions/${predictionId}`,
      { headers: { 'Authorization': `Bearer ${apiToken}` } },
    );
 
    if (\!response.ok) {
      throw new Error(`Poll failed: ${response.status}`);
    }
 
    const data = await response.json();
 
    if (['succeeded', 'failed', 'canceled'].includes(data.status)) {
      return data;
    }
 
    await sleep(pollInterval);
  }
 
  throw new Error('Style transfer timed out');
}

// Progressive feedback overlay — keeps users informed during AI processing
import React, { useEffect, useState, useRef } from 'react';
import { View, Text, Animated, StyleSheet, Easing } from 'react-native';
 
interface ProcessingOverlayProps {
  isVisible: boolean;
  operationType: 'filter' | 'background_removal' | 'style_transfer';
  estimatedSeconds: number;
}
 
const OPERATION_MESSAGES: Record<string, string[]> = {
  filter: ['Applying filter...'],
  background_removal: [
    'Analyzing image...',
    'Detecting subject...',
    'Removing background...',
    'Finishing up...',
  ],
  style_transfer: [
    'Analyzing composition...',
    'Loading AI model...',
    'Transforming style...',
    'Refining details...',
    'Final touches...',
  ],
};
 
export function ProcessingOverlay({
  isVisible,
  operationType,
  estimatedSeconds,
}: ProcessingOverlayProps) {
  const [messageIndex, setMessageIndex] = useState(0);
  const progressAnim = useRef(new Animated.Value(0)).current;
  const messages = OPERATION_MESSAGES[operationType] || ['Processing...'];
 
  useEffect(() => {
    if (\!isVisible) {
      setMessageIndex(0);
      progressAnim.setValue(0);
      return;
    }
 
    // Animate to 90% — the last 10% fills instantly on completion
    Animated.timing(progressAnim, {
      toValue: 0.9,
      duration: estimatedSeconds * 1000,
      easing: Easing.out(Easing.quad),
      useNativeDriver: false,
    }).start();
 
    // Cycle through stage messages
    const intervalMs = (estimatedSeconds * 1000) / messages.length;
    const timer = setInterval(() => {
      setMessageIndex(prev => Math.min(prev + 1, messages.length - 1));
    }, intervalMs);
 
    return () => clearInterval(timer);
  }, [isVisible, estimatedSeconds, messages.length, progressAnim]);
 
  if (\!isVisible) return null;
 
  const progressWidth = progressAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0%', '100%'],
  });
 
  return (
    <View style={styles.overlay}>
      <View style={styles.card}>
        <Text style={styles.message}>{messages[messageIndex]}</Text>
        <View style={styles.progressTrack}>
          <Animated.View
            style={[styles.progressFill, { width: progressWidth }]}
          />
        </View>
        <Text style={styles.estimate}>
          Estimated time: ~{estimatedSeconds}s
        </Text>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.7)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  card: {
    backgroundColor: '#1C1C1E',
    borderRadius: 16,
    padding: 24,
    width: '80%',
    alignItems: 'center',
  },
  message: { color: '#FFF', fontSize: 16, marginBottom: 16 },
  progressTrack: {
    width: '100%', height: 4, backgroundColor: '#333',
    borderRadius: 2, overflow: 'hidden',
  },
  progressFill: {
    height: '100%', backgroundColor: '#007AFF', borderRadius: 2,
  },
  estimate: { color: '#888', fontSize: 12, marginTop: 12 },
});

// Memory leak prevention — cleanup on screen exit
import { useEffect } from 'react';
import * as FileSystem from 'expo-file-system';
 
function useImageCleanup(tempImageUris: string[]) {
  useEffect(() => {
    return () => {
      tempImageUris.forEach(async (uri) => {
        try {
          const info = await FileSystem.getInfoAsync(uri);
          if (info.exists) {
            await FileSystem.deleteAsync(uri, { idempotent: true });
          }
        } catch (error) {
          console.warn('Failed to clean up temp image:', uri);
        }
      });
    };
  }, [tempImageUris]);
}

// Normalize EXIF orientation before processing
import * as ImageManipulator from 'expo-image-manipulator';
 
async function normalizeImageOrientation(uri: string): Promise<string> {
  const result = await ImageManipulator.manipulateAsync(
    uri,
    [], // No operations — just normalize
    { compress: 0.95, format: ImageManipulator.SaveFormat.PNG }
  );
  return result.uri;
}

// WRONG: API key exposed in client code
const result = await fetch('https://api.remove.bg/v1.0/removebg', {
  headers: { 'X-Api-Key': 'YOUR_API_KEY' }, // Never do this
});
 
// CORRECT: Route through your own backend
const result = await fetch('https://your-backend.workers.dev/api/remove-bg', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${userAuthToken}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ imageBase64 }),
});
// Backend adds the API key and forwards to remove.bg

// Export with format selection, camera roll save, and share
import * as MediaLibrary from 'expo-media-library';
import * as Sharing from 'expo-sharing';
import * as ImageManipulator from 'expo-image-manipulator';
 
interface ExportOptions {
  format: 'png' | 'jpeg';
  quality: number;
  maxWidth?: number;
}
 
async function exportImage(
  imageUri: string,
  options: ExportOptions,
): Promise<{ savedUri: string; fileSize: number }> {
  const manipulations: ImageManipulator.Action[] = [];
  if (options.maxWidth) {
    manipulations.push({ resize: { width: options.maxWidth } });
  }
 
  const format = options.format === 'png'
    ? ImageManipulator.SaveFormat.PNG
    : ImageManipulator.SaveFormat.JPEG;
 
  const result = await ImageManipulator.manipulateAsync(
    imageUri,
    manipulations,
    { compress: options.quality, format },
  );
 
  const { status } = await MediaLibrary.requestPermissionsAsync();
  if (status \!== 'granted') {
    throw new Error('Camera roll access was not granted');
  }
 
  const asset = await MediaLibrary.createAssetAsync(result.uri);
  const album = await MediaLibrary.getAlbumAsync('AI Photo Editor');
  if (album) {
    await MediaLibrary.addAssetsToAlbumAsync([asset], album, false);
  } else {
    await MediaLibrary.createAlbumAsync('AI Photo Editor', asset, false);
  }
 
  const fileInfo = await FileSystem.getInfoAsync(result.uri);
  const fileSize = fileInfo.exists ? (fileInfo.size ?? 0) : 0;
 
  return { savedUri: result.uri, fileSize };
}
 
async function shareImage(imageUri: string): Promise<void> {
  const isAvailable = await Sharing.isAvailableAsync();
  if (\!isAvailable) {
    throw new Error('Sharing is not available on this device');
  }
 
  await Sharing.shareAsync(imageUri, {
    mimeType: imageUri.endsWith('.png') ? 'image/png' : 'image/jpeg',
    dialogTitle: 'Share edited photo',
  });
}