构建 web 应用的新途径：告别 javascript，拥抱 fasthtml！
创建新应用或服务时，往往需要掌握多种工具和框架。Python 开发者通常需要学习 HTML、CSS 和 JavaScript 来构建 Web 应用，这无疑增加了学习曲线。而 Web 开发者则可能发现许多 Python 后端工具在 JavaScript 中的对应版本已过时。 您是否也面临着在 JavaScript 和 Python 之间难以抉择的困境？
FastHTML 应运而生，它填补了 Python 和 Web 开发之间的鸿沟。对于 Python 开发者，它简化了 Web 应用的创建过程——无需 JavaScript！对于 Web 开发者，它则提供了一种快速、简便的构建 Python 应用的方法，并可以选择使用 JavaScript 进行扩展，避免技术锁定。
作为一名 Web 开发者，我一直寻求更便捷的 Python 开发方式。因此，我决定尝试 FastHTML 的图像生成教程，并将其部署到 Heroku，亲身体验其速度和效率。
FastHTML 简介
立即学习“前端免费学习笔记（深入）”；
从未听说过 FastHTML？它被定义为：
FastHTML 是一个新一代 Web 框架，它通过简洁高效的代码，实现快速、可扩展的 Web 应用。其设计目标是：
- 功能强大，足以构建各种复杂的交互式 Web 应用。
- 快速轻量，减少代码量，提高开发效率。
- 易于学习和使用，语法简洁直观，快速构建复杂应用。
FastHTML 致力于构建轻量级、快速响应的 Web 应用。许多 Web 应用过于臃肿，简单的任务也需要大量的处理能力和带宽。而 FastHTML 旨在简化这一过程，让开发者轻松创建简洁、美观且易于使用的应用。
FastHTML 的设计理念受到 FastAPI 的启发，FastAPI 简化了 Python API 的创建，而 FastHTML 则致力于为前端应用提供同样的便利。
对简洁性和易用性的关注
FastHTML 的目标是“成为创建快速原型和可扩展、强大、丰富应用的最简单方法”。作为一个开发工具，FastHTML 注重简洁性和易用性，同时又不限制未来的扩展性。
它通过选择 ASGI 和 HTMX 等核心技术来实现快速启动和运行，并提升用户体验。FastHTML 的基础页面介绍了这些技术，但即使您不了解这些技术，也能轻松上手。
快速启动与运行
FastHTML 教程提供了多个不同应用示例。我选择了图像生成应用教程，并尝试将其转化为一个可用的 Web 应用。结果令人惊叹，速度非常快！
不到 60 行代码，我就创建了一个功能齐全的 Web 应用，用户可以输入提示并从免费的 Pollinations 文本到图像模型接收图像。
以下是该应用的演示：
通过这个教程，我了解了 FastHTML 的一些强大功能，例如：
- 通过表单提交数据
- 与外部 API 交互
- 显示加载文本
令人印象深刻的是，仅使用一个小的 Python 文件就完成了所有这些功能，最终的应用轻量级且界面美观。以下是我的最终代码：
from fastcore.parallel import threaded
from fasthtml.common import *
import os, uvicorn, requests, replicate
from pil import image
app = fasthtml(hdrs=(picolink,))
# store our generations
generations = []
folder = f"gens/"
os.makedirs(folder, exist_ok=True)
# main page
@app.get("/")
def home():
inp = input(id="new-prompt", name="prompt", placeholder="enter a prompt")
add = form(group(inp, button("generate")), hx_post="/", target_id='gen-list', hx_swap="afterbegin")
gen_list = div(id='gen-list')
return title('image generation demo'), main(h1('magic image generation'), add, gen_list, cls='container')
# a pending preview keeps polling this route until we return the image preview
def generation_preview(id):
if os.path.exists(f"gens/{id}.png"):
return div(img(src=f"/gens/{id}.png"), id=f'gen-{id}')
else:
return div("generating...", id=f'gen-{id}',
hx_post=f"/generations/{id}",
hx_trigger='every 1s', hx_swap='outerhtml')
@app.post("/generations/{id}")
def get(id:int): return generation_preview(id)
# for images, css, etc.
@app.get("/{fname:path}.{ext:static}")
def static(fname:str, ext:str): return fileresponse(f'{fname}.{ext}')
# generation route
@app.post("/")
def post(prompt:str):
id = len(generations)
generate_and_save(prompt, id)
generations.append(prompt)
clear_input = input(id="new-prompt", name="prompt", placeholder="enter a prompt", hx_swap_oob='true')
return generation_preview(id), clear_input
# url (for image generation)
def get_url(prompt):
return f"https://image.pollinations.ai/prompt/{prompt.replace(' ', '%20')}?model=flux&width=1024&height=1024&seed=42&nologo=true&enhance=true"
@threaded
def generate_and_save(prompt, id):
full_url = get_url(prompt)
image.open(requests.get(full_url, stream=True).raw).save(f"{folder}/{id}.png")
return True
if __name__ == '__main__': uvicorn.run("app:app", host='0.0.0.0', port=int(os.getenv("port", default=5000)))
教程还介绍了如何添加 CSS 样式、用户会话，甚至使用 Stripe 进行支付跟踪。虽然我没有全部尝试，但其潜力已显而易见：无需大量的样板代码或同时使用 Python 和 JavaScript，即可实现丰富的功能和良好的用户体验。
快速部署到 Heroku
本地运行的 Python 应用需要部署到云端才能被访问。Heroku 简化了这一过程。我添加了一个名为 Procfile 的文件，其中只有一行：
web: python app.py
这个文件告诉 Heroku 如何运行应用。Procfile 就绪后，我使用 Heroku CLI 创建并部署了我的应用。整个过程非常快速，从零到部署不到 45 秒。
只需两个命令，我就创建、构建并部署了我的应用。最终结果令人满意：
结论
发现 FastHTML 之后，我看到了构建应用的新可能性。其简洁性让我想到，未来可以尝试将它与其他工具集成，以提高开发效率。选择合适的工具是编程的关键。
FastHTML 为我打开了基于 Python 的应用开发的大门，而 Heroku 则简化了应用的部署过程。虽然 FastHTML 的一些基础概念对我来说比较新颖，但我期待在未来更深入地学习和使用它。
希望您也能享受 FastHTML 和 Heroku 带来的便利！祝您编程愉快！
