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

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

引言

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

技术架构概述

系统架构设计

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

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

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

通信架构设计

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

环境搭建与配置

ngrok内网穿透配置

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

ngrok下载与安装

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

ngrok账户注册与认证

1. 访问ngrok官网注册账户：
   • 官网地址：https://ngrok.com/
   • 使用谷歌邮箱或GitHub账户登录，或者注册新账户[36]
2. 获取认证令牌(authtoken)：
   • 登录后，在仪表盘页面会显示您的authtoken
   • authtoken是全局唯一的认证令牌，用于配置本地的ngrok客户端[30]
3. 配置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环境的基本配置步骤：

1. 安装Python：确保系统上已安装Python，推荐使用Python 3.8或更高版本。
2. 安装Flask：

   pip install flask
   

3. 创建基本的Flask应用结构：

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

4. 在requirements.txt中记录项目依赖：

   Flask==2.0.1
   requests==2.26.0
   

5. 安装项目依赖：

   pip install -r requirements.txt
   

Ollama AI计算服务器配置

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

1. 下载并安装Ollama：
   • 访问Ollama的官方GitHub页面下载适合系统的版本
   • 安装完成后，确保ollama命令可以全局访问[49]
2. 拉取大语言模型镜像：

   ollama pull deepseek-r1
   

   或者

   ollama pull llama3
   

3. 运行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.json
    prompt = 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);
    });
}

系统部署与运行

环境准备

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

系统启动流程

1. 启动Ollama服务：
   • 在AI计算服务器上执行Ollama服务启动脚本
   • 确保Ollama服务正常运行，监听11434端口
2. 配置ngrok内网穿透：
   • 在WEB服务器上安装ngrok并配置认证令牌
   • 使用ngrok映射Flask应用的端口：

     ngrok http 5000
     

   • 记录ngrok提供的外部访问URL
3. 启动Flask应用：
   • 在WEB服务器上执行run.py启动Flask应用
   • 确保Flask应用能够正常访问，并能通过ngrok提供的外部URL访问

访问与使用

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

系统优化与扩展

性能优化

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

功能扩展

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

安全考虑

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

总结

本研究报告详细介绍了如何通过两台电脑构建一个完整的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.