Node接入ChatGPT 的最强对手Claude

由于个人的chatGPT免费版本即将到期, Claude 很火,在网上被说成是 ChatGPT 的最强对手,是 ChatGPT 的替代品。本文我将介绍下 Claude 是什么,以及如何免费使用 Claude.

什么是Claude

看一下它是如何自我介绍的

在这里插入图片描述

Slack

Slack 是一款流行的团队协作和通讯软件。
Claude 官方给我定义了很方便的 Slack 应用 Claude-in-Slack,我们直接把它添加到 Slack 中即可使用。添加的操作也很简单:

先注册 Slack
到 Claude 官网,点击 Add to Slack
在跳转的页面点击 添加到 Slack
在 Slack 中选择 Claude 应用,进入聊天窗口开始使用

接下来使用Slack的api来实现调用Claude, 虽然Claude也有接口申请, 但是一直没有通过, 不知道什么原因, 但是既然在Slack中可以使用Claude, 那就取巧, 通过Slack的api来实现调用Claude吧
Slack的api地址:

api.slack.com/methods

Slack 为我们提供了各个语言的 SDK,我们以 node-slack-sdk 来作为演示示例。

获取Slack Token

为了使用 Slack 的 SDK,我们需要新建一个 Slack APP。

在这里插入图片描述

选择Form scratch, 这里说一下, 我这里带翻译是使用了谷歌插件, 最近这个插件挺火的, 也很好用, 可以安利给大家, 插件的名字是沉浸式翻译, 大家直接去谷歌商店搜索就能找到了.

在这里插入图片描述
输入 app 名称并选择自己的 workspace。

在这里插入图片描述

创建后点击我们的 APP,然后点击左侧栏的 OAuth & Permissions。下拉找到 Scopes,为我们的 User Token 添加 Scope。

在这里插入图片描述

添加需要通过接口访问的权限

在这里插入图片描述

在这里插入图片描述
只有授权了才能够通过sdk调用这些接口哦

这些接口分别代表着不同的权限

在这里插入图片描述
然后我们把 APP 安装到我们的 workspace 中:
这个按钮在auth页面的上面

在这里插入图片描述

安装后,这里会生成我们需要的 User OAuth Token,我们复制这个 Token,后面需要用。

如果更改了权限, 就要重新下载到工作区才会出现效果哈

在这里插入图片描述

获取Claude Bot ID

进入Slack应用页面, 找到对应的Claude应用, 右击选择查看应用详情

在这里插入图片描述

复制Claude的成员ID和频道ID
在这里插入图片描述

Slack Claude Server

在服务端开始来获取应用里面的数据

我们需要安装的依赖有:
https://github.com/slackapi/node-slack-sdk

$ npm install @slack/web-api @slack/socket-mode# Or, if you prefer yarn
$ yarn add @slack/web-api @slack/socket-mode

通过readme,我们可以看到如何像应用中发送一条数据


const { WebClient } = require('@slack/web-api');// An access token (from your Slack app or custom integration - xoxp, xoxb)
const token = process.env.SLACK_TOKEN;const web = new WebClient(token);// This argument can be a channel ID, a DM ID, a MPDM ID, or a group ID
const conversationId = 'C1232456';(async () => {// See: https://api.slack.com/methods/chat.postMessageconst res = await web.chat.postMessage({ channel: conversationId, text: 'Hello there' });// `res` contains information about the posted messageconsole.log('Message sent: ', res.ts);
})();

但是我们需要把这样的数据,做成一个接口的形式, 然后方便客户端调用, 我这里选择了express来创造路由接口, 很方便和快速.

拿到客户端输入的数据之后, 我们需要将Claude返回的数据返回给客户端, readme里面就没有提供例子了.

其实方法就是读取Claude这个应用窗口的历史数据, 拿到最新的这条回复, 通过conversations.history接口来拿取数据.

