万少的博客

Appearance

🌊海洋蓝
🌸樱花粉
🍃森林绿
🔮幻夜紫
🌙暗夜黑

WordSea - 专业词云可视化工具 ​

WordSea 是一个简洁、强大的在线词云生成工具。它可以将您输入的文本内容智能分析，提取关键词并生成精美的词云图片。支持中英文混合分词，提供多种形状选择，是文本可视化和数据展示的得力助手。

主要功能 ​

  • 智能分词：自动识别中文和英文内容，统计词频。
  • 多种形状：内置多种词云形状，包括：
    • 圆形 (Circle)
    • 心形 (Cardioid)
    • 星星 (Star)
    • 方形 (Square)
    • 菱形 (Diamond)
    • 三角形 (Triangle)
    • 五边形 (Pentagon)
  • 即时预览：输入文本后点击生成，立即在画布上看到效果。
  • 图片导出：支持将生成的词云下载为图片格式，方便分享和使用。
  • 历史记录：自动保存生成历史，方便随时回溯查看。
  • 完全免费：基于纯前端技术开发，无后台数据存储，安全隐私。

快速开始 ​

在线使用 ​

https://wordsea.zbztb.cn/

image-20251221084347197

本地运行 ​

WordSea 是一个纯静态网页应用，无需复杂的后端环境配置。

系统要求 ​

  • 任何现代浏览器（Chrome、Firefox、Safari、Edge 等）
  • 无需额外依赖

安装步骤 ​

  1. 克隆项目

    bash
    git clone git@github.com:itcastWsy/wordSea.git
cd wordSea

  2. 打开应用

    • 方式一：直接在浏览器中打开 index.html 文件
    • 方式二：使用 VS Code 的 Live Server 插件运行，获得更好的开发体验
    • 方式三：使用 Python 启动本地服务器（推荐）：
      bash
      # Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

然后在浏览器中访问 http://localhost:8000

  1. 验证安装
    • 打开应用后，您应该能看到 WordSea 的主界面
    • 左侧为文本输入区域，右侧为词云显示区域
    • 顶部导航栏包含下载功能按钮

详细使用指南 ​

基本使用步骤 ​

  1. 准备文本内容

    • 收集您想要分析的文本内容（文章、评论、关键词列表等）
    • 支持中英文混合内容

  2. 输入文本

    • 在左侧文本框中粘贴或输入您的文本内容
    • 文本长度建议在 100-5000 字之间，以获得最佳效果

  3. 生成词云

    • 点击"生成词云"按钮
    • 系统将自动进行分词和词频统计
    • 词云将在右侧画布上实时渲染

  4. 调整样式

    • 在右侧控制面板选择不同的形状：
      • 圆形 (Circle)
      • 心形 (Cardioid)
      • 星星 (Star)
      • 方形 (Square)
      • 菱形 (Diamond)
      • 三角形 (Triangle)
      • 五边形 (Pentagon)
    • 词云会根据您的选择实时更新

  5. 保存结果

    • 点击顶部导航栏的下载图标
    • 选择保存位置和文件名
    • 词云将以 PNG 格式保存到本地

高级技巧 ​

  • 关键词优化：在文本中使用重复的关键词可以增强其在词云中的显示效果
  • 中英文混合：系统会自动识别中英文，无需特殊处理
  • 批量处理：可以一次性处理多段文本，系统会合并分析
  • 历史记录：浏览器会自动保存您的使用历史，方便回溯查看

技术栈 ​

  • HTML5 / CSS3: 构建响应式用户界面。
  • JavaScript (ES6+): 处理核心逻辑和交互。
  • wordcloud2.js: 强大的词云生成库。
  • html2canvas: 用于将 DOM 元素转换为 Canvas 进行截图下载。

使用 iFlow CLI 开发与维护 ​

什么是 iFlow CLI ​

iFlow CLI 是一款强大的终端AI助手，专为开发者设计，可以分析代码、执行编程任务、处理文件操作。它是维护和扩展 WordSea 项目的理想工具。

image-20251221084405992

安装 iFlow CLI ​

系统要求 ​

  • Node.js 22+
  • 4GB+ 内存
  • 互联网连接

Windows 安装步骤 ​

  1. 安装 Node.js

  2. 安装 iFlow CLI

    bash
    npm install -g @iflow-ai/iflow-cli@latest

  3. 验证安装

    bash
    iflow --version

  4. 启动 iFlow CLI

    bash
    iflow

配置 iFlow CLI ​

登录方式（推荐使用 Login with iFlow） ​

  1. 运行 iflow 启动 CLI
  2. 选择 "Login with iFlow" 登录选项
  3. CLI 会自动打开浏览器跳转到心流平台
  4. 完成注册/登录后授权 iFlow CLI
  5. 自动返回终端，开始使用

使用 iFlow CLI 维护 WordSea ​

项目分析 ​

bash
# 在 WordSea 项目目录下
cd /path/to/wordSea
iflow
> /init
> 分析这个项目的结构和主要功能

代码优化 ​

bash
iflow
> 帮我优化 app.js 中的代码性能
> 检查 style.css 中是否有冗余样式

功能扩展 ​

bash
iflow
> 为 WordSea 添加一个新的词云形状：六边形
> 实现词云颜色主题切换功能

问题诊断 ​

bash
iflow
> 检查为什么词云生成时出现性能问题
> 帮我修复在移动端的显示问题

文件操作 ​

bash
iflow
> !ls -la
> 帮我分析这个目录结构，建议如何整理文件
> 创建一个备份当前版本的脚本

常用 iFlow CLI 命令 ​

命令功能示例
/help查看帮助/help
/init分析项目结构/init
/clear清空对话历史/clear
/exit退出CLI/exit
!命令执行系统命令!npm install
@文件路径引用文件@app.js
$agent使用专业代理$code-reviewer

使用 iFlow CLI 的最佳实践 ​

  1. 项目初始化：使用 /init 命令快速了解项目结构
  2. 代码审查：定期使用 $code-reviewer 检查代码质量
  3. 功能开发：通过自然语言描述需求，让 iFlow CLI 帮助实现
  4. 问题解决：遇到问题时，详细描述现象，请求诊断和解决方案
  5. 文档维护：让 iFlow CLI 帮助更新和优化项目文档

为什么选择 iFlow CLI ​

  • 智能理解：能够理解项目上下文，提供精准的代码建议
  • 多模态能力：支持图像理解，可以分析 UI 设计稿
  • 网络搜索：内置网络搜索能力，获取最新技术信息
  • 无缝集成：与现有开发工具链完美集成
  • 持续学习：基于最新技术栈，提供前沿的开发建议

通过 iFlow CLI，您可以更高效地维护和扩展 WordSea 项目，实现功能的快速迭代和优化。

使用指南 ​

  1. 输入文本：在左侧文本框中粘贴或输入您想要分析的文章、评论或关键词列表。
  2. 生成词云：点击"生成词云"按钮，系统将自动分析并渲染。
  3. 调整样式：在右侧控制面板选择不同的形状，词云会实时更新。
  4. 下载保存：点击顶部导航栏的下载图标，将当前词云保存为图片。

贡献指南 ​

欢迎提交 Issue 和 Pull Request 来改进 WordSea！

  1. Fork 本仓库
  2. 新建 feature 分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 提交 Pull Request

https://github.com/itcastWsy/wordSea

作者信息 ​

开源协议 ​

本项目采用 MIT License 开源协议。

Released under the MIT License.

Copyright © 2019-present 万少