Git Product home page Git Product logo

webcube's Introduction

webcube

Rubik's cube assistant on Flask webapp. This webapp accepts the six faces of your cube and gives you the voice instructions as a response.

Demo -> Link

Requirements

This webapp requires a lot of extra modules and packages to be downloaded, It is recommanded to follow this order :

$ yum install python3 -y
$ yum install gcc-c++ -y
$ yum install python3-devel -y 
$ pip3 install flask 
$ pip3 install Pillow
$ pip3 install numpy
$ pip3 install joblib
$ pip3 install scikit-learn
$ pip3 install scikit-build
$ pip3 install opencv-python
$ yum install opencv opencv-devel opencv-python -y
$ pip3 install kociemba

Usage

Navigate to http://<IP>:<PORT>/input. This webapp runs on port no. 85 by default, but can be changed in the app.py file. To use take edge to edge and centred pics of the cube. Start with Red face with the White face down, and take pictures in the order Red -> Green -> Orange -> Blue -> Yellow -> White. After this click get solution. While listening to the instructions face the Red centred face with the White centred face down.

example

Running the container

$ sudo docker run -dit -p <PORT>:85 --name <NAME> yashindane/webcube:v1 

Running the container using podman

$ sudo podman run -dit -p <PORT>:85 --name <NAME> docker.io/yashindane/webcube:v1 

Arm64v8 machines

$ sudo docker run --platform linux/arm64/v8 -dit -p <PORT>:85 --name <NAME> yashindane/webcube:linux-arm64v8

Code for arm64v8 version -> link

Working

The six images of six faces have there respective data_uri, which are submitted by a form when you click get solution. This data_uri are converted to images and saved. Next the function order from order_image.py renames and creates new images (format example face_0.png to face_5.png), according to images that have central tile colour matching in the order yellow -> green -> red -> white -> blue -> orange. Naming images in this order is required for the cube to be solved. A cubestring is formed after predicting the tile colours and getting there respective notations.

colour_mappings = {

    "red": "F",
    "green": "R",
    "blue": "L",
    "yellow": "U",
    "white": "D",
    "orange": "B"
 
}

The cubestring is passed to the kociemba.solve() function, which return a string containing instructions for solving the cube. Kociemba is a Python/C implementation of Herbert Kociemba's Two-Phase algorithm for solving Rubik's Cube.

Read full documentation of Kociemba here -> Link

the instructions are decoded to human voice instructions. This instructions are then written to the output.js file, which outputs this instructions as voice.

Building docker image

build docker image by ->

$ docker build -t <username>/<repo-name>:<version>

I have also uploded already build image for this webapp on Docker Hub -> Link

deploying the image in Kubernetes

create a deployment by ->

$ kubectl create deployment <deploy-name> --image <username>/<repo-name>:<version>

Scale the deployment if necessary and create a service by ->

$ kubectl expose deployment <deploy-name> --port=85 --name=<service-name> --type=LoadBalancer

Prerequisite browser settings

1. Remove chrome managed by your organisation (Optional)

Visit this link -> link

2. Edit chrome flags for camera access

Navigate to chrome://flags/#unsafely-treat-insecure-origin-as-secure on chrome browser and add http://<IP>:<PORT> inside Insecure origins treated as secure box and click enable and reload the chrome page. After usage just remove the entry and click disable.

webcube's People

Contributors

yashindane avatar

Stargazers

Li Duo avatar  avatar  avatar  avatar  avatar  avatar Durgesh Samariya avatar zir avatar Omar Brikaa avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar Yadnyawalkya Tale avatar  avatar Chetan jain avatar Church Media Solutions avatar Vikas Sheoran avatar  avatar Deepanshu Khanna avatar Matthew Zenittini avatar Prashant Pandey avatar Joshith Gopidi avatar Karan Chhabra avatar Ashutosh Singh avatar Vasudev avatar Swarup Tripathy avatar lost_star avatar Uday Khemewar avatar Apoorva Krisna avatar MOHIT KUMAR KUSHWAHA avatar  avatar Ketaki Keluskar avatar Nihad avatar Nutan Hotwani avatar Jay Khatri avatar  avatar Piyush Bagani avatar Navdeep avatar Bhagyashree Pathak avatar UJALA TYAGI avatar Suneel Kumar P avatar TUSHAR SRIVASTAVA avatar Sneha Kumari avatar Siddmannat avatar Ankit Birla avatar Ankit Mahajan avatar Shivansh Mishra avatar Aditya Kumar Sahu avatar Akash Jain avatar Komal Suthar avatar  avatar

Watchers

James Cloos avatar  avatar  avatar

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.