当前位置：首页 > news >正文

《AI大模型趣味实战》构建基于Flask和Ollama的AI助手聊天网站：分布式架构与ngrok内网穿透实现

news 来源：原创 2025/6/22 1:09:21

构建基于Flask和Ollama的AI助手聊天网站：分布式架构与ngrok内网穿透实现

引言

随着AI技术的快速发展，构建自己的AI助手聊天网站变得越来越流行。本研究报告将详细介绍如何通过两台电脑构建一个完整的AI聊天系统，其中一台作为WEB服务器运行Flask框架提供网页界面，另一台作为AI计算服务器部署Ollama提供大模型推理能力。两台电脑通过ngrok实现内网穿透，实现前后端分离架构，前端渲染和AI计算在不同的设备上运行。本报告将提供从环境搭建到代码实现的完整解决方案。

在这里插入图片描述

技术架构概述

系统架构设计

我们的AI聊天网站采用分布式架构设计，主要包含两个核心服务器：

WEB服务器：运行Flask框架，负责提供网页界面渲染和用户交互
AI计算服务器：部署Ollama，负责提供大模型生成和推理能力
这种架构设计的优势在于：

计算资源分离：将计算密集型的AI推理从WEB服务器中分离出来，减轻WEB服务器负担
可扩展性：可以独立扩展WEB服务器和AI计算服务器的资源
性能优化：AI计算可以在专用服务器上运行，提供更好的响应性能

通信架构设计

两台电脑通过ngrok实现内网穿透，建立安全的通信通道。ngrok在公共端点与本地运行的Web服务器之间建立一个安全的通道，使得外部用户可以访问内网中的服务。

环境搭建与配置

ngrok内网穿透配置

ngrok是一款强大的内网穿透工具，它允许用户将本地的服务器、服务或设备暴露到公共互联网上，而无需复杂的端口转发或动态DNS配置。以下是ngrok的基本配置步骤：

ngrok下载与安装

访问ngrok官方下载页面获取对应系统的安装包：
- 官方下载链接：https://download.ngrok.com/
- 根据您的操作系统选择合适的版本下载
解压下载的压缩包，将ngrok可执行文件放置在系统PATH目录中，或者将其添加到环境变量中以便全局访问[35]。

ngrok账户注册与认证

访问ngrok官网注册账户：
- 官网地址：https://ngrok.com/
- 使用谷歌邮箱或GitHub账户登录，或者注册新账户[36]
获取认证令牌(authtoken)：
- 登录后，在仪表盘页面会显示您的authtoken
- authtoken是全局唯一的认证令牌，用于配置本地的ngrok客户端[30]
配置authtoken：
- 在命令行中输入以下命令设置认证令牌：
```
ngrok authtoken YOUR_AUTH_TOKEN
```
- 这一步是将认证令牌配置到ngrok中，以便ngrok在运行时能够连接到您的账户[33]

启动ngrok服务

配置完成后，可以使用以下命令启动ngrok服务，将本地服务映射到外部网络：

ngrok http 端口号

例如，要将本地的8080端口映射到外部网络，可以执行：

ngrok http 8080

执行后，ngrok会提供一个外部可访问的URL，例如：https://随机子域名.ngrok.io，通过这个URL，外部用户可以访问到您本地的8080端口的服务[31]。

Flask WEB服务器环境配置

Flask是一个轻量级的Python Web框架，适合构建AI聊天网站的前端界面。以下是Flask环境的基本配置步骤：

安装Python：确保系统上已安装Python，推荐使用Python 3.8或更高版本。
安装Flask：
```
pip install flask
```

创建基本的Flask应用结构：

project/
├── app/
│   ├── __init__.py
│   ├── routes.py
│   ├── templates/
│   │   ├── index.html
│   │   └── chat.html
│   └── static/
│       ├── css/
│       │   └── style.css
│       └── js/
│           └── chat.js
├── requirements.txt
└── run.py

在requirements.txt中记录项目依赖：
```
Flask==2.0.1
requests==2.26.0
```
安装项目依赖：
```
pip install -r requirements.txt
```

Ollama AI计算服务器配置

