Visual Story-Writing – an AI writing tool for visually constructing stories

What is Visual Story-Writing？

Visual Story-Writing is an innovative AI writing tool that helps users construct and edit stories through a visual interface. Using GPT-4o technology, the tool automatically parses text into visual structures of events, characters, and actions, allowing users to adjust story elements via drag-and-drop. It supports timeline playback and character connections to generate dialogues, enabling dynamic story creation. Developed with TypeScript, React, and Vite, Visual Story-Writing can run locally, ensuring security and ease of use, making it ideal for novelists, screenwriters, and game designers.

Key Features of Visual Story-Writing

• Automatic Parsing: Automatically splits text into events, characters, and actions, generating a visual structure.

• Timeline Playback: Hover over elements to clearly review event sequences and character interactions.

• What-You-See-Is-What-You-Edit: Drag characters or rearrange events, with the system suggesting text edits in real time to maintain story coherence.

• Dialogue Generation: Connecting characters automatically generates dialogue and adjusts plotlines, making story creation as intuitive as assembling a puzzle.

• Secure Local Operation: Built with TypeScript, React, and Vite, runs locally with OpenAI API calls only, without storing keys.

Technical Principles of Visual Story-Writing

• GPT-4o: Extracts information from text and provides editing suggestions using advanced natural language processing.

• React & Vite: Modern frontend tech stack ensures a smooth and responsive user interface.

• TypeScript: Strongly-typed language improves code quality and maintainability.

• OpenAI API: Calls OpenAI models for text generation and editing suggestions.

Project Links

• GitHub Repository: https://github.com/m-damien/VisualStoryWriting

• Online Demo: http://damienmasson.com/VisualStoryWriting/

Application Scenarios of Visual Story-Writing

• Novel Writing: Novelists can visually organize plots and character development, improving writing efficiency.

• Screenwriting: Screenwriters can adjust story structure through drag-and-drop and event rearrangement to ensure coherence and engagement.

• Game Design: Game designers can plan storylines and character interactions to enhance player immersion.

• Educational Tool: Teachers can use it as an aid to help students understand and create literary works visually.

• Brainstorming: Creative teams can quickly iterate on story ideas and plot developments.