Merge remote-tracking branch 'origin/main'

Author: Layoric

MyApp/MarkdownPagesBase.cs

@@ -11,6 +11,7 @@
 using Markdig.Extensions.CustomContainers;
 using ServiceStack.IO;
 using ServiceStack.Text;
+using Markdig.Extensions.Diagrams;
 
 namespace MyApp;
 
@@ -112,6 +113,7 @@ public virtual MarkdownPipeline CreatePipeline()
             .UseAdvancedExtensions()
             .UseAutoLinkHeadings()
             .UseHeadingsMap()
+            .UseCustomDiagramExtension()
             .UseCustomContainers(MarkdigConfig.Instance.ConfigureContainers);
         MarkdigConfig.Instance.ConfigurePipeline?.Invoke(builder);
 
@@ -374,6 +376,45 @@ public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
     }
 }
 
+public class MermaidBlockRenderer(CodeBlockRenderer? underlyingRenderer = null) : HtmlObjectRenderer<CodeBlock>
+{
+    private readonly CodeBlockRenderer underlyingRenderer = underlyingRenderer ?? new CodeBlockRenderer();
+    protected override void Write(HtmlRenderer renderer, CodeBlock obj)
+    {
+        if (obj is not FencedCodeBlock fencedCodeBlock || obj.Parser is not FencedCodeBlockParser parser)
+        {
+            underlyingRenderer.Write(renderer, obj);
+            return;
+        }
+
+        var attributes = obj.TryGetAttributes() ?? new HtmlAttributes();
+        attributes.AddClass("mermaid not-prose");
+        var txt = GetContent(obj);
+        renderer
+            .Write("<pre")
+            .WriteAttributes(attributes)
+            .Write(">")
+            .Write(txt)
+            .WriteLine("</pre>");
+    }
+    private static string GetContent(LeafBlock obj)
+    {
+        var code = new StringBuilder();
+        foreach (var line in obj.Lines.Lines)
+        {
+            var slice = line.Slice;
+            if (slice.Text == null)
+                continue;
+
+            var lineText = slice.Text.Substring(slice.Start, slice.Length);
+            code.AppendLine();
+            code.Append(lineText);
+        }
+
+        return code.ToString();
+    }
+}
+
 public class FilesCodeBlockRenderer(CodeBlockRenderer? underlyingRenderer = null) : HtmlObjectRenderer<CodeBlock>
 {
     private readonly CodeBlockRenderer underlyingRenderer = underlyingRenderer ?? new CodeBlockRenderer();
@@ -614,55 +655,6 @@ protected override void Write(HtmlRenderer renderer, CustomContainer obj)
     }
 }
 
-public class MermaidContainerRenderer : HtmlObjectRenderer<CustomContainer>
-{
-    protected override void Write(HtmlRenderer renderer, CustomContainer obj)
-    {
-        renderer.EnsureLine();
-        if (renderer.EnableHtmlForBlock)
-        {
-            renderer.Write("<div class=\"mermaid-diagram\">");
-            renderer.WriteLine("<pre class=\"mermaid\">");
-        }
-
-        // Write the Mermaid diagram content
-        if (obj.FirstOrDefault() is LeafBlock leafBlock)
-        {
-            // There has to be an official API to resolve the original text from a renderer?
-            string? FindOriginalText(ContainerBlock? block)
-            {
-                if (block != null)
-                {
-                    if (block.FirstOrDefault(x => x is LeafBlock { Lines.Count: > 0 }) is LeafBlock first)
-                        return first.Lines.Lines[0].Slice.Text;
-                    return FindOriginalText(block.Parent);
-                }
-
-                return null;
-            }
-
-            var originalSource = leafBlock.Lines.Count > 0
-                ? leafBlock.Lines.Lines[0].Slice.Text
-                : FindOriginalText(obj.Parent);
-            if (originalSource == null)
-            {
-                HostContext.Resolve<ILogger<PreContainerRenderer>>().LogError("Could not find original Text");
-                renderer.WriteLine($"Could not find original Text");
-            }
-            else
-            {
-                renderer.WriteEscape(originalSource.AsSpan().Slice(leafBlock.Span.Start, leafBlock.Span.Length));
-            }
-        }
-
-        if (renderer.EnableHtmlForBlock)
-        {
-            renderer.WriteLine("</pre>");
-            renderer.WriteLine("</div>");
-        }
-    }
-}
-
 public class IncludeContainerInlineRenderer : HtmlObjectRenderer<CustomContainerInline>
 {
     protected override void Write(HtmlRenderer renderer, CustomContainerInline obj)
@@ -812,7 +804,8 @@ public void AddBuiltInContainers(string[]? exclude = null)
     {
         CodeBlocks = new()
         {
-            ["files"] = origRenderer => new FilesCodeBlockRenderer(origRenderer)
+            ["files"] = origRenderer => new FilesCodeBlockRenderer(origRenderer),
+            ["mermaid"] = origRenderer => new MermaidBlockRenderer(origRenderer),
         };
         BlockContainers = new()
         {
@@ -846,7 +839,6 @@ public void AddBuiltInContainers(string[]? exclude = null)
             },
             ["pre"] = new PreContainerRenderer(),
             ["youtube"] = new YouTubeContainerRenderer(),
-            ["mermaid"] = new MermaidContainerRenderer(),
         };
         InlineContainers = new()
         {
@@ -915,6 +907,24 @@ public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
     }
 }
 
