(Please note that the Demo Video Part 1 is my official submisson video, and the Part 2 is an optional extra video that gives more information about the website and Alexa Skill.)

voiceforge.io

I'm Jack Mandelkorn, I'm 17 years old, and I created Voice Forge to revolutionize the web design process.

Inspiration

The first projects I learned to code were websites, and I still develop websites today in my spare time. It occurred to me that custom making and designing websites was taking too much time, and I decided that voice commands could streamline the design process. From that idea, I created Voice Forge.

What it does

Voice Forge is both a website and an Alexa Skill. They work in combination with each other to make a kind of hybrid voice experience, where users can make changes through the website and through the Alexa Skill. Essentially, users can create, delete, duplicate, and style elements using their voice, and can drag and drop them as well as change their content using their computer. I think that using Alexa as a tool to assist users in computer or browser-based tasks maximizes efficiency, and makes design more intuitive and tangible.

While using the Voice Forge Alexa Skill, users can:

  • Create complex elements and element groups (see the components tab on voiceforge.io)
  • Modify any CSS property of an element
  • Delete or duplicate an element
  • Modify the text of an element
  • Undo and redo their previous commands
  • Ask Alexa to "wait" (This will cause Alexa to wait for a while. You wake her by adding "Alexa, " to the beginning of your next command.)

When using the Voice Forge website (voiceforge.io), users can:

  • Browse, search for, and create preset elements
  • Create and save projects
  • Change the title, description, and version of their projects
  • Export their project to an HTML file
  • Make the UI colors neutral (for a neutral design environment)

How I built it

The Voice Forge Alexa Skill's endpoint is hosted on AWS Lambda, and it communicates with the website by modifying pin objects stored in a AWS DynamoDB table. The Voice Forge website is hosted on AWS S3 and is distributed over HTTPS using AWS CloudFront with a AWS Certificate Manager SSL certificate. The website domain is managed using Google Domains, and the website is routed to Google Domains using AWS Route53. All Voice Forge projects are saved as compressed strings on a AWS DynamoDB table, along with the relevant project settings. Voice Forge projects are locked by default, and can only be accessed with the pin number of the project owner. The skill intent schema was built in the JSON editor of the Alexa Skills Kit Developer Dashboard.

This project was entirely designed, programmed, and deployed by me.

Challenges I ran into

I ran into a few challenges establishing the initial connection between Alexa and the voiceforge.io website, and struggled a bit with the AWS-SDK API for DynamoDB. Eventually, I figured it out, and went on to use DynamoDB for the project storage as well.

Accomplishments that I'm proud of

I'm very proud of the versatility of my project. There are hundreds if not thousands of possible elements that one can create, and an uncountable amount of CSS commands one can run. I never imagined that I would get as far as I have gotten, and I can't wait to continue improving Voice Forge. I think that combining voice with web design speeds up the web design process immensely, and that voice-computer hybrid applications need to be further pursued.

What's next for Voice Forge

I'd like to continue work on Voice Forge and integrate it with AWS Cognito so users can have accounts. Though voiceforge.io is already effective as a one page site, I think it would be way better with user accounts.


Getting Started with Voice Forge

If you're just getting started with Voice Forge, get out a computer and make sure you're near your Amazon Echo. Next, open your preferred browser and type in "voiceforge.io" in the address bar. A window will immediately pop up that asks for your pin number, but don't worry- just tell Alexa, "Ask Voice Forge, 'What's my pin'". Type in the 6 digit pin that Alexa reads to you, and you're ready to get started! Here are some commands you can try:

  • "Make a paragraph that says 'Hello World'" (you can replace "Hello World" with any words of your choice)
  • "Make a 30-item list group" ("30" is just an example- you can absolutely do more or less if you want)
  • "Make a display heading" (you can also make display heading 1, 2, 3, 4, 5, and 6, which are all different sized headings)
  • "Make a yellow button" (you can replace "yellow" with one of the 7 main color classes: Blue, red, yellow, green, teal, light gray, and dark gray)

Once you've made an element, you can try styling it! Make sure you've selected an element (you'll see a blue dashed outline around the element if it's selected) and try some of these styling commands:

  • "Set the color to red" (you can replace "red" with virtually any color - there are over 150 color names!)
  • "Set the font size to 40 pixels" (you can replace "40" with any number of your choice)
  • "Set the font family to Arial" (you can replace "Arial" with a supported web font of your choice)

You've now created your first project! Voice Forge will automatically save your project, so don't worry about having to click a save button. You can change all of the information about your project (title, description, URL, etc.) in the "Project Settings" tab on the voiceforge.io website. Happy designing!

Intent Structures in Voice Forge

  • Create - "Create a ___" (e.g. primary button, 5-tab dark navbar, etc.) - Makes a new website element
  • Style - "Set the ___ to ___" (e.g. color to blue, font size to 70 pixels, etc.) - Sets the style of an website element
  • Duplicate - "Duplicate this element" - Duplicates the selected element
  • Delete - "Delete this element" - Deletes the selected element
  • Type - "Type in ____" (e.g. hello world, my text here, etc.) - Set the text of the selected element
  • Pin "What's my pin?" - Reads off a user's 6-digit account pin
  • Undo - "Undo" - Undoes a user's last voice command
  • Redo - "Redo" - Redoes a user's command if a user has previously undone it

(all intent definitions assume you have opened voiceforge.io in your browser and opened the Voice Forge Alexa Skill)


Built With

+ 3 more
Share this project:
×

Updates