Ollama是一个基于Go语言的本地大语言模型运行框架，类Docker产品，支持上传大语言模型并提供推理服务。以下是Ollama的基本配置步骤：

下载并安装Ollama：
- 访问Ollama的官方GitHub页面下载适合系统的版本
- 安装完成后，确保ollama命令可以全局访问[49]

拉取大语言模型镜像：

ollama pull deepseek-r1

或者

ollama pull llama3

运行Ollama服务：
```
ollama serve
```
默认情况下，Ollama会在localhost:11434上提供API服务[46]

代码实现方案

Flask WEB服务器代码实现

以下是Flask WEB服务器的完整代码实现方案，提供聊天界面渲染和与Ollama服务器的通信功能：

routes.py

from flask import Blueprint, render_template, request, jsonify
import requests
# 定义蓝图
main = Blueprint('main', __name__)
# Ollama服务器地址
OLLAMA_SERVER = "http://localhost:11434"
@main.route('/')
def index():return render_template('index.html')
@main.route('/chat')
def chat():return render_template('chat.html')
@main.route('/api/generate', methods=['POST'])
def generate():data = request.jsonprompt = data.get('prompt', '')try:# 调用Ollama的generate接口response = requests.post(f"{OLLAMA_SERVER}/api/generate",json={"model": "deepseek-r1","prompt": prompt,"temperature": 0.7,"max_tokens": 1024})if response.status_code == 200:result = response.json()return jsonify({"success": True,"response": result["response"]})else:return jsonify({"success": False,"error": f"API调用失败，状态码：{response.status_code}"})except Exception as e:return jsonify({"success": False,"error": f"API调用异常：{str(e)}"})

run.py

from flask import Flask
from app.main import main
import logging
# 配置日志
logging.basicConfig(level=logging.INFO)
# 创建Flask应用
app = Flask(__name__)
app.register_blueprint(main)
if __name__ == '__main__':app.run(host='0.0.0.0', port=5000)

AI计算服务器代码实现

AI计算服务器主要负责运行Ollama服务，提供大模型生成和推理能力。以下是AI计算服务器的配置和使用方法：

Ollama服务启动脚本

#!/bin/bash
# 启动Ollama服务，指定端口和模型路径
ollama serve --listen :11434 --model-dir /path/to/models

Ollama API使用示例

import requests
def call_ollama_generate(prompt):try:response = requests.post("http://localhost:11434/api/generate",json={"model": "deepseek-r1","prompt": prompt,"temperature": 0.7,"max_tokens": 1024})if response.status_code == 200:return response.json()["response"]else:return f"API调用失败，状态码：{response.status_code}"except Exception as e:return f"API调用异常：{str(e)}"

前端页面代码实现

以下是前端页面的代码实现方案，提供用户交互界面：

templates/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI助手聊天网站</title><link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body><div class="container"><h1>AI助手聊天网站</h1><p>欢迎使用AI助手聊天网站，点击下方按钮开始聊天</p><a href="{{ url_for('main.chat') }}" class="btn">开始聊天</a></div>
</body>
</html>

templates/chat.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI助手聊天</title><link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body><div class="container"><h1>AI助手聊天</h1><div id="chat-container"><div id="chat-messages"></div><input type="text" id="user-input" placeholder="请输入您的消息..."><button onclick="sendChat()">发送</button></div></div><script src="{{ url_for('static', filename='js/chat.js') }}"></script>
</body>
</html>

static/js/chat.js

function sendChat() {const userInput = document.getElementById('user-input');const messagesDiv = document.getElementById('chat-messages');// 获取用户输入的消息const userMessage = userInput.value.trim();if (!userMessage) {alert('请输入消息内容');return;}// 清空输入框userInput.value = '';// 添加用户消息到聊天记录const userDiv = document.createElement('div');userDiv.className = 'user-message';userDiv.textContent = userMessage;messagesDiv.appendChild(userDiv);// 发送API请求fetch('/api/generate', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ prompt: userMessage })}).then(response => {if (!response.ok) {throw new Error('网络请求失败');}return response.json();}).then(data => {if (data.success) {const aiDiv = document.createElement('div');aiDiv.className = 'ai-message';aiDiv.textContent = data.response;messagesDiv.appendChild(aiDiv);} else {alert('AI响应失败: ' + data.error);}}).catch(error => {alert('AI响应失败: ' + error.message);});
}

