Stream (Home Page)
Uploading Audio Recitations
Editing Stanza Translation
VR Experience (2nd Rendering Style)
Poetry has always been a personal and a collective inspiration. The power of spoken word flowing and touching those who listen to it has impacted the world's collective culture for generations. What if we were able to commemorate this collective art as a single collaborative body. Tayyar creates a space where creative artists from around the world can submit their own poetry or poetry from their culture that has inspired them.
What it does
Tayyar is an endless collective poem, composed and recited by multiple artists in a distributed manner. Anyone can go into Tayyar, submit a stanza that touches them and a recitation of it. Tayyar, the Arabic word for a stream or a current, stitches these stanzas together and generates an ongoing piece of poetry, recited by all and progressing forever.
The main application is a minimalist stream of collective free-verse poetry shared by multiple users in different languages. The stream provides a translation of the poetry created by Google Translate and edited by contributors. The recitation of the poetry is played in the background by the contributors.
We then turned our attention to VR and built a VR experience with the collective poetry recitation playing in the background. Users will be immersed in an environment of changing shapes and colors while the endless poetry is played in the background.
- Site: http://flow-nagare.herokuapp.com/
- Demo Videos: https://www.youtube.com/watch?v=pmWO8eU3BFo&list=PL0gGv4wF8umnM4UTkasz1x3lQEWV1ggvV
- Code: https://github.com/nooralasa/flow
How we built it
We created a web application with a node.js/express backend and an HTML/CSS/JS frontend with handlebars templating. In the frontend, we used material design bootstrap for styling and font awesome's awesome icons. On the client side, we used the browser's built-in audio player to manage the audio. We also leveraged Google Cloud's Translation API to provide an instant translation of the stream. We used the Unreal Engine to build the VR demo.
Challenges we ran into
Accepting files from form data and saving them into the server's file system We wanted to accept user recitation but could not come up with a (free) persistent storage solution in this short span of time. We turned our attention to manipulating the file system and saving the audio files directly on the hosted server as the users upload it. To get this to work, we used mutler, an node.js middleware for handling multipart/form-data and uploading files to a hosted application.
GOOGLE_APPLICATION_CREDENTIALS In order to use google-cloud's translation api, we had to add an environmental variable pointing to a generated key.json file to authenticate our identity. While this works quite well locally, we had to figure out a way of getting our hosted heruko application to access this file, without committing it to the public git repository.
Accomplishments that we're proud of
We were able to create a functioning and hosted web application that conveys our idea. The MVP is functional, well-designed and provides an awesome user experience. We are also very proud of being able to create a VR demo application in a short amount of time to showcase an immersive poetic experience.
What we learned
- How to upload files to a hosted environment
- How to use the Google Cloud API in general, and translation specifically
- How to create a web application with node/express
- How to manage audio in the web and VR.
What's next for Tayyar
We want to add more information about the poems, such as the author, when it was written, and some background context.
For this prototype, we always show the translation in English, but we can also allow that to be configurable using the Google Translate API. Currently, we translate it to English to allow the contributor to correct the translation, especially since the language of poetry is often flowery and not a direct translation.
We want to create more VR experiences based on 360 kaleidoscopes.