Narrative

Link for demo

Introduction

Remember when reading the newest edition of Tintin or Archies or Tinkle was the highlight of your day? With the writing and publishing trends of comics going down, we are here to save the day with a technological twist.

With Narrative, anyone can express themself creatively and make exciting comics in minutes through voice based commands and a simple UI.

About Narrative

Narrative is a web app where the user can speak/ type a story which will get converted into relevant comic style images where you can also add narrative text boxes and character speech bubbles.

Features

• Speech to Text
• Text to Image
• Cartoonification
• Real time generation
• Eliminates need to know how to draw
• Share on Twitter
• Share on WhatsApp
• Simple UI
• Help mode

Applications

• Artists who relied on drawing and drafting all their content themselves have been suffering huge financial losses since they haven't been able to adapt to the digital trends. This means lesser number of copies sold and wastage of paper. Through our technological twist, the same non-tech-savvy artists will be able to make digital comics.
• Creative youth like us who have ideas but are too lazy to write and pen down their ideas will be able to express themselves better.
• Utilisation of time during COVID- an idle mind is the devil's playground.

Marketing and business model

• We intend to keep the product free for at least a year to ensure we get the marketing we deserve- happy and long lasting user retention is our goal.
• We will charge minor subscription fees after a month's free trial (Freemium model) to keep the servers running.
• Major source of our revenue will be by running advertisements on our site.

How it works

1. JavaScript Web Speech API for audio transcription (default with HTML5)
2. The transcribed or written text is searched for relevant images using the Custom Search API in GCP and an image is returned to user which can be used as the comic background
3. Since we get human like images, we cartoonify the images using OpenCV
4. The core functionalities like adding bubbles or text-boxes or headings or sharing are done through Vanilla JS and jQuery.

Tech Stack

• Front-end: HTML, CSS, JavaScript, jQuery
• Back-end: Django with PostgreSQL
• Design and PPT: AdobeXD
• Deployment: Heroku and Netlify
• Image API: Custom Search API on Google Cloud Platform and Custom Search Engine on cse.google.com/cse/all
• Cartoonification: OpenCV

Requirements

The source code of this project is written in HTML/CSS/JS. So, you do not require anything extra to run this project.

Instructions to run front-end

Extract the folder and run index.html

Instructions to run back-end

$ git clone https://github.com/akshatvg/Narrative
$ cd Narrative
$ pip3 install -r requirements.txt
$ python3 manage.py runserver

Contributors

• Akshat Gupta
• Sai Sandeep
• Muskan Tewari
• Nishi Jain

Need help?

Feel free to contact me via Facebook.

Invite me to connect on LinkedIn.

 _____ _                 _     __   __            
|_   _| |               | |    \ \ / /            
  | | | |__   __ _ _ __ | | __  \ V /___  _   _   
  | | | '_ \ / _` | '_ \| |/ /   \ // _ \| | | |  
  | | | | | | (_| | | | |   <    | | (_) | |_| |  
  \_/ |_| |_|\__,_|_| |_|_|\_\   \_/\___/ \__,_|  
                                                  
                                                  
______                                            
|  ___|                                           
| |_ ___  _ __                                    
|  _/ _ \| '__|                                   
| || (_) | |                                      
\_| \___/|_|                                      
                                                  
                                                  
______      _               _   _               _ 
| ___ \    (_)             | | | |             | |
| |_/ / ___ _ _ __   __ _  | |_| | ___ _ __ ___| |
| ___ \/ _ \ | '_ \ / _` | |  _  |/ _ \ '__/ _ \ |
| |_/ /  __/ | | | | (_| | | | | |  __/ | |  __/_|
\____/ \___|_|_| |_|\__, | \_| |_/\___|_|  \___(_)
                     __/ |                        
                    |___/                         

 

License

MIT © Akshat Gupta

---

if (youEnjoyed) {
    starThisRepository();
}

---