python-3.x - Python 破折号 : Hide a component with one event and make it visible with another created through a callback

Question

这是一个我想用 Dash 做的“几乎”可行的示例。几乎是因为这段代码可以工作，但缺少我打算​​做的一部分，但是当我尝试实现其他部分时，我收到错误。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash()
app.config['suppress_callback_exceptions']=True
image = "tmpimg.png"

app.layout = html.Div([
       html.Div([
       html.Div([
           html.Button('Load image', id='load-button'),
           dcc.Upload(
                   id='upload-data',
                   children=html.Button('Upload image', id='upload-button')
           )
       ]),
       html.Div([
           html.Div(id='images-div'),
           html.Div(id='classification-div'),
           html.Div(id='classification-div2')
       ])
       ])
 ])

@app.callback(
   Output(component_id='images-div', component_property='children'),
   [Input('load-button','n_clicks')]
)
def update_output_div_img(n_clicks):
   return html.Div([html.Img(
                           src=app.get_asset_url(image),
                           style={
                                   'width' : '10%',
                                    'cursor': 'pointer'
                                   }
                       )], id='img'
                   )

@app.callback(
   Output(component_id='classification-div', component_property='children'),
   [Input('img','n_clicks')]
)
def update_output_div1(n_clicks):  
   return html.Div([html.H2('Div1')])

@app.callback(Output('classification-div2', 'children'),
             [Input('upload-data', 'contents')])
def update_output_div2(content):
   return html.Div([html.H2('Div2')])

@app.callback(
   Output(component_id='classification-div', component_property='style'),
   [Input('upload-data', 'contents')]
)
def update_style(content):
   if content:
       return {'display':'none'}
   else: return {'display':'inline'}


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

当您加载页面或按下“加载图像”按钮时，update_output_div_img 将通过回调加载图像。现在，图像加载后，您可以单击它，然后会出现文本 Div1。当您按下上传按钮加载图像时，“Div1”应该消失，只保留 Div 2。到目前为止一切顺利。

现在，当我再次单击图像时，“Div1”文本不会出现，因为显示已更改为“无”。我希望当我再次单击图像时，“Div1”文本应该再次显示，因此我修改了上面第一个 div 的样式的回调，这样当您单击图像时它就会被触发，因为没有content 我想它应该将显示更改为内联。

@app.callback(
   Output(component_id='classification-div', component_property='style'),
   [Input('upload-data', 'contents'),
    Input('img','n_clicks')]
)
def update_style(content,n_clicks):
   if content:
       return {'display':'none'}
   else: return {'display':'inline'}

但是当我加载网页时，这会触发“加载依赖项时出错”消息。我认为问题的发生是因为在上传组件从一开始就加载时，单击的图像是由另一个回调生成的。

有什么想法可以解决这个问题吗？

Answer 1

我不确定我是否正确理解了您想要实现的目标，但这里有一个对您的代码的修复，以避免出现依赖项问题:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash()
app.config['suppress_callback_exceptions']=True
image = "tmpimg.png"

app.layout = html.Div([
       html.Div([
       html.Div([
           html.Button('Load image', id='load-button'),
           dcc.Upload(
                   id='upload-data',
                   children=html.Button('Upload image', id='upload-button')
           )
       ]),
       html.Div([
           html.Div([html.Div(id='img')], id='images-div'),
           html.Div(id='classification-div'),
           html.Div(id='classification-div2')
       ])
       ])
 ])

@app.callback(
   Output(component_id='img', component_property='children'),
   [Input('load-button', 'n_clicks')]
)
def update_output_div_img(n_clicks):
    if n_clicks and n_clicks>0:
        return [html.Img(src=app.get_asset_url(image),
                               style={
                                       'width' : '10%',
                                        'cursor': 'pointer'
                                       })]

@app.callback(
   Output(component_id='classification-div', component_property='children'),
   [Input('img','n_clicks')]
)
def update_output_div1(n_clicks):
    if n_clicks and n_clicks>0:
        return [html.H2('Div1')]

@app.callback(Output('classification-div2', 'children'),
             [Input('upload-data', 'contents')])
def update_output_div2(content):
    if content:
        return [html.H2('Div2')]

@app.callback(
   Output(component_id='classification-div', component_property='style'),
   [Input('upload-data', 'contents'),
    Input('img','n_clicks')]
)
def update_style(content, n_clicks):
   if content and n_clicks and n_clicks>0:
       return {'display':'none'}
   else: return {'display':'inline'}


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

基本上，您的问题是您尝试使用 id=img 中未在 app.layout 中定义的组件作为输入。另外，如果您不希望在页面加载时触发这些回调，请考虑为所有按钮添加对 n_clicks 的检查。