原文：
towardsdatascience.com/creating-a-frontend-for-your-ml-application-with-vercel-v0-a25179ea1170
为你的机器学习应用程序开发一个干净且吸引人的网站可能会很困难，尤其是如果你的主要工作是后端或机器学习任务。就我个人而言，我主要致力于开发机器学习模型和自动化任务，这意味着我不花太多时间编写前端代码或与设计打交道。我经常使用Streamlit来快速部署我的机器学习模型，而且我认为 Streamlit 在快速使机器学习模型可用方面仍有其位置。然而，Streamlit 仅应用于初步测试；如果你想吸引消费者访问你的网站，你必须开发一个看起来更好的页面，以吸引并留住访问你页面的消费者。
在这篇文章中，我将描述我是如何使用v0 by Vercel快速为我的挪威法院判决的 RAG 搜索应用程序开发一个看起来不错的网站的。我之前已经写过一篇关于开发 RAG 搜索的单独文章。最好的部分是，它完全免费使用，只要你保持在提示词配额内，你就可以免费获得它们。
在这篇文章中，我讲述了如何使用 v0 by Vercel 开发一个看起来吸引人的前端应用程序，即使你几乎没有前端经验。图片由 ChatGPT 提供。
免责声明：我与 v0 by Vercel 没有任何关联或关系。这仅仅是一个我使用过的工具，因此我写这篇文章是为了分享我是如何使用这个工具的。
你可以在下面的链接中找到这篇文章中创建的网站：
动机
我写这篇文章的动机是为我开发的一个 RAG 搜索应用创建一个看起来很酷的网站。然而，我通常觉得编写前端代码进行设计（即编写代码使网站看起来很好）特别无聊。正因为如此，我在开发看起来好的网站方面也很糟糕，我发现很难创建吸引消费者的吸引人的设计。以前，在开发 ML 应用时，我使用 Streamlit 来托管我的应用。Streamlit 在需要查看消费者是否需要您的产品时的早期测试阶段表现良好。然而，如果您想推出产品并吸引消费者，Streamlit 就不够了。在我看来，Streamlit 看起来还可以，但它也给人一种廉价的感觉，表明您没有花很多时间在您的产品上工作（即使您可能已经花费了大量时间开发应用程序的后端，前端仍然会给人一种这样的感觉）。因此，我想为我的应用程序创建一个更具吸引力的网站，因此，我开始使用 Vercel 的 v0 来帮助我开发这个网站。
您可以在下面阅读关于我使用 Streamlit 开发的另一个 SaaS 应用的介绍：
目录
· 动机 · 从 v0 开始 · 使用 v0 开发您的前端 · 使用 v0 迭代您的网站 · 部署 · 结论
从 v0 开始
您可以在Vercel 的网站上免费访问 v0。您应该注意两个主要点：
-
免费层每天只提供一定数量的提示，所以如果您不想为服务付费，您应该尽量节约使用提示。
-
您应该使用 Next.js，因为 v0 主要是为此而制作的
我在开发前端应用程序方面经验不多，并且之前从未使用过 Next JS，但这个配额对我来说足够开发本文中突出的网站。此外，你总是可以等到第二天，你的配额将会重新充能。如果你需要更高的每日使用限制，你也可以每月支付 20 美元以获得高级访问权限。
使用 v0 开发你的前端
我的应用程序是一个简单的 RAG 搜索，用户输入一个提示，我的应用程序会提供一个答案以及用于该答案的来源。因此，我有一个简单的后端，只有一个端点，它从前端接收用户的提示。端点处理这个请求，并返回一个文本（RAG 答案）和一系列代表 GPT 用于生成响应文本的对象。
我对 v0 的初始提示是：
i need a fancy looking website for my rag search application.
I already have an endpoint to perform the ragging (takes in a prompt,
and return a list of texts i want to render). Can you make the
frontend application for my app?
这是 v0 提出的原始设计：
根据我的初始提示设计的网站 v0。图片由作者提供。
我认为这个设计看起来相当不错。它还增加了当我在上面悬停并点击字段和按钮时突出显示字段的功能。这可能是需要我花费数小时编写的代码，例如获取颜色、定位以及悬停和点击效果。这展示了 v0 已经为我节省了数小时的工作时间。此外，你还可以要求对前端代码进行特定的调整，例如不同的颜色等，v0 将为你创建一个新的网站。V0 还在聊天中展示了代码的预览，这意味着你可以在将其放入自己的代码之前看到它的样子。
我还注意到使用 GPT-4o 和使用 Vercel 的 v0 之间存在显著的差异。当然，考虑到你可以提出各种各样的问题，GPT-4o 是一个更好的 LLM。然而，当涉及到开发前端代码时，v0 在输出质量和用户体验方面远胜于 GPT-4o。在使用 GPT-4o 开发前端代码时，我经常遇到代码表现不符合预期的问题，例如颜色看起来很奇怪，对象的定位不准确，等等。而 v0 则不同，它可以从一个单一的提示中开发出一个看起来吸引人的网站。对于需要花费数小时开发此类网站（并且可能不喜欢编写前端代码）的人来说，这非常有用。
使用 v0 迭代你的网站
将 v0 的代码复制到 next.js 项目中后，我开始迭代网站。由于我在开发前端应用方面经验不足，这花了我一些时间，尽管我可以通过提示 GPT-4o 和 Vercel 的 v0 来解决这个问题。这些问题是设置 API 调用到我的后端和一般的包问题。v0 by Vercel 使用了大量的Shadcdn 代码，您必须安装它（而且 v0 没有通知我我必须安装它）。您可以在这里了解如何添加 Shadcdn 组件。
我想要添加的几个元素
-
ChatGPT 回答用户问题的响应
-
ChatGPT 回答问题所使用的来源的简洁概述
-
对于概述中的每个组件，都有一个详细页面，您可以查看每个来源的更多具体信息
-
可折叠文本以使网站更整洁
此图展示了我的网站，我在那里提出问题，GPT 提供了响应文本。由于该应用程序是为挪威法律范围内的应用而设计的，文本是挪威语。您可以看到文本被提供在一个整洁的框中，并且您可以切换框以显示更多文本。图片由作者提供。
此图展示了用户提出问题，ChatGPT 的简短回复以及 ChatGPT 提供答案所使用的来源。每个来源也是可点击的，正如您在下一张图中可以看到的。图片由作者提供，
点击其中一个来源后的视图。在这个视图中，您可以看到标题、一个链接到法院判决原始网站的按钮、法院判决的文本以及法院判决完整 PDF 的链接。这应该是您需要查看和验证来源的一切。图片由作者提供，
使用单个 v0 提示添加了所有四个要点。然而，在某些情况下，功能并没有按照我想要的方式添加，这很可能是因为我的提示不够精确。这通常通过另一个提示来解决，告诉 v0 修复当前的问题。
您可以在以下链接中查看我与 Vercel 的 v0 版本的完整交互（聊天记录）。（https://v0.dev/chat/lEPo9R4CiLe）
部署
您也可以轻松地使用 Vercel 免费部署您的网站。您只需在 Vercel 上创建一个项目并将其链接到您的 GitHub 账户。这样，Vercel 会自动部署您的应用程序，例如，每当您向主分支推送时。我之前从未在 Vercel 上托管过网站，但部署过程非常流畅，我可以在 10-15 分钟内完成。
Vercel 的 v0 版本的限制
虽然 v0 是创建前端应用程序的强大工具，但它确实有其局限性。首先，它是一个高度专业化的工具，与 ChatGPT 相比。这意味着 v0 在除了前端编程之外的任务上可能表现不佳。例如，在处理这个项目时，我仍然使用了 ChatGPT 和 Google 来解决与前端无关的问题。其次，v0 对免费版的限制也相当显著，这意味着我必须谨慎使用它。这可能会产生负面影响，因为您可能无法从第一次提示中获得期望的结果，因此您必须重新提示语言模型。然而，问题在于，当您在提示的数量有限时，重新提示模型就变成了一种挑战。一个解决方案当然是支付 v0 的高级版费用。然而，考虑到我大部分时间都在开发机器学习应用程序（而不是前端应用程序），我想要避免这样做。我认为每月支付 20 美元来购买您不经常使用的工具相当昂贵。
结论
在这篇文章中，我讨论了如何使用 Vercel 的 v0 版本快速开发前端应用程序。我认为 v0 特别有用，如果您不喜欢花费时间开发一个吸引人的前端应用程序来分享您的应用程序。这对我的情况尤其相关，因为我的大部分工作都是在开发机器学习模型，我可以在开发前端代码以确保我的应用程序看起来吸引人方面做得更好。
扫一扫
1859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
