ai outpainting com

ชุดเทมเพลตโค้ดที่เหมาะสำหรับสถานีเครื่องมือรูปภาพ AI ต่างๆ

การสาธิตเว็บไซต์จริง

• https://www.ai-outpainting.com

ภาพหน้าจอของเว็บไซต์

• หน้าแรก

• หน้าราคา

• รายการบล็อก

• การแก้ไขภาพ

แนะนำโครงการ

• 1. เว็บไซต์ขยายรูปภาพ AI พัฒนาจาก nextjs 14 และ tailwindcss3 ที่อยู่เว็บไซต์: 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. ใช้ next-auth เพื่อรวมการเข้าสู่ระบบ Google หากคุณต้องการเข้าสู่ระบบด้วย Google ในระหว่างการพัฒนาในพื้นที่ คุณจะต้องแก้ไขซอร์สโค้ดบางส่วน ไม่เช่นนั้นระบบจะรายงานข้อผิดพลาด โปรดดูคำอธิบายด้านล่างสำหรับการแก้ไขเฉพาะ

• 7. การชำระเงิน paypal และแถบแบบรวม สภาพแวดล้อม Sandbox ใช้สำหรับการพัฒนาภายในเครื่อง สำหรับสภาพแวดล้อมที่เป็นทางการ จำเป็นต้องกำหนดค่าพารามิเตอร์ paypal ที่เป็นทางการในไฟล์ .env.production

• 8. วิธีการเรียกโมเดล AI ของโครงการในปัจจุบันมีดังนี้

• อัปโหลดผลการประมวลผลไปยังที่เก็บข้อมูล cloudfare r2 และเรียกที่อยู่ติดต่อกลับเพื่ออัปเดตสถานะคำสั่งซื้อของเว็บไซต์ปัจจุบัน

• ผลลัพธ์การประมวลผลจะถูกส่งไปยังคิว MQ ในเวลาเดียวกัน และจะถูกส่งไปที่ส่วนหน้าโดยบริการตัวจัดการคิว MQ หลังจากที่ส่วนหน้าได้รับผลการประมวลผลแล้ว ผลลัพธ์จะแสดงบนส่วนหน้า

• ส่วนหน้าเริ่มต้นคำขอเพื่อสร้างคำสั่งซื้อ นำหมายเลขคำสั่งซื้อและที่อยู่ติดต่อกลับเพื่ออัปเดตสถานะคำสั่งซื้อของเว็บไซต์ปัจจุบัน และเรียกใช้บริการตัวจัดการคิว MQ (นี่คือไมโครเซอร์วิสที่พัฒนาใน python และฉันไม่มีเวลาแยกแยะ รหัสในขณะนี้)

• เริ่มต้นคำขอ SSE ไปยังแบ็กเอนด์บริการการจัดการคิว MQ ดำเนินการต่อเพื่อรอให้บริการตัวจัดการคิว MQ ดำเนินการให้เสร็จสิ้น และส่งคืนผลลัพธ์

• หลังจากได้รับคำขอแล้ว บริการตัวจัดการคิว MQ แบ็กเอนด์จะส่งข้อมูลคำสั่งซื้อไปยังคิว MQ โดยตรง

• เซิร์ฟเวอร์ GPU จะรับฟังคิว MQ หลังจากได้รับข้อมูลการสั่งซื้อแล้ว จะเริ่มเรียกโมเดล AI เพื่อประมวลผล หลังจากการประมวลผลเสร็จสิ้น จะดำเนินการสองสิ่ง:

• กระบวนการทั้งหมดไม่เกี่ยวข้องกับการสื่อสารโดยตรงระหว่างเว็บไซต์และเซิร์ฟเวอร์ GPU โดยจะมีการส่งต่อผ่านบริการตัวจัดการคิว MQ และไฟล์จะถูกถ่ายโอนผ่านที่เก็บข้อมูล R2 ซึ่งจะช่วยแก้ปัญหาการเชื่อมต่อระหว่างเซิร์ฟเวอร์ GPU และเว็บไซต์ ปริมาณการสั่งซื้อมากเกินไป สามารถเพิ่ม GPU ได้ตลอดเวลา เซิร์ฟเวอร์ไม่จำเป็นต้องมีการปรับเปลี่ยนใดๆ ในเว็บไซต์

• 9. แผนภาพสถาปัตยกรรมโดยรวมมีดังนี้:

• 10. โซลูชันการใช้งานอื่น

