Spring Boot + Vue 项目集成 AI 识图搜索功能

还不会跑前后端项目？文末附部署教程与 相关资源下载合集。

一、功能定位

在电商、内容平台、企业资产库、仓储盘点、社交市集等场景中，用户经常面临同一个问题：手里有一张图，却不知道该怎么用文字搜。

传统搜索依赖标题、标签、SKU、用户自填描述，对「只会看图、不会描述」的需求覆盖不足。
AI 识图搜索将交互方式从「输入关键词」升级为「上传图片」，由视觉大模型理解画面内容，再自动映射到业务系统的分类体系与检索条件，在真实业务数据库中返回可点击、可交易、可管理的结果列表。

适用于但不限于：

二手 / 闲置交易平台
综合电商与垂直类目商城
企业内部物资、样品、备件查询
图库、素材站、版权内容检索
本地生活、同城便民信息匹配

核心命题不是「聊天识图」，而是 「看图 → AI 大模型理解 → 可检索 → 可落地」 的完整链路。

二、用户价值：解决什么痛点？

传统搜索	AI 识图搜索
用户需知道品牌、型号、品类名称	拍照或上传即可发起检索
关键词与商品标题不一致时易零结果	模型抽取多维度检索词，降低表述差异
分类需用户手动点选	自动推断与平台类目对齐的分类
结果与「这张图」是否相关难以判断	展示识别摘要，过程可解释

一句话：把「搜像素的困难」转交给 AI，把「搜业务的准确性」交给检索引擎与数据层。

三、使用方法

前端 Vue

VUE

1<!--
2  AI 识图搜索页（单文件版）
3  路由：/user/ai-search
4  接口：POST /api/ai-image/search，字段 file
5-->
6<template>
7  <div class="ai-page">
8    <!-- 页头标题区 -->
9    <div class="ai-page__header">
10      <h2 class="ai-page__title">AI 识图搜索</h2>
11      <p class="ai-page__desc">上传图片，AI 提取关键词后在商品库中智能匹配</p>
12    </div>
13
14    <!-- 上传操作区 -->
15    <div class="ai-upload-bar">
16      <!-- 隐藏的原生文件选择框，只接受图片 -->
17      <input
18        ref="fileInputRef"
19        type="file"
20        accept="image/*"
21        class="ai-upload-bar__input"
22        @change="onFileChange"
23      />
24      <!-- 点按钮间接触发上面的 input -->
25      <el-button type="primary" :loading="loading" @click="pickImage">
26        <el-icon><Picture /></el-icon>
27        {{ previewUrl ? '重新选择' : '选择图片' }}
28      </el-button>
29      <!-- 有图才能点；loading 时转圈 -->
30      <el-button type="success" :loading="loading" :disabled="!selectedFile" @click="doSearch">
31        <el-icon><Search /></el-icon>
32        开始识图
33      </el-button>
34    </div>
35
36    <!-- 选中后的本地预览（blob 地址，尚未上传） -->
37    <img v-if="previewUrl" :src="previewUrl" class="ai-preview" alt="预览图" />
38
39    <!-- AI 识别摘要：summary + 检索词 -->
40    <el-alert
41      v-if="aiSummary"
42      :title="aiSummary"
43      type="info"
44      show-icon
45      :closable="false"
46      class="ai-summary"
47    />
48
49    <!-- 命中数量 -->
50    <div v-if="total > 0" class="ai-result-meta">共找到 {{ total }} 件相关商品</div>

配置路由

JavaScript

1{
2  path: 'ai-search',
3    name: 'AiImageSearch',
4    component: () => import('@/views/user/AiImageSearch.vue'),
5    meta: { front: true, title: 'AI识图' }
6},

菜单：

VUE

1<router-link
2  to="/user/ai-search"
3  class="front-nav__item"
4  :class="{ 'is-active': activeMenu === '/user/ai-search' }"
5>
6  <el-icon><Camera /></el-icon>
7  AI识图
8</router-link>

后端 Controller

Java

