Lofi Cities:像素风城市夜景,配上浏览器实时生成的 lofi 音乐

查看原文 HN 讨论

文章摘要

Lofi Cities 是开发者 Safa Elmali 做的一个免费网站,以 Show HN 的形式发布:打开浏览器就能看一幅动态的像素风城市夜景,同时播放无限循环的 lofi 音乐,适合当学习、写代码时的背景。不用安装、不用注册、没有弹窗,电脑、手机、平板都能用。

城市。 每个场景是 480×270 像素的动画,四分钟一个循环,有各自的天气、地标和城市环境音。网站目前收录了约 40 座城市,从巴黎、东京到斯德哥尔摩、西雅图、马拉喀什。可以开启”城市巡游”,每隔 5 到 30 分钟换一座城市,或者”追着夜晚走”;”天气”设置可以给任意城市加上雨、雪、落叶或晴朗夜空。巴黎的场景是从室内窗口望出去的,其余多数城市是室外视角。

音乐。 曲子由浏览器用 Web Audio API 实时合成,作者强调既不用采样也不用 AI 模型。”Vibe”面板提供约 18 种风格,包括 jazzhop、钢琴、氛围、合成器、芯片音乐等,可选”放松”或”欢快”两种情绪,以及完整乐队、无鼓、仅和弦等编配;”接下来”列表可以挑曲子,音乐和城市环境音有独立的音量滑块。

一起听。 “Lofi Cities 电台”让所有收听者同时听同一首歌,每小时换一种风格,由听众投票决定下一种。页面会实时显示有多少人在看;”Together”功能可以发送表情反应、放飞纸灯笼;还有一个跨城市的聊天室,只能发短消息,每人用随机生成的两个词当名字,支持表情回应和翻译。

专注工具。 番茄钟提供 25/5 和 50/10 两种节奏,睡眠定时器可在 15 到 90 分钟后淡出音乐和环境音,下面还有任务列表和记事本。其他功能包括:把当前画面存成 1080p 的 PNG、分享链接、迷你播放器、全屏,以及作为 OBS 直播背景(加 ?obs 参数隐藏界面)。”动态”设置可为性能较弱的设备提供更轻量或静止的画面;网站加载后可离线使用,也能安装成应用。快捷键方面,方向键切换城市,空格播放暂停,N 下一首,V 打开 Vibe 面板,问号键查看全部快捷键。

账号与商业化。 用 Google 登录是可选的,可以跨设备同步”城市护照”、设置、任务和笔记,并参加排行榜;不登录的话一切都只保存在浏览器里。每座城市都有一块可出租的广告牌,用来展示像素风的商家广告;作者还在 Gumroad 上出售 1 到 4 分钟的 1080p60 城市循环视频合集(不含音频)。网站的致谢说明里写着:城市画面由 AI 编程智能体编写的代码生成,并对照真实地标做过核对。作者在评论里补充说,城市是他事先用 AI 做好、准备好循环后再加入网站的,目前还不能按需即时生成。

HN 评论精华

本帖 320 分、约 140 条评论,评价两极分化。一部分人很喜欢这种氛围,提了大量功能建议;另一部分人则集中批评画面”一眼 AI”、广告牌破坏沉浸感、程序生成的音乐不好听。作者 safaelmali 在评论区几乎有问必答,态度相当谦和。

“能不能生成任意城市”。 andsoitis 要求加入洛杉矶、开普敦、佛罗伦萨、开罗、雅典、温哥华、圣保罗,并问能不能用 AI 按需生成任意城市。vunderba 认为这并不只是有人用视频模型生成首尾帧循环就完事了,里面有明显的人工打磨,比如水里移动的船是单独放进场景的素材;理论上可以为所有城市生成通用的动画精灵(鸟、行人、车辆),但自动识别出这些素材该走的路径,结果大概会很别扭。XenophileJKO 则说 Opus 5.5 在”手绘插画”上是一次巨大的跃升,比 Astra 好不少,完全有可能”手画”出这种质量的动画,这是很久以来最让他意外的能力提升。

当桌面壁纸用。 Razengan 感慨要是有这样的动态壁纸就好了,几十年前就能做到,苹果和微软为什么把自己弄得这么”无菌”?richarme 提醒 Windows 将近三十年前就有 Active Desktop,可以把网页当壁纸。andelink 实测在 macOS 上用 Sindre Sorhus 的 Plash 把它设为桌面效果很好,并分享了 ?obs 隐藏界面、?weather=leaves 指定天气的 URL 参数;Vakaiser 推荐了付费的 Cindori Backdrop。NDlurker 希望出个 Roku 频道,作者表示放在电视上挂着会很不错,会考虑。

广告牌惹了众怒。 thih9 说 Product Hunt 的广告破坏了他的沉浸感,何况在一个场景里,广告牌比九层楼还高。trevoragilbert 觉得它是硬拼上去的,倾斜一点、做旧、调暗颜色、换成本地语言都会更融入。pastel8739 发现广告位有时会切换成”在此投放广告”,点开后的文案写着”在巴黎的广告牌上展示你的咖啡馆、店铺或品牌:以相同的像素风格手绘”,他认为这说明这是一个赚钱项目,不是出于热爱。作者回应说这是他的热爱项目,运行成本由他自己承担,广告牌是为了补贴开销,会把”手绘”一词改掉,并加一个隐藏广告牌的开关。ajkjk 建议干脆删掉,”广告和这类东西的氛围背道而驰”,不如放一行小字请大家去 Product Hunt 支持一下,至少不算操纵。mnky9800n 顺势推荐了另一个类似网站 rainy-city.com,”作为市长,我宣布这里永远不会有广告”。

“一眼 AI”。 sublinear 说这话可能听起来荒唐,但这里的抖动(dithering)用法感觉很”生成”、很混乱:人类像素画师会刻意决定每个像素的颜色,摆放遵循理想化的形状,上一次见到这么草率的抖动,还是几十年前人们把照片扫描成低色彩图像的时候。kromokromo 说这正是 AI 生成像素画的标志,AI 没法保持像素的一致性;kryptiskt 附上 Lucas Pope 当年在论坛上讲《奥伯拉丁的回归》如何打磨抖动效果的长帖,说明这是一个多深的兔子洞。willmeyers 指出作者在 Gumroad 上以 19 美元出售这些 AI 生成的画面。iand675 说东京和香港场景里的汉字和日文都不对,界面里会脉动的徽章也很有 AI 味;boxed 说悉尼歌剧院被画成了一座孤岛,”根本不是那样”;marak830 调侃说东京现在可不是樱花季。作者坦承图像和视频循环是用 AI 做的,音乐则是浏览器里用 Web Audio API 实时合成的,并表示会修正文字、地标位置,考虑让场景跟随季节变化。zaxioms 的心情很有代表性:客观上这是个很棒的点子,但想到不是人做的画和曲子还是有点难过;userbinator 回应说人确实做了,只是间接地做,就像用编译器而不是逐字节手写。TomGarden 说一知道视觉作品是生成的,他的兴致就全没了。vintermann 认为用 AI 可以,但没有清楚披露就不行,而且像素风城市景观这个圈子很小,流水线里很可能有知名像素画师的”参考图”。

去掉”AI 指纹”之后好评率涨了。 augment_me 分享了一个耐人寻味的经历:他用 Codex 做过一个非常类似的 2.5D lofi 氛围放置游戏,最初大约 60% 好评,很多人骂 AI 垃圾;后来他去掉了 Codex 的痕迹,比如”东京塔下的霓虹雨”这类冗长标题、像一年前 ChatGPT 套壳创业公司的按钮和输入框、默认生成的字体,好评就升到了 80% 左右。TomGarden 建议他公开记录投入的努力、对方法保持透明;augment_me 认为公众还没准备好,一提 AI 就会招来大量负面情绪,所以不披露反而能同时抓住在意和不在意的用户。Cockbrand 也给作者提了同样的建议:调整一下 CSS,让控件看起来不那么”vibe coding”。作者表示会重新调整字体和控件,让它们更贴合场景。

音乐评价不一。 bitwize 很喜欢里面的 FM 合成,说能听出一些世嘉索尼克游戏的音色。但 khazhoux 觉得和弦进行很奇怪、不协和,很难听下去;Uptrenda 认为程序生成的作曲非常不平衡,几乎是随机的,”很难称之为音乐,更别说 lofi”,建议换成有合适授权的 SoundCloud 曲目;reactordev 说点开后迎面而来的是响亮生硬的钢琴和电钢琴,更像简陋的 MIDI。mft_ 说雨声在他的 Firefox 上听起来只是白噪声。作者表示希望继续坚持浏览器内生成,但会让它听起来不那么随机。farmeroy 希望音乐能随城市变化,伊斯坦布尔就该有罗姆婚礼音乐或土耳其出租车司机的阿拉贝斯克风味,作者把城市专属音乐加进了路线图。

更多建议与怀旧。 timenotwasted 希望有更多视角,比如工作室、办公室、咖啡馆;blobdole 建议在室内和阳台之间切换,同时改变音乐和天气声音的比例;nomilk 觉得巴黎的室内看起来太冷,墙和窗太薄、天花板太高,又没有壁炉的闪烁火光;chris_armstrong 喜欢悉尼场景里的蓝花楹,建议加入班克木或金合欢等本地植物,以及雷雨和小雨选项。rda2 怀念 Mark Ferrari 1995 年的 Living Worlds,会随一天的时刻和月份变化,”全手工,当然也没有广告”。boredemployee 则说他从小就对天际线有种说不清的感情,一种以奇怪的方式让人舒服的怀旧又忧郁的感觉。toastal 提醒网站缺少 <noscript>,禁用脚本时什么都加载不出来,也没有任何提示。