ロードマップ4: Djangoで作る競馬予想AIモデル分析ソフト part6

from django.db.models.query import QuerySet
from model_analyzer.main_viewer.analyze_viewer.base_analyzer_dto import (
    ModelListProp, BetDataItem, ModelInfoMap, DataTableItem, DataMap, TableItem, GraphJsonMap, JsonItem)
from model_analyzer.models import ModelList
import pandas as pd
import gviz_api
from app_keiba.settings import TEMPLATES
import datetime
import warnings
from pandas.errors import SettingWithCopyWarning

warnings.simplefilter(action="ignore", category=SettingWithCopyWarning)


class ProfitLossManager:
    def __init__(self, targetModelMap: list[ModelInfoMap], baseModelMap: ModelInfoMap) -> None:
        self.targetModelMap = targetModelMap
        self.baseModelMap = baseModelMap
        self.description_temp = {"raceDate": ("date", "raceDate")}

    def generate_pl_graph_json(self) -> GraphJsonMap:
        graphDataMap = self.generate_pl_graph_data()
        graphJsonMap = GraphJsonMap()

        target_map_list: list[BetDataItem] = graphDataMap["target"]
        base_map: BetDataItem = graphDataMap["base"]
        for bet in graphJsonMap.__dict__.keys():
            for target_map in [base_map]+target_map_list:
                target_bet_map: DataTableItem = target_map.__dict__[bet]
                for mode in ["train", "valid", "test"]:
                    target_bet_mode_map: dict[
                        str, TableItem] = target_bet_map.__dict__[mode]
                    if target_bet_mode_map is None:
                        continue
                    graph_item_dict: dict[int, JsonItem] = graphJsonMap.__dict__[
                        bet].__dict__[mode]
                    for year, target_item in target_bet_mode_map.items():
                        if year not in graph_item_dict:
                            jsonItem = JsonItem()
                            jsonItem.description |= self.description_temp.copy()
                            jsonItem.description |= target_item.description
                            jsonItem.data += [target_item.data]
                            graph_item_dict[year] = jsonItem
                        else:
                            graph_item_dict[year].description |= target_item.description
                            graph_item_dict[year].data += [target_item.data]

            for mode in ["train", "valid", "test"]:
                graph_item_dict: dict[
                    int, JsonItem] = graphJsonMap.__dict__[bet].__dict__[mode]
                if graph_item_dict is None:
                    continue
                for year, target_item in graph_item_dict.items():
                    target_item.data = pd.concat(
                        target_item.data, axis=1).reset_index().to_dict(orient="records")

                    data_table = gviz_api.DataTable(target_item.description)
                    data_table.LoadData(target_item.data)

                    columns_order = list(target_item.description.keys())
                    target_item.json = data_table.ToJSon(
                        columns_order=columns_order, order_by=columns_order[0])

        return graphJsonMap

    def generate_pl_graph_data(self) -> dict[str, BetDataItem | list[BetDataItem] | None]:

        graphDataMap: dict[str, BetDataItem | list[BetDataItem] | None] = {
            "target": [], "base": None}

        for tmMap in self.targetModelMap:
            graphDataMap["target"] += [self.create_betdata_item(tmMap)]

        graphDataMap["base"] = self.create_betdata_item(
            self.baseModelMap, True)
        return graphDataMap

    def create_betdata_item(self, tempMap: ModelInfoMap | None, base: bool = False) -> BetDataItem | None:
        if tempMap is None:
            return tempMap
        betdataitem = BetDataItem(
            tempMap.meta.model_id, tempMap.meta.model_name)
        for bet, dataMap in tempMap.betData.__dict__.items():
            if dataMap is None:
                continue
            dataitem: DataTableItem = self.create_datatable_item(
                bet, dataMap, tempMap, base)
            betdataitem.__dict__[bet] = dataitem

        return betdataitem

    def create_datatable_item(
        self,
        bet: str,
        dataMap: DataMap,
        tempMap: ModelInfoMap,
        base: bool = False
    ) -> DataTableItem:
        if bet not in tempMap.meta.pl_column_map:
            return DataTableItem()
        pl_col = tempMap.meta.pl_column_map[bet]
        pl_label = "base_" + tempMap.meta.model_id if base else tempMap.meta.model_id
        raceId_col = "base_" + \
            f"{tempMap.meta.model_id}_raceId" if base else f"{tempMap.meta.model_id}_raceId"
        bet_col = tempMap.meta.bet_columns_map[bet]

        dfv: pd.DataFrame = dataMap.valid.rename(
            columns={pl_col: pl_label, "raceId": raceId_col})
        dft: pd.DataFrame = dataMap.test.rename(
            columns={pl_col: pl_label, "raceId": raceId_col})
        dfv = dfv[dfv[bet_col].isin([1])]
        dft = dft[dft[bet_col].isin([1])]

        # dfv["year"] = dfv["raceDate"].astype("datetime64[ns]").apply(
        #     lambda d: f"{d.year}" + "f" if d.month < 7 else f"{d.year}" + "s")
        # dft["year"] = dft["raceDate"].astype("datetime64[ns]").apply(
        #     lambda d: f"{d.year}" + "f" if d.month < 7 else f"{d.year}" + "s")
        dfv["year"] = dfv["raceDate"].astype(
            "datetime64[ns]").dt.year.astype(str)
        dft["year"] = dft["raceDate"].astype(
            "datetime64[ns]").dt.year.astype(str)

        dfv["raceDate"] = dfv["raceDate"].astype("datetime64[ns]") + dfv[raceId_col].astype(
            str).str[-4:].apply(lambda d: datetime.timedelta(minutes=int(d)))
        dft["raceDate"] = dft["raceDate"].astype("datetime64[ns]") + dft[raceId_col].astype(
            str).str[-4:].apply(lambda d: datetime.timedelta(minutes=int(d)))

        target_columns = [pl_label, raceId_col]
        dataitem = DataTableItem()
        dataitem.valid = self.create_data_map(dfv, target_columns)
        dataitem.test = self.create_data_map(dft, target_columns)

        return dataitem

    def create_data_map(
        self,
        idf: pd.DataFrame,
        target_columns: list[str],
    ) -> dict[str, TableItem]:
        data_map = {}
        dfg = idf.set_index("raceDate").groupby('year')[target_columns]
        for year in idf["year"].unique():
            item = TableItem()
            item.description[target_columns[0]] = ("number", target_columns[0])
            item.description[target_columns[1]] = (
                "string", "raceId", {"role": "annotationText"})
            item.description[f"{target_columns[0]}_labelsText"] = (
                "string", "labelsText", {"role": "tooltip", "html": True})
            item.data = dfg.get_group(year)
            item.data.loc[:, target_columns[0] +
                          "_row"] = item.data[target_columns[0]].round().astype(int).copy()
            item.data.loc[:, target_columns[0]
                          ] = item.data[target_columns[0]].cumsum().round().astype(int)
            item.data.reset_index(inplace=True)
            item.data.loc[:, f"{target_columns[0]}_labelsText"] = item.data.apply(
                lambda row: f'<table class="m-1"><tr><th colspan="2">{str(row["raceDate"]).split()[0]}</th></tr>' +
                f'<tr><th>profit</th><td class="text-end">{row[target_columns[0]+"_row"]}円</td></tr>' +
                f'<tr><th>sum profit</th><td class="text-end">{int(row[target_columns[0]])}円</td></tr>' +
                f'<tr><th>modelId</th><td class="text-end">{target_columns[0]}</td></tr>' +
                f'<tr><th>raceId</th><td class="text-end">{row[target_columns[1]]}</td></tr></table>',
                axis=1
            )
            item.data = item.data.set_index(
                "raceDate")[target_columns+[f"{target_columns[0]}_labelsText"]]
            data_map[year] = item
        return data_map

