跳到主要内容

14 篇博文 含有标签「实践案例」

查看所有标签

AIGC 在可视化生成场景的探索路径

· 阅读需 20 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2024-01-22 16:51:00

2022 年接近年底时 OpenAI 发布了 ChatGPT3,实际上一开始业界还没有太大的反响,但在过了大概一个月即 12 月的时候,ChatGPT3 突然引爆了 AI 技术发展新的潮流,业内大部分企业与开发者都开始讨论 OpenAI 与它的产品 ChatGPT3,紧接着 2023 年则成了 “AI 元年”,业内都开始积极探索如何将这种对话聊天 AI 机器人的技术能力结合到自己的业务和产品中去,实现“智能化升级”,抓住下一个风口。

这里则是记录一下自 2023 年中以来大概半年多时间中结合 AIGC 技术在可视化自动生成场景进行的探索尝试和实践经验。通过对这段经历的回顾也能认识到对目前 AI 技术的认知变化,对未来更好的开发 AI 应用产品有一定的借鉴意义。

结合 AI 技术构建可视化知识库的尝试

· 阅读需 13 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2024-01-27 20:37:00

在 OpenAI 引领 AI 技术潮流的当下,LLM 成为很多企业跃跃欲试并尝试进行商业化的一个重要技术领域,其中结合 AI 技术进行知识库构建成为了开源社区在该领域最成功的经典案例,恰好团队也有机会基于此进行探索尝试。

解析 ECharts 设计:交互状态系统

· 阅读需 22 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2023-01-09 23:37:00

通常,对于 Web 页面的交互处理中,尤其是 DOM 元素样式的变化用 CSS 处理是非常简单的,但如果是普通对象呢?问题似乎变得复杂起来了,这篇文章通过探索 ECharts 与 ZRender 在交互状态设计相关方面的源码实现,讨论一下在复杂场景中处理交互状态的设计方案,如何将命令式编码的复杂性通过声明式编码来降低,该怎样应对复杂场景下的状态叠加问题。

Web 3D 开发实践:计算物体在 2D 平面上的像素尺寸

· 阅读需 13 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-12-20 00:09:00

这次是基于中秋节活动时开发 3D 月球组件的经验来开发 3D 地球组件,相比于上一次,这一次很多技术难点都有了现成的解决方案,可以说开发成本降低了三分之二之多,而这些额外的开发成本则花费在隐藏在需求细节中的技术难点。这篇文章主要用来记录开发过程中遇到的一个比较有意义的技术难点,即 3D 空间中的物体投影到 2D 平面中时如何换算像素尺寸,在探索解决该难点的过程中,对 3D 与 2D 空间之间的关系有了一个更深刻的认识。

Web 3D 开发实践:3D 月球组件

· 阅读需 43 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-09-17 17:23:01

恰逢中秋节,有机会参与到一项中秋运营活动的项目中,负责为业务方提供一个移动端场景投放的 3D 月球组件。由于一直接触的是 2D 可视化开发,对于 3D 开发(WebGL)的技术未有深入了解和实践经验,基于对现有社区主流技术的简单了解和团队成员的技术背景,遂选定基于 Three.js 进行开发以降低风险。

这篇文章是基于 3D 月球组件的开发实践,记录 3D 开发实践中了解的一些 Web 3D 技术知识和一些典型问题场景的解决方案。

执行 `tsc` 忽略类型检查错误

· 阅读需 4 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2024-10-23 00:48:00

在发布 npm 包时添加对 TypeScript 类型定义文件的支持会让用户的使用体验增色不少,TypeScript 官方提供了以下命令用来生成类型定义文件(.d.ts):

tsc --emitDeclarationOnly

但是,该命令会同时执行类型检查,遇到错误时会报错中断命令行进程,这就使其无法直接集成在 CI 环节在发布 npm 包时自动执行生成类型定义文件的操作。当然,一个解决办法就是解决掉代码中所有的类型检查错误即可,既然讨论到这个问题,必然不会花费额外精力去解决一些历史遗留问题。

TypeScript:扩展第三方库的类型定义

· 阅读需 4 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-01-09 17:36:00

TypeScript 作为 JavaScript 的超集,为 Web 开发带来了强类型语言和类似代码智能提示这种良好的开发体验,而代码提示依赖于类型定义文件。类型定义文件的发展也经历了一个逐步演变的过程,从最初基于 JavaScript 编写的 npm 包,通过社区方案来引入类型定义包,再到目前多数模块基于 TypeScript 编写并在发布时带上类型定义文件这种最佳方案,开发者体验得到进一步的提升。

不过,在使用类型定义文件的过程中我们通常需要和类型定义进行交互,大多数场景可以通过泛型来解决;而有一个典型场景就是需要我们扩展第三方库的类型定义,避免在多个文件中编码时都要引入类型定义的麻烦。可能不是很好理解,在这里通过一个实际的例子就可以解释清楚。

Web 前端调试工具:SourceMap 文件

· 阅读需 8 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-05-07 21:57:00

Web 前端项目出于加载性能优化和安全考虑,在生产环境部署的代码是经过混淆和压缩的,对于利用生产环境收集到的错误堆栈信息要进行调试是非常具有挑战性的。理想情况下,应该在生产环境收集错误堆栈信息,然后映射到源码进行调试。恰好,SourceMap 文件提供了这个机制,可以将编译(压缩)后的代码映射到源代码中。