鸿蒙Electron框架下鸿蒙PC-AI藏头诗生成器 - 技术实现详解

欢迎加入开源鸿蒙PC社区： https://harmonypc.csdn.net/

atomgit地址：https://gitcode.com/feng8403000/ai_cangtoushi

效果演示

一、项目背景与设计理念

1.1 藏头诗的文化价值

藏头诗是中国古典诗歌的一种特殊形式，又称"藏头格"，是将需要表达的意思隐藏在每句诗的第一个字中。这种诗歌形式兼具文学性和趣味性，自古以来就受到文人墨客的喜爱。

传统藏头诗的特点：

• 每句诗的第一个字连读，组成一个完整的句子或词语
• 既要保证藏头的完整性，又要兼顾诗歌的韵律美
• 往往用于表达隐秘的情感或祝福

例如明代才子唐伯虎的《我画蓝江水悠悠》：

我闻琵琶叹息声， 画眉深浅入时无。 蓝田日暖玉生烟， 江水东流无限情。

这首诗每句首字连起来就是"我画蓝江"，构思巧妙，意境深远。

1.2 为什么需要AI藏头诗生成器

在数字时代，我们希望通过技术手段让藏头诗的创作变得更加便捷：

1.3 技术选型

我们选择了纯前端实现方案，原因如下：

由于藏头诗有明确的规则约束（藏头字固定、格律要求），纯前端方案完全能够满足需求。我们通过精心设计的规则引擎和素材库，实现了高质量的藏头诗生成。

二、系统架构设计

2.1 整体架构

系统采用经典的三层架构设计：

┌─────────────────────────────────────────────────────────────┐
│ 表现层 (UI Layer) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐│
│ │ 输入面板 │ │ 展示面板 │ │ 历史记录面板 ││
│ └─────────────┘ └─────────────┘ └─────────────────────┘│
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 业务逻辑层 (Service Layer) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐│
│ │ 诗歌生成器 │ │ 主题切换器 │ │ 工具函数 ││
│ └─────────────┘ └─────────────┘ └─────────────────────┘│
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 数据层 (Data Layer) │
│ ┌─────────────────────────┐ ┌────────────────────────────┐│
│ │ 诗词素材数据库 │ │ 本地存储 (LocalStorage) ││
│ │ poemThemes / poemTypes │ │ poemHistory / poemStats ││
│ └─────────────────────────┘ └────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

2.2 核心模块划分

2.2.1 配置模块 (config.js)

负责存储和管理静态数据，包括：

• poemThemes：六大主题素材库，每主题包含关键字和诗句模板
• poemTypes：诗歌体裁配置，定义各体裁的句数和每句字数
• poemThemes：韵脚分组，用于押韵判断
• 工具函数：随机选择、打乱数组等辅助函数

2.2.2 AI模块 (ai.js)

核心生成逻辑，包含：

• generateAcrostic()：主生成函数，协调各子模块
• generateLine()：单句诗生成
• buildLineFromTemplate()：基于模板构建诗句
• fillTemplate()：模板填充逻辑
• renderPoemDisplay()：诗歌渲染函数
• 历史记录管理：增删改查功能

2.2.3 控制器 (battle.js)

用户交互和事件处理：

• initApp()：应用初始化入口
• generatePoem()：生成按钮点击处理
• copyPoem()：复制功能
• readPoem()：朗读功能
• 主题切换：主题切换系统
• 事件绑定：各类交互事件

2.3 数据流设计

用户输入藏头文字
│
▼
输入验证 (长度检查：2-10字)
│
▼
获取用户配置 (体裁、风格、押韵等)
│
▼
调用 generateAcrostic() 生成诗歌
│
├─→ 遍历每个藏头字
│ │
│ ▼
│ 生成对应诗句
│ │
│ ▼
│ 检查素材库是否有现成诗句
│ │
│ ├─→ 有 → 直接使用
│ └─→ 无 → 模板填充
│
▼
构建诗歌对象
│
▼
保存到历史记录 (LocalStorage)
│
▼
渲染展示 (高亮藏头字)

三、核心代码详解

