AI女朋友 -- 一个傲娇女友,嘴上刻薄但内心关心你

2024-03-25 04:52

本文主要是介绍AI女朋友 -- 一个傲娇女友,嘴上刻薄但内心关心你,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 前言
  • 一、成果展示
    • 1、ai女友
    • 2、留言板
  • 二、实现思路
  • 三、难点问题
  • 四、总结


前言

在免费API寻找过程中,发现了ai女友的接口,打算从这个接口入手,做出给人一种有女朋友的、温柔的、亲近的、容易给的感觉!


一、成果展示

 1、AI女友回应功能


 

2、留言板功能


二、实现思路

1、ai女友

利用AI女友接口,我输入一句,女友回答一句,然后将对话存入数据库,按照时间顺序查询出来显示即可。

ai女友接口:https://api.lolimi.cn/API/AI/jj.php?msg=你好

例如我输入你好:

回答:

{"code": 200,"data": {"output": "哼,你今天终于想起我了?看在你这么诚心的份上,我就勉为其难地回应你吧。","content": "你好"}
}

html代码:

<div class="container"><div class="content"><div class="item item-center"><span>昨天 12:35</span></div><div class="item item-center"><span>你已添加了凡繁烦,现在可以开始聊天了。</span></div><div class="item item-left"><div class="avatar"><img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" /></div><div class="bubble bubble-left">您好,我在武汉,你可以直接送过来吗,我有时间的话,可以自己过去拿<br/>!!!<br/>123</div></div><div class="item item-right"><div class="bubble bubble-right">hello<br/>你好呀</div><div class="avatar"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" /></div></div><div class="item item-center"><span>昨天 13:15</span></div><div class="item item-right"><div class="bubble bubble-right">刚刚不在,不好意思</div><div class="avatar"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" /></div></div><div class="item item-left"><div class="avatar"><img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" /></div><div class="bubble bubble-left">没事<br/>你继续!</div></div><div class="item item-left"><div class="avatar"><img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" /></div><div class="bubble bubble-left">看到了<br/>在下面</div></div><div class="item item-left"><div class="avatar"><img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" /></div><div class="bubble bubble-left">你发一个<br/>刚刚网卡了</div></div><div class="item item-right"><div class="bubble bubble-right">可以<br/>一会儿再发给你</div><div class="avatar"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" /></div></div></div><div class="input-area"><textarea name="text" id="textarea"></textarea><div class="button-area"><button id="send-btn" onclick="send()">发 送</button></div></div></div>

css代码 