+public class CustomDiagramExtension : IMarkdownExtension
+{
+    public void Setup(MarkdownPipelineBuilder pipeline)
+    {
+    }
+
+    public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
+    {
+        if (renderer is HtmlRenderer htmlRenderer)
+        {
+            var codeRenderer = htmlRenderer.ObjectRenderers.FindExact<CodeBlockRenderer>()!;
+            // TODO: Add other well known diagram languages
+            //codeRenderer.BlocksAsDiv.Add("mermaid");
+            codeRenderer.BlocksAsDiv.Add("nomnoml");
+        }
+    }
+}
+
 public class HeadingsMapExtension : IMarkdownExtension
 {
     public void Setup(MarkdownPipelineBuilder pipeline)
@@ -1004,6 +1014,12 @@ public static MarkdownPipelineBuilder UseCustomContainers(this MarkdownPipelineB
         pipeline.Extensions.AddIfNotAlready(ext);
         return pipeline;
     }
+
+    public static MarkdownPipelineBuilder UseCustomDiagramExtension(this MarkdownPipelineBuilder pipeline)
+    {
+        pipeline.Extensions.ReplaceOrAdd<DiagramExtension>(new CustomDiagramExtension());
+        return pipeline;
+    }
 }
 
 public class DocumentMap

MyApp/MyApp.csproj

@@ -21,7 +21,7 @@
   </Target>
 
   <ItemGroup>
-    <PackageReference Include="Markdig" Version="0.33.*" />
+    <PackageReference Include="Markdig" Version="0.37.*" />
     <PackageReference Include="ServiceStack" Version="8.*" />
     <PackageReference Include="ServiceStack.Mvc" Version="8.*" />
 

MyApp/Pages/Shared/MermaidIncludes.cshtml

@@ -1,41 +1,35 @@
 <script type="module">
     import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-    mermaid.initialize({ startOnLoad: true });
+    mermaid.initialize({ 
+        startOnLoad: true,
+        theme: 'base',
+        'themeVariables': {
+            'primaryColor': '#fff',
+            'lineColor': '#333',
+            'primaryBorderColor': 'rgb(67 56 202)', // text-indigo-700	
+            'secondaryColor': '#fff',
+            'primaryTextColor': '#333',
+            'tertiaryColor': '#333'
+        }        
+    });
 </script>
 <style>
-    .mermaid-diagram {
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        padding: 1rem;
-        background-color: #f3f4f6;
-        border-radius: 0.5rem;
-        overflow-x: auto;
-    }
-    .mermaid-diagram pre.mermaid {
-        font-size: 0.875rem;
-        background-color: #f3f4f6 !important;
-    }
-    /* Ensure text color remains visible in both light and dark modes */
-    .mermaid-diagram pre.mermaid,
-    .mermaid-diagram pre.mermaid * {
-        color: #333 !important;
-    }
-    /* Specifically target SVG text elements */
-    .mermaid-diagram pre.mermaid svg text {
-        fill: #333 !important;
-    }
-    /* Ensure edge labels remain visible */
-    .mermaid-diagram pre.mermaid .edgeLabel {
-        background-color: #f3f4f6;
-        color: #333;
-    }
-    /* Override any Tailwind dark mode styles */
-    @@media (prefers-color-scheme: dark) {
-    .mermaid-diagram pre.mermaid,
-    .mermaid-diagram pre.mermaid *,
-    .mermaid-diagram pre.mermaid svg text,
-    .mermaid-diagram pre.mermaid .edgeLabel {
-        color: #333 !important;
-    }
-    }
-</style>
+pre.mermaid {
+    background-color: #fff !important;
+}
+.dark pre.mermaid {
+    background-color: #000 !important; /*bg-gray-800*/
+}
+.dark pre.mermaid .edgeLabel, .dark pre.mermaid .edgeLabel p, .dark pre.mermad .labelBkg {
+    background-color: #000 !important;
+}
+.dark pre.mermaid .edgeLabel, .dark pre.mermaid .edgeLabel p {
+    color: rgb(209 213 219) !important;
+}
+.dark pre.mermaid .flowchart-link { 
+    stroke: rgb(209 213 219) !important;
+}
+.dark pre.mermaid .node rect {
+    stroke: #fff !important;
+}
+</style>