3.1 诗歌生成核心逻辑

3.1.1 主生成函数

function generateAcrostic(hiddenWords, options = {}) {
const {
theme = 'romantic',
type = 'qijue',
useRhyme = true,
usePingze = false
} = options;

// 验证输入
if (!hiddenWords || hiddenWords.length < 2) {
throw new Error('请输入至少2个字的藏头文字');
}

if (hiddenWords.length > 10) {
throw new Error('藏头文字最多10个字');
}

// 获取主题素材
const themeData = poemThemes[theme] || poemThemes.romantic;
const config = poemTypes[type] || poemTypes.qijue;

// 生成诗句
const lines = [];
for (let i = 0; i < hiddenWords.length; i++) {
const hiddenWord = hiddenWords[i];
const line = generateLine(hiddenWord, themeData, config, i);
lines.push(line);
}

// 构建诗歌对象
const poem = {
id: Date.now(),
title: generateTitle(hiddenWords),
hiddenWords: hiddenWords,
lines: lines,
theme: theme,
type: type,
useRhyme: useRhyme,
usePingze: usePingze,
createdAt: new Date().toISOString()
};

return poem;
}

设计要点：

3.1.2 单句生成函数

function generateLine(hiddenWord, themeData, config, index) {
const patterns = [
`${hiddenWord}XXXXXXX`, // 七言
`${hiddenWord}XXXXX`, // 五言
`${hiddenWord}XXXXXXX`, // 通用
`${hiddenWord}XXXXXX` // 词
];

// 选择合适的模板
let pattern;
if (config.syllables === 7) {
pattern = patterns[0];
} else if (config.syllables === 5) {
pattern = patterns[1];
} else if (config.type === 'ci') {
pattern = patterns[3];
} else {
pattern = patterns[2];
}

// 从主题库中选择或生成句子
const suitableLines = themeData.lines.filter(line => line.startsWith(hiddenWord));

if (suitableLines.length > 0) {
// 找到以藏头字开头的诗句
return randomChoice(suitableLines);
} else {
// 生成新句子
return buildLineFromTemplate(hiddenWord, themeData, config, index);
}
}

设计要点：

3.2 主题素材数据库

3.2.1 数据结构设计

const poemThemes = {
romantic: {
name: '浪漫抒情',
words: ['花', '月', '情', '思', '梦', '缘', '爱', '恋', …],
lines: [
'花开四季香满庭',
'月照西楼影自怜',
'情意绵绵似水流',
'思念悠悠如云烟',
…
]
},
heroic: {
name: '豪迈壮阔',
words: ['天', '地', '山', '河', '剑', '酒', '风', '云', …],
lines: [
'天高地阔任我行',
'地势坤厚载物情',
'山高路远志不移',
'河水滔滔向东流',
…
]
},
// … 其他主题
};

数据结构说明：

3.2.2 体裁配置

const poemTypes = {
qijue: { name: '七言绝句', lines: 4, syllables: 7 },
wujue: { name: '五言绝句', lines: 4, syllables: 5 },
qilv: { name: '七言律诗', lines: 8, syllables: 7 },
wulv: { name: '五言律诗', lines: 8, syllables: 5 },
ci: { name: '词·长短句', lines: 6, syllables: 7 },
free: { name: '自由体', lines: 0, syllables: 0 }
};

体裁参数说明：

3.3 模板填充算法

function fillTemplate(template, hiddenWord, themeData) {
let result = hiddenWord;
let templateIndex = 1;

while (result.length < 7 && templateIndex < template.length) {
const char = template[templateIndex];
if (char === 'X') {
result += randomChoice(themeData.words);
} else if (char !== 'X') {
result += char;
}
templateIndex++;
}

// 补充到完整长度
while (result.length < 7) {
result += randomChoice(themeData.words);
}

return result;
}

算法流程：

