ai outpainting com

Satu set templat kode yang cocok untuk berbagai stasiun alat gambar AI

Demo situs web nyata

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

Tangkapan layar situs web

• Halaman rumah

• Halaman harga

• Daftar blog

• Pengeditan gambar

Pengenalan proyek

• 1. Situs web perluasan gambar AI dikembangkan berdasarkan nextjs 14 dan tailwindcss3, alamat situs web: https://www.ai-outpainting.com/

• 2. Situs web harus digunakan dengan model AI back-end. Model back-end perlu dibuat sendiri.

• Alamat model: https://huggingface.co/spaces/fffiloni/diffusers-image-outpaint

• 3. Internasionalisasi diimplementasikan menggunakan lingui. Keuntungannya dibandingkan dengan next-intl adalah tidak perlu membuat kunci untuk setiap salinan. Ini akan mengekstrak salinan melalui perintah untuk menghasilkan file multi-bahasa. Kemudian lakukan terjemahan berdasarkan file multibahasa

• 4. Proyek ini telah menulis beberapa skrip otomatis, seperti terjemahan otomatis konten internasional dan terjemahan otomatis konten blog. Ini perlu dijalankan secara manual bila diperlukan

• 5. Proyek ini bergantung pada database, penyimpanan cloudfare r2, parameter yang diperlukan untuk login Google, dan parameter pembayaran paypal. Parameter ini dikonfigurasi dalam file .env dan .env.production.

• 6. Gunakan autentikasi berikutnya untuk mengintegrasikan login Google. Jika Anda perlu masuk dengan Google selama pengembangan lokal, Anda perlu mengubah beberapa kode sumber, jika tidak, kesalahan akan dilaporkan. Silakan lihat deskripsi di bawah untuk modifikasi spesifik.

• 7. Pembayaran paypal dan stripe terintegrasi. Lingkungan sandbox digunakan untuk pengembangan lokal. Untuk lingkungan formal, parameter formal paypal perlu dikonfigurasi dalam file .env.production.

• 8. Cara proyek saat ini memanggil model AI kira-kira sebagai berikut:

• Unggah hasil pemrosesan ke penyimpanan cloudfare r2, dan hubungi alamat panggilan balik pembaruan status pesanan dari situs web saat ini

• Hasil pemrosesan dikirim ke antrian MQ pada saat yang sama, dan didorong ke front end oleh layanan pengelola antrian MQ. Setelah front end menerima hasil pemrosesan, hasilnya ditampilkan di halaman front end.

• Front end memulai permintaan untuk membuat pesanan, membawa nomor pesanan dan alamat panggilan balik pembaruan status pesanan situs web saat ini, dan memanggil layanan manajer antrian MQ (ini adalah layanan mikro yang dikembangkan dengan python, dan saya tidak punya waktu untuk memilahnya kode untuk saat ini)

• Memulai permintaan SSE ke backend layanan manajemen antrean MQ, terus menunggu hingga layanan pengelola antrean MQ selesai, dan mengembalikan hasilnya.

• Setelah menerima permintaan, layanan pengelola antrian MQ backend langsung mengirimkan informasi pesanan ke antrian MQ.

• Server GPU mendengarkan antrian MQ. Setelah mendapatkan informasi pesanan, ia mulai memanggil model AI untuk diproses. Setelah pemrosesan selesai, ia akan melakukan dua hal:

• Seluruh proses tidak melibatkan komunikasi langsung antara situs web dan server GPU. Ini diteruskan melalui layanan manajer antrian MQ, dan file ditransfer melalui penyimpanan R2 volume pesanan terlalu besar, GPU dapat ditambahkan kapan saja. Server tidak memerlukan penyesuaian apa pun pada situs web.

• 9. Diagram arsitektur keseluruhannya adalah sebagai berikut:

• 10.Solusi implementasi lainnya

• Unggah hasil pemrosesan ke penyimpanan cloudfare r2, dan hubungi alamat panggilan balik pembaruan status pesanan situs web saat ini untuk memperbarui status pesanan

• Setelah front-end membuat pesanan, halaman terus memeriksa status pesanan melalui polling hingga pesanan selesai.

• Ada program lain di backend yang secara teratur memindai database dan mendapatkan pesanan dengan status pesanan tertunda. Setelah mendapatkan informasi pesanan, mereka mulai memanggil model AI untuk diproses Selesai:

