DEV Community

Cover image for Building a Privacy-First AI Scrapbook Creator: Project Introduction
Allan Niñal
Allan Niñal

Posted on

Building a Privacy-First AI Scrapbook Creator: Project Introduction

Building a Privacy-First AI Scrapbook Creator

In a world where AI tools are becoming increasingly prevalent, concerns about data privacy are growing just as rapidly. Many of today's most popular AI applications work by sending your personal data to remote servers for processing. But what if I could build an AI-powered creative tool that respects your privacy by design?

That's the vision behind the Poetry & Scrapbook Creator - a platform that transforms personal photos into beautifully designed scrapbook pages enhanced with AI-generated poetry, all while keeping your photos on your own device. The project will be available at www.poetryscrapbook.com soon.

The Vision

The Poetry & Scrapbook Creator aims to solve several problems at once:

  1. Privacy Concerns: By processing photos client-side in the browser, personal images never leave the user's device.

  2. Creative Blocks: Many people want to create meaningful memory collections but struggle with the creative aspects, especially writing heartfelt text to accompany their photos.

  3. Technical Barriers: Professional design tools have steep learning curves, while simple tools produce basic results.

  4. Ownership Rights: Many AI tools have unclear terms regarding who owns the generated content.

How It Works

The platform will leverage a hybrid architecture that keeps private data local while still utilizing AI capabilities:

Image description

Client-Side Processing

All photo manipulation will happen entirely in your browser using the HTML5 Canvas API and WebAssembly. Your images will never leave your device, ensuring complete privacy for your cherished memories.

// Simplified example of planned client-side photo processing
const processPhoto = (imageFile) => {
  const reader = new FileReader();

  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      // Create canvas for processing
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // Set dimensions
      canvas.width = img.width;
      canvas.height = img.height;

      // Draw image on canvas
      ctx.drawImage(img, 0, 0);

      // Extract metadata (EXIF, colors, etc.)
      const metadata = extractMetadata(canvas);

      // Apply transformations
      applyFilters(canvas, ctx);

      // All processing happens locally!
      displayProcessedImage(canvas);
    };
    img.src = e.target.result;
  };

  reader.readAsDataURL(imageFile);
};
Enter fullscreen mode Exit fullscreen mode

This approach aligns with the growing trend of "Local AI" or "Edge AI," where AI processing happens directly on user devices rather than in the cloud. As noted by industry experts, "By processing data locally, companies reduce or eliminate cloud infrastructure costs, making AI far more affordable" (DockYard, 2025).

AI Poetry Generation

When you want to generate poetry, the app will use one of two approaches:

  1. On-device inference: Utilizing compact AI models that run directly in the browser via WebAssembly and TensorFlow.js for basic poetry generation.

  2. Privacy-preserving API calls: For more sophisticated poetry, the app will send only the necessary text prompts and basic metadata to the AI model through OpenRouter API - never your actual photos.

This hybrid approach leverages what Chrome's developer documentation calls "Client-side AI," which offers benefits including "local processing of sensitive data" and "snappy user experience" without server roundtrips (Chrome for Developers, 2025).

Google Drive Integration

For storage, the app will integrate directly with your Google Drive, giving you complete control over where your creations are stored without requiring any third-party hosting of your files.

Planned Features

Poetry Generation

  • AI-powered poem creation using a combination of on-device models and pre-configured OpenRouter API integration
  • Multiple poem styles: Free Verse, Haiku, Sonnet, Limerick, Acrostic, Ballad
  • Customizable poem tone, rhythm, and length
  • Text humanization for more natural-sounding results

Design Capabilities

  • Handwritten style designs using custom web fonts
  • Scrapbook style designs with layered elements
  • Vintage paper textures and decorative elements
  • Advanced photo editing tools with privacy-focused face blurring (similar to DFACE.app)
  • Custom font upload for personalized typography

Integration & Storage

  • Google Drive integration for content storage
  • Cross-device synchronization
  • User-controlled privacy settings
  • Real-time collaborative editing
  • Various export formats

The Target Audience

