Yawen - Simona&Peter

AIGC 扫盲贴

本文是 2023 年初学习 AIGC 相关概念的时候写的一些笔记，主要内容来自于腾讯的AIGC发展趋势报告 2023，和阅读报告时对一些技术背景的补充了解。比较适合像我这样的AIGC领域小白扫盲。下面开始具体内容为什么 AI 能力在 2022 年火了？总的来看，AIGC 在 2022 年的爆发，主要是得益于深度学习模型方面的技术创新。不断创新的生成算法、预训练模型、多模态等技术融合带来了 AIGC 技术变革，拥有通用性、基础性多模态、参数多、训练数据量大、生成内容高质稳定等特征的 AIGC 模型成为了自动化内容生产的“工厂”和“流水线”。AIGC 是什么？ AIGC（Artifical Intelligence Generated Content），狭义的含义是指利用人工智能自动生成内容，广义上可以看作是像人类一样具备生成创造能力的 AI 技术。国内通常用 AIGC，国外常用

AGI

Sora 管中窥豹

Sora 是什么Sora 是 OpenAI 推出的一个人工智能模型，能根据文字说明创造出逼真而富有想象力的场景。官网链接为什么这么火Sora 火到什么程度就不用展开说了，毕竟国内都开始卖课了😓。前有 Pika、Runway 这些文生视频的模型，为什么 Sora 这么火🔥？当然是因为它厉害，可以说是把视频生成内容拉到了一个全新的高度。主要有以下几方面能力吊打其他模型 1) 超长的生成视频时长根据 OpenAI 官网展示的视频，Sora 生成的视频平均长度将近 16 秒，最长达到20秒，而相比之下，其他文生视频模型如 Pika、Runway、PixVerse 生成的视频长度均在 3~4 秒左右。官网目前说 Sora 最长可以生成长达一分钟的视频。 2）任意的视频尺寸 Sora 是一个通用的视觉数据模型，可以生成不同长度、长宽比和分辨率的视频和图像。 2）

React

React 组件生命周期函数里 setState 调用分析

注：本文是阅读《深入React技术栈》的一些心得，一部分内容和图片是直接摘抄自此书。 React 组件的生命周期函数是 react 的基础知识，如果有不熟悉的可以看官方文档。简单总结如下。组件的生命周期函数分为两类：挂载或卸载过程 / 组件更新时。挂载或卸载过程涉及到三个函数：componentWillMount - 组件即将挂载、componentDidMount - 组件挂载完成、componentWillUnmount - 组件即将卸载。这些函数都只会在组件初始化或者卸载时运行一次。组件更新时涉及到四个函数： shouldComponentUpdate - 判断组件是否需要更新、componentWillUpdate - 组件即将更新、componentDidUpdate - 组件完成更新、componentWillReceiveProps - 组件即将接收新的 props。生命周期整体流程图 - 图片来自于《深入React技术栈》 setState 更是基础的不能再基础的知识了，用来更新组件的状态。需要注意的是 setState 是一个异步方法，一个生命周期内所有的

css

CSS 实现元素较宽不能被完全展示时将其隐藏

遇到一个需求，需要实现的样式是固定宽度的容器里一排显示若干个标签，数量不定，每个标签的长度也不定。当到了某个标签不能被完全展示下时则不显示。大致效果如下，标签只显示一排，多了放不下了就不显示了。标签部分 DOM 结构如下 <div class="labels"> Cooking Coding Travel</span&

React

[译] 理解 React-redux connect

Redux 是一个非常简单库，主要目的是进行状态管理，它使得 React 开发变得更加容易。然鹅很多人都只是简单的使用 Redux 官网提供的样板代码，把它和 React 应用结合起来，却并不理解这两者到底是如何结合并且运作的。有一个库叫做 React-redux，它唯一的目的就是把 redux 的状态管理机制无缝衔接到 react 应用上。我认为当使用了一些构成了你应用核心的东西的时候，还是非常应该了解具体发生了什么的。 React 和 redux 本身对于某些人来说，也许很难相信 redux 和 react 实际上是两个独立的库这件事情，它们完全可以独立使用。我们先来看一下 redux 的状态（state）管理机制: 如果你之前曾经使用过 redux，你就知道 redux 主要是围绕着 "store" 来运转的，它的 store 就是用来保存应用里所有的

