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