Einen GPT-Client fuer iOS mit SwiftUI erstellen

KI-generierten Text zu deiner iOS-App mit SwiftUI und GPT hinzufuegen

Dieses Tutorial zeigt, wie man einen GPT-Client fuer iOS mit SwiftUI erstellt. Es behandelt das Senden einer Anfrage an die OpenAI GPT API und das Dekodieren der JSON-Antwort, um den generierten Text anzuzeigen.

Hinweis: Das Tutorial konzentriert sich auf die Logik zum Senden und Empfangen von Anfragen an und von der OpenAI GPT API; es behandelt nicht alle UI-Details beim Erstellen der App.

Den vollstaendigen Code, einschliesslich der UI-Implementierung, findest du in meinem GitHub-Repo mit funktionierenden Beispielen fuer iOS- und Android-Apps.

Was ist GPT?

GPT (Generative Pre-trained Transformer) ist ein Machine-Learning-Modell, das natuerlichsprachlichen Text generiert. Es ist ein vortrainiertes Sprachmodell, das fuer bestimmte Aufgaben fein abgestimmt werden kann, wie zum Beispiel das Generieren von Text als Antwort auf einen Prompt.

Was werden wir bauen?

Wir werden eine App bauen, die Benutzereingaben aus einem TextField nimmt, sie an die GPT API sendet, die Antwort empfaengt und das JSON dekodiert, um die Antwort als animierten Text anzuzeigen. Die sendRequest-Funktion handhabt die Kommunikation mit der OpenAI GPT API: sie kodiert die Frage des Benutzers als JSON-Payload und sendet eine POST-Anfrage. Wenn die API mit Statuscode 200 antwortet, extrahiert die Funktion den generierten Text aus der JSON-Antwort und zeigt ihn als animierten Text mit SwiftUIs Text-View an. Wenn die API mit einem Fehler antwortet, zeigt die Funktion stattdessen eine Fehlermeldung an.

Hier ist ein animierter Screenshot der fertigen App:

Eine Anfrage an die GPT API senden

Unten ist der Code, der notwendig ist, um eine Anfrage an die GPT API zu senden. Eine Schritt-fuer-Schritt-Erklaerung folgt.

func sendRequest(question: String) async throws {
 guard!question.isEmpty else { return }
 let requestDto = RequestDto(prompt: question, max_tokens: 100, model: "text-davinci-003")
 guard let payload = try? JSONEncoder().encode(requestDto) else { return }
 
 let url = URL(string: "https://api.openai.com/v1/completions")!
 
 var request = URLRequest(url: url)
 request.httpMethod = "POST"
 request.httpBody = payload
 request.setValue("Bearer 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", forHTTPHeaderField: "Authorization")
 request.setValue("application/json", forHTTPHeaderField: "Content-Type")
 
 isLoading = true
 let (data, response) = try await URLSession.shared.data(for: request)
 
 guard (response as? HTTPURLResponse)?.statusCode == 200 else{
  DispatchQueue.main.async {
   self.answer = "Unable to receive answer."
   self.isLoading = false
  }
  return
 }
 
 let json = try? JSONSerialization.jsonObject(with: data, options: [])
 if let json = json as? [String: Any],
  let choices = json["choices"] as? [[String: Any]],
  let firstChoice = choices.first,
  let text = firstChoice["text"] as? String {
  DispatchQueue.main.async {
   self.answer = text.replacingOccurrences(of: "^\\s*", with: "", options:.regularExpression)
   self.isLoading = false
  }
 }
}

Der obige Quellcode ermoeglicht der App die Kommunikation mit der OpenAI GPT API. Unten ist eine kurze Erklaerung der Hauptteile des Codes:

Das async-Keyword zeigt an, dass die Funktion asynchron ist, sodass sie im Hintergrund laeuft und den Haupt-Thread nicht blockiert.
Ein RequestDto-Objekt wird mit der Frage des Benutzers, der maximalen Anzahl der zu generierenden Tokens und dem zu verwendenden GPT-Modell erstellt.
Die payload-Variable wird durch Kodierung des RequestDto-Objekts als JSON erstellt.
Die url-Variable wird auf den OpenAI GPT API-Endpunkt gesetzt.
Die request-Variable wird mit der URL erstellt und die HTTP-Methode auf POST gesetzt. Die Payload wird als HTTP-Body zugewiesen, und das Autorisierungstoken und der Content-Type werden als HTTP-Header-Felder gesetzt.
Die data- und response-Variablen werden durch Senden der HTTP-Anfrage mit session.data(for: request) erhalten.
Eine guard-Anweisung prueft, ob die API-Antwort einen 200-Statuscode hat. Wenn nicht, wird answer auf “Unable to receive answer” gesetzt und isLoading auf false.
Die json-Variable wird durch Deserialisierung der Antwortdaten mit JSONSerialization.jsonObject(with: data, options: []) erstellt.
Der generierte Text wird aus json extrahiert und in answer angezeigt.

Hinweis: Der Authorization-Header im obigen Code enthaelt einen API-Schluessel, der dem Entwickler (mir) gehoert. Wenn du diesen Code verwendest, ersetze diesen API-Schluessel durch deinen eigenen.

Um einen OpenAI API-Schluessel zu erhalten, erstelle ein Konto auf openai.com, gehe zum API-Bereich und folge den Anweisungen, um einen Schluessel zu erstellen. Halte deinen API-Schluessel sicher und teile ihn nicht.

Fazit

In diesem Tutorial haben wir eine iOS-App gebaut, die Benutzereingaben nimmt, sie an die OpenAI GPT API sendet und den generierten Text als animierten SwiftUI Text anzeigt.

Ich hoffe, du fandest dieses Tutorial informativ und dass es dich inspiriert hat, dein eigenes Projekt mit der GPT API zu erstellen.

Der vollstaendige Code ist in meinem Repository mit funktionierenden iOS- und Android-Beispielen verfuegbar: https://github.com/twissmueller/mobile-snippets

Vielen Dank fuers Lesen!

Ramp Me Up, Scotty!