latentcat/qrbtf

★ 6,927TypeScriptAudience · designerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((qrbtf))
    Modes
      AI image blend
      Parametric styles
    Outputs
      SVG export
      JPG export
    Tech Stack
      TypeScript
      Next.js
      Stable Diffusion
      ControlNet
    Use Cases
      Branded QR codes
      React components
      Print materials

mindmap root((qrbtf)) Modes AI image blend Parametric styles Outputs SVG export JPG export Tech Stack TypeScript Next.js Stable Diffusion ControlNet Use Cases Branded QR codes React components Print materials

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Generate a branded QR code that blends an image or logo with a scannable code and export it as a scalable SVG

USE CASE 2

Add styled parametric QR codes to a React app using the companion react-qrbtf package

USE CASE 3

Create artistic QR codes for print materials by adjusting shape, color, and spacing entirely in the browser without any server processing

Tech stack

TypeScriptNext.jsReactStable DiffusionControlNet

Getting it running

Difficulty · easy Time to first run · 5min

The parametric mode runs entirely in the browser at qrbtf.com with no setup, the AI mode requires the hosted site and external servers.

Free to use and share, but if you distribute modified versions you must release your changes under the same GPL-3.0 license.

In plain English

QRBTF is a QR code generator that produces visually styled codes rather than plain black-and-white squares. It has two modes: an AI mode and a parametric mode. In the AI mode, the generator uses custom-trained models to blend images or artistic styles with a scannable QR code. In the parametric mode, you choose from a set of visual styles and adjust parameters like shape, color, and spacing without any server-side processing, which means it works entirely in the browser. The parametric mode is open source, included in this repository, and supports exporting as SVG so the results scale to any size without losing quality. The AI mode runs on external servers and is the part that requires the hosted website at qrbtf.com. Using it is straightforward: go to qrbtf.com, enter a URL or any text, pick a style, adjust the available parameters, and download the result as SVG or JPG. The site supports both English and Chinese and is built with Next.js. For developers who want to add styled QR codes to their own React applications, the project links to a separate companion package called react-qrbtf that wraps the parametric functionality as a React component. The project is built by Latent Cat, a small team, and is licensed under the GNU General Public License v3.0. The README links to articles (in both English and Chinese) explaining the technical approach behind the AI-generated QR codes, including the use of ControlNet with Stable Diffusion to make images that remain machine-readable.

Copy-paste prompts

Prompt 1

I want to add a styled QR code to my React app. Show me how to install react-qrbtf and render a parametric QR code component with a custom URL and a blue color scheme.

Prompt 2

I want to create a QR code that looks like an artwork while still being scannable. Walk me through using the AI mode on qrbtf.com, what inputs does it need and how long does it take?

Prompt 3

How does QRBTF use ControlNet with Stable Diffusion to keep a QR code scannable while blending it with an image? Explain the approach in plain terms.

Prompt 4

I cloned latentcat/qrbtf and want to run the parametric mode locally. What npm commands do I run to install dependencies and start the Next.js dev server?

Open on GitHub → Explain another repo

← latentcat on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.