开始
│
▼
result = 藏头字, templateIndex = 1
│
▼
┌─────────────────────────────┐
│ result.length < 7 且 │◀────────┐
│ templateIndex < 模板长度 │ │
└─────────────────────────────┘ │
│ │
├─ 是 ──→ 获取模板字符 │
│ │
▼ │
┌──────────────┐ │
│ 字符是 'X'？ │ │
└──────────────┘ │
│ │ │
├─ 是 ──→ 随机选择主题词填充 │
│ │ │
├─ 否 ──→ 直接追加字符 │
│ │ │
▼ ▼ │
templateIndex++ ──────────────────────┘
│
▼
┌──────────────────┐
│ result.length < 7 │◀────────┐
└──────────────────┘ │
│ │
└─ 是 ──→ 随机填充 ────┘
│
▼
返回结果

3.4 渲染与展示

function renderPoemDisplay(poem) {
const display = document.getElementById('poemDisplay');
if (!poem) {
display.innerHTML = `
<div class="empty-state">
<div class="empty-icon">🎨</div>
<p class="empty-text">输入藏头文字，点击生成按钮</p>
<p class="empty-sub">AI将为您创作一首优美的藏头诗</p>
</div>
`;
return;
}

const poemType = poemTypes[poem.type] || { name: '诗' };
const themeName = poemThemes[poem.theme]?.name || '诗';

// 高亮藏头字
const linesHtml = poem.lines.map((line, index) => {
const hiddenWord = poem.hiddenWords[index];
const rest = line.substring(hiddenWord.length);
return `<span class="poem-line">
<span class="hidden-word">${hiddenWord}</span>${rest}
</span>`;
}).join('');

display.innerHTML = `
<div class="poem-result">
<h3 class="poem-title">${poem.title}</h3>
<div class="poem-content">
${linesHtml}
</div>
<div class="poem-meta">
<span class="poem-tag">${poemType.name}</span>
<span class="poem-tag">${themeName}</span>
${poem.useRhyme ? '<span class="poem-tag">押韵</span>' : ''}
${poem.usePingze ? '<span class="poem-tag">平仄</span>' : ''}
</div>
</div>
`;
}

渲染策略：

四、主题切换系统实现

4.1 CSS变量系统

我们采用CSS Custom Properties（CSS变量）实现主题切换：

/* 科技感主题（默认） */
[data-theme="tech"] {
–primary: #00d9ff;
–primary-light: #66e5ff;
–primary-dark: #00a8cc;
–accent: #7b2cbf;
–accent-light: #9f46d4;
–gold: #ffd700;
–gold-light: #ffe066;
–bg-paper: #0a0a0f;
–bg-panel: #121218;
–bg-card: #1e1e2a;
–border: #2a2a3a;
–border-dark: #3a3a4a;
–text-primary: #e0e0e0;
–text-secondary: #a0a0a0;
–text-muted: #707070;
–shadow: 0 0 20px rgba(0, 217, 255, 0.15);
–shadow-hover: 0 0 40px rgba(0, 217, 255, 0.25);
}

/* 古典雅致主题 */
[data-theme="classical"] {
–primary: #2c3e50;
–primary-light: #34495e;
–primary-dark: #1a252f;
–accent: #c0392b;
–accent-light: #d64541;
–gold: #c9a227;
–gold-light: #e6c84a;
–bg-paper: #f5f0e6;
–bg-panel: #fffef5;
–bg-card: #ffffff;
–border: #d4c4a8;
–border-dark: #b8a88a;
–text-primary: #2c3e50;
–text-secondary: #5d6d7e;
–text-muted: #95a5a6;
–shadow: 0 4px 12px rgba(44, 62, 80, 0.1);
–shadow-hover: 0 8px 24px rgba(44, 62, 80, 0.15);
}

变量分组：

4.2 主题切换逻辑

function changeTheme(themeName) {
// 设置主题属性
document.body.setAttribute('data-theme', themeName);

// 保存到本地存储
localStorage.setItem('poemAppTheme', themeName);

// 根据主题调整水墨背景
adjustBackgroundForTheme(themeName);
}

function loadTheme() {
// 从本地存储读取主题
const savedTheme = localStorage.getItem('poemAppTheme');

if (savedTheme) {
// 应用保存的主题
document.body.setAttribute('data-theme', savedTheme);

// 同步下拉选择框
const themeSelect = document.getElementById('themeSelect');
if (themeSelect) {
themeSelect.value = savedTheme;
}

// 调整背景
adjustBackgroundForTheme(savedTheme);
}
}

