"Как сделать сценарий машинного обучения и преобразовать его в приложение максимально простым, чтобы он в основном напоминал упражнение по написанию сценария?"

— Адриан Трей (изобретатель Streamlit)

Веб-приложения — отличный способ отобразить результаты для проекта по науке о данных или машинному обучению. Разработка веб-приложений с нуля требует много времени, усилий и технических навыков. Альтернативным способом создания веб-приложений является использование библиотек Python с открытым исходным кодом, таких как Streamlit.

Streamlit — это платформа Python с открытым исходным кодом, которая позволяет создавать красивые интерактивные веб-сайты для проектов Data Science и Machine Learning. Streamlit предоставляет функции для разработки и настройки веб-страниц, доступа к данным и их отображения, а также создания различных типов диаграмм и графиков. Вы можете создать и развернуть мощное веб-приложение за несколько минут.

Streamlit совместим и интегрируется со многими библиотеками Python, включая scikit-learn, Keras, PyTorch, NumPy и Pandas. Streamlit поддерживает отображение текста, данных, интерактивных виджетов и множество библиотек для создания диаграмм и графиков, включая Matplotlib, Vega-Lite и Plotly. Если вам нужна более подробная информация, перейдите по этой ссылке.

В этой статье мы создадим скрипт, который создаст веб-страницу, включая дизайн и настройку, отображение данных и визуализацию с использованием диаграмм и графиков. Следующие шаги будут выполняться с использованием фреймворков Python и Streamlit.

1. Установите пакеты.

2. Импортируйте библиотеки.

3. Импортируйте набор данных.

4. Дизайн и настройка веб-страницы.

5. Отобразите некоторые данные на веб-странице.

6. Визуализируйте данные о запасах.

Установите пакеты

Сначала нам нужно установить пакеты Streamlit и Tornado для разработки и запуска нашего приложения.

!pip install streamlit -q
!pip install tornado==5.1
  • Streamlit — это библиотека Python с открытым исходным кодом, которая позволяет легко создавать красивые настраиваемые веб-приложения для машинного обучения и обработки данных и делиться ими.
  • Tornado — это веб-фреймворк Python и асинхронная сетевая библиотека, которая использует неблокирующий сетевой ввод-вывод для обслуживания веб-приложений.

Импортировать библиотеки

import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import datetime

Импорт набора данных

Набор данных, который мы используем для этого приложения, был получен из Kaggle, и его можно найти по этой ссылке. Набор данных содержит биржевые данные корпорации Nvidia с 22.01.1999 по 12.11.2021. Мы загрузим этот файл в нашу локальную папку с файлами.

Мы разрабатываем в среде Google Colab, поэтому нам нужно загрузить файл, который мы только что скачали, в Colab.

from google.colab import files 
uploaded = files.upload()

Импортируйте набор данных в фрейм данных.

df = pd.read_csv('NVidia_stock_history.csv')

Для этого проекта мы рассмотрим данные только за последние три года с датами с 02.01.2019 по 12.11.2021. Мы удалим записи до 01.01.2019. Если вы хотите, вы можете просмотреть всю историю в наборе данных или подмножестве данных.

# Delete rows where date is before 1/1/2019.
df['Date'] = pd.to_datetime(df['Date'])
df = df[~(df['Date'] < '2019-01-01')]
df.head()

Давайте сбросим индекс на столбец Date.

# Reset the index to the Date column. 
df['Date'] = pd.to_datetime(df['Date'],format='%Y/%m/%d')
df.reset_index(drop=True,inplace=True)
df.set_index('Date',inplace=True)

Дизайн и настройка веб-страницы

Мы начнем с добавления заголовка и логотипа на веб-страницу.

# Specify the title and logo for the web page.
st.set_page_config(page_title='Nvidia Stock Prices', 
page_icon='https://cdn.freebiesupply.com/logos/thumbs/1x/nvidia-logo.png', layout="wide")

Давайте добавим ссылки на социальные сети в наш личный профиль на веб-странице.

# Add social media tags and links to the web page.
"""
[![Star](https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white)](https://medium.com/@dniggl)
[![Follow](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/dennisniggl)
[![Follow](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/DennisNiggl)

# Nvidia's Stock Performance

"""

Давайте добавим боковую панель на веб-страницу, чтобы отображать основную информацию о приложении.

