Yawen

Yawen

9 posts published

📍 Beijing
AIGC 扫盲贴
AIGC

AIGC 扫盲贴

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

Sora 管中窥豹
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"> <span class="label">Cooking</span> <span class="label">Coding</span> <span class="label">Travel</span&

[译] 理解 React-redux connect
React

[译] 理解 React-redux connect

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

placehold.it - 图片占位符小工具推荐
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页面 - 小米 Max 微信群聊
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