yolo

app/app.py

@@ -18,7 +18,12 @@ app = Dash(__name__, external_stylesheets=external_stylesheets)
 app.layout = html.Div([
     dcc.Location(id='url', refresh=False),
     html.Div(id='page-content')
-])
+], style={
+    'background-color': '#333',  # Dark background color
+    'color': '#fff',  # Text color
+    'min-height': '100vh',  # Ensure it covers the full viewport height
+    'padding': '20px'  # Add some padding
+})
 
 server = app.server
 

app/dashboard.ipynb

@@ -2,14 +2,14 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 22,
+   "execution_count": 24,
    "metadata": {},
    "outputs": [
     {
      "name": "stderr",
      "output_type": "stream",
      "text": [
-      "/var/folders/b4/lwfgccm95kqd2skcwvrt2fr00000gn/T/ipykernel_289/2144404135.py:99: FutureWarning:\n",
+      "/var/folders/b4/lwfgccm95kqd2skcwvrt2fr00000gn/T/ipykernel_289/426293969.py:99: FutureWarning:\n",
       "\n",
       "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",
       "\n"
@@ -30,7 +30,7 @@
        "        "
       ],
       "text/plain": [
-       "<IPython.lib.display.IFrame at 0x2a9f56350>"
+       "<IPython.lib.display.IFrame at 0x2a9f7d000>"
       ]
      },
      "metadata": {},
@@ -48,6 +48,13 @@
       "See the caveats in the documentation: https://pandas.pydata.org/pandas-docs/stable/user_guide/indexing.html#returning-a-view-versus-a-copy\n",
       "\n"
      ]
