Giter VIP home page Giter VIP logo

rezzy-zoom-and-enhance's Introduction

Rezzy: Zoom and Enhance for images on the web ๐Ÿ”Žโœจ

Webcomic Zoom and Enhance.

Sometimes the text in a web comic is a little too small to read comfortably.
Zooming in normally makes the text blurry, so it's not much help.

Rezzy is a browser extension that automatically enhances the resolution of images on the web, using machine learning (powered by waifu2x-converter-cpp).

Image credit: Sleepless Domain

Machine learning is cool, but it's important to make it accessible, and get it into the hands of the masses.

Bonus feature: navigate any web comic with arrow keys

THIS EXTENSION IS NOT RELEASED YET

Development Setup

  • Install Git if you don't already have it.
  • Install Git Large File Storage if you don't have it.
  • Clone the repo.
  • Install Node.js if you don't have it, then open up a command prompt / terminal in the project directory.
  • Install project dependencies with npm install
  • For Linux (not needed on Windows), run the following:
    sudo apt-get update -y
    sudo apt-get install -y libopencv-core-dev libopencv-imgcodecs-dev
    sudo ldconfig -v
    # Hack it so waifu2x-converter-cpp can find the ML model.
    sudo ln -s "$(pwd)/waifu2x-DeadSix27-win64_v531/models_rgb/" /usr/local/share/waifu2x-converter-cpp
    # Trick it into thinking it's OpenCV 4.2, if that's not what got installed. Might be better to actually install 4.2, but 4.5 seems to work with this:
    sudo ln -s /usr/lib/x86_64-linux-gnu/libopencv_imgcodecs.so /usr/lib/x86_64-linux-gnu/libopencv_imgcodecs.so.4.2
    sudo ln -s /usr/lib/x86_64-linux-gnu/libopencv_imgproc.so /usr/lib/x86_64-linux-gnu/libopencv_imgproc.so.4.2
    sudo ln -s /usr/lib/x86_64-linux-gnu/libopencv_core.so /usr/lib/x86_64-linux-gnu/libopencv_core.so.4.2
  • Start the superresolution server with npm start
  • For Firefox, run npx web-ext run in the project directory
    • It will open a window with the extension temporarily installed.
    • When you make changes:
      • It will automatically reload the extension.
      • You need to reload pages you're testing on to get the updated content script.
  • For Chrome or Chromium, type chrome://extensions in the address bar
    • Turn on Developer mode
    • Click "Load unpacked" and select the root of this repository as the folder
    • When you make changes:
      • You need to click the Reload button in the Extensions page
      • Then reload pages you're testing on to get the updated content script.

Usage

  • Visit a webcomic, such as Paranatural... well, maybe that's not the best example, at the beginning, but it works really well once the art gets better. Kill Six Billion Demons, Sleepless Domain
  • Click on the extension icon in the browser toolbar, and click the power button in the popup to enable the extension for the current site
  • (Check the server logs to see if it's working - or, if you hear your computer's cooling fans whirring into motion, it's probably working.)
  • Wait for it to buffer several pages before reading

rezzy-zoom-and-enhance's People

Contributors

1j01 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

rezzy-zoom-and-enhance's Issues

Next/prev link detection improvements

  • Hidden links should be de-prioritized / excluded
  • Prioritize links in navigation
    • nav, .paginate, .pagination, .pages, .nav, .navigation e.g. (but much looser)
    • Prioritize links nearby in hierarchy to a paired next/prev link (could be an unreliable factor if links are hidden at the first / last page)
  • Penalize links in a comments section
    • .comments, .comment_area, .responses e.g.
  • Should keyboard shortcuts (left/right) be a separate browser extension?
  • Automated tests

Note: webtoons uses .paginate for both the main nav and pagination of the comments area.

[Function Request] improvements

  • The ability to choose where to save images.
  • Add waifu2x Artwork/Scans Model
  • Reduce the number of requests (there should be an opinion of 50 requests in 5 minutes) while all photos should be processed at once.

Error: Cannot find module 'express'

(venv) F:\rezzy-zoom-and-enhance>npm start

> rezzy@0.0.1 start
> node src/server.js

node:internal/modules/cjs/loader:998
  throw err;
  ^

Error: Cannot find module 'express'
Require stack:
- F:\rezzy-zoom-and-enhance\src\server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (F:\rezzy-zoom-and-enhance\src\server.js:2:17)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'F:\\rezzy-zoom-and-enhance\\src\\server.js' ]
}

Node.js v18.12.1

Portable upscaling AI (wasm / webgl / webgpu)

Currently I use waifu2x-converter-cpp for superresolution, on a server which lives outside of the browser extension, and communicates with the web page over socket.io.
The biggest issue with this browser extension is that it's hard to set up. I would have published it already if it didn't require a separate install from the browser extension.

I just did a proof of concept for using Anime4K.js on a branch. There's performance problems (blocking the page), but that's easy to resolve, just need the computation to be in a worker (or the extension's background page). Cross-origin images are no longer handled, but that's solvable as well. The real problem is the quality of the output. Text looks very blurry/ugly. I wonder if the upstream project Anime4K has improvements that the JS port lacks, or if text is just a bad case for Anime4K.

There are other shaders and algorithms to compare.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.