About the Project
Inspiration
I was frustrated spending hours tweaking slide layouts, hunting for the right metaphor, and sourcing on-brand visuals. I realized presenters need a creative partner—one that thinks in seconds, not days.
What I Learned
- Prompt engineering: Crafting precise instructions so our AI consistently returns valid JSON arrays of metaphors.
- Component design: Structuring reusable React components (MetaphorCarousel, LayoutPicker, ThemeSwitcher) for a seamless UI.
- API integration: Connecting to Google’s Generative AI (Gemini) and handling async flows, rate limits, and error states.
- UX polish: Ensuring responsive slides with no horizontal scroll, accessible color themes, and smooth transitions.
How I Built It
Front-end:
- React + Spectrum Web Components for consistent theming
- Tailwind CSS for utility-first styling
- Framer Motion for subtle animations
Back-end:
- Node.js service wrapping the Google Generative AI SDK
- Redis caching to avoid redundant calls
Workflow:
- User enters a topic
- AI generates 3 metaphors
- User picks one
- AI proposes slide layouts and visual suggestions
- Export to PPTX or live view
Challenges Faced
- Strict output formatting: Training the model to output exactly JSON arrays without extra prose.
- Responsive layout bugs: Eliminating horizontal scroll across diverse screen sizes.
- API rate limits: Implementing retry/back-off strategies to keep the experience snappy.
- Balancing creativity and consistency: Ensuring AI suggestions felt fresh but on-brand for every user.
Log in or sign up for Devpost to join the conversation.