• อัปโหลดผลการประมวลผลไปยังที่เก็บข้อมูล cloudfare r2 และเรียกสถานะคำสั่งซื้อ อัปเดตที่อยู่ติดต่อกลับของเว็บไซต์ปัจจุบันเพื่ออัปเดตสถานะคำสั่งซื้อ

• หลังจากที่ส่วนหน้าสร้างคำสั่งซื้อ หน้าจะตรวจสอบสถานะคำสั่งซื้ออย่างต่อเนื่องผ่านการโพลจนกว่าคำสั่งซื้อจะเสร็จสมบูรณ์

• มีโปรแกรมอื่นๆ บนแบ็กเอนด์ที่สแกนฐานข้อมูลและรับคำสั่งซื้อโดยมีสถานะคำสั่งซื้อรอดำเนินการอยู่เป็นประจำ หลังจากได้รับข้อมูลคำสั่งซื้อแล้ว จะเริ่มเรียกโมเดล AI เพื่อประมวลผลหลังจากเสร็จสิ้นการประมวลผลจะมีสองอย่าง เสร็จแล้ว:

• 11. หากคุณมีงบประมาณ คุณสามารถพิจารณาใช้บริการ API ของ runpod ได้โดยตรง คุณไม่จำเป็นต้องติดตั้งเซิร์ฟเวอร์ตัวจัดการคิว MQ ด้วยตัวเอง เพียงแค่รวม SDK เข้าด้วยกัน

