Erstellen Sie Ihre eigene AI -NFT mit Openai und ThirdWeb

Heim

Nachricht

18. Mai 2025

DouglasAnderson

Wenn Sie die faszinierende Welt der KI-generierten NFTs erkunden möchten, hilft Ihnen dieser detaillierte Leitfaden, Ihren eigenen KI-NFT-Generator zu erstellen. Durch die Nutzung von Tools wie OpenAI's DALL-E und Thirdweb's Engine können Sie die kreative Kraft der KI mit der robusten Funktionalität der Blockchain-Technologie kombinieren, um einzigartige und personalisierte NFTs mühelos zu prägen. Egal, ob Sie ein Technikexperte oder ein neugieriger Anfänger sind, dieser Schritt-für-Schritt-Leitfaden führt Sie durch den gesamten Prozess.

Wichtige Punkte

Lernen Sie, einen KI-gestützten NFT-Generator zu erstellen.
Nutzen Sie OpenAI's DALL-E, um Bilder aus Textvorgaben zu generieren.
Verwenden Sie Thirdweb Engine, um KI-generierte Bilder als NFTs zu prägen.
Bereitstellen von Smart Contracts für die Verwaltung von NFTs über das Thirdweb-Dashboard.
Verstehen Sie die Integration von Frontend-Anwendungen mit Blockchain-Technologie.

Erstellen eines KI-NFT-Generators: Ein Schritt-für-Schritt-Leitfaden

Einführung in die KI-NFT-Generierung

Die Verschmelzung von künstlicher Intelligenz und Blockchain-Technologie hat unglaubliche Möglichkeiten für Kreativität und Innovation geschaffen. Dazu gehört der KI-NFT-Generator, ein Werkzeug, das Nutzern ermöglicht, einzigartige und personalisierte Non-Fungible Tokens (NFTs) mit KI-Algorithmen zu erstellen. Durch die Kombination der Bildgenerierungsfähigkeiten der KI mit den Sicherheits- und Eigentumsfunktionen der Blockchain bieten diese Generatoren eine neue Grenze für Schaffende und Sammler.

Dieses Tutorial führt Sie durch den Aufbau Ihres eigenen KI-NFT-Generators, mit Fokus auf die Nutzung von OpenAI's DALL-E für die Bildgenerierung und Thirdweb's Engine zum Prägen dieser KI-generierten Bilder als NFTs.

Voraussetzungen

Bevor Sie in dieses spannende Projekt eintauchen, stellen Sie sicher, dass Sie Folgendes haben:

Grundkenntnisse in React und Next.js: Sie benötigen Vertrautheit mit JavaScript, React-Komponenten und dem Next.js-Framework, um die Frontend-Anwendung zu erstellen.
Thirdweb-Konto: Sie benötigen ein kostenloses Thirdweb-Konto, um den Smart Contract bereitzustellen und die Engine zum Prägen von NFTs zu verwenden. Melden Sie sich bei Thirdweb an.
OpenAI API-Schlüssel: Der Zugriff auf DALL-E für die Bildgenerierung erfordert einen OpenAI API-Schlüssel. Stellen Sie sicher, dass Sie einen gültigen Schlüssel haben und die Abrechnung in Ihrem OpenAI-Konto eingerichtet haben. Holen Sie sich Ihren Schlüssel von OpenAI.
Metamask Wallet: Sie benötigen eine Metamask-Wallet, um mit Ihrer Anwendung zu interagieren und Transaktionen zu signieren. Installieren Sie Metamask als Browsererweiterung von Metamask.
Node.js und npm: Stellen Sie sicher, dass Node.js und npm (Node Package Manager) auf Ihrem System installiert sind.

Mit diesen Tools und Konten sind Sie bereit, mit dem Bau Ihres KI-NFT-Generators zu beginnen.

Bereitstellen des NFT-Smart-Contracts mit Thirdweb

Der erste Schritt ist das Bereitstellen eines NFT-Smart-Contracts.

Bereitstellung des Smart Contracts

Dieser Smart Contract bildet die Grundlage Ihrer NFT-Sammlung, definiert ihre Eigenschaften und sichert das Eigentum. So stellen Sie ihn mit dem benutzerfreundlichen Dashboard von Thirdweb bereit:

