python - 根据 Dash 中单选按钮的值更改模式匹配调用

Question

我正在创建一个 Dash 应用程序，该应用程序允许用户输入 URLS 进行屏幕截图然后进行分析，或者用户可以上传自己的图像。我正在尝试正确获取主 app.py 文件，以便可以将输入发送到三个不同功能之一（一个只截取他们列出的网站的屏幕截图，一个使用机器人搜索类似网站然后截取那些要分析的，或者只是让用户上传他们自己的图像进行分析）。请注意，一旦他们点击“提交”按钮，相关输入（电子邮件、公司名称和 URL/图像）将被传递给 rq 作业。我了解如何执行这部分操作，因此对于示例，我们可以在 Web 应用程序中打印出相关输入，以确认我们有正确的输入。

UI 的想法是它首先有一个部分来放置您的电子邮件（和其他信息），然后从每个屏幕截图选项的单选按钮开始。然后根据用户对他们想要提供的输入的偏好，他们将被显示一个供他们输入不同 URL 的位置或一个上传图像的位置（参见此处的图像）。

似乎模式匹配对他们添加更多 URL 很有用，但我不太清楚如何使用它来允许不同类型的输入。这是我到目前为止所拥有的：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH, ALL


app = dash.Dash(__name__, external_stylesheets = ['https://codepen.io/chriddyp/pen/dZVMbK.css'])
server = app.server

app.layout = html.Div([
    html.Div([
        html.H6("""E-mail address:"""),
        dcc.Input(
            id='rec-email',
            placeholder="[e-mail]",
            size=30
        ),
        html.H6("""Company Name:"""),
        dcc.Input(
            id='company-name',
            size=30
        ),
    ]),
    html.Div([
        dcc.RadioItems(
            id='radio-option',
            options=[
                {'label': "Only analyze these websites", 'value': 'exact_sites'},
                {'label': "Allow robot to analyze additional related websites", 'value': 'robot_sites'},
                {'label': "I want to upload my own images", 'value': 'upload_images'}
            ],
            value='exact_sites'
        ),
        ]),
    html.Div(id='website-methods-output')
    ])

@app.callback(
    Output('website-method', 'children'),
    [Input('radio-option', 'value')],
    [State('rec-email', 'value'),
    State('company-name', 'value')]
)

def display_inputs(radio_option, email, company):
    if radio_option=="upload_images":
        return html.Div([
            id='inputs-start',
            dcc.Upload(
                id='input-upload',
                children=html.Div([
                    'Drag and Drop or ',
                    html.A('Select Image to be Analyzed.')
                    ]),
                    style={
                        'width': '30%',
                        'height': '60px',
                        'lineHeight': '60px',
                        'borderWidth': '1px',
                        'borderStyle': 'dashed',
                        'borderRadius': '5px',
                        'textAlign': 'center',
                        'margin': '10px'
                        },
                        # Allow multiple files to be uploaded
                        multiple=False # Maybe change to True?
                ),
            children=[],
            html.Button("Add Image", id="add-image", n_clicks=0)
            ])

    else:
        return html.Div([
            id='inputs-start'
            dcc.Input(
                placeholder='www.website.com'
                ),
            children=[],
            html.Button("Add URL", id="add-url", n_clicks=0)
        ])



if __name__ == '__main__':
    app.run_server(debug=True)

标签： pythonplotly-dash

Answer 1

如果您对每个可能的单选按钮选项都有一个输入，但只显示被选中的那个，该怎么办？您可以为所有输入设置模式匹配回调，并且一次只使用一个。也许对单选按钮选择的更改不仅会更改显示/隐藏的选项，还会清除所有选项，因此您可以确保只接受正确选项中的条目。

编辑：这确实超出了单个问题的范围，所以我在这里省略了很多细节，以免编写整个 Dash 应用程序。我希望这有帮助。这些是我在评论中提到的每种不同类型的回调的一些可能的函数定义。

显示/隐藏部分

@app.callback(
    Output('inputs-container', 'children'),
    [Input('radio-option', 'value')])
def callback_func_show_hide(radio_selection):
    # Add the function logic
    pass

为部分添加新输入

@app.callback(
    Output('inputs-type-1-container', 'children'),
    [Input('add-input-1', 'n_clicks')]
    [State('inputs-type-1-container', 'children')])
def callback_func_add_input_1(add_input_click, previous_children):
    # Add the function logic. You'll need the previous_children in 
    # order to append new inputs
    pass

使用部分的输入

@app.callback(
    Output('some-output', 'children'),
    [Input({'type': 'upload-1', 'index': dash.dependencies.ALL}, 'value')])
def callback_func_process_upload_1(uploaded_data_list):
    # Add the function logic. Use uploaded_data_list to process everything.
    # Output can be whatever you want to let the user know the task is done
    pass