• รหัสอ้างอิง

 นำเข้า runpodSdk, { EndpointCompletedOutput, EndpointIncompleteOutput } จากฟังก์ชัน 'runpod-sdk'async fetchProcessByRunPod (ข้อมูล: ใด ๆ ): สัญญา <EndpointIncompleteOutput | ไม่ได้กำหนด> {
// 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, ข้อมูล:", ข้อมูล)
return endpoint?.run({"input": ข้อมูล,
-

• หากคุณต้องการใช้ฟังก์ชันการขยายรูปภาพ 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

กระบวนการเว็บไซต์ใหม่ตามเทมเพลต

1. สร้างเนื้อหาเว็บไซต์

• ใช้คำสั่ง node scripts/generator-website.js โดยตรงเพื่อสร้างเนื้อหาเว็บไซต์ (คำสั่งนี้จะสร้างสำเนา, TDK และชื่อบล็อกที่เกี่ยวข้องกับคำสำคัญที่ระบุ)

• คุณต้องแก้ไขคำสำคัญและคำอธิบายก่อน จากนั้นจึงดำเนินการคำสั่ง

 // คำหลักของเว็บไซต์ const keyword = 'ขยายรูปภาพ ai'
// ควรอธิบายเว็บไซต์ const description = 'ใช้เทคโนโลยี AI เพื่อขยายภาพ ขณะเดียวกันก็ทำให้มั่นใจว่าภาพต้นฉบับยังคงไม่เปลี่ยนแปลง ขยายเนื้อหาโดยรอบ และรักษาความต่อเนื่องของเนื้อหาด้วยภาพต้นฉบับ

• แก้ไขข้อมูลการกำหนดค่าใน config/site.ts

2. แทนที่โลโก้เว็บไซต์ ชื่อ และข้อมูลอื่นๆ

• วางโลโก้ของคุณเอง favicon.ico ในไดเร็กทอรี public/ และแทนที่ไฟล์ต้นฉบับโดยตรง

• แก้ไขชื่อโดเมนใน public/sitemap.xml

• แก้ไขข้อมูลการกำหนดค่าใน .env และ .env.production โปรดดูความคิดเห็นสำหรับข้อกำหนดในการปรับเปลี่ยนเฉพาะ

3.เริ่มต้นฐานข้อมูล

• โปรเจ็กต์ปัจจุบันใช้ปริซึมเป็นเฟรมเวิร์ก ORM โครงสร้างตารางได้รับการประกาศในไฟล์ schema.prisma หากต้องการใช้เป็นครั้งแรก คุณต้องดำเนินการคำสั่งต่อไปนี้

 // คำสั่งนี้จะสร้างตารางฐานข้อมูลตามการประกาศโครงสร้างตารางและเริ่มต้นข้อมูลตาราง หากมีการอัปเดตฟิลด์ตารางใหม่ คุณจะต้องดำเนินการคำสั่งปัจจุบันเส้นด้าย pg:migrate
// สำหรับคำสั่งการดำเนินการอื่น ขอแนะนำให้อ่านเอกสารปริซึมอย่างเป็นทางการโดยตรง

4. ปรับเปลี่ยนสีของเว็บไซต์

• ข้อมูลการจับคู่สีของเว็บไซต์จะถูกจัดเก็บไว้ในไฟล์ tailwind.config.ts หากคุณต้องการแก้ไขการจับคู่สี ให้แก้ไขเนื้อหาในไฟล์ tailwind.config.ts โดยตรง

5. การใช้งานระบบ

• ส่งโค้ดไปที่ github.com จากนั้นใช้ vercel เพื่อเชื่อมโยงคลังโค้ดสำหรับการปรับใช้ โปรดดูเอกสารที่เกี่ยวข้องสำหรับกระบวนการเฉพาะ

อัปเดตบันทึก

• 【10-10-2567】 แก้ไข Error: ENOENT: no such file or directory xxx/.next/fallback-build-manifest.json โดยแก้ไข "@lingui/swc-plugin": "4.0.8" , เวอร์ชันได้รับการแก้ไขแล้ว ลบไดเร็กทอรี node_modules ภายในเครื่อง และติดตั้งการขึ้นต่อกันใหม่เพื่อแก้ไขปัญหา

• เพิ่มภาพหน้าจออ้างอิงการกำหนดค่าการเข้าสู่ระบบ Google

• 【2024-10-20】 แก้ไขปัญหา Error: Cannot find module 'canvas' เมื่อเริ่มต้นระบบโดยการเพิ่มปลั๊กอินที่ละเว้น webpack ปรับวิธีการโหลดไฟล์หลายภาษาให้เหมาะสม

ส่วนประกอบ UI ที่ใช้ในโปรเจ็กต์ปัจจุบัน

• 1. เว็บไซต์ส่วนประกอบโค้ด tailwindcss บริสุทธิ์

  รหัสส่วนประกอบสำเร็จรูปบางรหัสสามารถคัดลอกได้โดยตรงจากเว็บไซต์และนำไปใช้งานโดยสมบูรณ์โดยใช้ tw

• 2. กรอบงาน UI ที่ใช้คอมโพเนนต์-nextui.org

  ให้การใช้งานโดยตรงตามส่วนประกอบที่ห่อหุ้ม

• 3.icon องค์ประกอบปฏิกิริยาไอคอน

  มีไอคอนเริ่มต้นหลายชุดที่สามารถใช้ได้โดยตรง

• 4.การสร้างหน้าราคา

  ชิปิกซ์เซน

• 5.ความเป็นสากล

  สร้างไฟล์สากลแบบไดนามิก

• 6.บล็อก MDX

  สร้างเนื้อหาบล็อกตาม MDX

• 7. ศูนย์การกำหนดค่าการรับรองความถูกต้องของ Google

  กำหนดค่าพารามิเตอร์ที่จำเป็นสำหรับการเข้าสู่ระบบ Google

การอ้างอิงการกำหนดค่า Google Auth

• ในสภาพแวดล้อมการพัฒนาโครงการปัจจุบัน ที่อยู่พร็อกซีที่กำหนดเองจะถูกนำมาใช้เพื่อแก้ปัญหาการไม่สามารถโทรหา google.com ภายในเครื่องได้ สำหรับการกำหนดค่าเฉพาะ โปรดดูโค้ด config/auth-config.ts สภาพแวดล้อมการผลิตไม่ได้รับผลกระทบ

แก้ไขปัญหาของพรอมต์การสร้างปริซึมเมื่อสร้าง vercel

https://www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/vercel-caching-issue

แก้ไขปัญหาไม่สามารถเปิดการเข้าสู่ระบบ Google ในเครื่องได้

• เมื่อคลิก 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 !== คาดหวัง) {// โยน OPE ใหม่ ('JWT ที่ไม่คาดคิด "iss" (ผู้ออก) มูลค่าการเรียกร้อง');
-
ส่งคืนผลลัพธ์;}

• บรรทัด 250 หรือ 238 (อาจแตกต่างกันในเวอร์ชันที่แตกต่างกัน) แสดงความคิดเห็นเกี่ยวกับข้อยกเว้นที่เกิดขึ้น

 ถ้า (URL ใหม่ (json.issuer).href !== ExpectIssuerIdentifier.href) {
// โยน OPE ใหม่ ('"การตอบสนอง" เนื้อความ "ผู้ออก" ไม่ตรงกับ "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 ปัจจุบันยอมรับการส่งลิงก์ภายนอกแบบชำระเงิน เพื่อนที่ต้องการสามารถติดต่อฉันได้