Bildbasierte Produktsuche mit Spring Boot, Google Cloud Vertex AI und Gemini Model

Einführung

Stellen Sie sich vor, Sie kaufen online ein und stoßen auf ein Produkt, das Sie lieben, dessen Namen Sie jedoch nicht kennen. Wäre es nicht toll, ein Bild hochzuladen und die App es für Sie finden zu lassen?

In diesem Artikel zeigen wir Ihnen, wie Sie genau das erstellen: eine bildbasierte Produktsuchfunktion mit Spring Boot und Google Cloud Vertex AI.

Übersicht über die Funktion

Mit dieser Funktion können Benutzer ein Bild hochladen und eine Liste der dazu passenden Produkte erhalten, wodurch das Sucherlebnis intuitiver und visuell gesteuerter wird.

Die bildbasierte Produktsuchfunktion nutzt Google Cloud Vertex AI, um Bilder zu verarbeiten und relevante Schlüsselwörter zu extrahieren. Diese Schlüsselwörter werden dann verwendet, um in der Datenbank nach passenden Produkten zu suchen.

Technologie-Stack

• Java 21
• Spring Boot 3.2.5
• PostgreSQL
• Vertex AI
• ReactJS

Wir werden den Prozess der Einrichtung dieser Funktionalität Schritt für Schritt durchgehen.

Schrittweise Umsetzung

1. Erstellen Sie ein neues Projekt in der Google Console

Zuerst müssen wir dazu ein neues Projekt in der Google Console erstellen.

Wir müssen zu https://console.cloud.google.com gehen und ein neues Konto erstellen, falls Sie bereits eines haben. Wenn Sie eines haben, melden Sie sich bei dem Konto an.

Wenn Sie Ihr Bankkonto hinzufügen, bietet Ihnen Google Cloud eine kostenlose Testversion an.

Sobald Sie ein Konto erstellt oder sich bei einem bereits vorhandenen Konto angemeldet haben, können Sie ein neues Projekt erstellen.

2. Aktivieren Sie den Vertex AI-Dienst

In der Suchleiste müssen wir Vertex AI finden und alle empfohlenen APIs aktivieren.

Vertex AI ist die vollständig verwaltete Plattform für maschinelles Lernen (ML) von Google Cloud, die darauf ausgelegt ist, die Entwicklung, Bereitstellung und Verwaltung von ML-Modellen zu vereinfachen. Es ermöglicht Ihnen, ML-Modelle im großen Maßstab zu erstellen, zu trainieren und bereitzustellen, indem Sie Tools und Dienste wie AutoML, benutzerdefiniertes Modelltraining, Hyperparameter-Tuning und Modellüberwachung bereitstellen

Gemini 1.5 Flash ist Teil der Gemini-Modellfamilie von Google, die speziell für effiziente und leistungsstarke Inferenz in ML-Anwendungen entwickelt wurde. Gemini-Modelle sind eine Reihe fortschrittlicher KI-Modelle, die von Google entwickelt wurden und häufig in der Verarbeitung natürlicher Sprache (NLP), Sehaufgaben und anderen KI-gestützten Anwendungen verwendet werden

Hinweis: Für andere Frameworks können Sie die Gemini-API direkt unter https://aistudio.google.com/app/prompts/new_chat verwenden. Verwenden Sie die Strukturaufforderungsfunktion, da Sie Ihre Ausgabe an die Eingabe anpassen können, um bessere Ergebnisse zu erzielen.

3. Erstellen Sie eine neue Eingabeaufforderung, die zu Ihrer Anwendung passt

In diesem Schritt müssen wir eine Eingabeaufforderung anpassen, die zu Ihrer Anwendung passt.

Vertex AI Studio hat viele Beispiel-Eingabeaufforderungen in der Eingabeaufforderungsgalerie bereitgestellt. Wir verwenden Beispiel-Bildtext in JSON, um Schlüsselwörter zu extrahieren, die sich auf das Produktbild beziehen.