• 11. Jika Anda memiliki anggaran, Anda juga dapat mempertimbangkan untuk menggunakan layanan API runpod secara langsung. Anda tidak perlu mengimplementasikan sendiri server pengelola antrian MQ, cukup integrasikan SDK-nya.

• Kode referensi

 impor runpodSdk, { EndpointCompletedOutput, EndpointIncompleteOutput } dari 'runpod-sdk'async fungsi FetchProcessByRunPod(data: any): Janji<EndpointIncompleteOutput |
// const serverUrl = `${UE_PROCESS_API}/create_docker`
// https://docs.runpod.io/serverless/endpoints/job-operations
const runpod = runpodSdk("N5Jxxxxxxxxxxxxx");
titik akhir const = runpod.endpoint("1zgk5xi3ew77pv");
console.log("mulai memanggil titik akhir runpod,data:",data)
titik akhir pengembalian?.run({"input": data,
})}

• Jika Anda perlu sepenuhnya menggunakan fungsi perluasan gambar AI dalam kode sumber proyek saat ini, Anda harus memilih solusi seperti yang dijelaskan di atas dan mengubah logika pembuatan pesanan dan memantau status pesanan di app/[lang]/(editor )/editor/view.tsx mengajukan! ! !

Pertimbangan lainnya

• Setiap kali halaman dimodifikasi untuk memuat konten baru, Anda perlu menjalankan perintah yarn extract untuk mengekstrak salinan baru ke dalam file internasional, dan menjalankan perintah yarn translate untuk menerjemahkan salinan ke bahasa yang sesuai.

• Jika ada artikel blog baru, Anda perlu menjalankan perintah yarn translate untuk menerjemahkan konten blog baru ke dalam bahasa yang sesuai.

• Penerjemahan melibatkan pemanggilan API. Anda perlu mengajukan permohonan kunci API terlebih dahulu, lalu memodifikasi kunci API di scripts/openai-chat.js

• Jika Anda perlu menambah atau mengurangi konten multi-bahasa, Anda perlu memodifikasi tiga file berikut: framework/locale/locale.ts framework/locale/localeConfig.js framework/locale/messagesLoader.ts

Proses situs web baru berdasarkan templat

1. Hasilkan konten situs web

• Langsung gunakan perintah node scripts/generator-website.js untuk menghasilkan konten website (perintah ini akan menghasilkan salinan, TDK, dan judul blog yang terkait dengan kata kunci yang ditentukan)

• Anda perlu mengubah kata kunci dan deskripsi terlebih dahulu, lalu menjalankan perintah

 // Kata kunci situs web const kata kunci = 'perluas gambar ai'
// Situs web harus dideskripsikan const Description = 'Gunakan teknologi AI untuk memperluas gambar, sekaligus memastikan bahwa gambar asli tetap tidak berubah, memperluas konten di sekitarnya, dan menjaga kesinambungan konten dengan gambar asli

• Ubah informasi konfigurasi di config/site.ts

2. Ganti logo website, judul dan informasi lainnya

• Tempatkan logo Anda sendiri favicon.ico di direktori public/ dan langsung ganti file aslinya

• Ubah nama domain di public/sitemap.xml

• Ubah informasi konfigurasi di .env dan .env.production. Silakan lihat komentar untuk persyaratan modifikasi spesifik.

3.Inisialisasi database

• Proyek saat ini menggunakan prisma sebagai kerangka ORM. Struktur tabel dideklarasikan dalam file skema.prisma

 // Perintah ini akan menghasilkan tabel database berdasarkan deklarasi struktur tabel dan menginisialisasi data tabel. Jika ada pembaruan bidang tabel baru, Anda perlu menjalankan perintah saat ini benang pg:migrasi
// Untuk perintah operasi lainnya, disarankan untuk membaca dokumentasi resmi prisma secara langsung.

4. Ubah warna situs web

• Informasi pencocokan warna situs web disimpan di file tailwind.config.ts. Jika Anda perlu mengubah pencocokan warna, langsung ubah konten di file tailwind.config.ts.

5. Penerapan sistem

• Kirimkan kode ke github.com dan kemudian gunakan vercel untuk mengaitkan gudang kode untuk penerapan.

Perbarui catatan

