DEV Community: Yuki Shindo

gh-star-gif: Generate a 'Please star' GIF for any GitHub repo

Yuki Shindo — Wed, 04 Feb 2026 08:24:12 +0000

If you maintain open source projects, you have probably written some version of:

"Please consider starring this repo if it helps you."

It is totally normal. Stars help discoverability and social proof, but plain text is easy to skim past. Many people want to star your project, they just do not do it in that moment.

So I built a small tool to make the ask more visible (and a bit more fun).

It generates a short "please star" GIF from a repo URL, so you can drop it into your README or share it when you announce updates.

What is gh-star-gif?

gh-star-gif is a CLI tool that generates a short animated GIF from any GitHub repository page.

You pass a repository URL, run one command, and it produces a GIF that opens the repo page, highlights the Star button, moves a fake cursor toward it, and shows a callout like "Star this repo ⭐".

You can then embed the GIF in your README, docs, or social posts.

Try it now

The quickest way:

npx gh-star-gif https://github.com/shinshin86/gh-star-gif

It will generate a GIF file in ./out/ by default.

Why this is useful for indie devs

When you are building in public, distribution matters. A README is often your landing page, and a single visual can do more than a paragraph of text.

A short "star highlight" GIF helps when:

someone lands on your repo from a tweet, a blog post, or Hacker News
your README is long and the call to star is buried
you are shipping small tools and want a lightweight way to promote them
you want a reusable promo asset for releases and announcements

This is not about spamming. It is about reducing friction for people who already found your project useful to star it.

Where to use it

It works best when placed where people make quick decisions:

near the top of your README (right after the project summary)
in release posts or changelogs when you announce updates
at the end of devlogs or tutorials that link to your repo
in social posts that drive traffic to GitHub

Prerequisites

This tool uses browser automation and video-to-GIF conversion, so you will need a couple of standard dependencies first:

Node.js 20+
ffmpeg available on your PATH
Playwright browser binaries installed

Install Playwright:

npx playwright install --with-deps chromium

Install ffmpeg (examples):

macOS (Homebrew): brew install ffmpeg
Ubuntu: sudo apt-get install ffmpeg
Windows (Chocolatey): choco install ffmpeg

Usage examples

Basic usage

npx gh-star-gif https://github.com/microsoft/TypeScript

Custom message and output path

npx gh-star-gif https://github.com/facebook/react \
  --message "If this helped, please star ⭐✨" \
  --out ./promo.gif

Common tuning options

npx gh-star-gif https://github.com/owner/repo \
  --out ./custom.gif \
  --message "Star this repo ⭐" \
  --width 1280 \
  --height 720 \
  --fps 15 \
  --scale 960 \
  --duration 4200

Tip: If you want to debug what the browser sees, run with --debug. If you prefer watching the run, add --headful.

How it works under the hood (technical overview)

At a high level, gh-star-gif does this:

Launches a headless Chromium session via Playwright
Opens the target GitHub repository page
Locates the Star button using multiple strategies (role, aria-label, form action)
Injects an overlay (spotlight, pulsing ring, animated cursor, tooltip)
Records the viewport as a short video
Converts the video into an optimized GIF via ffmpeg using two-pass palette generation

This approach keeps the GIF consistent and readable while keeping the file size reasonable.

It is intentionally simple: render the real GitHub page, guide the viewer's eye to the Star button, and export a lightweight GIF you can embed anywhere.

A couple of design choices (and why)

I chose GIF because it is easy to embed almost anywhere and it draws attention without asking the reader to click or leave the page.

I used Playwright so the output reflects the real GitHub UI, which makes the guidance intuitive for first-time visitors.

The ffmpeg palette step is there to keep the result readable while staying reasonably small in file size.

Open source

Repo: https://github.com/shinshin86/gh-star-gif

If you try it and it helps, feedback and contributions are welcome.
And if you like the idea, you know what to do: ⭐

No “resume” in Codex CLI, so I built one: quickly “continue” with `codex-history-list`

Yuki Shindo — Wed, 03 Sep 2025 10:03:09 +0000

Codex CLI is an AI coding agent that runs in your terminal, but there’s still no official “resume” feature.

If a session drops or you want to pick it up later, you can’t resume as-is—super inconvenient.
So, as a stopgap, I built a small CLI that lists past sessions so you can manually resume them quickly. That’s codex-history-list.
(I’m assuming Codex CLI will eventually get resume, so I haven’t published this to npm; it’s open source for personal use, macOS-first.)

Note: As of 2025-09-03, there’s no official /resume command. There are feature requests on GitHub.

Update: 'resume' and 'continue' Added in Codex CLI 0.30.0

Codex CLI 0.30.0 now includes resume and continue.

Use them as follows:

codex --resume
codex --continue

Starting with --resume lets you choose the session you want to resume.
--continue resumes the session you were running last time.

Update 2 (Codex 0.36.0): Use `codex resume`

As of 0.36.0 and later:

codex resume

To start from the latest conversation:

codex resume --last

Problem: Continuing a session is hard

Once you close the CLI, the context is gone, which makes longer tasks or picking things up later a pain.
Codex CLI does save each session’s log as JSONL under ~/.codex/sessions, but there’s no official flow to load and resume those logs.

Background: There is a door to “experimental resume”

Codex CLI has a config file (~/.codex/config.toml) and a -c key=value flag to temporarily override settings. There’s even an experimental_resume key in the template.
In other words, if you pass the path to a JSONL when launching, you can pseudo-resume a session (but it’s “experimental,” so handle with care).

Solution: Use `codex-history-list` to quickly pick the right log to resume

codex-history-list recursively scans ~/.codex/sessions and minimally parses each JSONL to display a table with just the essentials.

cwd (the working directory for that session, extracted from <environment_context>)
first user prompt (ask) (environment/instruction blocks are skipped for readability)
time (mtime or internal timestamp)
path (full path, not truncated—ready to copy/paste)

Other niceties: multibyte-safe alignment, JSON output, date/dir filters, sorting, etc.
The project README shows sample output, options, and design notes.

How to use it: install → list → launch Codex with “experimental resume”

1) Install (local-use oriented; not on npm)

git clone https://github.com/shinshin86/codex-history-list.git
cd codex-history-list
npm i
npm run build
# run
node dist/cli.js --help

This tool is meant for local use (not on npm).

2) List your sessions

# quick look at the latest
node dist/cli.js

# examples
node dist/cli.js --limit 20
node dist/cli.js --since 2025-08-01 --before 2025-09-01
node dist/cli.js --cwd-filter /Users/you/projects/foo
node dist/cli.js --json

The table has time | cwd | ask | path. cwd/ask are width-trimmed for readability; path is full for easy copy/paste.

3) Launch Codex CLI with the selected log (“experimental resume”)

Once you’ve found the target row, copy the path and launch Codex like this:

codex -c experimental_resume="/Users/you/.codex/sessions/2025/08/31/rollout-2025-08-31T17-06-00-...jsonl"

-c key=value is the official way to override config at launch.
experimental_resume appears in the template as an experimental key. Combine those two and you can start Codex with the previous session’s context loaded.

Note: Installing Codex CLI itself is npm i -g @openai/codex or brew install codex.

Wrap-up: A stopgap until official resume lands

Problem: No official resume; continuing past sessions is tedious.
Premise: Codex stores sessions as JSONL under ~/.codex/sessions.
Approach: Make saved logs easy to find and launch Codex with an experimental key to pseudo-resume.
Tool: codex-history-list is mac-first, personal-use OSS. Not on npm / local-use oriented.

When /resume or a session list lands officially, this tool will have served its purpose. For the latest progress, keep an eye on the Codex repo (Issues/Discussions).

References

codex-history-list repository (README: features, usage, how to resume)
OpenAI Codex CLI (official repo / README)
Config template including the experimental key experimental_resume (Issue)
Mention of the session save location (~/.codex/sessions) (Discussion)
/resume feature request (Issue)

Note (author’s intent)
Until official resume ships, the goal is the shortest path: a readable list plus a “launch with log path” recipe. Nothing fancy, but you should be able to reach the right JSONL without getting lost.

CLI Renaissance Alert: Meet oh-my-logo — Your Gemini CLI and Claude Code style Logo Generator

Yuki Shindo — Fri, 27 Jun 2025 01:10:22 +0000

Filled‑In ASCII Art—Could It Become a Trend?

One of the hottest topics among programmers this month has been Claude Code.

And just the day before yesterday, Gemini CLI was released. With other contenders like OpenHands CLI, the CLI‑tool space feels like it’s entered a full‑blown Warring States period.

While trying out these AI coding agents, one thing struck me:
their launch logos are huge.

Gemini CLI’s logo in particular—announced only hours ago—looks like an obvious homage to Claude Code’s filled‑in ASCII art. I can’t help thinking this style is about to explode in popularity…

That slightly mischievous idea led me to create this tool:

Generate the logo above with a single command:

npx oh-my-logo "OH\nMY\nLOGO" sunset --filled

After roughly outlining the requirements, I wrote the entire tool in a single “Vibe Coding” session with Claude Code—barely touching the output afterward. The takeaway: for a project of this size, Claude Code can pretty much carry you from start to finish.

https://github.com/shinshin86/oh-my-logo

How to Use oh‑my‑logo

oh‑my‑logo is an npm package written in TypeScript.

Grab and run the latest version with a one‑liner:

npx oh-my-logo@latest "TONIKAKU\nYARE" fire --filled

Result:
(Quote from game creator Masahiro Sakurai)

Of course, you can render unfilled ASCII art too:

npx oh-my-logo@latest "HELLO WORLD"

Output:

There are plenty of other options:

npx oh-my-logo@latest "TONIKAKU\nYARE" fire --filled -d horizontal
npx oh-my-logo@latest "TONIKAKU\nYARE" fire --filled -d diagonal

Output:

You can even combine it with tools like ccusage and display your Claude Code bill for the month in giant colored letters. One‑liner:

npx oh-my-logo "$(npx ccusage@latest --json \
  | jq -r '"$" + ((.totals.totalCost * 100 | round) / 100 | tostring)')" \
  fire --filled

Output:

Within about five hours of release, people on X were already using oh‑my‑logo in ways I never imagined—my heart rate definitely spiked.

https://x.com/shinshin86/status/1938228181271761072

It’s lightweight and fun, so please give it a spin!

By the way, you can also use the package as a library, not just from the CLI. The examples directory contains Deno demos and more—feel free to embed oh‑my‑logo into your own apps.

https://github.com/shinshin86/oh-my-logo/tree/main/examples

“Teach Me How to Get GitHub Stars and Build Viral Tools!”

I’m writing this article about 16 hours after releasing oh‑my‑logo, and the repo already has 62 Stars. For me, that’s a huge achievement.
To everyone who starred it—thank you!

A nobody like me pulling in that many Stars so quickly is mostly thanks to a tweet that took off. Since it’s trending, I’d like to reflect on why the tool resonated.

https://x.com/shinshin86/status/1938162469601738859

How ccusage Popularized the `npx` One‑Liner

When you think of recent breakout open‑source hits, ccusage probably comes to mind. I use it daily.

https://github.com/ryoppippi/ccusage

One benefit ccusage delivered was normalizing the npx one‑liner. I’m willing to bet the number of times npx has been typed this year is skyrocketing compared with last year.
(If you disagree, humor me for a moment.)

Two nights ago, as I drifted off thinking “Gemini CLI’s logo is absolutely riffing on Claude Code,” I realized: If someone could generate those logos easily, they’d love it. And if the command were npx foo bar, the barrier to entry would be low and tons of people would try it.

As a product‑builder myself, even for OSS tools, I believe two factors drive adoption:

There’s real demand
The hurdle to try it is minimal

(That’s not a knock on tools that don’t meet both.)

Luck probably accounts for 90 % of the hype, but imagine if the install‑to‑output flow looked like this:

# Example only—this is *not* how you run it
npm install -g oh-my-logo
OH_MY_LOGO_COLOR=red
OH_MY_LOGO_FONT=robot
oh-my-logo "Hello World"

It would feel clunky, and far fewer people would have tried it.
In that sense, a zero‑install npx command is perfect: super short path from curiosity to payoff.

(If you’re new to npx, remember it can just as easily run malicious packages, so only execute what you trust.)

The CLI Renaissance: Claude Code, Gemini CLI, Codex CLI & Beyond

With AI tooling making the CLI a battleground again, the allure of command‑line utilities is back.

Last night, I used mizchi’s similarity‑ts to refactor one of my projects:

https://x.com/mizchi/status/1937759448292032544

It’s a TypeScript code‑duplication detector that runs in the CLI—and because it’s CLI‑native, I could pipe its output straight into Claude Code or Gemini CLI. I simply asked Claude Code to use similarity‑ts, tweak the threshold, and it kept refining until it produced a reasonable refactor plan.

The coolest part: the intended user of similarity‑ts is an AI.

It showed me a fresh angle on CLI tooling, and I’m convinced there’s plenty of fun ahead.

oh‑my‑logo isn’t something an AI will directly leverage the way similarity‑ts does, but writing a CLI in this booming niche is undeniably fun, and demand for handy command‑line tools is only growing.

I’ve gotten all sentimental while writing, so forgive the mini‑essay, but the CLI space is hot. If you just discovered oh‑my‑logo, share your masterpiece on social media with the hashtag #ohmylogo!

[How to Build an AITuber] How to Fetch Viewer Comments from YouTube and Twitch

Yuki Shindo — Tue, 27 May 2025 06:46:13 +0000

Hello! I’m the developer of AITuber OnAir, a web app for running AI-powered VTuber streams:

AITuber OnAir

We’ve just added a brand-new feature: Twitch chat integration. From now on, AITuber OnAir supports both YouTube Live and Twitch.

In this post I’ll share what I learned while building it—how to fetch comments from Twitch (with EventSub WebSockets) and, for completeness, how to fetch comments from YouTube Live as well.
I hope fellow AITuber developers find it useful!

1. Fetching YouTube Live chat messages

Overall flow

When you want to pull live chat from a YouTube stream, the request sequence looks like this:

[Live Video ID]
      │ videos?part=liveStreamingDetails
      ▼
[activeLiveChatId]
      │ liveChat/messages?part=snippet,authorDetails → nextPageToken
      ▼
[Chat Messages]

You hit two endpoints:

Live Video ID – grab it from the URL’s v= parameter, etc.
activeLiveChatId – returned inside the liveStreamingDetails object of the videos endpoint.
liveChat/messages – loop with nextPageToken to paginate.¹ ²

Getting your YouTube API key & Live ID

You need both before you can fetch comments. I explain how to obtain them in this note (Japanese):

Enter the required settings for YouTube Live

Sample code (YouTube Live)

// youtube-chat.ts
import 'dotenv/config';
import fetch from 'node-fetch';

const API_KEY  = process.env.YT_API_KEY!;   // Data API v3 key
const VIDEO_ID = process.env.YT_VIDEO_ID!;  // Live video ID

/** Return activeLiveChatId if the stream is live and chat is enabled */
async function getLiveChatId(videoId: string) {
  const url =
    `https://youtube.googleapis.com/youtube/v3/videos` +
    `?part=liveStreamingDetails&id=${videoId}&key=${API_KEY}`;
  const res  = await fetch(url);
  const json = await res.json();
  return json.items?.[0]?.liveStreamingDetails?.activeLiveChatId ?? null;
}

/** Poll chat forever and dump to console */
async function pollChat(liveChatId: string, pageToken = '') {
  const url =
    `https://youtube.googleapis.com/youtube/v3/liveChat/messages` +
    `?liveChatId=${liveChatId}&part=snippet,authorDetails&key=${API_KEY}` +
    (pageToken ? `&pageToken=${pageToken}` : '');

  const res  = await fetch(url);
  const json = await res.json();

  // Pretty-print messages
  for (const m of json.items ?? []) {
    const author = m.authorDetails.displayName;
    const text   = m.snippet.textMessageDetails?.messageText ?? '';
    if (text) console.log(`[YT] ${author}: ${text}`);
  }

  // Wait 1–2 s and recurse (API guideline: ≥ 1 s)
  const waitMs = json.pollingIntervalMillis ?? 1000;
  await new Promise(r => setTimeout(r, waitMs));
  await pollChat(liveChatId, json.nextPageToken);
}

(async () => {
  const id = await getLiveChatId(VIDEO_ID);
  if (!id) { console.error('Stream not found or chat disabled'); return; }
  await pollChat(id);
})();

Run it

export YT_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
export YT_VIDEO_ID=YOUR_LIVE_VIDEO_ID
node youtube-chat.ts

2. Fetching Twitch chat (EventSub WebSocket)

IRC is passé—use EventSub instead

The first docs you’ll find often describe using IRC, but as of 2024 Twitch recommends EventSub’s channel.chat.message for reading chat.

Add the user:read:chat (formerly chat:read) scope to your OAuth token and you can listen over a single WebSocket. Just remember to reconnect yourself when you receive a session_reconnect event.³ ⁴

https://x.com/shinshin86/status/1924750262528573898

Overall flow (Twitch)

[User Access Token]  +  [Channel Login]
           │ 1) GET /users?login=<channel>       (Helix Users API)
           ▼
[broadcaster_user_id]
           │ 2) GET /oauth2/validate            (Validate API)
           ▼
[user_id (token owner)]
           │ 3) Connect wss://eventsub.wss.twitch.tv/ws
           ▼    (session_welcome)
[session_id]
           │ 4) POST /eventsub/subscriptions
           │      type=channel.chat.message
           ▼
[WebSocket PUSH] (notification)
           │
[Chat Messages]

References:
Helix Users API ・ Validating Tokens

Getting your token & client ID

Setup instructions for streaming on Twitch with AITuber OnAir

Use Public client type

AITuber OnAir is a browser-only SPA, so there’s no safe place for a client secret. Twitch recommends treating pure client-side JavaScript apps as Public and using the Implicit Grant Flow or Device Code Flow.³

Public client highlights
- No client secret—one is never generated.
- You don’t send a secret when getting or refreshing tokens.
- The Client ID itself is public, so including it in HTML/JS is fine.⁵ (In production we still let users provide their own ID instead.)
- Only Implicit or Device-Code flows are available (Client-Credentials etc. won’t work).⁶

Twitch’s own chart (“Getting OAuth Access Tokens”) compares the four flows suitable for SPAs—worth bookmarking when you decide which to use.

Sample code (Twitch)

import 'dotenv/config';
import fetch from 'node-fetch';
import WebSocket from 'ws';

const TOKEN     = process.env.TWITCH_TOKEN!;     // user access (user:read:chat)
const CLIENT_ID = process.env.TWITCH_CLIENT_ID!; // app’s Client ID
const CHANNEL   = process.env.TWITCH_CHANNEL!;   // broadcaster’s login name

(async () => {
  /* 1) Get broadcaster_user_id */
  const uRes = await fetch(
    `https://api.twitch.tv/helix/users?login=${encodeURIComponent(CHANNEL)}`,
    { headers: { Authorization: `Bearer ${TOKEN}`, 'Client-Id': CLIENT_ID } }
  );
  const broadcasterId = (await uRes.json()).data?.[0]?.id;
  if (!broadcasterId) throw new Error('invalid channel');

  /* 2) Get own user_id (token owner) */
  const vRes = await fetch('https://id.twitch.tv/oauth2/validate', {
    headers: { Authorization: `OAuth ${TOKEN}` }
  });
  const userId = (await vRes.json()).user_id;

  /* 3) Connect WebSocket */
  const ws = new WebSocket('wss://eventsub.wss.twitch.tv/ws');

  ws.on('open', () => console.log('🟢 connected'));
  ws.on('close', () => console.log('🔴 closed'));

  ws.on('message', async raw => {
    const msg  = JSON.parse(raw.toString());
    const type = msg.metadata?.message_type;

    if (type === 'session_welcome') {
      // 4) Subscribe immediately
      const sessionId = msg.payload.session.id;
      await fetch('https://api.twitch.tv/helix/eventsub/subscriptions', {
        method : 'POST',
        headers: {
          Authorization : `Bearer ${TOKEN}`,
          'Client-Id'   : CLIENT_ID,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          type    : 'channel.chat.message',
          version : '1',
          condition : { broadcaster_user_id: broadcasterId, user_id: userId },
          transport: { method: 'websocket', session_id: sessionId }
        })
      });
      return;
    }

    if (type === 'notification'
        && msg.payload.subscription.type === 'channel.chat.message') {
      const txt = msg.payload.event.message.text;
      const usr = msg.payload.event.chatter_user_name;
      console.log(`[TW] ${usr}: ${txt}`);
    }

    if (type === 'session_reconnect') {
      // 5) Switch to the new URL
      ws.removeAllListeners();          // drop old listeners
      const newWs = new WebSocket(msg.payload.session.reconnect_url);
      newWs.on('message', ws.listeners('message')[0]!);
    }
  });
})();

Run it

export TWITCH_TOKEN=oauth_xxxxxxxxxxxxxxxxxxxx
export TWITCH_CLIENT_ID=yyyyyyyyyyyyyyyyyyyyy
export TWITCH_CHANNEL=mychannel
node twitch-chat.ts

Wrap-up

YouTube: two API calls (videos ➜ liveChat/messages) + periodic polling.
Twitch: a single EventSub WebSocket—subscribe to channel.chat.message and receive pushes.
Both are under 100 lines of script for real-time chat capture.

From here you can add buffering, banned-word filters, AI summarization, and more to build your own custom AITuber workflow.

Hope this helps—happy streaming!

¹ LiveChatMessages: list | YouTube Live Streaming API
² LiveChatMessages | YouTube Live Streaming API
³ EventSub – Twitch Developers
⁴ Handling WebSocket Events – Twitch Developers
⁵ Registering Your App
⁶ Getting OAuth Access Tokens

Front-End Only: Real-Time AI Stream Commentary with React, OBS Virtual Camera, and GPT-4o-mini

Yuki Shindo — Thu, 20 Feb 2025 03:25:32 +0000

Implementing an “AI that sees the streaming screen and auto-comments” using React, OBS Virtual Camera, and ChatGPT (gpt-4o-mini)

I recently released AITuber OnAir, a web application that lets you set up an AITuber streaming environment using only your browser.

It’s currently in a public beta stage, but it already provides all the essential functions for streaming:

AITuber OnAir

This article will explain a feature within this AITuber OnAir web application that I developed:

Using the “OBS Virtual Camera” to grab a screenshot of the stream, sending it to ChatGPT’s vision-capable model (gpt-4o-mini), and having the AI avatar generate a comment.

And we’ll do all this without a server-side component—just the front end.

What We’ll Cover

How to make everything work on the front end only, with no server needed
How to grab regular screenshots from OBS Virtual Camera in a React app
How to send images + text to OpenAI (Vision-capable model) and receive AI commentary via streaming

From there, you can implement your own custom logic for how the AI responds. I’ve prepared sample code specifically for this article, which is very close to the production code in AITuber OnAir. For example, it includes functionality to split up AI responses for TTS processing.

Implementing this lets you create a fun experience where your AI avatar on YouTube Live can automatically comment on what’s happening on-screen. And because it’s front end–only, it’s surprisingly easy to set up.

In this article, we’ll focus on the React-specific technical points while sharing sample code.

What Is AITuber OnAir?

First, a quick introduction to AITuber OnAir, the web app I’ve been developing.

AITuber OnAir is a web application designed so you can set up an AITuber streaming environment entirely from your browser. It has the following features:

Integrates with OBS to stream a VRM avatar (a VTuber model) that runs in your web browser
Automatically retrieves and replies to YouTube Live comments
Provides AI chat features via OpenAI API, along with integration with multiple TTS (text-to-speech) engines such as VOICEVOX / VOICEPEAK / AivisSpeech / OpenAI TTS / Niji Voice
Lets you handle all your streaming setup via just Chrome, with no need to build a dedicated server (although for voice engines other than OpenAI TTS, you do need to run them locally)

Because it’s designed to be front end–only, AITuber OnAir uses clever approaches like storing user-uploaded VRM files in OPFS (origin private file system) for persistent storage in the browser.

For details on how to use AITuber OnAir, see the article below (in Japanese):

https://note.com/aituberonair/n/n39b30eb3eb5b

The specific feature we’ll be covering—“Have the AI comment by analyzing the streaming screen”—is extracted from the core functionality in AITuber OnAir and presented here as a sample. If you find it interesting, definitely check out AITuber OnAir.

Note: The source code for AITuber OnAir is not open source. This is partly due to potential business considerations in the future. However, development is based on Pixiv’s ChatVRM. If you’d like to understand the bigger picture, reading the ChatVRM code is recommended. And I owe a lot to the early pioneers in the AITuber scene who have shared their knowledge. In the same spirit, I hope that by sharing these insights, it will help those building similar AI/VTuber-related projects.

Overall Flow of the Feature

Let’s get into the details. Here’s the overall flow:

Turn on the OBS Virtual Camera
- In OBS, enable the virtual camera.
Access the virtual camera from the browser
- When you call navigator.mediaDevices.getUserMedia({ video: true }), you’d expect Chrome to display a dialog allowing you to select either your built-in camera or the OBS Virtual Camera. But in practice, it may not always bring up a selection prompt automatically; it often just uses whichever camera is set in Chrome’s permissions.
- Make sure OBS Virtual Camera is selected so you can get the live feed from OBS in a <video> element.
Run the <video> element in the background without displaying it
- For example, set <video style={{ opacity: 0 }}> so users don’t actually see it.
- If you set display: none;, screenshot capture might fail, so opacity: 0 is a better option.
Use a Canvas to capture screenshots at intervals
- Draw the <video> element into a Canvas using drawImage(), then call toDataURL() to get a Base64-encoded image.
Send the image + text to ChatGPT (gpt-4o-mini)
- In the request to OpenAI’s Vision-capable model, include both text and the image.
Receive and display/voice (TTS) the AI-generated comment in real time via streaming
- In the sample code, we split the AI response by sentence to handle text display and text-to-speech.

By putting all these steps together, you can have your AI avatar automatically comment on what’s happening in your stream—very cool! And because you can do it all on the front end, it’s quite convenient.

How to Enable the OBS Virtual Camera

First, simply enable the virtual camera in OBS. Depending on your system, you may have to install a driver in the process.

Once this is running, when you access your web page, Chrome will ask for permission to use your camera. You need to allow it.

Also, in Chrome’s settings, you must specify the OBS Virtual Camera. Once you’ve done that, Chrome will share your OBS output—i.e., your streaming screen—through the camera interface.

If you overlook this setting and the physical camera remains selected, you might accidentally send your real face to the OpenAI API instead of the stream, so be careful!

The screenshots above are from AITuber OnAir’s interface.

The rest of the code examples assume that all of the above is set up correctly.

Sample Implementation Code

1. Retrieving the OBS Feed in a `<video>` Element

// ObsVideo.tsx
import React, { useEffect, useRef, FC } from 'react';

type ObsVideoProps = {
  onVideoReady?: (videoEl: HTMLVideoElement | null) => void;
};

const ObsVideo: FC<ObsVideoProps> = ({ onVideoReady }) => {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    // 1. Request access to the OBS Virtual Camera
    navigator.mediaDevices
      .getUserMedia({ video: true })
      .then((stream) => {
        if (videoRef.current) {
          videoRef.current.srcObject = stream;

          // Auto playback is handled by the autoPlay prop
          if (onVideoReady) {
            onVideoReady(videoRef.current);
          }
        }
      })
      .catch((error) => {
        console.error('Error accessing OBS virtual camera:', error);
        if (onVideoReady) {
          onVideoReady(null);
        }
      });
  }, [onVideoReady]);

  return (
    // Not displayed, just running in the background
    <video
      ref={videoRef}
      autoPlay
      muted
      playsInline
      style={{
        position: 'absolute',
        top: 500,
        width: '100px',
        height: '80px',
        opacity: 0,
        zIndex: 9999,
      }}
      id="obsVideo"
    />
  );
};

export default ObsVideo;

What This Component Does:

Fetches OBS’s feed into React: This component grabs your OBS feed via the virtual camera and assigns it to a <video> element in your React app. This allows you to capture screenshots for AI, or preview it in the browser if you wish.
Encapsulates the getUserMedia call: By wrapping navigator.mediaDevices.getUserMedia into a single component, you keep your main logic cleaner.
Hidden playback: The <video style={{ opacity: 0 }}> is used so you can capture frames without visually displaying them. Setting display: none often breaks screenshot functionality, so opacity: 0 is a common solution.
onVideoReady callback: The parent component can receive the <video> element reference, making it possible to call captureScreenshot() or other methods from outside.

Here’s an example of how to handle onVideoReady in the parent:

  /**
   * Callback invoked by ObsVideo once the <video> element is ready
   */
  const handleVideoReady = useCallback((videoElem: HTMLVideoElement | null) => {
    // Store the <video> element in a ref
    videoEl.current = videoElem;
  }, []);

2. The `captureScreenshot()` Function

Next is the function to capture a screenshot from the videoEl.

function captureScreenshot(videoEl: HTMLVideoElement) {
  const canvas = document.createElement('canvas');
  canvas.width = videoEl.videoWidth;
  canvas.height = videoEl.videoHeight;

  const ctx = canvas.getContext('2d');
  if (!ctx) return null;

  ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height);
  return canvas.toDataURL('image/jpeg'); // Base64 format
}

Key Points:

Using Canvas to get the current frame
- We draw the <video> element onto a Canvas with drawImage(), then call toDataURL() to get a Base64-encoded still image.
- This allows you to capture the actual rendered frame at any moment from the OBS Virtual Camera feed.
Adjusting size
- We set canvas.width and canvas.height to videoEl.videoWidth / videoEl.videoHeight so the captured image matches the video’s native resolution. You can downscale if you want to reduce file size or network usage.
Base64 for API calls
- The returned Base64 string can be sent directly to an OpenAI vision-capable model.
- The default format may be image/png, but you can specify image/jpeg or other formats as needed.

3. Sending Images to the OpenAI Vision Model

Below is an example of how we send both text and images to OpenAI’s vision model:

/**
 * Sends "image (Base64) + text" to ChatGPT's vision-capable model (gpt-4o-mini)
 * and receives responses via streaming.
 */
export async function getChatResponseStreamWithVision(
  messages: VisionMessage[],
  apiKey: string,
) {
  if (!apiKey) throw new Error('Invalid API Key');

  const headers: Record<string, string> = {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${apiKey}`,
  };

  const requestBody = {
    model: 'gpt-4o-mini',
    messages,
    stream: true,
    max_tokens: 300,
  };

  const res = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers,
    body: JSON.stringify(requestBody),
  });

  if (res.status !== 200 || !res.body) {
    throw new Error('Something went wrong');
  }

  const reader = res.body.getReader();

  // Convert the streaming response into a ReadableStream
  const stream = new ReadableStream({
    async start(controller) {
      const decoder = new TextDecoder('utf-8');

      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          if (!value) continue;

          const data = decoder.decode(value);
          // Each line starts with "data: ..."
          const lines = data.split('\n');
          for (const line of lines) {
            const trimmed = line.trim();
            if (!trimmed || trimmed === 'data:' || trimmed === 'data: [DONE]') {
              continue;
            }
            if (trimmed.startsWith('data: ')) {
              const jsonStr = trimmed.substring(6);
              try {
                const json = JSON.parse(jsonStr);
                if (json.choices?.[0]?.delta?.content) {
                  controller.enqueue(json.choices[0].delta.content);
                }
              } catch (err) {
                console.error('Parse error chunk:', trimmed);
              }
            }
          }
        }
      } catch (error) {
        controller.error(error);
      } finally {
        reader.releaseLock();
        controller.close();
      }
    },
  });

  return stream;
}

Key Points:

Using Chat Completion API with stream: true
- We call POST https://api.openai.com/v1/chat/completions and enable streaming to receive responses in chunks.
- This is useful when you want to process long responses as they come in.
Vision message structure
- In the messages array, we include image_url in the final user content, so the model can analyze the image alongside the text.
Streaming response handling
- The API returns multiple lines like data: {JSON}.... We split them and parse each JSON chunk to extract json.choices[0].delta.content.
Rebuilding a ReadableStream
- We then re-package the text chunks into a standard ReadableStream so that we can process them easily in the frontend (e.g., in React).

4. Main Logic for Generating AI Comments

Below is an example of how you might incorporate everything into a single function. For instance, you might call this via setInterval every minute.

/**
 * Assume this is called periodically (e.g., every minute via setInterval)
 */
const handleAutoVisionComment = useCallback(async () => {
  if (!openAiKey) {
    console.warn('No API key provided');
    return;
  }

  // Capture screenshot
  const dataUrl = captureScreenshot(videoEl);
  if (!dataUrl) {
    console.warn('Failed to capture screenshot');
    return;
  }

  const base64Image = dataUrl.split(',')[1] || '';

  // Existing chat history (chatLog) plus a system prompt for Vision
  const messages: Message[] = [
    { role: 'system', content: visionSystemPrompt },
    ...chatLog,
  ];

  // Vision-capable message format
  const messagesForVision: VisionMessage[] = [
    ...messages,
    {
      role: 'user',
      content: [
        {
          type: 'text',
          text: 'Take a look at the streaming screen and comment on it.',
        },
        {
          type: 'image_url',
          image_url: {
            url: `data:image/jpeg;base64,${base64Image}`,
            detail: 'low',
          },
        },
      ],
    },
  ];

  // Query OpenAI
  const stream = await getChatResponseStreamWithVision(messagesForVision, openAiKey).catch(
    (err) => {
      console.error(err);
      return null;
    }
  );
  if (!stream) {
    return;
  }

  // Read the response in streaming fashion
  const reader = stream.getReader();
  let receivedMessage = '';
  const sentences = [];

  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      // Accumulate content
      receivedMessage += value;

      // For example, split by punctuation (like Japanese sentences)
      const sentenceMatch = receivedMessage.match(/^(.+[。．！？\n]|.{10,}[、,])/);
      if (sentenceMatch && sentenceMatch[0]) {
        const sentence = sentenceMatch[0];
        sentences.push(sentence);
        receivedMessage = receivedMessage.slice(sentence.length).trimStart();

        // Here, you could update the UI or feed it to TTS
      }
    }
  } catch (e) {
    console.error(e);
  } finally {
    reader.releaseLock();
  }

  // In this example, we are not appending the "vision check" logs back into chat
}, [openAiKey, chatLog, visionSystemPrompt, videoEl]);

Key Points:

Scheduled screenshots + API calls
- By running this function periodically (e.g., every 30 seconds to a minute), you can have your AI regularly check what’s on the screen and generate comments.
Extracting the Base64 portion
- captureScreenshot(videoEl) → returns a dataUrl, and dataUrl.split(',')[1] gives you just the Base64 data.
Building the vision-enabled message
- Putting { type: 'image_url', image_url: { … } } in the content tells the Vision model to analyze that image.
Incremental text processing
- We accumulate incoming chunks (receivedMessage += value;) and then match them against punctuation or line breaks to process them sentence by sentence. This is great for displaying partial results or hooking into TTS.

Putting it all together, you get a front end–only solution for having the AI watch your OBS stream and respond to it.

Implementation Notes

Security / Rate Limits
- Embedding your OpenAI API key in the browser can be risky if it’s made publicly accessible; it could be misused by others.
- AITuber OnAir requires each user to bring their own API key, which is stored locally (e.g., in localStorage).
OBS Virtual Camera Configuration
- Ensure you specifically choose “OBS Virtual Camera” in Chrome’s camera settings.
- If you accidentally choose your physical camera, you’ll be sending your actual webcam feed to OpenAI instead of your streamed screen.
Image Size / Network Usage
- Sending large screenshots (like full HD) at high frequency can be costly in both tokens and bandwidth.
- Consider downscaling or compressing the screenshot to reduce load.

Conclusion

By combining OBS Virtual Camera + React + OpenAI Vision, you can build an “AI that analyzes your streaming screen and auto-comments.”
A serverless setup (frontend only) is enough to make it work, making development and operation straightforward.
This opens up creative possibilities for streaming, such as the AI avatar giving live commentary on on-screen changes, not just reacting to chat.

You Can Do Quite a Lot in the Browser Alone

As mentioned, I use this technique in AITuber OnAir, where:

YouTube Live comments can be retrieved and read aloud
The AI can do automated talk segments
VRM avatars reflect expressions
The application can even analyze the streaming screen

All without a dedicated server—just the browser.

If you’d like to try AITuber streaming, see real-world usage of ChatGPT and gpt-4o-mini, or explore serverless solutions, I hope this article helps.

That’s it—happy hacking!

Can You Create a Product That Makes Money with Wasm?

Yuki Shindo — Wed, 02 Oct 2024 01:39:39 +0000

Hello! I’m what you might call a technology enthusiast. When I see a new trend in the tech world, I tend to dive in, driven by my desire to explore it.

In recent years, several fields have been gaining momentum, and WebAssembly (Wasm) is definitely one of them, particularly in the software engineering community.

Since I also do web frontend development, I’m naturally drawn to Wasm and its practical applications. However, whenever I come across an interesting technology, I always try to think of ways to use it that could benefit my business. In other words, I want to make money using that technology.

This tendency is probably influenced by my personality. When I work with a technology purely for fun, I often stop after creating something small and then rarely touch it again. But if I force myself to use it for work, I take on a certain amount of pressure, which in turn improves my learning efficiency.

I’ve seen this pattern before. For instance, I could never remember much about Go when I used it just as a hobby. But once I adopted Go for one of my products, I became proficient enough to use it, and that product still generates revenue today.

Going back to Wasm, I’ve long been curious about how I could use it to make money. But unlike some other developers, I don’t have any grand ideas about building rich web applications like Figma, and I haven’t been able to come up with any cool, profitable ideas that involve Wasm.

Combining SQLite Wasm and OPFS Brings Persistent Storage to the Web Frontend

Then one day, I came across a discussion about how combining SQLite Wasm with the Origin Private File System (OPFS) could enable persistent storage on the web frontend.

In simple terms, SQLite Wasm is a WebAssembly-based version of SQLite that runs in the browser. (Okay, maybe that’s a bit too simple!)

You can refer to the following MDN article for more information on OPFS, but here’s a brief overview:

https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system

Key Features of OPFS

OPFS is a storage endpoint provided as part of the File System API.
It is highly optimized for performance.
It allows web apps to handle folders and files in a way that is invisible to the user.
It is tied to the origin (domain) of the web application.
It offers synchronous API operations within web workers.
It is subject to browser storage quota limits.
- (For more on storage quotas, see the link below.)
- https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria

Differences Between OPFS and localStorage

At first, I wondered how OPFS differed from localStorage, so I’ve summarized the main differences here (though the above explanation may have already made it clear).

a. Data Structure:

OPFS: Uses a file system structure with files and folders.
localStorage: A simple key-value pair structure.

b. Storage Capacity:

OPFS: Can handle larger storage (within browser limits).
localStorage: Typically limited to 5–10MB.

c. Performance:

OPFS: Suited for large datasets and frequent read/write operations.
localStorage: Works well for small data but isn’t suitable for large-scale data.

d. API:

OPFS: Offers an API similar to file system operations and supports asynchronous functions.
localStorage: Provides simple synchronous getter/setter APIs for key-value pairs.

e. Data Types:

OPFS: Can handle various data types, including binary data.
localStorage: Stores strings only, requiring other data types to be converted to strings.

f. Use Cases:

OPFS: Ideal for large datasets, databases, and applications that require frequent updates.
localStorage: Suitable for storing small amounts of data, like user preferences or session information.

OPFS Limitations

Despite its advantages, OPFS does have some limitations:

It is a relatively new technology, and browser support is limited.
- Safari might struggle to support it, which is disappointing since I wanted to use it on iPhone/iPad. 😭
Currently, you can’t inspect it as easily as you can inspect localStorage in Chrome’s developer tools.
- Will this change in the future? For now, I use the following script to debug in the developer tools: https://gist.github.com/shinshin86/365ae2b841d1a37cf4e2317c13bff971
You can’t easily delete data from OPFS through Chrome’s developer tools.
- Clearing data via the browser is overkill during development, so I use this script to clear OPFS data: https://gist.github.com/shinshin86/42681c722c5c835e8628e9c797744fca
There is also a Chrome extension available for viewing OPFS data: https://chromewebstore.google.com/detail/opfs-explorer/acndjpgkpaclldomagafnognkcgjignd

The Advantages of OPFS

In short, OPFS allows you to read and write files in a way that is invisible to the user, while being tied to the domain of the web application. Excluding the lack of Safari support, it’s a very useful tool!

Combining SQLite Wasm and OPFS

Now, as for SQLite Wasm, combining it with OPFS allows you to achieve data persistence entirely within the browser.

So, How Is SQLite Wasm + OPFS Useful in Business?

You might be wondering, “How is this combination of SQLite Wasm + OPFS useful from a business perspective?”

To give some context, I run a small-scale business where I offer B2B products I’ve developed. Although my business is very small, I operate in spaces that larger companies don’t usually target, allowing me to thrive in niche markets.

For businesses like mine, keeping monthly expenses low is crucial. Saving on server costs by making small adjustments pays off in the long run. By limiting operational costs, I’ve been able to keep my business profitable, even with modest revenue. For example, I provide one of my products as a desktop application, cutting down on server expenses.

In this context, SQLite Wasm + OPFS can help minimize costs by enabling persistent storage within the user’s browser, without needing to install a desktop app. The user can simply visit a URL and utilize data that is stored persistently in their browser.

Of course, there are limitations, such as the inability to synchronize data between different browsers. However, this can be addressed by providing features from the product side to handle these limitations, and I see potential business opportunities here.

How to Use SQLite Wasm

There are several SQLite Wasm projects out there, but I use sqlite-wasm for my purposes.

https://github.com/sqlite/sqlite-wasm

Here’s an example of how it can be used.

This is the code I wrote when creating a simple TODO app using SQLite Wasm and OPFS:

https://github.com/shinshin86/todo-opfs-sqlite

https://github.com/shinshin86/todo-opfs-sqlite/blob/main/src/db.ts

In the code below, I handle OPFS and fall back to in-memory storage if OPFS isn’t supported:

// OPFS
let openResponse;
try {
  openResponse = await promiser('open', {
    filename: 'file:todo.sqlite3?vfs=opfs',
  });
  console.log('OPFS database opened:', openResponse.result.filename);
} catch (opfsError) {
  console.warn('OPFS is not available, falling back to in-memory database:', opfsError);
  openResponse = await promiser('open', {
    filename: ':memory:',
  });
  console.log('In-memory database opened');
}

With this simple implementation, you can persist data entirely on the frontend. It’s quite convenient!

Streamlining the Application Development Flow (neverchange + sqlc)

The SQLite Wasm + OPFS setup works well with the implementation I shared above, but I wanted a more streamlined way to write code during the development process. That’s why I created a library that wraps around SQLite Wasm + OPFS.

Introducing `neverchange` – A Library for Persistent Storage on the Web Frontend

The library is called neverchange.

It’s still in alpha, but I’ve been dogfooding it myself and plan to continue developing it until it becomes stable.

https://github.com/shinshin86/neverchange

A side note: the name “neverchange” is inspired by the song “Some Things Never Change” from the movie Frozen II.
(I highly recommend giving it a listen—it’s a great song!)

Using this library, you can implement SQLite Wasm + OPFS on the web frontend with ease. Here’s a sample implementation (for more detailed usage, check the repository later):

import { NeverChangeDB } from 'neverchange';

async function main() {
  // Initialize the database
  const db = new NeverChangeDB('myDatabase');
  await db.init();

  // Create a table
  await db.execute(`
    CREATE TABLE IF NOT EXISTS users (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      name TEXT NOT NULL,
      email TEXT UNIQUE NOT NULL
    )
  `);

  // Insert data
  await db.execute(
    'INSERT INTO users (name, email) VALUES (?, ?)',
    ['John Doe', 'john@example.com']
  );

  // Query data
  const users = await db.query('SELECT * FROM users');
  console.log('Users:', users);

  // Close the database connection
  await db.close();
}

main().catch(console.error);

I’ve also added migration capabilities to the database.

When using SQLite Wasm, the user’s browser (the web frontend) is the only place where the database can be managed.
However, by bundling the migrations in a folder, you can accommodate changes to the table structure as your app evolves.
(I wonder if there are better ideas for this? I feel my knowledge is a bit limited, so any suggestions would be appreciated! 🙇‍♂️)

import { NeverChangeDB } from 'neverchange';

// Define migrations
const migrations = [
  {
    version: 1,
    up: async (db) => {
      await db.execute(`
        CREATE TABLE users (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          name TEXT NOT NULL
        )
      `);
    }
  },
  {
    version: 2,
    up: async (db) => {
      await db.execute(`
        ALTER TABLE users ADD COLUMN email TEXT
      `);
    }
  }
];

async function main() {
  // Initialize the database with migrations
  const db = new NeverChangeDB('myDatabase', { isMigrationActive: true });
  db.addMigrations(migrations);
  await db.init();

  // The database will now have the latest schema
  const tableInfo = await db.query('PRAGMA table_info(users)');
  console.log('Users table schema:', tableInfo);

  await db.close();
}

main().catch(console.error);

These are the basic features of the library. (There’s also a dump feature, but I’ll omit that here.)

Using `sqlc` for Code Generation with SQL

However, even with this setup, you still have to write SQL manually. So, I wondered if there was a more efficient way to generate code for database operations. That’s when I discovered sqlc.

I decided to fork this project and modify it to support neverchange. Here’s the repo:
https://github.com/shinshin86/sqlc-gen-typescript/tree/neverchange

(Note: I have created a forked repository to make it easier to use with neverchange. I will explain more about this below.)

To use it, follow these steps:

# Clone the branch
git clone -b neverchange https://github.com/shinshin86/sqlc-gen-typescript.git
cd sqlc-gen-typescript
npm install

# Build the output file
make out.js

# You’ll need Javy to generate the Wasm file (assuming it’s already installed and in your path)
make examples/plugin.wasm

After running the commands above, the plugin.wasm file will be generated in the examples directory.

Next, you can specify the following configuration in sqlc.yaml and run sqlc generate to generate code compatible with neverchange:

version: '2'
plugins:
- name: ts
  wasm:
    url: file://{path_to_plugin.wasm}
    sha256: {sha256_of_your_wasm_file} # This field may not be necessary
sql:
- schema: "{path_to_schema.sql}"
  queries: "{path_to_query.sql}"
  engine: "sqlite"
  codegen:
  - out: "{path_to_output}"
    plugin: ts
    options:
      runtime: node
      driver: neverchange

I created a TODO list app using this setup, which you can find here:

https://github.com/shinshin86/mytodolist

The generated code can be found here:

https://github.com/shinshin86/mytodolist/blob/main/src/db/query_sql.ts

Since most web frontends don’t require extremely complex or large-scale database operations, I believe that combining sqlc with neverchange meets most development needs.

Update: Created a sqlc plugin for neverchange called 'sqlc-gen-typescript-for-neverchange'

Based on the forked repository mentioned above, I have created a neverchange-specific plugin called sqlc-gen-typescript-for-neverchange to make it easier to use with sqlc.

The release binaries are available for direct download, making it easy to generate code by adding the following to your sqlc.yaml:

version: '2'
plugins:
- name: ts
  wasm:
    url: https://github.com/shinshin86/sqlc-gen-typescript-for-neverchange/releases/download/v0.0.1/sqlc-gen-typescript-for-neverchange_0.0.1.wasm
    sha256: 224c6494cc2f8383ae79a2ca4f9d3c5ce0ebacbf6df161d98c414bdfaf1db82d
sql:
- schema: "schema.sql"
  queries: "query.sql"
  engine: "sqlite"
  codegen:
  - plugin: ts
    out: src/authors
    options:
      runtime: node
      driver: neverchange

Code generation can be done as usual with sqlc by running:

sqlc generate

If you're thinking of building an application on the frontend using SQLite Wasm + OPFS, I encourage you to give it a try!

Solving the OPFS Issue on GitHub Pages or Netlify

The repository I shared earlier works on GitHub Pages.

If you access it with a browser other than Safari, you can use your own persistent TODO list:
https://shinshin86.github.io/mytodolist/

However, initially, the project didn’t run as expected on GitHub Pages. When I first tried to deploy it, I encountered the following error, which prevented OPFS from being enabled:

Ignoring inability to install OPFS sqlite3_vfs: Cannot install OPFS: Missing SharedArrayBuffer and/or Atomics. The server must emit the COOP/COEP response headers to enable those

To fix this, I used the following library:

https://github.com/gzuidhof/coi-serviceworker

For specific implementation details, check the gh-pages branch of the TODO list repository I mentioned earlier.

This issue wasn’t limited to GitHub Pages—it also occurred on Netlify. So, it’s likely that other similar hosting services have the same issue.

If you plan to build applications using SQLite Wasm + OPFS, this is something to keep in mind.

Exploring Interesting Opportunities with Wasm

As I mentioned at the start, Wasm is a rapidly evolving field, and for tech enthusiasts, it’s a fascinating area to explore. Personally, I want to find ways to make use of it in a business context, and that’s what led me to the flow I’ve outlined in this post.

Some might say, “In the end, you’re just moving traditional DB operations to the frontend, right?” And while that may be true, I think it’s my own lack of imagination that’s the problem. If you have any ideas for leveraging Wasm, I’d love to hear them!

Thanks for reading this far—I really appreciate it!

How to use MagicAnimate to create videos with custom motion

Yuki Shindo — Fri, 08 Dec 2023 15:16:59 +0000

I created a custom motion and created a mechanism to create a video using MagicAnimate with my original motion.

Because I was using MagicAnimate with Google Colab, inevitably this mechanism was designed to work on Google Colab.

The tools to make these wishes come true have already been created, and I was able to make this happen with the help of these wonderful people and their tools!

The source code (Colab notebook) can be found here.

MagicAnimateCraft with Colab

Please refer to the README for details on how to use the system.

I was able to move Mona Lisa freely by using this. It can be unstable in some situations, though, haha!

Please try to play with this, too!

This is a very small ChatGPT conversation downloader

Yuki Shindo — Wed, 11 Jan 2023 14:16:27 +0000

Here is some code I wrote for a change of pace.
This is a small script intended to be pasted into the Chrome DevTools console.

I created it because I wanted to keep a text file of my conversations with ChatGPT.

With the ChatGPT page open, paste the following code onto Chrome DevTools and run it.

const download = () => {
  const title = document.querySelector('.pr-14.bg-gray-800').text;

  const textList = []
  document.querySelectorAll('.text-base').forEach((t, i) => {
    textList.push(`${i % 2 === 0 ? "Q:" : "A:"} ${t.textContent}`)
  })
  const text = textList.join('\n');

  const blob = new Blob([text], { type: "text/plain" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = title;
  document.body.appendChild(a);
  a.click();

  URL.revokeObjectURL(url);
}

Next, select the conversation you want to download from the left menu.

After selecting the conversation, execute download() on the console of DevTools to download the content of the conversation as a text file.
The file name will be the title from the selected left menu.

There is one thing to note. This script will not work if the structure of ChatGPT page is updated.

The code is also saved in Gist.

ChatGPT conversation downloader(Gist)

How to run Playwright for Go using local Chrome

Yuki Shindo — Thu, 25 Aug 2022 13:12:47 +0000

When Playwright is run with the default settings, a separate browser for use with Playwright (e.g., Chromium) is installed and the process is executed using that browser.

If you want to run Playwright from Chrome already installed on your local machine, you can skip the installation and refer to Chrome on your local machine to run the process.

The following is sample code to achieve this.
(Most of the code below is based on the sample in the README of Playwright for Go.)

package main

import (
    "fmt"
    "log"

    "github.com/playwright-community/playwright-go"
)

func main() {
    runOption := &playwright.RunOptions{
        SkipInstallBrowsers: true,
    }

    // Perform the installation of Playwright's Driver here.
    // Note that this process can be skipped the second time or later because the Driver is already installed.
    err := playwright.Install(runOption)
    if err != nil {
        log.Fatalf("could not install playwright dependencies: %v", err)
    }

    pw, err := playwright.Run()
    if err != nil {
        log.Fatalf("could not start playwright: %v", err)
    }

    option := playwright.BrowserTypeLaunchOptions{
        Channel: playwright.String("chrome"),
    }

    browser, err := pw.Chromium.Launch(option)
    if err != nil {
        log.Fatalf("could not launch browser: %v", err)
    }

    page, err := browser.NewPage()
    if err != nil {
        log.Fatalf("could not create page: %v", err)
    }

    if _, err = page.Goto("https://news.ycombinator.com"); err != nil {
        log.Fatalf("could not goto: %v", err)
    }

    entries, err := page.QuerySelectorAll(".athing")
    if err != nil {
        log.Fatalf("could not get entries: %v", err)
    }

    for i, entry := range entries {
        titleElement, err := entry.QuerySelector("td.title > a")
        if err != nil {
            log.Fatalf("could not get title element: %v", err)
        }

        title, err := titleElement.TextContent()
        if err != nil {
            log.Fatalf("could not get text content: %v", err)
        }

        fmt.Printf("%d: %s\n", i+1, title)
    }

    if err = browser.Close(); err != nil {
        log.Fatalf("could not close browser: %v", err)
    }

    if err = pw.Stop(); err != nil {
        log.Fatalf("could not stop Playwright: %v", err)
    }
}

Created a CLI tool to backup Slack export data in Excel

Yuki Shindo — Sun, 14 Aug 2022 22:09:33 +0000

Starting September 1, 2022, the retention period for messages in Slack will be limited to 90 days.
https://slack.com/blog/news/pricing-and-plan-updates

I had been using Slack with my family on a free plan, but decided to back these up because message exchanges prior to 90 days would be lost.

There was a way to use the Slack API, but this time decided to use exported data that can be downloaded from the Slack GUI.
(Since it is not via the API, it does not seem feasible to do something like automatic backups on a regular monthly basis, but oh well.)
I chose Go as our language because wanted to learn Go.

Here is the actual CLI tool created.

https://github.com/shinshin86/slack-export-data-to-excel

(Oh, the package name is not Go-like...😅)

Installation is done with the following command.
(It is assumed that Go is installed on your machine)

go install github.com/shinshin86/slack-export-data-to-excel@latest

How to backup slack export data

Follow the documentation below to download the Slack export data.
https://slack.com/help/articles/201658943-Export-your-workspace-data

Next, unzip it in an appropriate directory and run the following command to generate an Excel file based on the exported data.
Enter the directory of the exported data in the <export data path> field.

slack-export-data-to-excel <export data path>

Since backups are generated based solely on Slack export data, data not included in the export data will naturally not be backed up.
For example, private messages and DMs cannot be backed up.

PR is welcome!

As you can see from the repository, I am still new to writing Go.
If you have a trick to make it better, please send me a PR.

NPM Library to get a list of WordPress posts' character counts using the WP REST API

Yuki Shindo — Sun, 15 May 2022 22:40:46 +0000

NPM Library to get a list of WordPress posts' character counts

I have created an npm library to retrieve the character count of all articles published on WordPress using the REST API provided by WordPress.
The name is wp-rest-api-posts-wordcount.

Check the GitHub repository for details.
https://github.com/shinshin86/wp-rest-api-posts-wordcount

Installation and code examples are as follows.

Install:

npm install wp-rest-api-posts-wordcount
# or
yarn add wp-rest-api-posts-wordcount

Example:

const getWordcountList = require('wp-rest-api-posts-wordcount');

(async () => {
  try {
    const response = await getWordcountList('your wordpress url');
    console.log(response);
  } catch (e) {
    console.error(e);
  }
})();

What is WP REST API?

To briefly explain the WP REST API used in this library, WordPress provides the following endpoints for REST APIs.

https://developer.wordpress.org/rest-api/

This can be disabled on the WordPress side, but is probably currently enabled by default if you have not made any changes to your settings.

This REST API can be used to retrieve information about published articles.

For example, you can check the value x-wp-total in the response header to get the number of target WordPress pages, etc.
You can use it in various ways, so it would be interesting to read this document once.
(I actually use x-wp-total in my npm library)

Code sample using WP REST API

Here is where the WP REST API is actually used in wp-rest-api-posts-wordcount.

This shows that it is very easy to use the WP REST API.

const targetUrl = `${url}/wp-json/wp/v2/posts`;
const response = await fetch(targetUrl);
const wpTotalPageCount: number = response.headers.get('x-wp-total');

It is possible to retrieve information about public posts by sending a request to the endpoint your_wordpress_url/wp-json/wp/v2/posts like this.

response.headers.get('x-wp-total') to get the number of pages in WordPress.

From this sample, you can see that this API is easy to use.

Various information can be found by checking the official documentation.

Let's build all sorts of useful tools using the WP REST API!

Let Rust detect changes in the Markdown file and generate HTML.

Yuki Shindo — Mon, 11 Apr 2022 15:12:24 +0000

I have recently been learning Rust.

I recently needed to create some simple HTML files, mostly text.
Of course, creating HTML directly is a pain, so I figured I would write Markdown and have it converted to HTML.

I wondered if I could create that conversion tool in Rust anyway. That seemed like good learning programming to me.

This is a record of how I made a Markdown to HTML conversion tool in Rust.

Convert Markdown to HTML using pulldown-cmark

There is a crate for converting Markdown to HTML called pulldown-cmark.

https://crates.io/crates/pulldown-cmark

I decided to use it to write the code for the conversion.

To use pulldown-cmark, I set up Cargo.toml like this.
By default, binaries were also built, but I wanted to use pulldown-cmark as a library this time, so this is how I described it.

pulldown-cmark = { version = "0.9.1", default-features = false }

I have written sample code for the conversion.
(It is almost exactly the same content as the pulldown-cmark documentation.)

use pulldown_cmark::{html, Options, Parser};

fn main() {
    let markdown_input = "# Hello world
 * １１１
 * ２２２
 * ３３３

~~Strikethroughs~~ *bold*.
";
    let mut options = Options::empty();
    // Strikeouts are not part of the CommonMark standard and must be explicitly enabled.
    options.insert(Options::ENABLE_STRIKETHROUGH);
    let parser = Parser::new_ext(markdown_input, options);

    let mut html_output = String::new();
    html::push_html(&mut html_output, parser);

    println!("{}", &html_output);
}

Here is the result of the conversion.

<h1>Hello world</h1>
<ul>
<li>１１１</li>
<li>２２２</li>
<li>３３３</li>
</ul>
<p><del>Strikethroughs</del> <em>bold</em>.</p>

Sample of reading markdown file and generating HTML file

Based on the code above, I wrote a sample that converts Markdown text read from a file called input.md and writes it to an output.html file.

(I think there is a hint of immaturity in the code, but this is something I will work on in the future.)

use pulldown_cmark::{html, Options, Parser};
use std::fs;
use std::fs::File;
use std::io::Write;
use std::path::Path;

fn read_md_file(file_path: &std::path::Path) -> Result<String, Box<dyn std::error::Error>> {
    let md = fs::read_to_string(file_path.to_str().unwrap())?;
    Ok(md)
}

fn write_html_file(
    file_path: &std::path::Path,
    html: &str,
) -> Result<(), Box<dyn std::error::Error>> {
    let mut file = File::create(file_path)?;
    write!(file, "{}", html)?;
    Ok(())
}

fn main() {
    let input_file_path = Path::new("./input.md");
    let markdown_input = read_md_file(input_file_path).unwrap();

    let mut options = Options::empty();
    options.insert(Options::ENABLE_STRIKETHROUGH);
    let parser = Parser::new_ext(&markdown_input, options);

    let mut html_output = String::new();
    html::push_html(&mut html_output, parser);

    let html_file_path = Path::new("./output.html");
    write_html_file(html_file_path, &html_output).unwrap();
}

Detecting file changes in Rust

I have now accomplished the task of generating HTML files from markdown files.
But how can we detect changes in the markdown file?

I have decided to use another crate to detect file changes this time. That is a crate called notify.

https://github.com/notify-rs/notify

Incidentally, there seem to be two versions of notify being developed, 4.0 and 5.0.0-pre.14. I chose 4.0, which seems to be the stable version.
(I only looked at the documentation in the README, but it seems that each version is written in a very different way.)

I added the following to Cargo.toml and rewrote the code to detect changes in the markdown file and generate an HTML file.

notify = "4.0.16"

use notify::{RecommendedWatcher, RecursiveMode, Watcher};
use pulldown_cmark::{html, Options, Parser};
use std::fs;
use std::fs::File;
use std::io::Write;
use std::path::Path;
use std::sync::mpsc::channel;
use std::time::Duration;

fn read_md_file(file_path: &std::path::Path) -> Result<String, Box<dyn std::error::Error>> {
    let md = fs::read_to_string(file_path.to_str().unwrap())?;
    Ok(md)
}

fn write_html_file(
    file_path: &std::path::Path,
    html: &str,
) -> Result<(), Box<dyn std::error::Error>> {
    let mut file = File::create(file_path)?;
    write!(file, "{}", html)?;
    Ok(())
}

fn markdown_to_html(input_path: &std::path::Path, output_path: &std::path::Path) {
    let markdown_input = read_md_file(input_path).unwrap();

    let mut options = Options::empty();
    options.insert(Options::ENABLE_STRIKETHROUGH);
    let parser = Parser::new_ext(&markdown_input, options);

    let mut html_output = String::new();
    html::push_html(&mut html_output, parser);

    write_html_file(output_path, &html_output).unwrap();
}

fn main() -> notify::Result<()> {
    let input_file_path = Path::new("./input.md");
    let output_file_path = Path::new("./output.html");

    let (tx, rx) = channel();
    let mut watcher: RecommendedWatcher = Watcher::new(tx, Duration::from_secs(1))?;
    watcher.watch(input_file_path, RecursiveMode::Recursive)?;

    loop {
        match rx.recv() {
            Ok(_) => markdown_to_html(input_file_path, output_file_path),
            Err(err) => println!("watch error: {:?}", err),
        };
    }
}

Detects changes to markdown files in a specified directory and writes the target files to HTML

We are finally close to our goal.
Now we wanted to further extend the above process to be able to detect changes within a specified directory.
However, it seemed that if I specified the directory in the notify, it would detect changes within the directory. Cool.

About DebouncedEvent of notify

Incidentally, regarding event detection in notify, it seems that multiple types of events come across.

   loop {
        match rx.recv() {
            Ok(event) => println!("event: {:?}", event),
            Err(err) => println!("watch error: {:?}", err),
        };
    }

The one passed in this event is called DebouncedEvent, which is described in detail in this document.

https://docs.rs/notify/latest/notify/enum.DebouncedEvent.html

In cases such as this one, NoticeWrite is issued immediately after a write event for the target path, and Write is issued when a file is written and no event for the path is detected within the specified time.

We decided to use these events to perform the conversion in HTML this time, but decided to perform the HTML conversion process at the timing of Write instead of processing immediately after saving the file.

Therefore, I rewrote the code as follows.

fn main() -> notify::Result<()> {
-    let input_file_path = Path::new("./input.md");
-    let output_file_path = Path::new("./output.html");
-
     let (tx, rx) = channel();
     let mut watcher: RecommendedWatcher = Watcher::new(tx, Duration::from_secs(1))?;
-    watcher.watch(input_file_path, RecursiveMode::Recursive)?;
+
+    let input_dir_path = Path::new("./input");
+    watcher.watch(input_dir_path, RecursiveMode::Recursive)?;

     loop {
         match rx.recv() {
-            Ok(_) => markdown_to_html(input_file_path, output_file_path),
+            Ok(event) => match event {
+                notify::DebouncedEvent::Write(path) => {
+                    let input_file_path = Path::new(&path);
+                    let md_file_name = input_file_path.file_name().unwrap();
+                    match Path::new(md_file_name).extension() {
+                        Some(md_exntension) => {
+                            if md_exntension != "md" {
+                                eprintln!("ERROR: Only markdown files can be converted.");
+                                std::process::exit(1);
+                            }
+                        }
+                        None => {
+                            eprintln!("ERROR: Not found extension.");
+                            std::process::exit(1);
+                        }
+                    };
+
+                    let html_file_name = md_file_name.to_str().unwrap().replace(".md", ".html");
+                    let output_file_path = input_dir_path
+                        .parent()
+                        .unwrap()
+                        .join("output")
+                        .join(html_file_name);
+
+                    markdown_to_html(input_file_path, output_file_path.as_path());
+
+                    println!("=== Generated HTML ===");
+                    println!("Input file path: {:?}", input_file_path);
+                    println!(
+                        "Output file path: {:?}",
+                        output_file_path.canonicalize().unwrap()
+                    );
+                }
+                _ => (),
+            },
             Err(err) => println!("watch error: {:?}", err),
         };
     }

I created a tool called gm2h.

This accomplished everything I wanted to do.

I then made this set of code available in the form of a CLI tool.
I have named it gm2h and published it on GitHub.

https://github.com/shinshin86/gm2h

It is not yet released to crates.io, but can be installed and used directly from GitHub.

cargo install --git https://github.com/shinshin86/gm2h.git

Create a Markdown file in the current directory and then execute the following command
Then edit the Markdown file and an HTML file will be generated.

Incidentally, if I created a Markdown file after running gm2h, it did not seem to detect any changes to that file. I have not yet been able to find out if this is due to my code or if it is a specification of notify.

This is how it actually works.

I actually use this in situations where I create HTML files, and it is quite useful.
There is still room for improvement, so I am planning to improve it little by little.
If you find any improvements, please send me a Pull Requst. I welcome it.

Thank you for reading to the end!

DEV Community: Yuki Shindo

gh-star-gif: Generate a 'Please star' GIF for any GitHub repo

What is gh-star-gif?

Try it now

Why this is useful for indie devs

Where to use it

Prerequisites

Usage examples

Basic usage

Custom message and output path

Common tuning options

How it works under the hood (technical overview)

A couple of design choices (and why)

Open source

No “resume” in Codex CLI, so I built one: quickly “continue” with `codex-history-list`

Update: 'resume' and 'continue' Added in Codex CLI 0.30.0

Update 2 (Codex 0.36.0): Use codex resume

Problem: Continuing a session is hard

Background: There is a door to “experimental resume”

Solution: Use codex-history-list to quickly pick the right log to resume

How to use it: install → list → launch Codex with “experimental resume”

1) Install (local-use oriented; not on npm)

2) List your sessions

3) Launch Codex CLI with the selected log (“experimental resume”)

Wrap-up: A stopgap until official resume lands

References

CLI Renaissance Alert: Meet oh-my-logo — Your Gemini CLI and Claude Code style Logo Generator

Filled‑In ASCII Art—Could It Become a Trend?

How to Use oh‑my‑logo

“Teach Me How to Get GitHub Stars and Build Viral Tools!”

How ccusage Popularized the npx One‑Liner

The CLI Renaissance: Claude Code, Gemini CLI, Codex CLI & Beyond

[How to Build an AITuber] How to Fetch Viewer Comments from YouTube and Twitch

1. Fetching YouTube Live chat messages

Overall flow

Getting your YouTube API key & Live ID

Sample code (YouTube Live)

2. Fetching Twitch chat (EventSub WebSocket)

IRC is passé—use EventSub instead

Overall flow (Twitch)

Getting your token & client ID

Use Public client type

Sample code (Twitch)

Wrap-up

Front-End Only: Real-Time AI Stream Commentary with React, OBS Virtual Camera, and GPT-4o-mini

Implementing an “AI that sees the streaming screen and auto-comments” using React, OBS Virtual Camera, and ChatGPT (gpt-4o-mini)

What We’ll Cover

What Is AITuber OnAir?

Overall Flow of the Feature

How to Enable the OBS Virtual Camera

Sample Implementation Code

1. Retrieving the OBS Feed in a <video> Element

2. The captureScreenshot() Function

3. Sending Images to the OpenAI Vision Model

4. Main Logic for Generating AI Comments

Implementation Notes

Conclusion

You Can Do Quite a Lot in the Browser Alone

Can You Create a Product That Makes Money with Wasm?

Combining SQLite Wasm and OPFS Brings Persistent Storage to the Web Frontend

Key Features of OPFS

Differences Between OPFS and localStorage

OPFS Limitations

The Advantages of OPFS

Combining SQLite Wasm and OPFS

So, How Is SQLite Wasm + OPFS Useful in Business?

How to Use SQLite Wasm

Streamlining the Application Development Flow (neverchange + sqlc)

Introducing neverchange – A Library for Persistent Storage on the Web Frontend

Using sqlc for Code Generation with SQL

Update: Created a sqlc plugin for neverchange called 'sqlc-gen-typescript-for-neverchange'

Solving the OPFS Issue on GitHub Pages or Netlify

Exploring Interesting Opportunities with Wasm

How to use MagicAnimate to create videos with custom motion

This is a very small ChatGPT conversation downloader

How to run Playwright for Go using local Chrome

Created a CLI tool to backup Slack export data in Excel

How to backup slack export data

PR is welcome!

NPM Library to get a list of WordPress posts' character counts using the WP REST API

Update 2 (Codex 0.36.0): Use `codex resume`

Solution: Use `codex-history-list` to quickly pick the right log to resume

How ccusage Popularized the `npx` One‑Liner

1. Retrieving the OBS Feed in a `<video>` Element

2. The `captureScreenshot()` Function

Introducing `neverchange` – A Library for Persistent Storage on the Web Frontend

Using `sqlc` for Code Generation with SQL