使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

介绍

想象一下您在网上购物时发现了一种您喜欢的产品,但不知道它的名字。上传图片并让应用程序为您找到它,这不是很棒吗?

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

在本文中,我们将向您展示如何构建这一功能:使用 spring boot 和 google cloud vertex ai 的基于图像的产品搜索功能。

功能概述

此功能允许用户上传图像并接收与其匹配的产品列表,使搜索体验更加直观和视觉驱动。

基于图像的产品搜索功能利用 google cloud vertex ai 处理图像并提取相关关键词。然后使用这些关键字在数据库中搜索匹配的产品。

技术栈

java 21spring 启动 3.2.5postgresql顶点人工智能reactjs

我们将逐步完成设置此功能的过程。

逐步实施

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

1. 在google console上创建一个新项目

首先,我们需要为此在 google console 上创建一个新项目。

如果您已经有一个帐户,我们需要转到 https://console.cloud.google.com 并创建一个新帐户。如果您有的话,请登录该帐户。

如果您添加银行帐户,google cloud 将为您提供免费试用。

创建帐户或登录现有帐户后,您可以创建新项目。

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

2. 启用顶点ai服务

在搜索栏上,我们需要找到 vertex ai 并启用所有推荐的 api。

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

vertex ai 是 google cloud 完全托管的机器学习 (ml) 平台,旨在简化 ml 模型的开发、部署和管理。它允许您通过提供 automl、自定义模型训练、超参数调整和模型监控等工具和服务来大规模构建、训练和部署 ml 模型gemini 1.5 flash 是 google gemini 模型系列的一部分,专为 ml 应用程序中的高效、高性能推理而设计。 gemini 模型是 google 开发的一系列高级 ai 模型,常用于自然语言处理 (nlp)、视觉任务和其他 ai 驱动的应用程序

注意: 对于其他框架,您可以直接使用 gemini api,网址为 https://aistudio.google.com/app/prompts/new_chat。使用结构提示功能,因为您可以自定义输出以匹配输入,这样您将获得更好的结果。

3. 创建与您的应用程序匹配的新提示

在这一步,我们需要定制一个与您的应用相匹配的提示。

vertex ai studio 在提示图库提供了很多示例提示。我们使用示例图像文本到json来提取与产品图像相关的关键字。

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

我的应用程序是一个 carshop,所以我构建了一个这样的提示。我期望模型会用与图像相关的关键字列表来回复我。

我的提示:将名称 car 提取到列表关键字并以 json 格式输出。如果没有找到任何有关汽车的信息,请将列表输出为空。n响应示例:[“rolls”, “royce”, “wraith”]

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

纳米搜索 纳米搜索

纳米搜索:360推出的新一代AI搜索引擎

纳米搜索 30 查看详情 纳米搜索

我们根据您的应用程序定制合适的提示后。现在,我们就来探讨一下如何与 spring boot application 集成。

4. 与 spring boot 应用程序集成

我构建了一个关于汽车的电子商务应用程序。所以我想通过图像找到汽车。

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

首先,在 pom.xml 文件中,您应该更新您的依赖项:

    5.1.2    26.32.0                  com.google.cloud          spring-cloud-gcp-dependencies          ${spring-cloud-gcp.version}          pom          import                      com.google.cloud          libraries-bom          ${google-cloud-bom.version}          pom          import                com.google.cloud      google-cloud-vertexai  

在 pom.xml 文件中完成配置后,创建一个配置类 geminiconfig.java

model_name:“gemini-1.5-flash”location:“设置项目时的位置”project_id:“您的项目id”

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

import com.google.cloud.vertexai.vertexai;import com.google.cloud.vertexai.generativeai.generativemodel;import org.springframework.context.annotation.bean;import org.springframework.context.annotation.configuration;@configuration(proxybeanmethods = false)public class geminiconfig {    private static final string model_name = "gemini-1.5-flash";    private static final string location = "asia-southeast1";    private static final string project_id = "yasmini";    @bean    public vertexai vertexai() {        return new vertexai(project_id, location);    }    @bean    public generativemodel getmodel(vertexai vertexai) {        return new generativemodel(model_name, vertexai);    }}

其次,创建图层service、controller来实现寻车功能。创建班级服务。

因为 gemini api 响应的是 markdown 格式,所以我们需要创建一个函数来帮助转换为 json,然后我们将 json 转换为 java 中的 list 字符串。

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

