Tutorial: llmChat SwiftUI

Cover Page

DUE Wed, 10/1, 2 pm

This tutorial can be completed on the iOS simulator.

The front-end work is mostly in writing a new network function, llmChat(appID:chatt:errMsg:), plus an additional couple of small changes to the rest of the code. We will build on the simpler code base from the first tutorial, llmPrompt.

Expected behavior

Carrying a “conversation” with an LLM:

Preparing your GitHub repo

• On your laptop, navigate to YOUR*TUTORIALS/
• Unzip your llmprompt.zip file. Double check that you still have a copy of the zip file for future reference!
• Rename your newly unzip llmprompt folder **llmchat**
• Check whether there’s a DerivedData folder in your swiftUIChatter folder; if so, delete it:

  laptop$ cd YOUR*TUTORIALS/llmchat/swiftUIChatter
  laptop$ ls -d DerivedData
  # if DerivedData exists:
  laptop$ rm -rf DerivedData
  

• Push your local YOUR*TUTORIALS/ repo to GitHub and make sure there’re no git issues:

  <summary>git push</summary>
  

  • Open GitHub Desktop and click on Current Repository on the top left of the interface
  • Click on your assignment GitHub repo
  • Add Summary to your changes and click Commit to main
  • If you have pushed other changes to your Git repo, click Pull Origin to synch up the clone on your laptop
  • Finally click on Push Origin to push changes to GitHub

Go to the GitHub website to confirm that your folders follow this structure outline:

  reactive
    |-- chatterd
    |-- chatterd.crt
    |-- llmchat
        |-- swiftUIChatter
            |-- swiftUIChatter.xcodeproj
            |-- swiftUIChatter    
    # and other files or folders

YOUR*TUTORIALS folder on your laptop should contain the chatter.zip file in addition.

appID

Since you will be sharing PostgreSQL database storage with the rest of the class, we need to identify your entries so that we forward only your entries to Ollama during your “conversation”. In your swiftUIChatterApp.swift file, add this appID property to your ChattViewModel:

    let appID = Bundle.main.bundleIdentifier

Note:

1. To avoid overflowing the PostgreSQL database on mada.eecs.umich.edu, we may periodically empty the database.
2. Ollama handles only one connection at a time, putting all other connections “on hold”. Try to limit your “conversations” with Ollama to be simple tests such as “Hi my name is Ishmael” then “What is my name?”, just to see that it can relate to previous interaction. If you experience long wait time trying to interact with Ollama it could be due to other classmates trying to access it at the same time.

llmChat(appID:chatt:errMsg:)

In ChattStore.swift, first add the following types outside your ChattStore class:

enum SseEventType { case Error, Message }

struct OllamaMessage: Codable {
    let role: String
    let content: String?
}

struct OllamaRequest: Encodable {
    let appID: String?
    let model: String?
    let messages: [OllamaMessage]
    let stream: Bool
}

struct OllamaResponse: Decodable {
    let model: String
    let created_at: String
    let message: OllamaMessage
    
    enum CodingKeys: String, CodingKey {
        // to ignore other keys
        case model, created_at, message
    }
}

