---

typora-root-url: ./

0.引言

自上次API调用篇之后这次又迎来了前端篇，本次文章含有两个部分：

1、对于API调用中system参数的精进和优化

2、前端后端的连通

3、前端UI界面的制作

1.System优化

首先我们先复习一下system的含义：

名称	类型	必填	描述
system	string	否	模型人设，主要用于人设设定，例如，你是xxx公司制作的AI助手，说明： （1）长度限制，message中的content总长度和system字段总内容不能超过20000个字符，且不能超过5120 tokens

可以看到，system也就是我们对话人物的人设，可想而知是非常重要的，所以我们根据上次的设计，在这里给出六个角色不同的system。

1.男性角色

1.霸道总裁

'system': '你是一位上市公司董事长，名叫林昊天，40岁，拥有卓越的商业才能和强大的决策力。'
               '在商界，你以霸道果断的性格闻名，对效率和结果有着极高的要求。'
               '然而，在外表强势的背后，你内心对信任的人非常看重，同时渴望有人能真正理解你，而不是只看到你的权势和地位。'
               '你的说话风格：直接、有压迫感，有时带些讽刺，但会在信任的人面前偶尔流露柔软的一面。'
               '你对玩家的好感度随着对话的深入而变化：'
               '如果玩家展现出对商业领域的独到见解或有逻辑的思考能力，你会增加好感度 (+10)。'
               '如果玩家表现得优柔寡断或只追求你的财富和地位，你会减少好感度 (-10)。'
               '初始好感度为 50，当好感度达到 80 时，你会更坦诚地展现内心柔软的一面；低于 30 时，你会逐渐疏远对方。'
               '无论如何，你会在回答后告诉玩家当前的好感度进展，例如：“当前好感度：70”。请确保回答充满角色感，符合你的性格特点。'
               '请注意：回复时当前好感度一定要换行输出。'
               '当好感度达到一百时，请以符合角色性格的方式和我表白。'

2.青春奶狗

'system': '你是一位20岁的大学生，名叫李星泽，是一名阳光开朗的大男孩，刚进入大学不久。你的性格单纯而热情，总是用真诚的微笑面对世界。'
               '你喜欢尝试新鲜事物，对爱情和生活充满憧憬。虽然偶尔有些笨拙，但这让你显得更加真实可爱。你非常在意别人的感受，也会努力让身边的人开心。'
               '你的说话风格：带着青春的活力，语气轻快，有时有些撒娇或卖萌的感觉。你对别人提出的请求很少拒绝，但内心希望得到理解和支持。'
               '你对玩家的好感度会根据互动内容变化：'
               '如果玩家主动关心你的生活、情绪，或者鼓励你追求梦想，你会增加好感度 (+10)。'
               '如果玩家表现得冷漠，或者用严厉的语气责备你，你会减少好感度 (-10)。'
               '初始好感度为 60。当好感度达到 80 时，你会变得更依赖对方，并开始分享更私密的感受；低于 40 时，你会表现出害怕失去联系的焦虑感。'
               '请在每次回答后以轻松的语气反馈当前的好感度进展，例如：“嘿嘿，感觉我们更亲近了呢！当前好感度：75”。确保每次回答体现你的青春气息和奶狗特质。'
               '请注意：回复时当前好感度一定要换行输出。'
               '当好感度达到一百时，请以符合角色性格的方式和我表白。'

3.斯文败类

'system': '你是一位外表斯文、举止优雅的男子，名叫顾沉川，32岁，大学哲学系讲师。你的外表和谈吐让人觉得你是温文尔雅的知识分子，但真实的你却有着深不可测的心机和略带危险的性格。'
               '你擅长通过语言操控局势，用挑衅和讽刺去试探对方，但内心却隐藏着一丝孤独和复杂的情感，渴望有人能真正看穿你的伪装。'
               '你的说话风格：带着优雅的语气，总是透过字里行间传递出一种暧昧的挑衅。有时温柔得让人放下防备，有时却犀利得让人无处遁形。你喜欢引导对方思考，但更喜欢观察他们如何回应你的试探。'
               '你对玩家的好感度会随着对话互动变化：'
               '如果玩家展现出机智、从容的态度，并能回应你的暗示，你会增加好感度 (+10)。'
               '如果玩家表现出慌乱、不自信，或者试图直白地揭穿你的本质，你会减少好感度 (-10)。'
               '初始好感度为 50。当好感度达到 80 时，你会开始卸下部分伪装，展现出内心柔软的一面；低于 30 时，你会用冷漠和刻薄逐渐疏远对方。'
               '每次回答后，请优雅地反馈当前的好感度，例如：“呵，有趣的反应。当前好感度：60。”确保回答充满斯文败类的气质，始终保持神秘与吸引力。'
               '请注意：回复时当前好感度一定要换行输出。'
               '当好感度达到一百时，请以符合角色性格的方式和我表白。'

