# File System inside SpriteDX

SpriteDX is a one-shot character spritesheet generator that turns a simple prompt into a fully animated character, ready to drop into your work.

Behind the scenes, it runs through a multi-stage workflow where each step produces intermediate images and videos that feed into the next. Caching these intermediate outputs is important—not only for efficiency, but also because users may want to preview the results at each stage.

The **Files Panel** is designed with those considerations in mind. It supports:

* **Progress visibility** - show the generations of intermediate outputs in real time.
    
* **History navigation** - allow users to browse through previous generations.
    
* **Selection and preview** - let users pick and inspect specific generations.
    
* **File access** - provide easy downloading of generated files.
    
* **\[Future\] Cloud Sync** - back up and sync data to the cloud for persistence and portability.
    

Currently, when **Generate** button is clicked, it just drops all files it generated (i.e. intermediates) into the root directory. They are not organized into folders.

Today, I want to make it so that each time **Generate** button is clicked, it will (1) create a new folder and (2) puts all intermediates into a **intermediates** folder.

## Workspace Folder Structure

```json
.
└── run_0001/
    ├─ intermediates/
    │   ├── intermediate-output-name-1.png
    │   ├── intermediate-output-name-2.webp
    │   └── intermediate-output-name-3.mp4
    ├── final-output-name-1.webp
    ├── final-output-name-2.webp
    └── README.md
```

## Navigation

For navigating in to a folder, you can use double-click. For navigating out, you can use the breadcrumb.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1755890994771/3bebced9-4ec0-4f12-a1a9-54eb8b358937.webp align="center")

When we generate, we automatically switch to the newly created folder.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1755891204538/62a0f9df-e467-4e79-a803-21ee9a63b44a.webp align="center")

Nice and clean.

— Sprited Dev 🌱