CineMap is an innovative narrative visualization tool that helps storytellers, game designers, and screenwriters map out complex narratives with AI assistance. It transforms traditional narrative planning into an intuitive visual experience, allowing you to:
- Generate story flowcharts and character arcs using AI
- Visualize narrative structure with interactive node-based diagrams
- Collaborate with AI to develop characters and plotlines
- Export your narratives for use in games, films, or other media
Click to see screenshots
- React 18 with TypeScript
- ReactFlow for interactive node diagrams
- GSAP for animations
- TailwindCSS for styling
- React Router for navigation
- Django REST framework
- Google Gemini API for AI story generation
- Whisper for audio transcription
- Mermaid.js for flowchart generation
- Frontend: Vercel
- Backend: Railway
- Node.js 18+
- Python 3.11+
- Google Gemini API key
# Clone the repository
git clone https://github.com/jonathanywang/cinemap.git
cd cinemap
# Install frontend dependencies
cd stubby-fe
npm install
# Start frontend development server
npm start# Navigate to backend directory
cd ../plot-ai/backend/plot-backend
# Create a virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Set up environment variables
echo "GEMINI_API_KEY=your_gemini_api_key_here" > .env
echo "DEBUG=True" >> .env
echo "SECRET_KEY=your_secret_key_here" >> .env
# Run migrations
python manage.py migrate
# Start the development server
python manage.py runserver-
Create a New Story
- Start with a basic premise or genre
- The AI will guide you through initial worldbuilding
-
Develop Characters
- Add character profiles with traits, goals, and flaws
- Generate character arcs that show emotional development
-
Build Story Structure
- Visualize your three-act structure
- Add key plot points and branch narratives
- Connect nodes to show relationships between scenes
-
Refine with AI Assistance
- Chat with the AI to brainstorm plot solutions
- Generate alternative scene outcomes
- Identify plot holes and inconsistencies
-
Export Your Work
- Save as structured data for game engines
- Export as visual diagrams for presentations
- Generate script outlines for screenwriting
- Interactive Story Flowcharts: Visualize your narrative with draggable nodes and connections
- Character Arc Tracking: Plot emotional journeys and character development
- AI Story Assistant: Get suggestions and feedback on your narrative
- Voice Input: Speak your ideas and have them transcribed
- Multi-format Export: Use your story in games, films, or other media
- Collaborative Storytelling: Work with AI to overcome creative blocks
View our project presentation to learn more about CineMap's development journey and vision.
This project is licensed under the MIT License - see the LICENSE file for details.
- Built during BigRedHacks hackathon