MyApp/_includes/ai-server/endpoint-usage.md

@@ -0,0 +1,6 @@
+These endpoints are used in a similar way to other AI Server endpoints where you can provide:
+ - `RefId` - provide a unique identifier to track requests
+ - `Tag` - categorize like requests under a common group
+
+In addition **Queue** requests can provide:
+ - `ReplyTo` - URL to send a POST request to when the request is complete

MyApp/_pages/ai-server/usage/chat.md renamed to MyApp/_pages/ai-server/chat.md

@@ -0,0 +1,16 @@
+---
+title: Image to Image
+---
+
+## Using Image to Image Endpoints
+
+::include ai-server/endpoint-usage.md::
+
+### Image to Image {#image-to-image}
+
+::include ai-server/cs/image-to-image-1.cs.md::
+
+### Queue Image to Image {#queue-image-to-image}
+
+::include ai-server/cs/queue-image-to-image-1.cs.md::
+

MyApp/_pages/ai-server/image-to-image.md

@@ -0,0 +1,20 @@
+---
+title: Image to Text
+---
+
+## Using Image to Text Endpoints
+
+::include ai-server/endpoint-usage.md::
+
+### Image to Text {#image-to-text}
+
+::include ai-server/cs/image-to-text-1.cs.md::
+
+### Queue Image to Text {#queue-image-to-text}
+
+::include ai-server/cs/queue-image-to-text-1.cs.md::
+
+:::info
+Ensure that the ComfyUI Agent has the Florence 2 model downloaded and installed for the Image-To-Text functionality to work.
+This can be done by setting the `DEFAULT_MODELS` environment variable in the `.env` file to include `image-to-text`
+:::

MyApp/_pages/ai-server/image-to-text.md

@@ -0,0 +1,20 @@
+---
+title: Image Upscale
+---
+
+## Using Image Upscale Endpoints
+
+::include ai-server/endpoint-usage.md::
+
+### Image Upscale {#image-upscale}
+
+::include ai-server/cs/image-upscale-1.cs.md::
+
+### Queue Image Upscale {#queue-image-upscale}
+
+::include ai-server/cs/queue-image-upscale-1.cs.md::
+
+## Additional Functionality
+
+AI Server also provides Image-To-Text generation using the ComfyUI Agent that utilizes the [Florence 2 model](https://huggingface.co/microsoft/Florence-2-base). The ComfyUI Agent must have this model downloaded and installed to support this functionality.
+

MyApp/_pages/ai-server/image-upscale.md

@@ -0,0 +1,16 @@
+---
+title: Image with Mask
+---
+
+## Using Image with Mask Endpoints
+
+::include ai-server/endpoint-usage.md::
+
+### Image with Mask {#image-with-mask}
+
+::include ai-server/cs/image-with-mask-1.cs.md::
+
+### Queue Image with Mask {#queue-image-with-mask}
+
+::include ai-server/cs/queue-image-with-mask-1.cs.md::
+

MyApp/_pages/ai-server/image-with-mask.md

@@ -5,6 +5,20 @@ description: Introduction to AI Server and its key features
 
 AI Server is a way to orchestrate your AI requests through a single self-hosted application to control what AI Providers you use without impacting your client integrations. It serves as a private gateway to process LLM, AI, and image transformation requests, dynamically delegating tasks across multiple providers including Ollama, OpenRouter, Replicate, Comfy UI, utilizing models like Whisper, SDXL, Flux, and tools like ffmpeg.
 
+```mermaid
+flowchart TB
+    A[AI Server] 
+    A --> D{LLM APIs}
+    A --> C{Ollama}
+    A --> E{Media APIs}
+    A --> F{Comfy UI 
+    + 
+    FFmpeg}
+    D --> D1[OpenRouter / OpenAI / Mistral / Anthropic / Google Cloud / Groq]  
+    E --> E1[Replicate / dall-e-3 / Text to speech]
+    F --> F1[Diffusion / Whisper / TTS]
+```
+
 ## Key Features
 
 - **Unified AI Gateway**: Centralize all your AI requests through a single self-hosted service.