replace gifs with asciicinema

Author: mythz

MyApp/Configure.AppHost.cs

@@ -16,6 +16,9 @@ public override void Configure(Funq.Container container)
         SetConfig(new HostConfig {
             IgnorePathInfoPrefixes = {
                 "/templates",
+            },
+            AllowFileExtensions = {
+                "cast"
             }
         });
         Plugins.RemoveAll(x => x is UiFeature);

MyApp/Pages/AiServer.cshtml

@@ -9,6 +9,7 @@
 }
 
 @await Html.PartialAsync("MermaidIncludes")
+@await Html.PartialAsync("AsciiCinemaIncludes")
 
 @await Html.PartialAsync("DocsPage", new Shared.DocsPage {
    Brand = "AI Server",

MyApp/Pages/Shared/AsciiCinemaIncludes.cshtml

@@ -0,0 +1,13 @@
+<link rel="stylesheet" href="/css/asciinema-player.css">
+<script src="/lib/js/asciinema-player.js"></script>
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll('[data-asciicinema]').forEach(el => {
+        const path = el.dataset.asciicinema
+        const options = el.dataset.options 
+            ? new Function(`return (${el.dataset.options})`)()
+            : { loop: true, poster:'npt:00:01' }
+        AsciinemaPlayer.create(path, el, options)
+    })
+})
+</script>

MyApp/Pages/Shared/HighlightIncludes.cshtml

@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="css/highlight.css">
-<script src="lib/js/highlight.js"></script>
+<link rel="stylesheet" href="/css/highlight.css">
+<script src="/lib/js/highlight.js"></script>

MyApp/_pages/ai-server/comfy-extension.md

@@ -25,7 +25,8 @@ cat install.sh | bash
 
 This process will also persist the configuration in the `.env` file in the ComfyUI Agent directory, so you can easily restart the ComfyUI Agent with the same configuration.
 
-![](/img/pages/ai-server/agent-install.gif)
+<div data-asciicinema="/pages/ai-server/agent-comfy-install.cast" 
+     data-options="{loop:true,poster:'npt:00:08',theme:'dracula'}"></div>
 
 :::info
 On the first run, the ComfyUI Agent will download the models you selected during the installation process. This can take some time depending on the size of the models and your internet connection speed.

MyApp/_pages/ai-server/index.md

@@ -19,7 +19,8 @@ cat install.sh | bash
 
 The installer will detect common environment variables for the supported AI Providers like OpenAI, Google, Anthropic, and others, and prompt ask you if you want to add them to your AI Server configuration.
 
-![](/img/pages/ai-server/install-ai-server.gif)
+<div data-asciicinema="/pages/ai-server/ai-server-install.cast" 
+     data-options="{loop:true,poster:'npt:00:08',theme:'dracula'}"></div>
 
 Alternatively, you can specify which providers you want and provide the APIs before continuing with the installation.