tools

placehold.it - 图片占位符小工具推荐

在做页面的时候，经常需要临时找个图片顶上或者测试~ 随便找张图可能大小尺寸并不符合自己的要求，放在页面上也丑丑的。。因此本周推荐一个非常好用的图片占位符小工具~ 一言不合先看图~ 上门三张图片用来占位的话，不仅标有尺寸很清晰，而且可以调整背景色和文字颜色。即使 Demo 页面一样也可以美美哒~ 四不四很神奇~ 我猜你一定已经打开调试器看图片 url 的，好啦其实只需要在 placehold.it 的 URL 后面加上图片尺寸和颜色的参数，就可以快速生成美观的占位图啦。像这样： <img src="http://placehold.it/400x150/ff3333/ffffff"> <img src="http://placehold.it/700x200/ffde00/000000?text=This+is+a+

webpack

Webpack + gulp + babel-loader 配置踩坑

最近新启了一个项目，由于之前没有从零新建过项目，在项目的配置上花了很长时间。简单记录下配置中遇到的最大的坑：webpack + gulp + babel-loader 的问题。先说一下配置的需求，整个项目工作流主要用 gulp 管理。引入 webpack 只用来打包压缩 js。很早以前就听过 Webpack 2 有 Tree Shaking 的功能，配合 ES6 的 export 和 import 语法，可以只引入使用的模块，减少最终压缩后的代码量。于是各种看文档、google 配置示例，终于把 gulp + webpack 2 配置了起来。试着用 import 引入一段公共代码，发现也正常引入打包正常工作了，开心的觉得 Voila，搞定！^_^ 然鹅，还是 too

h5

H5页面 - 小米 Max 微信群聊

开始上半年小米Max发布的时候，做了一个在朋友圈传播的模仿微信的群聊界面H5页面：一群公司的大咖在群里聊小米Max，用户可以向大咖们提问，以此了解产品。页面的主体是群聊对话，同时在对话中包含了很多交互：图片、视频、动画、翻译等。如果用户是用微信打开的链接，还会获取用户名和头像，作为页面里的“我”来聊天，效果有点逼真~ 页面里有“彩蛋”，还能求红包喔~ 不啰嗦，先看页面效果。页面地址（手机浏览效果更好）。微信里访问这个链接原页面对话和交互都很多，我择出了主要逻辑和交互放在codepen上，供有兴趣的同学参考~ 同时简单分析了自己的想法和思路，也算是一个总结~ Codepen 链接整体布局整体布局还是很简单的：一个可以滚动的div，承载所有对话；一个固定在底部的“输入框”，包含所有选项。人物 & 对话数据群聊里的所有人物都保存在 js 对象 _members 里，包含人物的 id、

vertical-align

css 实现竖直居中的 N 种场景及 N 种方法

刚开始工作的时候，css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜，搜，搜，半天才搜到合适的解决方法。然后下次遇到，呃，又忘了~ 后来仔细回忆了一下，其实CSS实现竖直居中是有几种不同的应用场景的，需要分别使用不同的解决方法。这也是为啥每次都觉得，诶上次那个解决方法好像不行呢？（原来并不是我智商的问题）好了废话不多说，记录下遇到的不同场景及解决方法，希望能对自己或者别人有所帮助。 ### inline 或者 inline-* 的元素竖直居中可以借助 `padding`, `line-height`, `vertical-align` 等属性。有如下两种具体情景： 1. 单行竖直居中，如单行文本或者链接这种情况，通过给元素上下添加相同大小的 padding 值即可实现竖直居中。 See the Pen RapmvY by Yawen DENG (@Simona_Deng) on CodePen. 如果~~老娘就不想使用 padding