antfu / qrcode-toolkit

Anthony's QR Code Toolkit for AI generated QR Codes

Anthony's QR Toolkit

A toolkit mainly for AI-Generated QR Codes, with the ability to generate base QR codes, and compare with the output to find misaligned pixels.

👋 Walkthrough Guide - Refining AI Generated QR Code

📸 Go to the App - qrcode.antfu.me

Stable Diffusion Web UI Extension

This app also provides Stable Diffusion Web UI integration. Please go to antfu/sd-webui-qrcode-toolkit for more details.

License

MIT

qrcode-toolkit's Issues

QR toolkit在 SD内无法加载（昨天正常，今天无法使用）

Describe the bug

Reproduction

无

System Info

无

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

> execute `pnpm install` error

          > 

when I execute pnpm install It will stop in a half way and writes:

Originally posted by @lemonskiller in #11 (comment)

Add border style

Clear and concise description of the problem

The current QR code designed on canvas lacks an outer border. If you need to add an outer border, you need to design it separately in PhotoShop.

Suggested solution

Several styles of border buttons are preset. Each button represents a style of border. When the user clicks the button, the QR code designed on the current canvas can be placed into the selected border.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Programmaticaly Create QR Codes

Clear and concise description of the problem

hello,

thanks for this project, it is extremely impressive. For a project of my own, i am interested in creating qr codes programmatically (given a list of texts, and a json giving all the attributes of the qrcode) and right now i have re-implemented in python a number of the features you have, by looking at the underlying libraries etc.

however i feel like maybe i could spin up the server locally and simply send requests to it?

i haven't used nuxt in a long time, and also wouldn't really know exactly which request i should be doing. one per text is absolutely fine, we don't need to implement a batch mode, a for loop would work perfectly.

Suggested solution

a small guide on how to get setup locally + where the important function calls are so people can tinker with it a bit

Alternative

as i said, i have tried implementing it in python, and i can do different markers style, only show data or function modules, different colours etc, but i can't do all you have, and the crystallize/liquify effects are pretty hard to draw on svg (that i then convert to PIL)

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Hope to be able to generate SVG and EPS files and let us download

Clear and concise description of the problem

I hope to be able to generate SVG and EPS files and let us download them, which will help to design QR Code through design software, such as: Photoshop, illustrator and other tools. I will always use this toolkit and recommend it to friends when necessary. Looking forward to the function of this tool will be more and more perfect.

Suggested solution

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

The logo can be added to the center of the image

Clear and concise description of the problem

The logo can be added to the center of the image
I know this is a very good project and I look forward to The logo can be added to the center of the image

Suggested solution

I know this is a very good project and I look forward to it. The logo can be added to the center of the image

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Relax the screen size requirement for Compare

Describe the bug

I think everyone should at least have the option to use the Compare feature, even if it looks bad on their screen. Currently, toggling on Desktop Site in Firefox doesn't help:

Browser: Firefox Nightly 121.0a1
OS: Android 13 (One UI)
DPI: 384 dpi

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[feat] Supports the generation of multiple items, including text, connections, and images...

Clear and concise description of the problem

Currently, only plain text QR code generation can be supported. Can we add the ability to generate links and display images directly?

Suggested solution

I have not yet understood the solution to this issue, but if you allow me, I can try a PR

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

cant scan alipay qrcode

Clear and concise description of the problem

Hope to support scan alipay qrcode

Suggested solution

Hope to support scan alipay qrcode

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

I hope there is a more detailed self introduction tutorial

Clear and concise description of the problem

The project cannot run, it's a pity。I hope there is a more detailed self introduction tutorial

Suggested solution

I hope there is a more detailed self introduction tutorial

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Is there a way to make an exact copy of a QR code?

Clear and concise description of the problem

All the apps to copy the qr code just scan the information in it and create another code with the same data, which result in a different pixel set. Your qr code generator has the most advanced settings of all the similar products, and I was trying every size with every mask combinations and still was unable to replicate the original code pixel by pixel

Suggested solution

Should I try other settings except for mask and size? Is anything else capable of changing the pixel set?

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

QArt support

Clear and concise description of the problem

Changing manually padding or error code bits and then changing affected other bits automatically, so that for example we can paint a white area in the middle and the qr code is still valid.

Suggested solution

https://github.com/7sDream/pyqart

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

QR Code Transparent Background

Clear and concise description of the problem

I guess this can be an enhancement in the current feature "Background" upload.
The white background of QR code is blocking the uploaded background image.

Suggested solution

QR code needs to be transparent after uploading the background so that we can see the image.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Compare tool doesn't optimally support marginally offset QR codes

Clear and concise description of the problem

When generating QR codes using the QRCode-Toolkit you can offset your QR code to the left, right, top and bottom prior to generation using the sliders in the margin section. this will result in additional margin with a centered QR code if you keep the values equal on all sides, however, you can offset more to either side by providing imbalanced values (ex. 8 margin left and 16 margin right). The issue arises when you try to take a generated output from Stable Diffusion text2img or img2img to the Compare tool, which only supports the X and Y strictly using the grid to align to the QR code. in this case you can't really center the grid to the QR code, so a large chunk of it ends up being the additional margin that was painted in with just a normal, non-QR code part of the image.

