Innei | 拾一的 RSS 预览

或许这样挺好

2025-06-18 00:33:18

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/194

梅雨，连着几个周。已经几个周末没有出门了。

这些宅家的日子，倒是 Vibe 了不少项目。托 AI 的福，现在将想法变成现实所需要的时间越来越少了。

或许可以更完整

从上个月开始线上画廊项目，基本也趋于稳定，功能也完整了不少。在代码上我也修改了不少 AI 留下的不够鲁棒的代码。之前，这个项目我最担心的还是 WebGL 的性能，这次也终于借助 Gemini 2.5 Pro 的能力彻底解决了这个问题，不得不说这点还是比 Claude 4 强了。我曾花费 $7 让 Cluade 4 Opus 但是效果还是不尽如意。但不管怎样，现在总算是好了。

https://github.com/Afilmory/Afilmory/tree/main/packages/webgl-viewer

对了，为了能让更多人看到和后续的计划，我尝试用 AI 赋予了它一个更有意义的名字。Afilmory，由自动对焦、光圈、胶片、记忆四个单词的新造词。

同时也把 i18n 的多语言支持也加上了。

以及重新设计的 Open Graph。

欢迎各位摄影佬来使用呀。

https://github.com/Afilmory/Afilmory

或许工具也有温度

这些天，花了一点时间，做了几个摄影工具。

Exif Tools: 可以转移图片 Exif 信息，以及查看和编辑 Exif 信息。

https://github.com/Innei/exif-tools

Face Mask: 可以对人像进行打码，使用 Emoji 遮罩。

https://github.com/Innei/face-mask-web

后面正计划做一个给照片加边框的工具。

或许光影就够了

前几天，脑热买了个坚果 N3，国补+红包￥3600。房间太小，施展不开，只能投射到门上一点点。不过体验还是挺好的，但是不能开灯。

可惜的是，发现不能正常播放杜比视界的视频，只能退掉了，后面看看 Vidda C3 了。

最近看了几部韩剧：

血谜拼图

https://www.themoviedb.org/tv/227191

清潭国际高中
等第二季了。第一季结尾还没引出凶手。不够好像七月就要播了。

https://www.themoviedb.org/tv/214994

恶缘
全员恶人，很烧脑的悬疑片。

https://www.themoviedb.org/tv/233686

接下来，打算看「名校的阶梯」。有什么好看的悬疑片也可以安利一下，最近比较迷这个。

或许还算幸运

一场非接触交通事故，一辆送外卖的摩托车飞快驶过，当我看到的时候或许已经来不及躲闪，而他也急忙打了一把方向，最后我们都摔了。倒地的一瞬间，要是就这样结束了也挺好..脑子晕晕的，但还是爬了起来。

去了医院检查，做了 CT，并无大碍。只是皮外伤。啊，我还活着，但是活着或许也挺痛苦的。

看完了？说点什么呢

Next.js + Vite，这是什么新的操作？

2025-06-14 23:16:24

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/Z-Turn/nextjs%2Bvite-hack-combined

事情是这样的。

前段日子做了一个摄影佬必备的线上图库。

https://github.com/Afilmory/Afilmory

这个项目是 Vite + React 写的，当初没有考虑要做 SEO 的打算。

然后想给 /:photoId 路由加个 Open Gragh 的支持。那必须得上一个 Server 了。

那用什么呢，不管用什么必须的支持 Serverless，毕竟我也不想多开一个服务器去托管了。

现在支持 Serverless 的太多，hono，fastify 都可以。我最后还是选择了 Next.js。一开始只想着它处理和画 OG 最方便，而且可以直接托管到 Cloudflare Pages 上。

目前，已知我的 app 是 SPA，vite build 之后是静态产物。我需要在 Next.js 上托管这些静态产物。

托管静态产物，这还不简单。我直接一个 vite build && cp -r dist ../ssr/public 。放到 public 下就被 Next.js 自动托管了。

但是，index.html 的 <head /> 咋办，vite build 出来的都是死的。

我直接用 dom 操作替换一下。

import { DOMParser } from 'linkedom'

export const runtime = 'edge'

export const GET = async (
  request: NextRequest,
  { params }: { params: Promise<{ photoId: string }> },
) 
  try {
    const indexHtml = await fetch(new URL('./index.html', import.meta.url)).then(r => r.text())
    const document = new DOMParser().parseFromString(indexHtml, 'text/html')

    // Remove all twitter meta tags and open graph meta tags
    document.head.childNodes.forEach((node) => {
      if (node.nodeName === 'META') {
        const $meta = node as HTMLMetaElement
        if ($meta.getAttribute('name')?.startsWith('twitter:')) {
          $meta.remove()
        }
        if ($meta.getAttribute('property')?.startsWith('og:')) {
          $meta.remove()
        }
      }
    })
    // Insert meta open graph tags and twitter meta tags
    createAndInsertOpenGraphMeta(document, photo, request)

    return new Response(document.documentElement.outerHTML, {
      headers: {
        'Content-Type': 'text/html',
        'X-SSR': '1',
      },
    })
  } catch (error) {
    console.error('Error generating SSR page:', error)
    console.info('Falling back to static index.html')
    console.info(error.message)

    return new Response(indexHtml, {
      headers: { 'Content-Type': 'text/html' },
      status: 500,
    })
  }
}

那么就搞定了对 HTML 的处理，注入了 OG 相关的 Meta 标签。

这里有个注意，截止到这边文章编写前，在使用 Cloudflare Pages 部署 Next.js app 仍有不少问题。比如这里的 fetch 可能导致报错 Cannot perform Construct on a detached ArrayBuffer。我现在的方案就是不适用 fetch。而是在 build 阶段转换为 js 文件。

# Convert HTML to JS format with exported string
node -e "
const fs = require('fs');
const html = fs.readFileSync('./public/index.html', 'utf8');
const jsContent = \`export default \\\`\${html.replace(/\`/g, '\\\\\`').replace(/\\\$/g, '\\\\\$')}\\\`;\`;
fs.writeFileSync('./src/index.html.ts', jsContent);
"

OK，这样就搞定了。后面开发还是可以用 SPA 去开发，部署的时候去部署 Next.js。直接通过 Cloudflare Pages 一键部署就行了。

后续

Cloudflare Pages 免费版本的 Worker CPU Time 限制的太低了，而生成 OG 的事件远超这个需要的时间，导致 OG 生成经常不可用。现在使用 Railway 去部署了。

看完了？说点什么呢

镜头与代码的交响：打造个人线上画廊与假期随笔

2025-06-03 22:14:35

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/193

这些天，日子很短。却过得很有意义。

Vibe Coding: 线上画廊

自从前段日子买了一台相机之后，出门的欲望也多了不少，到哪都要拍几张。日积月累想要做一个展示一些成片的地方了。不少大佬都会有一个属于自己的网站展示，因此萌生了一个想法，也做了一个。

本次开发基本全程使用 claude-4-sonnet。花了一天时间就把模子刻好了。

:::gallery :::

这是一个雏形。

后来，我开始研究图片预览的高性能方案，又引导 AI 写了一个基于 LOD 方案的 WebGL 图片预览器。即便是预览一张使用哈苏 X2D 拍摄的一亿像素的图片在缩放和加载也不会卡顿。

接入了 Live Photo 的播放，也是通过这个了解到 WebCodecs API，使用它对 mov 视频转码然后播放。

接入了 HEIC/HIF 文件的解析，调用了 libheic 的 wasm 进行的转换。

而我上面做的全部一是因为偷懒，我可以直接把拍摄的 Live Photo 或者 HIF 文件放到 S3 上不需要自己的格式转换；二是通过一个项目学到新的东西。

今天我又对这个项目进行了构建优化，使用 Cluster 模式，同时处理多张图片，节省了约 3 倍的时间。而这一切都是基于引导话术 AI 进行的重构和优化。

项目地址：

https://github.com/Innei/photo-gallery

如有需要的摄影爱好者也可以试试它。

我的线上画廊：https://gallery.innei.in

后续，对项目还有更多的展望，比如动态化等等。

好友来访

端午假期，南京的朋友来这边玩了几天。一起帮拍了很多照片。去了周边的景点。

组团 Coding 和做了一顿饭。

和 @MaxtuneLee 共建 Gallery，以及未来推出的摄影工具链。

看完了？说点什么呢

工作周年与AI焦虑：成长与挑战并存

2025-05-23 23:06:17

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/192

Folo 与我的一年

转眼间，这份工作又快到一年了。说起来，我毕业以来，经历了两次换工作，第一次是因为工作内容和压力的问题，第二次是因为裁员。不幸的是，这两次实际都没有满一年。

又是这里节骨眼上，恰好是一年，又开始有点焦虑了。焦虑的是，做的事是否达到预期，是否有成长，产品时候有前途等等。一年的时间说长不长说短也不短。

回顾过去的一年，我自认为还是能达到预期的吧。从我刚入职，从一个毛坯的产品开始做，重新设计组件 UI，重构底层，赋予一些有意思的交互设计以及功能，到 Web 端开放公测。不过只是三个月的时间。又是一个月完成了 Web 对 Mobile 的响应式改造。现如今 Mobile App 也已经上线很久。而这些在一年的时间中全部完成了。对于一个只有 4 个开发成员的项目来说，感觉已经很不错了。

希望越来越好吧。

AI 焦虑

回看今年，各路神仙打架。AI 发展越来越快。该说是好事还是坏事呢。如今写代码变得越来越不动脑子了，只是无脑敲着 Tab，出了问题也不知道。非常害怕这样依赖 AI 之后连很简单的逻辑都不会写了。AI 在进步而我在退步。

前段日子，也是借助 AI 完成了大部分的代码。虽然 AI 现在对 Swift 还是不太熟悉。但是循序渐进的引导最终还是能达到一个预期的结果。现在非常流行 Vibe Coding，即便是完全不会编程，只需要一个好点子，以及良好的文字表达，就能引导 AI 一步步做出你想要的结果。慢慢的代码越来越不值钱，最值钱的是好的点子。像我这种只会切图的低级程序员真的那一天就突然被淘汰了。现在的 AI 可比我会写多了。这种焦虑感越来越强。