使用 JavaScript 编写 LLM 支持的应用程序，听起来很疯狂，不是吗？ 对于严重依赖外部 API 和库（如 LangChain）的应用程序来说，使用 JavaScript 而不是 Python 确实有好处。 在传统的 Web 应用程序模型中，您需要开发 HTML/CSS/JS 前端和您首选的服务器端语言后端。 然而，随着用于处理 LLM 的 JavaScript 库（例如 LangChain 和 js-tiktoken）的出现，您现在可以在没有后端层的情况下创建支持 AI 的应用程序。

客观地说，选择完全客户端方法确实会限制您的能力。 然而，当您将完整的客户端应用程序与强大的 Electron 桌面框架相结合时，许多限制都被消除了。 Electron 使您能够将前端 Web 应用程序打包为跨平台桌面应用程序，可以在各种特定于平台的应用程序商店中发布。

Web 应用程序中通常需要的功能（例如帐户管理）在桌面空间中变成了可选功能。 此外，您还可以访问本机插件来与主机操作系统交互，从而使您的应用程序能够扩展到常规 Web 应用程序的范围之外。

在本文中，我们将探讨将 LLM 支持的应用程序的概念验证 (POC) JavaScript 实现转换为全面的桌面体验的过程。 本文中讨论的代码是开源的，并根据 MIT 许可证获得许可，因此请随意使用它，或者更好的是，分叉它并贡献您能想到的任何增强和改进。

当我厌倦了手动将文章复制并粘贴到 ChatGPT 中进行编辑时，我萌生了这个想法。 之前在 Python 中使用过 LangChain，我尝试创建一个简单的单页 React 应用程序，它可以从输入中获取文本，并通过 JS 中的 LangChain 对其进行处理，返回编辑后的文本。 LangChain 的 API 在 Python 和 JavaScript 实现中都非常相似，这使得任何熟悉其中一种语言的人都可以轻松导航另一种语言。 有趣的是，LangChain 代码是 POC 中最简单的部分。 下面提供了 LLM 交互的代码。

const openAIApiKey = process.env.REACT_APP_OPENAI_API_KEY;const modelName =  "gpt-4";const enc = encodingForModel(modelName);const chunk_token_size = 1000;const llm = new ChatOpenAI({modelName: modelName, temperature: 0, openAIApiKey: openAIApiKey});const promptTemplate = ChatPromptTemplate.fromPromptMessages([    SystemMessagePromptTemplate.fromTemplate(      "You are an expert copy editor. It is your task to take a piece of an article and proof-read it for grammar and style. Provide a rewritten copy of the article portion back to the human."    ),    HumanMessagePromptTemplate.fromTemplate("{input}")  ])const chain = new ConversationChain({prompt: promptTemplate, llm: llm});...const openAICalls = chunks.map((chunk, idx) => chain.call({input: chunk}));

接下来，我开发了一种自定义文本分块算法。 我想避免在段落中间分割文本，因此我利用内置的分割方法根据换行符分割文本。 这是段落分割的粗略近似，但无法使用 spaCy 或 NLTK 等工具来进行更精确的分割，因此这是最佳选择。 然后，我检查了分割中的每个字符串，并使用 js-tiktoken 计算了令牌计数。 该计数用于将分割组合成具有最大令牌数量的块。 这种方法确保段落不会被分割，同时允许单独调用 LLMChain，这些调用稍后可以重新组装成完全编辑的文本。

经过紧张的 24 小时和大约 250 行 JavaScript，我的 POC 完成了。 当我将最新的 Medium 文章粘贴到网站上并通过单击按钮收到校对副本时，我知道我有一些值得分享的东西。

我很幸运有在 Medium 上写作的朋友。 我与他们分享了我的简单 POC，他们很感兴趣！ 然而，他们缺乏下载 React 代码库、安装其依赖项并使用适当的环境变量运行它的技术专业知识。 他们需要比自托管网络应用程序更用户友好的东西。 他们需要一种易于下载和使用的产品。