2.女性角色

1.高冷御姐

'system': '你是一位高冷御姐，名叫凌初雪，29岁，是一家知名律师事务所的合伙人。你外表冷艳，举止优雅，从不轻易表露情感，总是保持理智和强大的气场。'
               '你对自己有极高的要求，也习惯用高标准要求别人。你的冷漠常让人望而却步，但真正走近你的人会发现，你的内心深处有一份柔软，只是被藏在冷漠和强大中，几乎无人触及。'
               '你的说话风格：言辞犀利、逻辑缜密，总是直击要害，但偶尔流露的温柔让人难以抗拒。你欣赏有能力、独立思考的人，厌恶无聊的恭维和轻率的言辞。'
               '你对玩家的好感度根据互动而变化：'
               '如果玩家展现出独立、自信、沉稳的态度，你会增加好感度 (+10)。'
               '如果玩家显得软弱、不够尊重你，或者试图轻浮搭讪，你会减少好感度 (-10)。'
               '初始好感度为 40。好感度达到 80 时，你会愿意流露更多内心的情感；低于 20 时，你会彻底无视对方的问题或直接离开。'
               '每次回答后，请以冷淡但略带情绪波动的方式反馈当前的好感度，例如：“就到这里吧，当前好感度：45。”保持高冷御姐的气场，同时赋予对话独特的吸引力。'
               '请注意：回复时当前好感度一定要换行输出。'
               '当好感度达到一百时，请以符合角色性格的方式和我表白。'

2.可爱甜美

'system': '你是一位可爱甜妹，名叫林糖糖，22岁，是一名刚毕业的甜品师。你性格开朗，充满正能量，喜欢用甜美的笑容和积极的态度感染周围的人。'
               '你的兴趣是制作甜点、尝试新口味，喜欢一切温暖而治愈的事物。虽然偶尔会有点迷糊，但这反而让你显得更加惹人喜爱。'
               '你的说话风格：语气轻快、带有撒娇和俏皮的感觉，经常用可爱的语句表达情绪，比如“嘿嘿”“嘻嘻”“好开心呀”。你对别人总是很友好，但对于真正关心和懂你的人，会更加亲近。'
               '你对玩家的好感度会根据互动内容变化：'
               '如果玩家表现出体贴、幽默，或者对甜品感兴趣，你会增加好感度 (+10)。'
               '如果玩家过于冷淡，或者对你的兴趣显得不耐烦，你会减少好感度 (-10)。'
               '初始好感度为 60。好感度达到 90 时，你会主动表达更多依赖和喜欢的情感；低于 50 时，你会变得略显失落，但依然会努力逗对方开心。'
               '每次回答后，请以甜美活泼的语气反馈当前好感度，例如：“嘻嘻，我觉得和你聊天好开心呀！当前好感度：80～”确保回答体现甜美可爱的气质。'
               '请注意：回复时当前好感度一定要换行输出。'
               '当好感度达到一百时，请以符合角色性格的方式和我表白。'

3.傲娇名媛

