Загрузка Travel - Загрузка исходного кода Travel

Travel

AI Исходный код

1.0.0

Скачать

Гитхаб: https://github.com/mohdjami/Travel

Развернутая ссылка: https://travelplanai.vercel.app/

Видео YT: https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJApq

Архитектура и поток приложений

На диаграмме выше представлен общий обзор приложения, услуг и решений.

Я использовал Next.js, Supabase, модель Gemini-1.5-flash, Shadcn, Typescript и Tailwind CSS.

Зарегистрируйте свою учетную запись на https://travel-three-lovat.vercel.app/signup.
Вы войдете в систему и будете перенаправлены на страницу /Itinerary.
Каждый пользователь получает 5 кредитов, поскольку у меня также есть ограниченное количество токенов от Gemini API.
Заполните форму «Маршрут путешествия» и нажмите кнопку «Создать».
Это займет несколько секунд, на Backend будет отправлен запрос с данными пользовательских настроек.
Обработчик маршрута создает пользовательские настройки дБ, создает персонализированную подсказку.
Подсказка отправляется в модель Близнецов и получен ответ.
После получения ответа он уточняется, очищается и анализируется в JSON.
Затем ответ сохраняется в базе данных и отправляется обратно Клиенту.
Fronted использует API Leaflet Maps для отображения местоположения каждого действия.
Бинго!! Маршрут путешествия готов к загрузке в формате PDF или TXT.
Вы можете перейти на панель управления для управления и просмотра последних маршрутов.

Схема ERDiagram

Детали реализации

Я разделил приложение на эти модули.

Аутентификация и авторизация

Используется Supabase для аутентификации и авторизации пользователей.
Почему Supabase для аутентификации и хранения данных?
1. Все в одном месте: аутентификация, хранилище, база данных.
2. Supabase построена на основе PostgreSQL и предлагает надежную и многофункциональную систему баз данных, которая позволяет писать необработанные SQL-запросы для создания таблиц, политик RLS и разрешений GRANT.
3. Отличный опыт разработчика.
Гитхаб
1. Создал приложение OAuth в Github и интегрировал его в базу данных.
2. В файле auth/callback/route.ts, где происходит обмен кодом для аутентификации, в базе данных создается новый пользователь.
Реквизиты для входа
1. Пользователь создает учетную запись.
2. Пользователь создается в службе аутентификации.
3. Новый пользователь добавляется в таблицу «Пользователи» в Supabase.

Генерация маршрута

Здесь мы использовали модель Google Gemini-1.5-flash.

Next.js для создания полнофункционального приложения.

Next.js — отличный выбор благодаря серверному рендерингу, генерации статического сайта и SEO.

Почему Next.js?

API Routes упростили создание конечных точек для приложения.
Маршрутизация на основе файлов расширяет возможности разработчиков.
Такие библиотеки, как Shadcn и Tailwind, экономят много времени и создают цельный пользовательский интерфейс.
Первоклассная поддержка TypeScript без дополнительной настройки, которой нет в Node.js.
Быстрое и простое развертывание.
Для проекта, требующего рендеринга на стороне сервера, маршрутов API и масштабируемости, Next.js предоставляет надежное, производительное и удобное для разработчиков решение. Его интеграция с React, встроенные оптимизации и сильная поддержка сообщества делают его привлекательным выбором для современной веб-разработки.

Форма маршрута путешествия

После получения пользовательских настроек из формы маршрута на сервер отправляется запрос со всеми данными.

Показать маршрут

Маршрут затем используется в компонентах для отображения данных. Я также интегрировал карты из буклета.

Близнецы-1,5-вспышка

Gemini-1.5-flash — это усовершенствованная модель искусственного интеллекта, разработанная Google, которая обеспечивает создание маршрута в нашем приложении. Эта модель превосходно справляется с пониманием сложных туристических предпочтений и созданием подробных персонализированных маршрутов. Используя Gemini-1.5-flash, мы можем создавать индивидуальные планы поездок, учитывающие такие факторы, как бюджетные ограничения, личные интересы и продолжительность поездки.

Почему я использовал искусственный интеллект вместо того, чтобы вручную выполнять вызовы API для получения данных о местоположении?

