做了一个ai图片模块
作者: 分类: 博客相关 发布于: 2023-05-04 15:43:55 浏览：1,640 评论(0)
最近又更新了一些博客的内容。 首先是博客中的图片都使用了腾讯云对象存储服务，然后是新增了一个ai图片模块。
ai图片主要是通过本地部署的 Stable Diffusion 生成的图片。Stable diffusion是一种基于潜在扩散模型（Latent Diffusion Models）的文本到图像生成模型，能够根据任意文本输入生成高质量、高分辨率、高逼真的图像。后续会把相关的部署教程发布出来，不过现在网上也有一大堆部署教程， 感兴趣的可以自行百度。搞这个模块也花了不少心思， 首先为了页面美观， 需要用到图片的瀑布流以及懒加载， 管理后台使用的vue3, 相对就的插件有不少。也用过好多插件， 发现要么没法实现瀑布流效果，要么不是响应式的， 不么没有懒加载。经过几次测试， 最终在管理后台使用是vue3-waterfall-plugin这个插件， 基本上包含了我想要的一切：响应式、懒加载、瀑布流。用过来的效果也挺好的。
但是前端就不好弄了， 因为主要用的是jquery。网上也试过好多插件， 感觉都不太好， 到目前为止页面效果都没有管理后台好， 也没有使用懒加载， 后续有时间应该还会再更新一版博客前端的ai图片模块， 不外乎也可能重构成vue的页面使用vue3-waterfall-plugin这个插件。
============================2023-05-05更新===========================
想了一晚上，最终还是使用使用vue3-waterfall-plugin插件更新了网页端页面，现在已经和管理后台页面效果一样了。看起来也舒服了好多。。
目前已知问题：web端没有触发浏览器缓存，会造成cos流量浪费。
============================2023-05-06更新===========================
昨天已知的问题解决了：我发现这个瀑布流插件会有两次图片请求，一次是跨域，一次是不跨域的。
应该是出现了两次不同的请求，浏览器就没有缓存图片。 最后的是通过取消勾选Cos存储桶的 跨域访问cors设置 里的 返回Vary:Origin 的勾选后。问题得于解决。
转载时请注明出处及相应链接。
本文永久链接: http://www.baigei.com/articles/ai-image