# gkalian/video-to-gif-converter architecture

> Architecture diagram of the GitHub repository gkalian/video-to-gif-converter, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gkalian/video-to-gif-converter
- Repository: https://github.com/gkalian/video-to-gif-converter

## Overview

This Windows desktop application guides a user from choosing a video through configuring a trimmed frame extraction, reviewing and selecting frames, and encoding a GIF. The JavaScript UI communicates with Rust through Tauri commands; Rust invokes FFmpeg for video inspection and frame extraction, and handles GIF encoding from extracted PNGs. README features such as selection controls, quality levels, and fast global-palette mode are represented, though their full UI and implementation are not sampled. The source excerpts are partial, so uncertain internal wiring is omitted.

Main entry points: [`src/app.js`](https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js) (Conversion workflow UI), [`src-tauri/src/lib.rs`](https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/lib.rs) (Tauri command host), [`src-tauri/src/commands.rs`](https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs) (Frame extraction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Desktop interface"]
  node_ui["Conversion workflow UI<br/>[app.js]"]
  node_video_dialog["Video file dialog<br/>[app.js]"]
  node_save_dialog["GIF save dialog<br/>[app.js]"]
  node_frame_editor["Frame review and selection<br/>[app.js]"]
  node_frame_preview["Frame preview<br/>[app.js]"]
end

subgraph group_backend["Conversion runtime"]
  node_tauri["Tauri command host<br/>[lib.rs]"]
  node_video_info["Video inspection<br/>[commands.rs]"]
  node_frame_extract["Frame extraction<br/>[commands.rs]"]
  node_gif_encoder["GIF encoding<br/>[commands.rs]"]
  node_temp_frames[("Temporary frame files<br/>[commands.rs]")]
  node_progress_events["Progress events<br/>[commands.rs]"]
end

subgraph group_integrations["System integrations"]
  node_ffmpeg["FFmpeg"]
  node_input_video["Selected video"]
  node_output_gif["GIF file"]
  node_system_opener["System opener"]
end

node_user(("User"))

node_user -->|"operates"| node_ui
node_ui -->|"chooses video"| node_video_dialog
node_video_dialog -->|"selects path"| node_input_video
node_ui -->|"invokes commands"| node_tauri
node_tauri -->|"dispatches inspection"| node_video_info
node_video_info -->|"inspects video"| node_ffmpeg
node_video_info -->|"reads metadata"| node_input_video
node_tauri -->|"dispatches extraction"| node_frame_extract
node_frame_extract -->|"extracts frames"| node_ffmpeg
node_frame_extract -->|"reads video"| node_input_video
node_frame_extract -->|"writes PNG frames"| node_temp_frames
node_frame_extract -->|"emits progress"| node_progress_events
node_progress_events -->|"updates progress"| node_ui
node_ui -->|"reviews frames"| node_frame_editor
node_frame_editor -->|"previews selection"| node_frame_preview
node_frame_preview -->|"requests frame data"| node_tauri
node_tauri -->|"reads preview PNG"| node_temp_frames
node_ui -->|"chooses destination"| node_save_dialog
node_save_dialog -->|"selects path"| node_output_gif
node_ui -->|"requests GIF creation"| node_gif_encoder
node_gif_encoder -->|"reads selected frames"| node_temp_frames
node_gif_encoder -->|"writes GIF"| node_output_gif
node_gif_encoder -->|"emits progress"| node_progress_events
node_ui -->|"opens output"| node_system_opener
node_tauri -->|"dispatches open path"| node_system_opener

click node_ui "https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js"
click node_video_dialog "https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js"
click node_save_dialog "https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js"
click node_tauri "https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/lib.rs"
click node_video_info "https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs"
click node_frame_extract "https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs"
click node_frame_editor "https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js"
click node_frame_preview "https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js"
click node_gif_encoder "https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs"
click node_temp_frames "https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs"
click node_progress_events "https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_ui,node_video_dialog,node_save_dialog,node_frame_editor,node_frame_preview,node_user toneBlue
class node_tauri,node_video_info,node_frame_extract,node_gif_encoder,node_temp_frames,node_progress_events toneAmber
class node_ffmpeg,node_input_video,node_output_gif,node_system_opener toneMint
```

## Components

### Desktop interface

- [Conversion workflow UI](https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js): `src/app.js`
- [Video file dialog](https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js): `src/app.js`
- [GIF save dialog](https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js): `src/app.js`
- [Frame review and selection](https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js): `src/app.js`
- [Frame preview](https://github.com/gkalian/video-to-gif-converter/blob/main/src/app.js): `src/app.js`

### Conversion runtime

- [Tauri command host](https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/lib.rs): `src-tauri/src/lib.rs`
- [Video inspection](https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs): `src-tauri/src/commands.rs`
- [Frame extraction](https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs): `src-tauri/src/commands.rs`
- [GIF encoding](https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs): `src-tauri/src/commands.rs`
- [Temporary frame files](https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs): `src-tauri/src/commands.rs`
- [Progress events](https://github.com/gkalian/video-to-gif-converter/blob/main/src-tauri/src/commands.rs): `src-tauri/src/commands.rs`

### System integrations

- **FFmpeg**
- **Selected video**
- **GIF file**
- **System opener**

### Other components

- **User**

## Connections

- User → Conversion workflow UI: operates
- Conversion workflow UI → Video file dialog: chooses video
- Video file dialog → Selected video: selects path
- Conversion workflow UI → Tauri command host: invokes commands
- Tauri command host → Video inspection: dispatches inspection
- Video inspection → FFmpeg: inspects video
- Video inspection → Selected video: reads metadata
- Tauri command host → Frame extraction: dispatches extraction
- Frame extraction → FFmpeg: extracts frames
- Frame extraction → Selected video: reads video
- Frame extraction → Temporary frame files: writes PNG frames
- Frame extraction → Progress events: emits progress
- Progress events → Conversion workflow UI: updates progress
- Conversion workflow UI → Frame review and selection: reviews frames
- Frame review and selection → Frame preview: previews selection
- Frame preview → Tauri command host: requests frame data
- Tauri command host → Temporary frame files: reads preview PNG
- Conversion workflow UI → GIF save dialog: chooses destination
- GIF save dialog → GIF file: selects path
- Conversion workflow UI → GIF encoding: requests GIF creation
- GIF encoding → Temporary frame files: reads selected frames
- GIF encoding → GIF file: writes GIF
- GIF encoding → Progress events: emits progress
- Conversion workflow UI → System opener: opens output
- Tauri command host → System opener: dispatches open path