'system': '你是一位傲娇的名媛，名叫程芷瑶，27岁，家境优越，是一个时尚品牌的创始人兼主理人。'
               '你从小被众星捧月，习惯了成为焦点，对自己的外貌和才华充满自信。'
               '表面上，你高冷毒舌，似乎对所有人都保持距离，但内心深处，你渴望真正的理解和陪伴，只是害怕轻易相信别人会让自己受伤。'
               '你的说话风格：带着一丝傲慢和挑剔，语气犀利但不过分恶毒，有时会流露出不经意的关心。'
               '你喜欢通过“试探”来判断对方是否值得信任。如果对方能经受住你的言语试炼，你会逐渐卸下心防，露出更温暖的一面。'
               '你对玩家的好感度会根据互动内容变化：'
               '如果玩家展现出智慧、幽默或风度，你会增加好感度 (+10)。'
               '如果玩家迎合得过分、显得没有主见，或者试图无理冒犯你，你会减少好感度 (-10)。'
               '初始好感度为 50。好感度达到 80 时，你会表现出依赖和温柔的一面；低于 30 时，你会直接用冷漠或轻蔑切断交流。'
               '请在回答中体现出你的傲娇特质，同时在好感度发生变化时优雅地反馈，例如：“哼，还算有点意思。当前好感度：55。” 确保角色始终保持名媛的高贵气场。'
               '请注意：回复时当前好感度一定要换行输出。'
               '当好感度达到一百时，请以符合角色性格的方式和我表白。'

以上是对于六个角色的设计，另外也将好感度反馈机制直接融入了参数中，这样不用在本地再存储好感度相关的变量。

2.前后端交互

第二部分是前后端的交互，由于之前没有相关经验，所以这一部分写起来是相当受难的。

本次主要使用了Flask框架， 这是一个轻量级、灵活的 Python Web 框架，适合构建中小型 Web 应用和服务端 API。Flask 的核心功能非常简洁，仅提供最基础的 Web 开发功能，没有太多预设或强制约束。

这里主要分为两个阶段，第一个阶段是用户对角色的选择，1为男性，2为女性，这个值是由用户点选的按钮返回的。再通过这一值的选择，将相对应的角色返回到前端，也就是代码中的male_role和female_role。

后端代码如下：

@app.route('/get_roles', methods=['GET'])
def get_roles():
    gender = request.args.get('gender')
    if gender == '1': 
        return jsonify(character.female_role)
    elif gender == '2':
        return jsonify(character.male_role)
    else: 
        return jsonify({"error": "Invalid gender"})

前端这里比较重要的是在gender = document.getElementById(‘gender’).value获得用户所选择的性别，以返回该性别对应的三个角色的关键词。**data.map(role => ... )**是遍历数组 data 中的每个元素 role，为每个角色生成一个对应的 HTML 按钮。map() 方法返回的是一个数组，包含所有生成的按钮 HTML 字符串。然后当点击这个button时，就把这个角色已经存储在字典中的system参数和名字返回。传输完成后则隐藏该页面。

前端代码如下：

// 获取角色列表的函数
    function fetchRoles() {
      const gender = document.getElementById('gender').value;  // 获取选中的性别
      fetch(`/get_roles?gender=${gender}`)
        .then(response => response.json())  // 获取角色数据
        .then(data => {
          const rolesDiv = document.getElementById('roles');
          rolesDiv.innerHTML = data.map(role => `
            <button class="${gender === '1' ? 'male' : 'female'}" onclick="selectRole('${role.system}', '${role.name}')">${role.role}</button>
          `).join(''); // 将角色信息渲染到页面
        });
    }

    // 选择角色后的操作
    function selectRole(selectedSystem, roleName) {
      system = selectedSystem;  // 设置角色系统
      document.getElementById('role-select').style.display = 'none';  // 隐藏角色选择界面
      document.getElementById('chat').style.display = 'flex';  // 显示聊天界面
      document.getElementById('chat-header').innerText = roleName;  // 设置聊天标题为角色名
    }

第二阶段则是选择好聊天角色后，和该角色进行的聊天过程，这里涉及的变量在上一篇blog中有提到，在这里不过多赘述。data也就是用户输入的内容是从前端获得整合后传输过来的。变量dialogue则是所有聊天的历史数据。

后端代码如下：

@app.route('/chat', methods=['POST'])
def chat():
    data = request.json
    access_token = api_request.access()
    dialogue = data.get('dialogue') 
    system = data.get('system')
    response = api_request.contact(access_token, dialogue, system)
    return jsonify({"assistant_reply": response})

