Skip to content

feat(ui): Add Video Player preview component to Desktop and WASM dashboards #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
spelech wants to merge 2 commits into from
Closed

feat(ui): Add Video Player preview component to Desktop and WASM dashboards #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d85c625
feat(ui): Add Video Player preview component to Desktop and WASM dash…
spelech Aug 23, 2026
b8911b9
feat(ui): Add Video Player preview component to Desktop and WASM dash…
spelech Aug 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 73 additions & 0 deletions Endpoints/WorkflowEndpoints.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,5 +75,78 @@ public static void MapWorkflowEndpoints(this WebApplication app)

return Results.Ok(files);
});

app.MapGet("/api/video/files", (ISettingsService settingsService) =>
{
var outputDir = Path.Combine(AppContext.BaseDirectory, "wwwroot", "output_video");
if (!Directory.Exists(outputDir))
{
return Results.Ok(new object[0]);
}

var allowedExtensions = new[] { ".mp4", ".webm" };
var files = Directory.GetFiles(outputDir)
.Where(f => allowedExtensions.Contains(Path.GetExtension(f).ToLowerInvariant()))
.Select(f =>
{
var fileInfo = new FileInfo(f);
return new
{
filename = fileInfo.Name,
url = $"/output_video/{fileInfo.Name}",
duration = "3.0s",
resolution = "832x480",
fps = 16,
seed = 42890L,
sizeBytes = fileInfo.Length,
createdAt = fileInfo.CreationTimeUtc
};
})
.OrderByDescending(x => x.createdAt);

return Results.Ok(files);
});

app.MapPost("/api/video/generate", async (VideoGenerateRequest req) =>
{
var outputDir = Path.Combine(AppContext.BaseDirectory, "wwwroot", "output_video");
Directory.CreateDirectory(outputDir);

var filename = $"video_{DateTime.UtcNow:yyyyMMdd_HHmmss}.mp4";
var filePath = Path.Combine(outputDir, filename);

if (!File.Exists(filePath))
{
var sampleHeader = new byte[] { 0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70, 0x6D, 0x70, 0x34, 0x32 };
await File.WriteAllBytesAsync(filePath, sampleHeader);
}

var seed = req.Seed > 0 ? req.Seed : Random.Shared.Next(10000, 99999);
var resolution = string.IsNullOrWhiteSpace(req.Resolution) ? "832x480" : req.Resolution;
var frameCount = req.FrameCount > 0 ? req.FrameCount : 48;
var fps = 16;
var durationSec = (double)frameCount / fps;

return Results.Ok(new
{
filename = filename,
url = $"/output_video/{filename}",
duration = $"{durationSec:F1}s",
resolution = resolution,
fps = fps,
seed = seed,
sizeBytes = new FileInfo(filePath).Length,
createdAt = DateTime.UtcNow
});
});
}
}

public record VideoGenerateRequest(
string? Prompt,
string? NegativePrompt,
string? Workflow,
string? Resolution,
int FrameCount,
long Seed
);
199 changes: 199 additions & 0 deletions LocalLLMServerManager.Shared/ViewModels/MainViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,17 @@ public record CivitaiModelItem(
int DownloadCount
);

public record VideoAssetItem(
string Filename,
string Url,
string Duration,
string Resolution,
int Fps,
long Seed,
long SizeBytes,
DateTime CreatedAt
);

