乙巳马年春联生成终端代码实例：Custom CSS注入+全屏交互实现深度解析-育师

乙巳马年春联生成终端代码实例：Custom CSS注入+全屏交互实现深度解析

1. 引言：当AI对联遇上沉浸式视觉

想象一下，你只需要输入“如意”两个字，一秒钟后，一幅笔力遒劲、金光闪闪的春联就出现在一扇威严的皇家朱红大门上。这不是电影特效，而是一个真实可运行的Web应用。

今天要聊的，就是这样一个项目——乙巳马年·皇城大门春联生成终端。它本质上是一个基于AI的春联生成器，但它的特别之处在于，它把整个生成过程，包装成了一场充满仪式感的“开门见喜”体验。

这篇文章，我们不只讲它用了什么AI模型，更要深度拆解它背后的前端魔法：如何通过Custom CSS注入，将一个普通的Streamlit应用，彻底改造成一个全屏、沉浸式的视觉艺术品。你会发现，技术不只是实现功能，更能创造氛围和情感。

2. 项目核心：技术栈与设计理念

在深入代码之前，我们先理解这个项目的“灵魂”。它由两大支柱构成：

2.1 技术栈：简洁而高效

AI大脑：ModelScope平台的spring_couplet_generation模型。这是一个专门为生成春联优化的预训练模型，你给它一个关键词，它能返回工整的对联和横批。
应用框架：Streamlit。选择它是因为其快速构建数据应用的能力，但默认的UI风格比较“极客”，离我们想要的“皇城大门”相去甚远。
视觉改造核心：Custom CSS（层叠样式表）。这是本项目的技术焦点，我们通过注入自定义的CSS，覆盖Streamlit的默认样式，实现从背景、布局到字体、动画的全方位重塑。
字体：Google Fonts的“Ma Shan Zheng”（马善政书法体），为对联赋予毛笔书法的神韵。

2.2 设计理念：从工具到仪式

传统的AI工具界面往往是：一个输入框、一个按钮、一个输出区域。功能有了，但美感与趣味缺失。

这个项目的设计理念是“仪式感”：

场景化：不是“生成对联”，而是“叩开皇城大门”。
全屏沉浸：消除所有无关的浏览器UI元素和Streamlit控件痕迹，让用户的视线完全聚焦于“门”上。
视觉符号：使用朱红色、金钉、门神年画、巨幅卷轴等强文化符号，瞬间营造新年氛围。
交互隐喻：按钮文案是“开门见喜”，点击动作被赋予了“推开好运之门”的寓意。

接下来，我们就看看如何用代码实现这场视觉仪式。

3. 深度解析：Custom CSS注入的实战代码

这是整个项目前端效果的核心。我们通过在Streamlit中注入大段CSS代码，来“夺舍”其默认样式。

3.1 基础：全屏与背景重置

首先，我们需要让应用撑满整个浏览器窗口，并设置我们的核心背景——朱红大门。

import streamlit as st # 在main函数最开始，注入整个页面的CSS def local_css(): st.markdown(""" <style> /* 1. 重置整个页面，实现全屏 */ .stApp { max-width: 100% !important; padding-top: 0px !important; padding-left: 0px !important; padding-right: 0px !important; } /* 隐藏Streamlit默认的边栏、菜单等元素 */ #MainMenu {visibility: hidden;} footer {visibility: hidden;} header {visibility: hidden;} /* 2. 设置皇城大门背景 */ .stApp > header + div > div { background: linear-gradient(to bottom, #8b0000, #d32f2f) !important; /* 朱红渐变 */ min-height: 100vh; /* 至少充满整个视口高度 */ } /* 3. 创建“门钉”纹理效果 - 使用背景图片或CSS渐变模拟 */ body { background-image: radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.3) 2px, transparent 3px), radial-gradient(circle at 75% 75%, rgba(255, 215, 0, 0.3) 2px, transparent 3px); background-size: 100px 100px; /* 控制门钉间距 */ } </style> """, unsafe_allow_html=True) # 在应用初始化时调用 local_css()

代码解读：

.stApp是Streamlit主内容容器的类。我们通过max-width: 100%和去除内边距，让它横向撑满。
min-height: 100vh确保内容区域在垂直方向也至少充满屏幕（vh是视口高度单位）。
通过visibility: hidden隐藏了Streamlit的页眉、页脚和菜单，让界面更干净。
背景使用CSS的linear-gradient创建了从上至下的深红到朱红的渐变，模拟宫门质感。
radial-gradient被巧妙用来模拟金色的门钉纹理，这是一种轻量级的实现方式。

3.2 核心：对联区域的视觉塑造

这是UI的视觉中心。我们需要创建三个独立的区域（上联、下联、横批），并应用书法字体和金色特效。

