ai outpainting com
1.0.0
https://www.ai-outpainting.com
Домашняя страница 
Страница цен 
Список блогов 
Редактирование изображений 
1. Веб-сайт расширения изображений AI, разработанный на основе nextjs 14 и Tailwindcss3, адрес сайта: https://www.ai-outpainting.com/
2. Веб-сайт необходимо использовать с внутренней моделью искусственного интеллекта. Серверную модель необходимо построить самостоятельно.
Адрес модели: https://huggingface.co/spaces/fffiloni/diffusers-image-outpaint
3. Интернационализация реализуется с помощью lingui. Преимущество этого метода по сравнению с next-intl заключается в том, что нет необходимости генерировать ключ для каждой копии. Копия будет извлечена с помощью команд для создания многоязычных файлов. Затем выполните перевод на основе многоязычных файлов.
4. В рамках проекта написано несколько автоматизированных сценариев, таких как автоматический перевод международного контента и автоматический перевод контента блога. При необходимости их необходимо запускать вручную.
5. Проект использует базу данных, хранилище Cloudfare R2, параметры, необходимые для входа в Google, и параметры оплаты PayPal. Эти параметры настраиваются в файлах .env и .env.production.
6. Используйте next-auth для интеграции входа в Google. Если вам необходимо войти в систему с помощью Google во время локальной разработки, вам необходимо изменить исходный код, иначе будет сообщено об ошибке. Пожалуйста, смотрите описание ниже для конкретных модификаций.
7. Интегрированная оплата через PayPal и Stripe. Среда песочницы используется для локальной разработки. Для формальной среды формальные параметры PayPal необходимо настроить в файле .env.production.
8. То, как текущий проект называет модель ИИ, примерно следующее:
Загрузите результаты обработки в хранилище Cloudfare R2 и вызовите адрес обратного вызова обновления статуса заказа текущего веб-сайта.
Результаты обработки одновременно отправляются в очередь MQ и передаются во внешний интерфейс службой диспетчера очередей MQ. После того как внешний интерфейс получает результаты обработки, результаты отображаются на интерфейсной странице.
Фронтенд инициирует запрос на создание заказа, переносит номер заказа и текущий адрес обратного вызова для обновления статуса заказа на веб-сайте, а также вызывает службу диспетчера очередей MQ (это микросервис, разработанный на Python, и у меня нет времени разбираться с код на данный момент)
Инициируйте запрос SSE к серверной части службы управления очередями MQ, продолжайте ждать завершения службы диспетчера очередей MQ и верните результат.
После получения запроса серверная служба диспетчера очередей MQ напрямую отправляет информацию о заказе в очередь MQ.
Сервер GPU прослушивает очередь MQ. После получения информации о заказе он начинает вызывать модель AI для обработки. После завершения обработки он выполняет две вещи:
Весь процесс не требует прямой связи между веб-сайтом и сервером графического процессора. Он пересылается через службу диспетчера очередей MQ, а файлы передаются через хранилище R2. Это решает проблему связи между сервером графического процессора и веб-сайтом. Объем заказа слишком велик, графический процессор можно добавить в любой момент. Сервер не требует каких-либо корректировок на сайте.
9. Общая схема архитектуры выглядит следующим образом: 
10.Другое решение по реализации
Загрузите результаты обработки в хранилище Cloudfare R2 и вызовите адрес обратного вызова обновления статуса заказа текущего веб-сайта, чтобы обновить статус заказа.
После того как внешний интерфейс создает заказ, страница постоянно проверяет статус заказа посредством опроса, пока заказ не будет выполнен.
На серверной стороне есть другие программы, которые регулярно сканируют базу данных и получают заказы со статусом ожидания. После получения информации о заказе они начинают вызывать модель AI для обработки. После завершения обработки происходят две вещи. быть сделано:
11. Если у вас есть бюджет, вы также можете рассмотреть возможность использования службы API runpod напрямую. Вам не нужно самостоятельно внедрять сервер диспетчера очередей MQ, просто интегрируйте его SDK.
Справочный код
import runpodSdk, { EndpointCompletedOutput, EndpointIncompleteOutput } из функции 'runpod-sdk'async fetchProcessByRunPod(data: Any): Promise<EndpointIncompleteOutput> {
// const serverUrl = `${UE_PROCESS_API}/create_docker`
// https://docs.runpod.io/serverless/endpoints/job-operations
const runpod = runpodSdk("N5Jxxxxxxxxxxxxx");
const endpoint = runpod.endpoint("1zgk5xi3ew77pv");
console.log("начать вызов конечной точки runpod,data:",data)
вернуть конечную точку?.run({"вход": данные,
})}Если вам необходимо полностью использовать функцию расширения изображения AI в текущем исходном коде проекта, вам необходимо выбрать решение, как описано выше, и доработать логику создания заказов и мониторинга статуса заказов в файле app/[lang]/(editor )/editor/view.tsx файл! ! !
Каждый раз, когда вы изменяете страницу для добавления нового контента, вам необходимо выполнить команду yarn extract , чтобы извлечь новую копию в международный файл, и выполнить команду yarn translate чтобы перевести копию на соответствующий язык.
Если в блоге есть новые статьи, вам необходимо выполнить команду yarn translate , чтобы перевести новый контент блога на соответствующий язык.
Перевод включает вызов API. Сначала вам необходимо подать заявку на ключ API, а затем изменить ключ API в файле scripts/openai-chat.js.
Если вам нужно добавить или уменьшить многоязычный контент, вам необходимо изменить эти три файла: framework/locale/locale.ts framework/locale/localeConfig.js framework/locale/messagesLoader.ts
Непосредственно используйте команду node scripts/generator-website.js для создания контента веб-сайта (эта команда будет генерировать заголовки копирайтинга, TDK и блогов, связанные с указанными ключевыми словами).
Сначала вам необходимо изменить ключевые слова и описание, а затем выполнить команду
// Ключевое слово веб-сайта const ключевое слово = 'расширить изображение ai' // Веб-сайт должен быть описан const описание = 'Использовать технологию искусственного интеллекта для расширения изображения, гарантируя при этом, что исходное изображение остается неизменным, расширять окружающий контент и поддерживать непрерывность контента с исходным изображением.
Измените информацию о конфигурации в config/site.ts.
Поместите свой собственный логотип favicon.ico в каталог public/ и напрямую замените исходный файл.
Измените имя домена в файле public/sitemap.xml.
Измените информацию о конфигурации в .env и .env.production. Конкретные требования к модификации см. в комментариях.
В текущем проекте в качестве платформы ORM используется призма. Структура таблицы объявлена в файле Schema.prisma. Чтобы использовать ее в первый раз, вам необходимо выполнить следующую команду.
// Эта команда сгенерирует таблицу базы данных на основе объявления структуры таблицы и инициализирует данные таблицы. Если есть новые обновления полей таблицы, вам необходимо выполнить текущую команду Yarn pg:migrate. // Для других команд работы рекомендуется непосредственно прочитать официальную документацию Prisma.
Информация о соответствии цветов веб-сайта хранится в файле Tailwind.config.ts. Если вам нужно изменить соответствие цветов, измените содержимое файла Tailwind.config.ts напрямую.
Отправьте код на github.com, а затем используйте Vercel, чтобы связать хранилище кода для развертывания. См. соответствующие документы для конкретного процесса.
【19.10.2024】 Решите Error: ENOENT: no such file or directory xxx/.next/fallback-build-manifest.json , исправив "@lingui/swc-plugin": "4.0.8" , версия решена. Удалите локальный каталог node_modules и переустановите зависимости, чтобы решить проблему.
Добавить скриншот справочной конфигурации входа в Google
【20.10.2024】 Устранена проблема с Error: Cannot find module 'canvas' при запуске путем добавления плагина игнорирования веб-пакета. Оптимизируйте метод загрузки многоязычных файлов.
1. Веб-сайт компонента чистого кода Tailwindcss
Некоторые готовые коды компонентов можно скопировать прямо с сайта и полностью реализовать на базе tw.
2. Компонентный пользовательский интерфейс framework-nextui.org
Обеспечивает прямое использование на основе инкапсулированных компонентов.
3.icon компонент-реакция-значки
Предоставляет несколько наборов значков по умолчанию, которые можно использовать напрямую.
4.Создание страницы цен
Шипиксен
5.Интернационализация
Динамическое создание файлов интернационализации
6.Блог MDX
Генерация контента блога на основе MDX
7. Центр настройки аутентификации Google.
Настройте параметры, необходимые для входа в Google
В текущей среде разработки проекта специальный прокси-адрес используется для решения проблемы невозможности локального вызова google.com. См. код config/auth-config.ts для конкретной конфигурации. Производственная среда не затронута
https://www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/vercel-caching-issue
При нажатии Google для входа в систему на странице появляется сообщение There is a problem with the server configuration. Серверная часть выдает сообщение [auth][error] OperationProcessingError: "response" body "issuer" property does not match the expected value , измените его следующим образом.
Измените файл node_modules/@auth/core/node_modules/oauth4webapi/build/index.js или node_modules/oauth4webapi/dist/index.js.
После модификации вам необходимо вручную удалить каталог .next и перекомпилировать.
Строка 1034, 1003 или 1237 (в разных версиях могут отличаться), прокомментируйте возникшее исключение. Некоторые новые версии не обязательно могут быть этой строкой. Вы можете обратиться к следующим пунктам, чтобы найти сообщение об ошибке, а затем закомментировать его.
функция validateIssuer (ожидаемый, результат) {
if (result.claims.iss !== ожидается) {// throw new OPE('неожиданное значение утверждения JWT "iss" (эмитент)');
}
вернуть результат;}Строка 250 или 238 (в разных версиях может отличаться), комментарий к возникшему исключению.
if (новый URL(json.issuer).href !== ожидаемыйIssuerIdentifier.href) {
// выдаем новый OPE('"тело ответа" "issuer" не соответствует "expectedIssuer"');}После внесения изменений вам необходимо вручную удалить каталог .next и снова выполнить команду run dev.
Измените код языка и целевые слова, чтобы настроить плотность слов в скриптах/add-word-locale.js.
Выполните команду в каталоге cd scripts/: bun run add-word-locale.js или node add-word-locale.js
В этом проекте используется лицензия с открытым исходным кодом MIT, пожалуйста, соблюдайте содержание соглашения.
Если хотите, оставьте ссылку на мой сайт: https://www.ai-outpainting.com/ Большое спасибо!
Если проект вам полезен, поставьте ему звездочку, большое спасибо!
Если у вас есть какие-либо технические вопросы, добавьте WeChat для связи: fafafa-ai.
Небольшая реклама: Текущий сайт ai-outpainting принимает платную отправку внешних ссылок. Друзья, нуждающиеся в помощи, могут связаться со мной.