*{padding: 0;margin: 0;}body{height: 100vh;width: 100%;display: flex;align-items: center;justify-content: center;}.container{height: 760px;width: 900px;border-radius: 4px;border: 0.5px solid #e0e0e0;background-color: #f5f5f5;display: flex;flex-flow: column;overflow: hidden;}.content{width: calc(100% - 40px);padding: 20px;overflow-y: scroll;flex: 1;}.content:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);}.bubble{max-width: 400px;padding: 10px;border-radius: 5px;position: relative;color: #000;word-wrap:break-word;word-break:normal; }.item-left .bubble{margin-left: 15px;background-color: #fff;}.item-left .bubble:before{content: "";position: absolute;width: 0;height: 0;border-left: 10px solid transparent;border-top: 10px solid transparent;border-right: 10px solid #fff;border-bottom: 10px solid transparent;left: -20px;}.item-right .bubble{margin-right: 15px;background-color: #9eea6a;}.item-right .bubble:before{content: "";position: absolute;width: 0;height: 0;border-left: 10px solid #9eea6a;border-top: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid transparent;right: -20px;}.item{margin-top: 15px;display: flex;width: 100%;}.item.item-right{justify-content: flex-end;}.item.item-center{justify-content: center;}.item.item-center span{font-size: 12px;padding: 2px 4px;color: #fff;background-color: #dadada;border-radius: 3px;-moz-user-select:none; /*火狐*/-webkit-user-select:none; /*webkit浏览器*/-ms-user-select:none; /*IE10*/-khtml-user-select:none; /*早期浏览器*/user-select:none;}.avatar img{width: 42px;height: 42px;border-radius: 50%;}.input-area{border-top:0.5px solid #e0e0e0;height: 150px;display: flex;flex-flow: column;background-color: #fff;}textarea{flex: 1;padding: 5px;font-size: 14px;border: none;cursor: pointer;overflow-y: auto;overflow-x: hidden;outline:none;resize:none;}.button-area{display: flex;height: 40px;margin-right: 10px;line-height: 40px;padding: 5px;justify-content: flex-end;}.button-area button{width: 80px;border: none;outline: none;border-radius: 4px;float: right;cursor: pointer;}/* 设置滚动条的样式 */::-webkit-scrollbar {width:10px;}/* 滚动槽 */::-webkit-scrollbar-track {-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);border-radius:8px;}/* 滚动条滑块 */::-webkit-scrollbar-thumb {border-radius:10px;background:rgba(0,0,0,0);-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);}

 js代码

function send(){let text = document.querySelector('#textarea').value;if(!text){alert('请输入内容');return ;}let item = document.createElement('div');item.className = 'item item-right';item.innerHTML = `<div class="bubble bubble-left">${text}</div><div class="avatar"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" /></div>`;document.querySelector('.content').appendChild(item);document.querySelector('#textarea').value = '';document.querySelector('#textarea').focus();//滚动条置底let height = document.querySelector('.content').scrollHeight;document.querySelector(".content").scrollTop = height;}

 效果图

2、留言板功能

我输入留言,存入数据库,然后按照时间顺手查询出来即可。

源代码如下:

<template><div class="message-board"><div class="message-input"><input v-model="newMessage" @keyup.enter="postMessage" placeholder="在这里留言..."><button @click="postMessage">发送</button></div><div class="messages"><div v-for="(message, index) in messages" :key="index" class="message"><div class="message-content">{{ message.content }}</div><div class="message-meta"><span class="message-time">{{ message.time }}</span></div></div></div></div>
</template><script>
export default {data() {return {newMessage: '',messages: []};},methods: {postMessage() {if (this.newMessage.trim() !== '') {this.messages.push({content: this.newMessage,time: this.getCurrentTime()});this.newMessage = '';}},getCurrentTime() {const now = new Date();const hours = now.getHours().toString().padStart(2, '0');const minutes = now.getMinutes().toString().padStart(2, '0');return `${hours}:${minutes}`;}}
};
</script><style scoped>
.message-board {max-width: 600px;margin: 20px auto;padding: 20px;border: 1px solid #ccc;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}.message-input {display: flex;align-items: center;margin-bottom: 20px;
}.message-input input {flex: 1;padding: 10px;border: 1px solid #ccc;border-radius: 5px;margin-right: 10px;
}.message-input button {padding: 10px 20px;background-color: #007bff;color: #fff;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s ease;
}.message-input button:hover {background-color: #0056b3;
}.messages {max-height: 300px;overflow-y: auto;
}.message {background-color: #f0f0f0;padding: 10px;margin-bottom: 10px;border-radius: 5px;
}.message-meta {display: flex;justify-content: flex-end;
}.message-time {font-size: 12px;color: #999;
}
</style>


三、难点问题

1、如何在前端显示两个人的对话?

设置各自的userId,例如我的userId为1,女友的userId为2,按照时间顺序在后端进行查询。在前端查询显示时,使用v-if和v-else,如果userId为1,则显示我,否则显示女友。

 <div v-for="item in list" :key="item.id"><div v-if="item.userId === 2" class="item item-left"><div class="avatar"><img :src="item.avatar" /></div><div class="bubble bubble-left">{{item.content}}</div></div><div v-else class="item item-right"><div class="bubble bubble-right">{{item.content}}</div><div class="avatar"><img :src="item.avatar" /></div></div></div>

2、如何或去textarea输入的值?

<textarea name="content" id="content" ></textarea>const content = document.getElementById("content").value;

3、如何让滚动条始终在最底端?

var container = document.querySelector('.container');
container.scrollTop = container.scrollHeight;


四、总结

过程很难但也很有成就感,有问题在网上基本上都能找得到,只不过需要一个一个去试。

如果这篇文章对你有帮助的话请点点赞和收藏。如果文章有问题的话也可以私信我或指出来!!!

感谢你的支持!!!

这篇关于AI女朋友 -- 一个傲娇女友,嘴上刻薄但内心关心你的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/843888

相关文章

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

AI绘图怎么变现?想做点副业的小白必看!

在科技飞速发展的今天,AI绘图作为一种新兴技术,不仅改变了艺术创作的方式,也为创作者提供了多种变现途径。本文将详细探讨几种常见的AI绘图变现方式,帮助创作者更好地利用这一技术实现经济收益。 更多实操教程和AI绘画工具,可以扫描下方,免费获取 定制服务:个性化的创意商机 个性化定制 AI绘图技术能够根据用户需求生成个性化的头像、壁纸、插画等作品。例如,姓氏头像在电商平台上非常受欢迎,

豆包 MarsCode 不允许你还没有女朋友

在这个喧嚣的世界里,爱意需要被温柔地唤醒。为心爱的她制作每日一句小工具,就像是一场永不落幕的浪漫仪式,每天都在她的心田播撒爱的种子,让她的每一天都充满甜蜜与期待。 背景 在这个瞬息万变的时代,我们都在寻找那些能让我们慢下来,感受生活美好的瞬间。为了让这份浪漫持久而深刻,我们决定为女朋友定制一个每日一句小工具。这个工具会在她意想不到的时刻,为她呈现一句充满爱意的话语,让她的每一天都充满惊喜和感动

从去中心化到智能化:Web3如何与AI共同塑造数字生态

在数字时代的演进中,Web3和人工智能(AI)正成为塑造未来互联网的两大核心力量。Web3的去中心化理念与AI的智能化技术,正相互交织,共同推动数字生态的变革。本文将探讨Web3与AI的融合如何改变数字世界,并展望这一新兴组合如何重塑我们的在线体验。 Web3的去中心化愿景 Web3代表了互联网的第三代发展,它基于去中心化的区块链技术,旨在创建一个开放、透明且用户主导的数字生态。不同于传统

AI一键生成 PPT

AI一键生成 PPT 操作步骤 作为一名打工人,是不是经常需要制作各种PPT来分享我的生活和想法。但是,你们知道,有时候灵感来了,时间却不够用了!😩直到我发现了Kimi AI——一个能够自动生成PPT的神奇助手!🌟 什么是Kimi? 一款月之暗面科技有限公司开发的AI办公工具,帮助用户快速生成高质量的演示文稿。 无论你是职场人士、学生还是教师,Kimi都能够为你的办公文

Andrej Karpathy最新采访:认知核心模型10亿参数就够了,AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人,AI大神Andrej Karpathy,曾是OpenAI联合创始人之一,特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ,宣布将长期致力于AI原生教育。 近日,Andrej Karpathy接受了No Priors(投资博客)的采访,与硅谷知名投资人 Sara Guo 和 Elad G

AI hospital 论文Idea

一、Benchmarking Large Language Models on Communicative Medical Coaching: A Dataset and a Novel System论文地址含代码 大多数现有模型和工具主要迎合以患者为中心的服务。这项工作深入探讨了LLMs在提高医疗专业人员的沟通能力。目标是构建一个模拟实践环境,人类医生(即医学学习者)可以在其中与患者代理进行医学

AI行业应用(不定期更新)

ChatPDF 可以让你上传一个 PDF 文件,然后针对这个 PDF 进行小结和提问。你可以把各种各样你要研究的分析报告交给它,快速获取到想要知道的信息。https://www.chatpdf.com/

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡,拥有登录权限的账号密码,一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 (如果是1集群把75改成66) 交互式开发 执行器选Terminal 密码随便设一个(需记住) 工作空间:私有数据、全部文件 加速器选GeForce_RTX_2080_Ti

AI Toolkit + H100 GPU,一小时内微调最新热门文生图模型 FLUX

上个月,FLUX 席卷了互联网,这并非没有原因。他们声称优于 DALLE 3、Ideogram 和 Stable Diffusion 3 等模型,而这一点已被证明是有依据的。随着越来越多的流行图像生成工具(如 Stable Diffusion Web UI Forge 和 ComyUI)开始支持这些模型,FLUX 在 Stable Diffusion 领域的扩展将会持续下去。 自 FLU