Создание простого веб-приложения для ваших моделей машинного обучения и многое другое: Flask, HTML и CSS.

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

О чем пойдет речь в этой статье:

Что такое Фласк?
Структура каталогов проекта Flask.
Запускаем фляжный сервер.
Маршрутизация с Flask
Работа с шаблонами и статическими файлами.
Обработка запросов: запросы GET и POST.
Получение данных из форм.
Отправка данных на фронтенд.
Перенаправление.
Заключение.

Что такое Фласк?

Flask — это бэкэнд-фреймворк Python для создания веб-приложений. Помимо Flask, вы, вероятно, слышали о Django и о том, насколько он мощен. ” в том смысле, что все, что вам действительно нужно, это средство для обмена данными/информацией между вашим фронтом и вашим бэкендом, плюс Flask намного проще в освоении, чем Django, следовательно, простого приложения flask будет достаточно, в противном случае вы можете использовать больше мощные рамки. Достаточно о том, почему вы должны использовать Flask, пора разобраться, как на самом деле использовать Flask.

# To download flask, type the commmand below into your terminal

pip install Flask

Структура каталога/папки проекта Flask.

На изображении выше рядом с разделом проводника в левом верхнем углу вы можете увидеть несколько подпапок, файл python и, наконец, код для базового приложения flask;

Статические: эта папка состоит из всех «статических» файлов. Это файлы, содержимое которых не меняется во время выполнения, т. е. CSS, javascript, изображение файлы и т. д. Необходимо хранить все статические файлы в статической папке, иначе они не будут обнаружены Flask.
Шаблоны. Эта папка содержит все файлы HTML для веб-приложения. Все файлы HTML, на которые есть ссылки в файле сервера, должны храниться здесь, поскольку файлы HTML, также известные как шаблоны, видны для Flask только тогда, когда они находятся внутри него.
app.py/wsgi.py:это основной файл сервера, который нужно поместить в корневой каталог/папку. Именно здесь находятся все ваши серверные функции, такие как; будут реализованы маршрутизация, десериализация моделей, предварительная обработка данных, ввод таких данных в модели, создание прогнозов и т. д.

Запускаем фляжный сервер

