Inspiration
The core inspiration behind Ai Story Generator was to tackle the common challenge of writer's block and make creative writing more accessible. Many people have fascinating story ideas but struggle to flesh them out. I wanted to create a tool that leverages the power of AI to instantly transform a simple concept or prompt into a tangible narrative, providing a starting point, inspiration, or even a complete short story, free and without the barrier of registration.
What it does
Ai Story Generator takes a user's story idea as input through a simple text area. Users can optionally refine their request using advanced options like specifying character details, story setting, desired length, genre (from a wide selection like Fantasy, Sci-Fi, Romance, etc.), narrative perspective, target age group, and output language. Upon clicking "Generate Story", the tool sends this information to a backend AI, which processes the request and generates a unique story. The resulting narrative is then displayed directly on the page, with options to copy the text or download it as an HTML file.
How I built it
The frontend is built as a Single Page Application (SPA) using Vue 3 with the Composition API and TypeScript for better code organization and type safety. Vite serves as the fast build tool and development server.
- UI: I utilized the Element Plus component library to create a clean, responsive, and modern user interface with features like input fields, dropdowns, buttons, loading indicators, and the collapsible advanced options panel. Custom CSS provides the dark theme and specific styling.
- Routing: Vue Router handles navigation (although the primary functionality is on the home page, it allows for potential expansion, like the Settings page).
- State Management: Pinia manages the user authentication state and potentially other global states like user points.
- API Interaction: Axios is used to communicate with the custom backend API endpoint (
/api/file/stringStoryData), sending the user's input and receiving the generated story. Proper loading states (converting, previewLoading) and error handling are implemented.
- Internationalization: Vue I18n is integrated to support multiple languages (like English, Chinese, Spanish etc.), allowing users to switch the interface language dynamically.
- Backend: (While the code isn't shown) The frontend connects to a custom backend service responsible for interfacing with the AI model, processing the consolidated input, and returning the generated story string.
Challenges I ran into
- API Integration: Ensuring the data consolidation from various inputs (text areas, dropdowns) into a single
content field for the API was structured correctly and handling the asynchronous nature of the API call (managing loading states and potential errors) required careful implementation.
- UI Complexity: Designing the advanced options section to be user-friendly and collapsible while incorporating numerous dropdowns and text areas needed thoughtful layout (using grids) and state management for the toggle.
- Result Display: Initially deciding between rendering the HTML result in an iframe vs. directly in a div (
directDisplay) and ensuring the styles were applied correctly within the preview area required adjustments. Handling potential complexities or inconsistencies in the AI-generated HTML also needed consideration.
- Internationalization: Setting up Vue I18n and ensuring all relevant text labels (including dynamic ones for dropdown options used in the combined prompt) were properly translated took effort.
Accomplishments that I'm proud of
- Successfully creating a fully functional web application that integrates with an AI backend to generate creative content.
- Implementing a comprehensive set of advanced options that give users significant control over the story generation process, enhancing the tool's utility.
- Making the core functionality free and accessible without requiring user registration, lowering the barrier to entry.
- Building a clean, intuitive, and responsive user interface using Element Plus and custom styling.
- Integrating internationalization to make the tool accessible to a wider audience.
What I learned
- Deepened my understanding of Vue 3's Composition API and TypeScript for building scalable frontend applications.
- Gained practical experience in integrating third-party APIs (the AI backend) and handling asynchronous data flow effectively.
- Learned more about structuring complex forms and managing UI state, particularly with collapsible sections and dynamic content.
- Improved my skills in using component libraries like Element Plus and customizing their appearance.
- Got hands-on experience with setting up and managing internationalization using Vue I18n.
What's next for Ai Story Generator
- Enhanced AI: Explore integrating more advanced AI models or techniques for higher quality and more diverse story generation.
- More Granular Control: Add options for controlling plot structure, character arcs, or tone more specifically.
- User Accounts & Saving: Implement user accounts to allow saving generated stories, managing prompts, and tracking usage history.
- Image Generation: Potentially add a feature to generate cover images or illustrations based on the generated story content.
- Community Features: Allow users to share their favorite generated stories or prompts.
- Expand Options: Add even more genres, languages, or stylistic choices based on user feedback.
- Real-time Generation: Investigate streaming the story output as it's being generated for a more interactive experience.
