Flask+HTML/CSS/JS开发的webapp添加可选示例图片功能实现咨询

整体逻辑 #

你不需要修改原有模型预测的核心逻辑，只需要把预设示例图存到服务端静态目录，前端加示例图选择交互，提交时后端判断用户是自主上传还是选了示例图，对应读取图片资源即可，和原有上传流程完全兼容。

步骤1：准备示例图片资源 #

• 在Flask项目根目录下创建static/sample_images文件夹，把你要提供的示例图片全部放入该目录，文件名避免使用中文和特殊字符，比如cat_sample.jpg、car_sample.png
• 确保示例图片格式和你模型支持的输入格式完全一致

步骤2：前端代码修改 #

HTML部分 #

<!-- 原有预测表单 -->
<form id="predict-form" enctype="multipart/form-data" method="POST" action="/predict">
  <!-- 原有文件上传控件，加id方便JS操作，保持原有逻辑不变 -->
  <input type="file" id="user-upload" name="image" accept="image/*" style="display:none">
  <button type="button" id="upload-btn">Upload Picture</button>

  <!-- 新增示例图片选择区域 -->
  <div class="sample-area">
    <p>也可以直接选择示例图片：</p>
    <div class="sample-grid">
      <!-- 每个示例图绑定data-filename属性存储自身文件名，点击后加active选中标记 -->
      <img src="/static/sample_images/sample1.jpg" alt="示例图1" class="sample-img" data-filename="sample1.jpg">
      <img src="/static/sample_images/sample2.jpg" alt="示例图2" class="sample-img" data-filename="sample2.jpg">
      <img src="/static/sample_images/sample3.jpg" alt="示例图3" class="sample-img" data-filename="sample3.jpg">
    </div>
    <!-- 隐藏input存储选中的示例图文件名，提交时传给后端 -->
    <input type="hidden" id="selected-sample" name="selected_sample">
  </div>

  <button type="submit" id="submit-btn">Submit</button>
</form>

CSS部分（可选，做选中状态区分） #

.sample-grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 12px;
  margin: 16px 0;
}
.sample-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
}
.sample-img.active {
  border-color: #2563eb; /* 选中后显示蓝色边框 */
}

JS交互逻辑 #

const sampleImgs = document.querySelectorAll('.sample-img');
const selectedSampleInput = document.getElementById('selected-sample');
const userUploadInput = document.getElementById('user-upload');
const uploadBtn = document.getElementById('upload-btn');

// 示例图点击选择逻辑
sampleImgs.forEach(img => {
  img.addEventListener('click', () => {
    // 清空其他示例图的选中状态
    sampleImgs.forEach(i => i.classList.remove('active'));
    // 标记当前选中的示例图
    img.classList.add('active');
    // 存储选中的文件名到隐藏控件
    selectedSampleInput.value = img.dataset.filename;
    // 清空用户之前手动上传的文件，避免两种选择冲突
    userUploadInput.value = '';
  })
})

// 原有上传按钮逻辑保持不变，额外加清空示例图选中的逻辑
uploadBtn.addEventListener('click', () => {
  userUploadInput.click();
})
userUploadInput.addEventListener('change', () => {
  if (userUploadInput.value) {
    // 用户手动上传时清空示例图选择
    sampleImgs.forEach(i => i.classList.remove('active'));
    selectedSampleInput.value = '';
  }
})

步骤3：Flask后端适配 #

你只需要在原有预测接口前加一层判断，读取对应图片即可，后续模型预测逻辑完全不用修改：

from flask import Flask, request, render_template
import os
from PIL import Image # 你原有处理图片的依赖，不用更换

app = Flask(__name__)
# 配置示例图片存储路径
SAMPLE_IMG_DIR = os.path.join(app.static_folder, 'sample_images')

@app.route('/predict', methods=['POST'])
def predict():
    # 优先判断用户是否自主上传了图片
    upload_file = request.files.get('image')
    # 再判断用户是否选择了示例图
    selected_sample = request.form.get('selected_sample')
    img = None

    if upload_file and upload_file.filename != '':
        # 走原有用户上传图片的处理逻辑
        img = Image.open(upload_file.stream)
    elif selected_sample:
        # 走示例图读取逻辑
        sample_path = os.path.join(SAMPLE_IMG_DIR, selected_sample)
        # *必须加路径校验，避免恶意用户构造路径读取服务端其他文件*
        if not os.path.exists(sample_path) or not os.path.normpath(sample_path).startswith(os.path.normpath(SAMPLE_IMG_DIR)):
            return "无效的示例图片", 400
        img = Image.open(sample_path)
    else:
        return "请上传或选择图片", 400
    
    # 后面的模型预测逻辑完全复用原有代码即可，直接使用img对象处理
    # 【原有预测逻辑不变】

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