大数跨境

让AI深入生活(1)——微信上的传话筒

让AI深入生活(1)——微信上的传话筒 智擎AI馆
2025-10-09
2
导读:AI人的婚礼是什么样的?
这几年,“AI”几乎成了所有科技话题的主角。无论是生成图片、写文章、代码助手,还是自动化办公,AI的力量已经无处不在。但在炫目的技术背后,我们真正想到用它来解决日常生活问题的时刻,其实少之又少。
当我给我家人科普大模型的时候,他们的灵魂发问经常让我词穷:“这个东西有什么用?”,“我可以拿来干嘛?”,“我平时又用不到你干嘛给我说?”

我一直在想:如果AI能真正深入普通人的生活,成为生活的一部分,会是怎样的体验?

适逢国庆假期也是我的婚礼,大家都知道婚礼是个极其繁琐的活动,涉及各种事项的安排,加上外地很多朋友来参加,几乎事无巨细所有的信息都会汇总到我这个新郎官这。于是,我做了一个小实验——在微信里做一个“传话筒”。

让AI回答关于“我”的一切

这个微信小程序的界面非常简单,就像一个普通的聊天窗口。但它背后接入了一个我自己搭建的知识库,能回答所有与我的婚礼相关的问题。你可以问它:

  • 婚礼的时间和地点?

  • 宾客的桌号安排?

  • 仪式流程?菜单?

  • 甚至包括——“我去贵阳玩,有什么美食推荐?”

这些答案都不是凭空生成的,而是我提前写好的内容、上传到知识库里,再由AI做结构化处理、自然语言理解,然后通过小程序回答宾客的提问。

简单来说,它是一个懂“我”的AI传话筒。结合微信这个平台,更是让这个AI嘴替唾手可得,随时点开随时用。后来有很多外地的朋友来参加我的婚礼,在我应接不暇的时候这个小程序很好地帮我缓解了机械性的信息回复,把我解放出来,才给伴侣带来了一场美满的婚礼。当然接亲当天忘记带捧花这种事情AI确实爱莫能助,如果未来有个实体化的机器人,它应该能识别到我没带捧花吧。

小程序 + 知识库 + 智能问答

