HTML에서 Python을 사용할 수 있는 PyScript (15)

250x250

관리 메뉴

😎 공부하는 징징알파카는 처음이지?

HTML에서 Python을 사용할 수 있는 PyScript (15) 본문

👩‍💻 백엔드(Back-End)/Node js

HTML에서 Python을 사용할 수 있는 PyScript (15)

징징알파카 2022. 11. 28. 15:04

728x90

<본 블로그는 itadventrue 님의 블로그를 참고해서 공부하며 작성하였습니다 :-)>

https://itadventure.tistory.com/558

파도(16) - 파이스크립트의 특좌앙~점으로 머신러닝!

🐳 '파도'는 크레이가 도전하고 있는 파이스크립트 도전기의 줄임말입니다. 지난 게시글에서 연재되는 글입니다. : https://itadventure.tistory.com/557 파도!(15) - 라쏘회귀와 4차방정식까지 🍿 '파도'는

itadventure.tistory.com

🍄 알고리즘 종류를 선택하는 웹 페이지

index.html

<html> 
    <head> 
      <title>다항회귀 + 라쏘 리그레션</title>
      <link rel="stylesheet" 
        href="https://pyscript.net/alpha/pyscript.css" /> 
      <script defer 
        src="https://pyscript.net/alpha/pyscript.js"></script> 

<py-env>
  - pandas
  - matplotlib
  - seaborn
  - scikit-learn
  - paths :
    - ./common.py
</py-env>
    </head>
    
  <body> 
    <link rel="stylesheet" href="pytable.css"/>

    알고리즘 선택 :
    <select id="algorithm">
      <option value="">알고리즘을 선택하세요</option>
      <option value="ridge_value">릿지 회귀 (Ridge Regression)</option>
      <option value="lasso_value">라쏘 회귀 (Lasso Regression)</option>
    </select><br/>
    알파값 선택 : 
    <select id="alpha_value">
       <option value="0.001">0.001</option>
       <option value="0.01">0.01</option>
       <option value="0.1">0.1</option>
       <option value="1">1</option>
       <option value="10">10</option>
       <option value="100">100</option>
    </select><br/>
    훈련점수 : <span id="train_score" style=''></span><br/>
    테스트점수 : <span id="test_score" style=''></span><br/>
    
    <div id="graph"></div>

<py-script>
import pandas as pd
from pyodide.http import open_url
from common import *
import numpy as np
from datetime import datetime

<!-- 경고 문구 제거 -->
import warnings
warnings.filterwarnings( 'ignore' )

<!-- 판다스에서 csv 를 데이터 프레임으로 읽어옴 -->
SalesData = pd.read_csv(open_url(
"http://dreamplan7.cafe24.com/pyscript/csv/avocado.csv"
))      

<!-- # 3개 필드만 추려서 데이터 프레임을 다시 만듬 -->
SalesData = SalesData[[
  'Date', 
  'Total Volume',
  'AveragePrice'
]]   
SalesData.columns = [
  'Day', 
  'Amount',
  'AveragePrice'
]

print(SalesData)
<!-- 날짜별로 ( 주 단위로 ) 그룹을 지을 때도 매출량은 그룹단위로 합산하여 합계 -->
WeekdaysSales_sum = SalesData.fillna(0) \
.groupby('Day', as_index=False)[['Amount']].sum() \
.sort_values(by='Day', ascending=True)

WeekdaysSales_mean = SalesData.fillna(0) \
.groupby('Day', as_index=False)[['AveragePrice']].mean() \
.sort_values(by='Day', ascending=True)
<!-- 2개의 데이터 프레임을 하나로 merge  (on에 기재된 '날짜'를 기준) -->
WeekdaysSalesData = pd.merge(WeekdaysSales_sum, WeekdaysSales_mean, on = 'Day')
<!-- 날짜(시간값) 추가 -->
WeekdaysSalesData.insert(1, 'Day(timeValue)',
    '',   True)
