Sunday, 11 April 2021

Dash python - images callbacks based on pandas columns

I have this df from an excel file:

URL Category    Tag1    Tag2    formatted
0   https://www.youtube.com/embed/K8L6KVGG-7o   Tutorial    Python  Regex   html.Iframe(src='https://www.youtube.com/embed...
1   https://www.youtube.com/embed/VPUX7nRlYAU   Docu    Mushroom    Fake leather    html.Iframe(src='https://www.youtube.com/embed...
2   https://www.youtube.com/embed/c6nurN-Hii8   Tutorial    Mushroom    Fake leather    html.Iframe(src='https://www.youtube.com/embed...
3   https://www.youtube.com/embed/K-v2erXztnY   Tutorial    Blender Geometry    html.Iframe(src='https://www.youtube.com/embed...
4   https://www.youtube.com/embed/1jHUY3qoBu8   Tutorial    Blender Low poly modeling   html.Iframe(src='https://www.youtube.com/embed...

and I wanted to create a dash app that would return the videos based on a dropdown menu list of choices, such as from Category or Tag1.

I was able to visualize all the videos in the app by creating an html.Iframe loop from the list of embeded video list, but was not able to make the dropdown menu to work.

What am I doing wrong in the callback?

Currently, if I select a value from the dropdown I return:

ValueError: ('Lengths must match to compare', (5,), (1,))

and with no choices I get an empty frame.

urls_list = df['URL'].to_list()

app = dash.Dash(__name__) 

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

""" videos = []
for url in urls_list:
    videos.append(html.Iframe(src=url)) """ 
videos = []
for url in urls_list:
    videos.append('(src='+"'"+url+"'"+')')

df['formatted'] = videos



app.layout = html.Div([
    
    html.Div([
                html.Div(className="header", 
                         children=[
                          html.Div(['YT Cat!'], id='title'),
                          html.Div([dcc.Link('Most viewed', href='', id='link-menu'),
                          dcc.Link('Newly added', href='', id='link-menu2')],
                         className='header-links')
                      ]),
                
                ], className='header-container'),
                
                       
    html.Div([
        html.Div([html.Img(id='logo')])
    ]),
    dcc.Dropdown(
        id='dropdown_main',
        options=[{'label':x, 'value':x} for x in df['Category'].unique()] + [{'label':x, 'value':x} for x in df['Tag1'].unique()],
        multi=True
    ),

    html.Div(id='video_placeholder'),#children=videos)
    
    ])

@app.callback(
    dash.dependencies.Output('video_placeholder', 'children'),
    [dash.dependencies.Input('dropdown_main', 'value')]
)
def update_output(dropdown_value):
    return display_video(dropdown_value)

def display_video(dropdown_value):
    if dropdown_value == 'Tutorial':
       df[df['Category'] == 'Tutorial'].formatted
       
    elif dropdown_value == 'Docu':
       df[df['Category'] == 'Docu'].formatted

    return html.Iframe(df[df['Category'] == dropdown_value].formatted)


from Dash python - images callbacks based on pandas columns

No comments:

Post a Comment