Phase 4: Integration

7.1 Introduction to Integration

Phase 4 of the WIA-ART-001 specification focuses on integration - connecting the standard with existing platforms, tools, and ecosystems. While the previous phases established the data format, API interface, and communication protocols, this phase provides the practical guidelines and code for implementing WIA-ART-001 support in real-world applications.

Integration is where theory meets practice. A standard, no matter how well-designed, only achieves its purpose when it's widely adopted and used. This chapter provides comprehensive guidance for integrating WIA-ART-001 with web applications, mobile apps, creative tools, marketplaces, and the broader WIA ecosystem.

This chapter covers platform-specific integration patterns, WIA ecosystem connectivity, third-party tool integration, and best practices for maintaining compliance while maximizing interoperability.

7.2 Web Application Integration

Web applications represent the most common integration target for WIA-ART-001. The standard provides multiple integration approaches depending on application architecture and requirements.

7.2.1 CDN-Based Integration

The simplest integration method uses the WIA-hosted CDN for quick setup without package management.

<!-- Production CDN (recommended) -->
<script src="https://cdn.wia.org/art-001/v1/wia-art-001.min.js"></script>

<!-- Development CDN (with source maps) -->
<script src="https://cdn.wia.org/art-001/v1/wia-art-001.js"></script>

<!-- Specific version pinning -->
<script src="https://cdn.wia.org/art-001/v1.2.3/wia-art-001.min.js"></script>

<script>
  // Initialize the SDK
  const sdk = new WIAART001({
    apiKey: 'your-api-key',
    environment: 'production',
    options: {
      enableCaching: true,
      enableValidation: true,
      timeout: 30000
    }
  });
  
  // Use the SDK
  async function uploadArtwork(file) {
    const result = await sdk.create({
      title: 'My Artwork',
      file: file
    });
    console.log('Artwork created:', result.id);
  }
</script>

7.2.2 NPM Package Integration

// Installation
npm install @wia/art-001-sdk

// ES6 Module Import
import { WIAART001, DigitalArtSDK } from '@wia/art-001-sdk';

// CommonJS Import
const { WIAART001 } = require('@wia/art-001-sdk');

// TypeScript with full types
import { 
  WIAART001, 
  Artwork, 
  CreateOptions,
  ValidationResult 
} from '@wia/art-001-sdk';

const sdk = new WIAART001({
  apiKey: process.env.WIA_API_KEY,
  endpoint: 'https://api.wia.org/art-001/v1'
});

// Type-safe operations
const artwork: Artwork = await sdk.create({
  title: 'Digital Landscape',
  colorSpace: 'Adobe RGB',
  format: 'PNG'
});

7.2.3 React Integration

// React Hook
import { useWIAArt } from '@wia/art-001-react';

function ArtworkUploader() {
  const { 
    upload, 
    uploading, 
    progress, 
    error 
  } = useWIAArt();
  
  const handleFileChange = async (e) => {
    const file = e.target.files[0];
    
    try {
      const artwork = await upload(file, {
        title: 'My React Artwork',
        autoValidate: true
      });
      
      console.log('Upload complete:', artwork.id);
    } catch (err) {
      console.error('Upload failed:', err.message);
    }
  };
  
  return (
    <div>
      <input 
        type="file" 
        onChange={handleFileChange}
        disabled={uploading}
        accept="image/png,image/jpeg,image/tiff"
      />
      {uploading && <ProgressBar value={progress} />}
      {error && <ErrorMessage error={error} />}
    </div>
  );
}

// Context Provider
import { WIAProvider } from '@wia/art-001-react';

function App() {
  return (
    <WIAProvider 
      apiKey={process.env.REACT_APP_WIA_API_KEY}
      options={{ enableCaching: true }}
    >
      <ArtworkUploader />
    </WIAProvider>
  );
}

7.2.4 Vue.js Integration

// Vue 3 Composition API
import { useWIAArt } from '@wia/art-001-vue';

<script setup>
const { sdk, upload, validate } = useWIAArt();

const handleUpload = async (file) => {
  const result = await upload(file, {
    title: 'Vue Artwork',
    autoValidate: true
  });
  return result;
};
</script>

// Plugin Installation
import { createApp } from 'vue';
import { WIAArtPlugin } from '@wia/art-001-vue';

const app = createApp(App);
app.use(WIAArtPlugin, {
  apiKey: import.meta.env.VITE_WIA_API_KEY
});
app.mount('#app');

7.3 Mobile Application Integration

Native mobile SDKs provide optimized performance and platform-specific features for iOS and Android applications.

7.3.1 iOS/Swift Integration

// Package.swift dependency
dependencies: [
    .package(url: "https://github.com/wia-official/wia-art-001-swift.git", from: "1.0.0")
]