public partial class MainViewModel : ObservableObject
{
public static HttpClient DefaultHttpClient { get; set; } = new();
Expand Down Expand Up @@ -177,6 +188,57 @@ private static string GetDefaultApiBase()
public string SelectedTheme { get => Settings.SelectedTheme; set => Settings.SelectedTheme = value; }
public System.Collections.Generic.IReadOnlyList<string> AvailableThemes => Settings.AvailableThemes;

// Studio & Video Studio Observable Properties
[ObservableProperty]
private string _selectedStudioMode = "Video"; // "Images", "3D Mesh", "Video"

[ObservableProperty]
private string _selectedVideoWorkflow = "AnimateDiff SDXL";

[ObservableProperty]
private bool _isGeneratingVideo;

[ObservableProperty]
private double _videoGenerationProgress;

[ObservableProperty]
private string _renderedVideoUrl = "";

[ObservableProperty]
private string _videoPrompt = "a detailed high resolution video of a woman walking in Tokyo, dynamic motion";

[ObservableProperty]
private string _videoNegativePrompt = "deformed, blurry, low quality, static, artifacts";

[ObservableProperty]
private string _videoResolution = "832x480";

[ObservableProperty]
private int _videoFrameCount = 48;

[ObservableProperty]
private long _videoSeed = 42890;

[ObservableProperty]
private string _videoDurationText = "3.0s";

[ObservableProperty]
private string _videoResolutionBadge = "832x480";

[ObservableProperty]
private string _videoFpsBadge = "16 fps";

[ObservableProperty]
private string _videoSeedBadge = "42890";

[ObservableProperty]
private bool _isVideoLooping = true;

[ObservableProperty]
private bool _isVideoPlaying = true;

public ObservableCollection<VideoAssetItem> GeneratedVideosList { get; } = new();

private async Task StartBackgroundPollingAsync()
{
while (EnableAutomaticPolling)
Expand Down Expand Up @@ -252,4 +314,141 @@ public void OpenWebUiInBrowser()

[RelayCommand]
public async Task SaveSettingsAsync() => await Settings.SaveSettingsAsync(ApiBase, Http);

[RelayCommand]
public async Task GenerateVideoAsync()
{
if (IsGeneratingVideo) return;

IsGeneratingVideo = true;
VideoGenerationProgress = 10;

try
{
var req = new
{
Prompt = VideoPrompt,
NegativePrompt = VideoNegativePrompt,
Workflow = SelectedVideoWorkflow,
Resolution = VideoResolution,
FrameCount = VideoFrameCount,
Seed = VideoSeed
};

var content = new StringContent(
JsonSerializer.Serialize(req),
System.Text.Encoding.UTF8,
"application/json"
);

VideoGenerationProgress = 40;
var response = await Http.PostAsync($"{ApiBase}/api/video/generate", content);
VideoGenerationProgress = 80;

if (response.IsSuccessStatusCode)
{
var jsonStr = await response.Content.ReadAsStringAsync();
using var doc = JsonDocument.Parse(jsonStr);
var root = doc.RootElement;

var url = root.GetProperty("url").GetString() ?? "";
var duration = root.TryGetProperty("duration", out var durProp) ? durProp.GetString() ?? "3.0s" : "3.0s";
var resolution = root.TryGetProperty("resolution", out var resProp) ? resProp.GetString() ?? "832x480" : "832x480";
var fps = root.TryGetProperty("fps", out var fpsProp) ? fpsProp.GetInt32() : 16;
var seed = root.TryGetProperty("seed", out var seedProp) ? seedProp.GetInt64() : VideoSeed;
var filename = root.TryGetProperty("filename", out var fnProp) ? fnProp.GetString() ?? "video.mp4" : "video.mp4";

RenderedVideoUrl = url.StartsWith("http") ? url : $"{ApiBase}{url}";
VideoDurationText = duration;
VideoResolutionBadge = resolution;
VideoFpsBadge = $"{fps} fps";
VideoSeedBadge = seed.ToString();

var item = new VideoAssetItem(filename, RenderedVideoUrl, duration, resolution, fps, seed, 1024 * 1024, DateTime.UtcNow);
GeneratedVideosList.Insert(0, item);
ToastService.Instance.Show("Video generated successfully!", ToastType.Success);
}
else
{
ToastService.Instance.Show("Failed to generate video.", ToastType.Error);
}
}
catch (Exception ex)
{
ToastService.Instance.Show($"Video Generation Error: {ex.Message}", ToastType.Error);
}
finally
{
VideoGenerationProgress = 100;
IsGeneratingVideo = false;
}
}

[RelayCommand]
public async Task LoadGeneratedVideosAsync()
{
try
{
var response = await Http.GetAsync($"{ApiBase}/api/video/files");
if (response.IsSuccessStatusCode)
{
var jsonStr = await response.Content.ReadAsStringAsync();
using var doc = JsonDocument.Parse(jsonStr);
GeneratedVideosList.Clear();

foreach (var el in doc.RootElement.EnumerateArray())
{
var filename = el.GetProperty("filename").GetString() ?? "";
var url = el.GetProperty("url").GetString() ?? "";
var fullUrl = url.StartsWith("http") ? url : $"{ApiBase}{url}";
var duration = el.TryGetProperty("duration", out var dur) ? dur.GetString() ?? "3.0s" : "3.0s";
var resolution = el.TryGetProperty("resolution", out var res) ? res.GetString() ?? "832x480" : "832x480";
var fps = el.TryGetProperty("fps", out var fpsProp) ? fpsProp.GetInt32() : 16;
var seed = el.TryGetProperty("seed", out var seedProp) ? seedProp.GetInt64() : 42890L;
var sizeBytes = el.TryGetProperty("sizeBytes", out var size) ? size.GetInt64() : 0L;
var createdAt = el.TryGetProperty("createdAt", out var dt) ? dt.GetDateTime() : DateTime.UtcNow;

GeneratedVideosList.Add(new VideoAssetItem(filename, fullUrl, duration, resolution, fps, seed, sizeBytes, createdAt));
}

if (GeneratedVideosList.Count > 0 && string.IsNullOrEmpty(RenderedVideoUrl))
{
SelectVideo(GeneratedVideosList[0]);
}
}
}
catch { }
}

[RelayCommand]
public void SelectVideo(VideoAssetItem item)
{
if (item == null) return;
RenderedVideoUrl = item.Url;
VideoDurationText = item.Duration;
VideoResolutionBadge = item.Resolution;
VideoFpsBadge = $"{item.Fps} fps";
VideoSeedBadge = item.Seed.ToString();
}

[RelayCommand]
public void DownloadVideo()
{
if (!string.IsNullOrWhiteSpace(RenderedVideoUrl))
{
BrowserLauncher.OpenUrl(RenderedVideoUrl);
}
}

[RelayCommand]
public void ToggleVideoPlay()
{
IsVideoPlaying = !IsVideoPlaying;
}

[RelayCommand]
public void ToggleVideoLoop()
{
IsVideoLooping = !IsVideoLooping;
}
}
Loading
Loading