Streamlit开发：模型运行时隐藏/禁用RUN按钮的实现方法

核心思路是通过状态控制按钮的可用状态或显示状态：在推理开始时切换状态禁用/隐藏按钮，推理完成（无论成功或失败）后恢复状态。以下是不同技术栈的实现示例：

原生JavaScript + HTML 场景 #

<button id="runBtn">RUN</button>

<script>
const runBtn = document.getElementById('runBtn');

// 模拟Stable Diffusion推理逻辑（替换为你的实际代码）
async function runStableDiffusion() {
  // 这里调用模型推理API或本地推理逻辑
  await new Promise(resolve => setTimeout(resolve, 3000)); // 模拟3秒推理耗时
}

runBtn.addEventListener('click', async () => {
  // 禁用按钮（或用 runBtn.style.display = 'none' 隐藏）
  runBtn.disabled = true;

  try {
    await runStableDiffusion();
  } catch (err) {
    console.error('推理失败:', err);
  } finally {
    // 恢复按钮可用（或用 runBtn.style.display = 'inline-block' 显示）
    runBtn.disabled = false;
  }
});
</script>

React 函数组件场景 #

import { useState } from 'react';

function SDInferenceApp() {
  const [isInferring, setIsInferring] = useState(false);

  const handleRun = async () => {
    setIsInferring(true);
    try {
      // 实际调用Stable Diffusion推理逻辑
      await new Promise(resolve => setTimeout(resolve, 3000));
    } catch (err) {
      console.error('推理出错:', err);
    } finally {
      setIsInferring(false);
    }
  };

  return (
    <button
      onClick={handleRun}
      disabled={isInferring}
      // 隐藏按钮可替换为：style={{ display: isInferring ? 'none' : 'inline-block' }}
    >
      {isInferring ? '推理中...' : 'RUN'}
    </button>
  );
}

export default SDInferenceApp;

Vue 3 组合式API场景 #

<template>
  <button
    @click="handleRun"
    :disabled="isInferring"
    <!-- 隐藏按钮可替换为：v-show="!isInferring" -->
  >
    {{ isInferring ? '推理中...' : 'RUN' }}
  </button>
</template>

<script setup>
import { ref } from 'vue';

const isInferring = ref(false);

const handleRun = async () => {
  isInferring.value = true;
  try {
    // 替换为你的Stable Diffusion推理逻辑
    await new Promise(resolve => setTimeout(resolve, 3000));
  } catch (err) {
    console.error('推理失败:', err);
  } finally {
    isInferring.value = false;
  }
};
</script>

关键注意事项 #

• 必须使用try/finally：即使推理过程中抛出错误，也能确保按钮恢复可用，避免用户陷入无法操作的状态。
• 用户体验优化：建议将按钮文本改为“推理中...”，比单纯禁用更直观。
• 禁用vs隐藏：禁用按钮保留占位，用户明确知道按钮位置；隐藏按钮节省空间，但可能让用户困惑，根据UI需求选择。

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