The platform is being designed with several user groups in mind:

  1. Memory Keepers: Family historians and parents documenting children's milestones
  2. Creative Professionals: Photographers and writers seeking to enhance their work
  3. Privacy-Conscious Users: People who value creative AI tools but are concerned about data privacy

Technical Approach

The project will adopt several technical approaches to maintain its privacy-first promise:

  1. Client-Side Processing: Using the HTML5 Canvas API, WebAssembly, and TensorFlow.js for local computation
  2. Progressive Web App: Enabling offline capabilities and cross-device access
  3. WebGPU Acceleration: Leveraging modern browser capabilities for faster processing when available
  4. Hybrid Storage Model: Keeping sensitive data local while using cloud services for non-sensitive functionality

Recent advancements in browser technology make this approach increasingly viable. According to Grid Dynamics (2025), "WebAssembly enables computationally intensive AI operations (such as complex math or heavy models) to execute quickly and efficiently, significantly outperforming pure JavaScript implementations."

Design Philosophy

The interface will balance simplicity with power, making it accessible to users without design experience while still offering advanced capabilities:

Image description

The design will follow these principles:

  • Intuitive Workflow: Clear process from photo upload to final design
  • Contextual Controls: Tools appear when and where they're needed
  • Progressive Disclosure: Basic features are immediately accessible, with advanced options revealed as needed
  • Consistent Feedback: Clear indication of system status and processing

Recent Design Progress

I've made significant progress on the design front with the implementation of HTML/CSS mockups for the key interfaces:

Completed Mockups

  • Landing Page: A polished introduction to the platform's features and benefits
  • Editor Interface: The main scrapbook creation environment with template selection and design tools
  • Poetry Generation Interface: Specialized UI for generating and customizing poems
  • Photo Editor: Advanced tools for enhancing and modifying photos

Design System Implementation

Each mockup follows a consistent design system with:

  • A cohesive color palette centered around purple and pink accent colors
  • Typography pairing of Playfair Display for headings and Source Sans Pro for body text
  • Standardized component styles for buttons, cards, forms, and navigation elements
  • Consistent spacing and layout principles across all interfaces

Image Implementation

A key focus in my recent development has been proper image handling:

  • All mockups now use high-quality placeholder images from Pexels and Unsplash
  • Images are stored in a dedicated images/ directory with standardized paths
  • Feature icons, avatars, and thumbnails follow consistent styling rules:
    • Feature icons: 60px × 60px circular design
    • Avatars: 50px circular profile images
    • Templates: Consistent aspect ratios for gallery displays
  • Semantic HTML with proper alt text for accessibility
  • Responsive image implementation using modern CSS techniques like object-fit and aspect-ratio

The mockups reflect my privacy-first approach with clear visual indicators for local processing and user data control. These static designs will serve as the blueprint for my functional implementation in the coming phases.

Development Status

The Poetry & Scrapbook Creator is currently in active development. I've completed the initial planning and design phases and am now working on implementing the core functionality. I'm focused on building a robust foundation that prioritizes privacy while delivering a seamless user experience. While I'm excited about the progress I'm making, I'm not publicly sharing specific timelines to ensure I can deliver the highest quality product possible.

Final Thoughts

The Poetry & Scrapbook Creator represents an exciting new approach to AI-powered creative tools - one that respects user privacy by design. By processing photos client-side and maintaining user control over data, I'm aiming to demonstrate that privacy and advanced AI features can coexist.

As observed by privacy advocates, "This movement toward client-side processing represents more than just technical innovation — it signals a philosophical shift in how we think about the web: from centralized to distributed computing, from data collection to data sovereignty" (Privacy-First Web Tools, 2024).

In future articles, I'll dive deeper into specific technical aspects I'm planning for the platform, including:

  • Implementing client-side photo processing with WebAssembly
  • Integrating AI poetry generation with TensorFlow.js
  • Creating handwritten style designs
  • Setting up Google Drive integration
  • Design system implementation and responsive UI
  • Optimizing image handling for performance and accessibility

Stay tuned for more insights into building privacy-first creative tools! For updates and to try the platform when it launches, visit www.poetryscrapbook.com.


Note: This project is currently in the planning phase. I've implemented the design mockups for visualization purposes, and the functional implementation is in progress.

Top comments (0)