微信小程序集成 AI 对话功能：基于 Cogito 模型部署指南

微信小程序集成 AI 对话功能：基于 Cogito 模型部署指南 | 极客日志

pip install fastapi uvicorn httpx

from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
import httpx
import json
from pydantic import BaseModel
from typing import List, Optional

# 定义请求体的数据模型
class ChatMessage(BaseModel):
    role: str
    content: str

class ChatRequest(BaseModel):
    messages: List[ChatMessage]
    max_tokens: Optional[int] = 500

# 初始化 FastAPI 应用
app = FastAPI(title="小程序 AI 对话后端")

# 配置 CORS（跨域资源共享）
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 替换成你部署在 GPU 平台上的 Cogito 模型 API 地址
MODEL_API_URL = "https://your-mirror-server-address/v1/chat/completions"

@app.post("/chat")
async def chat_with_ai(request: ChatRequest):
    """处理小程序发来的聊天请求。"""
    payload = {
        "model": "cogito-v1-preview-llama-3b",
        "messages": [msg.dict() for msg in request.messages],
        "max_tokens": request.max_tokens,
        "stream": False
    }
    async with httpx.AsyncClient(timeout=30.0) as client:
        try:
            response = await client.post(MODEL_API_URL, json=payload)
            response.raise_for_status()
            result = response.json()
            ai_reply = result["choices"][0]["message"]["content"]
            return {"reply": ai_reply}
        except httpx.RequestError as e:
            raise HTTPException(status_code=503, detail=f"无法连接 AI 服务：{str(e)}")
        except (KeyError, IndexError, json.JSONDecodeError) as e:
            raise HTTPException(status_code=500, detail=f"解析 AI 响应时出错：{str(e)}")
        except Exception as e:
            raise HTTPException(status_code=500, detail=f"服务器内部错误：{str(e)}")

@app.get("/health")
async def health_check():
    return {"status": "ok", "service": "mini-program-ai-backend"}

uvicorn main:app --host 0.0.0.0 --port 8000 --reload

<!-- pages/chat/chat.wxml -->
<view>
  <scroll-view scroll-y scroll-into-view="{{'msg-' + (messageList.length - 1)}}" scroll-with-animation>
    <block wx:for="{{messageList}}" wx:key="index">
      <view>
        <image wx:if="{{item.role === 'user'}}" src="/images/user-avatar.png"></image>
        <image wx:else src="/images/ai-avatar.png"></image>
        <text>{{item.content}}</text>
        <view wx:if="{{item.role === 'assistant' && item.loading}}">
          <text>.</text><text>.</text><text>.</text>
        </view>
      </view>
    </block>
  </scroll-view>
  <view>
    <input value="{{inputValue}}" bindinput="onInput" placeholder="输入你的问题..." confirm-type="send" bindconfirm="sendMessage" focus="{{autoFocus}}" />
    <button bindtap="sendMessage" disabled="{{isSending}}"> {{isSending ? '发送中' : '发送'}} </button>
  </view>
</view>

