AI编程初体验 _ 使用Windsurf零代码开发网页对话和图像理解插件

在Cursor爆火之后,一款能与Cursor媲美的AI编程工具——Windsurf,正式登场!Windsurf由估值12.5亿美元的美国初创公司Codeium打造,发布瞬间便成为AI编程领域的顶流。它将具备协作能力的copilots和独立能力的agents相结合,创造出了全新的协作型智能体。

Codeium vs GitHub Copilot

Windsurf是目前最智能的AI代码生成工具,数据为证。

接下来,我们将使用Windsurf开发一个Chrome浏览器插件,该插件将利用智谱AI的两个免费多模态模型API,实现网页对话和图像理解功能。

插件功能展示

本次开发使用的是智谱AI开放的两款免费API:glm-4-flash和glm-4v-flash。

GLM-4-Flash:高效与经济的完美结合

GLM-4-Flash兼具“高速度”和“经济性”特点,适用于完成简单垂直、低成本、需要快速响应的任务。它具备多轮对话、网页浏览、Function Call和长文本推理(支持最大128K上下文)等高级功能,同时支持包括中文、英语、日语、韩语、德语在内的26种语言。

GLM-4-Flash功能展示

应用场景

  • 数据抽取:生物学家使用GLM-4-Flash处理分子数据,破解健康密码;
  • 数据生成:生成可以训练其他大模型的数据内容,成为其他领域大模型的“黄埔军校”;
  • 多轮对话:高校学者制作AI助教,提供学习和校园生活的伙伴;
  • 英语翻译:构建翻译APP,帮助小朋友进行英语互动性学习;
  • 内容生成:广告公司进行文本润色,帮助编辑和文案快速输出各种类型的文案。

GLM-4V-Flash:图像处理的全能选手

GLM-4V-Flash模型拥有图像描述生成、图像分类、视觉推理、视觉问答(VQA)以及图像情感分析等高级图像处理功能,并且支持包括中文、英语、日语、韩语、德语在内的26种语言。

GLM-4V-Flash功能展示

应用场景

  • 社交媒体文案生成:解读图片生成引人入胜的文案;
  • 识图答题:通过高级的图像识别和物理学知识理解,帮助学生构建全面且深入的学习框架;
  • 美容咨询:识别皮肤问题,提供细致的护肤建议;
  • OCR保险单信息提取:高效地从保险单据中提取关键信息;
  • 图像内容提取与总结:根据图像内容进行提取并总结,按照规定的格式进行输出。

开发流程

  1. 下载Windsurf并创建项目:首先下载Windsurf,创建存放代码的文件夹,注意不要使用中文和特殊符号。
  2. 使用Windsurf打开文件夹:通过Windsurf进行需求分析和框架搭建。
  3. 加载插件:在Google浏览器扩展中加载插件。
  4. 功能调试:使用glm-4-flash的对话能力和glm-4v-flash的图片理解能力进行调试。
  5. 编写readme文件:完成功能调试后,编写readme文件并提交至Chrome应用商店。

插件开发流程

以上就是基于Windsurf,全流程完成一款Chrome浏览器插件的开发过程,从需求分析到开发完成,再到提交Chrome应用商店审核的全过程。

AI时代已经来临,即使没有代码基础,你也可以从0到1开发一个最基础的插件,不妨试试吧!

👉 野卡 | 一分钟注册,轻松订阅海外线上服务

上一篇 2025年3月21日
下一篇 2025年3月21日

