Adaptivecards: [Feature Request] API for rendering an adaptive card to an image

[robinsedlaczek]

Issue Description

Adaptive cards are still not completely supported in e.g. Cortana, Skype and Teams. A roadmap is not really around. So adapting the Adaptive Card technology/standard is impeded, because people cannot bring their already existing adaptive card implementations to those platforms. Thus, people are stopped form releasing features.

Instead of waiting for Adaptive Cards being completely supported by a platform, we can simply use images: An adaptive card could be rendered to an image that can be used in conversation messages on channels that are not (yet) supporting adaptive cards or even in all new channels that will appear in the future.

Rendering cards to an image is shown in the WPFVisualizer sample (https://github.com/Microsoft/AdaptiveCards/tree/master/source/dotnet/Samples/WPFVisualizer). But this is specific to WPF and does not work properly in other scenarios (based on WPF, so you have to deploy it, e.g. with a bot implementation).

Feature Request

We need a utility service that renders an adaptive card to an image. Only a simple default design is needed, e.g. the card design of WebChat. The service works async and returns at least a byte stream of the image.

Code Example

var hostConfig = new AdaptiveHostConfig()
{
    SupportsInteractivity = false
};

var renderer = new AdaptiveCardRenderer(hostConfig)
{
    // Set defined resources here.
    Resources = new ResourceDictionary()
};

Stream pngImageStream = await renderer.RenderToImageAsync(parseResult.Card);

[matthidinger]

Hi @robbiezhang, we are hard at work on all Microsoft channels getting native adaptive cards support launched asap. Stay tuned we should have more to share before the end of the year.

As for the image service, Bot Framework currently does automatically render to image on non-MSFT channels, this works today. It's a less than ideal experience in some cases, since Actions and Inputs get dropped. You are of course able to run/host that WPF image service yourself and use it any specific channels that don't have adaptive support yet.

[robinsedlaczek]

Why not providing the code for rendering as an image to non-MSFT channels to the community if it already exists? Only the basic rendering part? As I said, reduced, without special formatting and design for the target channel/platform would be enough.

I tried to use the WPF image service to render to an image within my bot. But it does not work properly. E.g. the method RenderToImageAsync does not return when using it within a bot implementation, adaptive image elements within a card are not rendered from time to time and at least, I don't know whether it's good to bring WPF with my bot implementation - only to render to an image.

Yes, as we can see in the images below, some channels show an image (e.g. Slack). But why not on the MSFT channels (Skype, Skype for Desktop, Cortana)? For show cases, that would be great.

Ok, if you say there will be something announced this year, I should perhaps wait. But a properly working image service could help in all cases you are not working on currently. And we can start show casing our bots with adaptive cards earlier. Especially when there is no official roadmap!! :)

[IntranetFactory]

@matthidinger is the image service you suggest https://github.com/Microsoft/AdaptiveCards/tree/master/source/dotnet/Samples/ImageRendererServer ?

That sample seems to work, but the resulting images are quite low quality and blurry. So I'm wondering if that is really the correct service?

[robinsedlaczek]

@matthidinger I found the new method AdaptiveCardRenderer.RenderCardToImageAsync in package AdaptiveCards.Rendering.Wpf 1.0.0-beta06 and used it in my server as well. Works fairly good! The threading was the problem with previous version of the WPF renderer that caused images not to be rendered in a card. If that is the answer on that issue, many many thanks! :)

Works pretty fine. Resolution is ok, no blurry effect (last image):

[matthidinger]

That's great that you got it working, that is indeed why we provided that library! Please let us know if you run into anything or have any other feedback!

[robinsedlaczek]

Thanks for the lib and being so fast on this feedback! :)

[ejadib]

@matthidinger is there anything like the AdaptiveCardRenderer.RenderCardToImageAsync but for node?

[matthidinger]

@ejadib there isn't such a thing at this time, but I was doing some research and it seems like there are quite a few node packages that would enable it. I don't have time to really investigate it right now but I'd be more than happy to review/integrate a PR if someone got it going

[robinsedlaczek]

@matthidinger @ejadib I felt free to create issue #1012 for the NodeJS implementation. Hope that's ok. Could you please provide your results of package evaluation?