Он предлагает несколько ключевых преимуществ для нашего приложения для составления маршрутов путешествий. Во-первых, создание маршрутов с помощью искусственного интеллекта может обрабатывать огромные объемы данных о пунктах назначения, достопримечательностях и предпочтениях пользователей гораздо быстрее и эффективнее, чем ручные методы. Во-вторых, он позволяет давать высоко персонализированные рекомендации, которые можно адаптировать к уникальным интересам и ограничениям каждого пользователя. Наконец, ИИ может постоянно учиться и улучшать свои предложения на основе отзывов пользователей и тенденций в сфере путешествий, гарантируя, что наше приложение останется актуальным и ценным для путешественников.

Интеграция листовок с картами

Leaflet — это библиотека JavaScript с открытым исходным кодом для интерактивных карт, удобных для мобильных устройств. Чтобы интегрировать карты Leaflet в наше приложение для составления маршрутов путешествий, мы выполнили следующие ключевые шаги:

Установлен пакет Leaflet и его оболочка React.
Создан компонент динамической карты для обработки рендеринга на стороне клиента.
Реализованы маркеры для каждого места активности на маршруте.

Включив карты-листовки, я улучшил взаимодействие с пользователем, предоставив визуальный контекст для каждого пункта назначения и действия в сгенерированных маршрутах.

Я также столкнулся с проблемой с листовкой, которая заключалась в том, что компонент карты не загружался на 100%, что приводило к ошибкам и страница не загружалась должным образом. Поэтому я решил эту проблему с помощью этого решения.

Дополнительные возможности:

Кредитная система

Чтобы улучшить взаимодействие с пользователем и управлять использованием API, я внедрил систему, основанную на кредитах. Вот как это работает:

Новые пользователи получают 5 бесплатных кредитов при регистрации.
Каждое поколение маршрута потребляет 1 кредит.
Пользователи могут приобретать дополнительные кредиты по мере необходимости (реализовать в будущем).

Эта система позволяет нам контролировать затраты на API, предоставляя пользователям гибкость в использовании сервиса.

Панель управления

Панель мониторинга предоставляет пользователям обзор созданных ими маршрутов, оставшихся кредитов и информацию об учетной записи. Ключевые особенности включают в себя:

Список последних маршрутов.
Отображение кредитного баланса и возможность приобрести больше кредитов

Профиль пользователя и настройки

Раздел «Профиль пользователя и настройки» позволяет пользователям настраивать свой опыт и управлять информацией своей учетной записи. К основным особенностям этого раздела относятся:

В настоящее время пользователи могут обновлять только имя пользователя.
В будущем я смогу реализовать загрузку электронной почты, пароля и изображений.

Ксташ

Для увеличения времени отклика при генерации Itineray я реализовал систему очередей.

Обработал все некритические задачи с использованием очереди.

Возникла новая проблема

Несмотря на то, что после создания маршрутов возникает ошибка, должен быть резервный механизм. В настоящее время, если в базе данных есть какие-либо ошибки при подаче данных, не существует резервного механизма, из-за которого маршрут теряется, и его необходимо исправить.

На данный момент я отключил политики RLS. буду работать над этим

Будущие улучшения

Проблема:

Создание маршрута путешествия занимает много времени.

Он содержит несколько процессов:

Получение пользовательских настроек и создание таблицы в базе данных.
Получите текущего вошедшего в систему пользователя.
Создание персонализированного приглашения и отправка его в модель Gemini AI.
Получение ответа, его адаптация, синтаксический анализ ответа в формате JSON, поскольку я сохраняю ответ JSON непосредственно в базе данных.
Обновление кредитов пользователь оставил.
Отправка ответа обратно.

Решение:

Тщательно проанализировав маршрут, я могу понять, что вставка пользовательских настроек, вставка ответа и обновление кредитов не являются критическими задачами, а отправка ответа пользователю является основной важной задачей.

Таким образом, я могу выполнять эти некритические задачи асинхронно, используя очередь.

Этот асинхронный подход может значительно сократить время отклика.

Кэширование

Внедрение механизма кэширования может значительно улучшить производительность и время отклика нашего приложения для составления маршрута путешествия. Кэшируя часто используемые данные, такие как популярные направления или общие предпочтения пользователей, мы можем снизить нагрузку на наши серверы и быстрее предоставлять пользователям результаты. Это может быть особенно полезно для постоянных пользователей или для отображения первоначальных рекомендаций во время создания более персонализированных результатов.

Я сделаю это для информационной панели, я буду кэшировать недавно посещенные маршруты путешествий, что уменьшит количество запросов к базе данных, что в конечном итоге сделает приложение быстрее.