Another video:

Please watch this video for the messenger experience in IOS Video.

Inspiration

Most of my classmates and friends asked me how to build a web-page and upload it to the internet. It may sound easy for some of us, but other people need help to get online and publish a web-page. Also, some experienced Web-Developers may need help translate their sketched wire-frame into initial code. They take this initial code and use it as a base to easy build their Bootstrap Website. This process can take place in any Visual Website builder or any other development settings.

What it does

This Chatbot will chat with users, and provide Three options. First, the user can upload a wire-frame image, and the ML model will convert it to initial HTML and CSS code. Then, the user can see it live or send it to his email. Secondly, the user will have an option to upload an HTML page. Here, the user can upload his HTML file and we have the CSS file for him. Any file will be converted to HTML to avoid misusing this tool. Also, the uploading tool will not work except for the users chatting with this Chatbot. Finally, the user can choose to see his link or email files. Each user will get a unique link for a web page and it will be initialized to blank.

How I built it

It is built using AWS, Facebook messenger, and node.js. First, I connected the Facebook page to the application and developed the required functions. Then, I created the ML model end point in Amazon SageMaker, and added policies. After setting up the end point, I developed the functions that will invoke the end point and handled the results. Moreover, I saved the results and developed functions to upload it to the application. Finally, I pluged in the SSL certificates in Amazon certificates manager and used Route 53 to point the domain to the application in order to use Facebook messenger.

Challenges I ran into

It was an exciting experience, but handling the responses from the end point was very challenging. Also, creating a unique link for each user and uploading a web-page was little challenging. Moreover, plugging SSL certificate to use Facebook messenger was a little hard. Finally, the current situation of uncertainty is not encouraging; hope everyone will be safe!

Accomplishments that I'm proud of

First, I am very proud that I have a working and bug-free application according to the initial design requirements. Moreover, I have learned many new things in few days, and my family and friends are proud of what I did. Finally, I found new exciting ways to magically turn my ideas into action.

What I learned

I learned many new things as I mentioned before. I have learned that APIs and Java Script can build awesome applications. Importantly, I discovered new ways to train ML models and deploy end points very easily. Also, I have learned how to handle promises and responses from end points and how to scale applications.

What's next for Web-Coder Bot

Web-Coder Bot is ready and functioning as what was expected. The next steps could be a better Front-end with nice branding Experience, and add more security. Also, I may consider uploading more than one HTML page in the future and launch some advertising. Finally, I am working on a web-based Website builder that will allow the user to edit his initial HTML in the browser. Once it is ready, it will be deployed after the judging ends.

Built With

+ 108 more
Share this project:

Updates

posted an update

It is not the end of the world! Good Bye and special thanks for everyone who supported and voted for me. I know that many people can't believe how the project didn't win, but all good!! Again, thank you everyone for supporting me.

Log in or sign up for Devpost to join the conversation.