import com.fasterxml.jackson.core.jsonprocessingexception;import com.fasterxml.jackson.databind.objectmapper;import com.google.cloud.vertexai.api.content;import com.google.cloud.vertexai.api.generatecontentresponse;import com.google.cloud.vertexai.api.part;import com.google.cloud.vertexai.generativeai.*;import com.learning.yasminishop.common.entity.product;import com.learning.yasminishop.common.exception.appexception;import com.learning.yasminishop.common.exception.errorcode;import com.learning.yasminishop.product.productrepository;import com.learning.yasminishop.product.dto.response.productresponse;import com.learning.yasminishop.product.mapper.productmapper;import lombok.requiredargsconstructor;import lombok.extern.slf4j.slf4j;import org.springframework.stereotype.service;import org.springframework.transaction.annotation.transactional;import org.springframework.web.multipart.multipartfile;import java.util.hashset;import java.util.list;import java.util.objects;import java.util.set;@service@requiredargsconstructor@slf4j@transactional(readonly = true)public class yasminiaiservice {    private final generativemodel generativemodel;    private final productrepository productrepository;    private final productmapper productmapper;    public list findcarbyimage(multipartfile file){        try {            var prompt = "extract the name car to a list keyword and output them in json. if you don't find any information about the car, please output the list empty.\nexample response: [\"rolls\", \"royce\", \"wraith\"]";            var content = this.generativemodel.generatecontent(                    contentmaker.frommultimodaldata(                            partmaker.frommimetypeanddata(objects.requirenonnull(file.getcontenttype()), file.getbytes()),                            prompt                    )            );            string jsoncontent = responsehandler.gettext(content);            log.info("extracted keywords from image: {}", jsoncontent);            list keywords = convertjsontolist(jsoncontent).stream()                    .map(string::tolowercase)                    .tolist();            set results = new hashset();            for (string keyword : keywords) {                list products = productrepository.searchbykeyword(keyword);                results.addall(products);            }            return results.stream()                    .map(productmapper::toproductresponse)                    .tolist();        } catch (exception e) {            log.error("error finding car by image", e);            return list.of();        }    }    private list convertjsontolist(string markdown) throws jsonprocessingexception {        objectmapper objectmapper = new objectmapper();        string parsejson = markdown;        if(markdown.contains("```json")){            parsejson = extractjsonfrommarkdown(markdown);        }        return objectmapper.readvalue(parsejson, list.class);    }    private string extractjsonfrommarkdown(string markdown) {        return markdown.replace("```json\n", "").replace("\n```", "");    }}

我们需要创建一个控制器类来为前端做一个端点

import com.learning.yasminishop.product.dto.response.productresponse;import lombok.requiredargsconstructor;import lombok.extern.slf4j.slf4j;import org.springframework.security.access.prepost.preauthorize;import org.springframework.web.bind.annotation.*;import org.springframework.web.multipart.multipartfile;import java.util.list;@restcontroller@requestmapping("/ai")@requiredargsconstructor@slf4jpublic class yasminiaicontroller {    private final yasminiaiservice yasminiaiservice;    @postmapping    public list findcar(@requestparam("file") multipartfile file) {        var response = yasminiaiservice.findcarbyimage(file);        return response;    }}

5. 重要步骤:使用 google cloud cli 登录 google cloud

spring boot 应用程序无法验证您的身份,并且无法让您接受 google cloud 中的资源。

所以我们需要登录google并提供授权。

5.1 首先我们需要在您的机器上安装gcloud cli

教程链接:https://cloud.google.com/sdk/docs/install
检查上面的链接并将其安装到您的机器上

5.2 登录

在项目中打开你的终端(你必须 cd 进入项目)类型:gcloud auth login输入,就会看到允许登录的窗口

gcloud auth login

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索

注意: 登录后,凭据会保存在 google maven 包中,重启 spring boot 应用程序时无需再次登录。

结论

所以上面这些都是基于我的电子商务项目实现的,你可以根据你的项目、你的框架进行修改。在其他框架中,除了 spring boot(nestjs,..),您可以使用 https://aistudio.google.com/app/prompts/new_chat。并且不需要创建新的 google cloud 帐户。

具体实现可以在我的repo查看:

后端:https://github.com/duongminhhieu/yasminishop
前端:https://github.com/duongminhhieu/yasmini-frontend

学习愉快!!!

以上就是使用 Spring Boot、Google Cloud Vertex AI 和 Gemini 模型进行基于图像的产品搜索的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/496949.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月8日 18:26:03
下一篇 2025年11月8日 18:27:01