+    },
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Text Value: None\n"
+     ]
     }
    ],
    "source": [
@@ -71,7 +78,12 @@
     "app.layout = html.Div([\n",
     "    dcc.Location(id='url', refresh=False),\n",
     "    html.Div(id='page-content')\n",
-    "])\n",
+    "], style={\n",
+    "    'background-color': '#333',  # Dark background color\n",
+    "    'color': '#fff',  # Text color\n",
+    "    'min-height': '100vh',  # Ensure it covers the full viewport height\n",
+    "    'padding': '20px'  # Add some padding\n",
+    "})\n",
     "\n",
     "server = app.server\n",
     "\n",
@@ -361,133 +373,6 @@
     "if __name__ == \"__main__\":\n",
     "    app.run_server(host=\"0.0.0.0\", port=\"8050\", debug=debug)"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 23,
-   "metadata": {},
-   "outputs": [
-    {
-     "name": "stderr",
-     "output_type": "stream",
-     "text": [
-      "/var/folders/b4/lwfgccm95kqd2skcwvrt2fr00000gn/T/ipykernel_289/3647116673.py:50: FutureWarning:\n",
-      "\n",
-      "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",
-      "\n"
-     ]
-    }
-   ],
-   "source": [
-    "dashboard_layout = html.Div([\n",
-    "    html.H1(children='Wineyards around the world', style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),\n",
-    "    \n",
-    "    html.Div(\n",
-    "        [\n",
-    "            html.Div(\n",
-    "                [\n",
-    "                    html.H4(children='Country', style={'textAlign': 'center', 'color': '#fff'}),\n",
-    "                    dcc.Dropdown(wine_country, wine_country[-1], id='dropdown-wc', style={'color': '#000'}),\n",
-    "                ], className='six columns', style={'padding': '10px'}\n",
-    "            ),\n",
-    "            html.Div(\n",
-    "                [\n",
-    "                    html.H4(children='Region', style={'textAlign': 'center', 'color': '#fff'}),\n",
-    "                    dcc.Dropdown(['all'], 'all', id='dropdown-wr', style={'color': '#000'}),\n",
-    "                ], className='six columns', style={'padding': '10px'}\n",
-    "            )\n",
-    "    ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
-    "    \n",
-    "    dcc.Graph(id='world-map-fig', style={'margin': '20px'}),\n",
-    "    \n",
-    "    html.Div(\n",
-    "        [\n",
-    "            html.Div(\n",
-    "                [\n",
-    "                    html.H4(children='Wine Recommender', style={'textAlign': 'center', 'color': '#fff'}),\n",
-    "                    dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection', style={'color': '#000'}),\n",
-    "                    html.P(id='wine-recommendation', style={'textAlign': 'center', 'color': '#fff'}),\n",
-    "                ], className='three columns', style={'padding': '10px'}\n",
-    "            ),\n",
-    "            html.Div(\n",
-    "                [\n",
-    "                    html.P(children='Data Example', style={'textAlign': 'left', 'color': '#fff'}),\n",
-    "                    dash_table.DataTable(\n",
-    "                        data=raw_wine_similarity_df.to_dict('records'),\n",
-    "                        columns=[{'id': c, 'name': c} for c in raw_wine_similarity_df.columns],\n",
-    "                        style_header={'backgroundColor': '#444', 'color': '#fff'},\n",
-    "                        style_cell={'backgroundColor': '#333', 'color': '#fff'}\n",
-    "                    )\n",
-    "                ], className='nine columns', style={'padding': '10px'}\n",
-    "            )\n",
-    "    ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
-    "    \n",
-    "    html.H4(children=\"Wine Recommender based on users' feedback\", style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),\n",
-    "    \n",
-    "    html.Div(\n",
-    "        [\n",
-    "            html.Div(\n",
-    "                [\n",
-    "                    dcc.Dropdown(user_ids, user_ids[0], id='dropdown-selection-user', style={'color': '#000'}),\n",
-    "                    html.P(id='wine-recommendation-from-user', style={'textAlign': 'center', 'color': '#fff'}),\n",
-    "                ], className='six columns', style={'padding': '10px'}\n",
-    "            ),\n",
-    "            html.Div(\n",
-    "                [\n",
-    "                    html.P(children='Data Example', style={'textAlign': 'left', 'color': '#fff'}),\n",
-    "                    dash_table.DataTable(\n",
-    "                        data=raw_ratings.to_dict('records'),\n",
-    "                        columns=[{'id': c, 'name': c} for c in raw_ratings.columns],\n",
-    "                        style_header={'backgroundColor': '#444', 'color': '#fff'},\n",
-    "                        style_cell={'backgroundColor': '#333', 'color': '#fff'}\n",
-    "                    )\n",
-    "                ], className='six columns', style={'padding': '10px'}\n",
-    "            ),\n",
-    "    ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
-    "    \n",
-    "    html.H4(children=\"Wine Preferences Form\", style={'textAlign': 'center', 'color': '#fff', 'padding': '20px'}),\n",
-    "    \n",
-    "    html.Div(\n",
-    "        [\n",
-    "            html.Div(\n",
-    "                [\n",
-    "                    dcc.Dropdown(wine_list, wine_list[0], id='dropdown-selection-wine-form', style={'color': '#000'}),\n",
-    "                    dcc.Input(id='input-wine-rating', type='number', placeholder='Enter wine rating', min=1, max=5, style={'margin-top': '10px'}),\n",
-    "                ], className='six columns', style={'padding': '10px'}\n",
-    "            ),\n",
-    "            html.Div(\n",
-    "                [\n",
-    "                    html.Button('Submit', id='submit-button', n_clicks=0, style={'margin-top': '10px', 'background-color': '#444', 'color': '#fff'}),\n",
-    "                ], className='six columns', style={'padding': '10px'}\n",
-    "            ),\n",
-    "        ], className='row', style={'background-color': '#444', 'border-radius': '10px', 'margin': '10px'}),\n",
-    "    \n",
-    "    html.Div(id='recommended-wine-rating-info', style={'textAlign': 'center', 'color': '#fff', 'padding': '10px'}),\n",
-    "    html.P(id='recommend-wine-from-form-text', style={'textAlign': 'center', 'color': '#fff'}),\n",
-    "    \n",
-    "    html.Div(\n",
-    "        [\n",
-    "            html.Button('Reset', id='recommend-wine-from-form-reset', n_clicks=0, style={'margin': '10px', 'background-color': '#444', 'color': '#fff'}),\n",
-    "            html.Button('Recommend Wine', id='recommend-wine-from-form', n_clicks=0, style={'margin': '10px', 'background-color': '#444', 'color': '#fff'}),\n",
-    "        ], style={'textAlign': 'center'}\n",
-    "    ),\n",
-    "    \n",
-    "    html.Div(id='recommended-wine-form-output', style={'textAlign': 'center', 'color': '#fff', 'padding': '10px'}),\n",
-    "], style={\n",
-    "    'background-image': 'url(\"/assets/background.jpg\")',\n",
-    "    'background-size': 'cover',\n",
-    "    'font-family': 'Fantasy',\n",
-    "    'color': '#999',\n",
-    "    'padding': '20px'\n",
-    "})"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {