[WIP] AILab: Predict panel #37826
[WIP] AILab: Predict panel #37826
Conversation
|
@madelynkasula and @JillianK can you take a look at this WIP, please? I've started down a path but I'm not sure it's the best one. I don't know the best way to get info in and out of the App Lab code - the applab redux? - to use to make api calls related to this new design element. The overall idea is: 1.) User drags out a Predict Panel element |
| selectedId: state.mlModelDetails.modelId | ||
| }), | ||
| dispatch => ({ | ||
| setMLModelId(modelId) { |
There was a problem hiding this comment.
I think if you go down the redux route you'll need another param to distinguish which predict panel you're updating in case a student adds more than one to their app.
There was a problem hiding this comment.
+1 to jillian's comment. however, is there a reason we want/need to use redux to store this state? it looks like the existing design elements store their state in the component rather than redux.
if only <PropertyRow/> and <MLModelSelectorRow/> need to access this state, i'd have PropertyRow manage the state and pass it as props into MLModelSelectorRow
| <PropertyRow | ||
| desc={'model id'} | ||
| initialValue={elementUtils.getId(element)} | ||
| handleChange={this.props.handleChange.bind(this, 'model id')} |
There was a problem hiding this comment.
You probably want to add a switch case for this change in the updateProperty function. That function is also another option for where to make the API call/dispatch redux action or somewhere in here which is the handleChange that is being referenced here
| selectedId: state.mlModelDetails.modelId | ||
| }), | ||
| dispatch => ({ | ||
| setMLModelId(modelId) { |
There was a problem hiding this comment.
+1 to jillian's comment. however, is there a reason we want/need to use redux to store this state? it looks like the existing design elements store their state in the component rather than redux.
if only <PropertyRow/> and <MLModelSelectorRow/> need to access this state, i'd have PropertyRow manage the state and pass it as props into MLModelSelectorRow
Conflicts: dashboard/app/controllers/api/v1/ml_models_controller.rb
|
change of plans! the ideas here morphed and rolled into #38664 |
This is the beginning of an App Lab component internally called the Predict Panel.
We wanted a way to use a trained model, saved out of AI Lab, in App Lab, without the student having to spend a lot of time constructing a form UI. The Predict Panel takes care of rendering the form that is used to then do a prediction using that trained model.
The Predict Panel itself is a UI component that can be added to a screen in design mode:
The panel offers two event code stubs that can be added to the student's program:
The panel offers a property for the model ID:
Clicking "Choose..." (above) pops up a modal which enumerates the current user's trained models that were saved in AI Lab:
The student can fill out the event code stubs to both initialise the Predict Panel and be notified when a prediction has been made:
When the program is run, the Predict Panel takes a moment to retrieve the trained model, and then presents a form with the appropriate dropdowns/inputs and a "Predict" button:
And when the "Predict" button is pressed, the student's code is called, and the prediction can be processed: