Attack on Life ⚔️

最近调研前端图片压缩，这里总结下

MIME

media type

1

<input type="file" id="selectImg" accept="image/*"/>

1. 比如图片上传选择框进行限制，非图片类不可选，则可以使用image/*
2. 该限制比如在Windows下可以被绕开，因此在提交逻辑/后端还可以再严格限制下，方案也是通过mime

1
2
3
4

if (!file.type.startsWith('image/')) {
     e.target.value = '';
     return;
   }

压缩手段

1. 尺寸

   可以通过调整图像的像素尺寸来减小文件大小

2. 质量

   图像的压缩质量通常是通过牺牲图像的细节和准确信息来实现的

格式对比

兼容性

• JPEG 2000 by the JPEG group, the oldest of the JPEG successors, available in Safari
• WebP by Google, available in all browsers
• HEIC by the MPEG group, based on HEVC and available in iOS
  • 各浏览器均不支持
• AVIF by the Alliance for Open Media (AOM), available in Chrome and Firefox
• JPEG XL by the JPEG group, the next-generation codec
• WebP2 by Google, an experimental successor to WebP

前端压缩可行性

• canvas

Compressor.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14

new Compressor(selectedImg, {
     strict: true,
     quality: 0.6,
     maxHeight: 2160,
     maxWidth: 3840,
     convertSize: 2000000,
     mimeType: 'auto',
     success(result) {
      
     },
     error(err) {
       console.log(err.message);
     },
   });

自动降级显示图片

HTML img

1
2
3
4
5

<picture>
  <source srcset="111.avif" type="image/avif">
  <source srcset="111.webp" type="image/webp">
  <img src="111.png">
</picture>

CSS background-image

css层面目前没有最有效的方式，推荐走JS判断确定当前系统是否支持avif/webp，从而确定显示对应图片。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function isAvifSupported() {
  return new Promise(resolve => {
      var image = new Image();
  
      image.onload = function() {
        resolve(true);
      };
      image.onerror = function() {
        resolve(false);
      };
  
      image.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
    });
}

网上检索到的@supports方式存在问题，比如Mac BigSur+Safari16下，命中但实际并不支持avif从而造成显示黑屏。

写在最后

由上我们可以有几点收获

1. 权衡兼容性可以尝试使用avif/webp格式
2. 前端在不考虑动画图片格式的前提下做前置压缩了

相关文档

• https://cloudinary.com/blog/time_for_next_gen_codecs_to_dethrone_jpeg

2020.5购入AirPods2，到现在已快3年，耳机出现了不稳定，主要表现在连接偶尔失败/断连，另外耳机本身也不耐操。为了不影响使用，决定解决下。

• 方案1是走JD回收然后换新，查看价值200+CNY。AirPods1当时走回收也是这个价位。另外就是AirPods3目前价格还是比较高挺，1K+CNY。

• 方案2是换🔋

本着节约，决定体验下非官方换电池。

Update⚠️

经过几个月使用换电池后的AirPods，觉得电池变得很不耐用，耳机连接灵敏度都变低了，so，不建议走该方案了。

非官方拆修的弊端

维修前需要了解到，一旦非官方拆修后，再想走苹果售后/回收等均不行了，闲鱼出除外。

过程

这里我走的v2ex上推荐的店铺，链接如下

【淘宝】https://m.tb.cn/h.UrtpzaT?tk=iHRSdkm6Xb2 CZ3457 「airpods换电池苹果一代蓝牙耳机充电仓维修12代无损更换电池服务」
点击链接直接打开 或者 淘宝搜索直接打开

维修内容：双耳电池

价格：75CNY

邮寄时我是直接整体邮寄过去，包含了充电盒。店家帮忙清洁了下。

插曲

我前后维修了2次。

• 第一次店家维修后，我发现左耳麦克风出现问题，即语音会发出异响，很吓人，一度担心爆炸。跟店家沟通后，店家补偿快递费的前提下再次返修
• 第二次拿到后使用没发现问题

维修后

之前的问题如电池续航，连接不稳定明显改善。感觉应该能再坚持一年半载。

写在最后

1. 如果不差钱，建议还是别走第三方维修了
2. 鉴于这次维修还是出现了二次返工，对于第三方维修苹果这种小型精密仪器还是多少有那么点不放心的。因此下次我应该不会走维修了，这次对我来说更多是个体验

前置条件

1
2
3
4
5

pip install --upgrade openai

pip install tiktoken 

pip install scipy

例子

• https://github.com/openai/openai-cookbook/blob/main/examples/Question_answering_using_embeddings.ipynb

OpenAi提供了Fine-tuning功能，解决个人模型训练需求。这里尝试使用下。

前置条件

1. OpenAI账号注册，api key获取

2. 安装工具包

   1	pip install --upgrade openai

生成数据集

按照如下格式整理数据

https://github.com/alanhg/express-demo/blob/c36ea133139b5d611845628a0c6ba5d6e995c209/test/trainai.jsonl

字段说明

1. prompt即问题，以\n\nIntent:\n\n结尾
2. completion即回答，空格开头

数据格式为什么如此要求，见官方解释https://platform.openai.com/docs/guides/fine-tuning/data-formatting

校验数据

1

openai tools fine_tunes.prepare_data -f ./test/trainai.jsonl

在执行数据校验时可能会遇到一些错误，比如

missing pandas

OpenAI error:

missing pandas

报错原因是像 numpy 和 pandas 这样的数据库，由于其体积较大，不会默认安装。它们是该库的某些功能所需，但通常不需要用于与API通信。如果遇到 MissingDependencyError，请使用以下方式安装它们：

1

pip install pandas   

创建model

1

openai api fine_tunes.create -t test/trainai.jsonl -m davinci 

创建成功后命令行会提示模型名称/训练花费

使用model

模型训练成功后即可以使用，除了API直接调用外，简单测试的话可以走官网playground，模型下拉会显示出已训练OK的模型，直接测试即可。

https://platform.openai.com/playground

更新model?

不存在对现有model的更新，必须以最新的全量数据重新训练出新的版本模型。

定价

模型训练需要花钱，具体价格见https://openai.com/pricing#language-models

写在最后

有了Fine-tuning，构建比如官方文档助手/客服等将会很简单了。

ChatGPT首发于2022 年 11 月 30 日，可以说从这天开始，出圈了。ChatGPT，OpenAI API，Midjourney，New Bing，Bard，GitHub Copilot等等层出不穷。

在使用几个月后，这里进行下总结。

ChatGPT

ChatGPT是 OpenAI 基于 GPT-3.5 架构研发的自然语言生成模型，一种高级的聊天机器人。

1. 产品形态是Web网页，免费使用
2. 付费开通PLUS可以解锁最新的GPT-4模型，不同模型的区别会带来回答速度，回答质量的区别

注册

• 关于chatgpt注册使用戳这里

• chatgpt plus注册戳这里

OpenAI API

OpenAI推出的产品除了ChatGPT之外，还有更底层的设施OpenAI API，对应也提供了各个语言的library，因此市面上很多接入OpenAI的产品都是走的该方案。

Library链接戳这里

玩法

1. 调用API比如实现根据自然语言描述，生成Shell命令
2. 类ChatGPT聊天机器人
3. 私人数据模型训练

GPT-4

GPT-4 是由 OpenAI 开发的多模态模型，能够接收图像和文本输入并输出文本。

GPT-4 在许多领域上达到了 SOTA 的模型。

• 输入文字上限来到了 25000 个词
• GPT-4 在专业和学术能力的基准上已经达到了人类水平。
• 可支持图片输入，并且可以阅读和解释

1. GPT-4目前还在排队申请阶段，并未对外放开
2. 训练数据仍然是停留在 Sep 2021

排队戳这里https://openai.com/waitlist/gpt-4

GitHub Copilot

GitHub Copilot是一个由GitHub和OpenAI合作开发的人工智能工具，用户在使用Visual Studio Code、Microsoft Visual Studio、Vim或JetBrains集成开发环境时可以通过GitHub Copilot自动补全代码。

玩法

• GitHub Coilpot订阅支持戳这里
• 官网介绍 https://github.com/features/copilot

Copilot X?

GitHub Copilot X是GitHub Copilot的升级版，它引入了聊天和语音界面、支持pull requests，回答文档中的问题，并采用OpenAI的GPT-4技术，以获得更个性化的开发者体验

• https://github.com/features/preview/copilot-x

• https://www.youtube.com/watch?v=4RfD5JiXt3A&t=10s&ab_channel=GitHub

New Bing

新版Bing运行在比ChatGPT更先进的OpenAI语言模型上，但并不是之前坊间相传的GPT4模型。12 微软和OpenAI的关系是，微软是OpenAI的投资方之一，而且两家公司在人工智能领域有着广泛的合作。12

1. New Bing的产品形态是搜索，即聊天问答，与ChatGPT当前最根本的区别是数据来源于搜索即实时数据，而ChatGPT是有时效性的
2. 新版必应Bing Chat每日聊天上限将上调至100次，交互响应速度将提升10%

官网链接：https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx

玩法

1. 聊天式检索

Midjourney

Midjourney从自然语言描述（称为“提示”）中生成图像，类似于OpenAI的DALL-E和Stable Diffusion

官网：https://www.midjourney.com

玩法

比如下面的prompt

create it in the Disney Pixar style , 3d, computer animation, animated movie, HD,Do not bring glasses，wear white T shirt

其它

Bard

Google Bard是谷歌开发的人工智能聊天机器人，由LaMDA提供支持，旨在模拟与人类的对话，并使用自然语言处理和机器学习相结合，为您可能问它的问题提供逼真和有用的回答。

Bard现在跟OpenAI/ChatGPT比差很多

1. 不支持中文
2. 还没提供API服务

https://bard.google.com

文心一言

https://yiyan.baidu.com

接入GPT的一些产品

1. 欧陆词典
2. iTerm2
3. Cursor
4. warp terminal

总结

1. ChatGPT充当检索功能互补了Google类传统检索的不足
2. GitHub Copilot作为动态code snippet管理工具及结对编程的伙伴