当前位置：首页 > news >正文

手把手教学：基于Streamlit，快速构建Qwen3-Embedding语义搜索界面

news 2026/6/25 4:43:59

手把手教学：基于Streamlit，快速构建Qwen3-Embedding语义搜索界面

1. 项目概述与核心价值

1.1 什么是语义搜索

传统搜索引擎依赖关键词匹配，而语义搜索能理解查询背后的真实意图。比如搜索"我想吃点东西"，传统方法可能找不到"苹果是一种很好吃的水果"这样的结果，但语义搜索可以识别两者在"食物"概念上的关联。

1.2 Qwen3-Embedding-4B的优势

阿里通义千问的这款嵌入模型具有：

高精度语义理解：4B参数规模平衡了效果与效率
GPU加速计算：利用CUDA实现快速向量化
开箱即用：预训练模型无需额外微调

1.3 你将学到什么

通过本教程，你将掌握：

如何部署Qwen3-Embedding语义搜索服务
使用Streamlit构建交互式界面
实现自定义知识库的语义检索
理解向量相似度计算的底层原理

2. 环境准备与快速部署

2.1 基础环境要求

确保你的系统满足：

Python 3.8+
NVIDIA GPU（推荐RTX 3060及以上）
CUDA 11.7+
至少16GB内存

2.2 一键安装依赖

pip install streamlit torch transformers sentence-transformers

2.3 快速启动服务

创建app.py文件，复制以下代码：

import streamlit as st from sentence_transformers import SentenceTransformer from sklearn.metrics.pairwise import cosine_similarity import numpy as np # 初始化模型 @st.cache_resource def load_model(): return SentenceTransformer('Qwen/Qwen3-Embedding-4B', device='cuda') model = load_model()

3. 构建交互界面

3.1 双栏布局设计

在app.py中添加界面代码：

# 侧边栏状态显示 with st.sidebar: st.success("✅ 向量空间已展开") st.info("GPU加速已启用") # 主界面双栏布局 col1, col2 = st.columns(2) with col1: st.header("📚 知识库构建") knowledge_base = st.text_area("输入知识库内容（每行一条）", "苹果是一种很好吃的水果\n香蕉富含钾元素\n锻炼对身体有益\n多喝水保持健康", height=200) with col2: st.header("🔍 语义查询") query = st.text_input("输入查询内容", "我想吃点东西") if st.button("开始搜索 🚀"): st.session_state.search_triggered = True

3.2 处理用户输入

添加数据处理逻辑：

# 知识库预处理 def prepare_kb(text): lines = [line.strip() for line in text.split('\n') if line.strip()] return lines if 'search_triggered' in st.session_state: with st.spinner("正在进行向量计算..."): # 向量化处理 kb_lines = prepare_kb(knowledge_base) query_embedding = model.encode([query]) kb_embeddings = model.encode(kb_lines) # 计算相似度 similarities = cosine_similarity(query_embedding, kb_embeddings)[0] sorted_indices = np.argsort(similarities)[::-1]

4. 实现语义搜索功能

4.1 结果展示逻辑

继续完善app.py：

# 展示结果 st.subheader("匹配结果") for idx in sorted_indices[:5]: # 显示top5结果 similarity = similarities[idx] color = "green" if similarity > 0.4 else "gray" st.markdown(f""" <div style="border-left: 3px solid {color}; padding-left: 10px; margin: 10px 0;"> <p>{kb_lines[idx]}</p> <div style="display: flex; align-items: center;"> <progress value="{similarity}" max="1" style="width: 200px; margin-right: 10px;"></progress> <span style="color: {color}; font-weight: bold;">{similarity:.4f}</span> </div> </div> """, unsafe_allow_html=True)

4.2 向量数据可视化

添加幕后数据查看功能：

if st.checkbox("查看幕后数据 (向量值)"): st.subheader("向量维度分析") st.write(f"向量维度: {query_embedding.shape[1]}") # 显示前50维数值 st.line_chart(query_embedding[0][:50]) st.write("前50维数值示例:", query_embedding[0][:50].tolist())

5. 完整代码与运行

5.1 完整应用代码

将以上代码片段组合，最终app.py内容如下：

import streamlit as st from sentence_transformers import SentenceTransformer from sklearn.metrics.pairwise import cosine_similarity import numpy as np # 初始化模型 @st.cache_resource def load_model(): return SentenceTransformer('Qwen/Qwen3-Embedding-4B', device='cuda') model = load_model() # 知识库预处理 def prepare_kb(text): lines = [line.strip() for line in text.split('\n') if line.strip()] return lines # 界面布局 st.set_page_config(layout="wide") # 侧边栏 with st.sidebar: st.success("✅ 向量空间已展开") st.info("GPU加速已启用") # 主界面 col1, col2 = st.columns(2) with col1: st.header("📚 知识库构建") knowledge_base = st.text_area("输入知识库内容（每行一条）", "苹果是一种很好吃的水果\n香蕉富含钾元素\n锻炼对身体有益\n多喝水保持健康", height=200) with col2: st.header("🔍 语义查询") query = st.text_input("输入查询内容", "我想吃点东西") if st.button("开始搜索 🚀"): st.session_state.search_triggered = True # 搜索逻辑 if 'search_triggered' in st.session_state: with st.spinner("正在进行向量计算..."): kb_lines = prepare_kb(knowledge_base) query_embedding = model.encode([query]) kb_embeddings = model.encode(kb_lines) similarities = cosine_similarity(query_embedding, kb_embeddings)[0] sorted_indices = np.argsort(similarities)[::-1] st.subheader("匹配结果") for idx in sorted_indices[:5]: similarity = similarities[idx] color = "green" if similarity > 0.4 else "gray" st.markdown(f""" <div style="border-left: 3px solid {color}; padding-left: 10px; margin: 10px 0;"> <p>{kb_lines[idx]}</p> <div style="display: flex; align-items: center;"> <progress value="{similarity}" max="1" style="width: 200px; margin-right: 10px;"></progress> <span style="color: {color}; font-weight: bold;">{similarity:.4f}</span> </div> </div> """, unsafe_allow_html=True) if st.checkbox("查看幕后数据 (向量值)"): st.subheader("向量维度分析") st.write(f"向量维度: {query_embedding.shape[1]}") st.line_chart(query_embedding[0][:50]) st.write("前50维数值示例:", query_embedding[0][:50].tolist())