You can see what I mean better below:

I have matched the grid to the right size, but a lot of the space to the right has nothing to do with the QR code, so I'm getting way more light mismatches than I should.

Suggested solution

I would suggest the Margin Tool inside the Compare Tool supporting left, right, top, and bottom similar to the Generator tool instead of the current implementation that strictly supports X and Y direction. This way you can have more control to center directly over the QR code when it is offset from center.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Add limitations for some option values

Describe the bug

Hi! When I was studying the application to implement some tasks I was interested in, I got into a not very pleasant situation:

If, for example, you set the "margin" option to a very large value, then because the settings are saved in local storage, the application stops working because of very large calculations (which I realized are completely done on the client).

My solution to this problem as a user is to get to the "not found" page (home and other pages hang immediately) and clear the settings in local storage.

To be honest, the first time I set the value to 10000000000.... and maybe more...

I think not every average user will be able to figure out how to solve this problem on their own.

(Aw, Snap!)

Reproduction

No response

System Info

No response

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

New Feature : Add Logo to the QR code

Clear and concise description of the problem

There is no option to upload or add a logo to the QR code.

Suggested solution

Need an option to add logo to the centre of the QR code, The data of the QR shouldn't be affected by it and the scannability performance should not be affected. The data behind can either be below the logo or the data on the area of the logo can be removed.
Please refer the attached images.

.

Alternative

You can also visit " QRcode-monkey " website to get more ideas and inspirations for design and feature improvements.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

error @1.2.4 postinstall: `nuxi prepare`

Describe the bug

when I download this project and run npm install then I got these errors:
ERROR The requested module 'vue' does not provide an export named 'h'
import { getCurrentInstance, inject, onUnmounted, onDeactivated, onActivated, computed, unref, watchEffect, defineComponent, reactive, h, provide, ref, watch, shallowRef, shallowReactive, nextTick } from 'vue';
^
SyntaxError: The requested module 'vue' does not provide an export named 'h'
at ModuleJob._instantiate (internal/modules/esm/module_job.js:121:21)
at async ModuleJob.run (internal/modules/esm/module_job.js:166:5)
at async Loader.import (internal/modules/esm/loader.js:178:24)
at async loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:2536:37)
at async Object.invoke (node_modules/nuxt/node_modules/nuxi/dist/chunks/prepare.mjs:31:18)
at async _main (node_modules/nuxt/node_modules/nuxi/dist/cli.mjs:49:20)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @1.2.4 postinstall: nuxi prepare
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @1.2.4 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/XXX/.npm/_logs/2023-07-25T07_17_57_974Z-debug.log

and in this log, it writes:

2298 verbose stack Error: @1.2.4 postinstall: nuxi prepare
2298 verbose stack Exit status 1
2298 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
2298 verbose stack at EventEmitter.emit (events.js:400:28)
2298 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
2298 verbose stack at ChildProcess.emit (events.js:400:28)
2298 verbose stack at maybeClose (internal/child_process.js:1055:16)
2298 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
2299 verbose pkgid @1.2.4
2300 verbose cwd /Users/zhiyu9/Downloads/qrcode-toolkit-main
2301 verbose Darwin 22.1.0
2302 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
2303 verbose node v14.17.6
2304 verbose npm v6.14.15
2305 error code ELIFECYCLE
2306 error errno 1
2307 error @1.2.4 postinstall: nuxi prepare
2307 error Exit status 1
2308 error Failed at the @1.2.4 postinstall script.
2308 error This is probably not a problem with npm. There is likely additional logging output above.
2309 verbose exit [ 1, true ]

I don't know how to deal with this problem, can anyone help ? 😭

Reproduction

How to deal with problem caused by 'npm install'?

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 69.52 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.17.6 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

QQ group chat business card cannot be recognized

Clear and concise description of the problem

The QR code parsing function cannot recognize QQ group chat QR codes

Suggested solution

Hope the QR code parsing function can parse QQ group chat QR codes，

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Allow custom background fill colors

Clear and concise description of the problem

Currently it fills with #888888, even though the QR Monster model card says to use #808080

Suggested solution

Either add #808080 as an option or allow setting it custom, please?

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

SD1.5.1 After choosing the dark theme, the interface of this plug-in is black and the UI and operation interface cannot be seen clearly.

Describe the bug

SD1.5.1 After choosing the dark theme, the interface of this plug-in is black and the UI and operation interface cannot be seen clearly.

Reproduction

SD1.5.1 After choosing the dark theme, the interface of this plug-in is black and the UI and operation interface cannot be seen clearly.

System Info

SD1.5.1 After choosing the dark theme, the interface of this plug-in is black and the UI and operation interface cannot be seen clearly.

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Allow changing pixel size

Clear and concise description of the problem

The app only allows changing the shapes of the pixels but does not allow resizing.

Suggested solution

We need the ability to resize pixels to make them larger or smaller according to our needs.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.