CALUDE_BOT_ID: 是频道ID
CALUDE_CHANNEL_ID: 是成员ID
CALUDE_TOKEN: 是上面拿到的User OAuth Token

import { WebClient } from '@slack/web-api'
import { Router } from "express";const routes = Router();
// An access token (from your Slack app or custom integration - xoxp, xoxb)
const token = process.env.CALUDE_TOKEN;const web = new WebClient(token);// This argument can be a channel ID, a DM ID, a MPDM ID, or a group ID
const conversationId = process.env.CALUDE_CHANNEL_ID;routes.all("*", function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header('Access-Control-Allow-Headers', 'Content-Type');next();
})function sleep(ms: number) {return new Promise(resolve=>setTimeout(resolve, ms))
}routes.post('/chat-process', async (req, res) => {res.setHeader('Content-type', 'application/octet-stream')try {const { prompt } = req.bodyconst ans = await web.chat.postMessage({ channel: conversationId || '', text: prompt});let firstChunk = truefor(let i = 0; i < 500; i++) {try {// Call the conversations.history method using WebClientconst result = await web.conversations.history({channel: process.env.CALUDE_BOT_ID || '',oldest: ans.ts,limit: 2});const conversationHistory = result.messages;if (!conversationHistory) {sleep(1000)continue}else if(conversationHistory != undefined && Array.isArray(conversationHistory) && conversationHistory[0]?.text?.indexOf('_Typing…_') != -1) {res.write(firstChunk ? `${conversationHistory[0].text}` : `${conversationHistory[0].text}`)firstChunk = falsesleep(1000)continue}res.write(`${conversationHistory[0].text}`)res.end()break;}catch (error) {console.error(error);}}}catch (error) {res.json({err: JSON.stringify(error)})}finally {res.end()}
})export default routes;

将接口的content-Type设置成application/octet-stream, 是为了不用等到Claude完全解答完再返回给客户端, 可以先返回一些内容, 然后慢慢加载, 这样会增强用户体验感, 同时也能防止接口响应时间太长, 用户一直未得到答案

这里设置一个循环500次, 其实就是为了保证500次之后, 能够返回完整的数据, 当然如果提前结束了,就会break退出循环.

Claude Client

我这里是一个vue+vite项目, 核心请求接口代码如下:

async function onConversation() {let message = prompt.valueif (loading.value)returnif (!message || message.trim() === '')returncontroller = new AbortController()scrollToBottom()addMessage('', false)loading.value = trueprompt.value = ''try {const fetchChatAPIOnce = async () => {await fetchCaludeAPIProcess({prompt: message,onDownloadProgress: ({ event }) => {const xhr = event.targetconst { responseText } = xhr// Always process the final lineconst lastIndex = responseText.lastIndexOf('⭐', responseText.length - 2)let chunk = responseTextif (lastIndex !== -1) {chunk = responseText.substring(lastIndex)}list.value[list.value.length - 1].message = chunkscrollToBottom()},})}await fetchChatAPIOnce()}catch (error: any) {const errorMessage = error?.message ?? 'common.wrong'if (error.message === 'canceled') {scrollToBottomIfAtBottom()return}list.value[list.value.length - 1].message = errorMessageconsole.error(errorMessage)scrollToBottomIfAtBottom()}finally {loading.value = false}
}

每次都是以⭐开头, 所以我这边就是去取最后一个⭐开头的数据, 然后渲染到页面就可以了

在这里插入图片描述

最终的效果如下:

在这里插入图片描述
最后提供我的线上链接供大家体验一下:
Claude

好了, 今天的分享到这里就结束了, 感谢观看!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/21580.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

读《EMOQ-TTS: EMOTION INTENSITY QUANTIZATION FOR FINE-GRAINED CONTROLLABLE EMOTIONAL TEXT-TO-SPEECH》

0 Abstract 虽然近年来文本到语音(TTS)的研究取得了显著进展&#xff0c;但仍局限于情感语音合成。为了产生情感话语&#xff0c;大多数作品都利用了从情感标签或参考音频中提取的情感信息。然而&#xff0c;由于话语层面的情绪条件&#xff0c;它们导致了单调的情绪表达。在本…

专家担心 ChatGPT 很快会被用于毁灭性的网络攻击

听到这个新闻&#xff0c;我是挺震惊的&#xff0c;​ChatGPT 近几个月来风靡全球&#xff0c;但就在它以其技术能力让人们惊叹的同时&#xff0c;也有人对其潜在的滥用提出了担忧。 现在&#xff0c;似乎一些 IT 领导者担心它将很快被用于重大网络攻击&#xff0c;并有可能在未…

英文润色网站-英文质量改写改进软件

英文改写软件 英文改写软件是一种全新的工具&#xff0c;它可以方便快捷地对不同语种的图文内容进行批量改写和转换&#xff0c;包括但不限于英语、法语、德语、中文等。无论用户需要将哪种语言的文章进行改写和转换&#xff0c;都可以轻松实现。该软件支持任何文档格式和文本…

OpenAI Translator Bob Plugin Bob上一款翻译、润色、语法修改插件

OpenAI Translator Bob Plugin 一款可以在Bob进行即时翻译的插件。它基于 OpenAI 的 GPT 系列模型&#xff0c;能够提供高质量、准确的翻译服务。该插件支持多种语言的翻译&#xff0c;包括中文、英文、法语、德语、日语等。用户只需在页面中选中需要翻译的文本&#xff0c;然…

pg数据库数据导出

首先得在postgresql的安装包下找到bin目录&#xff0c;找到路径。其次在cmd下面&#xff0c;输入导出路径&#xff1a; 导出数据库的命令&#xff1a; > pg_dump -U postgres -h ip地址 数据库名> f:\data\数据库名.dump >口令&#xff1a;密码

如何进行数据的导出?

如何进行数据的导出&#xff1f; 以前有进行过填写资料并且把资料导出Excel表格&#xff0c;当时就觉得好神奇&#xff0c;又想知道这样的功能是怎么实现的&#xff0c;可是那时的头脑简单&#xff0c;没有知道答案&#xff0c;可是现在我终于知道为什么可以直接导出数据了&am…

图像搜索:以图搜图

以图搜图 随着数字时代的到来&#xff0c;单单的文字搜素已经无法满足人们的搜索了&#xff0c;图像搜索&#xff0c;甚至是视频搜索都已经比较成熟。本文大致讲解下图像搜索&#xff1a; 发展历程 原理 搜索项目&#xff1a;主要分为三个部分——图像特征抽取&#xff0c;构…

图片搜索引擎网站大全,以图搜图网站

当我们需要搜索一些图片的时候使用图片搜索引擎网站可以帮我们更快地找到自己需要的图片&#xff0c;那么有哪些图片搜索引擎网站可以搜索图片呢&#xff1f;下面小编就来和大家分享几个以图搜图的网站。 1.百度图片搜索引擎网站 百度是最大的中文搜索引擎&#xff0c;百度的图…

查找照片的来源

想要知道照片的来源&#xff0c;可以使用百度识图或其他识图工具&#xff0c;但得到的信息可能不多&#xff0c;不过还可以通过多种手段获取更多信息。 以以下照片为例&#xff0c;查找是哪家麦当劳。 &#xff08;1&#xff09;.进入电脑pc端&#xff0c;右键单击照片&#xf…

如何使用谷歌“以图找图”图片搜索功能

谷歌不愧为搜索界的大佬&#xff0c;谷歌在前几个月开放了一个新功能&#xff0c;叫做“图像搜索”&#xff0c;也就是说&#xff0c;可以用图片搜索到图片&#xff0c;图片可以是网络链接的&#xff0c;也可以是上传的。有了这个功能后&#xff0c;人肉搜索 又上了一个新的层次…

BERT模型解析

1. 概述 Bidirectional Encoder Representation from Transformers&#xff08;BERT&#xff09;[1]&#xff0c;即双向Transformer的Encoder表示&#xff0c;是2018年提出的一种基于上下文的预训练模型&#xff0c;通过大量语料学习到每个词的一般性embedding形式&#xff0c…

接入 GPT-4 的 AI 虚拟女友,一周狂挣 50 万!

公众号关注 “GitHubDaily” 设为 “星标”&#xff0c;每天带你逛 GitHub&#xff01; 随着 ChatGPT 的爆火&#xff0c;互联网上也衍生出不少令人直呼脑洞大开的 AI 应用。 最近&#xff0c;国外一位名为 Caryn Marjorie 的小姐姐搞了个骚操作&#xff0c;基于 GPT-4 调教出来…

AI读心重磅突破登Nature!大脑信号1秒被看穿,还能预测未来画面

最近&#xff0c;来自洛桑联邦理工学院的研究团队提出了一种全新的方法&#xff0c;可以用AI从大脑信号中提取视频画面。论文已登Nature&#xff0c;却遭网友疯狂「打假」。 现在&#xff0c;AI不仅会读脑&#xff0c;还会预测下一个画面了&#xff01; 利用AI&#xff0c;一个…

快看!这只猫两次登上 Github Trending !!!

前几天我在逛 Github Trending&#xff0c;无意间发现这个 Postcat 登上榜单 ! 好奇心驱使我去了解这个 Postcat。 近期它上新了几个有意思的插件&#xff0c;其中 ChatGPT 插件&#xff0c;用户可以直接省去复杂的流程&#xff0c;直接体验 ChatGPT&#xff0c;懂的都懂&#…

baichuan-7B模型介绍及微调

文章目录 baichuan-7B介绍baichuan-7B 推理baichuan-7B 微调使用微调后的模型推理 baichuan-7B介绍 2023年6月15日&#xff0c;搜狗创始人王小川创立的百川智能公司&#xff0c;发布了70 亿参数量的中英文预训练大模型——baichuan-7B。 baichuan-7B 基于 Transformer 结构&a…

与老范对谈:ChatGPT等AIGC技术对内容产业的影响和趋势判断

昨日&#xff0c;我和老范线下面基&#xff0c;用一下午的时间深入探讨了AIGC对内容产业影响的话题&#xff0c;这次聊天收获满满&#xff0c;我迫不及待将这次讨论的内容整理成了文章。但在这之前&#xff0c;请让我先介绍一下老范。 老范曾就职于盛大创新院、猎豹移动&#x…

安卓星座查询app

一款简单的星座查询app 运行截图&#xff1a; 代码部分&#xff1a; 采用listview&#xff0c;和intent跳转和intent传值实现该功能。 界面代码1&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"h…

我开发的“小灵”,自认为比微软“小冰”好多了

不管是微软的刻意炒作&#xff0c;还是腾讯的出于安全的考虑&#xff0c;总之&#xff0c;东嫂捧出来的“小冰”就这么没了。这件事无论最后结果如何&#xff0c;微软肯定是达到目的了。这一搞&#xff0c;被微信封杀&#xff0c;卖卖萌&#xff0c;恶心一下微信&#xff0c;博…

pyqt实现聊天机器人

环境要求 通过调用openai接口实现聊天机器人功能&#xff0c;支持各种参数得调整&#xff0c;文章末尾有各个参数得说明 python3.9pyqt5环境安装 pip install pyqt5 pip install openai pip install pyinstaller源码如下&#xff1a; chat.py import sys from PyQt5.QtWid…

【微信聊天机器人】基于python实现的PC端个人微信聊天机器人

文章目录 前言一、运行环境二、使用步骤1.引入库2.根据文本内容自动生成回复3.接收消息的回调函数4.启动客户端5.程序入口 三、代码全文总结 前言 微信自动回复、聊天机器人应该是一个很多人迫切需要的功能&#xff08;如时间管理大师&#xff09;&#xff0c;网上能搜到的大多…