Streamlit推荐系统网站：点击推荐商品图片替换原商品详情的实现咨询

完全可以实现，核心是借助Streamlit的**会话状态（st.session_state）**和按钮回调机制，实现页面内容的动态更新。以下是具体的落地方案和代码示例：

1. 定义商品数据结构 #

先统一商品数据格式，确保包含所有需要展示的字段：

products = [
    {
        "id": 1,
        "name": "复古通勤帆布包",
        "description": "耐磨高密度帆布，内置分层隔袋，适合日常通勤与短途出行",
        "rating": 4.7,
        "price": 89.9,
        "image_url": "https://example.com/bag_01.jpg"
    },
    {
        "id": 2,
        "name": "简约皮质斜挎包",
        "description": "头层牛皮材质，极简设计，可容纳手机、钱包等随身物品",
        "rating": 4.8,
        "price": 199.9,
        "image_url": "https://example.com/bag_02.jpg"
    },
    # 可添加更多商品数据
]

2. 初始化会话状态 #

在应用启动时初始化当前展示的商品，默认随机选择一个：

import streamlit as st
import random
from sklearn.metrics.pairwise import cosine_similarity
import numpy as np

# 初始化会话状态，存储当前展示的商品
if "current_product" not in st.session_state:
    st.session_state.current_product = random.choice(products)

3. 编写商品切换回调函数 #

这个函数负责更新会话状态中的当前商品，是实现替换逻辑的核心：

def switch_to_product(selected_product):
    st.session_state.current_product = selected_product

4. 渲染主展示区（动态更新） #

根据会话状态中的商品数据渲染详情，页面刷新时会自动显示最新选中的商品：

# 主展示区：展示当前选中商品的完整详情
st.subheader("当前商品详情")
current_prod = st.session_state.current_product

st.image(current_prod["image_url"], width=250)
st.markdown(f"**商品名称**: {current_prod['name']}")
st.markdown(f"**商品描述**: {current_prod['description']}")
st.markdown(f"**用户评分**: {current_prod['rating']} ⭐")
st.markdown(f"**售价**: ¥{current_prod['price']}")

5. 计算相似商品并渲染（带点击交互） #

先通过Cosine算法计算相似商品，再将每个相似商品的图片做成可点击的按钮，点击后触发切换回调：

# 基于Cosine相似度计算相似商品（可替换为你实际的特征向量计算逻辑）
def get_top_similar_products(target_prod, all_products, top_n=3):
    # 示例：用商品ID、评分、价格构造特征向量，实际场景可替换为商品的文本/图像特征
    def extract_features(prod):
        return np.array([prod["id"], prod["rating"], prod["price"]]).reshape(1, -1)
    
    target_features = extract_features(target_prod)
    similarity_list = []
    
    for prod in all_products:
        if prod["id"] == target_prod["id"]:
            continue
        prod_features = extract_features(prod)
        sim_score = cosine_similarity(target_features, prod_features)[0][0]
        similarity_list.append((sim_score, prod))
    
    # 按相似度降序排序，取前N个
    similarity_list.sort(reverse=True, key=lambda x: x[0])
    return [prod for _, prod in similarity_list[:top_n]]

# 获取当前商品的相似商品
similar_products = get_top_similar_products(current_prod, products)

# 渲染相似商品推荐区
st.subheader("相似商品推荐")
cols = st.columns(len(similar_products))

for idx, col in enumerate(cols):
    prod = similar_products[idx]
    # 将图片包装成按钮，点击时触发商品切换
    if col.button(
        label="", 
        key=f"similar_prod_btn_{prod['id']}", 
        use_container_width=True
    ):
        switch_to_product(prod)
    col.image(prod["image_url"], width=180)
    col.text(prod["name"])

关键细节说明 #

• 会话状态的作用：Streamlit是基于脚本 rerun 机制的，会话状态能在页面刷新时保留选中的商品数据，避免每次刷新都回到随机商品。
• 图片按钮的实现：通过设置按钮的label为空字符串，并开启use_container_width=True，让按钮完全覆盖图片，实现“点击图片触发事件”的直观交互。
• 相似度计算的灵活性：示例中的特征向量是简化版，你可以替换为实际业务中使用的商品特征（比如商品描述的TF-IDF向量、图像特征等），不影响交互逻辑。

内容的提问来源于stack exchange，提问作者Tien Huynh