# 以下を追加インポート
# (一部使わないものもあったような気がしますが、まだメンテできてないです。)
from model_analyzer.main_viewer.analyze_viewer.baseanalyzer_operator import ModelListController
from model_analyzer.main_viewer.analyze_viewer.base_analyzer_dto import (
    ModelListProp, BetDataItem, ModelInfoMap, DataTableItem, DataMap, TableItem)
from model_analyzer.tools.model_control.model_analyze_models import get_select_models, get_model_from_modelId
import pandas as pd
import pathlib

# startメソッドをオーバーライド
class BaseAnalyzeView(ModelAnalyzeView):
    # ここのメソッド追加
    def start(self, request: WSGIRequest):
        super().start(request)
        if "gchart" not in self.nav_params or self.nav_params["gchart"] is None:
            modelController = ModelListController(
                self.nav_params["model_query"], self.nav_params["base_model"])
            graphJsonData = modelController.generate_pl_graph_data()
            self.nav_params["gchart_all"] = graphJsonData.convert_for_django()
            # self.nav_params["gchart"] = self.nav_params[
            #     "gchart_all"][request.GET.get("bet")]
            self.nav_params["target_bet_columns"] = graphJsonData.get_bet_columns()
            self.nav_params["year_dict"] = {
                col: {"test": [], "valid": []} for col in graphJsonData.get_bet_columns()}
            for key, val in self.nav_params["year_dict"].items():
                for mode, v in val.items():
                    v += list(graphJsonData.__dict__[
                              key].__dict__[mode].keys())
    
    # getメソッドを修正
    def get(self, request: WSGIRequest):
        self.start(request)

        return render(
            request,
            'model_analyze/analyze_pages/base_analyze_page.html',
            self.nav_params
        )

