前端大模型入门(二):掌握langchain的核心Runnable接口

本文涉及的产品
视觉智能开放平台,分割抠图1万点
NLP自然语言处理_高级版,每接口累计50万次
视觉智能开放平台,视频资源包5000点
简介: Langchain.js 是 Langchain 框架的 JavaScript 版本,专为前端和后端 JavaScript 环境设计。最新 v0.3 版本引入了强大的 Runnable 接口,支持灵活的执行方式和异步操作,方便与不同模型和逻辑集成。本文将详细介绍 Runnable 接口,并通过实现自定义 Runnable 来帮助前端人员快速上手。

Langchain.js 是 Langchain 框架的 JavaScript 版本,专为前端和后端 JavaScript 环境设计。在最新的 v0.3 版本中,引入了一个强大的接口——Runnable。该接口提供了一个灵活的执行方式,可以与不同类型的模型和逻辑无缝集成。

本文将重点讲解 Runnable 接口,并通过实现一个自定义的 Runnable 来帮助前端人员快速上手。

上一篇文章介绍了如何 利用langchain快速开发llm应用,后续文章将基于此逐步展开 - 不仅是开发应用,而是一起深入学习、开发高质量的应用

一. 什么是 Runnable?
Runnable 是 Langchain.js v0.3 中的一个核心接口,它代表了一个可以被执行的操作。通过这个接口,开发人员可以将模型、处理逻辑或其他任务封装为可执行对象,方便统一管理和使用。

Runnable 的基本特性包括:

输入与输出类型:可以灵活设置输入和输出的数据格式。
链式调用:Runnable 可以被连接起来,形成执行链。
异步支持:它支持异步操作,方便与 API 或模型交互。
简而言之,Runnable 是一个抽象概念,可以帮助我们在复杂的前端应用中更好地组织代码逻辑。

二. Runnable 接口的基本用法
Langchain.js 中的 Runnable 提供了一个基础接口,允许我们定义任何类型的执行逻辑。它的核心方法是 invoke,该方法接收输入数据并返回执行结果。

interface Runnable { invoke(input: any): Promise; }
通过实现这个接口,我们可以将各种自定义逻辑封装到一个 Runnable 中。

举例:自定义 Runnable
假设我们有一个简单的需求:将用户输入的文本进行大写转换,并输出转换后的结果。我们可以通过实现一个自定义的 Runnable 来完成这一任务。

import { Runnable } from 'langchain';
class UppercaseRunnable implements Runnable {
async invoke(input: string): Promise { // 将输入的字符串转换为大写 return
input.toUpperCase();
}
}
在这个例子中,我们创建了一个 UppercaseRunnable 类,它实现了 Runnable 接口,并在 invoke 方法中将输入的字符串转换为大写。

三. 将自定义模型与 Runnable 集成
除了处理简单的字符串操作,我们还可以通过 Runnable 接口将第三方模型或 API 集成到我们的前端应用中。接下来,我们来实现一个稍复杂的例子:通过 Runnable 封装一个自定义的文本分类模型。

实现自定义模型的 Runnable
假设我们有一个文本分类模型,它通过某个 API 进行分类任务。我们可以将这个模型封装到一个 Runnable 中,便于在前端应用中使用。

import { Runnable } from "langchain";
class TextClassificationRunnable implements Runnable {
private apiUrl: string;
constructor(apiUrl: string) {
this.apiUrl = apiUrl;
}
async invoke(input: string): Promise {
const response = await fetch(this.apiUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text: input }),
});
const data = await response.json();
return data.category;
}
}
在这个示例中,TextClassificationRunnable 类将文本发送到指定的 API 进行分类,并返回分类结果。通过这种方式,我们可以很方便地将模型 API 封装在前端应用中。

使用自定义的 Runnable
现在我们已经实现了两个不同的 Runnable,我们可以将它们结合起来,构建一个简单的执行链。在这个链中,我们将首先将用户输入的文本转换为大写,然后进行文本分类。

async function main() {
const uppercaseRunnable = new UppercaseRunnable();
const textClassificationRunnable = new TextClassificationRunnable(
"https://api.com/v1"
);
const input = "hello world"; // 首先将文本转换为大写
const uppercasedInput = await uppercaseRunnable.invoke(input); // 然后将大写文本发送到分类模型
const category = await textClassificationRunnable.invoke(uppercasedInput);
console.log(分类结果: ${category});
}
main();
在这个例子中,我们展示了如何通过 Runnable 接口组合不同的操作,使得代码逻辑更加清晰且可复用。

四 小结
通过 Runnable 接口,Langchain.js v0.3 为前端开发人员提供了一种简洁而强大的方式来封装和管理复杂的逻辑。无论是简单的文本处理任务,还是与第三方模型的集成,Runnable 都能提供足够的灵活性。

对于前端开发人员而言,学习和掌握 Langchain.js 的 Runnable 接口,不仅可以提升开发效率,还可以帮助我们更好地构建现代化的 AI 驱动应用。

相关实践学习
阿里云百炼xAnalyticDB PostgreSQL构建AIGC应用
通过该实验体验在阿里云百炼中构建企业专属知识库构建及应用全流程。同时体验使用ADB-PG向量检索引擎提供专属安全存储,保障企业数据隐私安全。
AnalyticDB PostgreSQL 企业智能数据中台:一站式管理数据服务资产
企业在数据仓库之上可构建丰富的数据服务用以支持数据应用及业务场景;ADB PG推出全新企业智能数据平台,用以帮助用户一站式的管理企业数据服务资产,包括创建, 管理,探索, 监控等; 助力企业在现有平台之上快速构建起数据服务资产体系
相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
185 2
|
2月前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
|
1月前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
20 3
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
117 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
42 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
2月前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
2月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
2月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
127 1