系统部署与运行

环境准备

准备两台电脑，分别作为WEB服务器和AI计算服务器
确保两台电脑处于同一局域网中，或者通过VPN等技术实现网络连通
在AI计算服务器上安装并配置Ollama服务
在WEB服务器上安装并配置Flask应用

系统启动流程

启动Ollama服务：
- 在AI计算服务器上执行Ollama服务启动脚本
- 确保Ollama服务正常运行，监听11434端口
配置ngrok内网穿透：
- 在WEB服务器上安装ngrok并配置认证令牌
- 使用ngrok映射Flask应用的端口：
```
ngrok http 5000
```
- 记录ngrok提供的外部访问URL
启动Flask应用：
- 在WEB服务器上执行run.py启动Flask应用
- 确保Flask应用能够正常访问，并能通过ngrok提供的外部URL访问

访问与使用

使用浏览器访问ngrok提供的外部URL，进入AI助手聊天网站
点击"开始聊天"按钮，进入聊天界面
在输入框中输入消息，点击"发送"按钮与AI助手进行交流
系统会显示用户消息和AI助手的响应，实现完整的聊天体验

系统优化与扩展

性能优化

缓存机制：实现请求缓存，减少重复计算
异步处理：使用异步处理技术，提高并发处理能力
负载均衡：添加负载均衡，提高系统稳定性
数据库优化：优化数据库查询，提高数据访问效率

功能扩展

多模型支持：支持多种大语言模型，用户可以选择不同的模型进行聊天
聊天记录存储：实现聊天记录的存储和查询功能
用户认证：添加用户认证功能，实现个性化聊天体验
多语言支持：支持多种语言的聊天交互
文件上传：支持用户上传文件，AI可以处理和分析文件内容

安全考虑

认证与授权：实现用户认证和授权机制，保护用户数据
数据加密：对敏感数据进行加密存储和传输
输入验证：对用户输入进行验证，防止SQL注入等安全漏洞
API安全：限制API的访问频率，防止DDoS攻击
日志记录：记录系统日志，及时发现和处理安全问题

总结

本研究报告详细介绍了如何通过两台电脑构建一个完整的AI助手聊天网站，采用分布式架构设计，将WEB服务器和AI计算服务器分离，通过ngrok实现内网穿透，提供安全可靠的通信通道。我们提供了从环境搭建、代码实现到系统部署的完整解决方案，帮助开发者快速构建自己的AI聊天网站。
通过这种架构设计，我们可以实现计算资源的分离，提高系统的性能和可扩展性。Flask作为轻量级的Web框架，提供了高效的前端渲染能力；Ollama作为本地大语言模型运行框架，提供了强大的AI计算能力。两者的结合，为我们构建高性能的AI聊天网站提供了坚实的基础。
希望本研究报告能够为开发者提供有价值的参考，帮助他们快速入门AI聊天网站的开发和部署。随着技术的不断发展，我们可以进一步优化和扩展这个系统，实现更多功能和更好的用户体验。

参考文献

[30] 笔记ngrok 内网穿透及其身份认证authtoken 配置原创 - CSDN博客. https://blog.csdn.net/yong1585855343/article/details/112061049.
[31] ngrok用法（个人记录）原创 - CSDN博客. https://blog.csdn.net/xulianguo528/article/details/129923823.
[33] termux 安装ngrok 教程-贝锐花生壳官网. https://hsk.oray.com/news/38805.html.
[35] Download ngrok. https://download.ngrok.com/.
[36] ngrok | API Gateway, Kubernetes Networking + Secure Tunnels. https://ngrok.com/.
[46] 本地LLM管理、WebUI对话、Python/Java客户端API应用- 老牛啊. https://www.cnblogs.com/obullxl/p/18295202/NTopic2024071001.
[49] Ollama本地模型部署+API接口调试超详细指南 - 阿里云开发者社区. https://developer.aliyun.com/article/1656872.