import streamlit as st
import time
import base64
from streamlit.components.v1 import html# 自定义CSS样式
def set_custom_style():st.markdown("""
<style>/* 页面背景:浅色渐变,提高可读性 */.main {background: linear-gradient(135deg, #E0F7FA, #FFFFFF);color: #333 ;}/* 玻璃拟态面板优化 */.glass-panel {background: rgba(255, 255, 255, 0.8) !important;backdrop-filter: blur(12px) saturate(150%);border-radius: 16px;padding: 1.5rem;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);margin-bottom: 1.5rem;}/* 统一输入文本 & 翻译结果的标题格式,确保对齐 */.section-title {font-size: 1.2rem;font-weight: bold;color: #333;text-align: center;margin-bottom: 0.5rem;padding: 0.5rem 0;border-bottom: 2px solid #ddd; /* 增加底部线条增强层次感 */}/* 输入框优化 */.stTextArea textarea {background: white !important;color: #333 !important;border: 1px solid rgba(0, 0, 0, 0.2) !important;border-radius: 12px;padding: 1rem;font-size: 2rem;transition: all 0.3s ease;}/* 按钮优化 */.stButton>button {background: linear-gradient(135deg, #4A90E2, #0084FF) !important;color: white !important;border-radius: 10px !important;padding: 0.7rem 1.8rem !important;font-weight: 600 !important;border: none !important;transition: transform 0.2s ease-in-out;}.stButton>button:hover {transform: translateY(-2px);box-shadow: 0 3px 10px rgba(0, 132, 255, 0.3);}/* Logo 调整:固定在页面顶部 */.logo-header {position: relative; top: -1rem;left: 0rem;display: flex;align-items: center;gap: 1rem;z-index: 1000;}/* 适配不同屏幕的 Logo 位置 */@media (max-width: 768px) {.logo-header {top: 0.5rem;left: 50%;transform: translateX(-50%);}}/* 提示框优化 */.stAlert {border-radius: 10px !important;backdrop-filter: blur(10px);background: rgba(255, 255, 255, 0.9);color: #333;}/* 功能卡片优化 */.feature-card {background: white;padding: 1.2rem;border-radius: 12px;margin: 0.8rem 0;box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);transition: all 0.3s ease;}.feature-card:hover {background: #F7FAFC;transform: translateY(-4px);}
</style>""", unsafe_allow_html=True)# 粒子动画
def set_particles():particles_js = """<script>particlesJS('particles', {particles: {number: { value: 60 },color: { value: '#ffffff' },shape: { type: 'circle' },opacity: { value: 0.3 },size: { value: 2.5 },move: { enable: true, speed: 1.5 }},interactivity: {events: { onhover: { enable: true, mode: 'repulse' } }},retina_detect: true});</script>"""html(particles_js)# 模拟翻译
def translate(text, source, target):time.sleep(0.5)return "ཁམས་བཟང་།"def main():st.set_page_config(page_title="多语言智能翻译平台", page_icon="🌐", layout="wide")set_custom_style()# 顶部导航栏with st.container():col1, col2 = st.columns([1, 4])with col1:try:logo = base64.b64encode(open("./image/logo.png", "rb").read()).decode()st.markdown(f"""<div class="logo-header"><img src="data:image/png;base64,{logo}" style="height:80px"><h3 style="margin:0; font-size:1.5rem;">藏语翻译器 - Tibetan Translator</h3></div>""", unsafe_allow_html=True)except:st.markdown("<h3>藏语翻译器 - Tibetan Translator</h3>", unsafe_allow_html=True)# 主要功能介绍st.title("🌐 多语言智能翻译")with st.container():cols = st.columns(3)features = [("🌍", "支持50+语言", "覆盖全球主流语言"),("⚡", "实时翻译", "毫秒级响应"),("🔒", "安全加密", "保障数据安全")]for col, (icon, title, desc) in zip(cols, features):with col:st.markdown(f"""<div class="feature-card"><div style="font-size:2.5rem">{icon}</div><h4>{title}</h4><p style="opacity:0.8; font-size:0.9rem">{desc}</p></div>""", unsafe_allow_html=True)# 翻译区域with st.form("translation_form"):col1, col2, col3 = st.columns([3, 1, 3])with col1:st.subheader("输入文本")source_lang = st.selectbox("源语言", ["自动检测", "中文", "英语", "藏语"])input_text = st.text_area("输入内容", height=200, placeholder="输入要翻译的内容...", label_visibility="collapsed")with col2:st.write("") # 占位if st.form_submit_button("⇄ 翻译", use_container_width=True):if input_text:st.session_state["output_text"] = translate(input_text, source_lang, "目标语言")with col3:st.subheader("翻译结果")target_lang = st.selectbox("目标语言", ["藏语", "中文", "英语", "日语"])output_text = st.text_area("翻译结果",height=200,value=st.session_state.get("output_text", ""),disabled=False,label_visibility="collapsed")with st.expander("高级选项"):st.checkbox("保持格式", True)st.checkbox("术语优化", True)st.checkbox("发音标注", False)# 翻译历史记录with st.container():st.subheader("📜 最近翻译")history_cols = st.columns(3)examples = [("你好 → 藏语", "བཀྲ་ཤིས་བདེ་ལེགས།"), ("Welcome → 中文", "欢迎"), ("ཐུགས་རྗེ་ཆེ་ → 英语", "Thank you")]for col, (title, content) in zip(history_cols, examples):with col:st.markdown(f"""<div class="feature-card"><div style="font-size:0.9rem; opacity:0.8">{title}</div><div style="margin-top:0.5rem">{content}</div></div>""", unsafe_allow_html=True)html('<div id="particles"></div>')set_particles()if __name__ == "__main__":main()