from model_analyzer.models import ModelList
import pandas as pd
import pathlib


class GraphJsonMap:
    def __init__(self) -> None:
        self.tan: JsonTableItem = JsonTableItem()
        self.fuku: JsonTableItem = JsonTableItem()

    def get_bet_columns(self):
        return ["tan", "fuku"]

    def convert_for_django(self):
        return {
            bet: {
                mode: {
                    key: val.json
                    for key, val in self.__dict__[bet].__dict__[mode].items()
                }
                for mode in ["valid", "test"]
            }
            for bet in self.get_bet_columns()
        }


class JsonItem:
    def __init__(self) -> None:
        self.description: dict[str, object] = {}
        self.data: list[pd.DataFrame] = []
        self.json: str = None


class JsonTableItem:
    def __init__(self) -> None:
        self.train: dict[str, JsonItem] = {}
        self.valid: dict[str, JsonItem] = {}
        self.test: dict[str, JsonItem] = {}


class TableItem:
    def __init__(self) -> None:
        self.description: dict[str, object] = {}
        self.data: pd.DataFrame = None


class DataTableItem:
    def __init__(self) -> None:
        self.train: dict[str, TableItem] = {}
        self.valid: dict[str, TableItem] = {}
        self.test: dict[str, TableItem] = {}


class BetDataItem:
    def __init__(self, model_id: str, model_name: str) -> None:
        self.model_id = model_id
        self.model_name = model_name
        self.tan: DataTableItem = DataTableItem()
        self.fuku: DataTableItem = DataTableItem()


class ModelListProp:
    def __init__(self, modellist: ModelList) -> None:
        self.model_id = modellist.model_id
        self.model_name = modellist.model_name
        self.model_type = modellist.model_type
        self.model_dir = pathlib.Path(modellist.model_dir)
        self.model_analyze_dir = pathlib.Path(modellist.model_analyze_dir)
        self.model_predict_dir = pathlib.Path(modellist.model_predict_dir)

        self.bet_columns_map: dict[str, str] = modellist.bet_columns_map
        self.pl_column_map: dict[str, str] = modellist.pl_column_map
        self.rtn_hit_rate_file: dict[str, pathlib.Path] = {
            k: pathlib.Path(v) for k, v in modellist.return_hit_rate_file.items()}
        self.fav_bet_num_dir = {k: pathlib.Path(
            v) for k, v in modellist.fav_bet_num_dir.items()}
        self.pl_dir = {k: pathlib.Path(v)
                       for k, v in modellist.profit_loss_dir.items()}
        self.odds_graph_file = {k: pathlib.Path(
            v) for k, v in modellist.odds_graph_file.items()}
        self.motivate = modellist.motivate
        self.memo = modellist.memo