Navigieren Sie zum Tab „Contracts“: Melden Sie sich in Ihrem Thirdweb-Konto an und klicken Sie im Dashboard auf den Tab „Contracts“.
Klicken Sie auf „Deploy Contract“: Klicken Sie im Tab „Contracts“ auf die Schaltfläche „Deploy Contract“.
Durchsuchen Sie die Verträge und wählen Sie NFT Collection: Finden Sie den NFT-Bereich und wählen Sie den NFT Collection Smart Contract aus.
Konfigurieren Sie die Vertragsmetadaten: Passen Sie Ihren Vertrag an, indem Sie einen Namen (z.B. „AI NFT Generator“), ein Symbol, eine Beschreibung und ein Bild angeben.
Legen Sie Lizenzgebühren und Primärverkaufsinformationen fest: Geben Sie die Empfängeradresse und den Prozentsatz für Lizenzgebühren bei Sekundärverkäufen sowie die Adresse und den Prozentsatz für Einnahmen aus Primärverkäufen an.
Wählen Sie Netzwerk/Kette: Wählen Sie das Blockchain-Netzwerk, auf dem Sie Ihren Smart Contract bereitstellen möchten. Für Tests sollten Sie ein Testnet wie Sepolia in Betracht ziehen.
Bereitstellen des Smart Contracts: Klicken Sie nach der Konfiguration der Vertragsparameter auf die Schaltfläche „Deploy Now“ und bestätigen Sie die Transaktion in Ihrer Metamask-Wallet.

Sobald die Transaktion auf der Blockchain bestätigt ist, ist Ihr NFT-Smart-Contract erfolgreich bereitgestellt.

Einrichten der Frontend-Anwendung

Nun ist es an der Zeit, die Frontend-Anwendung aufzubauen.

Einrichtung des Frontends

Wir verwenden dafür Next.js.

Erstellen Sie einen neuen Ordner im API-Verzeichnis: Um eine Prägefunktion zu erstellen, benötigen Sie einen API-Aufruf. Erstellen Sie einen neuen Ordner namens „mint“ im API-Verzeichnis und eine Datei namens route.ts, um alles zu verknüpfen und bereitzustellen.
Yarn add thirdweb: Installieren Sie thirdweb und OpenAI, um Ihr Projekt auszuführen. Geben Sie `Yarn add thirdweb` ein, um es zu installieren.
Yarn add openai: Um OpenAI auf Ihrem lokalen Host zu verwenden, installieren Sie es mit dem Befehl `Yarn add openai`.
Erstellen Sie eine neue Datei: Gehen Sie zu Src und erstellen Sie eine neue Datei namens clients.ts. Diese enthält Ihren API-Schlüssel für OpenAI und wird der Ort sein, an dem alle Ihre Aktionen ausgeführt werden. Sie enthält auch die öffentliche Client-ID für Thirdweb.
Importieren Sie die Thirdweb Connect-Komponente: Erstellen Sie eine Wallet-Verbindungsfunktion, die auf der Seite verwendet werden kann.
Installieren Sie alle Abhängigkeiten: Verwenden Sie ein Befehlszeilentool, um alle notwendigen Abhängigkeiten zu installieren.

Erstellen eines Frontends mit Thirdweb-Komponenten

Mit Thirdweb-Komponenten können Sie schnell ein Frontend erstellen. So geht’s:

text

import { ConnectButton } from "@thirdweb-dev/react";
export default function Home() {
  return (
    
      {/* Wallet-Verbindungsknopf */}
      
    
  );
}

Importieren Sie die `ConnectButton`-Komponente von `@thirdweb-dev/react`.
Verwenden Sie die Komponente in Ihrer Anwendung.
Das war’s! Ihre Nutzer können sich mit einem Klick mit Ihrer Anwendung verbinden.

Verbindungsknopf

Implementierung von OpenAI's DALL-E für die Bildgenerierung

DALL-E ist ein leistungsstarkes Werkzeug zur Generierung von Bildern aus Textbeschreibungen. So integrieren Sie es in Ihren KI-NFT-Generator:

Holen Sie sich den Thirdweb API-Schlüssel: Melden Sie sich in Ihrem Thirdweb-Konto an und navigieren Sie zu Ihrem Dashboard, um Ihren API-Schlüssel zu finden.
Richten Sie Umgebungsvariablen ein: Erstellen Sie eine .env-Datei in Ihrem Next.js-Projekt und speichern Sie Ihren OpenAI API-Schlüssel und Thirdweb API-Schlüssel als Umgebungsvariablen.
Erstellen Sie eine OpenAI-Instanz: Erstellen Sie eine Instanz unter /app/generate.
Implementieren Sie die API-Route für die Bildgenerierung: Schreiben Sie Code, um ein Bild zu generieren und es auf der Blockchain zu prägen.

text

export default async function POST(req: NextRequest) {
  const apiKey = process.env.OPENAI_API_KEY;
  if (!apiKey) {
    throw new Error("Fehlender OpenAI API-Schlüssel");
  }
  const {prompt} = await req.json();
  if (!prompt || prompt === "") {
    return new Response("Bitte geben Sie eine Eingabe ein", { status: 400 });
  }
  const openai = new OpenAI({
    apiKey,
  });
  const response = await openai.images.generate({
    prompt,
    n: 1,
    size: "512x512",
  });
  const image_url = response.data[0].url;
  return NextResponse.json({ data: image_url });
}

Dieser Code sendet eine Anfrage an die OpenAI-API, generiert ein Bild basierend auf der Eingabe und gibt die Bild-URL zurück.

Prägen von NFTs mit Thirdweb Engine

Thirdweb's Engine vereinfacht den Prozess des Prägens von NFTs, indem es die Komplexitäten von Blockchain-Transaktionen verwaltet. So integrieren Sie die Engine:

Konfigurieren Sie die Engine-Einstellungen: Melden Sie sich im Thirdweb-Dashboard an, erstellen Sie Ihre Engine-Instanz und holen Sie sich den Engine-Endpunkt.
Erstellen Sie /Api/Mint.ts:

text

import { ThirdwebSDK } from "@thirdweb-dev/sdk";
export const mint = async (address: string, imageUri: string) => {
  const sdk = ThirdwebSDK.fromPrivateKey(process.env.THIRDWEB_SECRET_KEY as string, "sepolia");
  const contract = await sdk.getContract(process.env.NEXT_PUBLIC_CONTRACT_ADDRESS as string, "nft-collection");
  const tx = await contract.mintTo(address, {
    name: "AI",
    description: "NFT",
    image: imageUri,
  });
  const receipt = tx.receipt;
  const tokenId = tx.id;
  const nft = await tx.data();
  return nft;
}

Verwenden Sie thirdwebSDK, um auf die Blockchain-API zuzugreifen, die Transaktionen wie den Handel mit Kryptowährungen, das Erstellen von NFTs und das Bereitstellen von Anwendungen ermöglicht.

Gestaltung der Benutzeroberfläche

Um eine benutzerfreundliche und interaktive Benutzeroberfläche zu erstellen, müssen Sie HTML, CSS und TypeScript-Code schreiben. Thirdweb macht diesen Prozess einfach.

Gestalten Sie Ihr Layout: Richten Sie die Struktur mit display, flexDirection, alignItems, maxWidth und margin zentriert für ein ansprechendes Design ein.
Fügen Sie Komponenten hinzu: Integrieren Sie connectWallet.js, damit Nutzer sich mit ihren sozialen Konten anmelden können.
Anzeigen von NFTs: Wenn ein Bild generiert wird, ist es wichtig, Ihre Arbeit dem Nutzer anzuzeigen.

Mit diesen Schritten ist Ihr Projekt vollständig eingerichtet.

Schritt-für-Schritt-Projekteinrichtung

Einrichten des Smart Contracts

Zuallererst müssen wir für die Nutzung unseres KI-NFT-Generators einen NFT-Smart-Contract erstellen, damit unsere App alle von uns erstellten Bilder prägen kann.