• 【19-10-2024】 Selesaikan Error: ENOENT: no such file or directory xxx/.next/fallback-build-manifest.json dengan memperbaiki "@lingui/swc-plugin": "4.0.8" , versi terselesaikan. Hapus direktori node_modules lokal dan instal ulang dependensi untuk menyelesaikan masalah.

• Tambahkan tangkapan layar referensi konfigurasi masuk Google

• 【20-10-2024】 Selesaikan masalah Error: Cannot find module 'canvas' saat memulai dengan menambahkan plugin abaikan webpack. Optimalkan metode pemuatan file multi-bahasa.

Komponen UI yang digunakan dalam proyek saat ini

• 1. Situs web komponen kode tailwindcss murni

  Beberapa kode komponen yang sudah jadi dapat disalin langsung dari situs web dan diimplementasikan sepenuhnya berdasarkan tw

• 2. Kerangka UI berbasis komponen-nextui.org

  Menyediakan penggunaan langsung berdasarkan komponen yang dienkapsulasi

• 3.ikon komponen-reaksi-ikon

  Menyediakan beberapa set ikon default yang dapat digunakan secara langsung

• 4. Pembuatan halaman harga

  mengirimkan

• 5.Internasionalisasi

  Menghasilkan file internasionalisasi secara dinamis

• 6.Blog MDX

  Hasilkan konten blog berdasarkan MDX

• 7.Pusat Konfigurasi Google Auth

  Konfigurasikan parameter yang diperlukan untuk login Google

referensi konfigurasi google autentikasi

• Dalam lingkungan pengembangan proyek saat ini, alamat proxy khusus digunakan untuk mengatasi masalah tidak dapat menelepon google.com secara lokal. Untuk konfigurasi spesifik, lihat kode config/auth-config.ts. Lingkungan produksi tidak terpengaruh

Selesaikan masalah prompt pembangkit prisma saat membangun vercel

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

Selesaikan masalah tidak dapat membuka login Google secara lokal

• Saat mengklik Google untuk masuk, halaman meminta There is a problem with the server configuration. Backend meminta [auth][error] OperationProcessingError: "response" body "issuer" property does not match the expected value , ubah sebagai berikut

• Ubah file node_modules/@auth/core/node_modules/oauth4webapi/build/index.js atau node_modules/oauth4webapi/dist/index.js

• Setelah modifikasi, Anda perlu menghapus direktori .next secara manual dan mengkompilasi ulang.

• Baris 1034 atau 1003 atau 1237 (versi berbeda mungkin berbeda), beri komentar pada pengecualian yang diberikan. Beberapa versi baru mungkin belum tentu ada di baris ini. Anda dapat merujuk ke poin berikut untuk menemukan pesan kesalahan, lalu mengomentarinya.

 function validasiIssuer(diharapkan, hasil) {
if (result.claims.iss !== diharapkan) {// throw new OPE('unexpected JWT "iss" (issuer) klaim value');
}
hasil pengembalian;}

• Baris 250 atau 238 (mungkin berbeda di versi berbeda), komentari pengecualian yang diberikan

 if (URL baru(json.issuer).href !== diharapkanIssuerIdentifier.href) {
// throw new OPE('"response" body "issuer" tidak cocok dengan "expectedIssuer"');}

• Setelah modifikasi, Anda perlu menghapus direktori .next secara manual dan menjalankan run dev lagi.

Meningkatkan kepadatan kata suatu kata dalam suatu bahasa

• Ubah kode bahasa dan kata target untuk menyesuaikan kepadatan kata di scripts/add-word-locale.js

• Jalankan perintah di direktori cd scripts/: bun run add-word-locale.js atau node add-word-locale.js

Pernyataan hak cipta

• Proyek ini mengadopsi lisensi sumber terbuka MIT, harap patuhi isi perjanjian

• Jika Anda bersedia, silakan tinggalkan link ke website saya: https://www.ai-outpainting.com/ Terima kasih banyak!

akhirnya

• Jika proyek ini bermanfaat bagi Anda, silakan beri bintang, terima kasih banyak!

• Jika Anda memiliki pertanyaan teknis, silakan tambahkan WeChat untuk berkomunikasi: fafafa-ai

• Iklan kecil: Situs web ai-outpainting saat ini menerima pengiriman tautan eksternal berbayar. Teman yang membutuhkan dapat menghubungi saya.