相关推荐

  • HTML、CSS 和 JavaScript 中的简单侧边栏菜单

    构建一个简单的侧边栏菜单是一个很好的主意,它可以为您的网站添加有价值的功能和令人惊叹的外观。 侧边栏菜单对于客户找到不同项目的方式很有用,而不会让他们觉得自己有太多选择,从而创造了简单性和秩序。 今天,我将分享一个简单的 HTML、CSS 和 JavaScript 源代码来创建一个简单的侧边栏菜单。…

    2025年12月24日
    200
  • 前端代码辅助工具:如何选择最可靠的AI工具?

    前端代码辅助工具:可靠性探讨 对于前端工程师来说,在HTML、CSS和JavaScript开发中借助AI工具是司空见惯的事情。然而,并非所有工具都能提供同等的可靠性。 个性化需求 关于哪个AI工具最可靠,这个问题没有一刀切的答案。每个人的使用习惯和项目需求各不相同。以下是一些影响选择的重要因素: 立…

    2025年12月24日
    300
  • 带有 HTML、CSS 和 JavaScript 工具提示的响应式侧边导航栏

    响应式侧边导航栏不仅有助于改善网站的导航,还可以解决整齐放置链接的问题,从而增强用户体验。通过使用工具提示,可以让用户了解每个链接的功能,包括设计紧凑的情况。 在本教程中,我将解释使用 html、css、javascript 创建带有工具提示的响应式侧栏导航的完整代码。 对于那些一直想要一个干净、简…

    2025年12月24日
    000
  • 布局 – CSS 挑战

    您可以在 github 仓库中找到这篇文章中的所有代码。 您可以在这里查看视觉效果: 固定导航 – 布局 – codesandbox两列 – 布局 – codesandbox三列 – 布局 – codesandbox圣杯 &#8…

    2025年12月24日
    000
  • 隐藏元素 – CSS 挑战

    您可以在 github 仓库中找到这篇文章中的所有代码。 您可以在此处查看隐藏元素的视觉效果 – codesandbox 隐藏元素 hiding elements hiding elements hiding elements hiding elements hiding element…

    2025年12月24日
    400
  • 居中 – CSS 挑战

    您可以在 github 仓库中找到这篇文章中的所有代码。 您可以在此处查看垂直中心 – codesandbox 和水平中心的视觉效果。 通过 css 居中 垂直居中 centering centering centering centering centering centering立即…

    2025年12月24日 好文分享
    300
  • 如何在 Laravel 框架中轻松集成微信支付和支付宝支付?

    如何用 laravel 框架集成微信支付和支付宝支付 问题:如何在 laravel 框架中集成微信支付和支付宝支付? 回答: 建议使用 easywechat 的 laravel 版,easywechat 是一个由腾讯工程师开发的高质量微信开放平台 sdk,已被广泛地应用于许多 laravel 项目中…

    2025年12月24日
    000
  • 如何在移动端实现子 div 在父 div 内任意滑动查看?

    如何在移动端中实现让子 div 在父 div 内任意滑动查看 在移动端开发中,有时我们需要让子 div 在父 div 内任意滑动查看。然而,使用滚动条无法实现负值移动,因此需要采用其他方法。 解决方案: 使用绝对布局(absolute)或相对布局(relative):将子 div 设置为绝对或相对定…

    2025年12月24日
    000
  • 移动端嵌套 DIV 中子 DIV 如何水平滑动?

    移动端嵌套 DIV 中子 DIV 滑动 在移动端开发中,遇到这样的问题:当子 DIV 的高度小于父 DIV 时,无法在父 DIV 中水平滚动子 DIV。 无限画布 要实现子 DIV 在父 DIV 中任意滑动,需要创建一个无限画布。使用滚动无法达到负值,因此需要使用其他方法。 相对定位 一种方法是将子…

    2025年12月24日
    000
  • 移动端项目中,如何消除rem字体大小计算带来的CSS扭曲?

    移动端项目中消除rem字体大小计算带来的css扭曲 在移动端项目中,使用rem计算根节点字体大小可以实现自适应布局。但是,此方法可能会导致页面打开时出现css扭曲,这是因为页面内容在根节点字体大小赋值后重新渲染造成的。 解决方案: 要避免这种情况,将计算根节点字体大小的js脚本移动到页面的最前面,即…

    2025年12月24日
    000
  • Nuxt 移动端项目中 rem 计算导致 CSS 变形,如何解决?

    Nuxt 移动端项目中解决 rem 计算导致 CSS 变形 在 Nuxt 移动端项目中使用 rem 计算根节点字体大小时,可能会遇到一个问题:页面内容在字体大小发生变化时会重绘,导致 CSS 变形。 解决方案: 可将计算根节点字体大小的 JS 代码块置于页面最前端的 标签内,确保在其他资源加载之前执…

    2025年12月24日
    200
  • Nuxt 移动端项目使用 rem 计算字体大小导致页面变形,如何解决?

    rem 计算导致移动端页面变形的解决方法 在 nuxt 移动端项目中使用 rem 计算根节点字体大小时,页面会发生内容重绘,导致页面打开时出现样式变形。如何避免这种现象? 解决方案: 移动根节点字体大小计算代码到页面顶部,即 head 中。 原理: flexível.js 也遇到了类似问题,它的解决…

    2025年12月24日
    000
  • 形状 – CSS 挑战

    您可以在 github 仓库中找到这篇文章中的所有代码。 您可以在此处查看 codesandbox 的视觉效果。 通过css绘制各种形状 如何在 css 中绘制正方形、梯形、三角形、异形三角形、扇形、圆形、半圆、固定宽高比、0.5px 线? shapes 0.5px line .square { w…

    2025年12月24日
    000
  • 有哪些美观的开源数字大屏驾驶舱框架?

    开源数字大屏驾驶舱框架推荐 问题:有哪些美观的开源数字大屏驾驶舱框架? 答案: 资源包 [弗若恩智能大屏驾驶舱开发资源包](https://www.fanruan.com/resource/152) 软件 [弗若恩报表 – 数字大屏可视化组件](https://www.fanruan.c…

    2025年12月24日
    000
  • 网站底部如何实现飘彩带效果?

    网站底部飘彩带效果的 js 库实现 许多网站都会在特殊节日或活动中添加一些趣味性的视觉效果,例如点击按钮后散发的五彩缤纷的彩带。对于一个特定的网站来说,其飘彩带效果的实现方式可能有以下几个方面: 以 https://dub.sh/ 网站为例,它底部按钮点击后的彩带效果是由 javascript 库实…

    2025年12月24日
    000
  • 网站彩带效果背后是哪个JS库?

    网站彩带效果背后是哪个js库? 当你访问某些网站时,点击按钮后,屏幕上会飘出五颜六色的彩带,营造出庆祝的氛围。这些效果是通过使用javascript库实现的。 问题: 哪个javascript库能够实现网站上点击按钮散发彩带的效果? 答案: 根据给定网站的源代码分析: 可以发现,该网站使用了以下js…

    好文分享 2025年12月24日
    100
  • 产品预览卡项目

    这个项目最初是来自 Frontend Mentor 的挑战,旨在使用 HTML 和 CSS 创建响应式产品预览卡。最初的任务是设计一张具有视觉吸引力和功能性的产品卡,能够无缝适应各种屏幕尺寸。这涉及使用 CSS 媒体查询来确保布局在不同设备上保持一致且用户友好。产品卡包含产品图像、标签、标题、描述和…

    2025年12月24日
    100
  • 如何利用 echarts-gl 绘制带发光的 3D 图表?

    如何绘制带发光的 3d 图表,类似于 echarts 中的示例? 为了实现类似的 3d 图表效果,需要引入 echarts-gl 库:https://github.com/ecomfe/echarts-gl。 echarts-gl 专用于在 webgl 环境中渲染 3d 图形。它提供了各种 3d 图…

    2025年12月24日
    000
  • 如何在 Element UI 的 el-rate 组件中实现 5 颗星 5 分制与百分制之间的转换?

    如何在el-rate中将5颗星5分制的分值显示为5颗星百分制? 要实现该效果,只需使用 el-rate 组件的 allow-half 属性。在设置 allow-half 属性后,获得的结果乘以 20 即可得到0-100之间的百分制分数。如下所示: score = score * 20; 动态显示鼠标…

    2025年12月24日
    100
  • CSS 最佳实践:后端程序员重温 CSS 时常见的三个疑问?

    CSS 最佳实践:提升代码质量 作为后端程序员,在重温 CSS/HTML 时,你可能会遇到一些关于最佳实践的问题。以下将解答三个常见问题,帮助你编写更规范、清晰的 CSS 代码。 1. margin 设置策略 当相邻元素都设置了 margin 时,通常情况下应为上一个元素设置 margin-bott…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信