ai outpainting com
1.0.0
https://www.ai-outpainting.com
Página inicial 
Página de preços 
Lista de blogs 
Edição de imagens 
1. Site de expansão de imagem AI desenvolvido com base em nextjs 14 e tailwindcss3, endereço do site: https://www.ai-outpainting.com/
2. O site precisa ser usado com o modelo de IA de back-end. O modelo back-end precisa ser construído por você mesmo.
Endereço do modelo: https://huggingface.co/spaces/fffiloni/diffusers-image-outpaint
3. A internacionalização é implementada usando lingui. A vantagem disso em relação ao next-intl é que não há necessidade de gerar uma chave para cada cópia. Ele extrairá a cópia por meio de comandos para gerar arquivos multilíngues. Em seguida, faça a tradução com base em arquivos multilíngues
4. O projeto escreveu alguns scripts automatizados, como tradução automática de conteúdo internacional e tradução automática de conteúdo de blog. Eles precisam ser executados manualmente quando necessário
5. O projeto depende de banco de dados, armazenamento cloudfare r2, parâmetros necessários para login do Google e parâmetros de pagamento paypal. Esses parâmetros são configurados nos arquivos .env e .env.production.
6. Use next-auth para integrar o login do Google. Se você precisar fazer login no Google durante o desenvolvimento local, será necessário modificar algum código-fonte, caso contrário, um erro será relatado. Por favor, veja a descrição abaixo para modificações específicas.
7. Pagamento integrado por paypal e stripe. O ambiente sandbox é usado para desenvolvimento local. Para o ambiente formal, os parâmetros formais do Paypal precisam ser configurados no arquivo .env.production.
8. A forma como o projeto atual chama o modelo de IA é aproximadamente a seguinte:
Carregue os resultados do processamento para o armazenamento cloudfare r2 e chame o endereço de retorno de chamada de atualização do status do pedido do site atual
Os resultados do processamento são enviados para a fila do MQ ao mesmo tempo e enviados para o front end pelo serviço do gerenciador de filas do MQ. Depois que o front end recebe os resultados do processamento, os resultados são exibidos na página do front end.
O front-end inicia uma solicitação para criar um pedido, carrega o número do pedido e o endereço de retorno de chamada de atualização do status do pedido do site atual e chama o serviço do gerenciador de filas MQ (este é um microsserviço desenvolvido em python e não tenho tempo para resolver o código por enquanto)
Inicie uma solicitação SSE para o backend do serviço de gerenciamento de filas MQ, continue aguardando a conclusão do serviço do gerenciador de filas MQ e retorne o resultado.
Após receber a solicitação, o serviço do gerenciador de filas backend do MQ envia diretamente as informações do pedido para a fila do MQ.
O servidor GPU escuta a fila MQ. Após obter as informações do pedido, ele começa a chamar o modelo de IA para processamento. Após a conclusão do processamento, ele fará duas coisas:
Todo o processo não envolve comunicação direta entre o site e o servidor GPU. Ele é encaminhado por meio do serviço gerenciador de filas MQ e os arquivos são transferidos por meio do armazenamento R2. o volume do pedido é muito grande, a GPU pode ser adicionada a qualquer momento. O servidor não requer nenhum ajuste no site.
9. O diagrama geral da arquitetura é o seguinte: 
10. Outra solução de implementação
Carregue os resultados do processamento para o armazenamento cloudfare r2 e chame o endereço de retorno de chamada de atualização do status do pedido do site atual para atualizar o status do pedido
Depois que o front-end cria um pedido, a página verifica continuamente o status do pedido por meio de pesquisas até que o pedido seja concluído.
Existem outros programas no backend que verificam regularmente o banco de dados e obtêm pedidos com status de pedido pendente. Após obter as informações do pedido, eles começam a chamar o modelo de IA para processamento. feito:
11. Se você tiver orçamento, também pode considerar usar o serviço API do runpod diretamente. Você não precisa implementar o servidor do gerenciador de filas MQ, apenas integre seu SDK.
Código de referência
import runpodSdk, { EndpointCompletedOutput, EndpointIncompleteOutput } da função 'runpod-sdk'async fetchProcessByRunPod (dados: qualquer): Promise<EndpointIncompleteOutput indefinido> {
// const serverUrl = `${UE_PROCESS_API}/create_docker`
// https://docs.runpod.io/serverless/endpoints/job-operações
const runpod = runpodSdk("N5Jxxxxxxxxxxxxx");
endpoint const = runpod.endpoint("1zgk5xi3ew77pv");
console.log("iniciar chamada de endpoint runpod, dados:", dados)
retornar endpoint?.run({"input": dados,
})}Se você precisar usar totalmente a função de expansão de imagem AI no código-fonte do projeto atual, você precisa escolher uma solução conforme descrito acima e modificar a lógica de criação de pedidos e monitoramento do status do pedido no app/[lang]/(editor )/editor/view.tsx arquivo! ! !
Cada vez que a página é modificada para conter novo conteúdo, você precisa executar o comando yarn extract para extrair a nova cópia para o arquivo internacionalizado e executar o comando yarn translate para traduzir a cópia para o idioma correspondente.
Se houver novos artigos no blog, você precisará executar o comando yarn translate para traduzir o novo conteúdo do blog para o idioma correspondente.
A tradução envolve chamar a API. Você precisa primeiro solicitar a chave da API e, em seguida, modificar a chave da API em scripts/openai-chat.js.
Se precisar adicionar ou reduzir conteúdo multilíngue, você precisará modificar estes três arquivos: framework/locale/locale.ts framework/locale/localeConfig.js framework/locale/messagesLoader.ts
Use diretamente o comando node scripts/generator-website.js para gerar conteúdo do site (este comando irá gerar copy, TDK e títulos de blog relacionados às palavras-chave especificadas)
Você precisa modificar as palavras-chave e a descrição primeiro e, em seguida, executar o comando
// Palavra-chave do site const palavra-chave = 'extend image ai' // O site deve ser descrito const description = 'Use a tecnologia de IA para expandir a imagem, garantindo que a imagem original permaneça inalterada, expanda o conteúdo ao redor e mantenha a continuidade do conteúdo com a imagem original
Modifique as informações de configuração em config/site.ts
Coloque seu próprio logotipo favicon.ico no diretório public/ e substitua diretamente o arquivo original
Modifique o nome de domínio em public/sitemap.xml
Modifique as informações de configuração em .env e .env.production Consulte os comentários para obter requisitos de modificação específicos.
O projeto atual usa prisma como estrutura ORM. A estrutura da tabela é declarada no arquivo schema.prisma. Para usá-lo pela primeira vez, você precisa executar o seguinte comando.
// Este comando irá gerar uma tabela de banco de dados baseada na declaração da estrutura da tabela e inicializar os dados da tabela. Se houver novas atualizações de campos da tabela, você precisará executar o comando atual yarn pg:migrate // Para outros comandos de operação, é recomendado ler diretamente a documentação oficial do prisma.
As informações de correspondência de cores do site são armazenadas no arquivo tailwind.config.ts. Se você precisar modificar a correspondência de cores, modifique diretamente o conteúdo no arquivo tailwind.config.ts.
Envie o código para github.com e use o vercel para associar o armazém de código para implantação. Consulte os documentos relevantes para o processo específico.
【2024-10-19】 Resolva o Error: ENOENT: no such file or directory xxx/.next/fallback-build-manifest.json corrigindo "@lingui/swc-plugin": "4.0.8" , versão resolvida. Exclua o diretório local node_modules e reinstale as dependências para resolver o problema.
Adicionar captura de tela de referência de configuração de login do Google
【2024-10-20】 Resolva o problema de Error: Cannot find module 'canvas' ao inicializar adicionando o plugin webpack ignore. Otimize o método de carregamento de arquivos multilíngues.
1. Site de componente de código tailwindcss puro
Alguns códigos de componentes prontos podem ser copiados diretamente do site e são totalmente implementados com base em tw
2. UI baseada em componentes framework-nextui.org
Fornece uso direto com base em componentes encapsulados
3.ícone componente-reação-ícones
Fornece vários conjuntos de ícones padrão que podem ser usados diretamente
4. Geração de página de preços
Shipixen
5.Internacionalização
Gere arquivos de internacionalização dinamicamente
6. Blog MDX
Gere conteúdo de blog baseado em MDX
7.Centro de configuração de autenticação do Google
Configure os parâmetros necessários para login do Google
No atual ambiente de desenvolvimento do projeto, um endereço proxy personalizado é usado para resolver o problema de impossibilidade de ligar para google.com localmente. Para configuração específica, consulte o código config/auth-config.ts. O ambiente de produção não é afetado
https://www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/vercel-caching-issue
Ao clicar no Google para fazer login, a página solicita There is a problem with the server configuration. O back-end solicita [auth][error] OperationProcessingError: "response" body "issuer" property does not match the expected value , modifique-o da seguinte forma.
Modifique o arquivo node_modules/@auth/core/node_modules/oauth4webapi/build/index.js ou node_modules/oauth4webapi/dist/index.js
Após a modificação, você precisa excluir manualmente o diretório .next e recompilar.
Linha 1034 ou 1003 ou 1237 (versões diferentes podem ser diferentes), comente a exceção lançada. Algumas novas versões podem não estar necessariamente nesta linha. Você pode consultar os pontos a seguir para encontrar a mensagem de erro e comentá-la.
function validIssuer(esperado, resultado) {
if (result.claims.iss !== esperado) {// throw new OPE('valor inesperado da declaração JWT "iss" (emissor)');
}
retornar resultado;}Linha 250 ou 238 (pode ser diferente em versões diferentes), comente a exceção lançada
if (novo URL(json.issuer).href! == esperadoIssuerIdentifier.href) {
// lançar new OPE('"response" body "issuer" não corresponde a "expectedIssuer"');}Após a modificação, você precisa excluir manualmente o diretório .next e executar run dev novamente.
Modifique o código do idioma e as palavras-alvo para ajustar a densidade das palavras em scripts/add-word-locale.js
Execute o comando no diretório cd scripts/: bun run add-word-locale.js ou node add-word-locale.js
Este projeto adota a licença de código aberto do MIT, por favor, cumpra o conteúdo do acordo
Se você estiver disposto, deixe um link para o meu site: https://www.ai-outpainting.com/ Muito obrigado!
Se o projeto for útil para você, dê uma estrela, muito obrigado!
Se você tiver alguma dúvida técnica, adicione o WeChat para se comunicar: fafafa-ai
Pequeno anúncio: O site atual de ai-outpainting aceita envio pago de links externos. Amigos necessitados podem entrar em contato comigo.
