Hugging Face's logo

Spaces:
TourdeVino
/
showcase
Sleeping

App Files Community
rufimelo commited on
Commit
4b0e12e
·
1 Parent(s): 3a4e096

yolo

Browse files
Files changed (2) hide show
  1. app/app.py +57 -48
  2. app/dashboard.ipynb +180 -51
app/app.py CHANGED
@@ -47,98 +47,107 @@ TEMPORARY_WINE_RECOMMENDATION_FORM_INFO = {}
47
 
48
 
49
  ## Layout ##
50
-
51
- dashboard_layout = html.Div([
52
- # dcc.Link('About this project', href='/wiki'),
53
- html.H1(children='Wineyards around the world', style={'textAlign':'center'}),
54
 
55
  html.Div(
56
  [
57
  html.Div(
58
  [
59
- html.H4(children='Country', style={'textAlign':'center'}),
60
- dcc.Dropdown(wine_country, wine_country[-1], id='dropdown-wc'),
61
- ], className='six columns',
62
  ),
63
  html.Div(
64
  [
65
- html.H4(children='Region', style={'textAlign':'center'}),
66
- dcc.Dropdown(['all'],'all', id='dropdown-wr'),
67
- ], className='six columns',
68
  )
69
- ], className='row'),
70
- dcc.Graph(id='world-map-fig'),
71
-
72
 
 
73
 
74
  html.Div(
75
  [
76
  html.Div(
77
  [
78
- html.H4(children='Wine Recommender', style={'textAlign':'center'}),
79
- dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection'),
80
- html.P(id='wine-recommendation', style={'textAlign':'center'}),
81
- ], className='three columns',
82
  ),
83
  html.Div(
84
  [
85
- html.P(children='Data Example', style={'textAlign':'left'}),
86
  dash_table.DataTable(
87
  data=raw_wine_similarity_df.to_dict('records'),
88
- columns=[{'id': c, 'name': c} for c in raw_wine_similarity_df.columns]
 
 
89
  )
90
- ], className='nine columns',
91
  )
92
- ], className='row'),
93
 
 
94
 
95
- html.H4(children="Wine Recommender based on users' feedback", style={'textAlign':'center'}),
96
  html.Div(
97
  [
98
  html.Div(
99
  [
100
- dcc.Dropdown(user_ids, user_ids[0], id='dropdown-selection-user'),
101
- html.P(id='wine-recommendation-from-user', style={'textAlign':'center'}),
102
- ], className='six columns',
103
  ),
104
-
105
  html.Div(
106
- [
107
- html.P(children='Data Example', style={'textAlign':'left'}),
108
  dash_table.DataTable(
109
  data=raw_ratings.to_dict('records'),
110
- columns=[{'id': c, 'name': c} for c in raw_ratings.columns]
 
 
111
  )
112
- ], className='six columns',
113
  ),
114
- ], className='row'),
115
 
 
116
 
117
- html.H4(children="Wine Preferences Form", style={'textAlign':'center'}),
118
  html.Div(
119
  [
120
  html.Div(
121
  [
122
- #Dropdown for wine name
123
- dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection-wine-form'),
124
- dcc.Input(id='input-wine-rating', type='number', placeholder='Enter wine rating', min=1, max=5),
125
- ], className='six columns',
126
  ),
127
  html.Div(
128
  [
129
- html.Button('Submit', id='submit-button', n_clicks=0),
130
- ], className='six columns',
131
  ),
132
- ], className='row'),
133
-
134
- html.Div(id='recommended-wine-rating-info', style={'textAlign':'center'}),
135
- html.P(id='recommend-wine-from-form-text', style={'textAlign':'center'}),
136
- html.Button('Reset', id='recommend-wine-from-form-reset', n_clicks=0),
137
- # Button to submit the form
138
- html.Button('Recommend Wine', id='recommend-wine-from-form', n_clicks=0),
139
- html.Div(id='recommended-wine-form-output', style={'textAlign':'center'}),
140
- ], style={'background-color': '#333', 'font-family': 'Fantasy', 'color': '#999', 'padding': '10px'})
141
-
 
 
 
 
 
 
 
 
 
 
142
  @app.callback(
143
  Output('recommend-wine-from-form-reset', 'n_clicks'),
144
  Input('recommend-wine-from-form-reset', 'n_clicks'),
 
47
 
48
 
49
  ## Layout ##
50
+ dashboard_layout = html.Div([
51
+ html.H1(children='Wineyards around the world', style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),
 
 
52
 
53
  html.Div(
54
  [
55
  html.Div(
56
  [
57
+ html.H4(children='Country', style={'textAlign': 'center', 'color': '#fff'}),
58
+ dcc.Dropdown(wine_country, wine_country[-1], id='dropdown-wc', style={'color': '#000'}),
59
+ ], className='six columns', style={'padding': '10px'}
60
  ),
61
  html.Div(
62
  [
63
+ html.H4(children='Region', style={'textAlign': 'center', 'color': '#fff'}),
64
+ dcc.Dropdown(['all'], 'all', id='dropdown-wr', style={'color': '#000'}),
65
+ ], className='six columns', style={'padding': '10px'}
66
  )
67
+ ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),
 
 
68
 
69
+ dcc.Graph(id='world-map-fig', style={'margin': '20px'}),
70
 
71
  html.Div(
72
  [
73
  html.Div(
74
  [
75
+ html.H4(children='Wine Recommender', style={'textAlign': 'center', 'color': '#fff'}),
76
+ dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection', style={'color': '#000'}),
77
+ html.P(id='wine-recommendation', style={'textAlign': 'center', 'color': '#fff'}),
78
+ ], className='three columns', style={'padding': '10px'}
79
  ),
80
  html.Div(
81
  [
82
+ html.P(children='Data Example', style={'textAlign': 'left', 'color': '#fff'}),
83
  dash_table.DataTable(
84
  data=raw_wine_similarity_df.to_dict('records'),
85
+ columns=[{'id': c, 'name': c} for c in raw_wine_similarity_df.columns],
86
+ style_header={'backgroundColor': '#444', 'color': '#fff'},
87
+ style_cell={'backgroundColor': '#333', 'color': '#fff'}
88
  )
89
+ ], className='nine columns', style={'padding': '10px'}
90
  )
91
+ ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),
92
 
93
+ html.H4(children="Wine Recommender based on users' feedback", style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),
94
 
 
95
  html.Div(
96
  [
97
  html.Div(
98
  [
99
+ dcc.Dropdown(user_ids, user_ids[0], id='dropdown-selection-user', style={'color': '#000'}),
100
+ html.P(id='wine-recommendation-from-user', style={'textAlign': 'center', 'color': '#fff'}),
101
+ ], className='six columns', style={'padding': '10px'}
102
  ),
 
103
  html.Div(
104
+ [
105
+ html.P(children='Data Example', style={'textAlign': 'left', 'color': '#fff'}),
106
  dash_table.DataTable(
107
  data=raw_ratings.to_dict('records'),
108
+ columns=[{'id': c, 'name': c} for c in raw_ratings.columns],
109
+ style_header={'backgroundColor': '#444', 'color': '#fff'},
110
+ style_cell={'backgroundColor': '#333', 'color': '#fff'}
111
  )
112
+ ], className='six columns', style={'padding': '10px'}
113
  ),
114
+ ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),
115
 
116
+ html.H4(children="Wine Preferences Form", style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),
117
 
 
118
  html.Div(
119
  [
120
  html.Div(
121
  [
122
+ dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection-wine-form', style={'color': '#000'}),
123
+ dcc.Input(id='input-wine-rating', type='number', placeholder='Enter wine rating', min=1, max=5, style={'margin-top': '10px'}),
124
+ ], className='six columns', style={'padding': '10px'}
 
125
  ),
126
  html.Div(
127
  [
128
+ html.Button('Submit', id='submit-button', n_clicks=0, style={'margin-top': '10px', 'background-color': '#444', 'color': '#fff'}),
129
+ ], className='six columns', style={'padding': '10px'}
130
  ),
131
+ ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),
132
+
133
+ html.Div(id='recommended-wine-rating-info', style={'textAlign': 'center', 'color': '#fff', 'padding': '10px'}),
134
+ html.P(id='recommend-wine-from-form-text', style={'textAlign': 'center', 'color': '#fff'}),
135
+
136
+ html.Div(
137
+ [
138
+ html.Button('Reset', id='recommend-wine-from-form-reset', n_clicks=0, style={'margin': '10px', 'background-color': '#444', 'color': '#fff'}),
139
+ html.Button('Recommend Wine', id='recommend-wine-from-form', n_clicks=0, style={'margin': '10px', 'background-color': '#444', 'color': '#fff'}),
140
+ ], style={'textAlign': 'center'}
141
+ ),
142
+
143
+ html.Div(id='recommended-wine-form-output', style={'textAlign': 'center', 'color': '#fff', 'padding': '10px'}),
144
+ ], style={
145
+ 'background-image': 'url("/assets/background.jpg")',
146
+ 'background-size': 'cover',
147
+ 'font-family': 'Fantasy',
148
+ 'color': '#999',
149
+ 'padding': '20px'
150
+ })
151
  @app.callback(
152
  Output('recommend-wine-from-form-reset', 'n_clicks'),
153
  Input('recommend-wine-from-form-reset', 'n_clicks'),
app/dashboard.ipynb CHANGED
@@ -2,14 +2,14 @@
2
  "cells": [
3
  {
4
  "cell_type": "code",
5
- "execution_count": 14,
6
  "metadata": {},
7
  "outputs": [
8
  {
9
  "name": "stderr",
10
  "output_type": "stream",
11
  "text": [
12
- "/var/folders/b4/lwfgccm95kqd2skcwvrt2fr00000gn/T/ipykernel_289/3311244344.py:94: FutureWarning:\n",
13
  "\n",
14
  "Series.__getitem__ treating keys as positions is deprecated. In a future version, integer keys will always be treated as labels (consistent with DataFrame behavior). To access a value by position, use `ser.iloc[pos]`\n",
15
  "\n"
@@ -30,7 +30,7 @@
30
  " "
31
  ],
32
  "text/plain": [
33
- "<IPython.lib.display.IFrame at 0x2ab0afaf0>"
34
  ]
35
  },
36
  "metadata": {},
@@ -100,98 +100,107 @@
100
  "\n",
101
  "\n",
102
  "## Layout ##\n",
103
- "\n",
104
- "dashboard_layout = html.Div([\n",
105
- " # dcc.Link('About this project', href='/wiki'),\n",
106
- " html.H1(children='Wineyards around the world', style={'textAlign':'center'}),\n",
107
  " \n",
108
  " html.Div(\n",
109
  " [\n",
110
  " html.Div(\n",
111
  " [\n",
112
- " html.H4(children='Country', style={'textAlign':'center'}),\n",
113
- " dcc.Dropdown(wine_country, wine_country[-1], id='dropdown-wc'),\n",
114
- " ], className='six columns',\n",
115
  " ),\n",
116
  " html.Div(\n",
117
  " [\n",
118
- " html.H4(children='Region', style={'textAlign':'center'}),\n",
119
- " dcc.Dropdown(['all'],'all', id='dropdown-wr'),\n",
120
- " ], className='six columns',\n",
121
  " )\n",
122
- " ], className='row'),\n",
123
- " dcc.Graph(id='world-map-fig'),\n",
124
- "\n",
125
  " \n",
 
126
  " \n",
127
  " html.Div(\n",
128
  " [\n",
129
  " html.Div(\n",
130
  " [\n",
131
- " html.H4(children='Wine Recommender', style={'textAlign':'center'}),\n",
132
- " dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection'),\n",
133
- " html.P(id='wine-recommendation', style={'textAlign':'center'}),\n",
134
- " ], className='six columns',\n",
135
  " ),\n",
136
  " html.Div(\n",
137
  " [\n",
138
- " html.P(children='Data Example', style={'textAlign':'left'}),\n",
139
  " dash_table.DataTable(\n",
140
  " data=raw_wine_similarity_df.to_dict('records'),\n",
141
- " columns=[{'id': c, 'name': c} for c in raw_wine_similarity_df.columns]\n",
 
 
142
  " )\n",
143
- " ], className='six columns',\n",
144
  " )\n",
145
- " ], className='row'),\n",
146
  " \n",
 
147
  " \n",
148
- " html.H4(children=\"Wine Recommender based on users' feedback\", style={'textAlign':'center'}),\n",
149
  " html.Div(\n",
150
  " [\n",
151
  " html.Div(\n",
152
  " [\n",
153
- " dcc.Dropdown(user_ids, user_ids[0], id='dropdown-selection-user'),\n",
154
- " html.P(id='wine-recommendation-from-user', style={'textAlign':'center'}),\n",
155
- " ], className='six columns',\n",
156
  " ),\n",
157
- " \n",
158
  " html.Div(\n",
159
- " [ \n",
160
- " html.P(children='Data Example', style={'textAlign':'left'}),\n",
161
  " dash_table.DataTable(\n",
162
  " data=raw_ratings.to_dict('records'),\n",
163
- " columns=[{'id': c, 'name': c} for c in raw_ratings.columns]\n",
 
 
164
  " )\n",
165
- " ], className='six columns',\n",
166
  " ),\n",
167
- " ], className='row'),\n",
168
  " \n",
 
169
  " \n",
170
- " html.H4(children=\"Wine Preferences Form\", style={'textAlign':'center'}),\n",
171
  " html.Div(\n",
172
  " [\n",
173
  " html.Div(\n",
174
  " [\n",
175
- " #Dropdown for wine name\n",
176
- " dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection-wine-form'),\n",
177
- " dcc.Input(id='input-wine-rating', type='number', placeholder='Enter wine rating', min=1, max=5),\n",
178
- " ], className='six columns',\n",
179
  " ),\n",
180
  " html.Div(\n",
181
  " [\n",
182
- " html.Button('Submit', id='submit-button', n_clicks=0), \n",
183
- " ], className='six columns',\n",
184
  " ),\n",
185
- " ], className='row'),\n",
186
- "\n",
187
- " html.Div(id='recommended-wine-rating-info', style={'textAlign':'center'}),\n",
188
- " html.P(id='recommend-wine-from-form-text', style={'textAlign':'center'}),\n",
189
- " html.Button('Reset', id='recommend-wine-from-form-reset', n_clicks=0),\n",
190
- " # Button to submit the form\n",
191
- " html.Button('Recommend Wine', id='recommend-wine-from-form', n_clicks=0),\n",
192
- " html.Div(id='recommended-wine-form-output', style={'textAlign':'center'}),\n",
193
- "], style={'background-color': '#333', 'font-family': 'Fantasy', 'color': '#999', 'padding': '10px'})\n",
194
- "\n",
 
 
 
 
 
 
 
 
 
 
195
  "@app.callback(\n",
196
  " Output('recommend-wine-from-form-reset', 'n_clicks'),\n",
197
  " Input('recommend-wine-from-form-reset', 'n_clicks'),\n",
@@ -353,6 +362,126 @@
353
  " app.run_server(host=\"0.0.0.0\", port=\"8050\", debug=debug)"
354
  ]
355
  },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
356
  {
357
  "cell_type": "code",
358
  "execution_count": null,
 
2
  "cells": [
3
  {
4
  "cell_type": "code",
5
+ "execution_count": 22,
6
  "metadata": {},
7
  "outputs": [
8
  {
9
  "name": "stderr",
10
  "output_type": "stream",
11
  "text": [
12
+ "/var/folders/b4/lwfgccm95kqd2skcwvrt2fr00000gn/T/ipykernel_289/2144404135.py:99: FutureWarning:\n",
13
  "\n",
14
  "Series.__getitem__ treating keys as positions is deprecated. In a future version, integer keys will always be treated as labels (consistent with DataFrame behavior). To access a value by position, use `ser.iloc[pos]`\n",
15
  "\n"
 
30
  " "
31
  ],
32
  "text/plain": [
33
+ "<IPython.lib.display.IFrame at 0x2a9f56350>"
34
  ]
35
  },
36
  "metadata": {},
 
100
  "\n",
101
  "\n",
102
  "## Layout ##\n",
103
+ "dashboard_layout = html.Div([\n",
104
+ " html.H1(children='Wineyards around the world', style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),\n",
 
 
105
  " \n",
106
  " html.Div(\n",
107
  " [\n",
108
  " html.Div(\n",
109
  " [\n",
110
+ " html.H4(children='Country', style={'textAlign': 'center', 'color': '#fff'}),\n",
111
+ " dcc.Dropdown(wine_country, wine_country[-1], id='dropdown-wc', style={'color': '#000'}),\n",
112
+ " ], className='six columns', style={'padding': '10px'}\n",
113
  " ),\n",
114
  " html.Div(\n",
115
  " [\n",
116
+ " html.H4(children='Region', style={'textAlign': 'center', 'color': '#fff'}),\n",
117
+ " dcc.Dropdown(['all'], 'all', id='dropdown-wr', style={'color': '#000'}),\n",
118
+ " ], className='six columns', style={'padding': '10px'}\n",
119
  " )\n",
120
+ " ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
 
 
121
  " \n",
122
+ " dcc.Graph(id='world-map-fig', style={'margin': '20px'}),\n",
123
  " \n",
124
  " html.Div(\n",
125
  " [\n",
126
  " html.Div(\n",
127
  " [\n",
128
+ " html.H4(children='Wine Recommender', style={'textAlign': 'center', 'color': '#fff'}),\n",
129
+ " dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection', style={'color': '#000'}),\n",
130
+ " html.P(id='wine-recommendation', style={'textAlign': 'center', 'color': '#fff'}),\n",
131
+ " ], className='three columns', style={'padding': '10px'}\n",
132
  " ),\n",
133
  " html.Div(\n",
134
  " [\n",
135
+ " html.P(children='Data Example', style={'textAlign': 'left', 'color': '#fff'}),\n",
136
  " dash_table.DataTable(\n",
137
  " data=raw_wine_similarity_df.to_dict('records'),\n",
138
+ " columns=[{'id': c, 'name': c} for c in raw_wine_similarity_df.columns],\n",
139
+ " style_header={'backgroundColor': '#444', 'color': '#fff'},\n",
140
+ " style_cell={'backgroundColor': '#333', 'color': '#fff'}\n",
141
  " )\n",
142
+ " ], className='nine columns', style={'padding': '10px'}\n",
143
  " )\n",
144
+ " ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
145
  " \n",
146
+ " html.H4(children=\"Wine Recommender based on users' feedback\", style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),\n",
147
  " \n",
 
148
  " html.Div(\n",
149
  " [\n",
150
  " html.Div(\n",
151
  " [\n",
152
+ " dcc.Dropdown(user_ids, user_ids[0], id='dropdown-selection-user', style={'color': '#000'}),\n",
153
+ " html.P(id='wine-recommendation-from-user', style={'textAlign': 'center', 'color': '#fff'}),\n",
154
+ " ], className='six columns', style={'padding': '10px'}\n",
155
  " ),\n",
 
156
  " html.Div(\n",
157
+ " [\n",
158
+ " html.P(children='Data Example', style={'textAlign': 'left', 'color': '#fff'}),\n",
159
  " dash_table.DataTable(\n",
160
  " data=raw_ratings.to_dict('records'),\n",
161
+ " columns=[{'id': c, 'name': c} for c in raw_ratings.columns],\n",
162
+ " style_header={'backgroundColor': '#444', 'color': '#fff'},\n",
163
+ " style_cell={'backgroundColor': '#333', 'color': '#fff'}\n",
164
  " )\n",
165
+ " ], className='six columns', style={'padding': '10px'}\n",
166
  " ),\n",
167
+ " ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
168
  " \n",
169
+ " html.H4(children=\"Wine Preferences Form\", style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),\n",
170
  " \n",
 
171
  " html.Div(\n",
172
  " [\n",
173
  " html.Div(\n",
174
  " [\n",
175
+ " dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection-wine-form', style={'color': '#000'}),\n",
176
+ " dcc.Input(id='input-wine-rating', type='number', placeholder='Enter wine rating', min=1, max=5, style={'margin-top': '10px'}),\n",
177
+ " ], className='six columns', style={'padding': '10px'}\n",
 
178
  " ),\n",
179
  " html.Div(\n",
180
  " [\n",
181
+ " html.Button('Submit', id='submit-button', n_clicks=0, style={'margin-top': '10px', 'background-color': '#444', 'color': '#fff'}),\n",
182
+ " ], className='six columns', style={'padding': '10px'}\n",
183
  " ),\n",
184
+ " ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
185
+ " \n",
186
+ " html.Div(id='recommended-wine-rating-info', style={'textAlign': 'center', 'color': '#fff', 'padding': '10px'}),\n",
187
+ " html.P(id='recommend-wine-from-form-text', style={'textAlign': 'center', 'color': '#fff'}),\n",
188
+ " \n",
189
+ " html.Div(\n",
190
+ " [\n",
191
+ " html.Button('Reset', id='recommend-wine-from-form-reset', n_clicks=0, style={'margin': '10px', 'background-color': '#444', 'color': '#fff'}),\n",
192
+ " html.Button('Recommend Wine', id='recommend-wine-from-form', n_clicks=0, style={'margin': '10px', 'background-color': '#444', 'color': '#fff'}),\n",
193
+ " ], style={'textAlign': 'center'}\n",
194
+ " ),\n",
195
+ " \n",
196
+ " html.Div(id='recommended-wine-form-output', style={'textAlign': 'center', 'color': '#fff', 'padding': '10px'}),\n",
197
+ "], style={\n",
198
+ " 'background-image': 'url(\"/assets/background.jpg\")',\n",
199
+ " 'background-size': 'cover',\n",
200
+ " 'font-family': 'Fantasy',\n",
201
+ " 'color': '#999',\n",
202
+ " 'padding': '20px'\n",
203
+ "})\n",
204
  "@app.callback(\n",
205
  " Output('recommend-wine-from-form-reset', 'n_clicks'),\n",
206
  " Input('recommend-wine-from-form-reset', 'n_clicks'),\n",
 
362
  " app.run_server(host=\"0.0.0.0\", port=\"8050\", debug=debug)"
363
  ]
364
  },
365
+ {
366
+ "cell_type": "code",
367
+ "execution_count": 23,
368
+ "metadata": {},
369
+ "outputs": [
370
+ {
371
+ "name": "stderr",
372
+ "output_type": "stream",
373
+ "text": [
374
+ "/var/folders/b4/lwfgccm95kqd2skcwvrt2fr00000gn/T/ipykernel_289/3647116673.py:50: FutureWarning:\n",
375
+ "\n",
376
+ "Series.__getitem__ treating keys as positions is deprecated. In a future version, integer keys will always be treated as labels (consistent with DataFrame behavior). To access a value by position, use `ser.iloc[pos]`\n",
377
+ "\n"
378
+ ]
379
+ }
380
+ ],
381
+ "source": [
382
+ "dashboard_layout = html.Div([\n",
383
+ " html.H1(children='Wineyards around the world', style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),\n",
384
+ " \n",
385
+ " html.Div(\n",
386
+ " [\n",
387
+ " html.Div(\n",
388
+ " [\n",
389
+ " html.H4(children='Country', style={'textAlign': 'center', 'color': '#fff'}),\n",
390
+ " dcc.Dropdown(wine_country, wine_country[-1], id='dropdown-wc', style={'color': '#000'}),\n",
391
+ " ], className='six columns', style={'padding': '10px'}\n",
392
+ " ),\n",
393
+ " html.Div(\n",
394
+ " [\n",
395
+ " html.H4(children='Region', style={'textAlign': 'center', 'color': '#fff'}),\n",
396
+ " dcc.Dropdown(['all'], 'all', id='dropdown-wr', style={'color': '#000'}),\n",
397
+ " ], className='six columns', style={'padding': '10px'}\n",
398
+ " )\n",
399
+ " ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
400
+ " \n",
401
+ " dcc.Graph(id='world-map-fig', style={'margin': '20px'}),\n",
402
+ " \n",
403
+ " html.Div(\n",
404
+ " [\n",
405
+ " html.Div(\n",
406
+ " [\n",
407
+ " html.H4(children='Wine Recommender', style={'textAlign': 'center', 'color': '#fff'}),\n",
408
+ " dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection', style={'color': '#000'}),\n",
409
+ " html.P(id='wine-recommendation', style={'textAlign': 'center', 'color': '#fff'}),\n",
410
+ " ], className='three columns', style={'padding': '10px'}\n",
411
+ " ),\n",
412
+ " html.Div(\n",
413
+ " [\n",
414
+ " html.P(children='Data Example', style={'textAlign': 'left', 'color': '#fff'}),\n",
415
+ " dash_table.DataTable(\n",
416
+ " data=raw_wine_similarity_df.to_dict('records'),\n",
417
+ " columns=[{'id': c, 'name': c} for c in raw_wine_similarity_df.columns],\n",
418
+ " style_header={'backgroundColor': '#444', 'color': '#fff'},\n",
419
+ " style_cell={'backgroundColor': '#333', 'color': '#fff'}\n",
420
+ " )\n",
421
+ " ], className='nine columns', style={'padding': '10px'}\n",
422
+ " )\n",
423
+ " ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
424
+ " \n",
425
+ " html.H4(children=\"Wine Recommender based on users' feedback\", style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),\n",
426
+ " \n",
427
+ " html.Div(\n",
428
+ " [\n",
429
+ " html.Div(\n",
430
+ " [\n",
431
+ " dcc.Dropdown(user_ids, user_ids[0], id='dropdown-selection-user', style={'color': '#000'}),\n",
432
+ " html.P(id='wine-recommendation-from-user', style={'textAlign': 'center', 'color': '#fff'}),\n",
433
+ " ], className='six columns', style={'padding': '10px'}\n",
434
+ " ),\n",
435
+ " html.Div(\n",
436
+ " [\n",
437
+ " html.P(children='Data Example', style={'textAlign': 'left', 'color': '#fff'}),\n",
438
+ " dash_table.DataTable(\n",
439
+ " data=raw_ratings.to_dict('records'),\n",
440
+ " columns=[{'id': c, 'name': c} for c in raw_ratings.columns],\n",
441
+ " style_header={'backgroundColor': '#444', 'color': '#fff'},\n",
442
+ " style_cell={'backgroundColor': '#333', 'color': '#fff'}\n",
443
+ " )\n",
444
+ " ], className='six columns', style={'padding': '10px'}\n",
445
+ " ),\n",
446
+ " ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
447
+ " \n",
448
+ " html.H4(children=\"Wine Preferences Form\", style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),\n",
449
+ " \n",
450
+ " html.Div(\n",
451
+ " [\n",
452
+ " html.Div(\n",
453
+ " [\n",
454
+ " dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection-wine-form', style={'color': '#000'}),\n",
455
+ " dcc.Input(id='input-wine-rating', type='number', placeholder='Enter wine rating', min=1, max=5, style={'margin-top': '10px'}),\n",
456
+ " ], className='six columns', style={'padding': '10px'}\n",
457
+ " ),\n",
458
+ " html.Div(\n",
459
+ " [\n",
460
+ " html.Button('Submit', id='submit-button', n_clicks=0, style={'margin-top': '10px', 'background-color': '#444', 'color': '#fff'}),\n",
461
+ " ], className='six columns', style={'padding': '10px'}\n",
462
+ " ),\n",
463
+ " ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
464
+ " \n",
465
+ " html.Div(id='recommended-wine-rating-info', style={'textAlign': 'center', 'color': '#fff', 'padding': '10px'}),\n",
466
+ " html.P(id='recommend-wine-from-form-text', style={'textAlign': 'center', 'color': '#fff'}),\n",
467
+ " \n",
468
+ " html.Div(\n",
469
+ " [\n",
470
+ " html.Button('Reset', id='recommend-wine-from-form-reset', n_clicks=0, style={'margin': '10px', 'background-color': '#444', 'color': '#fff'}),\n",
471
+ " html.Button('Recommend Wine', id='recommend-wine-from-form', n_clicks=0, style={'margin': '10px', 'background-color': '#444', 'color': '#fff'}),\n",
472
+ " ], style={'textAlign': 'center'}\n",
473
+ " ),\n",
474
+ " \n",
475
+ " html.Div(id='recommended-wine-form-output', style={'textAlign': 'center', 'color': '#fff', 'padding': '10px'}),\n",
476
+ "], style={\n",
477
+ " 'background-image': 'url(\"/assets/background.jpg\")',\n",
478
+ " 'background-size': 'cover',\n",
479
+ " 'font-family': 'Fantasy',\n",
480
+ " 'color': '#999',\n",
481
+ " 'padding': '20px'\n",
482
+ "})"
483
+ ]
484
+ },
485
  {
486
  "cell_type": "code",
487
  "execution_count": null,