# Generative AI Audio with Audiocraft 2 – Audiogen Frontend

In this continuation of the generative audio with audiocraft series, we'll integrate a front end and backend interface so users can submit descriptions of sound files they want to hear and then download them.

Starting Code: https://github.com/heaversm/audiocraft-tutorials/tree/tutorials/02-audiogen-params Ending Code: https://github.com/heaversm/audiocraft-tutorials/tree/tutorials/03-audiogen-flask

About Me: I am a Staff Design Technologist on Mozilla's Innovation Team. All opinions and explorations are my own. Learn more about Mozilla Innovation at future.mozilla.org

0:00 - overview 2:00 - setting up our backend with Flask 4:55 - routing to an html frontend from Flask 6:45 - setting up our backend to be able to accept data from the front end and return results 9:45 - setting up a form on the front end to pass in audio descriptions to generate 10:45 - writing the front end javascript to submit that data to our backend route, and display the results from the backend. 13:10 - testing our working app 14:55 - configuring the backend to deliver downloadable generated audio files 17:30 - debugging errors

20:45 - wrapup and next steps: implementing a simpler interface with Gradio

- Kind: Short
- Year: 2023
- Runtime: 21 min
- By: Practical AI through Prototypes
- Genres: Music
- Archive: [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Generative_AI_Audio_with_Audiocraft_2_%E2%80%93_Audiogen_Frontend.webm)
- Licence or status: [CC BY 3.0](https://creativecommons.org/licenses/by/3.0) (as the archive states it)
- Credit: Practical AI through Prototypes
- Who can watch: Tweens profiles and older (the archive gives no rating; placed by Invisible Network from its collection and subjects)

[Watch now](https://invisiblenetwork.ai/watch/archive/commons/152523560?play=1)