This project takes a 'hand-drawn HTML page layout' image as an input from the user and converts it into a functional HTML webpage!
If you have a webpage design in mind but don't want to code the basic stuff? Well, now you don't have to. Just clone/download this repository, complete the setup and generate well-formatted HTML code for your website design in seconds.
Input Image:
Output Page and Code:
-
Clone/Download the Official TensorFlow models GitHub repository:
-
Visit the /models/research/object_detection page and follow the setup instructions to install all the dependencies required to run the Object Detection files.
-
The library dependencies can be installed from the requirements.txt file using the following command:
pip install -r requirements.txt
INSTALL TENSORFLOW 1.15.0
(not listed in requirements.txt because there is no pip package for tf 1.15)
Download a .whl file from the following link (considering your python version and operating system): https://pypi.org/project/tensorflow/1.15.0/#files
Install the .whl file using the the following command (update your pip before proceeding):
pip install PATH_TO_FILE/name_of_file.whl
-
Replace the visualization_utils.py
Go to the directory where you have downloaded the Official Tensorflow models repository. Find the 'utils' folder inside object_detection directory by navigating:
DIR_WHERE_REPO_IS_CLONED/models/research/object_detection/utils/
Find the visualization_utils.py file inside utils directory and replace it with the visualization_utils.py file provided in this repository.
-
Download the frozen_inference_graph_816.pb file from the link provided in the how_to_download_trained_model.txt file. Alternatively, it can be downloaded using this link.
-
Go through each .py file and specify paths to the required files. Read the comments around the path variables to understand the requirements.
After the setup is done, running this project is quite straight forward.
Use these symbols to represent the HTML Elements in your website design.
Draw the design using the symbols on a plain white (preferably A4 size) sheet and click a picture in decent lighting. Specify the path of the image in the main.py file run it using one line of code from your terminal.
python main.pyDepending on the processing hardware, it might take some time to execute. The preprocessed image with detected elements is displayed to show which elements have been identified. This image can be closed by pressing any key after which, the webpage would automatically open in a new browser window. Generated HTML code can be found in generated_code.html file in the specified directory.
Click on the image to watch the demo video on YouTube.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please perform the appropriate testing of proposed additions before creating a pull request.