Adding a Checkbox & Download Button to a FastAPI-HTML app

eugeneyan

Start Here Writing Speaking Prototyping About

Добавляем чекбокс и кнопку скачивания в FastAPI-HTML приложение

[ engineering python til ] · 3 мин. чтения

В предыдущем посте я рассказывал, как создать простое HTML-приложение с помощью FastAPI. Здесь мы расширим это приложение, добавив функциональность чекбоксов и кнопки скачивания.

Попробуйте сами с помощью GitHub-репозитория: fastapi-html

Позволим пользователям изменять результаты

Для демонстрации мы создадим чекбокс, который умножает введённое число на два перед его преобразованием в текст.

Вот HTML-код для этого: мы добавляем новый input типа checkbox и его метку. Обратите внимание на параметры name (multiply_by_2) и value (True) — мы используем их далее в POST-запросе.

Мы обновим наш POST-запрос, добавив дополнительный параметр multiply_by_2 (из name). По умолчанию значение равно False, но если отметить чекбокс, мы получаем значение True (из value). Этот булев параметр передаётся в функцию spell_number, которая содержит основную логику.

@app.post('/checkbox') def form_post(request: Request, num: int = Form(...), multiply_by_2: bool = Form(False)): result = spell_number(num, multiply_by_2) return templates.TemplateResponse('checkbox.html', context={'request': request, 'result': result, 'num': num})

Вот результаты с отмеченной и неотмеченной опцией.

Результаты с включённой и выключенной опцией «Multiply by 2»

Позволим пользователям скачивать результаты

После просмотра результатов пользователь может захотеть их скачать. (В данном примере результат очень простой. Тем не менее реальное приложение может выдавать, например, CSV-файл с мошенническими покупками, PDF-отчёт или IPython-ноутбук.)

Для этого мы добавим кнопку скачивания. Обратите внимание, что теперь у нас два элемента input типа submit. Как обычно, мы будем использовать параметры name и value.

Мы обновим POST-запрос, добавив простую логику для возврата результата через HTML или скачивания файла. Обратите внимание, что для работы FileResponse необходимо установить пакет aiofiles.

@app.post('/download') def form_post(request: Request, num: int = Form(...), multiply_by_2: bool = Form(False), action: str = Form(...)): if action == 'convert': result = spell_number(num, multiply_by_2) return templates.TemplateResponse('download.html', context={'request': request, 'result': result, 'num': num}) elif action == 'download': # Requires aiofiles result = spell_number(num, multiply_by_2) filepath = save_to_text(result, num) return FileResponse(filepath, media_type='application/octet-stream', filename='{}.txt'.format(num))

Вот как выглядит скачанный файл. Он назван по введённому запросу — 1234.txt. Результат содержит введённое число, записанное словами (с возможным умножением на два).

Скачанный файл (1234.txt) и результат (с опцией «Multiply by 2»)

Попробуйте сами с помощью GitHub-репозитория: fastapi-html

Далее мы обновляем наше FastAPI-приложение, чтобы пользователи могли:• Выбирать опции через чекбокс• Скачивать результаты через кнопку загрузки https://t.co/jFUmiMaud4— Eugene Yan (@eugeneyan) August 7, 2020

Если этот материал оказался полезным, пожалуйста, цитируйте его следующим образом:

Yan, Ziyou. (Aug 2020). Adding a Checkbox & Download Button to a FastAPI-HTML app. eugeneyan.com. https://eugeneyan.com/writing/fastapi-html-checkbox-download/.

или

@article{yan2020fastapi2, title = {Adding a Checkbox & Download Button to a FastAPI-HTML app}, author = {Yan, Ziyou}, journal = {eugeneyan.com}, year = {2020}, month = {Aug}, url = {https://eugeneyan.com/writing/fastapi-html-checkbox-download/} }

Присоединяйтесь к 11 800+ читателям, получающим обновления о машинном обучении, RecSys, LLM и инженерии.