feat: Display Time To First Token in MLXChatExample

Author: jolonf

Applications/MLXChatExample/ViewModels/ChatViewModel.swift

@@ -49,6 +49,11 @@ class ChatViewModel {
         generateCompletionInfo?.tokensPerSecond ?? 0
     }
 
+    /// Time to generate the first token in seconds
+    var timeToFirstToken: Double {
+        generateCompletionInfo?.promptTime ?? 0
+    }
+
     /// Progress of the current model download, if any
     var modelDownloadProgress: Progress? {
         mlxService.modelDownloadProgress

Applications/MLXChatExample/Views/Toolbar/ChatToolbarView.swift

@@ -29,7 +29,8 @@ struct ChatToolbarView: View {
             vm.clear([.chat, .meta])
         } label: {
             GenerationInfoView(
-                tokensPerSecond: vm.tokensPerSecond
+                tokensPerSecond: vm.tokensPerSecond,
+                timeToFirstToken: vm.timeToFirstToken
             )
         }
 

Applications/MLXChatExample/Views/Toolbar/GenerationInfoView.swift

@@ -9,12 +9,23 @@ import SwiftUI
 
 struct GenerationInfoView: View {
     let tokensPerSecond: Double
+    let timeToFirstToken: Double
 
     var body: some View {
-        Text("\(tokensPerSecond, format: .number.precision(.fractionLength(2))) tokens/s")
+        HStack {
+            if timeToFirstToken > 0 {
+                Text(String(format: "TTFT: %.2f s", timeToFirstToken))
+            }
+            if tokensPerSecond > 0 {
+                Text(String(format: "TPS: %.2f", tokensPerSecond))
+            }
+        }
+        .lineLimit(1)
+        .frame(minWidth: 150, alignment: .leading)
     }
 }
 
 #Preview {
-    GenerationInfoView(tokensPerSecond: 58.5834)
+    GenerationInfoView(tokensPerSecond: 58.5834, timeToFirstToken: 1.234)
+        .padding()
 }