/* 4. 对联容器布局 - 使用Flexbox实现居中与分布 */ .couplet-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; position: relative; } /* 5. 横批样式 */ .horizontal-couplet { font-family: 'Ma Shan Zheng', cursive, 'Noto Serif SC', serif; font-size: 4.5rem !important; /* 巨大字号 */ color: #FFD700 !important; /* 金色 */ text-align: center; margin-bottom: 3rem; text-shadow: 3px 3px 0px #8B7500, /* 第一层深金阴影，模拟毛笔浸润 */ 6px 6px 5px rgba(139, 117, 0, 0.5); /* 第二层模糊阴影，增加立体感 */ letter-spacing: 0.5rem; /* 字间距 */ } /* 6. 上下联容器（并排） */ .vertical-couplet-pair { display: flex; justify-content: center; gap: 8rem; /* 左右联之间的巨大间距，模拟大门两侧 */ } /* 7. 单侧对联样式 */ .vertical-couplet { font-family: 'Ma Shan Zheng', cursive, 'Noto Serif SC', serif; font-size: 5.5rem !important; color: #FFD700; writing-mode: vertical-rl; /* 关键！让文字垂直排列从右至左 */ text-orientation: mixed; line-height: 1.2; padding: 2rem 1rem; text-shadow: 2px 2px 0px #8B7500, 4px 4px 4px rgba(139, 117, 0, 0.4); border-left: 5px solid transparent; /* 预留空间，可添加卷轴边框图片 */ border-right: 5px solid transparent; }

代码解读：

writing-mode: vertical-rl是实现中文竖排文字的关键CSS属性，rl表示从右向左（符合传统对联阅读顺序）。
text-shadow被多层叠加使用，第一层清晰的深色阴影模拟毛笔字的“飞白”或浓重笔触，第二层模糊阴影增加立体感和光晕，这是实现“金色霓虹投影效果”的核心。
rem是相对单位，基于根字体大小，使得整体布局在不同屏幕上有更好的缩放性。
通过Flexbox布局，轻松实现了横批居中、上下联左右分布的经典构图。

3.3 点睛：按钮与输入框的美化

交互元素也需要融入整体风格，不能是浏览器默认的灰色按钮。

/* 8. 愿望输入框 - 设计成匾额样式 */ .stTextInput > div > div > input { background-color: rgba(255, 215, 0, 0.1) !important; border: 3px solid #FFD700 !important; border-radius: 0px !important; /* 方形匾额 */ color: #FFF !important; font-size: 1.8rem !important; text-align: center; padding: 1.5rem !important; font-family: 'Noto Serif SC', serif; } /* 输入框聚焦时的效果 */ .stTextInput > div > div > input:focus { box-shadow: 0 0 15px #FFD700 !important; outline: none !important; } /* 9. “开门见喜”按钮 - 设计成大红按钮 */ .stButton > button { background: linear-gradient(145deg, #d32f2f, #8b0000) !important; color: #FFD700 !important; border: 3px solid #FFD700 !important; border-radius: 50px !important; /* 椭圆形按钮 */ font-size: 2rem !important; font-weight: bold; font-family: 'Ma Shan Zheng', cursive; padding: 1rem 3rem; width: 100%; transition: all 0.3s ease !important; } /* 按钮悬停效果 */ .stButton > button:hover { background: linear-gradient(145deg, #ff5252, #b71c1c) !important; box-shadow: 0 0 25px rgba(255, 215, 0, 0.7) !important; transform: scale(1.05); }

代码解读：

通过stTextInput > div > div > input这样层层递进的选择器，可以精准地选中Streamlit生成的输入框内部元素，并覆盖其样式。这是定制化Streamlit UI的常用技巧。
按钮使用了linear-gradient创建红金渐变，border-radius设为50px形成椭圆形。
transition属性为按钮添加了平滑的悬停动画（颜色变亮、阴影出现、轻微放大），提升了交互的精致感。

4. 应用场景与价值思考

这个项目不仅仅是一个技术Demo，它展示了前端交互设计在AI应用中的巨大价值。

4.1 适用场景

文化科技展示：在博物馆、科技馆或文化展览中，作为吸引观众互动、体验AI+传统文化结合的亮点展项。
品牌营销活动：企业在新年期间，可以快速部署此应用，让用户生成带有品牌元素的定制春联，在社交媒体传播，极具话题性和视觉冲击力。
教育工具：以一种生动有趣的方式，向学生展示自然语言生成（NLG）的能力，并融入书法、对联格律等传统文化知识。
个性化贺礼：用户生成对联后，可以截图保存，制作成独一无二的电子贺卡或手机壁纸。

4.2 技术启示

CSS是强大的“界面整形术”：即使使用Streamlit、Gradio这类偏向功能性的快速开发框架，通过深入的CSS定制，也能实现高度复杂和品牌化的视觉设计，打破“模板化”的界面困局。
体验重于功能：在AI能力趋同的今天，用户体验的差异化往往体现在交互细节和视觉情感上。将一次“点击生成”转化为一场“开门见喜”的仪式，极大地提升了产品的记忆点和传播力。
技术服务于文化表达：技术选型（如垂直排版、书法字体、色彩体系）都紧密围绕“中国皇家美学”这一主题，确保了形式与内容的统一。