class DataMap:
    def __init__(self, train, valid, test) -> None:
        self.train: pd.DataFrame = train
        self.valid: pd.DataFrame = valid
        self.test: pd.DataFrame = test


class BetMap:
    def __init__(self) -> None:
        self.tan: DataMap = DataMap
        self.fuku: DataMap = DataMap


class ModelInfoMap:
    def __init__(self) -> None:
        self.betData: BetMap = BetMap()
        self.meta: ModelListProp = None

from django.core.handlers.wsgi import WSGIRequest
from django.db.models.query import QuerySet
from model_analyzer.models import ModelList
import pandas as pd
import pathlib
import gviz_api
from model_analyzer.main_viewer.analyze_viewer.base_analyzer_dto import (
    ModelListProp, BetDataItem, ModelInfoMap, DataTableItem, DataMap, TableItem, GraphJsonMap)
from model_analyzer.main_viewer.analyze_viewer.base_analyze_page.profit_loss_graph import ProfitLossManager


class ModelListController:
    def __init__(self, modelquery: QuerySet, basemodel: ModelList | None) -> None:
        self.model_set = [ModelListProp(modellist) for modellist in modelquery]
        self.basemodel = ModelListProp(basemodel)

    def generate_pl_graph_data(self) -> GraphJsonMap:
        targetModelMap, baseModelMap = self.load_data("pl_dir")
        profitLossManager = ProfitLossManager(targetModelMap, baseModelMap)
        return profitLossManager.generate_pl_graph_json()

    def load_data(self, target_prop: str) -> tuple[ModelInfoMap | list[ModelInfoMap] | None]:

        modelInfoMapList: list[ModelInfoMap] = []
        for model_prop in self.model_set:
            modelInfoMap = ModelInfoMap()
            for bet, dpath in model_prop.__dict__[target_prop].items():

                dfmap = {"train": None, "valid": None, "test": None}
                for fpath in dpath.glob("*.csv"):
                    dfmap[fpath.stem] = pd.read_csv(fpath)
                modelInfoMap.betData.__dict__[bet] = DataMap(**dfmap)
                modelInfoMap.meta = model_prop
            modelInfoMapList += [modelInfoMap]

        baseModelInfoMap = None
        if self.basemodel:
            baseModelInfoMap = ModelInfoMap()
            for bet, dpath in self.basemodel.__dict__[target_prop].items():
                dfmap = {"train": None, "valid": None, "test": None}
                for fpath in dpath.glob("*.csv"):
                    dfmap[fpath.stem] = pd.read_csv(fpath)
                baseModelInfoMap.betData.__dict__[bet] = DataMap(**dfmap)
                baseModelInfoMap.meta = self.basemodel

        return modelInfoMapList, baseModelInfoMap

# 以下の関数を追加
def get_model_from_modelId(model_id) -> ModelList:
    return ModelList.objects.filter(model_id=model_id).latest("regist_date")

#select-models {
    position: fixed;
    height: auto;
    min-width: 70%;
    max-width: 70%;
    left: 0%;
    z-index: 10;
    margin-top: 37px;
}

#select-models.SlideNormal {
    transform: translateX(-101%);
}

#select-models.SlideOut {
    animation: SlideOut 0.25s forwards;
}

@keyframes SlideOut {
    0% {
        transform: translateX(-1px);
    }

    100% {
        transform: translateX(-101%);
    }
}

#select-models.SlideIN {
    animation: SlideIN 0.25s forwards;
}

