Content Library

The Content Library is your central hub for managing all creative assets in DUTO. It stores media generated by workflows and storyboards, and lets you browse, download, and reuse them across the platform.

What is the Content Library?

The Content Library is a database-backed asset manager (using the user_library table in Supabase) that stores and organizes:

• Generated images and videos from Flow Editor workflows
• Storyboard outputs including hero frames and generated shots
• Manually saved files uploaded or saved from other sources
• Audio files produced by audio generation nodes

Each item tracks its media type (image, video, audio, text, json), dimensions, duration, thumbnail, and the context it was created in (flow or storyboard).

Key Features

Tab-Based Navigation

The library is organized into two primary tabs:

• Flows -- Assets generated by Flow Editor workflows
• Storyboards -- Assets generated by Storyboard projects

Each tab shows a count of how many items it contains.

Folder Hierarchy

Content is automatically organized into a folder tree based on context:

Flow
├── /Workflow Name A
│   └── generated files...
└── /Workflow Name B
    └── generated files...

Storyboard
├── /Storyboard Title X
│   └── generated shots...
└── /Storyboard Title Y
    └── generated shots...

The folder tree is built from metadata on each asset (context, itemName, runDate, runNumber). Storyboard folders display their human-readable title when available.

View Modes

Toggle between two view modes:

• Folders view -- Browse by hierarchical run folders
• Flat view -- Chronological list of all items, sorted by creation date

Your view preference is persisted to localStorage.

Bulk Actions

Select multiple items to perform bulk operations. A floating action bar appears at the bottom with:

• Download -- Download selected items (single file or ZIP)
• Add to Flow -- Insert selected assets into a workflow
• Delete -- Remove selected items from the library
• Clear selection -- Deselect all

The bar shows a count and breakdown of selected media types (images, videos, audio).

Advanced Download

When downloading multiple items, an advanced download dialog lets you configure:

• Image format conversion -- Original, PNG, JPEG, or WebP
• Quality slider -- For JPEG/WebP (60%--100%)
• Resolution presets -- Original, Large (1920x1080), Medium (1280x720), Small (854x480)
• Filename pattern -- Customizable with {type}, {index}, {date}, {id} variables
• Organize by type -- Optionally group files into images/, videos/, audio/ folders in the ZIP
• Size estimation -- Real-time estimated ZIP size with per-type breakdown

Storage Analytics

A built-in analytics panel shows:

• Total storage usage with a progress bar and quota
• Breakdown by source -- How much storage Flow, Storyboard, and Manual Saves each use
• Breakdown by media type -- Storage used by images, videos, audio, etc.
• Largest files -- Quickly identify and delete the biggest files
• Warning levels -- Visual alerts at 80%, 90%, and 100% usage

Watermark Indicator

Free-tier content displays a watermark badge. Hovering over it explains that upgrading to a paid plan removes watermarks.

Search

Search assets by filename across the current tab. The search is case-insensitive and filters results in real time.

Accessing the Library

From the Dashboard

1. Click Content Library in the navigation
2. Use tabs to switch between Flows and Storyboards
3. Browse folders or switch to flat view

From the Flow Editor

1. Add a Library node to your workflow
2. Click to open the Library Picker modal
3. Browse and select assets (up to 10 images, 1 video, or 1 audio)
4. Selected assets flow into your workflow as inputs

From the Storyboard

1. Go to the References section
2. Click Add from Library
3. Select reference assets from the Library Picker

Supported Media Types

Images

Format	Supported
PNG	Yes
JPG/JPEG	Yes
WebP	Yes
GIF	Yes

Videos

Format	Supported
MP4	Yes
WebM	Yes

Audio

Format	Supported
MP3	Yes
WAV	Yes
M4A	Yes

Storage Backend

Files are stored via Supabase Storage in the user-library bucket, with support for BunnyCDN as an alternate storage provider. Signed URLs are used for secure access and are cached locally to reduce signing overhead.

Deletion is handled by an edge function (delete-from-library) that removes files from both the storage provider and the database record.

Getting Started

1. Organizing Media -- Set up your structure
2. Using in Workflows -- Connect to Flow Editor
3. Storage Limits -- Understand your quota