在开发人工智能支持的产品时，在流程的早期考虑每用户成本至关重要。 软件即服务 (SaaS) 是人工智能应用程序的一种流行模式，因为它很容易通过帐户获利。 此外，确保用户只能访问他们已付费的内容也很简单。 然而，订阅的缺点是，当要求为另一个每月应用程序付费时，许多用户会感到疲劳。

为了避免这个问题，我决定让用户提供自己的 OpenAI API 密钥。 我已经看到这种方法在 NextCloud 等其他开源项目中取得了成功。 这样，我就避免了为用户的人工智能使用付费的问题。 这也是一个有利于消费者的举措，因为 API 是按使用量付费的，用户无需像许多人工智能驱动的网络应用程序那样购买大量有趣的货币代币。

我的其他 Medium 作家同事质疑我为什么没有抓住机会将这个应用程序变成一项业务。 这个概念既合理又有效，那为什么不自己当老板呢？ 我有点不好意思的回答是，我更喜欢管理开源项目而不是企业。 然而，这只是故事的一部分。 我还旨在为用户提供一种工具，无需按月订阅即可使用强大的人工智能写作功能。 自 2008 年以来，我一直是开源软件的广泛用户，我坚信这是个人或小团体产生重大影响的最佳方法。

抛开业务考虑，是时候考虑如何将这个 POC 开发成一个成熟的 OSS 桌面应用程序了。 作为一名主要编写后端 Python 代码并偶尔使用 JavaScript 创建 Web 应用程序的开发人员，Electron 是一个自然的选择。 它不仅使我能够使用熟悉的 Web 技术，而且还有助于轻松跨平台部署到所有主要平台，包括 Linux。

经过一些研究，我很快发现构建 Electron 应用程序的方法与 Web 应用程序一样多。 POC 是使用 React 和 Material UI 组件编写的，因此我可以在选择使用 Electron 的任何解决方案中继续使用这些组件，这一点至关重要。 在测试了几个不同的选项后，我可以自信地说 Electron-React-Boilerplate 是使用 Electron 和 React 进行构建的最佳解决方案。

该项目提供了一个全面的基础 GitHub 存储库。 除了提供一个可供进一步开发的简单 Web 应用程序之外，它还包括 GitHub Actions，用于在每个受支持的操作系统上测试代码库、构建生成的二进制文件并将其发布为 GitHub 版本，以及扫描代码是否存在漏洞。 从开发角度来看，安装依赖项后，单个 npm start 命令即可启动项目。 Electron-React-Boilerplate 使我能够采用结构良好、固执己见的设置，并专注于构建我的应用程序。

下一阶段涉及将所有硬编码参数转换为 React 状态，以便将来包含在设置面板中。 这包括 OpenAI API 密钥，我之前已使用环境变量将其传递到 Web 应用程序中。 我决定将设置分为“常规”和“高级”，以避免用户不知所措。 请参阅下面的屏幕截图以供参考。

一旦建立了基本设置，我的重点就从编码转移到项目的其他方面。 第一个任务是创建应用程序徽标。 虽然我不是艺术家，但我确实有一个 OpenAI API 密钥，我用它通过 openai 命令行实用程序提示 DALL-E 来快速生成徽标。 接下来，我编写了一个简短的自述文件并将新徽标添加到存储库中。

经过一些额外的调整，我成功地将我的 POC 转变为测试版质量的桌面应用程序。 我提出了一个简单的想法，并将其开发成可供其他人使用的产品。 虽然将 POC 发展为产品的过程从来都不是一帆风顺的，但拥有正确的工具可以显着简化该过程。 如果我选择使用 Python 和 JavaScript 来开发我的开源项目，那么我需要维护的代码库数量将增加一倍，并将我的受众限制为那些愿意自行托管 Web 应用程序的人。 然而，Electron 使我能够创建和分发一个人们可以轻松下载和使用的应用程序。

我创建的项目称为主编。 我认为它有潜力真正对很多人有用。

想帮助我将其提升到一个新的水平吗？ 使用它，提交错误报告，并贡献代码和文档。 无论您想如何互动，我都乐意与您互动。