Rename your llmPrompt(_:errMsg) function with the following signature:

    func llmChat(appID: String, chatt: Chatt, errMsg: Binding<String>) async {

Previously we constructed jsonObj Swift dictionary and serialize/encode it “manually” into a request body. In this tutorial, we’re going to rely on Swift Codable to do the encoding for us. Replace this block of code:

        let jsonObj: [String: Any] = [
            "model": chatt.username as Any,
            "prompt": chatt.message as Any,
            "stream": true
        ]
        guard let requestBody = try? JSONSerialization.data(withJSONObject: jsonObj) else {
            errMsg.wrappedValue = "llmPrompt: JSONSerialization error"
            return
        }

with:

        let ollamaRequest = OllamaRequest(
            appID: appID,
            model: chatt.username,
            messages: [OllamaMessage(role: "user", content: chatt.message)],
            stream: true
        )
        guard let requestBody = try? JSONEncoder().encode(ollamaRequest) else {
            errMsg.wrappedValue = "llmChat: JSONEncoder error"
            return
        }

Next replace llmprompt in apiUrl to llmchat.

To allow your app to accept SSE stream, replace this line:

        request.setValue("application/*", forHTTPHeaderField: "Accept")

with:

        request.setValue("text/event-streaming", forHTTPHeaderField: "Accept")

Parsing SSE stream

Finally, we’re ready to parse the incoming stream as an SSE stream. SSE stream consists of text strings in a specific format:

event: eventName
data: a line of info associated with eventName

event: newEvent
data: a line of newEvent info
data: another line of newEvent info

data: a line of info implicitly associated with the default Message event

data: another line also of the Message event

Each event is tagged with an event line followed by the event’s name. An event line is delimited with a newline ('\n' or, for streams from a Python server or on Windows, "\r\n"). Then follow one or more lines of data associated with that event, each delimited with a newline. An empty line (or two consecutive newlines "\n\n") denotes the end of an event block.

A data line after an empty line is assumed to be part of the default Message event, which is allowed to be unspecified, as in the last two data lines in the above example.

Continuing in llmChat(appID:chatt:errMsg:), scroll all the way down to the line, for try await ... and replace the whole block of code up to, but not including the catch block, with:

            var sseEvent = SseEventType.Message
            var line = ""
            for try await char in bytes.characters {
                if char != "\n" && char != "\r\n" { // Python eol is "\r\n"
                    line.append(char)
                    continue
                }
                if line.isEmpty {
                    // new SSE event, default to Message
                    // SSE events are delimited by "\n\n"
                    if (sseEvent == .Error) {
                        resChatt.message?.append("\n\n**llmChat Error**: \(errMsg.wrappedValue)\n\n")
                        chatts[last] = resChatt  // otherwise changes not observed!
                    }
                    sseEvent = .Message
                    continue
                }

An empty line (caused by two consecutive newlines "\n\n") indicates the end of an event block. The URLSession.shared.bytes(for:) API returns an AsyncSequence. Unfortunately, when looping through an AsyncSequence, the loop automatically skips empty lines. So we need to build our own lines from bytes.characters instead, to detect empty lines. When an empty line is detected, if we are in an Error event block, as set in the next block of code, we report the error on the timeline (we will also pop up an alert dialog box with the erorr mssage later). Then we reset the event to the default Message event.

If the next line starts with event, we’re starting a new event block, otherwise, it’s a data line and we handle (save) it depending on the event it’s associated with. Recall that left unspecified, Message is the default event.

                let parts = line.split(separator: ":", maxSplits: 1, omittingEmptySubsequences: false)
                let event = parts[1].trimmingCharacters(in: .whitespaces)
                if parts[0].starts(with: "event") {
                    if event == "error" {
                        sseEvent = .Error
                    } else if !event.isEmpty && event != "message" {
                        // we only support "error" event,
                        // "message" events are, by the SSE spec,
                        // assumed implicit by default
                        print("LLMCHAT: Unknown event: '\(parts[1])'")
                    }
                } else if parts[0].starts(with: "data") {
                    // not an event line, we only support data line;
                    // multiple data lines can belong to the same event
                    let data = Data(event.utf8)
                    do {
                        let ollamaResponse = try JSONDecoder().decode(OllamaResponse.self, from: data)
                        if let token = ollamaResponse.message.content {
                            if sseEvent == .Error {
                                errMsg.wrappedValue += token
                            } else {
                                resChatt.message?.append(token)
                            }
                        }
                    } catch {
                        errMsg.wrappedValue += parseErr(code: "\(error)", apiUrl: apiUrl, data: data)
                    }
                    chatts[last] = resChatt  // otherwise changes not observed!
                }
                line = ""
            }

Be sure to retain the enclosing catch clause below the for loop.

SubmitButton

Finally, replace your call to llmPrompt(_:errMsg:) in SubmitButton() in the file ContentView.swift with:

                if let appID = vm.appID {
                    await ChattStore.shared.llmChat(
                        appID: appID,
                        chatt: Chatt(username: vm.model,
                                     message: vm.message, timestamp: Date().ISO8601Format()),
                        errMsg: Bindable(vm).errMsg)
                }

Congratulations! You’re done with the front end! (Don’t forget to work on the backend!)

Run and test to verify and debug

You should now be able to run your front end against the provided back end on mada.eecs.umich.edu, by changing the serverUrl property in your ChattStore to mada.eecs.umich.edu. Once you have your backend setup, change serverUrl back to YOUR_SERVER_IP. You will not get full credit if your front end is not set up to work with your backend!

The backend spec provides instructions on testing llmChat’s API and SSE error handling.

Front-end submission guidelines

We will only grade files committed to the main branch. If you’ve created multiple branches, please merge them all to the main branch for submission.

Push your front-end code to the same GitHub repo you’ve submitted your back-end code:

• Open GitHub Desktop and click on Current Repository on the top left of the interface
• Click on the GitHub repo you created at the start of this tutorial
• Add Summary to your changes and click Commit to main at the bottom of the left pane
• Since you have pushed your back end code, you’ll have to click Pull Origin to synch up the repo on your laptop
• Finally click Push Origin to push all changes to GitHub

Go to the GitHub website to confirm that your front-end files have been uploaded to your GitHub repo under the folder llmchat. Confirm that your repo has a folder structure outline similar to the following. If your folder structure is not as outlined, our script will not pick up your submission and, further, you may have problems getting started on latter tutorials. There could be other files or folders in your local folder not listed below, don’t delete them. As long as you have installed the course .gitignore as per the instructions in Preparing GitHub for Reactive, only files needed for grading will be pushed to GitHub.

  reactive
    |-- chatterd
    |-- chatterd.crt
    |-- llmchat
        |-- swiftUIChatter
            |-- swiftUIChatter.xcodeproj
            |-- swiftUIChatter    
    # and other files or folders

References

SSE

• AsyncSequence.line skips empty lines
• Swift: Streaming OpenAI API Response (Chunked Encoding Transfer)
• AsyncThrowingStream