mytrip-hokkaido-app

A proof-of-concept Travel Planning app that allows users to create itinerary based on their interests using OpenAI APIs.

The application is built using Next.js 13, powered by the OpenAI API, and supports Japanese language settings (日本語対応).

Application

Type the location and activity you want to do anywhere in Hokkaido and the app will generate the itinerary. Similar previous plans will also be shown as suggestions.

Sample itinerary panel

Closing panel

OpenAI APIs

The app uses several OpenAI APIs (Text Completion and Chat APIs).

Extracting location and activity from user inquiry
Checking whether the location is within Hokkaido
Generating the itinerary based on submitted inquiry

Extracting Location and Activity

Using function call, we define the function,

{
    name: "trip_planner",
    description: "Suggest itinerary plan given a trip description and location.",
    parameters: {
        type: "object",
        properties: {
            location: {
                type: "string",
                description: "The location of the trip, e.g. Hakodate, Sapporo"
            },
            description: {
                type: "string",
                description: "The description of the trip, e.g. day trip, night trip, cherry blossom viewing, hot spring"
            },
            isHokkaido: {
                type: "boolean",
                description: "Set true if the location is located within Hokkaido, false if not located within Hokkaido."
            }
        },
        required: ["location", "isHokkaido"]
    }
}

I added the location validation if the extracted location is found in Hokkaido by adding another parameter in the function thus reducing out API call.

The sample response is

{
  role: 'assistant',
  content: null,
  function_call: {
    name: 'trip_planner',
    arguments: '{\n' +
      '  "location": "Sapporo",\n' +
      '  "description": "day trip",\n' +
      '  "isHokkaido": true,\n' +
      '}'
  }
}

Generating Itinerary

I will be using Chat Completions API, with the following prompts,

const system = `You are a helpful travel planner specializing in Hokkaido, Japan.\n` +
    `You will reply in the following format:\n` +
    `itinerary-name: Trip Name\n` +
    `[welcome-message]\n` +
    `title: welcome message title\n` +
    `content: welcome message text\n` +
    `image: welcome image keyword\n` +
    `[itinerary]\n` +
    `title: itinerary title\n` +
    `content: itinerary message text\n` +
    `image: itinerary image keyword\n` +
    `places: place1, place2\n` +
    `[itinerary]\n` +
    `title: itinerary title\n` +
    `content: itinerary message text\n` +
    `image: itinerary image keyword\n` +
    `places: place1, place2, place3\n` +
    `[itinerary]\n` +
    `title: itinerary title\n` +
    `content: itinerary message text\n` +
    `image: itinerary image keyword\n` +
    `places: place1\n` +
    `[closing-message]\n` +
    `title: closing message title\n` +
    `content: closing message text\n` +
    `places: place1, place2`

const inquiry = `Write a Trip Plan for ${test_decription} in ${test_place}`


let messages = []
messages.push({ role: 'system', content: system })
messages.push({ role: 'user', content: inquiry })
...

By preparing the user inquiry in some fixed format, we are reducing the chance of unexpected prompt.

Images

To generate the images from the itinerary, I will be using another external API. Initially, I was thinking of using Bing Image Search API but decided to Pexels API for ease of use.

To help us to access Pexels API, I will be using their Pexels Node.js library:

npm install pexels

I will be using Pexels API photo search function

import { createClient } from "pexels"

const client = createClient(process.env.PEXELS_API_KEY)

client.photos.search({ query, per_page: 3 }).then((photos) => {
    console.log(photos)
})

Thinking Out Loud

While we have shown that it is possible to generate itinerary on the fly using AI, I think solely relying on AI is not the way forward.

It is still better to prepare such itineraries beforehand and use Embedding API to generate vector data that will be used for later. Another implementation is using external backend or function.

Since we cannot predict what the users will want, there will be cases where the database has no entry for such location/activity. This is where the AI can help to fill the gap.

Setup

Clone the repository and install the dependencies

git clone https://github.com/supershaneski/mytrip-hokkaido-app.git myproject

cd myproject

npm install

Copy .env.example and rename it to .env then edit the OPENAI_API_KEY and PEXELS_API_KEY use your own API keys.

OPENAI_API_KEY=YOUR-OPENAI-API-KEY
PEXELS_API_KEY=YOUR-PEXELS-API-KEY

Then run the app

npm run dev

Open your browser to http://localhost:4000/ to load the application page.

supershaneski / mytrip-hokkaido-app