无需服务器：如何将Python脚本输出整合到HTML/CSS/JS前端？

方案1：Streamlit（快速可视化部署） #

• 无需自建服务器，Streamlit提供托管服务，能快速将Python脚本转为可访问的Web应用
• 操作步骤：
  1. 改造Python神经网络脚本，用Streamlit的API实现结果/图表展示，比如用st.pyplot()渲染图表
  2. 安装依赖：pip install streamlit
  3. 本地测试运行：streamlit run your_script.py
  4. 通过Streamlit的部署功能上线应用，生成公开访问链接
  5. 前端可通过iframe嵌入该链接，或直接引导用户访问，完成结果展示

方案2：WebAssembly（Wasm）—— 前端直接运行Python #

• 将Python脚本编译为Wasm，在浏览器内直接执行，完全脱离服务器依赖
• 常用工具：Pyodide，以下是极简实现示例：

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
  </head>
  <body>
    <div id="chart-display"></div>
    <script>
      async function executePython() {
        const pyodide = await loadPyodide();
        // 加载神经网络/图表所需依赖
        await pyodide.loadPackage(["numpy", "matplotlib"]);
        // 执行Python逻辑并获取图表的base64字符串
        const imgBase64 = await pyodide.runPythonAsync(`
          import numpy as np
          import matplotlib.pyplot as plt
          from io import BytesIO
          import base64

          # 替换为你的神经网络计算逻辑，这里用示例数据生成图表
          x = np.linspace(0, 15, 200)
          y = np.cos(x) + np.random.normal(0, 0.1, 200)
          
          plt.figure(figsize=(8, 4))
          plt.plot(x, y)
          plt.title("神经网络生成结果")

          # 将图表转为base64格式，方便前端展示
          buffer = BytesIO()
          plt.savefig(buffer, format="png")
          buffer.seek(0)
          base64.b64encode(buffer.read()).decode('utf-8')
        `);
        // 在页面中插入图表
        const imgElement = document.createElement("img");
        imgElement.src = `data:image/png;base64,${imgBase64}`;
        document.getElementById("chart-display").appendChild(imgElement);
      }
      executePython();
    </script>
  </body>
</html>

• 优势：纯前端运行，无外部服务依赖；局限：部分复杂Python库可能存在兼容性问题，首次加载速度稍慢

从简单需求入手的话，Streamlit更适合快速产出可访问的应用；若追求完全前端化的体验，Wasm方案更贴合你的场景。

内容的提问来源于stack exchange，提问作者userr554