Manga Personality

• 

  Example Question

• 

  Example Panel

Inspiration

• The open-ended theme for this hackathon really allowed us to explore creative ways to express our interests while being engaging and shareable. Since we both had a shared interest in Manga and comics we decided to center our idea around that, combining our personalities with a type of storytelling we enjoy.

What it does

Manga Personality represents you as a person in the form of a manga story, and also evaluates the type of person you are. The user would first do a short 5 question personality quiz with ranking and multiple choice questions, and our API will determine their different personality traits, and center the protagonist and events of the story around that. The story is told in 4 different panels with a summary of the story to the right of the panel.

How we built it

Manga Personality was developed using a React frontend (Vite) and Node.js/Express backend, with the frontend responsible for the quiz, UI logic, and manga reader and the backend responsible for API calls and any additional features, such as text-to-speech. This project uses an AI pipeline to generate stories and images separately using OpenAI APIs, enabling easy customization or debugging of each stage independently. The project source code is well organized, divided into modules for UI components, AI logic, and static content, including quizzes.

Challenges we ran into

One of the main challenges we ran into was the image generation speed. At first, the image generation was really slow as we were trying to generate 5-6 separate images. However, we fixed this by trying many different models from Open-AI's API, and settling on the best model that balances both speed and quality of images. Another problem we ran into early on was trying to integrate text to speech for each panel. This caused many issues, as we had to use two different API's, which not only complicated things, but also slowed down the time of the story generation. To fix this, we decided that instead of a text to speech feature that is hard to understand in loud environments, we would add another special feature, which was having another Open-AI model analyze the generated image and quickly place textboxes in appropriate places on the panel. This way, we enhance the overall story by making it more engaging and easier to understand without compromising speed.

Accomplishments that we're proud of

One accomplishment we are proud of is how we structured our model pipeline using a single API. The exact models we used are GPT-5.1 mini for generating the story, DALL-E 3 for image generation, and GPT-4o mini to visualize the image and place speech bubbles in proper places. This separation allowed each part of the system to do its job well while still working together smoothly. By keeping everything within one API, we simplified our code and made the overall workflow more efficient and reliable.

What we learned

Through this experience, we learned how to optimize the use of different API models, and create an efficient workflow. We also learned a lot about prompt engineering, especially how small wording changes can affect the way we communicate with different models for the most consistent results.

What's next for Manga Personality

The next step for improving Manga Personality is to create and train our own AI models to do the tasks of manga panel generation, and story generation. By accessing large databases of manga and short stories, we can optimize our AI models specifically for Manga Personality, leading to a more accurate depiction of manga art and intended tone. By doing this, we can also commercialize Manga Personality, introducing a unique tool into the market of both manga, storytelling, and personalized creative content generation.

Built With

• api
• css
• dall-e
• openai
• react
• tailwind
• vite