相关推荐

  • 如何为 OpenAI API 账户充值或添加资金?

    充值 OpenAI API 账户的步骤 为您的 OpenAI API 账户充值非常简单,只需按照以下步骤操作: 登录账户:访问 OpenAI 官方网站,并使用您的账户信息登录。 进入账单设置:在账户界…

    文章 2025年3月13日
  • 哪些虚拟信用卡好用?推荐几款优质的虚拟信用卡平台

    随着电子商务的全球化发展,虚拟信用卡已经成为许多人在进行线上支付、跨境购物和订阅服务时的首选工具。由于其便捷性、高安全性和低风险的特点,虚拟信用卡正逐渐被广泛使用。然而,市场上各种虚拟信用卡服务层出不…

    文章 2025年3月3日
  • 最新教程:Cursor Pro订阅升级指南,使用支付宝开通Cursor Pro Plus

    目前,Cursor是一款备受欢迎的开发工具,基础版可以免费使用两周。但如果需要更强大的功能和长期使用,订阅 Cursor Pro Plus 或企业版是必要的选择。 为什么要订阅Cursor Pro P…

    2025年5月30日
  • Midjourney 在国内能否正常使用?

    近年来,Midjourney 作为一款基于人工智能技术的图像生成工具,逐渐受到广泛关注。用户只需输入简单的文字描述,它就能生成精美的图像。那么,这款强大的工具在国内是否可以使用?本文将为您详细解答。 …

    文章 2025年6月1日
  • Cursor 使用指南:从入门到精通

    Cursor 是一款功能强大的编程工具,结合了先进的语言模型,能够显著提升编程效率。本文将详细介绍如何下载、安装、配置以及高效使用 Cursor。 一、下载与安装 下载:前往 Cursor 官方网站 …

    2025年4月12日
  • 从注册到订阅:Midjourney 使用全攻略

    Midjourney 简介 Midjourney 是一个独立的研究实验室,专注于探索新的思维方式和扩展人类的想象力。它由一个小型的自筹资金团队组成,该团队专注于设计、人类基础设施和人工智能。Midjo…

    2025年5月27日
  • 一分钟掌握ChatGPT:从新手到高手的快速指南

    基础知识 ChatGPT的官方网址是:https://chat.openai.com/chat 界面设计简洁,主要是一个对话工具,你可以输入任何问题或咨询。目前,OpenAI并没有推出官方的ChatG…

    文章 2025年6月9日
  • 技巧分享:如何办理虚拟VISA卡并自助充值Plus订阅

    最近很多朋友都在询问如何自助充值Plus订阅,但苦于没有合适的渠道。今天,我将为大家详细介绍一种适合动手能力强、有耐心的小伙伴的方法。话不多说,我们直接开始教程。 一、官网介绍 二、申请开卡 首先,您…

    2025年4月3日
  • 如何开通虚拟MasterCard:详细申请步骤与优势指南

    随着数字化支付方式的普及,虚拟卡已成为企业和个人用户管理资金的重要工具。虚拟MasterCard作为一种安全、便捷的支付方式,因其无需实体卡片、可在线快速申请的优势受到越来越多用户的青睐。本文将详细介…

    文章 2025年5月2日
  • GPT-4 暂停升级?ChatGPT Plus 开通及 GPT-4 升级详细指南

    如果你已经是 ChatGPT 的用户,但尚未升级到 ChatGPT Plus 并体验 GPT-4 的强大功能,本文将为你提供详细的操作指南。以下方法截止到 2025 年 1 月依然有效。 重要提示:此…

    文章 2025年6月20日
  • 2025 最新国内 GPT4o-mini API 使用指南:快速上手与集成教程

    一、引言 什么是 GPT4o-mini API GPT4o-mini API 是 OpenAI 最新推出的小型多模态模型,具备处理文本、图像和视频输入的能力。作为 GPT-4o 的轻量版,GPT4o-…

    文章 2025年5月5日
  • ChatGPT 使用指南与防封号技巧

    常见问题解答 Q:ChatGPT 在国内可以访问吗? A:不能直接访问,需要使用网络代理,因为 OpenAI 未对中国地区提供服务。 Q:ChatGPT 是免费的吗? A:基础版是免费的。 Q:Cha…

    文章 3天前
  • 如何取消和删除 Azure 订阅

    Microsoft Azure 是云计算领域的领导者,但如果你不再需要某个 Azure 订阅,了解如何正确取消和删除它非常重要。本文将为你提供详细的步骤和注意事项。 本文内容 取消 Azure 订阅的…

    文章 2025年3月31日
  • 野卡 虚拟信用卡会影响征信吗?

    野卡 虚拟信用卡通常不会直接影响个人的征信记录,因为它是基于现有账户生成的临时卡片,交易记录不会独立反映在征信报告中。然而,若虚拟卡用于非法活动或导致实际账户出现问题,可能间接影响信用。 👉 野卡 |…

    2025年2月28日
  • Cursor 充值支持的支付方式有哪些(信用卡)?

    Cursor 作为一款强大的 AI 编程助手,正在被越来越多的开发者所使用。本文将详细介绍 Cursor 充值支持的信用卡支付方式,帮助大家更好地使用这款工具。 Cursor 的功能与使用场景 在了解…

    2025年6月6日
  • 虚拟卡注册亚马逊是否存在风险?

    虚拟卡是一种通过网络生成的虚拟信用卡,适用于在线购物、支付账单等场景。然而,许多人对虚拟卡的安全性和潜在风险存在疑问。本文旨在探讨虚拟卡注册亚马逊的可行性,并分享相关的安全建议。 虚拟卡注册亚马逊的安…

    2025年5月1日
  • Midjourney 常见问题解答:新手必读指南

    Midjourney 是一款基于 AI 的图像生成工具,通过输入文字描述,AI 可以自动生成精美的图像。本文将解答新手在使用 Midjourney 过程中最常遇到的问题,帮助你快速上手。 Midjou…

    3天前
  • 如何上手 Sora?Sora 新手指南

    概述 Sora 是由 OpenAI 于 2024 年 2 月 18 日发布的文生视频大模型。其在视频质量、分辨率、文本语义还原以及动作一致性等方面表现出色,尤其是能够生成长达一分钟的高质量视频,超越了…

    文章 2025年4月3日
  • 解决ChatGPT iOS无法订阅和无法使用问题的完整指南

    你是否也遇到过在iPhone上使用ChatGPT时,发现无法订阅或使用的情况?别担心,这篇文章将详细教你如何解决ChatGPT iOS无法订阅和无法使用的问题。无论你是由于所在国家的限制,还是遇到Ap…

    2025年5月5日
  • ChatGPT 会员充值指南:轻松获取 GPT-4 使用权限

    随着 ChatGPT 的爆火,市面上涌现了许多类似的产品。国内的有百度的文心一言、讯飞的星火大模型,国外的则有 Google 的 Bard 和 Claude 等。然而,经过实际测试,这些产品的编程能力…

    2025年4月6日
  • GPT-4 扣费机制与银行卡信息安全指南

    在人工智能技术的飞速发展中,自然语言处理(NLP)领域的进步尤为显著。GPT-4,作为最新一代的语言模型,不仅在语言理解和生成方面取得了巨大突破,还在商业应用中扮演着越来越重要的角色。随着GPT-4的…

    文章 2025年3月16日
  • Adyen 与 Stripe 深度对比:哪个更适合您的企业?

    随着全球数字支付的快速发展,移动 POS 支付在 2020 年已达到 2 万亿美元的规模,占全球数字支付交易总额的 30%。选择一家可靠的支付处理商对企业发展至关重要。Adyen 和 Stripe 都…

    文章 2025年4月29日
  • ChatGPT支付问题解决方案:为何你的卡被拒绝?

    在使用ChatGPT时,许多用户可能会遇到“你的卡已被拒绝”的提示。这可能会让人感到困惑和沮丧。本文将详细探讨可能导致支付被拒绝的原因,并提供一些有效的解决方案,帮助你顺利完成支付。 一、支付被拒绝的…

    文章 2025年3月7日
  • Capital One 信用卡申请指南:轻松获取无限量虚拟信用卡

    Capital One 信用卡概述 Capital One 是美国财富 500 强公司,专注于信用卡和汽车贷款业务。其信用卡产品因其独特的功能和低申请门槛而备受青睐。 Capital One 信用卡的…

    文章 2025年6月5日
  • OpenAI 开发者安全绑卡与充值指南:野卡 推荐

    2023年更新提醒 2023-11-28 更新:切勿使用微软账号登录注册 OpenAI,微软可能提供国家信息,导致账号封禁风险增加。 2023年10月亲测成功案例 作为一名开发者,我计划开发基于 Ch…

    文章 2025年6月10日