Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yashindane/webcube-arm64v8

Rubik's cube assistant on Flask webapp
https://github.com/yashindane/webcube-arm64v8

ai arm64v8 flask python3

Last synced: 27 days ago
JSON representation

Rubik's cube assistant on Flask webapp

Awesome Lists containing this project

README 

        
![](https://img.shields.io/badge/-Flask-blue?style=for-the-badge&logo=flask) ![](https://img.shields.io/badge/impressions-79.7k-lightblue?style=for-the-badge&logo=linkedin) ![](https://img.shields.io/badge/likes-2.7k-lightblue?style=for-the-badge&logo=linkedin)



# 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](https://www.linkedin.com/posts/yash-indane-aa6534179_machinelearning-flask-python-activity-6805902901546901507-dN6M)



## 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://:/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 instructions face the `Red` centred face while keeping the `White` centered face down.



![example](https://user-images.githubusercontent.com/53041219/207020107-8c441361-6283-4bbc-920b-97f6948cca83.png)



## 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.



```py

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](https://pypi.org/project/kociemba/)



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 ->



`$ sudo docker build --platform linux/arm64/v8 -t /:`



I have also uploded already build image for this webapp on Docker Hub -> [Link](https://hub.docker.com/repository/docker/yashindane/webcube)



## Running the container



```

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

```



## Running the container using podman

```

$ sudo podman run --platform linux/arm64/v8 -dit -p :85 --name  docker.io/yashindane/webcube:linux-arm64v8

```



## Deploying the image in Kubernetes



create a deployment by ->



`$ kubectl create deployment  --image /: `



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



`$ kubectl expose deployment  --port=85 --name= --type=LoadBalancer`



## Prerequisite browser settings



### 1. Remove chrome managed by your organisation (Optional)



Visit this link -> [link](https://www.youtube.com/watch?v=DaLaWChdyug)



### 2. Edit chrome flags for camera access



Navigate to `chrome://flags/#unsafely-treat-insecure-origin-as-secure` on chrome browser and add `http://:` inside `Insecure origins treated as secure box` and click enable and reload the chrome page.

After usage just remove the entry and click disable.