PM2.5 Prediction Dashboard.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 1. 데이터 로딩 및 전처리"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "file_path = \"./data/jung-gu.xlsx\"\n",
    "data = pd.read_excel(file_path)\n",
    "data.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 결측값 확인\n",
    "missing_values = data.isnull().sum()\n",
    "\n",
    "# 결측값이 있는 열 출력\n",
    "missing_values[missing_values > 0]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 보간법을 사용하여 결측치 처리\n",
    "data_interpolated = data.interpolate(method='linear')\n",
    "\n",
    "# 결측치 처리 후의 처음 5개 행을 보여줌\n",
    "data_interpolated.head()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 필요한 변수만 선택\n",
    "selected_columns = ['SO2', 'CO', 'O3', 'NO2', 'PM10', 'PM25']\n",
    "data_selected = data_interpolated[selected_columns]\n",
    "\n",
    "# 선택된 변수의 처음 5개 행을 보여줌\n",
    "data_selected.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from sklearn.preprocessing import PowerTransformer\n",
    "import pandas as pd\n",
    "\n",
    "# 'PM25' 컬럼을 제외한 나머지 컬럼 선택\n",
    "selected_columns_without_PM25 = [col for col in selected_columns if col != 'PM25']\n",
    "data_to_transform = data_selected[selected_columns_without_PM25]\n",
    "\n",
    "# PowerTransformer 객체 생성\n",
    "power_transformer = PowerTransformer()\n",
    "\n",
    "# PowerTransformer를 사용하여 선택한 컬럼만 변환\n",
    "data_power_transformed = power_transformer.fit_transform(data_to_transform)\n",
    "\n",
    "# 변환된 데이터를 데이터프레임으로 변환\n",
    "data_power_transformed_df_without_PM25 = pd.DataFrame(data_power_transformed, columns=selected_columns_without_PM25)\n",
    "\n",
    "# 원래의 'PM25' 컬럼과 변환된 데이터를 합침\n",
    "data_power_transformed_df = pd.concat([data_power_transformed_df_without_PM25, data_selected['PM25'].reset_index(drop=True)], axis=1)\n",
    "\n",
    "# 처음 5개 행을 보여줌\n",
    "data_power_transformed_df.head()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 2.모델 학습"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from sklearn.model_selection import train_test_split\n",
    "import numpy as np\n",
    "\n",
    "# 시간 윈도우 길이 설정\n",
    "window_length = 10\n",
    "\n",
    "# 입력 특성 및 타깃 레이블 생성 함수\n",
    "def create_sequences(data, target_column, window_length):\n",
    "    sequences = []\n",
    "    target = []\n",
    "    for i in range(len(data) - window_length):\n",
    "        sequences.append(data[i:i + window_length].values)\n",
    "        target.append(data[target_column].iloc[i + window_length])\n",
    "    return np.array(sequences), np.array(target)\n",
    "\n",
    "# 입력 특성 및 타깃 레이블 생성\n",
    "X, y = create_sequences(data_power_transformed_df, target_column='PM25', window_length=window_length)\n",
    "\n",
    "# 학습, 검증, 테스트 세트로 분할\n",
    "X_train, X_temp, y_train, y_temp = train_test_split(X, y, test_size=0.3, random_state=42)\n",
    "X_val, X_test, y_val, y_test = train_test_split(X_temp, y_temp, test_size=0.5, random_state=42)\n",
    "\n",
    "# 데이터 크기 확인\n",
    "X_train.shape, X_val.shape, X_test.shape\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from tensorflow.keras.models import Sequential\n",
    "from tensorflow.keras.layers import Dense, Flatten\n",
    "from tensorflow.keras.optimizers import Adam\n",
    "\n",
    "# MLP 모델 구성\n",
    "def build_mlp_model(input_shape):\n",
    "    model = Sequential([\n",
    "        Flatten(input_shape=input_shape),\n",
    "        Dense(64, activation='relu'),\n",
    "        Dense(32, activation='relu'),\n",
    "        Dense(1)\n",
    "    ])\n",
    "    model.compile(optimizer=Adam(learning_rate=0.001), loss='mse')\n",
    "    return model\n",
    "\n",
    "# 모델 생성\n",
    "mlp_model = build_mlp_model(input_shape=X_train.shape[1:])\n",
    "\n",
    "# 모델 학습\n",
    "mlp_history = mlp_model.fit(X_train, y_train, validation_data=(X_val, y_val), epochs=10, batch_size=32, verbose=1)\n",
    "\n",
    "# MLP 모델 저장\n",
    "mlp_model.save('./model/mlp_model.h5')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from tensorflow.keras.layers import LSTM\n",
    "\n",
    "# LSTM 모델 구성 함수\n",
    "def build_lstm_model(input_shape):\n",
    "    model = Sequential([\n",
    "        LSTM(64, return_sequences=True, input_shape=input_shape),\n",
    "        LSTM(32),\n",
    "        Dense(1)\n",
    "    ])\n",
    "    model.compile(optimizer=Adam(learning_rate=0.001), loss='mse')\n",
    "    return model\n",
    "\n",
    "# 모델 생성 및 학습\n",
    "lstm_model = build_lstm_model(input_shape=X_train.shape[1:])\n",
    "lstm_history = lstm_model.fit(X_train, y_train, validation_data=(X_val, y_val), epochs=10, batch_size=32)\n",
    "\n",
    "# 모델 저장\n",
    "lstm_model.save('./model/lstm_model.h5')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from tensorflow.keras.layers import GRU\n",
    "\n",
    "# GRU 모델 구성 함수\n",
    "def build_gru_model(input_shape):\n",
    "    model = Sequential([\n",
    "        GRU(64, return_sequences=True, input_shape=input_shape),\n",
    "        GRU(32),\n",
    "        Dense(1)\n",
    "    ])\n",
    "    model.compile(optimizer=Adam(learning_rate=0.001), loss='mse')\n",
    "    return model\n",
    "\n",
    "# GRU 모델 생성 및 학습\n",
    "gru_model = build_gru_model(input_shape=X_train.shape[1:])\n",
    "gru_history = gru_model.fit(X_train, y_train, validation_data=(X_val, y_val), epochs=10, batch_size=32)\n",
    "\n",
    "# GRU 모델 저장\n",
    "gru_model.save('./model/gru_model.h5')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from tensorflow.keras.layers import Conv1D, MaxPooling1D\n",
    "\n",
    "def build_cnn_model(input_shape):\n",
    "    model = Sequential([\n",
    "        Conv1D(64, kernel_size=3, activation='relu', input_shape=input_shape),\n",
    "        MaxPooling1D(pool_size=2),\n",
    "        Flatten(),\n",
    "        Dense(32, activation='relu'),\n",
    "        Dense(1)\n",
    "    ])\n",
    "    model.compile(optimizer=Adam(learning_rate=0.001), loss='mse')\n",
    "    return model\n",
    "\n",
    "# CNN 모델 생성 및 학습\n",
    "cnn_model = build_cnn_model(input_shape=X_train.shape[1:])\n",
    "cnn_history = cnn_model.fit(X_train, y_train, validation_data=(X_val, y_val), epochs=10, batch_size=32)\n",
    "\n",
    "# CNN 모델 저장\n",
    "cnn_model.save('./model/cnn_model.h5')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from tensorflow.keras.layers import SimpleRNN\n",
    "\n",
    "def build_simplernn_model(input_shape):\n",
    "    model = Sequential([\n",
    "        SimpleRNN(64, return_sequences=True, input_shape=input_shape),\n",
    "        SimpleRNN(32),\n",
    "        Dense(1)\n",
    "    ])\n",
    "    model.compile(optimizer=Adam(learning_rate=0.001), loss='mse')\n",
    "    return model\n",
    "\n",
    "# SimpleRNN 모델 생성 및 학습\n",
    "simplernn_model = build_simplernn_model(input_shape=X_train.shape[1:])\n",
    "simplernn_history = simplernn_model.fit(X_train, y_train, validation_data=(X_val, y_val), epochs=10, batch_size=32)\n",
    "\n",
    "# SimpleRNN 모델 저장\n",
    "simplernn_model.save('./model/simplernn_model.h5')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Temporal Convolutional Network (TCN) 기반 모델\n",
    "\n",
    "from tensorflow.keras.layers import Input, Conv1D, Activation, BatchNormalization, SpatialDropout1D, Dense, Lambda\n",
    "from tensorflow.keras.models import Model\n",
    "from tensorflow.keras.optimizers import Adam\n",
    "\n",
    "def residual_block(x, filters, kernel_size, dilation_rate):\n",
    "    prev_x = x\n",
    "    for k in range(2):\n",
    "        x = Conv1D(filters, kernel_size=kernel_size, dilation_rate=dilation_rate, padding='causal')(x)\n",
    "        x = Activation('relu')(x)\n",
    "        x = BatchNormalization()(x)\n",
    "        x = SpatialDropout1D(0.2)(x)\n",
    "\n",
    "    # Match the dimensions of the residual block and input\n",
    "    if x.shape[-1] != prev_x.shape[-1]:\n",
    "        prev_x = Conv1D(filters=filters, kernel_size=1)(prev_x)\n",
    "        \n",
    "    out = x + prev_x\n",
    "    return out\n",
    "\n",
    "def build_tcn_model(input_shape):\n",
    "    inputs = Input(shape=input_shape)\n",
    "    x = inputs\n",
    "    for _ in range(3): # You can adjust the number of layers\n",
    "        x = residual_block(x, filters=64, kernel_size=3, dilation_rate=1)\n",
    "    x = Lambda(lambda x: x[:, -1, :])(x) # Get the last time step\n",
    "    output = Dense(1)(x)\n",
    "\n",
    "    model = Model(inputs, output)\n",
    "    model.compile(optimizer=Adam(learning_rate=0.001), loss='mse')\n",
    "    return model\n",
    "\n",
    "tcn_model = build_tcn_model(input_shape=X_train.shape[1:])\n",
    "tcn_history = tcn_model.fit(X_train, y_train, validation_data=(X_val, y_val), epochs=10, batch_size=32)\n",
    "\n",
    "# TCN 모델 저장\n",
    "tcn_model.save('./model/tcn_model.h5')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from spektral.layers import GCNConv\n",
    "from tensorflow.keras.models import Model\n",
    "from tensorflow.keras.layers import Input, Flatten, Dense\n",
    "\n",
    "def build_gcn_model(input_shape):\n",
    "    # 그래프 형식의 입력\n",
    "    X_input = Input(shape=(input_shape[0], input_shape[1]))\n",
    "    A_input = Input(shape=(input_shape[0], input_shape[0]))  # 인접 행렬\n",
    "\n",
    "    # 그래프 컨볼루션 레이어\n",
    "    x = GCNConv(64, activation='relu')([X_input, A_input])\n",
    "    x = GCNConv(32, activation='relu')([x, A_input])\n",
    "\n",
    "    # 완전 연결 레이어\n",
    "    x = Flatten()(x)\n",
    "    x = Dense(64, activation='relu')(x)\n",
    "    output = Dense(1)(x)\n",
    "\n",
    "    model = Model(inputs=[X_input, A_input], outputs=output)\n",
    "    model.compile(optimizer='adam', loss='mse')\n",
    "\n",
    "    return model\n",
    "\n",
    "# 모델 생성 및 학습\n",
    "gcn_model = build_gcn_model(input_shape=(num_nodes, num_features))\n",
    "gcn_model.fit([X_train, A_train], y_train, validation_data=([X_val, A_val], y_val), epochs=10, batch_size=32)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 3. 실시간 미세먼지 예측 대시보드"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import tensorflow as tf\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash.dependencies import Input, Output\n",
    "import plotly.graph_objects as go\n",
    "import requests\n",
    "import json\n",
    "from datetime import datetime, timedelta\n",
    "import numpy as np\n",
    "from tensorflow.keras.models import load_model\n",
    "from sklearn.metrics import mean_squared_error\n",
    "from sklearn.preprocessing import MinMaxScaler\n",
    "\n",
    "# 모델 불러오기\n",
    "global graph_mlp, session_mlp\n",
    "graph_mlp = tf.Graph()\n",
    "with graph_mlp.as_default():\n",
    "    session_mlp = tf.compat.v1.Session()\n",
    "    with session_mlp.as_default():\n",
    "        global mlp_model\n",
    "        mlp_model = load_model('./model/mlp_model.h5')\n",
    "\n",
    "global graph_lstm, session_lstm\n",
    "graph_lstm = tf.Graph()\n",
    "with graph_lstm.as_default():\n",
    "    session_lstm = tf.compat.v1.Session()\n",
    "    with session_lstm.as_default():\n",
    "        global lstm_model\n",
    "        lstm_model = load_model('./model/lstm_model.h5')\n",
    "\n",
    "global graph_gru, session_gru\n",
    "graph_gru = tf.Graph()\n",
    "with graph_gru.as_default():\n",
    "    session_gru = tf.compat.v1.Session()\n",
    "    with session_gru.as_default():\n",
    "        global gru_model\n",
    "        gru_model = load_model('./model/gru_model.h5')\n",
    "        \n",
    "# CNN 모델 불러오기\n",
    "global graph_cnn, session_cnn\n",
    "graph_cnn = tf.Graph()\n",
    "with graph_cnn.as_default():\n",
    "    session_cnn = tf.compat.v1.Session()\n",
    "    with session_cnn.as_default():\n",
    "        global cnn_model\n",
    "        cnn_model = load_model('./model/cnn_model.h5')\n",
    "\n",
    "# SimpleRNN 모델 불러오기\n",
    "global graph_simplernn, session_simplernn\n",
    "graph_simplernn = tf.Graph()\n",
    "with graph_simplernn.as_default():\n",
    "    session_simplernn = tf.compat.v1.Session()\n",
    "    with session_simplernn.as_default():\n",
    "        global simplernn_model\n",
    "        simplernn_model = load_model('./model/simplernn_model.h5')\n",
    "\n",
    "\n",
    "stations = [\n",
    "    {'name': '종로구'},\n",
    "    {'name': '강남구'},\n",
    "    {'name': '중구'}\n",
    "    # ... 계속 추가\n",
    "]\n",
    "\n",
    "app = dash.Dash(__name__)\n",
    "app.layout = html.Div([\n",
    "    html.H1(children='PM2.5 Prediction Dashboard', style={'textAlign': 'center'}),\n",
    "    dcc.Dropdown(\n",
    "        id='station-dropdown',\n",
    "        options=[{'label': station['name'], 'value': station['name']} for station in stations],\n",
    "        value='중구'\n",
    "    ),\n",
    "    dcc.Graph(id='graph-content'),\n",
    "    dcc.Interval(id='interval-component', interval=60 * 60 * 1000, n_intervals=0)\n",
    "])\n",
    "\n",
    "\n",
    "\n",
    "def preprocess_data(data):\n",
    "    for i in range(1, len(data)):\n",
    "        for j in range(6):\n",
    "            if data[i, j] is None and data[i-1, j] is not None:\n",
    "                data[i, j] = data[i-1, j]\n",
    "    \n",
    "    # 스케일링\n",
    "    scaler = MinMaxScaler()\n",
    "    preprocessed_data = scaler.fit_transform(data)\n",
    "        # NaN 값을 검사하고 0으로 대체\n",
    "    preprocessed_data = np.nan_to_num(preprocessed_data)\n",
    "    \n",
    "    return preprocessed_data\n",
    "\n",
    "@app.callback(\n",
    "    Output('graph-content', 'figure'),\n",
    "    [Input('interval-component', 'n_intervals'),\n",
    "     Input('station-dropdown', 'value')]\n",
    ")\n",
    "\n",
    "\n",
    "def update_graph(n, value):\n",
    "    # 시간 데이터 생성 (최근 10개의 시간 단계)\n",
    "    current_time = datetime.now()\n",
    "    # 시간 데이터 생성 (최근 10개의 시간 단계)\n",
    "    time_data = [current_time - timedelta(hours=i) for i in range(10, 0, -1)]\n",
    "    # 사용자 정의 눈금 값과 레이블 생성 (시간만 표시)\n",
    "    tickvals = []\n",
    "    ticktext = []\n",
    "    for i, time in enumerate(time_data):\n",
    "        tickvals.append(time)\n",
    "        ticktext.append(time.strftime(\"%H:%M\"))  # 연도, 월, 일 제거\n",
    "        \n",
    "    # fig 객체 생성\n",
    "    fig = go.Figure()\n",
    "    fig.update_layout(\n",
    "        xaxis_title=\"Time\",\n",
    "        yaxis_title=\"PM2.5 Concentration (μg/m³)\"\n",
    "    )\n",
    "\n",
    "    # 연도, 월, 일을 상단 좌측에 표시 (예: 2023-08-21)\n",
    "    fig.add_annotation(\n",
    "        text=current_time.strftime(\"%Y-%m-%d\"),\n",
    "        xref=\"paper\",\n",
    "        yref=\"paper\",\n",
    "        x=0,  # 좌측 정렬\n",
    "        y=1,  # 상단 정렬\n",
    "        showarrow=False,\n",
    "        font=dict(size=14),\n",
    "      \n",
    "    )\n",
    "    \n",
    "    url = 'http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty'\n",
    "    service_key = 'xdBtiCkOLc9TIoPuquKxtR0n+Fk8awNT/qLlOCApNheoK+gweAWhIWzdUCttWKvi0xeI2bM3KCSduGfRhI922w=='\n",
    "\n",
    "\n",
    "    # 선택된 측정소에 대한 데이터 수집\n",
    "    params = {\n",
    "        'serviceKey': service_key,\n",
    "        'returnType': 'json',\n",
    "        'numOfRows': '10',\n",
    "        'pageNo': '1',\n",
    "        'stationName': value,\n",
    "        'dataTerm': 'DAILY',\n",
    "        'ver': '1.0'\n",
    "    }\n",
    "    response = requests.get(url, params=params)\n",
    "    json_object = json.loads(response.content)\n",
    "    \n",
    "    # 6개의 특성을 저장할 리스트\n",
    "    data = []\n",
    "    for item in json_object['response']['body']['items']:\n",
    "        values = [\n",
    "            float(item['pm10Value']) if item['pm10Value'] != \"-\" else None,\n",
    "            float(item['pm25Value']) if item['pm25Value'] != \"-\" else None,\n",
    "            float(item['o3Value']) if item['o3Value'] != \"-\" else None,\n",
    "            float(item['no2Value']) if item['no2Value'] != \"-\" else None,\n",
    "            float(item['coValue']) if item['coValue'] != \"-\" else None,\n",
    "            float(item['so2Value']) if item['so2Value'] != \"-\" else None\n",
    "        ]\n",
    "        data.append(values)\n",
    "\n",
    "    # 결측값 처리 및 numpy 배열로 변환\n",
    "    data = np.array(data)\n",
    "    data = preprocess_data(data)  # 호출 추가\n",
    "\n",
    "    # 최근 10개의 시간 단계만 사용\n",
    "    input_data = data[-10:]\n",
    "\n",
    "    # 형태 확인 및 모델에 입력할 수 있는 형태로 변환\n",
    "    input_data = input_data.reshape(1, 10, 6)\n",
    "    # 실제 값 준비 (예: 최근 10개의 pm25 값)\n",
    "    actual_data = data[-10:, 1]  # 두 번째 특성이 pm25 값이라고 가정\n",
    "    \n",
    "    # MLP 모델 예측\n",
    "    with graph_mlp.as_default():\n",
    "        with session_mlp.as_default():\n",
    "            mlp_pred = mlp_model.predict(input_data)\n",
    "\n",
    "    # LSTM 모델 예측\n",
    "    with graph_lstm.as_default():\n",
    "        with session_lstm.as_default():\n",
    "            lstm_pred = lstm_model.predict(input_data)\n",
    "\n",
    "    # GRU 모델 예측\n",
    "    with graph_gru.as_default():\n",
    "        with session_gru.as_default():\n",
    "            gru_pred = gru_model.predict(input_data)\n",
    "    # CNN 모델 예측\n",
    "    with graph_cnn.as_default():\n",
    "        with session_cnn.as_default():\n",
    "            cnn_pred = cnn_model.predict(input_data)\n",
    "\n",
    "    # SimpleRNN 모델 예측\n",
    "    with graph_simplernn.as_default():\n",
    "        with session_simplernn.as_default():\n",
    "            simplernn_pred = simplernn_model.predict(input_data)\n",
    "            \n",
    "\n",
    "    # 예측 결과에서 1시간 뒤의 값을 추출\n",
    "    mlp_1hour_pred = mlp_pred[0, -1]\n",
    "    lstm_1hour_pred = lstm_pred[0, -1]\n",
    "    gru_1hour_pred = gru_pred[0, -1]\n",
    "    cnn_1hour_pred = cnn_pred[0, -1]\n",
    "    simplernn_1hour_pred = simplernn_pred[0, -1]\n",
    "    \n",
    "\n",
    "    # RMSE 계산 수정\n",
    "    mlp_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [mlp_1hour_pred]))\n",
    "    lstm_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [lstm_1hour_pred]))\n",
    "    gru_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [gru_1hour_pred]))\n",
    "    cnn_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [cnn_1hour_pred]))\n",
    "    simplernn_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [simplernn_1hour_pred]))\n",
    "    fig.update_layout(annotations=[])\n",
    "\n",
    "\n",
    "    # 최근 10개의 시간 단계만 사용\n",
    "    input_data = data[-10:]\n",
    "\n",
    "    # 형태 확인 및 모델에 입력할 수 있는 형태로 변환\n",
    "    input_data = input_data.reshape(1, 10, 6)\n",
    "    # 현재 시간부터 10시간 전까지의 시간 데이터 생성\n",
    "    time_data = [current_time - timedelta(hours=i) for i in range(10)]\n",
    "\n",
    "    # 현재 시간부터 10시간 전까지의 실제 값 준비\n",
    "    actual_data = data[-10:, 1]  # 두 번째 특성이 pm25 값이라고 가정\n",
    "    \n",
    "    # 마지막 실제 값\n",
    "    last_actual_value = actual_data[-1]\n",
    "    \n",
    "    # 실제 값의 선 색깔 정의\n",
    "    actual_line_color = 'rgb(30, 144, 255)'  # Dodger Blue\n",
    "    # 실제 데이터를 그래프에 추가 (선 색깔을 설정)\n",
    "    fig.add_trace(go.Scatter(x=time_data, y=actual_data, mode='markers+lines', name=f\"실제값 ({value})\", line=dict(color=actual_line_color)))\n",
    "\n",
    "    # 예측 결과와 마지막 실제 값 사이의 점선을 그래프에 추가 (선 색깔을 실제 값의 선 색깔과 동일하게 설정)\n",
    "    fig.add_trace(go.Scatter(x=[current_time, current_time + timedelta(hours=1)], y=[last_actual_value, mlp_1hour_pred], mode='lines', line=dict(dash='dash', color=actual_line_color), showlegend=False))\n",
    "    fig.add_trace(go.Scatter(x=[current_time, current_time + timedelta(hours=1)], y=[last_actual_value, simplernn_1hour_pred], mode='lines', line=dict(dash='dash', color=actual_line_color), showlegend=False))\n",
    "    fig.add_trace(go.Scatter(x=[current_time, current_time + timedelta(hours=1)], y=[last_actual_value, gru_1hour_pred], mode='lines', line=dict(dash='dash', color=actual_line_color), showlegend=False))\n",
    "    fig.add_trace(go.Scatter(x=[current_time, current_time + timedelta(hours=1)], y=[last_actual_value, cnn_1hour_pred], mode='lines', line=dict(dash='dash', color=actual_line_color), showlegend=False))\n",
    "    # 예측 마커 추가\n",
    "    fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[mlp_1hour_pred], mode='markers', name=f\"MLP 예측값 (RMSE: {mlp_rmse:.2f})\"))\n",
    "    fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[simplernn_1hour_pred], mode='markers', name=f\"RNN 예측값 (RMSE: {simplernn_rmse:.2f})\"))\n",
    "    fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[gru_1hour_pred], mode='markers', name=f\"GRU 예측값 (RMSE: {gru_rmse:.2f})\"))\n",
    "    fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[cnn_1hour_pred], mode='markers', name=f\"CNN 예측값 (RMSE: {cnn_rmse:.2f})\"))\n",
    "\n",
    "\n",
    "    # 예측 결과를 그래프에 추가 (MSE 값 포함)\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[mlp_1hour_pred], mode='markers', name=f\"MLP 예측값 (RMSE: {mlp_rmse:.2f})\"))\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[simplernn_1hour_pred], mode='markers', name=f\"RNN 예측값 (RMSE: {simplernn_rmse:.2f})\"))\n",
    "    #fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[lstm_1hour_pred], mode='markers', name=f\"LSTM 예측값 (RMSE: {lstm_rmse:.2f})\"))\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[gru_1hour_pred], mode='markers', name=f\"GRU 예측값 (RMSE: {gru_rmse:.2f})\"))\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[cnn_1hour_pred], mode='markers', name=f\"CNN 예측값 (RMSE: {cnn_rmse:.2f})\"))\n",
    "    #fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[simplernn_1hour_pred], mode='markers', name=f\"RNN 예측값 (RMSE: {simplernn_rmse:.2f})\"))\n",
    "    return fig\n",
    "\n",
    "# 앱 실행\n",
    "if __name__ == \"__main__\":\n",
    "    app.run_server(port=8008, host='0.0.0.0')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import tensorflow as tf\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash.dependencies import Input, Output\n",
    "import plotly.graph_objects as go\n",
    "import requests\n",
    "import json\n",
    "from datetime import datetime, timedelta\n",
    "import numpy as np\n",
    "from tensorflow.keras.models import load_model\n",
    "from sklearn.metrics import mean_squared_error\n",
    "from sklearn.preprocessing import MinMaxScaler\n",
    "\n",
    "# 모델 불러오기\n",
    "global graph_mlp, session_mlp\n",
    "graph_mlp = tf.Graph()\n",
    "with graph_mlp.as_default():\n",
    "    session_mlp = tf.compat.v1.Session()\n",
    "    with session_mlp.as_default():\n",
    "        global mlp_model\n",
    "        mlp_model = load_model('./model/mlp_model.h5')\n",
    "\n",
    "global graph_lstm, session_lstm\n",
    "graph_lstm = tf.Graph()\n",
    "with graph_lstm.as_default():\n",
    "    session_lstm = tf.compat.v1.Session()\n",
    "    with session_lstm.as_default():\n",
    "        global lstm_model\n",
    "        lstm_model = load_model('./model/lstm_model.h5')\n",
    "\n",
    "global graph_gru, session_gru\n",
    "graph_gru = tf.Graph()\n",
    "with graph_gru.as_default():\n",
    "    session_gru = tf.compat.v1.Session()\n",
    "    with session_gru.as_default():\n",
    "        global gru_model\n",
    "        gru_model = load_model('./model/gru_model.h5')\n",
    "        \n",
    "# CNN 모델 불러오기\n",
    "global graph_cnn, session_cnn\n",
    "graph_cnn = tf.Graph()\n",
    "with graph_cnn.as_default():\n",
    "    session_cnn = tf.compat.v1.Session()\n",
    "    with session_cnn.as_default():\n",
    "        global cnn_model\n",
    "        cnn_model = load_model('./model/cnn_model.h5')\n",
    "\n",
    "# SimpleRNN 모델 불러오기\n",
    "global graph_simplernn, session_simplernn\n",
    "graph_simplernn = tf.Graph()\n",
    "with graph_simplernn.as_default():\n",
    "    session_simplernn = tf.compat.v1.Session()\n",
    "    with session_simplernn.as_default():\n",
    "        global simplernn_model\n",
    "        simplernn_model = load_model('./model/simplernn_model.h5')\n",
    "\n",
    "\n",
    "stations = [\n",
    "    {'name': '종로구'},\n",
    "    {'name': '강남구'},\n",
    "    {'name': '중구'}\n",
    "    # ... 계속 추가\n",
    "]\n",
    "\n",
    "app = dash.Dash(__name__)\n",
    "app.layout = html.Div([\n",
    "    html.H1(children='실시간 초미세먼지 예측 대시보드', style={'textAlign': 'center'}),\n",
    "    dcc.Dropdown(\n",
    "        id='station-dropdown',\n",
    "        options=[{'label': station['name'], 'value': station['name']} for station in stations],\n",
    "        value='중구'\n",
    "    ),\n",
    "    dcc.Graph(id='graph-content'),\n",
    "    html.Div([\n",
    "        html.P('출처: 한국환경공단, 「대기오염정보」', style={'font-size': 'small'}),\n",
    "    ], style={'position': 'relative', 'bottom': '40px', 'left': '10px'}),\n",
    "\n",
    "    dcc.Interval(id='interval-component', interval=60 * 60 * 1000, n_intervals=0),\n",
    "    html.Div([\n",
    "        html.H3('대시보드 설명:', style={'padding': '8px'}),\n",
    "        html.P('다양한 머신러닝 모델을 사용하여 실시간으로 PM2.5 농도를 예측함.'),\n",
    "        html.P('- 예측에 사용된 모델:'),\n",
    "        html.Ul([\n",
    "            html.Li('MLP (Multi-Layer Perceptron)'),\n",
    "            html.Li('LSTM (Long Short-Term Memory)'),\n",
    "            html.Li('GRU (Gated Recurrent Unit)'),\n",
    "            html.Li('CNN (Convolutional Neural Network)'),\n",
    "            html.Li('RNN (Recurrent Neural Network)'),\n",
    "        ]),\n",
    "        html.P('- 예측 성능 지표: RMSE (Root Mean Square Error)'),\n",
    "        html.P('- 예측 결과: 예측 성능이 가장 좋은 모델에 대해서만 출력'),\n",
    "    ], style={'padding': '20px', 'border': '1px solid #ddd', 'border-radius': '8px', 'margin': '20px'}) ])\n",
    "\n",
    "\n",
    "def preprocess_data(data):\n",
    "    for i in range(1, len(data)):\n",
    "        for j in range(6):\n",
    "            if data[i, j] is None and data[i-1, j] is not None:\n",
    "                data[i, j] = data[i-1, j]\n",
    "    \n",
    "    # 스케일링\n",
    "    scaler = MinMaxScaler()\n",
    "    preprocessed_data = scaler.fit_transform(data)\n",
    "        # NaN 값을 검사하고 0으로 대체\n",
    "    preprocessed_data = np.nan_to_num(preprocessed_data)\n",
    "    \n",
    "    return preprocessed_data\n",
    "\n",
    "@app.callback(\n",
    "    Output('graph-content', 'figure'),\n",
    "    [Input('interval-component', 'n_intervals'),\n",
    "     Input('station-dropdown', 'value')]\n",
    ")\n",
    "\n",
    "\n",
    "def update_graph(n, value):\n",
    "    # 시간 데이터 생성 (최근 10개의 시간 단계)\n",
    "    current_time = datetime.now()\n",
    "    # 시간 데이터 생성 (최근 10개의 시간 단계)\n",
    "    time_data = [current_time - timedelta(hours=i) for i in range(10, 0, -1)]\n",
    "    # 사용자 정의 눈금 값과 레이블 생성 (시간만 표시)\n",
    "    tickvals = []\n",
    "    ticktext = []\n",
    "    for i, time in enumerate(time_data):\n",
    "        tickvals.append(time)\n",
    "        ticktext.append(time.strftime(\"%H:%M\"))  # 연도, 월, 일 제거\n",
    "        \n",
    "    # fig 객체 생성\n",
    "    fig = go.Figure()\n",
    "    fig.update_layout(\n",
    "        xaxis_title=\"Time\",\n",
    "        yaxis_title=\"PM2.5 Concentration (μg/m³)\"\n",
    "    )\n",
    "\n",
    "    # 연도, 월, 일을 상단 좌측에 표시 (예: 2023-08-21)\n",
    "    fig.add_annotation(\n",
    "        text=current_time.strftime(\"%Y-%m-%d\"),\n",
    "        xref=\"paper\",\n",
    "        yref=\"paper\",\n",
    "        x=0,  # 좌측 정렬\n",
    "        y=1,  # 상단 정렬\n",
    "        showarrow=False,\n",
    "        font=dict(size=14),\n",
    "      \n",
    "    )\n",
    "    \n",
    "    url = 'http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty'\n",
    "    service_key = 'xdBtiCkOLc9TIoPuquKxtR0n+Fk8awNT/qLlOCApNheoK+gweAWhIWzdUCttWKvi0xeI2bM3KCSduGfRhI922w=='\n",
    "\n",
    "\n",
    "    # 선택된 측정소에 대한 데이터 수집\n",
    "    params = {\n",
    "        'serviceKey': service_key,\n",
    "        'returnType': 'json',\n",
    "        'numOfRows': '10',\n",
    "        'pageNo': '1',\n",
    "        'stationName': value,\n",
    "        'dataTerm': 'DAILY',\n",
    "        'ver': '1.0'\n",
    "    }\n",
    "    response = requests.get(url, params=params)\n",
    "    json_object = json.loads(response.content)\n",
    "    \n",
    "    # 6개의 특성을 저장할 리스트\n",
    "    data = []\n",
    "    for item in json_object['response']['body']['items']:\n",
    "        values = [\n",
    "            float(item['pm10Value']) if item['pm10Value'] != \"-\" else None,\n",
    "            float(item['pm25Value']) if item['pm25Value'] != \"-\" else None,\n",
    "            float(item['o3Value']) if item['o3Value'] != \"-\" else None,\n",
    "            float(item['no2Value']) if item['no2Value'] != \"-\" else None,\n",
    "            float(item['coValue']) if item['coValue'] != \"-\" else None,\n",
    "            float(item['so2Value']) if item['so2Value'] != \"-\" else None\n",
    "        ]\n",
    "        data.append(values)\n",
    "\n",
    "    # 결측값 처리 및 numpy 배열로 변환\n",
    "    data = np.array(data)\n",
    "    data = preprocess_data(data)  # 호출 추가\n",
    "\n",
    "    # 최근 10개의 시간 단계만 사용\n",
    "    input_data = data[-10:]\n",
    "\n",
    "    # 형태 확인 및 모델에 입력할 수 있는 형태로 변환\n",
    "    input_data = input_data.reshape(1, 10, 6)\n",
    "    # 실제 값 준비 (예: 최근 10개의 pm25 값)\n",
    "    actual_data = data[-10:, 1]  # 두 번째 특성이 pm25 값이라고 가정\n",
    "    \n",
    "    # MLP 모델 예측\n",
    "    with graph_mlp.as_default():\n",
    "        with session_mlp.as_default():\n",
    "            mlp_pred = mlp_model.predict(input_data)\n",
    "\n",
    "    # LSTM 모델 예측\n",
    "    with graph_lstm.as_default():\n",
    "        with session_lstm.as_default():\n",
    "            lstm_pred = lstm_model.predict(input_data)\n",
    "\n",
    "    # GRU 모델 예측\n",
    "    with graph_gru.as_default():\n",
    "        with session_gru.as_default():\n",
    "            gru_pred = gru_model.predict(input_data)\n",
    "    # CNN 모델 예측\n",
    "    with graph_cnn.as_default():\n",
    "        with session_cnn.as_default():\n",
    "            cnn_pred = cnn_model.predict(input_data)\n",
    "\n",
    "    # SimpleRNN 모델 예측\n",
    "    with graph_simplernn.as_default():\n",
    "        with session_simplernn.as_default():\n",
    "            simplernn_pred = simplernn_model.predict(input_data)\n",
    "            \n",
    "\n",
    "    # 예측 결과에서 1시간 뒤의 값을 추출\n",
    "    mlp_1hour_pred = mlp_pred[0, -1]\n",
    "    lstm_1hour_pred = lstm_pred[0, -1]\n",
    "    gru_1hour_pred = gru_pred[0, -1]\n",
    "    cnn_1hour_pred = cnn_pred[0, -1]\n",
    "    simplernn_1hour_pred = simplernn_pred[0, -1]\n",
    "    \n",
    "\n",
    "    # RMSE 계산 수정\n",
    "    mlp_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [mlp_1hour_pred]))\n",
    "    lstm_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [lstm_1hour_pred]))\n",
    "    gru_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [gru_1hour_pred]))\n",
    "    cnn_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [cnn_1hour_pred]))\n",
    "    simplernn_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [simplernn_1hour_pred]))\n",
    "    fig.update_layout(annotations=[])\n",
    "    # 모든 모델의 RMSE를 딕셔너리에 저장\n",
    "    rmse_dict = {\n",
    "        'MLP': mlp_rmse,\n",
    "        'LSTM': lstm_rmse,\n",
    "        'GRU': gru_rmse,\n",
    "        'CNN': cnn_rmse,\n",
    "        'SimpleRNN': simplernn_rmse\n",
    "    }\n",
    "\n",
    "    # 가장 낮은 RMSE를 가진 모델 찾기\n",
    "    min_rmse_model = min(rmse_dict, key=rmse_dict.get)\n",
    "    min_rmse_value = rmse_dict[min_rmse_model]\n",
    "\n",
    "    # 해당 모델의 예측값 찾기\n",
    "    pred_dict = {\n",
    "        'MLP': mlp_1hour_pred,\n",
    "        'LSTM': lstm_1hour_pred,\n",
    "        'GRU': gru_1hour_pred,\n",
    "        'CNN': cnn_1hour_pred,\n",
    "        'SimpleRNN': simplernn_1hour_pred\n",
    "    }\n",
    "    min_rmse_pred = pred_dict[min_rmse_model]\n",
    "\n",
    "    # 가장 낮은 RMSE를 가진 모델의 예측값만 그래프에 추가\n",
    "    fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[min_rmse_pred], mode='markers', name=f\"{min_rmse_model} 예측값 (RMSE: {min_rmse_value:.2f})\"))\n",
    "\n",
    "    # 최근 10개의 시간 단계만 사용\n",
    "    input_data = data[-10:]\n",
    "\n",
    "    # 형태 확인 및 모델에 입력할 수 있는 형태로 변환\n",
    "    input_data = input_data.reshape(1, 10, 6)\n",
    "    # 현재 시간부터 10시간 전까지의 시간 데이터 생성\n",
    "    time_data = [current_time - timedelta(hours=i) for i in range(10)]\n",
    "\n",
    "    # 현재 시간부터 10시간 전까지의 실제 값 준비\n",
    "    actual_data = data[-10:, 1]  # 두 번째 특성이 pm25 값이라고 가정\n",
    "    \n",
    "    # 마지막 실제 값\n",
    "    last_actual_value = actual_data[-1]\n",
    "    \n",
    "    # 실제 값의 선 색깔 정의\n",
    "    actual_line_color = 'rgb(30, 144, 255)'  # Dodger Blue\n",
    "\n",
    "    # 실제 데이터를 그래프에 추가 (선 색깔을 설정)\n",
    "    fig.add_trace(go.Scatter(x=time_data, y=actual_data, mode='markers+lines', name=f\"실제값 ({value})\", line=dict(color=actual_line_color)))\n",
    "\n",
    "    # 예측 결과와 마지막 실제 값 사이의 점선을 그래프에 추가 (선 색깔을 실제 값의 선 색깔과 동일하게 설정)\n",
    "    # 예측 마커와 실측값 마지막 데이터를 점선으로 연결 (MLP 예)\n",
    "    #fig.add_trace(go.Scatter(x=[current_time, current_time + timedelta(hours=1)], y=[last_actual_value, mlp_1hour_pred], mode='lines', line=dict(dash='dash', color=actual_line_color), showlegend=False))\n",
    "    #fig.add_trace(go.Scatter(x=[current_time, current_time + timedelta(hours=1)], y=[last_actual_value, simplernn_1hour_pred], mode='lines', line=dict(dash='dash', color=actual_line_color), showlegend=False))\n",
    "    #fig.add_trace(go.Scatter(x=[current_time, current_time + timedelta(hours=1)], y=[last_actual_value, gru_1hour_pred], mode='lines', line=dict(dash='dash', color=actual_line_color), showlegend=False))\n",
    "    #fig.add_trace(go.Scatter(x=[current_time, current_time + timedelta(hours=1)], y=[last_actual_value, cnn_1hour_pred], mode='lines', line=dict(dash='dash', color=actual_line_color), showlegend=False))\n",
    "\n",
    "    # 예측 마커 추가\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[mlp_1hour_pred], mode='markers', name=f\"MLP 예측값 (RMSE: {mlp_rmse:.2f})\"))\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[simplernn_1hour_pred], mode='markers', name=f\"RNN 예측값 (RMSE: {simplernn_rmse:.2f})\"))\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[gru_1hour_pred], mode='markers', name=f\"GRU 예측값 (RMSE: {gru_rmse:.2f})\"))\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[cnn_1hour_pred], mode='markers', name=f\"CNN 예측값 (RMSE: {cnn_rmse:.2f})\"))\n",
    "\n",
    "\n",
    "    # 예측 결과를 그래프에 추가 (MSE 값 포함)\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[mlp_1hour_pred], mode='markers', name=f\"MLP 예측값 (RMSE: {mlp_rmse:.2f})\"))\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[simplernn_1hour_pred], mode='markers', name=f\"RNN 예측값 (RMSE: {simplernn_rmse:.2f})\"))\n",
    "    #fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[lstm_1hour_pred], mode='markers', name=f\"LSTM 예측값 (RMSE: {lstm_rmse:.2f})\"))\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[gru_1hour_pred], mode='markers', name=f\"GRU 예측값 (RMSE: {gru_rmse:.2f})\"))\n",
    "   # fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[cnn_1hour_pred], mode='markers', name=f\"CNN 예측값 (RMSE: {cnn_rmse:.2f})\"))\n",
    "    #fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], y=[simplernn_1hour_pred], mode='markers', name=f\"RNN 예측값 (RMSE: {simplernn_rmse:.2f})\"))\n",
    "    return fig\n",
    "\n",
    "# 앱 실행\n",
    "if __name__ == \"__main__\":\n",
    "    app.run_server(port=8008, host='0.0.0.0')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import tensorflow as tf\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash.dependencies import Input, Output\n",
    "import plotly.graph_objects as go\n",
    "import requests\n",
    "import json\n",
    "from datetime import datetime, timedelta\n",
    "import numpy as np\n",
    "from tensorflow.keras.models import load_model\n",
    "from sklearn.metrics import mean_squared_error\n",
    "from sklearn.preprocessing import MinMaxScaler\n",
    "\n",
    "# 모델 불러오기\n",
    "global graph_mlp, session_mlp\n",
    "graph_mlp = tf.Graph()\n",
    "with graph_mlp.as_default():\n",
    "    session_mlp = tf.compat.v1.Session()\n",
    "    with session_mlp.as_default():\n",
    "        global mlp_model\n",
    "        mlp_model = load_model('./model/mlp_model.h5')\n",
    "\n",
    "global graph_lstm, session_lstm\n",
    "graph_lstm = tf.Graph()\n",
    "with graph_lstm.as_default():\n",
    "    session_lstm = tf.compat.v1.Session()\n",
    "    with session_lstm.as_default():\n",
    "        global lstm_model\n",
    "        lstm_model = load_model('./model/lstm_model.h5')\n",
    "\n",
    "global graph_gru, session_gru\n",
    "graph_gru = tf.Graph()\n",
    "with graph_gru.as_default():\n",
    "    session_gru = tf.compat.v1.Session()\n",
    "    with session_gru.as_default():\n",
    "        global gru_model\n",
    "        gru_model = load_model('./model/gru_model.h5')\n",
    "        \n",
    "# CNN 모델 불러오기\n",
    "global graph_cnn, session_cnn\n",
    "graph_cnn = tf.Graph()\n",
    "with graph_cnn.as_default():\n",
    "    session_cnn = tf.compat.v1.Session()\n",
    "    with session_cnn.as_default():\n",
    "        global cnn_model\n",
    "        cnn_model = load_model('./model/cnn_model.h5')\n",
    "\n",
    "# SimpleRNN 모델 불러오기\n",
    "global graph_simplernn, session_simplernn\n",
    "graph_simplernn = tf.Graph()\n",
    "with graph_simplernn.as_default():\n",
    "    session_simplernn = tf.compat.v1.Session()\n",
    "    with session_simplernn.as_default():\n",
    "        global simplernn_model\n",
    "        simplernn_model = load_model('./model/simplernn_model.h5')\n",
    "\n",
    "\n",
    "stations = [\n",
    "    {'name': '종로구'},\n",
    "    {'name': '강남구'},\n",
    "    {'name': '중구'}\n",
    "    # ... 계속 추가\n",
    "]\n",
    "\n",
    "app = dash.Dash(__name__)\n",
    "app.layout = html.Div([\n",
    "    html.H1(children='실시간 초미세먼지 예측 대시보드', style={'textAlign': 'center'}),\n",
    "    dcc.Dropdown(\n",
    "        id='station-dropdown',\n",
    "        options=[{'label': station['name'], 'value': station['name']} for station in stations],\n",
    "        value='중구'\n",
    "    ),\n",
    "    dcc.Graph(id='graph-content'),\n",
    "    html.Div([\n",
    "        html.P('출처: 한국환경공단, 「대기오염정보」', style={'font-size': 'small'}),\n",
    "    ], style={'position': 'relative', 'bottom': '40px', 'left': '10px'}),\n",
    "\n",
    "    dcc.Interval(id='interval-component', interval=60 * 60 * 1000, n_intervals=0),\n",
    "    \n",
    "\n",
    "    html.Div([\n",
    "    html.H3('대시보드 설명', style={'padding': '3px', 'font-weight': 'bold'}),\n",
    "    html.Div([\n",
    "        #html.H5('주기 및 예측 범위:'),\n",
    "        html.P('다양한 머신러닝 모델을 사용하여 1시간 주기로 초미세먼지 농도를 예측')\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 변수: 이산화황(SO2), 일산화탄소(CO), 오존(O3), 이산화질소(NO2), 미세먼지(PM10), 초미세먼지(PM2.5)'])\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 모델: MLP (Multi-Layer Perceptron), RNN (Recurrent Neural Network), LSTM (Long Short-Term Memory), GRU (Gated Recurrent Unit), CNN (Convolutional Neural Network)']),\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 성능 지표: RMSE (Root Mean Square Error)'])\n",
    "        \n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 결과 해석: 예측 성능이 가장 좋은 모델의 예측 값을 출력'])\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "], style={\n",
    "    'padding': '20px', \n",
    "    'border': '1px solid #ddd', \n",
    "    'border-radius': '8px', \n",
    "    'margin': '20px',\n",
    "    'box-shadow': '2px 2px 12px #aaa',\n",
    "    'background-color': '#f9f9f9'\n",
    "}) ])\n",
    "\n",
    "\n",
    "def preprocess_data(data):\n",
    "    for i in range(1, len(data)):\n",
    "        for j in range(6):\n",
    "            if data[i, j] is None and data[i-1, j] is not None:\n",
    "                data[i, j] = data[i-1, j]\n",
    "    \n",
    "    # 스케일링\n",
    "    scaler = MinMaxScaler()\n",
    "    preprocessed_data = scaler.fit_transform(data)\n",
    "        # NaN 값을 검사하고 0으로 대체\n",
    "    preprocessed_data = np.nan_to_num(preprocessed_data)\n",
    "    \n",
    "    return preprocessed_data\n",
    "\n",
    "@app.callback(\n",
    "    Output('graph-content', 'figure'),\n",
    "    [Input('interval-component', 'n_intervals'),\n",
    "     Input('station-dropdown', 'value')]\n",
    ")\n",
    "\n",
    "\n",
    "def update_graph(n, value):\n",
    "    # 시간 데이터 생성 (최근 10개의 시간 단계)\n",
    "    current_time = datetime.now()\n",
    "    # 시간 데이터 생성 (최근 10개의 시간 단계)\n",
    "    time_data = [current_time - timedelta(hours=i) for i in range(10, 0, -1)]\n",
    "    # 사용자 정의 눈금 값과 레이블 생성 (시간만 표시)\n",
    "    tickvals = []\n",
    "    ticktext = []\n",
    "    for i, time in enumerate(time_data):\n",
    "        tickvals.append(time)\n",
    "        ticktext.append(time.strftime(\"%H:%M\"))  # 연도, 월, 일 제거\n",
    "        \n",
    "    # fig 객체 생성\n",
    "    fig = go.Figure()\n",
    "    fig.update_layout(\n",
    "        xaxis_title=\"Time\",\n",
    "        yaxis_title=\"PM2.5 Concentration (μg/m³)\"\n",
    "    )\n",
    "\n",
    "    # 연도, 월, 일을 상단 좌측에 표시 (예: 2023-08-21)\n",
    "    fig.add_annotation(\n",
    "        text=current_time.strftime(\"%Y-%m-%d\"),\n",
    "        xref=\"paper\",\n",
    "        yref=\"paper\",\n",
    "        x=0,  # 좌측 정렬\n",
    "        y=1,  # 상단 정렬\n",
    "        showarrow=False,\n",
    "        font=dict(size=14),\n",
    "      \n",
    "    )\n",
    "    \n",
    "    url = 'http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty'\n",
    "    service_key = 'xdBtiCkOLc9TIoPuquKxtR0n+Fk8awNT/qLlOCApNheoK+gweAWhIWzdUCttWKvi0xeI2bM3KCSduGfRhI922w=='\n",
    "\n",
    "\n",
    "    # 선택된 측정소에 대한 데이터 수집\n",
    "    params = {\n",
    "        'serviceKey': service_key,\n",
    "        'returnType': 'json',\n",
    "        'numOfRows': '10',\n",
    "        'pageNo': '1',\n",
    "        'stationName': value,\n",
    "        'dataTerm': 'DAILY',\n",
    "        'ver': '1.0'\n",
    "    }\n",
    "    response = requests.get(url, params=params)\n",
    "    json_object = json.loads(response.content)\n",
    "    \n",
    "    # 6개의 특성을 저장할 리스트\n",
    "    data = []\n",
    "    for item in json_object['response']['body']['items']:\n",
    "        values = [\n",
    "            float(item['pm10Value']) if item['pm10Value'] != \"-\" else None,\n",
    "            float(item['pm25Value']) if item['pm25Value'] != \"-\" else None,\n",
    "            float(item['o3Value']) if item['o3Value'] != \"-\" else None,\n",
    "            float(item['no2Value']) if item['no2Value'] != \"-\" else None,\n",
    "            float(item['coValue']) if item['coValue'] != \"-\" else None,\n",
    "            float(item['so2Value']) if item['so2Value'] != \"-\" else None\n",
    "        ]\n",
    "        data.append(values)\n",
    "\n",
    "    # 결측값 처리 및 numpy 배열로 변환\n",
    "    data = np.array(data)\n",
    "    data = preprocess_data(data)  # 호출 추가\n",
    "\n",
    "    # 최근 10개의 시간 단계만 사용\n",
    "    input_data = data[-10:]\n",
    "\n",
    "    # 형태 확인 및 모델에 입력할 수 있는 형태로 변환\n",
    "    input_data = input_data.reshape(1, 10, 6)\n",
    "    # 실제 값 준비 (예: 최근 10개의 pm25 값)\n",
    "    actual_data = data[-10:, 1]  # 두 번째 특성이 pm25 값이라고 가정\n",
    "    \n",
    "    # MLP 모델 예측\n",
    "    with graph_mlp.as_default():\n",
    "        with session_mlp.as_default():\n",
    "            mlp_pred = mlp_model.predict(input_data)\n",
    "\n",
    "    # LSTM 모델 예측\n",
    "    with graph_lstm.as_default():\n",
    "        with session_lstm.as_default():\n",
    "            lstm_pred = lstm_model.predict(input_data)\n",
    "\n",
    "    # GRU 모델 예측\n",
    "    with graph_gru.as_default():\n",
    "        with session_gru.as_default():\n",
    "            gru_pred = gru_model.predict(input_data)\n",
    "    # CNN 모델 예측\n",
    "    with graph_cnn.as_default():\n",
    "        with session_cnn.as_default():\n",
    "            cnn_pred = cnn_model.predict(input_data)\n",
    "\n",
    "    # SimpleRNN 모델 예측\n",
    "    with graph_simplernn.as_default():\n",
    "        with session_simplernn.as_default():\n",
    "            simplernn_pred = simplernn_model.predict(input_data)\n",
    "            \n",
    "\n",
    "    # 예측 결과에서 1시간 뒤의 값을 추출\n",
    "    mlp_1hour_pred = mlp_pred[0, -1]\n",
    "    lstm_1hour_pred = lstm_pred[0, -1]\n",
    "    gru_1hour_pred = gru_pred[0, -1]\n",
    "    cnn_1hour_pred = cnn_pred[0, -1]\n",
    "    simplernn_1hour_pred = simplernn_pred[0, -1]\n",
    "    \n",
    "\n",
    "    # RMSE 계산 수정\n",
    "    mlp_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [mlp_1hour_pred]))\n",
    "    lstm_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [lstm_1hour_pred]))\n",
    "    gru_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [gru_1hour_pred]))\n",
    "    cnn_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [cnn_1hour_pred]))\n",
    "    simplernn_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [simplernn_1hour_pred]))\n",
    "    fig.update_layout(annotations=[])\n",
    "    # 모든 모델의 RMSE를 딕셔너리에 저장\n",
    "    rmse_dict = {\n",
    "        'MLP': mlp_rmse,\n",
    "        'LSTM': lstm_rmse,\n",
    "        'GRU': gru_rmse,\n",
    "        'CNN': cnn_rmse,\n",
    "        'SimpleRNN': simplernn_rmse\n",
    "    }\n",
    "\n",
    "    # 가장 낮은 RMSE를 가진 모델 찾기\n",
    "    min_rmse_model = min(rmse_dict, key=rmse_dict.get)\n",
    "    min_rmse_value = rmse_dict[min_rmse_model]\n",
    "\n",
    "    # 해당 모델의 예측값 찾기\n",
    "    pred_dict = {\n",
    "        'MLP': mlp_1hour_pred,\n",
    "        'LSTM': lstm_1hour_pred,\n",
    "        'GRU': gru_1hour_pred,\n",
    "        'CNN': cnn_1hour_pred,\n",
    "        'SimpleRNN': simplernn_1hour_pred\n",
    "    }\n",
    "    min_rmse_pred = pred_dict[min_rmse_model]\n",
    "\n",
    "    # 실제 데이터를 그래프에 추가 (점 위에 실제값 표시)\n",
    "    fig.add_trace(go.Scatter(x=time_data, \n",
    "                             y=actual_data, \n",
    "                             mode='markers+lines+text', \n",
    "                             name=f\"실제값 ({value})\", \n",
    "                             line=dict(color='rgb(30, 144, 255)'),  # Dodger Blue\n",
    "                             text=[f\"{val:.3f}\" for val in actual_data],\n",
    "                             textposition=\"top center\"))\n",
    "\n",
    "    # 가장 낮은 RMSE를 가진 모델의 예측값만 그래프에 추가 (점 위에 예측값 표시)\n",
    "    fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=1)], \n",
    "                             y=[min_rmse_pred], \n",
    "                             mode='markers+text', \n",
    "                             name=f\"{min_rmse_model} 예측값 (RMSE: {min_rmse_value:.2f})\", \n",
    "                             marker=dict(color='rgb(139, 0, 0)'),  # Dark Red\n",
    "                             text=[f\"{min_rmse_pred:.3f}\"],\n",
    "                             textposition=\"top center\"))\n",
    "    # 마지막 실제값과 예측값을 점선으로 연결\n",
    "    fig.add_trace(go.Scatter(x=[time_data[-1], current_time + timedelta(hours=1)], \n",
    "                             y=[actual_data[-1], min_rmse_pred], \n",
    "                             mode='lines', \n",
    "                             line=dict(dash='dash', color='gray'),\n",
    "                             showlegend=False\n",
    "                             ))\n",
    "\n",
    "    # 최근 10개의 시간 단계만 사용\n",
    "    input_data = data[-10:]\n",
    "\n",
    "    # 형태 확인 및 모델에 입력할 수 있는 형태로 변환\n",
    "    input_data = input_data.reshape(1, 10, 6)\n",
    "    # 현재 시간부터 10시간 전까지의 시간 데이터 생성\n",
    "    time_data = [current_time - timedelta(hours=i) for i in range(10)]\n",
    "\n",
    "    # 현재 시간부터 10시간 전까지의 실제 값 준비\n",
    "    actual_data = data[-10:, 1]  # 두 번째 특성이 pm25 값이라고 가정\n",
    "    \n",
    "    # 마지막 실제 값\n",
    "    last_actual_value = actual_data[-1]\n",
    "    \n",
    "    # 실제 값의 선 색깔 정의\n",
    "    actual_line_color = 'rgb(30, 144, 255)'  # Dodger Blue\n",
    "\n",
    "    # 실제 데이터를 그래프에 추가 (선 색깔을 설정)\n",
    "    #fig.add_trace(go.Scatter(x=time_data, y=actual_data, mode='markers+lines', name=f\"실제값 ({value})\", line=dict(color=actual_line_color)))\n",
    "\n",
    "    return fig\n",
    "\n",
    "# 앱 실행\n",
    "if __name__ == \"__main__\":\n",
    "    app.run_server(port=8008, host='0.0.0.0')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import tensorflow as tf\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash.dependencies import Input, Output\n",
    "import plotly.graph_objects as go\n",
    "import requests\n",
    "import json\n",
    "from datetime import datetime, timedelta\n",
    "import numpy as np\n",
    "from tensorflow.keras.models import load_model\n",
    "from sklearn.metrics import mean_squared_error\n",
    "from sklearn.preprocessing import MinMaxScaler\n",
    "\n",
    "# 모델 불러오기\n",
    "global graph_mlp, session_mlp\n",
    "graph_mlp = tf.Graph()\n",
    "with graph_mlp.as_default():\n",
    "    session_mlp = tf.compat.v1.Session()\n",
    "    with session_mlp.as_default():\n",
    "        global mlp_model\n",
    "        mlp_model = load_model('./model/mlp_model.h5')\n",
    "\n",
    "global graph_lstm, session_lstm\n",
    "graph_lstm = tf.Graph()\n",
    "with graph_lstm.as_default():\n",
    "    session_lstm = tf.compat.v1.Session()\n",
    "    with session_lstm.as_default():\n",
    "        global lstm_model\n",
    "        lstm_model = load_model('./model/lstm_model.h5')\n",
    "\n",
    "global graph_gru, session_gru\n",
    "graph_gru = tf.Graph()\n",
    "with graph_gru.as_default():\n",
    "    session_gru = tf.compat.v1.Session()\n",
    "    with session_gru.as_default():\n",
    "        global gru_model\n",
    "        gru_model = load_model('./model/gru_model.h5')\n",
    "        \n",
    "# CNN 모델 불러오기\n",
    "global graph_cnn, session_cnn\n",
    "graph_cnn = tf.Graph()\n",
    "with graph_cnn.as_default():\n",
    "    session_cnn = tf.compat.v1.Session()\n",
    "    with session_cnn.as_default():\n",
    "        global cnn_model\n",
    "        cnn_model = load_model('./model/cnn_model.h5')\n",
    "\n",
    "# SimpleRNN 모델 불러오기\n",
    "global graph_simplernn, session_simplernn\n",
    "graph_simplernn = tf.Graph()\n",
    "with graph_simplernn.as_default():\n",
    "    session_simplernn = tf.compat.v1.Session()\n",
    "    with session_simplernn.as_default():\n",
    "        global simplernn_model\n",
    "        simplernn_model = load_model('./model/simplernn_model.h5')\n",
    "\n",
    "\n",
    "stations = [\n",
    "    {'name': '종로구'},\n",
    "    {'name': '강남구'},\n",
    "    {'name': '중구'}\n",
    "    # ... 계속 추가\n",
    "]\n",
    "\n",
    "app = dash.Dash(__name__)\n",
    "app.layout = html.Div([\n",
    "    html.H1(children='실시간 초미세먼지 예측 대시보드', style={'textAlign': 'center'}),\n",
    "    dcc.Dropdown(\n",
    "        id='station-dropdown',\n",
    "        options=[{'label': station['name'], 'value': station['name']} for station in stations],\n",
    "        value='중구'\n",
    "    ),\n",
    "    dcc.Graph(id='graph-content'),\n",
    "    html.Div([\n",
    "        html.P('출처: 한국환경공단, 「대기오염정보」', style={'font-size': 'small'}),\n",
    "    ], style={'position': 'relative', 'bottom': '40px', 'left': '10px'}),\n",
    "\n",
    "    dcc.Interval(id='interval-component', interval=60 * 60 * 1000, n_intervals=0),\n",
    "    \n",
    "\n",
    "    html.Div([\n",
    "    html.H3('대시보드 설명', style={'padding': '3px', 'font-weight': 'bold'}),\n",
    "    html.Div([\n",
    "        #html.H5('주기 및 예측 범위:'),\n",
    "        html.P('다양한 머신러닝 모델을 사용하여 1시간 주기로 초미세먼지 농도를 예측')\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 변수: 이산화황(SO2), 일산화탄소(CO), 오존(O3), 이산화질소(NO2), 미세먼지(PM10), 초미세먼지(PM2.5)'])\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 모델: MLP (Multi-Layer Perceptron), RNN (Recurrent Neural Network), LSTM (Long Short-Term Memory), GRU (Gated Recurrent Unit), CNN (Convolutional Neural Network)']),\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 성능 지표: RMSE (Root Mean Square Error)'])\n",
    "        \n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 결과 해석: 예측 성능이 가장 좋은 모델의 예측 값을 출력'])\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "], style={\n",
    "    'padding': '20px', \n",
    "    'border': '1px solid #ddd', \n",
    "    'border-radius': '8px', \n",
    "    'margin': '20px',\n",
    "    'box-shadow': '2px 2px 12px #aaa',\n",
    "    'background-color': '#f9f9f9'\n",
    "}) ])\n",
    "\n",
    "\n",
    "def preprocess_data(data):\n",
    "    for i in range(1, len(data)):\n",
    "        for j in range(6):\n",
    "            if data[i, j] is None and data[i-1, j] is not None:\n",
    "                data[i, j] = data[i-1, j]\n",
    "    \n",
    "    # 스케일링\n",
    "    scaler = MinMaxScaler()\n",
    "    preprocessed_data = scaler.fit_transform(data)\n",
    "        # NaN 값을 검사하고 0으로 대체\n",
    "    preprocessed_data = np.nan_to_num(preprocessed_data)\n",
    "    \n",
    "    return preprocessed_data\n",
    "\n",
    "@app.callback(\n",
    "    Output('graph-content', 'figure'),\n",
    "    [Input('interval-component', 'n_intervals'),\n",
    "     Input('station-dropdown', 'value')]\n",
    ")\n",
    "\n",
    "\n",
    "def update_graph(n, value):\n",
    "    # 시간 데이터 생성 (최근 10개의 시간 단계)\n",
    "    current_time = datetime.now()\n",
    "    # 시간 데이터 생성 (최근 10개의 시간 단계)\n",
    "    time_data = [current_time - timedelta(hours=i) for i in range(10, 0, -1)]\n",
    "    # 사용자 정의 눈금 값과 레이블 생성 (시간만 표시)\n",
    "    tickvals = []\n",
    "    ticktext = []\n",
    "    for i, time in enumerate(time_data):\n",
    "        tickvals.append(time)\n",
    "        ticktext.append(time.strftime(\"%H:%M\"))  # 연도, 월, 일 제거\n",
    "        \n",
    "    # fig 객체 생성\n",
    "    fig = go.Figure()\n",
    "    fig.update_layout(\n",
    "        xaxis_title=\"Time\",\n",
    "        yaxis_title=\"PM2.5 Concentration (μg/m³)\"\n",
    "    )\n",
    "\n",
    "    # 연도, 월, 일을 상단 좌측에 표시 (예: 2023-08-21)\n",
    "    fig.add_annotation(\n",
    "        text=current_time.strftime(\"%Y-%m-%d\"),\n",
    "        xref=\"paper\",\n",
    "        yref=\"paper\",\n",
    "        x=0,  # 좌측 정렬\n",
    "        y=1,  # 상단 정렬\n",
    "        showarrow=False,\n",
    "        font=dict(size=14),\n",
    "      \n",
    "    )\n",
    "    \n",
    "    url = 'http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty'\n",
    "    service_key = 'xdBtiCkOLc9TIoPuquKxtR0n+Fk8awNT/qLlOCApNheoK+gweAWhIWzdUCttWKvi0xeI2bM3KCSduGfRhI922w=='\n",
    "\n",
    "\n",
    "    # 선택된 측정소에 대한 데이터 수집\n",
    "    params = {\n",
    "        'serviceKey': service_key,\n",
    "        'returnType': 'json',\n",
    "        'numOfRows': '10',\n",
    "        'pageNo': '1',\n",
    "        'stationName': value,\n",
    "        'dataTerm': 'DAILY',\n",
    "        'ver': '1.0'\n",
    "    }\n",
    "    response = requests.get(url, params=params)\n",
    "    json_object = json.loads(response.content)\n",
    "    \n",
    "    # 6개의 특성을 저장할 리스트\n",
    "    data = []\n",
    "    for item in json_object['response']['body']['items']:\n",
    "        values = [\n",
    "            float(item['pm10Value']) if item['pm10Value'] != \"-\" else None,\n",
    "            float(item['pm25Value']) if item['pm25Value'] != \"-\" else None,\n",
    "            float(item['o3Value']) if item['o3Value'] != \"-\" else None,\n",
    "            float(item['no2Value']) if item['no2Value'] != \"-\" else None,\n",
    "            float(item['coValue']) if item['coValue'] != \"-\" else None,\n",
    "            float(item['so2Value']) if item['so2Value'] != \"-\" else None\n",
    "        ]\n",
    "        data.append(values)\n",
    "\n",
    "    # 결측값 처리 및 numpy 배열로 변환\n",
    "    data = np.array(data)\n",
    "    data = preprocess_data(data)  # 호출 추가\n",
    "\n",
    "    # 최근 10개의 시간 단계만 사용\n",
    "    input_data = data[-10:]\n",
    "\n",
    "    # 형태 확인 및 모델에 입력할 수 있는 형태로 변환\n",
    "    input_data = input_data.reshape(1, 10, 6)\n",
    "    # 실제 값 준비 (예: 최근 10개의 pm25 값)\n",
    "    actual_data = data[-10:, 1]  # 두 번째 특성이 pm25 값이라고 가정\n",
    "    \n",
    "    # MLP 모델 예측\n",
    "    with graph_mlp.as_default():\n",
    "        with session_mlp.as_default():\n",
    "            mlp_pred = mlp_model.predict(input_data)\n",
    "\n",
    "    # LSTM 모델 예측\n",
    "    with graph_lstm.as_default():\n",
    "        with session_lstm.as_default():\n",
    "            lstm_pred = lstm_model.predict(input_data)\n",
    "\n",
    "    # GRU 모델 예측\n",
    "    with graph_gru.as_default():\n",
    "        with session_gru.as_default():\n",
    "            gru_pred = gru_model.predict(input_data)\n",
    "    # CNN 모델 예측\n",
    "    with graph_cnn.as_default():\n",
    "        with session_cnn.as_default():\n",
    "            cnn_pred = cnn_model.predict(input_data)\n",
    "\n",
    "    # SimpleRNN 모델 예측\n",
    "    with graph_simplernn.as_default():\n",
    "        with session_simplernn.as_default():\n",
    "            simplernn_pred = simplernn_model.predict(input_data)\n",
    "            \n",
    "\n",
    "    # 예측 결과에서 1시간 뒤의 값을 추출\n",
    "    mlp_1hour_pred = mlp_pred[0, -1]\n",
    "    lstm_1hour_pred = lstm_pred[0, -1]\n",
    "    gru_1hour_pred = gru_pred[0, -1]\n",
    "    cnn_1hour_pred = cnn_pred[0, -1]\n",
    "    simplernn_1hour_pred = simplernn_pred[0, -1]\n",
    "    \n",
    "\n",
    "    # RMSE 계산 수정\n",
    "    mlp_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [mlp_1hour_pred]))\n",
    "    lstm_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [lstm_1hour_pred]))\n",
    "    gru_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [gru_1hour_pred]))\n",
    "    cnn_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [cnn_1hour_pred]))\n",
    "    simplernn_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [simplernn_1hour_pred]))\n",
    "    fig.update_layout(annotations=[])\n",
    "    # 모든 모델의 RMSE를 딕셔너리에 저장\n",
    "    rmse_dict = {\n",
    "        'MLP': mlp_rmse,\n",
    "        'LSTM': lstm_rmse,\n",
    "        'GRU': gru_rmse,\n",
    "        'CNN': cnn_rmse,\n",
    "        'SimpleRNN': simplernn_rmse\n",
    "    }\n",
    "\n",
    "    # 가장 낮은 RMSE를 가진 모델 찾기\n",
    "    min_rmse_model = min(rmse_dict, key=rmse_dict.get)\n",
    "    min_rmse_value = rmse_dict[min_rmse_model]\n",
    "\n",
    "    # 해당 모델의 예측값 찾기\n",
    "    pred_dict = {\n",
    "        'MLP': mlp_1hour_pred,\n",
    "        'LSTM': lstm_1hour_pred,\n",
    "        'GRU': gru_1hour_pred,\n",
    "        'CNN': cnn_1hour_pred,\n",
    "        'SimpleRNN': simplernn_1hour_pred\n",
    "    }\n",
    "    min_rmse_pred = pred_dict[min_rmse_model]\n",
    "\n",
    "    # 실제 데이터를 그래프에 추가 (점 위에 실제값 표시)\n",
    "    fig.add_trace(go.Scatter(x=time_data, \n",
    "                             y=actual_data, \n",
    "                             mode='markers+lines+text', \n",
    "                             name=f\"실제값 ({value})\", \n",
    "                             line=dict(color='rgb(30, 144, 255)'),  # Dodger Blue\n",
    "                             text=[f\"{val:.3f}\" for val in actual_data],\n",
    "                             textposition=\"top center\"))\n",
    "\n",
    "\n",
    "\n",
    "    # 최근 10개의 시간 단계만 사용\n",
    "    input_data = data[-10:]\n",
    "\n",
    "    # 형태 확인 및 모델에 입력할 수 있는 형태로 변환\n",
    "    input_data = input_data.reshape(1, 10, 6)\n",
    "    # 현재 시간부터 10시간 전까지의 시간 데이터 생성\n",
    "    time_data = [current_time - timedelta(hours=i) for i in range(10)]\n",
    "\n",
    "    # 현재 시간부터 10시간 전까지의 실제 값 준비\n",
    "    actual_data = data[-10:, 1]  # 두 번째 특성이 pm25 값이라고 가정\n",
    "    \n",
    "    # 마지막 실제 값\n",
    "    last_actual_value = actual_data[-1]\n",
    "    \n",
    "    # 실제 값의 선 색깔 정의\n",
    "    actual_line_color = 'rgb(30, 144, 255)'  # Dodger Blue\n",
    "\n",
    "    # 1시간, 2시간, 3시간 후 예측을 위한 빈 딕셔너리\n",
    "    future_hours = [1, 2, 3]  # 이 시간들에 대한 예측을 하려고 함\n",
    "    future_preds = {hour: {'value': None, 'rmse': None} for hour in future_hours}\n",
    "\n",
    "    # 미래 예측 데이터\n",
    "    for hour in future_hours:\n",
    "        input_data_future = data[-10:].copy()  # 마지막 10개의 데이터로 예측을 시작\n",
    "        for i in range(hour):\n",
    "            with graph_mlp.as_default():\n",
    "                with session_mlp.as_default():\n",
    "                    mlp_pred_future = mlp_model.predict(input_data_future.reshape(1, 10, 6))\n",
    "            last_pred = mlp_pred_future[0, -1]\n",
    "            input_data_future = np.roll(input_data_future, shift=-1, axis=0)\n",
    "            input_data_future[-1, 1] = last_pred  # PM2.5가 index 1에 있다고 가정\n",
    "\n",
    "        rmse_future = np.sqrt(mean_squared_error([actual_data[-1]], [last_pred]))\n",
    "        future_preds[hour]['value'] = last_pred\n",
    "        future_preds[hour]['rmse'] = rmse_future\n",
    "\n",
    "    # 미래 예측 데이터를 그래프에 추가\n",
    "    for hour, pred_info in future_preds.items():\n",
    "        pred = pred_info['value']\n",
    "        rmse = pred_info['rmse']\n",
    "        fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=hour)], \n",
    "                                 y=[pred], \n",
    "                                 mode='markers+text', \n",
    "                                 name=f\"{min_rmse_model} {hour}-hour future prediction (RMSE: {rmse:.3f})\", \n",
    "                                 marker=dict(color='rgb(139, 0, 0)'),  # Dark Red\n",
    "                                 text=[f\"{pred:.3f}\"],\n",
    "                                 textposition=\"top center\"))    \n",
    "    \n",
    "    return fig\n",
    "\n",
    "# 앱 실행\n",
    "if __name__ == \"__main__\":\n",
    "    app.run_server(port=8008, host='0.0.0.0')\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 수정Ver"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/usr/local/lib/python3.6/dist-packages/ipykernel_launcher.py:3: UserWarning: \n",
      "The dash_core_components package is deprecated. Please replace\n",
      "`import dash_core_components as dcc` with `from dash import dcc`\n",
      "  This is separate from the ipykernel package so we can avoid doing imports until\n",
      "/usr/local/lib/python3.6/dist-packages/ipykernel_launcher.py:4: UserWarning: \n",
      "The dash_html_components package is deprecated. Please replace\n",
      "`import dash_html_components as html` with `from dash import html`\n",
      "  after removing the cwd from sys.path.\n"
     ]
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "WARNING:tensorflow:From /usr/local/lib/python3.6/dist-packages/tensorflow_core/python/ops/init_ops.py:97: calling GlorotUniform.__init__ (from tensorflow.python.ops.init_ops) with dtype is deprecated and will be removed in a future version.\n",
      "Instructions for updating:\n",
      "Call initializer instance with the dtype argument instead of passing it to the constructor\n",
      "WARNING:tensorflow:From /usr/local/lib/python3.6/dist-packages/tensorflow_core/python/ops/init_ops.py:97: calling Zeros.__init__ (from tensorflow.python.ops.init_ops) with dtype is deprecated and will be removed in a future version.\n",
      "Instructions for updating:\n",
      "Call initializer instance with the dtype argument instead of passing it to the constructor\n",
      "WARNING:tensorflow:From /usr/local/lib/python3.6/dist-packages/tensorflow_core/python/ops/resource_variable_ops.py:1630: calling BaseResourceVariable.__init__ (from tensorflow.python.ops.resource_variable_ops) with constraint is deprecated and will be removed in a future version.\n",
      "Instructions for updating:\n",
      "If using Keras pass *_constraint arguments to layers.\n",
      "WARNING:tensorflow:From /usr/local/lib/python3.6/dist-packages/tensorflow_core/python/ops/init_ops.py:97: calling Orthogonal.__init__ (from tensorflow.python.ops.init_ops) with dtype is deprecated and will be removed in a future version.\n",
      "Instructions for updating:\n",
      "Call initializer instance with the dtype argument instead of passing it to the constructor\n",
      "WARNING:tensorflow:From /usr/local/lib/python3.6/dist-packages/tensorflow_core/python/ops/math_grad.py:1424: where (from tensorflow.python.ops.array_ops) is deprecated and will be removed in a future version.\n",
      "Instructions for updating:\n",
      "Use tf.where in 2.0, which has the same broadcast rule as np.where\n",
      "Dash is running on http://0.0.0.0:8008/\n",
      "\n",
      " * Serving Flask app '__main__' (lazy loading)\n",
      " * Environment: production\n",
      "\u001b[31m   WARNING: This is a development server. Do not use it in a production deployment.\u001b[0m\n",
      "\u001b[2m   Use a production WSGI server instead.\u001b[0m\n",
      " * Debug mode: off\n"
     ]
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      " * Running on all addresses.\n",
      "   WARNING: This is a development server. Do not use it in a production deployment.\n",
      " * Running on http://192.168.1.51:8008/ (Press CTRL+C to quit)\n",
      "192.168.100.129 - - [25/Oct/2023 09:18:25] \"GET / HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:18:25] \"GET /_dash-layout HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:18:25] \"GET /_dash-dependencies HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:18:25] \"GET /_favicon.ico?v=2.9.3 HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:18:25] \"GET /_dash-component-suites/dash/dcc/async-graph.js HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:18:25] \"GET /_dash-component-suites/dash/dcc/async-dropdown.js HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:18:25] \"GET /_dash-component-suites/dash/dcc/async-plotlyjs.js HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:18:32] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:29:48] \"GET / HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:29:48] \"GET /_dash-layout HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:29:48] \"GET /_dash-dependencies HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:29:48] \"GET /_dash-component-suites/dash/dcc/async-dropdown.js HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:29:48] \"GET /_dash-component-suites/dash/dcc/async-graph.js HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:29:48] \"GET /_dash-component-suites/dash/dcc/async-plotlyjs.js HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 09:29:48] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 10:18:25] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 11:18:25] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 12:18:26] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET / HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/deps/polyfill@7.v2_9_3m1684137718.12.1.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/deps/react@16.v2_9_3m1684137718.14.0.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/dcc/dash_core_components-shared.v2_9_2m1684137718.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684137717.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/deps/prop-types@15.v2_9_3m1684137718.8.1.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1684137718.14.0.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/html/dash_html_components.v2_0_11m1684137718.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/dcc/dash_core_components.v2_9_2m1684137718.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/dash_table/bundle.v5_2_4m1684137717.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-layout HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-dependencies HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_favicon.ico?v=2.9.3 HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/dcc/async-dropdown.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/dcc/async-graph.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"GET /_dash-component-suites/dash/dcc/async-plotlyjs.js HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:01] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:15] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:17] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.119 - - [25/Oct/2023 12:54:19] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 13:18:26] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:11] \"GET / HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:11] \"GET /_dash-component-suites/dash/deps/polyfill@7.v2_9_3m1684137718.12.1.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:11] \"GET /_dash-component-suites/dash/deps/react@16.v2_9_3m1684137718.14.0.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:11] \"GET /_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1684137718.14.0.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:11] \"GET /_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1684137717.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:11] \"GET /_dash-component-suites/dash/deps/prop-types@15.v2_9_3m1684137718.8.1.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:11] \"GET /_dash-component-suites/dash/dcc/dash_core_components.v2_9_2m1684137718.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:11] \"GET /_dash-component-suites/dash/dcc/dash_core_components-shared.v2_9_2m1684137718.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:11] \"GET /_dash-component-suites/dash/html/dash_html_components.v2_0_11m1684137718.min.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:12] \"GET /_dash-component-suites/dash/dash_table/bundle.v5_2_4m1684137717.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:12] \"GET /_dash-layout HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:12] \"GET /_dash-dependencies HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:12] \"GET /_favicon.ico?v=2.9.3 HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:12] \"GET /_dash-component-suites/dash/dcc/async-dropdown.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:12] \"GET /_dash-component-suites/dash/dcc/async-graph.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:12] \"GET /_dash-component-suites/dash/dcc/async-plotlyjs.js HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:34:12] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:37:56] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:37:58] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:37:59] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.161 - - [25/Oct/2023 13:38:01] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 14:18:26] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "192.168.100.129 - - [25/Oct/2023 15:18:26] \"POST /_dash-update-component HTTP/1.1\" 200 -\n"
     ]
    }
   ],
   "source": [
    "import tensorflow as tf\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash.dependencies import Input, Output\n",
    "import plotly.graph_objects as go\n",
    "import requests\n",
    "import json\n",
    "from datetime import datetime, timedelta\n",
    "import numpy as np\n",
    "from tensorflow.keras.models import load_model\n",
    "from sklearn.metrics import mean_squared_error\n",
    "from sklearn.preprocessing import MinMaxScaler\n",
    "\n",
    "# 모델 불러오기\n",
    "global graph_mlp, session_mlp\n",
    "graph_mlp = tf.Graph()\n",
    "with graph_mlp.as_default():\n",
    "    session_mlp = tf.compat.v1.Session()\n",
    "    with session_mlp.as_default():\n",
    "        global mlp_model\n",
    "        mlp_model = load_model('./model/mlp_model.h5')\n",
    "\n",
    "global graph_lstm, session_lstm\n",
    "graph_lstm = tf.Graph()\n",
    "with graph_lstm.as_default():\n",
    "    session_lstm = tf.compat.v1.Session()\n",
    "    with session_lstm.as_default():\n",
    "        global lstm_model\n",
    "        lstm_model = load_model('./model/lstm_model.h5')\n",
    "\n",
    "global graph_gru, session_gru\n",
    "graph_gru = tf.Graph()\n",
    "with graph_gru.as_default():\n",
    "    session_gru = tf.compat.v1.Session()\n",
    "    with session_gru.as_default():\n",
    "        global gru_model\n",
    "        gru_model = load_model('./model/gru_model.h5')\n",
    "        \n",
    "# CNN 모델 불러오기\n",
    "global graph_cnn, session_cnn\n",
    "graph_cnn = tf.Graph()\n",
    "with graph_cnn.as_default():\n",
    "    session_cnn = tf.compat.v1.Session()\n",
    "    with session_cnn.as_default():\n",
    "        global cnn_model\n",
    "        cnn_model = load_model('./model/cnn_model.h5')\n",
    "\n",
    "# SimpleRNN 모델 불러오기\n",
    "global graph_simplernn, session_simplernn\n",
    "graph_simplernn = tf.Graph()\n",
    "with graph_simplernn.as_default():\n",
    "    session_simplernn = tf.compat.v1.Session()\n",
    "    with session_simplernn.as_default():\n",
    "        global simplernn_model\n",
    "        simplernn_model = load_model('./model/simplernn_model.h5')\n",
    "\n",
    "\n",
    "stations = [\n",
    "    {'name': '종로구'},\n",
    "    {'name': '강남구'},\n",
    "    {'name': '중구'}\n",
    "    # ... 계속 추가\n",
    "]\n",
    "\n",
    "app = dash.Dash(__name__)\n",
    "app.layout = html.Div([\n",
    "    html.H1(children='실시간 초미세먼지 예측 대시보드', style={'textAlign': 'center'}),\n",
    "    dcc.Dropdown(\n",
    "        id='station-dropdown',\n",
    "        options=[{'label': station['name'], 'value': station['name']} for station in stations],\n",
    "        value='중구'\n",
    "    ),\n",
    "    dcc.Graph(id='graph-content'),\n",
    "    html.Div([\n",
    "        html.P('출처: 한국환경공단, 「대기오염정보」', style={'font-size': 'small'}),\n",
    "    ], style={'position': 'relative', 'bottom': '40px', 'left': '10px'}),\n",
    "\n",
    "    dcc.Interval(id='interval-component', interval=60 * 60 * 1000, n_intervals=0),\n",
    "    \n",
    "\n",
    "    html.Div([\n",
    "    html.H3('대시보드 설명', style={'padding': '3px', 'font-weight': 'bold'}),\n",
    "    html.Div([\n",
    "        #html.H5('주기 및 예측 범위:'),\n",
    "        html.P('다양한 머신러닝 모델을 사용하여 1시간 주기로 초미세먼지 농도를 예측')\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 변수: 이산화황(SO2), 일산화탄소(CO), 오존(O3), 이산화질소(NO2), 미세먼지(PM10), 초미세먼지(PM2.5)'])\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 모델: MLP (Multi-Layer Perceptron), RNN (Recurrent Neural Network), LSTM (Long Short-Term Memory), GRU (Gated Recurrent Unit), CNN (Convolutional Neural Network)']),\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 성능 지표: RMSE (Root Mean Square Error)'])\n",
    "        \n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "    html.Div([\n",
    "        html.H5([html.Span('●', style={'font-size': 'xx-small'}),' 결과 해석: 예측 성능이 가장 좋은 모델의 예측 값을 출력'])\n",
    "    ], style={'margin-bottom': '5px'}),\n",
    "\n",
    "], style={\n",
    "    'padding': '20px', \n",
    "    'border': '1px solid #ddd', \n",
    "    'border-radius': '8px', \n",
    "    'margin': '20px',\n",
    "    'box-shadow': '2px 2px 12px #aaa',\n",
    "    'background-color': '#f9f9f9'\n",
    "}) ])\n",
    "\n",
    "\n",
    "def preprocess_data(data):\n",
    "    for i in range(1, len(data)):\n",
    "        for j in range(6):\n",
    "            if data[i, j] is None and data[i-1, j] is not None:\n",
    "                data[i, j] = data[i-1, j]\n",
    "    \n",
    "    # 스케일링\n",
    "    scaler = MinMaxScaler()\n",
    "    preprocessed_data = scaler.fit_transform(data)\n",
    "        # NaN 값을 검사하고 0으로 대체\n",
    "    preprocessed_data = np.nan_to_num(preprocessed_data)\n",
    "    \n",
    "    return preprocessed_data\n",
    "\n",
    "@app.callback(\n",
    "    Output('graph-content', 'figure'),\n",
    "    [Input('interval-component', 'n_intervals'),\n",
    "     Input('station-dropdown', 'value')]\n",
    ")\n",
    "\n",
    "\n",
    "def update_graph(n, value):\n",
    "    # 시간 데이터 생성 (최근 10개의 시간 단계)\n",
    "    current_time = datetime.now()\n",
    "    # 시간 데이터 생성 (최근 10개의 시간 단계)\n",
    "    time_data = [current_time - timedelta(hours=i) for i in range(10, 0, -1)]\n",
    "    # 사용자 정의 눈금 값과 레이블 생성 (시간만 표시)\n",
    "    tickvals = []\n",
    "    ticktext = []\n",
    "    for i, time in enumerate(time_data):\n",
    "        tickvals.append(time)\n",
    "        ticktext.append(time.strftime(\"%H:%M\"))  # 연도, 월, 일 제거\n",
    "        \n",
    "    # fig 객체 생성\n",
    "    fig = go.Figure()\n",
    "    fig.update_layout(\n",
    "        xaxis_title=\"Time\",\n",
    "        yaxis_title=\"PM2.5 Concentration (μg/m³)\"\n",
    "    )\n",
    "\n",
    "    # 연도, 월, 일을 상단 좌측에 표시 (예: 2023-08-21)\n",
    "    fig.add_annotation(\n",
    "        text=current_time.strftime(\"%Y-%m-%d\"),\n",
    "        xref=\"paper\",\n",
    "        yref=\"paper\",\n",
    "        x=0,  # 좌측 정렬\n",
    "        y=1,  # 상단 정렬\n",
    "        showarrow=False,\n",
    "        font=dict(size=14),\n",
    "      \n",
    "    )\n",
    "    \n",
    "    url = 'http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty'\n",
    "    service_key = 'xdBtiCkOLc9TIoPuquKxtR0n+Fk8awNT/qLlOCApNheoK+gweAWhIWzdUCttWKvi0xeI2bM3KCSduGfRhI922w=='\n",
    "\n",
    "\n",
    "    # 선택된 측정소에 대한 데이터 수집\n",
    "    params = {\n",
    "        'serviceKey': service_key,\n",
    "        'returnType': 'json',\n",
    "        'numOfRows': '10',\n",
    "        'pageNo': '1',\n",
    "        'stationName': value,\n",
    "        'dataTerm': 'DAILY',\n",
    "        'ver': '1.0'\n",
    "    }\n",
    "    response = requests.get(url, params=params)\n",
    "    json_object = json.loads(response.content)\n",
    "    \n",
    "    # 6개의 특성을 저장할 리스트\n",
    "    data = []\n",
    "    for item in json_object['response']['body']['items']:\n",
    "        values = [\n",
    "            float(item['pm10Value']) if item['pm10Value'] != \"-\" else None,\n",
    "            float(item['pm25Value']) if item['pm25Value'] != \"-\" else None,\n",
    "            float(item['o3Value']) if item['o3Value'] != \"-\" else None,\n",
    "            float(item['no2Value']) if item['no2Value'] != \"-\" else None,\n",
    "            float(item['coValue']) if item['coValue'] != \"-\" else None,\n",
    "            float(item['so2Value']) if item['so2Value'] != \"-\" else None\n",
    "        ]\n",
    "        data.append(values)\n",
    "\n",
    "    # 결측값 처리 및 numpy 배열로 변환\n",
    "    data = np.array(data)\n",
    "    data = preprocess_data(data)  # 호출 추가\n",
    "\n",
    "    # 최근 10개의 시간 단계만 사용\n",
    "    input_data = data[-10:]\n",
    "\n",
    "    # 형태 확인 및 모델에 입력할 수 있는 형태로 변환\n",
    "    input_data = input_data.reshape(1, 10, 6)\n",
    "    # 실제 값 준비 (예: 최근 10개의 pm25 값)\n",
    "    actual_data = data[-10:, 1]  # 두 번째 특성이 pm25 값이라고 가정\n",
    "    \n",
    "    # MLP 모델 예측\n",
    "    with graph_mlp.as_default():\n",
    "        with session_mlp.as_default():\n",
    "            mlp_pred = mlp_model.predict(input_data)\n",
    "\n",
    "    # LSTM 모델 예측\n",
    "    with graph_lstm.as_default():\n",
    "        with session_lstm.as_default():\n",
    "            lstm_pred = lstm_model.predict(input_data)\n",
    "\n",
    "    # GRU 모델 예측\n",
    "    with graph_gru.as_default():\n",
    "        with session_gru.as_default():\n",
    "            gru_pred = gru_model.predict(input_data)\n",
    "    # CNN 모델 예측\n",
    "    with graph_cnn.as_default():\n",
    "        with session_cnn.as_default():\n",
    "            cnn_pred = cnn_model.predict(input_data)\n",
    "\n",
    "    # SimpleRNN 모델 예측\n",
    "    with graph_simplernn.as_default():\n",
    "        with session_simplernn.as_default():\n",
    "            simplernn_pred = simplernn_model.predict(input_data)\n",
    "            \n",
    "\n",
    "    # 예측 결과에서 1시간 뒤의 값을 추출\n",
    "    mlp_1hour_pred = mlp_pred[0, -1]\n",
    "    lstm_1hour_pred = lstm_pred[0, -1]\n",
    "    gru_1hour_pred = gru_pred[0, -1]\n",
    "    cnn_1hour_pred = cnn_pred[0, -1]\n",
    "    simplernn_1hour_pred = simplernn_pred[0, -1]\n",
    "    \n",
    "\n",
    "    # RMSE 계산 수정\n",
    "    mlp_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [mlp_1hour_pred]))\n",
    "    lstm_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [lstm_1hour_pred]))\n",
    "    gru_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [gru_1hour_pred]))\n",
    "    cnn_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [cnn_1hour_pred]))\n",
    "    simplernn_rmse = np.sqrt(mean_squared_error([actual_data[-1]], [simplernn_1hour_pred]))\n",
    "    fig.update_layout(annotations=[])\n",
    "    # 모든 모델의 RMSE를 딕셔너리에 저장\n",
    "    rmse_dict = {\n",
    "        'MLP': mlp_rmse,\n",
    "        'LSTM': lstm_rmse,\n",
    "        'GRU': gru_rmse,\n",
    "        'CNN': cnn_rmse,\n",
    "        'SimpleRNN': simplernn_rmse\n",
    "    }\n",
    "\n",
    "    # 가장 낮은 RMSE를 가진 모델 찾기\n",
    "    min_rmse_model = min(rmse_dict, key=rmse_dict.get)\n",
    "    min_rmse_value = rmse_dict[min_rmse_model]\n",
    "\n",
    "    # 해당 모델의 예측값 찾기\n",
    "    pred_dict = {\n",
    "        'MLP': mlp_1hour_pred,\n",
    "        'LSTM': lstm_1hour_pred,\n",
    "        'GRU': gru_1hour_pred,\n",
    "        'CNN': cnn_1hour_pred,\n",
    "        'SimpleRNN': simplernn_1hour_pred\n",
    "    }\n",
    "    min_rmse_pred = pred_dict[min_rmse_model]\n",
    "\n",
    "    # 실제 데이터를 그래프에 추가 (점 위에 실제값 표시)\n",
    "    fig.add_trace(go.Scatter(x=time_data, \n",
    "                             y=actual_data, \n",
    "                             mode='markers+lines+text', \n",
    "                             name=f\"실제값 ({value})\", \n",
    "                             line=dict(color='rgb(30, 144, 255)'),  # Dodger Blue\n",
    "                             text=[f\"{val:.3f}\" for val in actual_data],\n",
    "                             textposition=\"top center\"))\n",
    "\n",
    "\n",
    "\n",
    "    # 최근 10개의 시간 단계만 사용\n",
    "    input_data = data[-10:]\n",
    "\n",
    "    # 형태 확인 및 모델에 입력할 수 있는 형태로 변환\n",
    "    input_data = input_data.reshape(1, 10, 6)\n",
    "    # 현재 시간부터 10시간 전까지의 시간 데이터 생성\n",
    "    time_data = [current_time - timedelta(hours=i) for i in range(10)]\n",
    "\n",
    "    # 현재 시간부터 10시간 전까지의 실제 값 준비\n",
    "    actual_data = data[-10:, 1]  # 두 번째 특성이 pm25 값이라고 가정\n",
    "    \n",
    "    # 마지막 실제 값\n",
    "    last_actual_value = actual_data[-1]\n",
    "    \n",
    "    # 실제 값의 선 색깔 정의\n",
    "    actual_line_color = 'rgb(30, 144, 255)'  # Dodger Blue\n",
    "\n",
    "    # 1시간, 2시간, 3시간 후 예측을 위한 빈 딕셔너리\n",
    "    future_hours = [1, 2, 3]  # 이 시간들에 대한 예측을 하려고 함\n",
    "    future_preds = {hour: {'value': None, 'rmse': None} for hour in future_hours}\n",
    "\n",
    "    # 미래 예측 데이터\n",
    "    for hour in future_hours:\n",
    "        input_data_future = data[-10:].copy()  # 마지막 10개의 데이터로 예측을 시작\n",
    "        for i in range(hour):\n",
    "            with graph_mlp.as_default():\n",
    "                with session_mlp.as_default():\n",
    "                    mlp_pred_future = mlp_model.predict(input_data_future.reshape(1, 10, 6))\n",
    "            last_pred = mlp_pred_future[0, -1]\n",
    "            input_data_future = np.roll(input_data_future, shift=-1, axis=0)\n",
    "            input_data_future[-1, 1] = last_pred  # PM2.5가 index 1에 있다고 가정\n",
    "\n",
    "        rmse_future = np.sqrt(mean_squared_error([actual_data[-1]], [last_pred]))\n",
    "        future_preds[hour]['value'] = last_pred\n",
    "        future_preds[hour]['rmse'] = rmse_future\n",
    "\n",
    "    # 미래 예측 데이터를 그래프에 추가\n",
    "    for hour, pred_info in future_preds.items():\n",
    "        pred = pred_info['value']\n",
    "        rmse = pred_info['rmse']\n",
    "        fig.add_trace(go.Scatter(x=[current_time + timedelta(hours=hour)], \n",
    "                                 y=[pred], \n",
    "                                 mode='markers+text', \n",
    "                                 name=f\"{min_rmse_model} {hour}-hour future prediction (RMSE: {rmse:.3f})\", \n",
    "                                 marker=dict(color='rgb(139, 0, 0)'),  # Dark Red\n",
    "                                 text=[f\"{pred:.3f}\"],\n",
    "                                 textposition=\"top center\"))    \n",
    "    \n",
    "    return fig\n",
    "\n",
    "# 앱 실행\n",
    "if __name__ == \"__main__\":\n",
    "    app.run_server(port=8008, host='0.0.0.0')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}