Web Verse

Choose your Comic Adventure

Comment

Inspiration

Took UI inspiration from HackUTA7 theme: Spider-Man: Across the Spider-Verse

Wanted to create something fun, interactive & functional

Combined cutting-edge AI with classic comic book storytelling

Goal: Make everyone feel like they're creating their own Verse!

What it does

✅ Dynamic Comic Generation: Multiple AI agents(Writer, illustrator, image generator and director) handled by Agentuity. AI agents help to maintain the webverse and the same comic style

graph TD
    A[AI Agent Director] -->|Controls & Coordinates| B[Writer AI]
    A -->|Controls & Coordinates| C[Illustrator AI]
    A -->|Controls & Coordinates| D[Image Generator AI]

    B -->|Creates| B1[Story & Dialogue]
    B -->|Creates| B2[Choices]

    B1 -->|Provides Context| C
    B2 -->|Provides Context| C

    C -->|Creates| C1[Panel Descriptions]
    C -->|Defines| C2[Art Style]
    C -->|Defines| C3[Color Theme]
    C -->|Defines| C4[Focus Elements]

    C1 -->|Input to| D
    C2 -->|Input to| D
    C3 -->|Input to| D
    C4 -->|Input to| D

    D -->|Generates| E[Comic Images]
    B1 -->|Text Content| F[Combined Output]
    B2 -->|Interactive Elements| F
    E -->|Visual Content| F

    A -->|Final Orchestration| F

✅ Dialogue and Image Generation: Gemini 2.5 flash API for dialogue generation and Nano-Banana for image generation

✅ Realistic Voice Narration: ElevenLabs API brings characters to life with professional voice acting

✅ Multiple Panel Support: Create comics with multiple panels

How we built it

Frontend:

Pure HTML/CSS/JavaScript for maximum compatibility Custom Spider-Verse design with: Glitch animations and chromatic aberration effects

Halftone dot overlays for comic book texture

Dynamic POW/BAM sound effects on clicks

Responsive grid layout for comic panels

Also used agentuity for backend integration

Google Fonts: Bangers, Permanent Marker, Comic Neue for authentic comic feel

Backend:

created js code for backend

RESTful API design with multiple endpoints

CORS enabled for secure cross-origin requests used agentuity

AI Integration:

Gemini 2.0 Flash Exp: Story and dialogue generation

Gemini 2.5 Flash Image(Nano-Banana): AI image generation

ElevenLabs API: High-quality text-to-speech narration

Challenges we ran into

Technical Challenges:

❌ Gemini Image API Quota Limits: Hit many errors due to quota restrictions on gemini-2.5-flash-image

❌ API Model Deprecation: gemini-pro was deprecated, had to migrate to gemini-2.0-flash-exp

❌ PowerShell Execution Policy: Windows security blocked npm scripts initially

❌ Base64 Image Handling: Managing large image payloads (50MB+ limit needed)

❌ Response Structure Parsing: Extracting inlineData from complex Gemini responses

Design Challenges:

🎨 Balancing visual impact vs readability

🎨 Creating authentic comic book aesthetics with pure CSS

🎨 Making glitch effects performant without lag

Accomplishments that we're proud of

✅ Built a full-stack application from scratch in limited time

✅ Successfully integrated multiple different AI APIs

✅ Created a secure backend architecture with proper API key management

✅ Implemented real-time comic generation with smooth UX

✅ By being in contention for 4 different prize criteria of the hackathon sponsors

What we learned

Technical Skills:

💡 API Integration: Working with multiple AI APIs and handling rate limits

💡 Node.js Backend: Building RESTful APIs with Express

💡 Async JavaScript: Managing complex promise chains and API calls

💡 Error Handling: Graceful fallbacks when APIs fail

💡 Base64 Encoding: Efficient binary data transfer over HTTP

AI/ML Learnings:

🤖 Gemini API Ecosystem: Understanding model capabilities and limitations

🤖 Prompt Engineering: Crafting effective prompts for consistent outputs

🤖 Image Generation: Working with response modalities and inlineData

🤖 Voice Synthesis: Text-to-speech parameters and voice customization

Design Learnings:

🎨 Comic Book Design Principles: Typography, halftone patterns, speech bubbles

🎨 Animation Performance: Creating smooth effects without frame drops

🎨 User Experience: Balancing creativity with usability

What's next for Web Verse

We will add the specific narration of every dialogue based on the character in the future to make the user experience better

Built With

Share this project:

Updates