@keyframes SlideIN {
    0% {
        transform: translateX(-101%);
    }

    100% {
        transform: translateX(-1px);
    }
}

.in-shadow {
    box-shadow: inset 0 0 3px rgb(120, 120, 120, .75);
}

<script text="text/javascript">

  const setYearList = (yearlist) => {
    const yearElem = document.getElementById("selectYear");
    while (yearElem.firstChild) {
      yearElem.removeChild(yearElem.firstChild);
    }
    yearlist.forEach((year) => {
      const option = document.createElement('option');
      option.value = year;
      option.innerHTML = year;
      yearElem.appendChild(option);
    });
  }

  function listenGraphSelect(e) {

    selectedBet = null;
    betMode = document.getElementById("selectBetMode");
    Array.from(betMode.options).forEach(function (option) {
      if (option.selected) {
        selectedBet = option.innerHTML;
      }
    })
    selectedDataset = null;
    datasetMode = document.getElementById("selectDataSet");
    Array.from(datasetMode.options).forEach(function (option) {
      if (option.selected) {
        selectedDataset = option.innerHTML;
      }
    })

    {% autoescape off %}
    var year_dict = JSON.parse(JSON.stringify({{ year_dict }}));
  {% endautoescape %}
  if (selectedBet == "" || selectedDataset == "") {
    var yearlist = [];
  }
  else {
    var yearlist = year_dict[selectedBet][selectedDataset];
  }
  setYearList(yearlist);
  }

  const betElem = document.getElementById("selectBetMode");
  betElem.addEventListener("change", (e) => listenGraphSelect(e));

  const datasetElem = document.getElementById("selectDataSet");
  datasetElem.addEventListener("change", (e) => listenGraphSelect(e));


  const graphModeElem = document.getElementById("selectGraphMode");
  graphModeElem.addEventListener("change", (e) => {
    selectedYear = null;
    predFlag = true;
    nextFlag = true;

    yearMode = document.getElementById("selectYear");
    Array.from(yearMode.options).forEach(function (option, idx, array) {
      if (option.selected) {
        selectedYear = option.innerHTML;
        if (idx !== 0) {
          predFlag = false;
        }
        if (idx !== array.length - 1) {
          nextFlag = false;
        }
      }
    });

    const changeBtn = document.querySelector("#changeGraphBtn");
    if (selectedYear) {
      changeBtn.disabled = false;
    } else {
      changeBtn.disabled = true;
    }
    const predBtn = document.querySelector("#graphLeftBtn");
    predBtn.disabled = predFlag;
    const nextBtn = document.querySelector("#graphRightBtn");
    nextBtn.disabled = nextFlag;
  });
</script>

