I am trying to output my machine learning model results which are in list to Toast component (dash bootstrap)] and below is the code.
Here is how my dashboard currently look and I want to show the results below the text box and submit button area.
Screenshot of my Dashboard
app = dash.Dash(
__name__, title="Multi Tag Prediction", external_stylesheets=[dbc.themes.BOOTSTRAP]
)
server = app.server
app.layout = html.Div(
[
html.H2(
["Multi Tag Prediction"],
style={
"text-align": "left",
"margin-left": "4.5%",
"margin-right": "2%",
"margin-bottom": "2%",
},
),
dbc.Row(
[
dbc.Col(
html.Div(
[
dbc.FormGroup(
[
dbc.Label(
"Filter by Preprocessing Functions to Apply:"
),
dbc.RadioItems(
options=[
{"label": "All", "value": "all"},
{"label": "Customized", "value": "custom"},
],
value="all",
id="radio-button",
inline=True,
style={"padding": "10px"},
),
]
),
html.Div(
[
dcc.Dropdown(
id="drop-down",
options=[
{
"label": "remove_digits",
"value": "remove_digits",
},
{
"label": "remove_stopwords",
"value": "stop_words",
},
{
"label": "text_lemmatization",
"value": "text_lemmatization",
},
],
value=[
"remove_digits",
"remove_stopwords",
"text_lemmatization",
],
multi=True,
placeholder="Select the preprocessing functions",
searchable=True,
)
],
style={"padding": "5px", "margin-bottom": "10px",},
),
html.Div(
[
html.H6(
"Filter by threshold (probabilty of labels to include):"
),
dcc.Slider(
id="slider",
min=0.1,
max=0.9,
step=0.1,
value=0.5,
marks={
0.1: "0.1",
0.2: "0.2",
0.3: "0.3",
0.4: "0.4",
0.5: "0.5",
0.6: "0.6",
0.7: "0.7",
0.8: "0.8",
0.9: "0.9",
},
tooltip={"placement": "top"},
included=False,
),
],
style={"margin-bottom": "10px"},
),
html.Div(
[
html.H6(
"Filter by label count (how many labels to include if there are more):"
),
dcc.Slider(
id="slider-2",
min=5,
max=10,
step=1,
value=5,
marks={
5: "5",
6: "6",
7: "7",
8: "8",
9: "9",
10: "10",
},
tooltip={"placement": "top"},
included=False,
),
],
style={"margin-top": "10px"},
),
],
style={
"width": "100%",
"box-shadow": "5px 5px 5px #cacfd2",
"padding": "35px",
"background-color": "#f9f9f9",
},
),
width={"size": 4, "order": "first", "offset": 0},
),
dbc.Col(
html.Div(
[
dbc.Textarea(
id="input_text",
value="",
style={
"height": 300,
"width": "100%",
"box-shadow": "5px 5px 5px #cacfd2",
# "margin-left": "-20px",
"background-color": "#f9f9f9",
},
maxLength=10000,
placeholder="Type the text or copy-paste from somewhere else",
),
dbc.Button(
"Submit",
id="submit-button",
n_clicks=0,
style={"margin-left": "532px", "margin-top": "15px",},
outline=True,
color="primary",
),
html.Div(
[
dbc.Spinner(
[
dbc.Toast(
id="output-state",
header="Predicted Labels:",
icon="info",
duration=10,
)
],
type="grow",
color="info",
fullscreen=True,
),
]
),
]
),
width={"size": 6, "order": "second"},
# align="end",
),
],
justify="around",
),
],
# style={
# "background-color": "#f2f2f2",
# "margin-left": "-15px",
# "margin-right": "-15px",
# "margin-bottom": "-15px",
# },
)
Callbacks:
@app.callback(Output("drop-down", "value"), [Input("radio-button", "value")])
def display_status(selector):
if selector == "all":
return ["remove_digits", "text_lemmatization", "remove_stopwords"]
else:
return []
@app.callback(
Output("output-state", "children"),
[Input("submit-button", "n_clicks")],
[
State("input_text", "value"),
State("slider", "value"),
State("drop-down", "value"),
State("slider-2", "value"),
],
prevent_initial_call=True,
)
def label_prediction(num_clicks, text, threshold_value, preprocess_func, label_value):
if text is None or num_clicks is None:
raise PreventUpdate
else:
params = ["remove_digits", "remove_stopwords", "text_lemmatization"]
dict_params = [param in preprocess_func for param in params]
preprocess_text = preprocess(text, *dict_params)
transformed_text = tfidf.fit_transform([preprocess_text])
prediction = classifier.predict_proba(transformed_text)
return f"Predicted labels:{get_tags(prediction[0],threshold_value,label_value)}"
if __name__ == "__main__":
app.run_server(debug=True)
Moreover, I tried
