Building an AI Text Adventure Generator Web Application: Creating Interactive Stories from Images Using Next.js, Python, and Local LLMs with Ollama Integration

Complete technical guide for developing an AI-powered text adventure generator that creates interactive stories from user-uploaded images using Next.js frontend, Python backend, and local LLM integration via Ollama for multimodal content generation.

Next.jsPythonOllamaAI Text GenerationInteractive FictionWebSocketNetlifyLLaVAStory Creation

Image

Text Adventure Generator Web Application

https://github.com/kliewerdaniel/textadventure07

This is a web application that allows users to generate interactive text adventures from images. The application uses Next.js for the frontend and integrates with a Python script for generating the text adventures.

Features

  • Image Upload: Upload one or more images to generate your adventure
  • Customization Options: Adjust parameters like narrative style, temperature, and story length
  • Interactive Results: View the generated adventure with interactive choices

Getting Started

Prerequisites

  • Node.js 18.0.0 or later
  • Python 3.8 or later
  • Ollama (for running local AI models)

Installation

  1. Clone the repository:

    git clone https://github.com/kliewerdaniel/textadventure07.git
cd textadventure07

  2. Install Python dependencies:

    pip install -r requirements.txt

  3. Install Node.js dependencies:

    cd text-adventure-web
npm install

Running the Application

  1. Start the development server:

    npm run dev

  2. Open http://localhost:3000/app in your browser to see the application.

    Important: Make sure to access the /app route to avoid hydration issues.

Deployment

This application is configured for deployment on Netlify:

  1. Push your code to a GitHub repository.

  2. Connect your repository to Netlify:

    • Sign in to Netlify
    • Click "New site from Git"
    • Select your repository
    • Configure build settings:
      • Build command: npm run build
      • Publish directory: .next

  3. Configure environment variables in Netlify:

    • Set any required environment variables for your Python script

Project Structure

  • text-adventure-web/: Next.js web application

    • src/app/: Application source code
      • api/: API routes for handling requests
      • app/: Client-side only application route
      • components/: React components
      • utils/: Utility functions
    • public/: Static assets

  • main.py: Python script for generating text adventures

  • requirements.txt: Python dependencies

How It Works

  1. Users upload images through the web interface
  2. The application sends the images to the API
  3. The API executes the Python script with the provided parameters
  4. The Python script generates a text adventure based on the images
  5. The results are returned to the web interface for display