for i in WeekdaysSalesData['Day'].index:
  WeekdaysSalesData['Day(timeValue)'].loc[i]=time.mktime(
  datetime.strptime(
    WeekdaysSalesData['Day'].loc[i], 
    '%Y-%m-%d'
    ).timetuple()
  )
<!-- 10000으로 나눈 매출량 필드 추가 -->
WeekdaysSalesData.insert(3, 'Amount(10000)', 
WeekdaysSalesData['Amount']/10000, 
  True)
<!-- 훈련학습용으로 날짜를 연도, 월, 일로 나눈다 -->
WeekdaysSalesData.insert(4, 'year', '', True)
WeekdaysSalesData.insert(5, 'month', '', True)
WeekdaysSalesData.insert(6, 'day', '', True)
WeekdaysSalesData.insert(7, 'week', '', True)
for i in WeekdaysSalesData['Day'].index:
  temp = str(WeekdaysSalesData['Day'].loc[i]).split('-')
  year = int(temp[0])
  month = int(temp[1])
  day = int(temp[2])
  WeekdaysSalesData['year'].loc[i] = year
  WeekdaysSalesData['month'].loc[i] = month
  WeekdaysSalesData['day'].loc[i] = day
  WeekdaysSalesData['week'].loc[i] = str(
    datetime(year, month, day).isocalendar()[1]
  )
createElementDiv(
  document, 
  Element, 
  'output2'
).write(WeekdaysSalesData)
WeekdaysSalesDataTrain_numpy = WeekdaysSalesData[['Day(timeValue)', 'year', 'month', 'day', 'week', 'AveragePrice']].to_numpy()
WeekdaysSalesDataTest_numpy = WeekdaysSalesData['Amount(10000)'].to_numpy()
WeekdaysSalesDataDay_numpy = WeekdaysSalesData['Day'].to_numpy()
from sklearn.model_selection import train_test_split
X_train, X_test, y_train, y_test = \
  train_test_split(
    WeekdaysSalesDataTrain_numpy, 
    WeekdaysSalesDataTest_numpy,
    random_state=100,
    shuffle=False)
<!-- PolynomialFeatures ( 폴리노미얼 피쳐 ), 다항특성 모듈 -->
<!-- 제곱이나 곱하기할 수 있는 경우의 수가 모두 나열 -->
from sklearn.preprocessing import PolynomialFeatures
polynomial = PolynomialFeatures(degree=4, include_bias=False) # 절편 속성은 제거
polynomial.fit(X_train) # 특성을 다항으로 자동으로 불림

train_polynomial_added = polynomial.transform(X_train) # 학습에 추가된 파라미터에 맞게 다항 변환
test_polynomial_added = polynomial.transform(X_test) # 테스트 세트도 다항 변환, fit했던 훈련 poly 를 사용.

<!-- 스케일화는 '데이터를 안정화' -->
from sklearn.preprocessing import StandardScaler
scaler = StandardScaler()
scaler.fit(train_polynomial_added)
train_polynomial_added = scaler.transform(train_polynomial_added)
test_polynomial_added = scaler.transform(test_polynomial_added)
from sklearn.linear_model import Ridge
from sklearn.linear_model import Lasso

import matplotlib.pyplot as plt
import matplotlib as mat
<!-- 자바스크립트와 통신 -->
from js import document
from pyodide import create_proxy