整个小程序的结构并不复杂:
前端是一个微信对话界面,通过 WebSocket向后端发送用户的提问;后端使用一个轻量的RAG(检索增强生成)服务,从我自己的知识库中找到最相关的内容;最后,AI将这些内容组织成自然语言回答并返回前端。每一次提问,其实就是一次人机协作的传递。我给AI“喂”知识,AI帮我“说”出来。
话不多说,我直接上代码
JS文件
// index.jsconst defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'Page({  data: {    question: "",    messages: [],    scrollToId: "",    recorder: null,    voiceMode: false,    recording: false,    socket: null,    currentAnswerId: null,  // 正在打印的 assistant 消息 id  },  onInput(e) {    this.setData({ question: e.detail.value });  },  onSend(e) {    const q = e.detail.value.trim();    if (!q) return;    // 1. 显示用户消息    this.addMessage("user", q);    this.setData({ question: "" });    // 2. 预留一条空的 assistant 消息    const answerId = this.addMessage("assistant""");    this.setData({ currentAnswerId: answerId });    // 3. 建立 WebSocket 连接(每次问问题新建连接即可)    const socket = wx.connectSocket({      url: "wss://api.不告诉你.com/ws/chat"// 换成你后端的 wss 域名      success: () => console.log("WebSocket connecting..."),      fail: (err) => {        console.error("WebSocket error:", err);        this.updateAnswer(answerId, "连接失败");      }    });    socket.onOpen(() => {      console.log("WebSocket connected");      socket.send({ data: JSON.stringify({ query: q }) });    });    socket.onMessage((msg) => {      console.log("收到分片:", msg.data);      if (msg.data === "[END]") {        socket.close();        this.setData({ currentAnswerId: null });        return;      }      // 匀速打印      this.appendAnswer(answerId, msg.data);    });    socket.onClose(() => {      console.log("WebSocket closed");    });    socket.onError((err) => {      console.error("WebSocket error:", err);      this.updateAnswer(answerId, "服务异常");    });    this.setData({ socket });  },  // 添加消息  addMessage(role, text) {    const msg = { id: Date.now() + Math.random(), role, text };    this.setData({      messages: [...this.data.messages, msg],      scrollToId: "m" + msg.id    });    return msg.id;  },  // 更新消息内容  updateAnswer(id, text) {    const msgs = this.data.messages.map(m => {      if (m.id === id) m.text = text;      return m;    });    this.setData({ messages: msgs, scrollToId: "m" + id });  },  // 匀速打印:把流式分片拼接到当前 assistant 消息里  appendAnswer(id, chunk) {    const msgs = this.data.messages.map(m => {      if (m.id === id) {        m.text = (m.text || "") + chunk;      }      return m;    });    this.setData({ messages: msgs, scrollToId: "m" + id });  },  // 切换语音输入  toggleVoice() {    this.setData({ voiceMode: !this.data.voiceMode });  },  startRecord() {    const recorder = wx.getRecorderManager();    this.setData({ recorder, recording: true });    recorder.start({ format: "mp3" });    wx.showToast({ title: "录音中…", icon: "none" });  },  stopRecord() {    const recorder = this.data.recorder;    this.setData({ recording: false });    if (!recorder) return;    recorder.stop();    recorder.onStop(res => {      wx.showToast({ title: "录音结束", icon: "none" });      this.setData({ question: "(语音识别结果)" });    });  }});
WXML文件
<view class="container" style="background-image: url('https://不告诉你.com/assets/wx-background.jpg');">  <scroll-view class="chat" scroll-y="true" scroll-with-animation scroll-into-view="{{scrollToId}}">    <block wx:for="{{messages}}" wx:key="id">      <view id="m{{item.id}}" class="bubble {{item.role}}">        <text>{{item.text}}</text>      </view>    </block>  </scroll-view>  <view class="inputBar">    <!-- 小语音按钮 -->    <view class="voiceBtn" bindtap="toggleVoice">      <image src="../images/mic-dark.jpg" mode="aspectFit" />    </view>    <!-- 输入框 -->    <textarea wx:if="{{!voiceMode}}"              class="input"              placeholder="输入文字或点击语音"              auto-height              confirm-type="send"              bindinput="onInput"              bindconfirm="onSend"              value="{{question}}" />    <!-- 语音模式:按住说话 -->    <view wx:if="{{voiceMode}}" class="voiceBox">      <button class="holdBtn"              bindtouchstart="startRecord"              bindtouchend="stopRecord">        按住说话      </button>      <!-- 波纹动画 -->      <view wx:if="{{recording}}" class="ripple"></view>    </view>  </view></view>
WXSS文件
.container {    display: flex;    flex-direction: column;    height100vh;    background-imageurl('../images/bj.jpg');    background-size: cover;    background-position: center;  }  .bg {    position: absolute;    top0;    left0;    width100%;    height100%;    z-index: -1;  }  .overlay {    position: relative;    height100%;    display: flex;    flex-direction: column;  }    /* 聊天区域:撑满剩余空间 */  .chat {    flex1;    padding24rpx;    overflow-y: scroll;    box-sizing: border-box;  }    .bubble {    max-width80%;    margin16rpx 0;    padding16rpx 20rpx;    border-radius18rpx;    line-height1.6;    backgroundrgba(255,255,255,0.8);  }  .bubble.user { backgroundrgba(217,247,190,0.9); align-self: flex-end; }  .bubble.assistant { backgroundrgba(255,255,255,0.9); border:1px solid #eeealign-self: flex-start; }    /* 输入区域始终固定在底部 */  .inputBar {    display: flex;    align-items: center;    padding12rpx;    border-top1px solid #eee;    backgroundrgba(255,255,255,0.95);  }    .voiceBtn {    width60rpx;    height60rpx;    border-radius50%;    display: flex;    align-items: center;    justify-content: center;    margin-right12rpx;  }    .voiceBtn image {    width36rpx;    height36rpx;  }    .input {    flex1;    min-height72rpx;    max-height240rpx;    border1px solid #ddd;    border-radius12rpx;    padding12rpx;    background#fff;  }    /* 按住说话按钮:浅灰色 */  .holdBtn {    flex1;    height80rpx;    display: flex;    align-items: center;   /* 垂直居中 */    justify-content: center; /* 水平居中 */    background#f2f2f2;    color#333;    border-radius12rpx;    border1px solid #ccc;    font-size28rpx;  }      /* 录音时闪动动画 */  .holdBtn.recording {    animation: pulse 1s infinite;  }    @keyframes pulse {    0% { background-color#e6e6e6; }    50% { background-color#d0d0d0; }    100% { background-color#e6e6e6; }  }  /* 底部语音盒子 */.voiceBox {    position: relative;    flex1;    display: flex;    justify-content: center;    align-items: center;  }    /* 按住说话按钮 */  .holdBtn {    flex1;    height80rpx;    line-height80rpx;    text-align: center;    background#f2f2f2;    color#333;    border-radius12rpx;    border1px solid #ccc;    z-index2;  }    /* 波纹效果 */  .ripple {    position: absolute;    width120rpx;    height120rpx;    border-radius50%;    border4rpx solid #07c160;    opacity0.6;    z-index1;    animation: rippleAnim 1.5s infinite;  }    @keyframes rippleAnim {    0% {      transformscale(0.8);      opacity0.8;    }    50% {      transformscale(1.4);      opacity0.4;    }    100% {      transformscale(2.0);      opacity0;    }  }  
这些代码可以直接使用,后端封装一个rag服务给前端小程序使用即可,至于后端设计,那就说来话长了,感兴趣可以联系小编或者联系智擎未来企业微信。

从婚礼传话筒,到人人可用的AI嘴替

起初,我只是想让宾客能方便地获取信息。但在搭建过程中,我发现这件事的意义远超想象——AI真正的力量,不在于多智能,而在于多“贴心”。
它能让复杂的沟通变得简单,让信息的传递更温柔。

比如,活动组织者可以让AI成为信息小秘书;企业可以用它做FAQ助理、活动报名问答;家庭可以用它做家务备忘录、旅游顾问;甚至个人,也能让它成为“数字分身”,回答那些重复却重要的问题。
在这个“人人都是创作者”的时代,AI完全可以成为“人人的嘴替”——你的传话筒、导游、主持人、讲解员。

不需要复杂的模型训练,不需要昂贵的GPU。
只要一点点耐心、几行代码,你就能让AI替你表达、替你沟通。
当AI从高墙之上走进生活细节,它不再是技术的象征,而是人性的延伸。
它能让你在婚礼上更从容,也能让生活更温柔、更有秩序。

AI的生活之路

这篇文章只是《让AI深入生活》系列的第一篇。
我希望通过它,让更多人看到AI不是“高科技玩具”,而是一种新的生活方式。

它可以是仪式感的桥梁,是沟通的延伸,是信息的守门人。

后续我会继续分享AI在日常任务中的其他小巧思。
让我们一起,把AI请进生活里。





【声明】内容源于网络
0
0
智擎AI馆
让用户了解智擎未来的AI化转型解决方案,不定期分享技术博客,吐槽行业趣闻
内容 3
粉丝 0
智擎AI馆 让用户了解智擎未来的AI化转型解决方案,不定期分享技术博客,吐槽行业趣闻
总阅读6
粉丝0
内容3