持久化策略：

4.3 六大主题特色

4.3.1 科技感主题

[data-theme="tech"] {
–primary: #00d9ff; /* 青色 */
–accent: #7b2cbf; /* 紫色 */
–bg-paper: #0a0a0f; /* 深黑背景 */
–text-primary: #e0e0e0; /* 亮白文字 */
–shadow: 0 0 20px rgba(0, 217, 255, 0.15); /* 发光效果 */
}

特点：

• 深色背景配合青色和紫色发光效果
• 赛博朋克风格，适合夜间使用
• 粒子动画增强科技感

4.3.2 古典雅致主题

[data-theme="classical"] {
–primary: #2c3e50; /* 墨色 */
–accent: #c0392b; /* 朱砂红 */
–gold: #c9a227; /* 金色 */
–bg-paper: #f5f0e6; /* 宣纸色 */
–text-primary: #2c3e50;
}

特点：

• 温暖的宣纸色背景
• 传统朱砂红点缀
• 水墨纹理效果
• 古典书香氛围

五、高级功能实现

5.1 历史记录管理

// 历史记录存储
function saveHistory() {
localStorage.setItem('poemHistory', JSON.stringify(poemHistory));
localStorage.setItem('poemStats', JSON.stringify(stats));
}

// 更新历史列表
function updateHistory() {
const historyList = document.getElementById('historyList');
historyList.innerHTML = poemHistory.map(poem => {
const date = new Date(poem.createdAt).toLocaleString('zh-CN');
const preview = poem.lines.slice(0, 2).join('，');
return `
<div class="history-item" onclick="loadPoemFromHistory(${poem.id})">
<div class="history-item-header">
<span class="history-words">${poem.hiddenWords}</span>
<span class="history-time">${date}</span>
</div>
<div class="history-preview">${preview}…</div>
</div>
`;
}).join('');
}

// 从历史加载
function loadPoemFromHistory(id) {
const poem = poemHistory.find(p => p.id === id);
if (poem) {
currentPoem = poem;
renderPoemDisplay(poem);
// 同步输入
document.getElementById('hiddenWords').value = poem.hiddenWords;
document.getElementById('poemType').value = poem.type;
// 显示重新生成按钮
document.getElementById('regenerateBtn').style.display = 'flex';
}
}

功能特点：

5.2 语音朗读功能

function readPoem() {
if (!currentPoem) {
alert('请先生成一首诗歌！');
return;
}

if (!window.speechSynthesis) {
alert('您的浏览器不支持语音朗读功能！');
return;
}

// 停止之前的朗读
window.speechSynthesis.cancel();

// 构建朗读文本
const text = `${currentPoem.title}。${currentPoem.lines.join('，')}。`;
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.8; // 稍慢的语速
utterance.pitch = 1;

window.speechSynthesis.speak(utterance);
}

朗读优化：

5.3 复制与分享

function copyPoem() {
if (!currentPoem) {
alert('请先生成一首诗歌！');
return;
}

const text = currentPoem.title + '\\n\\n' + currentPoem.lines.join('\\n');

if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(() => {
alert('已复制到剪贴板！');
}).catch(() => {
fallbackCopy(text);
});
} else {
fallbackCopy(text);
}
}

// 降级方案
function fallbackCopy(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
document.body.appendChild(textarea);
textarea.select();

try {
document.execCommand('copy');
alert('已复制到剪贴板！');
} catch (e) {
alert('复制失败，请手动复制');
}

document.body.removeChild(textarea);
}

兼容性处理：

六、性能优化策略

6.1 事件处理优化

// 使用事件委托，减少事件监听器数量
document.addEventListener('click', function(event) {
// 根据点击目标判断执行的操作
if (event.target.matches('.style-btn')) {
// 处理风格按钮点击
} else if (event.target.matches('.history-item')) {
// 处理历史记录点击
}
});

