ai outpainting com
1.0.0
https://www.ai-outpainting.com
Startseite 
Preisseite 
Blogliste 
Bildbearbeitung 
1. KI-Bilderweiterungswebsite, entwickelt auf Basis von nextjs 14 und tailwindcss3, Website-Adresse: https://www.ai-outpainting.com/
2. Die Website muss mit dem Back-End-KI-Modell verwendet werden. Das Back-End-Modell muss selbst erstellt werden.
Modelladresse: https://huggingface.co/spaces/fffiloni/diffusers-image-outpaint
3. Die Internationalisierung wird mithilfe von Lingui implementiert. Der Vorteil gegenüber next-intl besteht darin, dass nicht für jede Kopie ein Schlüssel generiert werden muss. Die Kopie wird über Befehle extrahiert, um mehrsprachige Dateien zu generieren. Führen Sie dann eine Übersetzung basierend auf mehrsprachigen Dateien durch
4. Das Projekt hat einige automatisierte Skripte geschrieben, z. B. die automatische Übersetzung internationaler Inhalte und die automatische Übersetzung von Blog-Inhalten. Diese müssen bei Bedarf manuell ausgeführt werden
5. Das Projekt basiert auf der Datenbank, dem Cloudfare R2-Speicher, den für die Google-Anmeldung erforderlichen Parametern und den Paypal-Zahlungsparametern. Diese Parameter werden in den Dateien .env und .env.produktion konfiguriert.
6. Verwenden Sie next-auth, um Google Login zu integrieren. Wenn Sie sich während der lokalen Entwicklung bei Google anmelden müssen, müssen Sie einen Teil des Quellcodes ändern, andernfalls wird ein Fehler gemeldet. Spezifische Änderungen finden Sie in der Beschreibung unten.
7. Integrierte Paypal- und Stripe-Zahlung. Die Sandbox-Umgebung wird für die lokale Entwicklung verwendet. Für die formale Umgebung müssen formale Paypal-Parameter in der Datei .env.produktion konfiguriert werden.
8. Die Art und Weise, wie das aktuelle Projekt das KI-Modell aufruft, ist ungefähr wie folgt:
Laden Sie die Verarbeitungsergebnisse in den Cloudfare R2-Speicher hoch und rufen Sie die Rückrufadresse für die Aktualisierung des Bestellstatus der aktuellen Website auf
Die Verarbeitungsergebnisse werden gleichzeitig an die MQ-Warteschlange gesendet und vom MQ-Warteschlangenmanagerdienst an das Front-End weitergeleitet. Nachdem das Front-End die Verarbeitungsergebnisse empfangen hat, werden die Ergebnisse auf der Front-End-Seite angezeigt.
Das Front-End initiiert eine Anforderung zum Erstellen einer Bestellung, übermittelt die Bestellnummer und die Rückrufadresse zur Aktualisierung des aktuellen Website-Bestellstatus und ruft den MQ-Warteschlangenmanagerdienst auf (dies ist ein in Python entwickelter Mikrodienst, und ich habe keine Zeit, das zu klären Code vorerst)
Initiieren Sie eine SSE-Anfrage an das Backend des MQ-Warteschlangenverwaltungsdiensts, warten Sie weiter, bis der MQ-Warteschlangenmanagerdienst abgeschlossen ist, und geben Sie das Ergebnis zurück.
Nach Erhalt der Anforderung übermittelt der Backend-MQ-Warteschlangenmanagerdienst die Bestellinformationen direkt an die MQ-Warteschlange.
Der GPU-Server lauscht auf die MQ-Warteschlange und beginnt, das KI-Modell zur Verarbeitung aufzurufen. Nach Abschluss der Verarbeitung werden zwei Dinge ausgeführt:
Der gesamte Prozess beinhaltet keine direkte Kommunikation zwischen der Website und dem GPU-Server. Er wird über den MQ-Warteschlangenmanagerdienst weitergeleitet und die Dateien werden über den R2-Speicher übertragen. Dadurch wird das Kopplungsproblem zwischen dem GPU-Server und der Website gelöst Ist das Bestellvolumen zu groß, kann die GPU jederzeit hinzugefügt werden. Der Server erfordert keine Anpassungen an der Website.
9. Das Gesamtarchitekturdiagramm sieht wie folgt aus: 
10.Eine weitere Implementierungslösung
Laden Sie die Verarbeitungsergebnisse in den Cloudfare R2-Speicher hoch und rufen Sie die Rückrufadresse zur Aktualisierung des Bestellstatus der aktuellen Website auf, um den Bestellstatus zu aktualisieren
Nachdem das Frontend eine Bestellung erstellt hat, überprüft die Seite kontinuierlich den Bestellstatus durch Abfragen, bis die Bestellung abgeschlossen ist.
Es gibt andere Programme im Backend, die regelmäßig die Datenbank scannen und Bestellungen mit dem Bestellstatus „Ausstehend“ abrufen. Nach Erhalt der Bestellinformationen rufen sie das KI-Modell zur Verarbeitung auf. Nach Abschluss der Verarbeitung werden zwei Dinge ausgeführt getan werden:
11. Wenn Sie über das nötige Budget verfügen, können Sie auch den API-Dienst von runpod direkt nutzen. Sie müssen den MQ-Warteschlangenmanager-Server nicht selbst implementieren, sondern nur dessen SDK integrieren.
Referenzcode
importiere runpodSdk, { EndpointCompletedOutput, EndpointIncompleteOutput } aus der asynchronen Funktion 'runpod-sdk' fetchProcessByRunPod(data: any): Promise<EndpointIncompleteOutput |.
// 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)
Endpunkt zurückgeben?.run({"input": data,
})}Wenn Sie die AI-Bilderweiterungsfunktion im Quellcode des aktuellen Projekts vollständig nutzen müssen, müssen Sie eine Lösung wie oben beschrieben auswählen und die Logik zum Erstellen von Bestellungen und zum Überwachen des Bestellstatus im app/[lang]/(Editor ändern )/editor/view.tsx-Datei! ! !
Jedes Mal, wenn Sie die Seite ändern, um neuen Inhalt hinzuzufügen, müssen Sie den Befehl yarn extract ausführen, um die neue Kopie in die internationale Datei zu extrahieren, und den Befehl yarn translate ausführen, um die Kopie in die entsprechende Sprache zu übersetzen.
Wenn es neue Blog-Artikel gibt, müssen Sie den Befehl yarn translate ausführen, um den neuen Blog-Inhalt in die entsprechende Sprache zu übersetzen.
Bei der Übersetzung müssen Sie zuerst den API-Schlüssel beantragen und dann den API-Schlüssel in scripts/openai-chat.js ändern
Wenn Sie mehrsprachige Inhalte hinzufügen oder reduzieren müssen, müssen Sie diese drei Dateien ändern: Framework/locale/locale.ts Framework/locale/localeConfig.js Framework/locale/messagesLoader.ts
Verwenden Sie direkt den Befehl node scripts/generator-website.js, um Website-Inhalte zu generieren (dieser Befehl generiert Texterstellung, TDK und Blogtitel, die sich auf die angegebenen Schlüsselwörter beziehen).
Sie müssen zuerst die Schlüsselwörter und die Beschreibung ändern und dann den Befehl ausführen
// Website-Keyword const keyword = 'Bild-AI erweitern' // Die Website sollte beschrieben werden const description = 'Verwenden Sie KI-Technologie, um das Bild zu erweitern und gleichzeitig sicherzustellen, dass das Originalbild unverändert bleibt, den umgebenden Inhalt erweitert und die Kontinuität des Inhalts mit dem Originalbild gewahrt bleibt
Ändern Sie die Konfigurationsinformationen in config/site.ts
Platzieren Sie Ihr eigenes Logo favicon.ico im Verzeichnis public/ und ersetzen Sie direkt die Originaldatei
Ändern Sie den Domänennamen in public/sitemap.xml
Ändern Sie die Konfigurationsinformationen in .env und .env.produktion. Die spezifischen Änderungsanforderungen finden Sie in den Kommentaren.
Das aktuelle Projekt verwendet Prisma als ORM-Framework. Die Tabellenstruktur wird in der Datei schema.prisma deklariert. Um es zum ersten Mal zu verwenden, müssen Sie den folgenden Befehl ausführen
// Dieser Befehl generiert eine Datenbanktabelle basierend auf der Tabellenstrukturdeklaration und initialisiert die Tabellendaten. Wenn neue Tabellenfeldaktualisierungen vorliegen, müssen Sie den aktuellen Befehl „garn pg:migrate“ ausführen // Für andere Betriebsbefehle wird empfohlen, direkt die offizielle Prisma-Dokumentation zu lesen.
Die Farbanpassungsinformationen der Website werden in der Datei tailwind.config.ts gespeichert. Wenn Sie die Farbanpassung ändern müssen, ändern Sie den Inhalt direkt in der Datei tailwind.config.ts.
Senden Sie den Code an github.com und verwenden Sie dann Vercel, um das Code-Warehouse für die Bereitstellung zuzuordnen. Bitte beachten Sie die entsprechenden Dokumente für den jeweiligen Prozess.
【19.10.2024】 Lösen Sie das Error: ENOENT: no such file or directory xxx/.next/fallback-build-manifest.json indem Sie „@lingui/swc-plugin“: „4.0.8“ reparieren. , Version gelöst. Löschen Sie das lokale Verzeichnis „node_modules“ und installieren Sie die Abhängigkeiten neu, um das Problem zu lösen.
Referenz-Screenshot der Google-Anmeldekonfiguration hinzufügen
【20.10.2024】 Lösen Sie das Problem des Error: Cannot find module 'canvas' indem Sie das Webpack-Ignorier-Plugin hinzufügen. Optimieren Sie die Lademethode mehrsprachiger Dateien.
1. Reine Tailwindcss-Codekomponenten-Website
Einige vorgefertigte Komponentencodes können direkt von der Website kopiert werden und werden vollständig auf Basis von tw implementiert
2. Komponentenbasiertes UI-Framework-nextui.org
Bietet eine direkte Nutzung basierend auf gekapselten Komponenten
3.Symbolkomponenten-Reaktionssymbole
Bietet mehrere Sätze von Standardsymbolen, die direkt verwendet werden können
4. Generierung der Preisseite
Shipixen
5.Internationalisierung
Generieren Sie dynamisch Internationalisierungsdateien
6.MDX-Blog
Generieren Sie Blog-Inhalte basierend auf MDX
7.Google Auth-Konfigurationscenter
Konfigurieren Sie die für die Google-Anmeldung erforderlichen Parameter
In der aktuellen Projektentwicklungsumgebung wird eine benutzerdefinierte Proxy-Adresse verwendet, um das Problem zu lösen, dass google.com nicht lokal aufgerufen werden kann. Informationen zur spezifischen Konfiguration finden Sie im Code config/auth-config.ts. Die Produktionsumgebung wird nicht beeinträchtigt
https://www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/vercel-caching-issue
Wenn Sie auf Google klicken, um sich anzumelden, wird auf der Seite die Meldung „ There is a problem with the server configuration. [auth][error] OperationProcessingError: "response" body "issuer" property does not match the expected value auf. Ändern Sie ihn wie folgt
Ändern Sie die Datei node_modules/@auth/core/node_modules/oauth4webapi/build/index.js oder node_modules/oauth4webapi/dist/index.js
Nach der Änderung müssen Sie das .next-Verzeichnis manuell löschen und neu kompilieren.
Zeile 1034 oder 1003 oder 1237 (verschiedene Versionen können unterschiedlich sein), kommentieren Sie die ausgelöste Ausnahme. Bei einigen neuen Versionen handelt es sich möglicherweise nicht unbedingt um diese Zeile. Sie können die folgenden Punkte verwenden, um die Fehlermeldung zu finden, und sie dann auskommentieren.
Funktion validierenIssuer(erwartet, Ergebnis) {
if (result.claims.iss !== erwartet) {// throw new OPE('unexpected JWT "iss" (issuer) Claim Value');
}
Ergebnis zurückgeben;}Kommentieren Sie in Zeile 250 oder 238 (kann in verschiedenen Versionen unterschiedlich sein) die ausgelöste Ausnahme
if (neue URL(json.issuer).href !== erwartetIssuerIdentifier.href) {
// throw new OPE('"response" body "issuer" does not match "expectedIssuer"');}Nach der Änderung müssen Sie das .next-Verzeichnis manuell löschen und run dev erneut ausführen.
Ändern Sie den Sprachcode und die Zielwörter, um die Wortdichte in scripts/add-word-locale.js anzupassen
Führen Sie den Befehl im Verzeichnis cd scripts/ aus: bun run add-word-locale.js or node add-word-locale.js
Dieses Projekt übernimmt die MIT-Open-Source-Lizenz. Bitte halten Sie sich an den Inhalt der Vereinbarung
Wenn Sie dazu bereit sind, hinterlassen Sie bitte einen Link zu meiner Website: https://www.ai-outpainting.com/ Vielen Dank!
Wenn das Projekt für Sie hilfreich ist, geben Sie ihm bitte einen Stern, vielen Dank!
Wenn Sie technische Fragen haben, fügen Sie bitte WeChat zur Kommunikation hinzu: fafafa-ai
Kleine Werbung: Die aktuelle Website von ai-outpainting akzeptiert die kostenpflichtige Einreichung externer Links. Freunde in Not können sich an mich wenden.