Чтобы запустить указанный выше сервер или любой сервер флажков, просто перейдите в корневой каталог веб-приложения (папка, содержащая все папки и файлы, связанные с веб-приложением) в терминале, введите "flask run" или >"python app.py" и нажмите Enter. В данном случае это python app.py, потому что app.py — это имя файла сервера, в вашем случае это может быть что угодно.py, однако при использовании любого имени, кроме "app.py" или «wsgi.py» в качестве имени файла сервера, «flask run»запустит не сервер, а «python app_name.py» будет работать . На данный момент сервер запущен и работает на порту flask по умолчанию 5000. Скопируйте и вставьте URL-адрес (http://127.0.0.1:5000/) из терминала в ваш браузер и выполните поиск или, что еще лучше, вы можете, удерживая нажатой клавишу Ctrl, щелкнуть ссылку в терминале, и он автоматически запустит ваш браузер и откроет URL-адрес.

Маршрутизация с Flask

Содержимое приведенной выше веб-страницы в настоящее время отображается после открытия ссылки в терминале без необходимости вносить какие-либо изменения в нее, потому что маршрут, указанный для функции, которая возвращает эту конкретную страницу, ("/ , который является базовым маршрутом, означающим, что после поиска базовой ссылки должна быть вызвана соответствующая функция, и в этом случае функция, запускаемая базовой ссылкой, возвращает "hello, world ». В случае, когда указан маршрут “/home”, после открытия базовой ссылки в браузере вам необходимо изменить ее так, чтобы она выглядела следующим образом: “http://127.0.0.1:5000/home»иначе вы получите ошибку «страница не найдена». Следует также отметить, что существует большая разница между “/home” и “/home/”. как маршрут. Последний маршрут/конечная точка вернет нужную страницу, если ссылка будет введена как http://127.0.0.1:5000/homeилиhttp://127.0.0.1:5000. /home/но первая версия “/home” будет работать, только если URL вводится как “http ://127.0.0.1:5000/home»без косой черты, это в основном то, как маршрутизация работает с flask.

Работа с шаблонами и статическими файлами.

Теперь вы знаете все эти базовые вещи, пришло время узнать еще кое-что интересное.

Шаблоны

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

Статический

В статической папке находятся статические файлы, то есть файлы, содержимое которых не меняется во время выполнения. Вы можете организовать свои файлы, такие как изображения, видео, файлы javascript и т. д., во вложенные папки внутри статической папки для простого и четкого доступа к ним при ссылке в любом месте.

Я буду передавать привет, мир! параграф в шаблон, а также создать базовую форму, которая будет использоваться для демонстрации отправки/получения данных. Чтобы получить доступ ко всему коду, нажмите здесь.

=======================================
HTML SNIPPET: INDEX.HTML PAGE TEMPLATE.
=======================================

<p>Hello, World!</p>
<p>Please Fill the form below</p>
<!-- Always make sure you specify the form method -->
<form method="post">
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="f-name" placeholder="First Name"><br><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="l-name" placeholder="Last name"><br><br>
            <input type="submit" value="Submit">
</form>

На изображении выше показано, как сейчас выглядит веб-страница. Обратите внимание, что URL-адрес этой страницы больше не является базовым URL-адресом, но теперь к нему прикреплено «/landing», поскольку маршрут/конечная точка теперь обновлены. В приведенном ниже коде показано, как отобразить приведенный выше шаблон.

=====================================
PYTHON CODE: RENDERING ABOVE TEMPLATE
=====================================

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/landing")
def hello_world():
        return render_template("index.html") # Rendering the appropriate html file for the endpoint. This template is stored inside the templates folder.

# what the code below does it to check if the server file is the main
# module/main python file, before running the server. That is to say,
# if this Flask server file/module is imported into another file,
# it will no longer be the main module as such when the file/module,
# it is imported into is called/run, the server will not start
# because the flask server module is a submodule to the new main module.
# Hope this is not confusing. If it is, you are free to ask questions in the
# comment section and I'll respond ASAP.
if __name__ == "__main__":
    app.run()

Обработка запросов: запросы GET и POST

Существует два основных типа запросов, которые можно отправить на сервер: запросы POST и GET. Запрос POST – это запрос, в котором внешний интерфейс пытается опубликовать/отправить данные на сервер/внутреннюю часть, в то время как GET request — это попытка сервера получить информацию от этого бэкенда. По умолчанию, без указания, все конечные точки в Flask способны обрабатывать запросы GET, поэтому целевая страница будет отображаться без каких-либо проблем, но как узнать тип запроса, который делает внешний интерфейс? к серверу во фляге? Для этого вам нужно импортировать request из flask.

====================================================
PYTHON CODE: FINDING OUT AND HANDLING REQUEST TYPES 
====================================================

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/landing", methods= ["POST", "GET"]) # Endpoint and request methods it will be handling/
def hello_world():
    if request.method == "GET": # Checks if the front end is trying to retreive info
        return render_template("index.html") # Rendering the appropriate template for the endpoint.
    elif request.method == "POST":
         # Here, you can then extract the information being sent from
         # the frontend, process it, feed it into your moel and store the
         # result in session data. You'll see session in the code under Redirecting.

Выше вы видите, что методы запроса, которые должна обрабатывать конечная точка, теперь указаны в декораторе маршрута: methods= ["POST", "GET"]. Приведенный выше код проверяет, пытается ли внешний интерфейс получить информацию, и если да, то отправляет информацию, которая в данном случае является шаблоном индекса для формы, но если он пытается опубликовать/отправить данные, сервер соберет ту информацию, которая была введена в форму. На этом этапе вы можете передать данные в свою модель машинного обучения после необходимой предварительной обработки. Подробнее о сохранении ваших моделей (сериализации) и их последующей загрузке (десериализации) вы можете прочитать здесь. Чтобы заполнить эту информацию в форме, вы используете функцию формы из класса запроса. Помните, что приведенная выше форма собирает имена и фамилии, поэтому сейчас я буду извлекать эту информацию и сохранять ее в переменных для обработки.

Получение данных из форм.

Получение текстовых данных из форм

Чтобы получить текстовые данные, отправленные на сервер из формы на передней панели, вы применяете функцию formиз request с get или форматом обычных квадратных скобок для словарей с именем, присвоенным информации, которую вы хотите получить из формы. Разница между методом get и обычным форматом квадратных скобок заключается в том, что get возвращает «Нет», если ключ не существует, в то время как метод обычной квадратной скобки вызовет KeyError, если ключ не существует, что нехорошо во время выполнения, если такое исключение не правильно обработано,вы можете попробовать сами и убедиться в этом.

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

Получение файловых данных из форм

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

=============================================================
HTML SNIPPET: ENCRYPTING FORM APPROPRIATELY FOR FILE UPLOAD
=============================================================
<form method="post" enctype="multipart/form-data">
            <input type="file" name="text-file" accept=".txt">
            <input type="submit" value="Submit">
</form>
==============================================
PYTHON SERVER CODE: EXTRACTING FILE FROM FORM
==============================================
from flask import Flask, request

@app.route("/landing", methods= ["POST", "GET"]) # Endpoint and request methods it will be handling/
def hello_world():

    if request.method == "GET": # Checks if the front end is trying to retreive info
        return render_template("index.html") # Rendering the appropriate html file for the endpoint.
    else:
        # === FOCUS HERE ====
        file = request.files["text-file"]
        file_content = file.read().strip()
    print(file_content)
# The code above will extract the file from the form, read it's content and
# Print it to terminal. You can collect all sorts of files and do whatever
# you wish with them.

Отправка данных на фронтенд.

Данные, отправляемые во внешний интерфейс, вводятся в render_template в качестве параметра сразу после отображаемого шаблона, как показано ниже:

=====================================================
PYTHON SERVER CODE: RETURNING INFORMATION TO FRONTEND
=====================================================
from flask import Flask, request

@app.route("/landing", methods= ["POST", "GET"]) # Endpoint and request methods it will be handling/
def hello_world():

    if request.method == "GET": # Checks if the front end is trying to retreive info
        return render_template("index.html") # Rendering the appropriate html file for the endpoint.
    else:
        file = request.files["text-file"]
        file_content = file.read().strip()
        # ==== FOCUS HERE ====
        # RETURNIG FILE CONTENT TO THE FRONTEND.
        return render_template("index.html", content = file_content)
        # You assign the content into a variable that it will be accessed
        # through on the frontend. You can post as many variables as you need to.
================================================================
HTML SNIPPET: SHOWING HOW TO DISPLAY DATA RETRIEVED FROM BACKEND
================================================================

<body>
    <h2>Th text content from uploaded file.</h2>
    <p>{{content}}</p>
</body>
<!--
Using the double curly bracket and placing the variable name in the
middle is how to access and display data retreived from the server.
-->

перенаправление

Чтобы выполнить перенаправление, вам необходимо импортировать redirect и url_for из flask. Redirect будет обрабатывать перенаправление, а url_forдинамически создаст URL-адрес для маршрута к функции, предоставленной ему в качестве параметра. Комбинация этих двух функций позволяет перенаправлять на страницы без проблем с URL. См. комбинацию redirectи url_forв действии ниже.

=====================================================
PYTHON SERVER CODE: RETURNING INFORMATION TO FRONTEND
=====================================================
from flask import Flask, request, render_template, redirect, url_for

session = {} # Dictionary that will contain session data.

@app.route("/landing", methods= ["POST", "GET"]) # Endpoint and request methods it will be handling/
def hello_world():

    if request.method == "GET": # Checks if the front end is trying to retreive info
        return render_template("index.html") # Rendering the appropriate html file for the endpoint.
    else:
        file = request.files["text-file"]
        file_content = file.read().strip()
        # STORING FILE CONTENT IN SESSION
        session["file_content"] = file_content
        # ==== FOCUS HERE ====
        # REDIRECTING TO THE URL OF THE "result_page" FUNCTION.
        return redirect(url_for("result_page"))
        # This will generage the url: http://127.0.0.1:5000/result


@app.route("/result")
def result_page():
    # Notice that the text is gotten from the session data dictionary above.
    text = session["file_content"]
    return render_template("result.html", content = text)

Заключение

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

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

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

Чтобы клонировать репозиторий и запустить код на вашем ПК для более личного восприятия, вот ссылка на репо.

На этом пока все, увидимся в следующий раз…