// Swift implementation
import WIAART001

class ArtworkManager {
    private let sdk: WIAART001
    
    init() {
        sdk = WIAART001(
            apiKey: Environment.wiaApiKey,
            options: WIAOptions(
                timeout: 30,
                enableCaching: true
            )
        )
    }
    
    func uploadArtwork(image: UIImage, metadata: ArtworkMetadata) async throws -> Artwork {
        // Convert UIImage to data
        guard let imageData = image.pngData() else {
            throw WIAError.invalidImage
        }
        
        // Create artwork
        let artwork = try await sdk.create(
            data: imageData,
            metadata: metadata,
            options: CreateOptions(
                format: .png,
                colorSpace: .adobeRGB,
                autoValidate: true
            )
        )
        
        return artwork
    }
    
    func validateArtwork(_ artwork: Artwork) async throws -> ValidationResult {
        return try await sdk.validate(artwork)
    }
}

// SwiftUI Integration
struct ArtworkUploadView: View {
    @StateObject private var viewModel = ArtworkUploadViewModel()
    
    var body: some View {
        VStack {
            if let image = viewModel.selectedImage {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
            }
            
            Button("Upload") {
                Task {
                    await viewModel.upload()
                }
            }
            .disabled(viewModel.isUploading)
            
            if viewModel.isUploading {
                ProgressView(value: viewModel.progress)
            }
        }
    }
}

7.3.2 Android/Kotlin Integration

// build.gradle.kts
dependencies {
    implementation("org.wia:art-001-android:1.0.0")
}

// Kotlin implementation
import org.wia.art001.WIAART001
import org.wia.art001.models.*

class ArtworkRepository(
    private val sdk: WIAART001
) {
    suspend fun uploadArtwork(
        bitmap: Bitmap,
        metadata: ArtworkMetadata
    ): Result<Artwork> = runCatching {
        // Convert bitmap to byte array
        val outputStream = ByteArrayOutputStream()
        bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream)
        val imageData = outputStream.toByteArray()
        
        // Upload to WIA
        sdk.create(
            data = imageData,
            metadata = metadata,
            options = CreateOptions(
                format = Format.PNG,
                colorSpace = ColorSpace.ADOBE_RGB,
                autoValidate = true
            )
        )
    }
    
    suspend fun validateArtwork(artwork: Artwork): ValidationResult {
        return sdk.validate(artwork)
    }
}

// Compose Integration
@Composable
fun ArtworkUploadScreen(
    viewModel: ArtworkViewModel = hiltViewModel()
) {
    val uiState by viewModel.uiState.collectAsState()
    
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        uiState.selectedImage?.let { bitmap ->
            Image(
                bitmap = bitmap.asImageBitmap(),
                contentDescription = "Selected artwork"
            )
        }
        
        Button(
            onClick = { viewModel.upload() },
            enabled = !uiState.isUploading
        ) {
            Text("Upload")
        }
        
        if (uiState.isUploading) {
            LinearProgressIndicator(progress = uiState.progress)
        }
    }
}

7.3.3 React Native Integration

// Installation
npm install @wia/art-001-react-native

// Usage
import { useWIAArt } from '@wia/art-001-react-native';
import { launchImageLibrary } from 'react-native-image-picker';

function ArtworkUploader() {
  const { upload, uploading, progress } = useWIAArt();
  
  const selectAndUpload = async () => {
    const result = await launchImageLibrary({
      mediaType: 'photo',
      quality: 1,
      maxWidth: 4096,
      maxHeight: 4096
    });
    
    if (result.assets?.[0]) {
      const artwork = await upload(result.assets[0].uri, {
        title: 'Mobile Artwork',
        autoValidate: true
      });
      
      Alert.alert('Success', `Artwork ID: ${artwork.id}`);
    }
  };
  
  return (
    <View>
      <Button 
        title="Select & Upload" 
        onPress={selectAndUpload}
        disabled={uploading}
      />
      {uploading && <ProgressBar progress={progress} />}
    </View>
  );
}

7.4 Server-Side Integration

Backend services require robust, high-performance integrations for processing artwork at scale.

7.4.1 Python Integration

# Installation
pip install wia-art-001

# Basic Usage
from wia_art_001 import SDK, CreateOptions, ColorSpace

sdk = SDK(
    api_key="your-api-key",
    endpoint="https://api.wia.org/art-001/v1",
    timeout=60
)

# Create artwork
with open("artwork.png", "rb") as f:
    result = sdk.create(
        data=f.read(),
        metadata={
            "title": "Server-side Artwork",
            "creator": {"name": "Artist"},
            "colorSpace": ColorSpace.ADOBE_RGB
        },
        options=CreateOptions(
            auto_validate=True,
            generate_derivatives=True
        )
    )

