ai outpainting com
1.0.0
https://www.ai-outpainting.com
홈페이지 
가격 페이지 
블로그 목록 
사진 편집 
1. nextjs 14 및 tailwindcss3을 기반으로 개발된 AI 이미지 확장 웹사이트, 웹사이트 주소: https://www.ai-outpainting.com/
2. 웹사이트는 백엔드 AI 모델과 함께 사용해야 합니다. 백엔드 모델은 직접 구축해야 합니다.
모델 주소: https://huggingface.co/spaces/fffiloni/diffusers-image-outpaint
3. 국제화는 lingui를 사용하여 구현됩니다. next-intl에 비해 장점은 각 복사본에 대해 키를 생성할 필요가 없다는 것입니다. 명령을 통해 복사본을 추출하여 다중 언어 파일을 생성합니다. 그런 다음 다국어 파일을 기반으로 번역을 수행합니다.
4. 프로젝트는 국제 콘텐츠 자동 번역 및 블로그 콘텐츠 자동 번역과 같은 일부 자동화 스크립트를 작성했습니다. 필요한 경우 수동으로 실행해야 합니다.
5. 프로젝트는 데이터베이스, cloudfare r2 스토리지, Google 로그인에 필요한 매개변수 및 PayPal 결제 매개변수를 사용합니다. 이러한 매개변수는 .env 및 .env.production 파일에 구성됩니다.
6. Google 로그인을 통합하려면 next-auth를 사용하세요. 로컬 개발 중에 Google로 로그인해야 하는 경우 일부 소스 코드를 수정해야 합니다. 그렇지 않으면 오류가 보고됩니다. 구체적인 수정 사항은 아래 설명을 참조하세요.
7. 통합 페이팔 및 스트라이프 결제. 샌드박스 환경은 로컬 개발에 사용됩니다. 공식 환경의 경우 .env.production 파일에서 공식 페이팔 매개변수를 구성해야 합니다.
8. 현재 프로젝트에서 AI 모델을 호출하는 방식은 대략 다음과 같습니다.
처리 결과를 cloudfare r2 스토리지에 업로드하고, 현재 웹사이트의 주문 상태 업데이트 콜백 주소로 전화합니다.
처리 결과는 동시에 MQ 대기열로 전송되며, 프런트 엔드가 처리 결과를 수신한 후 프런트 엔드 페이지에 결과가 표시됩니다.
프런트 엔드는 주문 생성 요청을 시작하고, 주문 번호와 현재 웹사이트 주문 상태 업데이트 콜백 주소를 전달하고, MQ 대기열 관리자 서비스를 호출합니다(이것은 Python으로 개발된 마이크로서비스이므로 정리할 시간이 없습니다). 당분간 코드)
MQ 큐 관리 서비스 백엔드에 대한 SSE 요청을 시작하고 MQ 큐 관리자 서비스가 완료될 때까지 계속 기다린 후 결과를 반환합니다.
요청을 받은 후 백엔드 MQ 큐 관리자 서비스는 주문 정보를 MQ 큐에 직접 제출합니다.
GPU 서버는 주문 정보를 얻은 후 처리를 위해 AI 모델을 호출하기 시작합니다.
전체 프로세스에는 웹사이트와 GPU 서버 간의 직접적인 통신이 포함되지 않으며 MQ 큐 관리자 서비스를 통해 전달되며, 파일은 R2 스토리지를 통해 전송됩니다. 주문량이 너무 많으면 언제든지 GPU를 추가할 수 있으며 웹사이트에 어떤 조정도 필요하지 않습니다.
9. 전체 아키텍처 다이어그램은 다음과 같습니다. 
10.또 다른 구현 솔루션
처리 결과를 cloudfare r2 스토리지에 업로드하고, 현재 웹사이트의 주문 상태 업데이트 콜백 주소를 호출하여 주문 상태를 업데이트합니다.
프런트엔드에서 주문이 생성된 후 페이지에서는 주문이 완료될 때까지 폴링을 통해 주문 상태를 지속적으로 확인합니다.
백엔드에는 정기적으로 데이터베이스를 스캔하고 주문 상태가 보류 중인 주문을 얻는 다른 프로그램이 있습니다. 주문 정보를 얻은 후 처리를 위해 AI 모델을 호출하기 시작합니다. 완료:
11. 예산이 있다면 runpod의 API 서비스를 직접 사용하는 것을 고려할 수도 있습니다. MQ 큐 관리자 서버를 직접 구현할 필요는 없으며 해당 SDK를 통합하기만 하면 됩니다.
참조 코드
import runpodSdk, { EndpointCompletedOutput, EndpointIncompleteOutput } from 'runpod-sdk'async 함수 fetchProcessByRunPod(data: any): Promise<EndpointIncompleteOutput undefine> |
// const serverUrl = `${UE_PROCESS_API}/create_docker`
// https://docs.runpod.io/serverless/endpoints/job-Operations
const runpod = runpodSdk("N5Jxxxxxxxxxxxxx");
const 엔드포인트 = runpod.endpoint("1zgk5xi3ew77pv");
console.log("runpod 엔드포인트 호출 시작,data:",data)
return 끝점?.run({"input": 데이터,
})}현재 프로젝트 소스코드에서 AI 이미지 확장 기능을 완벽히 활용해야 하는 경우 위와 같이 솔루션을 선택하고 app/[lang]/(editor에서 주문 생성 및 주문 상태 모니터링 로직을 수정해야 합니다. )/editor/view.tsx 파일! ! !
새 콘텐츠를 포함하도록 페이지가 수정될 때마다 yarn extract 명령을 실행하여 새 복사본을 국제화된 파일로 추출하고, yarn translate 명령을 실행하여 복사본을 해당 언어로 번역해야 합니다.
새로운 블로그 기사가 있는 경우, yarn translate 명령을 실행하여 새 블로그 콘텐츠를 해당 언어로 번역해야 합니다.
번역에는 API 호출이 포함됩니다. 먼저 API 키를 신청한 다음 scripts/openai-chat.js에서 API 키를 수정해야 합니다.
다국어 콘텐츠를 추가하거나 줄여야 하는 경우 Framework/locale/locale.ts Framework/locale/localeConfig.js Framework/locale/messagesLoader.ts 세 파일을 수정해야 합니다.
node scripts/generator-website.js 명령을 직접 사용하여 웹 사이트 콘텐츠를 생성합니다(이 명령은 지정된 키워드와 관련된 사본, TDK 및 블로그 제목을 생성합니다)
먼저 키워드와 설명을 수정한 후 명령을 실행해야 합니다.
// 웹사이트 키워드 const 키워드 = '이미지 ai 확장' // 웹사이트가 설명되어야 함 const 설명 = 'AI 기술을 사용하여 원본 이미지는 그대로 유지하면서 이미지를 확장하고, 주변 콘텐츠를 확장하며 원본 이미지와의 콘텐츠 연속성을 유지합니다.
config/site.ts에서 구성 정보를 수정합니다.
자신의 로고 favicon.ico를 public/ 디렉토리에 배치하고 원본 파일을 직접 교체하세요.
public/sitemap.xml에서 도메인 이름을 수정하세요.
.env 및 .env.production에서 구성 정보를 수정하세요. 특정 수정 요구 사항은 설명을 참조하세요.
현재 프로젝트에서는 prisma를 ORM 프레임워크로 사용하고 있으며, 스키마.prisma 파일에 테이블 구조가 선언되어 있으므로 처음 사용하려면 다음 명령어를 실행해야 합니다.
// 이 명령은 테이블 구조 선언을 기반으로 데이터베이스 테이블을 생성하고 테이블 데이터를 초기화합니다. 새로운 테이블 필드 업데이트가 있는 경우 현재 명령인 Yarn pg: migration을 실행해야 합니다. // 기타 동작 명령어에 대해서는 프리즈마 공식 문서를 직접 읽어보는 것을 권장합니다.
웹사이트의 색상 매칭 정보는 tailwind.config.ts 파일에 저장됩니다. 색상 매칭을 수정해야 하는 경우 tailwind.config.ts 파일의 내용을 직접 수정하세요.
github.com에 코드를 제출한 후 vercel을 사용하여 배포할 코드 웨어하우스를 연결하세요. 구체적인 프로세스는 관련 문서를 참조하세요.
【2024-10-19】 "@lingui/swc-plugin": "4.0.8"을 수정하여 Error: ENOENT: no such file or directory xxx/.next/fallback-build-manifest.json , 버전이 해결되었습니다. 문제를 해결하려면 로컬 node_modules 디렉터리를 삭제하고 종속성을 다시 설치하세요.
Google 로그인 구성 참조 스크린샷 추가
【2024-10-20】 webpack 무시 플러그인을 추가하여 시작할 때 Error: Cannot find module 'canvas' 문제를 해결합니다. 다중 언어 파일의 로딩 방법을 최적화합니다.
1. 순수 tailwindcss 코드 구성요소 웹사이트
일부 기성 컴포넌트 코드는 웹사이트에서 직접 복사할 수 있으며 tw를 기반으로 완전히 구현됩니다.
2. 컴포넌트 기반 UI 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행(버전에 따라 다를 수 있음)에서 발생한 예외를 주석 처리하십시오. 일부 새 버전은 반드시 이 행에 있을 필요는 없습니다. 다음 사항을 참조하여 오류 메시지를 찾은 다음 주석 처리하십시오.
function verifyIssuer(예상, 결과) {
if (result.claims.iss !== Expect) {// throw new OPE('예기치 않은 JWT "iss"(발행자) 클레임 값');
}
결과 반환;}250행 또는 238행(버전마다 다를 수 있음), 발생한 예외에 대한 설명
if (새 URL(json.issuer).href !== ExpectIssuerIdentifier.href) {
// new OPE 발생('"response" body "issuer"는 "expectedIssuer"')와 일치하지 않습니다.}수정 후에는 .next 디렉터리를 수동으로 삭제하고 run dev를 다시 실행해야 합니다.
scripts/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 웹사이트는 외부 링크의 유료 제출을 허용합니다. 도움이 필요한 친구는 저에게 연락할 수 있습니다.
