IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    好消息,好消息,前端可以使用免费的ai模型构建一个ai聊天会话了

    夕水发表于 2025-05-08 16:10:41
    love 0

    前言

    前往openrouter ai申请一个免费的 key,然后使用ew-chat我写的这个ai聊天,就可以完成一个聊天会话网页。

    在线地址。

    在线地址由于没有api\_key,所以询问问题会报错。

    效果如下图所示:

    聊天会话的数据都使用永久会话存储在本地,以下是这个聊天会话的详细功能介绍。

    说明:这个项目是使用trae编辑器帮忙编写,然后本人再修补一些trae处理不了的问题完成的。

    功能分析

    这个聊天会话包含了多个功能。

    1. 多语言切换
    2. 主题切换,包含深色和浅色2种主题模式
    3. 下载ai回答记录。
    4. 可以刷新回答,也可以停止会话。
    5. 上传文件并发送。
    6. 新增会话,编辑会话名字,删除会话,清除历史会话等。
    7. 内容渲染基于markdown,包含代码高亮,复制等功能。
    8. 响应式网站。

    技术栈

    1. highlight.js来实现代码高亮
    2. ew-message消息提示框插件
    3. ew-responsive-store实现永久会话存储
    4. marked来实现内容渲染

    具体功能

    具体功能如下图所示:

    核心api原理

    核心api请求主要是如下这一段代码。

    const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
        method: 'POST',
        headers: {
                    'Authorization': `Bearer ${API_KEY}`,
                    'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            model: MODEL,
            messages: chats.value[chatId].messages.map(msg => ({
                role: msg.role,
                content: msg.content
            })),
            stream: true
        })
    });

    可以看到我们只要申请了key,就可以使用这个接口,然后得到ai回答的数据,我们通过fetch向openrouter ai发送请求就行了。

    感兴趣的可以看看源码,自行下载下来体验吧。如果觉得有用,希望不吝啬点赞收藏并给个star。



沪ICP备19023445号-2号
友情链接