1package com.base.controller;
2
3import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
4import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
5import com.base.common.Result;
6import com.base.entity.Goods;
7import com.base.entity.GoodsExt;
8import com.base.exception.BusinessException;
9import com.base.mapper.GoodsMapper;
10import com.fasterxml.jackson.databind.JsonNode;
11import com.fasterxml.jackson.databind.ObjectMapper;
12import org.slf4j.Logger;
13import org.slf4j.LoggerFactory;
14import org.springframework.beans.factory.annotation.Value;
15import org.springframework.http.HttpEntity;
16import org.springframework.http.HttpHeaders;
17import org.springframework.http.HttpMethod;
18import org.springframework.http.MediaType;
19import org.springframework.http.ResponseEntity;
20import org.springframework.util.StringUtils;
21import org.springframework.web.bind.annotation.PostMapping;
22import org.springframework.web.bind.annotation.RequestMapping;
23import org.springframework.web.bind.annotation.RequestParam;
24import org.springframework.web.bind.annotation.RestController;
25import org.springframework.web.client.RestTemplate;
26import org.springframework.web.multipart.MultipartFile;
27
28import java.util.ArrayList;
29import java.util.Base64;
30import java.util.Comparator;
31import java.util.LinkedHashMap;
32import java.util.LinkedHashSet;
33import java.util.List;
34import java.util.Map;
35import java.util.Optional;
36import java.util.regex.Matcher;
37import java.util.regex.Pattern;
38import java.util.stream.Collectors;
39
40/**
41 * AI 识图搜索控制器（单文件版，通用检索）。
42 * 接口：POST /api/ai-image/search，表单字段 file
43 */
44@RestController // 标记为 REST 接口类，返回 JSON
45@RequestMapping("/api/ai-image") // 该类下所有接口前缀为 /api/ai-image
46public class AIImageController {
47
48    private static final Logger log = LoggerFactory.getLogger(AIImageController.class);
49
50    // 发给大模型的提示词：约束它只输出 JSON，且包含 itemName、keywords、summary

application.yml 配置

申请 APIKey: https://bailian.console.aliyun.com/cn-beijing?tab=model#/api-key

YAML

1# 阿里云百炼 DashScope（AI 识图），请填写自己的 API Key
2dashscope:
3  api-key: 'sk-xxx'
4  base-url: https://dashscope.aliyuncs.com
5  vision-model: qwen3.6-flash

四、核心亮点

亮点 1：多模态理解 + 业务检索闭环

接入支持图像 + 文本输入的视觉大模型（如阿里云百炼 Qwen3.6-Flash 等多模态系列），对上传图片进行物体识别、场景理解与属性抽取。
输出不是自然语言闲聊，而是结构化 JSON：

主体名称（itemName）
标准分类（categoryName，与业务类目表对齐）
检索关键词数组（keywords）
用户可读摘要（summary）

随后由服务端将上述字段转为数据库查询条件，返回业务库中的真实记录。
AI 负责「看懂图」，系统负责「找对货」——职责清晰，便于扩展与运维。

亮点 2：「视觉理解」与「库存检索」分层架构

业界常见误区是把大模型当成「直接生成商品列表」的黑盒，易产生幻觉、价格虚假、无法下单等问题。
本方案采用语义检索架构：

VUE

1客户端（Web / App / 小程序）
2  选择图片 → 预览 → 提交 multipart
3        ↓
4API 网关 / 业务服务
5  校验 → Base64/DataURL → 调用多模态 API
6        ↓
7视觉大模型（公有云或私有化）
8  返回 JSON：名称、类目、关键词、摘要
9        ↓
10检索层（SQL LIKE / Elasticsearch / 向量库）
11  映射类目 ID + 文本条件 + 业务状态过滤
12        ↓
13统一分页结构 → 卡片列表 → 详情 / 下单 / 工单

优势：

结果可审计：每条记录对应库表主键
流程可解释：用户可见「识别为什么、搜了什么」
架构可替换：模型可换，检索规则可换，数据层不变

适用于对合规、交易真实性有要求的生产级应用，而非演示型 Demo。

亮点 3：多关键词 OR + 分级兜底，提升命中率

视觉模型给出的描述往往比卖家标题更「学术」或更「细碎」（如「机械键盘、键帽、RGB 背光」 vs 标题「Keychron K2 九成新」）。
若将多词拼成整句做模糊匹配，极易零结果。

通用优化策略包括：

关键词拆分 OR：任一词命中标题或描述即纳入候选
分类 + 关键词联合过滤：先收窄类目，再文本匹配
分级放宽：精准匹配 → 单词匹配 → 同类目浏览 → 全库关键词
仅展示业务有效状态：如「在售 / 已上架 / 审核通过」等由业务定义的 status

在召回率与相关性之间取得平衡，避免「认对了却搜不到」。

亮点 4：领域约束 Prompt，抑制分类幻觉

通过 Prompt 将模型输出约束在平台已有类目枚举内，并与 category（或等价维度表）做名称 → ID 映射。
避免模型自创「智能家居」「数码配件」等库中不存在的分类，保证后续 SQL / ES 查询可执行。

这是 RAG 之前的第一道闸门：用规则 + 结构化输出，把开放域视觉理解收束到封闭业务词典。

亮点 5：安全部署与模块解耦

API Key 仅部署在服务端，前端只传图，符合密钥管理规范
独立识图 API（如 POST /api/ai-image/search），与商品、订单、用户等模块解耦
未配置密钥时友好降级：其它业务不受影响，识图接口明确报错

适合 SaaS 多租户、私有化交付、教学实训等多种部署形态。

亮点 6：轻量模块，易集成、易二次开发

可采用单页前端 + 单控制器后端的交付形态：

前端：上传、预览、结果网格、识别摘要
后端：调用大模型、解析 JSON、查库、分页返回

接入方只需：已有商品（或物料）表、类目表、登录与列表 UI。
后续可演进为：向量 embedding 真·以图搜图、搜索日志、点击率排序、A/B 测试等，无需推翻初版架构。

五、标准技术链路

VUE

1客户端（Web / App / 小程序）
2  选择图片 → 预览 → 提交 multipart
3        ↓
4API 网关 / 业务服务
5  校验 → Base64/DataURL → 调用多模态 API
6        ↓
7视觉大模型（公有云或私有化）
8  返回 JSON：名称、类目、关键词、摘要
9        ↓
10检索层（SQL LIKE / Elasticsearch / 向量库）
11  映射类目 ID + 文本条件 + 业务状态过滤
12        ↓
13统一分页结构 → 卡片列表 → 详情 / 下单 / 工单

技术标签：Multimodal LLM、Structured Output、Semantic Search、Fallback Retrieval、BFF API、前后端分离。

六、创新点摘要

AI 识图搜索的价值，在于把多模态能力嵌入既有业务数据流，而非替代数据库：

降低搜索门槛——用图片作为统一入口
提高可解释性——识别结果与检索条件对用户可见
保证结果真实性——列表来自业务库，可溯源、可交易、可统计
工程可落地——密钥安全、模块解耦、分级兜底、类目对齐

适用于任何「用户手里是图，系统里是结构化商品（或物料）数据」的检索增强场景。

使用声明

本教程与配套源码仅供学习参考。毕设或课程作品请结合自己的课题做功能扩展与修改，勿原封不动照搬提交。

集成仍无法解决时，可通过 DevCode 站内「联系作者」咨询。

相关资源下载合集