<script type="text/javascript">

  function changeChart(num = 0) {
    var targetIdx = changeSelectDatas(num);
    google.charts.load('current', { 'packages': ['corechart', 'annotationchart'] });
    google.charts.setOnLoadCallback(updateChart);
    setSelectDatas(targetIdx);

    function updateChart() {
      const slist = getSelectDatas();
      {% autoescape off %}
      let graph_data_obj = JSON.parse(JSON.stringify({{ gchart_all }}));

    let jscode_data = new google.visualization.DataTable(graph_data_obj[slist[0]][slist[1]][slist[2]]);
    {% endautoescape %}
    var options = {
      legend: { position: 'top' },
      hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
      // width: "90%",
      // height: "80%",
      backgroundColor: {
        fill: "transparent"
      },
      tooltip: { isHtml: true },
      chartArea: {
        width: '80%',
        height: '80%',
        top: 30
      },
    };
    const chart = new google.visualization.LineChart(document.getElementById('plGraphChart'));
    chart.draw(jscode_data, options);

    google.visualization.events.addListener(chart, 'select', selectHandler);
    function selectHandler(e) {
      console.log(chart.getSelection()[0]);
      const getPosition = chart.getSelection()[0];
      if (getPosition.row === null) {
        return
      }
      const raceId = chart.Z.Wf[getPosition.row].c[getPosition.column + 1].v;
      console.log(raceId);
      const race_url = `https://db.netkeiba.com/race/${raceId}/`;
      console.log(race_url);
      window.open(race_url, '_blank');

    }
  }

  }

  function getSelectDatas() {
    selectedList = [];
    for (let idname of ["selectBetMode", "selectDataSet", "selectYear"]) {
      mode = document.getElementById(idname);
      Array.from(mode.options).forEach(function (option) {
        if (option.selected) {
          selectedList.push(option.innerHTML);
        }
      });
    }
    return selectedList;
  }

  function changeSelectDatas(num) {
    if (num === 0) {
      return;
    }

    targetIdx = null;
    mode = document.getElementById("selectYear");
    const predBtn = document.querySelector("#graphLeftBtn");
    predBtn.disabled = true;
    const nextBtn = document.querySelector("#graphRightBtn");
    nextBtn.disabled = true;
    Array.from(mode.options).forEach(function (option, idx) {
      if (option.selected) {
        targetIdx = idx + num;
        option.selected = false;
      }
    });

    return targetIdx;
  }


  function setSelectDatas(targetIdx) {

    mode = document.getElementById("selectYear");
    Array.from(mode.options).forEach(function (option, idx, array) {
      if (idx === targetIdx) {
        option.selected = true;
        const predBtn = document.querySelector("#graphLeftBtn");
        predBtn.disabled = idx === 0;
        const nextBtn = document.querySelector("#graphRightBtn");
        nextBtn.disabled = idx === array.length - 1;
      }
    });
  }

</script>

{% extends "model_analyze/model_analyze.html" %}
{% load static %}

{% block ext-cssblock %}
{% endblock %}
{% block gCharts %}

{% endblock %}

{% block analyze-title %}
<h2 class="d-flex container justify-content-center">
  <span class="me-5 pt-4">
    モデルの基礎分析
  </span>
  <span class="me-5 ms-5"></span>
</h2>
{% endblock %}

{% block analyze-content %}
<div class="d-flex container-fluid flex-column border border-dark-subtle rounded pt-3 ps-4 mt-3 mb-5"
  style="width: 90%; height: 1800px;">
  <div class="row row-cols-lg-auto align-items-center justify-content-center" id="selectGraphMode">
    <div class="col">
      <button type="button" class="btn btn-outline-secondary" id="graphLeftBtn" disabled onclick="changeChart(-1)">
        <img src="/static/images/caret-left-square.svg">
        前へ
      </button>
    </div>
    <div class="col">
      <label for="selectBetMode" class="form-label">Select Bet Mode</label>
      <select class="form-select form-select-sm" aria-label="select bet mode" id="selectBetMode">
        {% for item in target_bet_columns %}
        <option value="{{item}}" {% if forloop.first %} selected{% endif %}>{{item}}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col">
      <label for="selectDataSet" class="form-label">Select Data Mode</label>
      <select class="form-select form-select-sm" aria-label="select dataset" id="selectDataSet">
        <option selected></option>
        <option value="test">test</option>
        <option value="valid">valid</option>
      </select>
    </div>
    <div class="col">
      <label for="selectYear" class="form-label">Select Year</label>
      <select class="form-select form-select-sm" aria-label="select year" id="selectYear" required>
        <option selected></option>
      </select>
    </div>
    <div class="col">
      <button id="changeGraphBtn" type="button" class="btn btn-primary" disabled onclick="changeChart()">描画</button>
    </div>
    <div class="col">
      <button type="button" class="btn btn-outline-secondary" id="graphRightBtn" disabled onclick="changeChart(1)">
        次へ
        <img src="/static/images/caret-right-square.svg">
      </button>
    </div>
  </div>
  <div class="row mt-3">
    <div class="fs-4 text-center fw-bold">
      収支グラフ
    </div>
  </div>
  <div class="row pe-2" style="height: 30%;">
    <div id="plGraphChart" class="border border-dark-subtle rounded"></div>
  </div>
  <div class="row">
    <div id="return_hit_rate"></div>
  </div>