// 避免重复绑定
function bindEvents() {
// 使用标志位防止重复绑定
if (window.eventsBound) return;
window.eventsBound = true;

// 绑定事件…
}

6.2 渲染优化

// 使用DocumentFragment减少重排重绘
const fragment = document.createDocumentFragment();
poemHistory.forEach(poem => {
const div = createHistoryItem(poem);
fragment.appendChild(div);
});
historyList.appendChild(fragment);

// 懒加载历史记录
function updateHistory() {
// 只渲染可见区域的内容
const visibleItems = poemHistory.slice(0, 10);
// …
}

6.3 存储优化

// 分页存储，避免单次数据过大
function saveHistory() {
// 分批保存，每批10条
for (let i = 0; i < poemHistory.length; i += 10) {
const batch = poemHistory.slice(i, i + 10);
localStorage.setItem(`poemHistory_${i / 10}`, JSON.stringify(batch));
}
}

七、用户交互设计

7.1 输入验证流程

用户输入藏头文字
│
▼
┌─────────────────────────┐
│ 检查是否为空 │──否──→ 提示"请输入藏头文字"
└─────────────────────────┘
│是
▼
┌─────────────────────────┐
│ 检查长度是否≥2 │──否──→ 提示"至少输入2个字"
└─────────────────────────┘
│是
▼
┌─────────────────────────┐
│ 检查长度是否≤10 │──否──→ 提示"最多10个字"
└─────────────────────────┘
│是
▼
通过验证

7.2 生成状态反馈

function generatePoem() {
const statusDiv = document.getElementById('generatorStatus');

// 显示加载状态
statusDiv.classList.add('generating');
statusDiv.textContent = 'AI正在构思中…';

// 模拟处理延迟
setTimeout(() => {
try {
// 生成诗歌
const poem = generateAcrostic(hiddenWords, options);

// 显示结果
renderPoemDisplay(poem);

// 显示成功提示
statusDiv.classList.remove('generating');
statusDiv.textContent = '生成成功！';

// 3秒后清除提示
setTimeout(() => {
statusDiv.textContent = '';
}, 3000);

} catch (error) {
// 错误处理
statusDiv.classList.remove('generating');
statusDiv.textContent = error.message;
}
}, 600);
}

7.3 响应式布局

/* 桌面端 – 三栏布局 */
@media (min-width: 1200px) {
.main-container {
grid-template-columns: 380px 1fr 320px;
}
}

/* 平板端 – 两栏布局 */
@media (min-width: 768px) and (max-width: 1199px) {
.main-container {
grid-template-columns: 1fr 1fr;
}
.right-panel {
grid-column: span 2;
}
}

/* 移动端 – 单栏布局 */
@media (max-width: 767px) {
.main-container {
grid-template-columns: 1fr;
}
.left-panel,
.center-panel,
.right-panel {
min-height: 300px;
}
}

八、代码质量保证

8.1 错误处理机制

function generateAcrostic(hiddenWords, options) {
try {
// 输入验证
if (!hiddenWords) {
throw new Error('藏头文字不能为空');
}

if (hiddenWords.length < 2) {
throw new Error('藏头文字至少需要2个字');
}

if (hiddenWords.length > 10) {
throw new Error('藏头文字最多10个字');
}

// 生成逻辑…

} catch (error) {
console.error('生成诗歌时出错:', error);
throw error; // 重新抛出，让调用者处理
}
}

8.2 代码规范

// 命名规范
const poemThemes = {}; // 常量：名词复数形式
let currentPoem = null; // 变量：驼峰命名
function generatePoem() {} // 函数：动词+名词

// 注释规范
/**
* 生成藏头诗
* @param {string} hiddenWords – 藏头文字
* @param {Object} options – 生成选项
* @returns {Object} 生成的诗歌对象
*/
function generateAcrostic(hiddenWords, options) {
// 函数实现…
}

8.3 浏览器兼容性

九、总结与展望

9.1 技术成就

通过本项目，我们实现了一个功能完整的AI藏头诗生成器：

9.2 功能扩展方向

9.3 优化方向

欢迎加入开源鸿蒙PC社区： https://harmonypc.csdn.net/