refactor(ui): 使用 Streamlit 原生组件简化界面实现
- 移除大量自定义 CSS 样式，仅保留字体设置 - 将自定义 HTML 结构替换为 st.title/st.caption/st.container/st.info 等原生组件 - 简化快捷问题、输入框、回答展示、错误提示和页脚的实现 - 减少维护复杂度，提升代码可读性
This commit is contained in:
zhenghu
236
app.py
236
app.py
@@ -17,179 +17,11 @@ st.set_page_config(
|
||||
initial_sidebar_state="collapsed",
|
||||
)
|
||||
|
||||
# ─── Custom CSS ──────────────────────────────────────────────────────────────
|
||||
# ─── Minimal CSS ─────────────────────────────────────────────────────────────
|
||||
st.markdown("""
|
||||
<style>
|
||||
:root {
|
||||
--soil: #8b5a2b;
|
||||
--leaf: #4a7c59;
|
||||
--leaf-light: #6b9e75;
|
||||
--wheat: #d4a574;
|
||||
--cream: #faf8f3;
|
||||
--paper: #ffffff;
|
||||
--ink: #2c2c2c;
|
||||
--ink-muted: #5a5a5a;
|
||||
--border: #e5e0d5;
|
||||
}
|
||||
|
||||
html, body, [class*="css"] {
|
||||
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.stApp {
|
||||
background: var(--cream);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.app-header {
|
||||
text-align: center;
|
||||
padding: 40px 0 24px;
|
||||
}
|
||||
.app-header h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--soil);
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.app-header p {
|
||||
font-size: 0.95rem;
|
||||
color: var(--ink-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Input area */
|
||||
.question-box {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin: 16px 0 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
/* Answer card */
|
||||
.answer-card {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin: 16px 0;
|
||||
line-height: 1.85;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
|
||||
}
|
||||
.answer-card h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--leaf);
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Thinking card */
|
||||
.thinking-card {
|
||||
background: #f7f9f7;
|
||||
border: 1px dashed var(--leaf-light);
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
margin: 12px 0;
|
||||
color: var(--ink-muted);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Quick chips */
|
||||
.quick-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
padding: 8px 0 24px;
|
||||
}
|
||||
.quick-chip {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 8px 16px;
|
||||
font-size: 0.88rem;
|
||||
color: var(--ink-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.quick-chip:hover {
|
||||
border-color: var(--leaf-light);
|
||||
color: var(--leaf);
|
||||
background: #f9fcf9;
|
||||
}
|
||||
|
||||
/* Alert boxes */
|
||||
.alert-error {
|
||||
background: #fff5f5;
|
||||
border: 1px solid #ffd1d1;
|
||||
border-radius: 12px;
|
||||
padding: 14px 18px;
|
||||
margin: 10px 0;
|
||||
font-size: 0.92rem;
|
||||
color: #b33a3a;
|
||||
}
|
||||
|
||||
/* Streamlit native overrides */
|
||||
.stTextArea textarea {
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 12px !important;
|
||||
font-size: 1rem !important;
|
||||
color: var(--ink) !important;
|
||||
background: var(--paper) !important;
|
||||
}
|
||||
.stTextArea textarea:focus {
|
||||
border-color: var(--leaf-light) !important;
|
||||
box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.08) !important;
|
||||
}
|
||||
.stButton > button {
|
||||
border-radius: 10px !important;
|
||||
padding: 10px 28px !important;
|
||||
font-size: 0.95rem !important;
|
||||
background: var(--leaf) !important;
|
||||
border: none !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.stButton > button:hover {
|
||||
background: var(--leaf-light) !important;
|
||||
}
|
||||
|
||||
/* Settings panel */
|
||||
.settings-panel {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 18px 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.settings-panel summary {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--ink-muted);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.settings-panel summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.app-footer {
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: #aaa;
|
||||
padding: 32px 0 16px;
|
||||
}
|
||||
</style>
|
||||
""", unsafe_allow_html=True)
|
||||
@@ -205,31 +37,22 @@ QUICK_QUESTIONS = [
|
||||
|
||||
|
||||
# ─── Header ──────────────────────────────────────────────────────────────────
|
||||
st.markdown("""
|
||||
<div class="app-header">
|
||||
<h1>🌾 农技问答</h1>
|
||||
<p>有农业问题，随时来问</p>
|
||||
</div>
|
||||
""", unsafe_allow_html=True)
|
||||
st.title("🌾 农技问答")
|
||||
st.caption("有农业问题，随时来问")
|
||||
st.markdown("<br>", unsafe_allow_html=True)
|
||||
|
||||
# ─── Quick Questions ─────────────────────────────────────────────────────────
|
||||
chips_html = '<div class="quick-chips">'
|
||||
for q in QUICK_QUESTIONS:
|
||||
chips_html += f'<span class="quick-chip" onclick="">{q}</span>'
|
||||
chips_html += '</div>'
|
||||
st.markdown(chips_html, unsafe_allow_html=True)
|
||||
|
||||
# Handle chip clicks via native buttons (invisible, placed neatly)
|
||||
cols = st.columns(len(QUICK_QUESTIONS))
|
||||
for i, q in enumerate(QUICK_QUESTIONS):
|
||||
with st.container(border=False):
|
||||
cols = st.columns(len(QUICK_QUESTIONS))
|
||||
for i, q in enumerate(QUICK_QUESTIONS):
|
||||
with cols[i]:
|
||||
st.markdown("<div style='margin-top:-52px;'>" + " " + "</div>", unsafe_allow_html=True)
|
||||
if st.button(q, key=f"chip_{q}", use_container_width=True):
|
||||
st.session_state.user_input = q
|
||||
st.rerun()
|
||||
|
||||
st.markdown("<br>", unsafe_allow_html=True)
|
||||
|
||||
# ─── Input ───────────────────────────────────────────────────────────────────
|
||||
st.markdown('<div class="question-box">', unsafe_allow_html=True)
|
||||
user_input = st.text_area(
|
||||
"请输入您的问题",
|
||||
value=st.session_state.get("user_input", ""),
|
||||
@@ -237,10 +60,7 @@ user_input = st.text_area(
|
||||
placeholder="例如：水稻稻瘟病怎么防治？",
|
||||
label_visibility="collapsed",
|
||||
)
|
||||
col1, col2 = st.columns([1, 6])
|
||||
with col1:
|
||||
submitted = st.button("发送", use_container_width=True)
|
||||
st.markdown('</div>', unsafe_allow_html=True)
|
||||
submitted = st.button("发送", type="primary")
|
||||
|
||||
# ─── Settings Panel ──────────────────────────────────────────────────────────
|
||||
with st.expander("⚙️ 模型设置"):
|
||||
@@ -292,25 +112,16 @@ if submitted and user_input.strip():
|
||||
if reasoning_piece:
|
||||
full_reasoning += reasoning_piece
|
||||
if enable_thinking:
|
||||
thinking_placeholder.markdown(
|
||||
f'<div class="thinking-card">'
|
||||
f'<strong>正在思考...</strong><br>'
|
||||
f'<div style="white-space:pre-wrap;margin-top:6px;">{full_reasoning}</div>'
|
||||
f'</div>',
|
||||
unsafe_allow_html=True,
|
||||
thinking_placeholder.info(
|
||||
"**正在思考...**\n\n" + full_reasoning
|
||||
)
|
||||
|
||||
content_piece = delta.get("content", "")
|
||||
if content_piece:
|
||||
full_content += content_piece
|
||||
answer_placeholder.markdown(
|
||||
f'<div class="answer-card">'
|
||||
f'<h3>🌱 回答</h3>'
|
||||
f'<div style="color:var(--ink);font-size:1rem;white-space:pre-wrap;">'
|
||||
f'{full_content}</div>'
|
||||
f'</div>',
|
||||
unsafe_allow_html=True,
|
||||
)
|
||||
with answer_placeholder.container(border=True):
|
||||
st.markdown("### 🌱 回答")
|
||||
st.markdown(full_content)
|
||||
|
||||
if full_reasoning and enable_thinking:
|
||||
thinking_placeholder.empty()
|
||||
@@ -318,19 +129,10 @@ if submitted and user_input.strip():
|
||||
st.markdown(full_reasoning)
|
||||
|
||||
except httpx.HTTPStatusError as e:
|
||||
st.markdown(
|
||||
f'<div class="alert-error">请求失败 (HTTP {e.response.status_code}): {e.response.text}</div>',
|
||||
unsafe_allow_html=True,
|
||||
)
|
||||
st.error(f"请求失败 (HTTP {e.response.status_code}): {e.response.text}")
|
||||
except Exception as e:
|
||||
st.markdown(
|
||||
f'<div class="alert-error">请求异常: {e}</div>',
|
||||
unsafe_allow_html=True,
|
||||
)
|
||||
st.error(f"请求异常: {e}")
|
||||
|
||||
# ─── Footer ───────────────────────────────────────────────────────────────────
|
||||
st.markdown("""
|
||||
<div class="app-footer">
|
||||
农业技术知识问答 · 仅供参考
|
||||
</div>
|
||||
""", unsafe_allow_html=True)
|
||||
st.divider()
|
||||
st.caption("农业技术知识问答 · 仅供参考")
|
||||
|
||||
Reference in New Issue
Block a user