print(f"Created: {result.id}")

# Batch processing
from wia_art_001 import BatchProcessor

processor = BatchProcessor(sdk, max_concurrency=10)

async def process_directory(path: str):
    files = Path(path).glob("*.png")
    results = await processor.process_many(
        files,
        on_progress=lambda p: print(f"Progress: {p}%")
    )
    return results

7.4.2 Node.js Integration

// Installation
npm install @wia/art-001-node

// Express.js Middleware
import express from 'express';
import multer from 'multer';
import { WIAART001 } from '@wia/art-001-node';

const app = express();
const upload = multer({ storage: multer.memoryStorage() });
const sdk = new WIAART001({ apiKey: process.env.WIA_API_KEY });

app.post('/api/artworks', upload.single('file'), async (req, res) => {
  try {
    const artwork = await sdk.create({
      data: req.file.buffer,
      metadata: {
        title: req.body.title,
        creator: { name: req.body.artistName },
        colorSpace: req.body.colorSpace || 'sRGB'
      },
      options: {
        autoValidate: true,
        generatePreview: true
      }
    });
    
    res.json({ success: true, artwork });
  } catch (error) {
    res.status(400).json({ 
      success: false, 
      error: error.message 
    });
  }
});

// Worker processing with Bull queue
import Queue from 'bull';

const artworkQueue = new Queue('artwork-processing');

artworkQueue.process(async (job) => {
  const { fileUrl, metadata } = job.data;
  
  const response = await fetch(fileUrl);
  const buffer = await response.buffer();
  
  return sdk.create({
    data: buffer,
    metadata,
    options: { autoValidate: true }
  });
});

7.4.3 Go Integration

// Installation
go get github.com/wia-official/wia-art-001-go

// Usage
package main

import (
    "context"
    "os"
    
    wia "github.com/wia-official/wia-art-001-go"
)

func main() {
    client := wia.NewClient(wia.Config{
        APIKey:  os.Getenv("WIA_API_KEY"),
        Timeout: 60 * time.Second,
    })
    
    // Read file
    data, err := os.ReadFile("artwork.png")
    if err != nil {
        log.Fatal(err)
    }
    
    // Create artwork
    artwork, err := client.Create(context.Background(), wia.CreateInput{
        Data: data,
        Metadata: wia.Metadata{
            Title: "Go Artwork",
            Creator: wia.Creator{Name: "Artist"},
            ColorSpace: wia.ColorSpaceAdobeRGB,
        },
        Options: wia.CreateOptions{
            AutoValidate: true,
        },
    })
    
    if err != nil {
        log.Fatal(err)
    }
    
    fmt.Printf("Created artwork: %s\n", artwork.ID)
}

7.5 WIA Ecosystem Integration

WIA-ART-001 is part of the broader WIA ecosystem. Integration with other WIA standards enables powerful cross-functional capabilities.

7.5.1 WIA-INTENT Integration

Natural language queries for artwork discovery and management.

import { WIAIntent } from '@wia/intent';
import { WIAART001 } from '@wia/art-001-sdk';

const intent = new WIAIntent();
const artSdk = new WIAART001({ apiKey: 'your-key' });

// Natural language artwork search
const query = "Find all landscape artworks in Adobe RGB from last month";
const parsedIntent = await intent.parse(query);

/*
parsedIntent = {
  action: "search",
  domain: "art-001",
  parameters: {
    keywords: ["landscape"],
    colorSpace: "Adobe RGB",
    dateRange: {
      from: "2024-12-15",
      to: "2025-01-15"
    }
  }
}
*/

const results = await artSdk.search({
  keywords: parsedIntent.parameters.keywords,
  colorSpace: parsedIntent.parameters.colorSpace,
  dateFrom: parsedIntent.parameters.dateRange.from,
  dateTo: parsedIntent.parameters.dateRange.to
});

7.5.2 WIA-OMNI-API Gateway

Unified API gateway for accessing all WIA services through a single endpoint.

import { WIAOmniAPI } from '@wia/omni-api';

const omni = new WIAOmniAPI({
  apiKey: 'your-universal-key'
});

// Access multiple WIA services through unified interface
const artwork = await omni.art001.create({...});
const social = await omni.social.share(artwork.id, {...});
const blockchain = await omni.blockchain.register(artwork.id);

// Cross-service operations
const result = await omni.execute({
  operations: [
    { service: 'art-001', action: 'create', params: {...} },
    { service: 'social', action: 'share', params: {...} },
    { service: 'blockchain', action: 'register', params: {...} }
  ],
  transactional: true // All or nothing
});

7.5.3 WIA-SOCIAL Integration

Share and distribute artwork across social platforms.