# Add a sidebar to the web page. 
st.markdown('---')
# Sidebar Configuration
st.sidebar.image('https://cdn.freebiesupply.com/logos/thumbs/1x/nvidia-logo.png', width=200)
st.sidebar.markdown('# Nvidia Stock Price Analysis')
st.sidebar.markdown('Nvidia is a global leader in artificial intelligence hardware and software.')
st.sidebar.markdown('Stock Data from 2019 thru 2021')
st.sidebar.markdown('You can visualise Nvidia \'s Stock Prices Trends and Patterns over a given time span.') 

st.sidebar.markdown('---')
st.sidebar.write('Developed by Dennis Niggl')
st.sidebar.write('Contact at [email protected]')

Вышеупомянутые спецификации создадут следующую веб-страницу.

Отображать некоторые данные на веб-странице

Давайте посмотрим на данные и покажем некоторую статистическую информацию о данных.

# Display the Data in the App.
st.subheader('Looking at the Data')
st.dataframe(df.head())
# Display statistical information on the dataset.
st.subheader('Statistical Info about the Data')
st.write(df.describe())

Это создаст следующие элементы, отображаемые на веб-странице.

Теперь мы добавим фильтр, который даст пользователям возможность выбирать диапазон дат для данных, которые они хотят проанализировать. Это даст полезную информацию для разных временных рамок.

# Selection for a specific time frame.
st.subheader('Select a Date Range')
df_select = df 

col1, col2 = st.columns(2)

with col1:
    st.write('Select a Start Date')
    start_date = st.date_input('Start Date',min_value= datetime.date(2019,1,2),max_value=datetime.date(2021,11,12),value=datetime.date(2019,1,2))

with col2:    
    st.write('Select an End Date')
    end_date = st.date_input('End Date',min_value=datetime.date(1999,1,22),max_value=datetime.date(2021,11,12),value=datetime.date(2021,11,12))

if(start_date != None or end_date != None):
    if(start_date < end_date):
        df_select = df[start_date:end_date]
    else:
        st.warning("Invalid Date Range - Re-enter Dates")

Это создаст следующие элементы, отображаемые на веб-странице. В этом примере мы выбрали дату начала с 02.11.2020 по 12.11.2021.

Визуализация биржевых данных

На следующих графиках и диаграммах показана динамика цен на акции Nvidia с 02.11.2020 по 12.11.2021. Это будет включать цены открытия и закрытия, максимальные и минимальные цены, дневной объем торгов и скользящие средние цен открытия и закрытия.

# Open and Close Prices.  
st.subheader("Open & Close Prices for Nvidia Stock")
st.markdown("\n\n")
st.line_chart(df_select[['Open','Close']])

# High and Low Prices. 
st.subheader("High and Low Prices for Nvidia Stock")
st.markdown("\n\n")
st.line_chart(df_select[['High', 'Low']])

# Volume of Stock Traded. 
st.subheader("Volumn Traded for Nvidia Stock")
st.markdown("\n\n")
st.bar_chart(df_select['Volume'])

# Moving average from 50 days to 250 days.
st.subheader('Moving Averages of Open and Closing Stock Prices')
movevavg_len = st.slider('Select the number of days for Moving Averages',min_value=0,max_value=250,value=50)
moveavg_oc =  df_select[['Open','Close']].rolling(50).mean()
st.line_chart(moveavg_oc)

Теперь нам нужно объединить весь наш код, показанный выше, в файл (app.py) для потоковой обработки. Примечание: перед выполнением этого шага убедитесь, что пакеты Streamlit и Tornado установлены. Кроме того, если вы работаете в среде Google Colab, загрузите набор данных в Colab.

%%writefile app.py
# Import the libraries.
import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import datetime

# Specify title and logo for the webpage.
st.set_page_config(page_title='Nvidia Stock Prices', 
page_icon='https://cdn.freebiesupply.com/logos/thumbs/1x/nvidia-logo.png', layout="wide")

# Add social media tags and links to the web page.
"""
[![Star](https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white)](https://medium.com/@dniggl)
[![Follow](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/dennisniggl)
[![Follow](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/DennisNiggl)

# Nvidia's Stock Performance

"""

# Add a sidebar to the web page. 
st.markdown('---')
# Sidebar Configuration
st.sidebar.image('https://cdn.freebiesupply.com/logos/thumbs/1x/nvidia-logo.png', width=200)
st.sidebar.markdown('# Nvidia Stock Price Analysis')
st.sidebar.markdown('Nvidia is a global leader in artificial intelligence hardware and software.')
st.sidebar.markdown('Stock Data from 2019 thru 2021')
st.sidebar.markdown('You can visualise Nvidia \'s Stock Prices Trends and Patterns over a given time span.') 