Erstellen Sie einen ERC721-Smart-Contract: Klicken Sie im Thirdweb-Dashboard auf „Contracts“, wählen Sie „Deploy Smart Contracts“ und navigieren Sie zum Ordner „NFTs“.
Wählen Sie den Smart Contract „NFT Collection“ zum Bereitstellen aus.
Geben Sie den Namen, das Symbol und die Beschreibung ein und laden Sie optional eine Datei hoch.
Richten Sie alle gewünschten Einstellungen ein und klicken Sie auf „Deploy Now“.
Bestätigen Sie die Vereinbarung, indem Sie auf „Confirm“ klicken. Nun haben Sie einen Smart Contract.

Einrichtung des Smart Contracts

So prägen Sie das NFT

Nun, da Sie den Smart Contract haben, hier der Code, um das NFT auf der Blockchain zu prägen:

Zugriff auf den Smart Contract erhalten: Erstellen Sie eine neue Konstante.
Geben Sie „contract“ ein und lassen Sie useContract zurückkehren, um fortzufahren.
Schreiben Sie eine asynchrone/On-Click-Funktion mit TypeScript, um eine Blockchain-Transaktion durchzuführen:

text

// Prägen des NFT in die verbundene Wallet
const mintNft = async () => {
  try {
    // Vor dem Prägen weisen Sie das SDK an, kostenlose NFTs auf die angegebene Wallet zu beanspruchen.
    await contract.erc721.claimTo(address, 1);
    // Ladezustand anzeigen
    alert("NFT erfolgreich geprägt!");
  } catch (error) {
    console.error("Fehler beim Prägen des NFT", error);
  }
}

NFT-Prägung

So erhalten Sie kostenloses Test-ETH

Erstellen Sie ein Konto bei Alchemy: Mit einem Alchemy-Konto können Sie verschiedene Funktionen testen. Wenn Sie neu auf der Website sind, müssen Sie es installieren.
Stellen Sie Ihre Kette auf Sepolia oder Mumbai ein: Dies ermöglicht die Nutzung eines Testnets ohne echte Kryptokosten.
Fordern Sie Test-ETH auf der Kette an: Verwenden Sie Ihre persönliche Wallet-Adresse, um kostenloses Test-ETH von ihrem Faucet zu erhalten.

Test-ETH

*Hinweis: Überprüfen Sie immer, wie eine Wallet mit Verträgen interagiert, bevor Sie Transaktionen signieren.*

Verwendung des NFT-Generators

Generieren eines NFT

Nach dem Einrichten des Codes sind hier die Schritte zur Nutzung des NFT-Generators:

Verbinden Sie Ihre Wallet: Klicken Sie auf die Eingabeaufforderung für die verbundene Wallet und dann auf den Smart Contract.
Wählen Sie ein Testnet: Wählen Sie Ihre Kette auf Sepolia oder Mumbai, um Mainnet-Kosten oder potenzielle Risiken zu vermeiden.
Geben Sie eine Eingabe ein: Seien Sie so beschreibend wie möglich für die besten Ergebnisse.
Drücken Sie „Generate“: Die KI generiert ein Bild basierend auf Ihrer Eingabe.

NFT-Generierung

Häufig gestellte Fragen zu KI-NFT-Generatoren

Was ist ein KI-NFT-Generator?

Ein KI-NFT-Generator ist ein Werkzeug, das künstliche Intelligenz verwendet, um einzigartige und personalisierte Non-Fungible Tokens (NFTs) zu erstellen. Es nutzt KI-Algorithmen, um Bilder, Musik oder andere Formen digitaler Kunst zu generieren, die als NFTs auf einer Blockchain geprägt werden können.

Was ist Thirdweb Engine?

Thirdweb Engine ist ein HTTP-Server, der es Ihnen ermöglicht, jede On-Chain-Transaktion aufzurufen, ohne dass Nutzer Krypto halten oder Gas bezahlen müssen. Er vereinfacht Blockchain-Interaktionen und erleichtert das Prägen und Verwalten von NFTs.

Was ist OpenAI DALL-E?

OpenAI's DALL-E ist ein leistungsstarkes KI-Modell, das Bilder aus Textbeschreibungen generieren kann. Es wird häufig verwendet, um einzigartige und fantasievolle Visuals zu erstellen, was es zu einer hervorragenden Wahl für die KI-NFT-Generierung macht.