import { WIASocial } from '@wia/social';

const social = new WIASocial({ apiKey: 'your-key' });

// Share artwork to multiple platforms
const shareResult = await social.share({
  artworkId: 'art_123',
  platforms: ['twitter', 'instagram', 'artstation'],
  message: 'Check out my new digital artwork!',
  options: {
    generatePreview: true,
    addWatermark: true,
    scheduleTime: new Date('2025-01-20T10:00:00Z')
  }
});

// Monitor engagement
const engagement = await social.getEngagement('art_123');
console.log('Total views:', engagement.totalViews);
console.log('Platform breakdown:', engagement.byPlatform);

7.5.4 WIA-BLOCKCHAIN Provenance

Immutable provenance tracking on blockchain.

import { WIABlockchain } from '@wia/blockchain';

const blockchain = new WIABlockchain({ apiKey: 'your-key' });

// Register artwork on blockchain
const registration = await blockchain.register({
  artworkId: 'art_123',
  chain: 'ethereum',
  metadata: {
    creatorSignature: '...',
    certificateLevel: 'professional'
  }
});

console.log('Transaction:', registration.txHash);
console.log('Token ID:', registration.tokenId);

// Verify provenance
const provenance = await blockchain.verify('art_123');
console.log('Verified owner:', provenance.currentOwner);
console.log('History:', provenance.transferHistory);

7.6 Third-Party Integrations

7.6.1 Creative Tool Plugins

// Adobe CEP Panel
const csInterface = new CSInterface();

// Export with WIA-ART-001 metadata
async function exportWithWIA() {
  const doc = app.activeDocument;
  
  // Get document metadata
  const metadata = {
    title: doc.name,
    colorSpace: doc.colorProfileName,
    dimensions: {
      width: doc.width.as('px'),
      height: doc.height.as('px')
    }
  };
  
  // Export and register
  const exportPath = await exportDocument(doc, 'PNG');
  const result = await wiaSDK.create({
    file: exportPath,
    metadata
  });
  
  alert(`Artwork registered: ${result.id}`);
}

// Procreate exports via Share Sheet
// The WIA app registers as a share target

// In WIA iOS app
func handleSharedFile(_ url: URL) async throws {
    let imageData = try Data(contentsOf: url)
    
    let artwork = try await sdk.create(
        data: imageData,
        metadata: ArtworkMetadata(
            title: url.lastPathComponent,
            source: "Procreate"
        )
    )
    
    // Show success notification
    NotificationCenter.default.post(
        name: .artworkCreated,
        object: artwork
    )
}

# Blender Python Add-on
import bpy
from wia_art_001 import SDK

class WIA_OT_ExportRender(bpy.types.Operator):
    bl_idname = "wia.export_render"
    bl_label = "Export to WIA"
    
    def execute(self, context):
        scene = context.scene
        
        # Render and save
        bpy.ops.render.render(write_still=True)
        
        # Upload to WIA
        sdk = SDK(api_key=scene.wia_api_key)
        result = sdk.create(
            file=scene.render.filepath,
            metadata={
                "title": scene.name,
                "medium": "3D Render",
                "software": "Blender " + bpy.app.version_string,
                "colorSpace": scene.view_settings.view_transform
            }
        )
        
        self.report({'INFO'}, f"Exported: {result.id}")
        return {'FINISHED'}

7.6.2 Marketplace Integrations

7.6.3 Storage Provider Integration

// IPFS Integration
import { create } from 'ipfs-http-client';
import { WIAART001 } from '@wia/art-001-sdk';

const ipfs = create({ host: 'ipfs.infura.io', port: 5001 });
const wia = new WIAART001({ apiKey: 'your-key' });

async function storeOnIPFS(artworkId: string) {
  const artwork = await wia.read(artworkId);
  const content = await wia.getContent(artworkId);
  
  // Store content
  const contentResult = await ipfs.add(content);
  
  // Store metadata
  const metadataResult = await ipfs.add(
    JSON.stringify(artwork.metadata)
  );
  
  // Update WIA record with IPFS CIDs
  await wia.updateMetadata(artworkId, {
    storage: {
      ipfs: {
        content: contentResult.cid.toString(),
        metadata: metadataResult.cid.toString()
      }
    }
  });
  
  return {
    contentCID: contentResult.cid.toString(),
    metadataCID: metadataResult.cid.toString()
  };
}

7.7 Chapter Summary

Review Questions

1. What are the different web integration approaches for WIA-ART-001?
2. How does the React hook simplify artwork uploads?
3. Explain the benefits of WIA-INTENT integration for artwork discovery.
4. What role does WIA-BLOCKCHAIN play in artwork provenance?
5. How can creative tool plugins streamline artist workflows?