Recipes details page is inconsistent and is hard to use

[axel7083]

Is your enhancement related to a problem? Please describe

The details page depends on the model selected, leading to problems in the UI when switching models, this is a weird behaviour, leading to potential problem when multiple models could be selected.

Describe the solution you'd like

Improve the way we show running recipes

Describe alternatives you've considered

Creating a recipe should be done in a similar way than creating a Playground and InferenceServer.

Additional context

Model selected with matching pod

Model selected without matching pod

[ekidneyrh]

We discussed this during the UX call yesterday.

Problem is, when looking to run an AI app, the model has to be selected from the long unsorted list first. This can make it hard to find the right model. It also follows a pattern that's not seen anywhere else in pd.

We could have it similar to how a model is created. Going through Model Services > New Model Service and then a form page.

Recipes catalog would benefit from a revamp. The categories and how it's displayed hasn't been touched in a few months and would benefit from another iteration. Maybe we could have it similar to the catalog under models with the tabs at the top for sorting.

Do we need this page that divides up the different recipes? Was its original purpose that there are so many different recipes, they needed to be sorted like this? Or is it more so to have the page that describes what each category is when you click into a card?

[axel7083]

Do we need this page that divides up the different recipes? Was its original purpose that there are so many different recipes, they needed to be sorted like this? Or is it more so to have the page that describes what each category is when you click into a card?

Since it is a catalog, of categorized item, a table was not suitable, as we would need a table per category, having cards was a good idea at first, but as you mention The categories and how it's displayed hasn't been touched in a few months and would benefit from another iteration.

I am in favor of fully redoing the recipes catalog page, I am not sure we would need tabs like models is doing, imported, downloaded etc. I would rather have card design similar to the extension page.

Context

I am gonna try to give some context on the Recipes.

What is a recipe ?

A recipe is a mini-project, like a template, running a demo application.

The recipes are git repositories. Any repository can be a recipe, with the condition of having a ai-lab.yaml file in it. (This is a configuration file).

A recipe define a list of containers, it need to run the application, with the special case of the Model service the model service is a requirement the recipe can define. let's take the chatbot recipe, it require a service providing the LLM api to work, but the recipe itself is simply the database and the web ui.

Recipes States

A recipe can have several states, let's list them	State	Description
none	This state mean the recipe is not cloned
cloned	The recipe is available locally
built	The recipe container image has been built, and is ready to start
running	The recipe is running as a pod
exited	The recipe pod is exited

Moreover, user can open VSCode to edit the code source of the recipes, making it dirty, by this I mean, the container image will need to be re-built, before running as the code source has change.

We would need to find some way to represent some of those states, allowing the user to have a better understanding of what is available locally etc.

[ekidneyrh]

Ok thanks for the details Axel!

What about something like this, then:

Have the cards laid out like the extensions page, adding a label to the top right if it has a state. Maybe we could have the top tabs to organize, but it's not necessary.

Have the mapping set up so that when the user clicks the More details> link it opens up the summary page and when they click anywhere else on the card it brings them to a table page similar to the Models page.

Then we can have the Start AI App in the top corner that leads to a form style page where you can select the models

[axel7083]

Thanks @ekidneyrh for the work you made, as I was not really able to find a way to clearly explain what I was thinking about I started drafting a mockup.

Context

Currenlty the recipes are standalone they work by themself, but this is not the behaviour we want in the future. At some point in the very near future, we want the recipes to uses the Inference servers we manage.

Let's illustrate this with an example, where I would be running two recipes using the same models	Currently	Future

We can see, by sharing the same inference server, we reduce the number of containers. This is why we want to move with this in the future.

Recipes mockup

I was maybe not clear enough, but we cannot expose all the states I mention earlier, as this is too complicated, and would surcharge the UI with too many tabs.

I would keep 3:

• All
• Local: recipe downloaded
• Available: the one yet not downloaded

I also think the card need to be more appealing, I took some inspiration on the Extension page as I was mention above to keep some consistency with the application (even tho I made a tentative by adding an image ! I think it would help the developer understand what is it doing, might be wrong don't know)

Let's zoom in a card, to see the elements

IMO this would give enough, but not too much information to the user about the state of the recipes.

ℹ️ I am also imagining, the valid icon could be loading when a recipe is being built ? Might sound nice

Inference service

This page currently show the Inference server running (aka Model Services). But with what I explained before, we want to make a direct relation between recipes and inference server, meaning we should probably display them like some kind of children way. I made also a quick mockup

First, as visible in the navigation, I completely removed the running section, as this would be integrated in the services page (could be renamed), better name welcome.

I took old mockup of Mo as inspiration, but expanding the applications items, so user can stop, delete etc. and open them.

⚠️ This mockup has a huge flaw: how do we display recipes which are not using any inference server ? we would probably some way of displaying them somewhere.

Starting recipe

The current Start Application is doing too much, here is a schema of what the start application do:

With this many stuff, we need a better page to let the user see the logs of each action, and having it in the retractable panel, being too limited, in this way, we should reuse the Create template page used for playground and Model Service

For this page, I did not had much time, so this is not really detailed, the page would be open from the recipe details page (no mockup too), but would be simplified and have a Start recipe button.

We could need a nice way to select the models, but this time, we should see which model is already running, so not a basic ugly dropdown of names.

Additional

All mockup available on penpot here