故事续写生成器 - 创意故事无限可能

j20070601

42人浏览 · 2026-07-01 20:16:25

j20070601 · 2026-07-01 20:16:25 发布

故事续写生成器 - 创意故事无限可能

在这里插入图片描述

一、引言：想象力的翅膀

故事是人类文明的瑰宝，是想象力的结晶。从古老的神话传说到现代的科幻小说，故事一直陪伴着人类的成长。然而，创作一个完整的故事并非易事，许多人都有过"开头精彩，结尾无力"的经历。

基于这一痛点，我们开发了"故事续写生成器"——一款帮助用户将创意转化为完整故事的AI应用。用户只需提供故事开头和风格偏好，就能获得一段精彩的故事续写。本文将深入探讨该应用的设计理念、交互逻辑和鸿蒙技术实现。

二、故事续写的设计理念

2.1 多风格支持

故事续写生成器支持四种主流故事风格，满足不同用户的创作需求：

温暖治愈：温馨感人的故事，传递正能量

适合家庭、友情、成长主题
语言温暖，情节动人
结局美好，给人希望

悬疑惊悚：紧张刺激的故事，挑战心理极限

适合侦探、冒险、恐怖主题
情节紧凑，悬念迭起
结局出人意料

科幻未来：脑洞大开的故事，探索未来世界

适合科幻、奇幻、穿越主题
想象丰富，设定新颖
引发对未来的思考

童话奇幻：梦幻唯美的故事，适合儿童和成人

适合童话、魔法、奇幻主题
语言优美，充满想象力
传递真善美

2.2 故事结构设计

故事续写采用"三节式"结构，确保故事的完整性和节奏感：

第1节：承接开头，铺垫悬念

延续用户提供的故事开头
引入关键元素和冲突
为后续发展埋下伏笔

第2节：情节发展，冲突升级

展开故事主线
引入新的角色或转折
冲突逐渐升级

第3节：故事高潮，圆满收尾

解决核心冲突
揭示真相或达成目标
留下回味空间

2.3 故事生成的创意原则

故事续写遵循以下创意原则，确保生成的故事质量：

连贯性：与用户提供的开头无缝衔接
独特性：每个故事都有独特的情节和人物
情感共鸣：能够引起读者的情感共鸣
想象力：突破常规思维，展现创意

2.4 故事创作的AI技术原理

故事生成基于以下AI技术原理：

文本理解：分析用户提供的开头，提取关键信息
风格迁移：根据用户选择的风格调整语言和情节
情节生成：基于开头和风格生成连贯的故事情节
语言优化：优化文本表达，提升故事可读性

三、应用架构设计

3.1 Model层：定义请求和消息结构

export class StoryRequest {
  opening: string
  style: string
  max_words: number
  constructor(opening: string, style: string, max_words: number) {
    this.opening = opening
    this.style = style
    this.max_words = max_words
  }
}

设计亮点：

请求对象包含开头、风格和字数限制三个参数
支持灵活的故事生成配置

3.2 Service层：实现故事生成逻辑

export class StoryGeneratorService {
  private mockStories: Record<string, string> = {
    '温暖治愈': `### 第1节
那是一个雨夜，小狐狸在森林里捡到一盏油灯...
### 第2节
小狐狸吓了一跳，但没有松手...
### 第3节
雨渐渐小了...`,
    '悬疑惊悚': `### 第1节
那是一个雨夜，小狐狸在森林里捡到一盏油灯...`,
    // ... 其他风格
  }
  
  generateStory(opening: string, style: string): SGChatMessage {
    const storyContent = this.mockStories[style] || this.mockStories['温暖治愈']
    const story = `> *${opening}*\n\n${storyContent}`
    return new SGChatMessage(SGMessageRole.ASSISTANT, story)
  }
}

设计亮点：

使用映射表存储不同风格的故事模板
支持风格参数化选择，灵活切换
故事开头与用户输入无缝衔接

3.3 Page层：构建故事创作界面

@Entry
@Component
struct StoryGeneratorPage {
  @State messages: SGChatMessage[] = []
  @State inputText: string = ''
  @State selectedStyle: string = '温暖治愈'
  private service: StoryGeneratorService = new StoryGeneratorService()
  private styles: string[] = ['温暖治愈', '悬疑惊悚', '科幻未来', '童话奇幻']
}

设计亮点：

风格选择器让用户快速切换故事风格
输入框支持长文本输入，适合故事开头
故事内容以段落形式展示，阅读体验良好

四、鸿蒙技术实现亮点

4.1 风格选择器

@Builder
buildStyleSelector() {
  Row() {
    Text('风格：')
      .fontSize(13)
      .fontColor(COLOR_TEXT_SECONDARY)
      .margin({ right: 8 })
    
    ForEach(this.styles, (style: string) => {
      Text(style)
        .fontSize(12)
        .fontColor(this.selectedStyle === style ? Color.White : COLOR_PRIMARY)
        .padding({ left: 12, right: 12, top: 6, bottom: 6 })
        .backgroundColor(this.selectedStyle === style ? COLOR_PRIMARY : '#FFF7ED')
        .borderRadius(14)
        .margin({ right: 4 })
        .onClick(() => { this.selectedStyle = style })
    })
  }
}

技术解析：

ForEach组件动态渲染风格选项
当前选中风格高亮显示，视觉反馈清晰
点击切换风格，交互流畅

4.2 故事内容展示

@Builder
buildMessageBubble(msg: SGChatMessage) {
  Row() {
    Column() {
      Text(msg.content)
        .fontSize(14)
        .lineHeight(22)
        .padding(12)
        .borderRadius(12)
        .constraintSize({ maxWidth: '85%' })
        .backgroundColor(COLOR_ASSISTANT_BUBBLE)
        .border({ width: 1, color: COLOR_BORDER })
    }
    .alignItems(HorizontalAlign.Start)
    Blank()
  }
}

技术解析：

故事内容以气泡形式展示，区分用户输入和AI回复
lineHeight属性优化文本阅读体验
constraintSize限制宽度，避免过长行影响阅读

4.3 异步故事生成

private onGenerate(): void {
  this.messages.push(new SGChatMessage(SGMessageRole.USER, 
    `故事开头：${text}\n风格：${this.selectedStyle}`))
  this.isLoading = true
  
  setTimeout(() => {
    const reply = this.service.generateStory(text, this.selectedStyle)
    this.messages.push(reply)
    this.isLoading = false
    setTimeout(() => { this.scroller.scrollEdge(Edge.Bottom) }, 100)
  }, 2000)
}

技术解析：

使用setTimeout模拟AI创作过程，增强交互感
加载状态提示用户故事正在生成
故事生成完成后自动滚动到底部

五、用户体验设计

5.1 配色方案：温暖明亮的金色主题

const COLOR_BG = '#FEF3C7'        // 金色背景
const COLOR_CARD = '#FFFFFF'      // 白色卡片
const COLOR_PRIMARY = '#D97706'   // 主色调金色
const COLOR_BORDER = '#FDE68A'    // 边框色