Meine Anwendung ist ein CarShop, also erstelle ich eine Eingabeaufforderung wie diese. Ich erwarte, dass das Model mir mit einer Liste von Schlüsselwörtern antwortet, die sich auf das Bild beziehen.

Meine Eingabeaufforderung: Extrahieren Sie den Namen „car“ in ein Listenschlüsselwort und geben Sie sie in JSON aus. Wenn Sie keine Informationen zum Auto finden, geben Sie die Liste bitte leer aus.nBeispielantwort: [„rolls“, „royce“, „wraith“]

Nachdem wir Ihrer Bewerbung eine passende Eingabeaufforderung angepasst haben. Jetzt untersuchen wir die Integration in die Spring Boot-Anwendung.

4. Integrieren Sie die Spring Boot-Anwendung

Ich habe eine E-Commerce-Anwendung zum Thema Autos erstellt. Ich möchte also Autos anhand des Bildes finden.

Zuerst sollten Sie in der pom.xml-Datei Ihre Abhängigkeit aktualisieren:

<!-- 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>

Nachdem Sie die Konfiguration in der pom.xml-Datei vorgenommen haben, erstellen Sie eine Konfigurationsklasse GeminiConfig.java

• MODEL_NAME: „gemini-1.5-flash“
• STANDORT: „Ihr Standort beim Einrichten des Projekts“
• PROJECT_ID: „Ihre Projekt-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);
    }
}

Zweitens erstellen Sie die Ebenen Service, Controller, um die Funktion „Auto finden“ zu implementieren. Klassendienst erstellen.

Da die Gemini-API mit dem Markdown-Format antwortet, müssen wir eine Funktion erstellen, die die Konvertierung in JSON unterstützt, und von JSON werden wir in Java in einen Listenstring konvertieren.

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```

", "");
    }
}

Wir müssen eine Controller-Klasse erstellen, um einen Endpunkt für das Frontend zu erstellen

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;
    }
}

5. WICHTIGER Schritt: Melden Sie sich mit der Google Cloud CLI bei Google Cloud an

Die Spring Boot-Anwendung kann nicht überprüfen, wer Sie sind, und ist nicht in der Lage, dass Sie die Ressource in Google Cloud akzeptieren.

Wir müssen uns also bei Google anmelden und eine Autorisierung erteilen.

5.1 Zuerst müssen wir GCloud CLI auf Ihrem Computer installieren

Link-Tutorial: https://cloud.google.com/sdk/docs/install
Überprüfen Sie den obigen Link und installieren Sie ihn auf Ihrem Computer

5.2 Anmelden

1. Öffnen Sie Ihr Terminal im Projekt (Sie müssen in das Projekt einsteigen)
2. Typ: gcloud auth login
3. Geben Sie ein und Sie sehen die Fenster, in denen Sie sich anmelden können

gcloud auth login

Hinweis: Nach der Anmeldung werden die Anmeldeinformationen im Google Maven-Paket gespeichert und Sie müssen sich beim Neustart der Spring Boot-Anwendung nicht erneut anmelden.

Abschluss

Wenn Sie diese oben basierend auf meinem E-Commerce-Projekt implementieren, können Sie sie an Ihr Projekt und Ihr Framework anpassen. In anderen Frameworks als Spring Boot (NestJs usw.) können Sie https://aistudio.google.com/app/prompts/new_chat verwenden. und Sie müssen kein neues Google Cloud-Konto erstellen.

Sie können die detaillierte Implementierung in meinem Repo überprüfen:

Backend: https://github.com/duongminhhieu/YasMiniShop
Frontend: https://github.com/duongminhhieu/YasMini-Frontend

Viel Spaß beim Lernen !!!

Das obige ist der detaillierte Inhalt vonBildbasierte Produktsuche mit Spring Boot, Google Cloud Vertex AI und Gemini Model. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!