/* pages/chat/chat.wxss */
.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
.message-list {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
  overflow: auto;
}
.message-item {
  display: flex;
  margin-bottom: 30rpx;
  align-items: flex-start;
}
.message-item.user {
  flex-direction: row-reverse;
}
.avatar image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}
.bubble {
  max-width: 65%;
  padding: 20rpx 30rpx;
  border-radius: 12rpx;
  margin: 0 20rpx;
  word-break: break-word;
  line-height: 1.5;
}
.user .bubble {
  background-color: #95ec69;
  color: #000;
}
.assistant .bubble {
  background-color: #fff;
  color: #333;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}
.input-area {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  align-items: center;
}
.input-box {
  flex: 1;
  padding: 20rpx 30rpx;
  border: 1rpx solid #ddd;
  border-radius: 40rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
}
.send-btn {
  background-color: #07c160;
  color: white;
  border-radius: 40rpx;
  padding: 0 40rpx;
  font-size: 28rpx;
}
.send-btn[disabled] {
  background-color: #ccc;
}

// pages/chat/chat.js
const API_BASE_URL = 'https://your-backend-server.com';

Page({
  data: {
    inputValue: '',
    messageList: [],
    isSending: false,
    autoFocus: true,
  },
  onLoad() {
    const history = wx.getStorageSync('aiChatHistory');
    if (history && Array.isArray(history)) {
      this.setData({ messageList: history });
    }
  },
  onInput(e) {
    this.setData({ inputValue: e.detail.value });
  },
  async sendMessage() {
    const { inputValue, messageList, isSending } = this.data;
    if (!inputValue.trim() || isSending) return;

    const userMessage = { role: 'user', content: inputValue };
    const newList = [...messageList, userMessage];
    this.setData({
      messageList: newList,
      inputValue: '',
      isSending: true,
    });

    const thinkingMessage = { role: 'assistant', content: '', loading: true };
    this.setData({ messageList: [...newList, thinkingMessage] });

    const requestMessages = newList.map(msg => ({ role: msg.role, content: msg.content }));
    try {
      const response = await new Promise((resolve, reject) => {
        wx.request({
          url: `${API_BASE_URL}/chat`,
          method: 'POST',
          data: { messages: requestMessages, max_tokens: 300 },
          header: { 'content-type': 'application/json' },
          success: resolve,
          fail: reject,
        });
      });

      if (response.statusCode === 200) {
        const aiReply = response.data.reply;
        const finalList = [...newList];
        finalList.pop();
        finalList.push({ role: 'assistant', content: aiReply });
        this.setData({ messageList: finalList });
        wx.setStorageSync('aiChatHistory', finalList);
      } else {
        throw new Error(`请求失败：${response.statusCode}`);
      }
    } catch (error) {
      console.error('发送消息失败:', error);
      wx.showToast({ title: '网络好像不太给力，请稍后再试', icon: 'none' });
      const finalList = [...newList];
      finalList.pop();
      this.setData({ messageList: finalList });
    } finally {
      this.setData({ isSending: false });
    }
  },
});

# 在 main.py 中添加裁剪函数
def trim_messages(messages: List[ChatMessage], max_history_turns: int = 10) -> List[ChatMessage]:
    if len(messages) <= max_history_turns * 2:
        return messages
    return messages[-(max_history_turns * 2):]

# 在 chat_with_ai 中调用
trimmed_messages = trim_messages(request.messages, max_history_turns=5)
payload = {
    "model": "cogito-v1-preview-llama-3b",
    "messages": [msg.dict() for msg in trimmed_messages],
    # ... 其他参数
}

def postprocess_reply(text: str) -> str:
    sensitive_words = ["暴力", "仇恨"]
    for word in sensitive_words:
        if word in text:
            text = text.replace(word, "**")
    if len(text.strip()) < 5:
        return "我好像没太明白你的意思，能换个方式问问吗？"
    return text.strip()

微信小程序集成 AI 对话功能：基于 Cogito 模型部署指南

微信小程序集成 AI 对话功能：基于 Cogito 模型部署指南

1. 项目准备：理清思路与搭建环境

2. 后端搭建：让 AI 模型准备好接客

3. 前端开发：构建小程序的对话界面

3.1 页面布局与样式

3.2 核心逻辑与网络请求

4. 关键问题与优化方案

4.1 应对网络延迟

4.2 管理对话长度与上下文

4.3 提升回复质量与安全性

5. 总结

更多推荐文章

相关免费在线工具

微信小程序集成 AI 对话功能：基于 Cogito 模型部署指南

微信小程序集成 AI 对话功能：基于 Cogito 模型部署指南

1. 项目准备：理清思路与搭建环境

2. 后端搭建：让 AI 模型准备好接客

3. 前端开发：构建小程序的对话界面

3.1 页面布局与样式

3.2 核心逻辑与网络请求

4. 关键问题与优化方案

4.1 应对网络延迟

4.2 管理对话长度与上下文

4.3 提升回复质量与安全性

5. 总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具