https://www.ai-outpainting.com
Home page
Price page
Blog list
Picture editing
1. AI image expansion website developed based on nextjs 14 and tailwindcss3, website address: https://www.ai-outpainting.com/
2. The website needs to be used with the back-end AI model. The back-end model needs to be built by yourself.
Model address: https://huggingface.co/spaces/fffiloni/diffusers-image-outpaint
3. Internationalization is implemented using lingui. The advantage of this compared to next-intl is that there is no need to generate a key for each copy. It will extract the copy through commands to generate multi-language files. Then do translation based on multi-language files
4. The project has written some automated scripts, such as automatic translation of international content and automatic translation of blog content. These need to be run manually when necessary
5. The project relies on database, cloudfare r2 storage, parameters required for Google login, and paypal payment parameters. These parameters are configured in .env and .env.production files.
6. Use next-auth to integrate google login. If you need to log in with Google during local development, you need to modify some source code, otherwise an error will be reported. Please see the description below for specific modifications.
7. Integrated paypal and stripe payment. The sandbox environment is used for local development. For the formal environment, formal paypal parameters need to be configured in the .env.production file.
8. The way the current project calls the AI model is roughly as follows:
Upload the processing results to cloudfare r2 storage, and call the order status update callback address of the current website
The processing results are sent to the MQ queue at the same time, and are pushed to the front end by the MQ queue manager service. After the front end receives the processing results, the results are displayed on the front end page.
The front end initiates a request to create an order, carries the order number and the current website order status update callback address, and calls the MQ queue manager service (this is a microservice developed in python, and I have no time to sort out the code for the time being)
Initiate an SSE request to the MQ queue management service backend, continue to wait for the MQ queue manager service to complete, and return the result.
After receiving the request, the backend MQ queue manager service directly submits the order information to the MQ queue.
The GPU server listens to the MQ queue. After obtaining the order information, it starts calling the AI model for processing. After the processing is completed, it will do two things:
The whole process does not involve direct communication between the website and the GPU server. It is forwarded through the MQ queue manager service, and the files are transferred through R2 storage. This solves the coupling problem between the GPU server and the website. If the order volume is too large, the GPU can be added at any time. The server does not require any adjustments to the website.
9. The overall architecture diagram is as follows:
10.Another implementation solution
Upload the processing results to cloudfare r2 storage, and call the order status update callback address of the current website to update the order status
After the front-end creates an order, the page continuously checks the order status through polling until the order is completed.
There are other programs on the backend that regularly scan the database and obtain orders with the order status of pending. After obtaining the order information, they start to call the AI model for processing. After the processing is completed, two things will be done:
11. If you have the budget, you can also consider using runpod's API service directly. You don't need to implement the MQ queue manager server yourself, just integrate its SDK.
Reference code
import runpodSdk, { EndpointCompletedOutput, EndpointIncompleteOutput } from 'runpod-sdk'async function fetchProcessByRunPod(data: any): Promise<EndpointIncompleteOutput | undefined> { // 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("start invoke runpod endpoint,data:",data) return endpoint?.run({"input": data, })}
If you need to fully use the AI image expansion function in the current project source code, you need to choose a solution as described above and modify the logic of creating orders and monitoring order status in the app/[lang]/(editor)/editor/view.tsx file! ! !
Every time the page is modified to contain new content, you need to execute the yarn extract
command to extract the new copy into the internationalized file, and execute the yarn translate
command to translate the copy into the corresponding language.
If there are new blog articles, you need to execute the yarn translate
command to translate the new blog content into the corresponding language.
Translation involves calling the API. You need to apply for the API key first, and then modify the API key in scripts/openai-chat.js
If you need to add or reduce multi-language content, you need to modify these three files: framework/locale/locale.ts framework/locale/localeConfig.js framework/locale/messagesLoader.ts
Directly use the node scripts/generator-website.js command to generate website content (this command will generate copy, TDK, and blog titles related to the specified keywords)
You need to modify the keywords and description first, and then execute the command
// Website keyword const keyword = 'extend image ai' // The website should be described const description = 'Use AI technology to expand the image, while ensuring that the original image remains unchanged, expand the surrounding content, and maintain content continuity with the original image
Modify the configuration information in config/site.ts
Place your own logo favicon.ico in the public/ directory and directly replace the original file
Modify the domain name in public/sitemap.xml
Modify the configuration information in .env and .env.production. Please see the comments for specific modification requirements.
The current project uses prisma as the ORM framework. The table structure is declared in the schema.prisma file. To use it for the first time, you need to execute the following command
// This command will generate a database table based on the table structure declaration and initialize the table data. If there are new table field updates, you need to execute the current command yarn pg:migrate // For other operation commands, it is recommended to read the official prisma documentation directly.
The color matching information of the website is stored in the tailwind.config.ts file. If you need to modify the color matching, directly modify the content in the tailwind.config.ts file.
Submit the code to github.com and then use vercel to associate the code warehouse for deployment. Please refer to the relevant documents for the specific process.
【2024-10-19】 Solve the Error: ENOENT: no such file or directory xxx/.next/fallback-build-manifest.json
by fixing "@lingui/swc-plugin": "4.0.8" , version resolved. Delete the local node_modules directory and reinstall the dependencies to solve the problem.
Add Google login configuration reference screenshot
【2024-10-20】 Solve the problem of Error: Cannot find module 'canvas'
when starting up by adding webpack ignore plugin. Optimize the loading method of multi-language files.
1. Pure tailwindcss code component website
Some ready-made component codes can be copied directly from the website and are completely implemented based on tw
2. Component-based UI framework-nextui.org
Provides direct use based on encapsulated components
3.icon component-react-icons
Provides multiple sets of default icons that can be used directly
4.Pricing page generation
shipixen
5.Internationalization
Dynamically generate internationalization files
6.MDX Blog
Generate blog content based on MDX
7.Google Auth Configuration Center
Configure parameters required for Google login
In the current project development environment, a custom proxy address is used to solve the problem of being unable to call google.com locally. For specific configuration, see the code config/auth-config.ts. The production environment is not affected
https://www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/vercel-caching-issue
When clicking Google to log in, the page prompts There is a problem with the server configuration.
The backend prompts [auth][error] OperationProcessingError: "response" body "issuer" property does not match the expected value
error, modify it as follows
Modify the node_modules/@auth/core/node_modules/oauth4webapi/build/index.js or node_modules/oauth4webapi/dist/index.js file
After modification, you need to manually delete the .next directory and recompile.
Line 1034 or 1003 or 1237 (different versions may be different), comment out the exception thrown. Some new versions may not necessarily be on this line. You can refer to the following points to find the error message, and then comment it out.
function validateIssuer(expected, result) { if (result.claims.iss !== expected) {// throw new OPE('unexpected JWT "iss" (issuer) claim value'); } return result;}
Line 250 or 238 (may be different in different versions), comment on the exception thrown
if (new URL(json.issuer).href !== expectedIssuerIdentifier.href) { // throw new OPE('"response" body "issuer" does not match "expectedIssuer"');}
After modification, you need to manually delete the .next directory and execute run dev again.
Modify the language code and target words to adjust word density in scripts/add-word-locale.js
Execute the command in the cd scripts/ directory: bun run add-word-locale.js
or node add-word-locale.js
This project adopts the MIT open source license, please abide by the content of the agreement
If you are willing, please leave a link to my website: https://www.ai-outpainting.com/ Thank you very much!
If the project is helpful to you, please give it a star, thank you very much!
If you have any technical questions, please add WeChat to communicate: fafafa-ai
Small advertisement: The current ai-outpainting website accepts paid submission of external links. Friends in need can contact me.