介紹
想象一下您在網上購物時發現了一種您喜歡的產品，但不知道它的名字。上傳圖片并讓應用程序為您找到它，這不是很棒嗎？
在本文中，我們將向您展示如何構建這一功能：使用 spring boot 和 google cloud vertex ai 的基于圖像的產品搜索功能。
功能概述
此功能允許用戶上傳圖像并接收與其匹配的產品列表，使搜索體驗更加直觀和視覺驅動。
基于圖像的產品搜索功能利用 google cloud vertex ai 處理圖像并提取相關關鍵詞。然后使用這些關鍵字在數據庫中搜索匹配的產品。
技術棧
- java 21
- spring 啟動 3.2.5
- postgresql
- 頂點人工智能
- reactjs
我們將逐步完成設置此功能的過程。
逐步實施
1. 在google console上創建一個新項目
首先，我們需要為此在 google console 上創建一個新項目。
如果您已經有一個帳戶，我們需要轉到 https://console.cloud.google.com 并創建一個新帳戶。如果您有的話，請登錄該帳戶。
如果您添加銀行帳戶，google cloud 將為您提供免費試用。
創建帳戶或登錄現有帳戶后，您可以創建新項目。
2. 啟用頂點ai服務
在搜索欄上，我們需要找到 vertex ai 并啟用所有推薦的 api。
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來提取與產品圖像相關的關鍵字。
我的應用程序是一個 carshop，所以我構建了一個這樣的提示。我期望模型會用與圖像相關的關鍵字列表來回復我。
我的提示：將名稱 car 提取到列表關鍵字并以 json 格式輸出。如果沒有找到任何有關汽車的信息，請將列表輸出為空。n響應示例：[“rolls”, “royce”, “wraith”]
我們根據您的應用程序定制合適的提示后。現在，我們就來探討一下如何與 spring boot application 集成。
4. 與 spring boot 應用程序集成
我構建了一個關于汽車的電子商務應用程序。所以我想通過圖像找到汽車。
首先，在 pom.xml 文件中，您應該更新您的依賴項：
<!-- config version for dependency-->
<properties><spring-cloud-gcp.version>5.1.2</spring-cloud-gcp.version><google-cloud-bom.version>26.32.0</google-cloud-bom.version></properties><!-- in your dependencymanagement, please add 2 dependencies below --><dependencymanagement><dependencies><dependency><groupid>com.google.cloud</groupid><artifactid>spring-cloud-gcp-dependencies</artifactid><version>${spring-cloud-gcp.version}</version><type>pom</type><scope>import</scope></dependency><dependency><groupid>com.google.cloud</groupid><artifactid>libraries-bom</artifactid><version>${google-cloud-bom.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencymanagement><!-- in your tab dependencies, please add the dependency below --><dependencies><dependency><groupid>com.google.cloud</groupid><artifactid>google-cloud-vertexai</artifactid></dependency></dependencies>
在 pom.xml 文件中完成配置后，創建一個配置類 geminiconfig.java
- model_name：“gemini-1.5-flash”
- location：“設置項目時的位置”
- project_id：“您的項目id”
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 字符串。
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<productresponse> 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<string> keywords = convertjsontolist(jsoncontent).stream()
.map(string::tolowercase)
.tolist();
set<product> results = new hashset();
for (string keyword : keywords) {
list<product> 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<string> 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```
", "");
}
}
</string></product></product></string></productresponse>
我們需要創建一個控制器類來為前端做一個端點
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
@slf4j
public class yasminiaicontroller {
private final yasminiaiservice yasminiaiservice;
@postmapping
public list<productresponse> findcar(@requestparam("file") multipartfile file) {
var response = yasminiaiservice.findcarbyimage(file);
return response;
}
}
</productresponse>
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
注意： 登錄后，憑據會保存在 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 模型進行基于圖像的產品搜索的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！