def graph_func(event):
    def_algorithm = document.getElementById("algorithm").value
    def_alpha_value = float(document.getElementById("alpha_value").value)

    if def_algorithm=='ridge_value':
      <!-- ===================================== -->
      <!-- 릿지모델 -->
      ridge_model = Ridge(alpha=def_alpha_value)
      ridge_model.fit(train_polynomial_added, y_train)
      <!-- 훈련과정에 대한 척도를 평가 -> score()  -->
      print("릿지 훈련용모델 정확도")
      ridge_train_score = ridge_model.score(train_polynomial_added, y_train)
      print("릿지 테스트모델 정확도")
      ridge_test_score = ridge_model.score(test_polynomial_added, y_test)
      document.getElementById("train_score").innerHTML = ridge_train_score
      document.getElementById("test_score").innerHTML = ridge_test_score

      <!-- 스케일화된 데이터를 바탕으로 예측결과 -->
      y_train_predict = ridge_model.predict(train_polynomial_added)
      y_test_predict = ridge_model.predict(test_polynomial_added)

    else :
      <!-- ===================================== -->
      <!-- 라쏘모델 -->
      lasso_model = Lasso(alpha=def_alpha_value)
      lasso_model.fit(train_polynomial_added, y_train)
      <!-- 훈련과정에 대한 척도를 평가 -> score()  -->
      print("라쏘 훈련용모델 정확도")
      lasso_train_score = lasso_model.score(train_polynomial_added, y_train)
      print("라쏘 테스트모델 정확도")
      lasso_train_score = lasso_model.score(test_polynomial_added, y_test)
      <!-- 스케일화된 데이터를 바탕으로 예측결과 -->
      y_train_predict = lasso_model.predict(train_polynomial_added)
      y_test_predict = lasso_model.predict(test_polynomial_added)
    <!-- 그래프 -->
    fig = plt.figure(
    figsize=(15, 7)
    )
    <!-- 주위 이상한 여백 없애기 -->
    fig.tight_layout()
    plt.xticks(
      WeekdaysSalesDataTrain_numpy[:, 0],
      WeekdaysSalesDataDay_numpy, 
      rotation=90)
    plt.title('Weekdays Avocado SalesAmount ( + algorithm )')
    <!-- 원본 -->
    plt.plot(        
        X_train[:,0],
        y_train,
        #marker='o',
        color='gray',
        label='Original'
    )
    plt.plot(        
        X_test[:,0],
        y_test,
        #marker='o',
        color='gray'
    )

    <!-- 훈련 -->
    plt.plot(        
        X_train[:,0],
        y_train_predict,
        marker='d',
        color='blue',
        label='Train pattern'
    )
    <!-- 예측 -->
    plt.plot(        
        X_test[:,0],
        y_test_predict,
        marker='*',
        color='green',
        label='Predict pattern'
    )
    plt.legend(
      shadow=True
    )
    plt.xticks(
      WeekdaysSalesDataTrain_numpy[:, 0],
      WeekdaysSalesDataDay_numpy, 
      rotation=90)
    plt.xlabel('Day')
    plt.ylabel('Amount(10000)')
    ax = plt.gca()
    <!-- 축만 그리드 -->
    ax.xaxis.grid(True)
    <!-- 배경색, 마진 조정 -->
    ax.set_facecolor('#e8e7d2')
    ax.margins(x=0.01, y=0.02)
    pyscript.write("graph", fig)

e1 = document.getElementById("algorithm")
e1.addEventListener("change", create_proxy(graph_func))  
    
e2 = document.getElementById("alpha_value")
e2.addEventListener("change", create_proxy(graph_func))  
</py-script> 
  </body> 
</html>

common.py

def createElementDiv(document, Element, name):
    element = document.createElement('div')
    element.id = name
    document.body.append(element)
    return Element(name)

728x90

저작자표시

'👩‍💻 백엔드(Back-End) > Node js' 카테고리의 다른 글

다시 도전.. Flask GET 사용해보기 (6) (0)	2022.12.01
다시 도전.. Flask CSV 불러와서 HTML에 표로 시각화하기(4) (0)	2022.11.30
HTML에서 Python을 사용할 수 있는 PyScript (14) (0)	2022.11.28
HTML에서 Python을 사용할 수 있는 PyScript (13) (1)	2022.11.28
HTML에서 Python을 사용할 수 있는 PyScript (12) (0)	2022.11.28

'👩‍💻 백엔드(Back-End)/Node js' Related Articles

Comments

😎 공부하는 징징알파카는 처음이지?

HTML에서 Python을 사용할 수 있는 PyScript (15) 본문

HTML에서 Python을 사용할 수 있는 PyScript (15)

🍄 알고리즘 종류를 선택하는 웹 페이지

'👩‍💻 백엔드(Back-End) > Node js' 카테고리의 다른 글

티스토리툴바