st.sidebar.markdown('---')
st.sidebar.write('Developed by Dennis Niggl')
st.sidebar.write('Contact at [email protected]')

# Import the dataset into a dataframe. 
df = pd.read_csv('NVidia_stock_history.csv')

# Delete rows where date is before 1/1/2019.
df['Date'] = pd.to_datetime(df['Date'])
df = df[~(df['Date'] < '2019-01-01')]

# Reset the index to the Date column. 
df['Date'] = pd.to_datetime(df['Date'],format='%Y/%m/%d')
df.reset_index(drop=True,inplace=True)
df.set_index('Date',inplace=True)

# Display the Data in the App.
st.subheader('Looking at the Data')
st.dataframe(df.head())

# Display statistical information on the dataset.
st.subheader('Statistical Info about the Data')
st.write(df.describe())

# Selection for a specific time frame.
st.subheader('Select a Date Range')
df_select = df

col1, col2 = st.columns(2)

with col1:
    st.write('Select a Start Date')
    start_date = st.date_input('Start Date',min_value= datetime.date(2019,1,2),max_value=datetime.date(2021,11,12),value=datetime.date(2019,1,2))

with col2:    
    st.write('Select an End Date')
    end_date = st.date_input('End Date',min_value=datetime.date(1999,1,22),max_value=datetime.date(2021,11,12),value=datetime.date(2021,11,12))

if(start_date != None or end_date != None):
    if(start_date < end_date):
        df_select = df[start_date:end_date]
    else:
        st.warning("Invalid Date Range - Re-enter Dates")

# Graphs and charts for selected date range.

# Open & Close Prices.  
st.subheader("Open & Close Prices for Nvidia Stock")
st.markdown("\n\n")
st.line_chart(df_select[['Open','Close']])

# High and Low Values. 
st.subheader("High and Low Prices for Nvidia Stock")
st.markdown("\n\n")
st.line_chart(df_select[['High', 'Low']])

# Volume of Stock Traded.
st.subheader("Volumn Traded for Nvidia Stock")
st.markdown("\n\n")
st.bar_chart(df_select['Volume'])

# Moving average from 50 days to 250 days.
st.subheader('Moving Averages of Open and Closing Stock Prices')
movevavg_len = st.slider('Select the number of days for Moving Averages',min_value=0,max_value=250,value=50)
moveavg_oc =  df_select[['Open','Close']].rolling(50).mean()
st.line_chart(moveavg_oc)

Теперь мы запустим приложение Streamlit, которое будет обрабатывать файл, созданный на предыдущем шаге, используя локальный туннель. Локальный туннель предоставляет миру доступ к вашему локальному хосту для тестирования и совместного использования.

!streamlit run app.py & npx localtunnel --port 8501

После запуска приложения Streamlit вы увидите экран, показанный ниже. Вы можете просмотреть веб-страницу, которая была создана, нажав на ссылку URL.

После выбора URL-ссылки вы увидите экран, показанный ниже. Это информационное напоминание о необходимости проверки адреса веб-сайта в целях безопасности. На веб-странице также есть несколько вариантов обхода этой страницы. А пока просто нажмите кнопку «Нажмите, чтобы продолжить».

На вновь созданной веб-странице будут отображаться изображения экрана, показанные выше. Это включает в себя заголовок, логотип, теги социальных сетей, боковую панель, биржевые данные, статистику, выбор диапазона дат, а также графики и диаграммы.

Мы завершили разработку веб-приложения с использованием Python и фреймворков Streamlit! Вы можете бесплатно развернуть свое веб-приложение на облачной платформе Streamlit. Streamlit Cloud — это рабочее пространство для развертывания, управления и совместной работы с другими пользователями в приложении Streamlit. Вы развертываете свое приложение, настраивая облачную учетную запись Streamlit, добавляете свое приложение и зависимости в свою учетную запись Github и развертываете свое приложение из Github, указав репозиторий, ветку и путь к основному файлу. Вы можете найти более подробную информацию о развертывании, перейдя по этой ссылке.

Большое спасибо за прочтение моей статьи! Если у вас есть какие-либо комментарии или отзывы, пожалуйста, добавьте их ниже.

Вы можете разблокировать полный доступ к моим статьям и остальной части Medium, подписавшись на членство в Medium (5 долларов в месяц) по этой ссылке https://medium.com/@dniggl/membership. Зарегистрировавшись по этой ссылке, я получу часть вашего членского взноса без каких-либо дополнительных затрат для вас. Спасибо!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.