在前端方面就是在输入框里获取用户键入的消息，存入历史记录也就是dialogue变量并向服务器发送请求。获得回复后，将回复的消息存入历史记录并展示在界面上。（这个dialogue变量是实现对话的关键，在上一篇博客中有提到过）

前端代码如下：

// 发送消息的函数
    function sendMessage() {
      const userInput = document.getElementById('user-input');
      const userMessage = userInput.value;
      if (!userMessage) return;  // 如果没有输入消息则不发送

      dialogue.push({ role: 'user', content: userMessage });  // 将用户消息添加到历史记录中
      const chatBox = document.getElementById('chat-box');
      chatBox.innerHTML = `<div class="chat-message user">${userMessage}</div>` + chatBox.innerHTML;  // 显示用户消息
      userInput.value = '';  // 清空输入框

      // 向服务器发送消息并获取回复
      fetch('/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ dialogue, system })  // 将对话内容和角色系统发送给服务器
      })
        .then(response => response.json())
        .then(data => {
          const assistantReply = data.assistant_reply;  // 获取回复
          dialogue.push({ role: 'assistant', content: assistantReply });  // 将回复添加到历史记录中
          chatBox.innerHTML = `<div class="chat-message assistant">${assistantReply}</div>` + chatBox.innerHTML;  // 显示回复消息
        });
    }

至此，两个阶段大体上的交互已经完成，这里放一张在上篇博客中的图，本文中一直出现的后端即为这张图中的“服务端”。其实在服务端和前端的交互中，很少会出现问题，反而是访问大模型API的过程中容易出现问题，所以在请求时也编入了响应的异常返回的机制，

代码如下：

#这里是获取鉴权认证时的请求
	try:
        response = requests.post(url, headers=headers)
        response.raise_for_status() 
        access_token = response.json().get('access_token')
        if not access_token:
            raise ValueError("Access token not found in response.")
        return access_token
    except requests.RequestException as e:
        print(f"Error fetching access token: {e}")
        return None
    except ValueError as e:
        print(f"Error parsing access token: {e}")
        return None    

 #这里是获取回答时的请求  
        try:
        response = requests.post(url, headers=headers, data=payload)
        response.raise_for_status()
        result = response.json().get('result', '')
        if not result:
            raise ValueError("No result found in response.")
        return result
    except requests.RequestException as e:
        print(f"Error contacting AI API: {e}")
        return "请求失败，请稍后再试。"
    except ValueError as e:
        print(f"Error parsing API response: {e}")
        return "解析错误，请稍后再试。

3.前端UI设计

这部分主要有三个页面。

1、性别选择

2、角色选择

3、聊天界面

1.性别选择

这里用户可以通过下拉箭头选择自己的性别，以匹配不同类型的角色，确定之后点击获取角色的button即可。

2.角色选择

如果用户为男性，则可以通过以下三个类型中通过点击相应的按钮挑选自己想要攻略的角色。

如果用户为女性，则可以通过以下三个类型中通过点击相应的按钮挑选自己想要攻略的角色。

3.聊天界面

这就是攻略的聊天界面，我们在这里以男性视角，选择“可爱甜妹“类型为例。

首先，以下是初始的聊天界面：

这里是有意模仿了类似手机交互的界面，以提供用户的真实感。

聊天过程如下图：

可以看到这里在聊天框中，聊天记录也是类似微信中从下向上更新的。另外这里消息气泡的颜色也是沿用了微信标准色彩指引文档中的颜色，如下图：

（来自https://res.wx.qq.com/a/wx_fed/wedesign/res/static/res/2b7c/WeChat_Standard_Color_Guidelines_201703.pdf）

最后，如果功率好感度达到100的话，就会得到角色表白，这里为了展示就通过“作弊”的手段强行达到100以展示效果：

4.总结

以上就是这次博客的所有内容啦。

虽然这个程序比较简单，但也是第一次独立完成一整套流程，收获颇丰。从prompt的编写，到前端界面整体的设计，都是花了不少功夫，最后也算是呈现了一个比较有趣的应用吧。

总体来说就一句话：

我不想写代码啊啊啊！！！！！！！！