style: 优化笔记整理器的UI样式和响应式设计
添加自定义CSS样式改善整体视觉效果，包括： - 全局布局和间距调整 - 卡片、按钮和输入框的交互效果 - 标签和关键词的渐变样式 - 响应式设计适配移动设备
This commit is contained in:
parent
ea47c7ad09
commit
c3d78266c7
@ -21,6 +21,9 @@
|
||||
## 四、开发心得
|
||||
|
||||
在开发这个学习笔记整理器的过程中，我们深刻体会到了技术与需求之间的平衡。这个项目的目的是为了帮助学生更好地管理和查询学习笔记，让学习变得更加高效有序。我们面向的主要是在校学生，他们需要记录大量的学习内容，我们希望能提供给他们一个有效的整理和检索工具。项目功能包括笔记的创建、编辑、删除、分类管理、标签系统、智能搜索、内容提炼以及导入导出等核心功能，力求为学生们提供一个简单易用的笔记管理平台。
|
||||
|
||||
最初我们考虑使用Chainlit框架，因为它在AI交互方面表现突出，但在实际开发过程中发现，虽然Chainlit在对话式交互上有优势，但在笔记管理功能上显得不够完善，而且智能搜索的效果也没有达到预期。为了让搜索更加智能，我们尝试了各种prompt设计，包括语义搜索的prompt，要求AI根据用户查询理解意图而非简单关键词匹配；概括提取的prompt，让AI对搜索结果进行智能总结和关键点提取；意图识别的prompt，用于判断用户是想创建、编辑还是删除笔记；删除意图的prompt，区分删除单个笔记、删除所有笔记还是删除某个分类的笔记；以及笔记识别的prompt，让AI从多个笔记中找到用户指定的目标。这些prompt设计经过多次调整，包括改变temperature参数、调整max_tokens长度、优化system prompt的表述方式，但效果始终不尽如人意，AI经常误解用户意图或返回不相关的内容。
|
||||
|
||||
最终我们意识到单纯依赖AI并不能解决所有问题，于是转向了更传统但更可靠的解决方案。在搜索功能上，我们结合了关键词匹配和简单的语义分析，虽然不如纯AI搜索那么智能，但准确性和稳定性大大提升。在笔记管理方面，我们采用了传统的CRUD操作配合Streamlit的交互组件，让用户能够通过直观的界面进行操作，而不是完全依赖自然语言交互。这种混合模式既保留了AI的辅助功能，又确保了核心功能的可靠性。经过反复比较和测试，最终选择了Streamlit框架，它在界面设计和功能实现上更加成熟，能够更好地满足我们的需求。
|
||||
|
||||
这次开发经历让我们对自己的技术能力有了更清晰的认识。如果没有AI的辅助，我们可能根本无法独立完成这样一个项目，我们在编程基础、框架使用、算法设计等方面都存在很多不足。这次经历既让我们看到了AI工具的强大，也让我们明白了自己需要学习的地方还有很多，未来还需要更加努力地提升自己的技术能力。
|
||||
|
||||
@ -7,6 +7,148 @@ from collections import Counter
|
||||
|
||||
# 1. 页面配置
|
||||
st.set_page_config(page_title="学习笔记整理器", page_icon="📚", layout="wide")
|
||||
|
||||
# 添加自定义CSS样式
|
||||
st.markdown("""
|
||||
<style>
|
||||
/* 全局样式优化 */
|
||||
.main {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
h1 {
|
||||
color: #1a1a1a;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* 侧边栏样式 */
|
||||
[data-testid="stSidebar"] {
|
||||
background-color: #f8f9fa;
|
||||
border-right: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
/* 笔记卡片样式 */
|
||||
.stExpander {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stExpander:hover {
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* 按钮样式优化 */
|
||||
.stButton > button {
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.stButton > button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
.stTextInput > div > div > input,
|
||||
.stTextArea > div > div > textarea,
|
||||
.stSelectbox > div > div > select {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ced4da;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.stTextInput > div > div > input:focus,
|
||||
.stTextArea > div > div > textarea:focus,
|
||||
.stSelectbox > div > div > select:focus {
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
.tag {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin: 3px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
/* 关键词标签样式 */
|
||||
.keyword {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin: 3px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 4px rgba(240, 147, 251, 0.3);
|
||||
}
|
||||
|
||||
/* 分隔线样式 */
|
||||
hr {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #007bff, transparent);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* 统计卡片样式 */
|
||||
[data-testid="stMetricValue"] {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* 信息框样式 */
|
||||
.stAlert {
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
/* 成功提示 */
|
||||
.stAlert[role="alert"] {
|
||||
background-color: #d4edda;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
/* 警告提示 */
|
||||
.stAlert[role="alertwarning"] {
|
||||
background-color: #fff3cd;
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
/* 错误提示 */
|
||||
.stAlert[role="alerterror"] {
|
||||
background-color: #f8d7da;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stButton > button {
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
""", unsafe_allow_html=True)
|
||||
|
||||
st.title("📚 学习笔记整理器")
|
||||
|
||||
# 文本提炼函数
|
||||
|
||||
Loading…
Reference in New Issue
Block a user