接下来，开始做对话功能，跟知识库管理的操作类似，也是先渲染页面。但是，也有不一样的地方，就是在模板当中显示数据，要使用js来处理，而不是直接用模板的for循环。

代码示例

1、新建模块并修改蓝图 

# apps/chat/__init__.py
from flask import Blueprint
bp = Blueprint('chat', __name__, url_prefix='/chat', template_folder='../templates/')
from . import views

2、新建视图文件 

# apps/chat/views.py
from flask import render_template, request, Response
from extensions.ext_database import db
from . import bp
from config import LLM_MODELS
from apps.dataset.models import Dataset

3、渲染视图

页面上要给用户提供模型、知识库选择框，把数据传到模板文件。 

# apps/chat/views.py
@bp.route('/', endpoint='index')
def index():
    dataset_objs = Dataset.query.order_by(Dataset.id.desc()).all()
    data = {
        'llm_models': list(LLM_MODELS.keys()),
        'datasets': [{'id': obj.id, 'name': obj.name} for obj in dataset_objs],
    }
    return render_template('chat/index.html', **data)

4、页面动态显示数据

要实现在页面无刷新对话效果，就要用js异步发送和接收数据，这里用一个跟Vue.js语法类似的轻量级js框架。 

# apps/templates/chat/index.html
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
<div class="flex h-screen" x-data="app()">

<!-- 模型选择 -->
<div class="mt-4">
    <label for="model-select" class="block mb-2 text-gray-800 font-medium">选择对话模型：</label>
    <select id="model-select" class="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
        <template x-for="model_name in llmModels" :key="model_name">
            <option :value="model_name" x-text="model_name"></option>
        </template>
    </select>
</div>

<!-- 知识库选择 -->
<div class="mt-6">
    <div class="text-gray-800 mb-2 font-medium">选择知识库：</div>
    <div class="flex flex-col space-y-2 overflow-y-auto h-28 p-3 border border-gray-300 rounded">
        <div class="grid grid-cols-2 gap-2">
            <template x-for="dataset in datasets" key="dataset.id">
                <label class="flex items-center space-x-2">
                    <input type="checkbox" :value="dataset.id" class="form-checkbox h-4 w-4 text-blue-600">
                    <span class="text-gray-800" x-text="dataset.name"></span>
                </label>
            </template>
        </div>
    </div>
</div>

<script>
function app(){
    llmModels = JSON.parse('{{ llm_models | tojson }}')
    return {
        llmModels: llmModels,
        datasets: JSON.parse('{{ datasets | tojson }}')
    }
</script>

这节课内容不多，可能大家比较陌生的就是 Alpinejs，有兴趣的同学，可以去参考官网，或者借助GPT工具了解更多用法。

本文链接：http://ichenhua.cn/edu/note/767

版权声明：本文为「陈华编程」原创课程讲义，请给与知识创作者起码的尊重，未经许可不得传播或转售！