Comic Creator

A React application which utilizes an API to generate 10 comic images from text prompt and creates a strip. The strip of images can be resized and rearranged to download a suitable comic image.

A screenshot of an example comic generation:

Table of Contents

• Tech Stack

• Run Locally

• Development Operations

• Examples

• User Flow

• Author

• Acknowledgements

Tech Stack

To implement the application, the following tech was used:

Backend: Node.js

Frontend: React

Framework: Material UI

Libraries: react-grid-layout, html2canvas

Deployment: gh-pages

CI/CD: Lint, Build, Test and Deploy checks are automated through github workflows. Lint checks and Build checks are conducted on each pull request and on merging to main, the main CI/CD workflow is set up to run tests and deploy to gh-pages.

Run Locally

Clone the project:

Create a local copy of this repository on your machine. You can use github cli/ssh keys as some other options!

  git clone https://github.com/rashmigr01/comic-creator.git

Go to the project directory:

Switch to the installed directory with a simple cd command.

  cd comic-creator

Install dependencies:

Install the necessary dependencies packages to your system with the following command.

  npm install

Run the development server:

To begin a development server execute the below command. This command will start the development server, and you should be able to access your React app at http://localhost:3000 in your web browser. You can stop the sever with Ctrl + C.

  npm start

Build the Production Version:

Optionally, create a production-ready build with this command which generates an optimized and minified build in the build folder.

  npm run build

Deploy:

To deploy to gh-pages, with preset scripts, the following command is useful.

  npm run deploy

However, it is not recommended that you deploy directly without running the workflows setup on github for lint checks and tests.

Development Operations

After the above local installation, you can perform development operations to modify and extend the application.

The application is created using create-react-app. Read more about it here.

During development, you can install packages to use frameworks or libraries using the following command:

  npm install your_package --save-dev

The main code base architecture can be visualized as follows:

The AppLayout along with the two main files of ComicForm and ComicDisplay are responsible for the functionality. Another file of interest is the GenerateComic API call function which is responsible for the text to image generation.

Examples

Here are some comic examples as output by the application:

Comic 1

Comic 2

Comic 3

User Flow

The following steps are part of the user flow on the comic creator:

• Input text prompts for all 10 panels and click on the GENERATE COMIC button to make API calls.

• The progress bar depicts the number of returned API calls out of ten and thus the number of generated images.

• The default comic strip of a vertical layout is created.

• The pictures can be resized and reordered to create a more appealing and suitable comic strip.

• Click on the DOWNLOAD IMAGE button to download a comic_strip.png image of the current strip.

• Repeat the above steps to create more comics.

Author

This comic creator was built by me, @rashmigr01, a senior undergraduate pursuing a B. Tech in CSE at IIT Kanpur. Please feel free to reach out to me with any queries at rashmigr20@iitk.ac.in.

Acknowledgements

This project wouldn't be possible without the wonderful opportunity by DashToon. I have learnt a lot while creating this app about layouts and design!