</div>

{% endblock %}
{% block ext-jsblock %}
{% include 'model_analyze/analyze_pages/scripts/base_analyze/graph_controller.html' %}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
{% include 'model_analyze/analyze_pages/scripts/base_analyze/profit_loss.html' %}
{% endblock %}

{% extends "model_analyze/model_analyze.html" %}

{% block ext-cssblock %}
{% endblock %}
{% block gCharts %}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
{% endblock %}

{% block analyze-title %}
{% endblock %}

{% block analyze-content %}
<div class="row border border-dark-subtle rounded p-1 mt-3"></div>
{% endblock %}
{% block ext-jsblock %}
{% endblock %}

{% extends "model_analyze/model_analyze.html" %}

{% block ext-cssblock %}
{% endblock %}
{% block gCharts %}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
{% endblock %}

{% block analyze-title %}
{% endblock %}

{% block analyze-content %}
<div class="row border border-dark-subtle rounded p-1 mt-3"></div>
{% endblock %}
{% block ext-jsblock %}
{% endblock %}

{% extends "base_layout.html" %}

{% block cssblock %}
<link rel="stylesheet" href="/static/css/model_analyze/style.css">
{% block ext-cssblock %}
{% endblock %}
{% endblock %}

{% block content %}
<div class="d-flex flex-column w-100">
  <div class="col d-flex">
    {% include 'model_analyze/parts/select_models.html' %}
    {% include 'model_analyze/parts/offcanvas_analyze_list.html' %}
    {% block analyze-title %}{% endblock %}
  </div>
  <div class="col d-flex justify-content-center">
    {% block analyze-content %}
    {% endblock %}
  </div>
</div>
{% endblock %}

{% block jsblock %}
<script src="/static/js/model_analyze/sidebar_slide.js"></script>
<script src="/static/js/model_analyze/validate_form.js"></script>
<script src="/static/js/model_analyze/check_submit_mode.js"></script>

{% block ext-jsblock %}
{% endblock %}

{% endblock %}

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link rel="icon" type="image/x-icon" href="/static/images/favicon.png">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  {% block cssblock %}
  {% endblock %}
  {% block gCharts %}
  {% endblock %}
  <title>競馬予想ソフト</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
  <header>
    <nav class="navbar navbar-expand bg-body-secondary fixed-top" data-bs-theme="dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="/index.html">um-AI</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
          aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="/index.html">Home</a>
            </li>
            <li class="nav-item">
              {% if model_analyze %}
              <a class="nav-link active" href="/model-analyze">モデル分析</a>
              {% else %}
              <a class="nav-link disabled" href="/model-analyze" tabindex="-1" aria-disabled="true">モデル分析</a>
              {% endif %}
            </li>
            <li class="nav-item">
              {% if model_manage %}
              <a class="nav-link active" href="/model-manage">モデル管理</a>
              {% else %}
              <a class="nav-link disabled" href="/model-manage" tabindex="-1" aria-disabled="true">モデル管理</a>
              {% endif %}
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <div class="mt-3"></div>

  {% if messages %}
  <div class="container-fluid">
    <div class="notification is-info">
      {% for message in messages %}
      {% if message.tags != 'error' %}
      <div {% if message.tags %}class="alert alert-{{ message.tags }}" {% endif %} id="success-alert"
        style="font-size: small;">
        {% else %}
        <div {% if message.tags %}class="alert alert-danger" {% endif %} id="success-alert" style="font-size: small;">
          {% endif %}
          {{ message }}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}
  <main class="d-flex container-fluid h-100" style="margin-top: 66px;">
    {% block content %}
    <!-- ここに個別のhtmlが入る -->
    {% endblock %}
  </main>
  {% block jsblock %}
  {% endblock %}
  <script src="/static/js/base_layout/fade_popup.js"></script>
</body>

</html>