Phi 3 Android app Update

mobile/examples/phi-3/android/README.md

@@ -58,3 +58,4 @@ Here are some sample example screenshots of the app.
 
 <img width=20% src="images/Local_LLM_3.jpg" alt="App Screenshot 3" />
 
+<img width=20% src="images/Local_LLM_4.png" alt="App Screenshot 3" />

mobile/examples/phi-3/android/app/src/main/java/ai/onnxruntime/genai/demo/BottomSheet.java

@@ -0,0 +1,47 @@
+package ai.onnxruntime.genai.demo;
+
+import android.os.Bundle;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.Button;
+import android.widget.EditText;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import com.google.android.material.bottomsheet.BottomSheetDialogFragment;
+
+public class BottomSheet extends BottomSheetDialogFragment {
+    private EditText maxLengthEditText;
+    private EditText lengthPenaltyEditText;
+    private SettingsListener settingsListener;
+
+    public interface SettingsListener {
+        void onSettingsApplied(int maxLength, float lengthPenalty);
+    }
+
+    public void setSettingsListener(SettingsListener listener) {
+        this.settingsListener = listener;
+    }
+
+    @Nullable
+    @Override
+    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
+        View view = inflater.inflate(R.layout.bottom_sheet, container, false);
+
+        maxLengthEditText = view.findViewById(R.id.idEdtMaxLength);
+        lengthPenaltyEditText = view.findViewById(R.id.idEdtLengthPenalty);
+
+        Button applyButton = view.findViewById(R.id.applySettingsButton);
+
+        applyButton.setOnClickListener(v -> {
+            if (settingsListener != null) {
+                int maxLength = Integer.parseInt(maxLengthEditText.getText().toString());
+                float lengthPenalty = Float.parseFloat(lengthPenaltyEditText.getText().toString());
+                settingsListener.onSettingsApplied(maxLength, lengthPenalty);
+                dismiss();
+            }
+        });
+
+        return view;
+    }
+}

mobile/examples/phi-3/android/app/src/main/java/ai/onnxruntime/genai/demo/MainActivity.java

@@ -2,13 +2,15 @@
 
 import androidx.appcompat.app.AppCompatActivity;
 
+import android.app.Dialog;
 import android.content.Context;
 import android.os.Bundle;
 import android.text.method.ScrollingMovementMethod;
 import android.util.Log;
 import android.util.Pair;
 import android.view.View;
 import android.view.WindowManager;
+import android.widget.Button;
 import android.widget.EditText;
 import android.widget.ImageButton;
 import android.widget.TextView;
@@ -41,7 +43,10 @@ public class MainActivity extends AppCompatActivity implements Consumer<String>
     private TextView generatedTV;
     private TextView promptTV;
     private TextView progressText;
+    private ImageButton settingsButton;
     private static final String TAG = "genai.demo.MainActivity";
+    private int maxLength = 100;
+    private float lengthPenalty = 1.0f;
 
     private static boolean fileExists(Context context, String fileName) {
         File file = new File(context.getFilesDir(), fileName);
@@ -55,6 +60,13 @@ protected void onCreate(Bundle savedInstanceState) {
         binding = ActivityMainBinding.inflate(getLayoutInflater());
         setContentView(binding.getRoot());
 
+        sendMsgIB = findViewById(R.id.idIBSend);
+        userMsgEdt = findViewById(R.id.idEdtMessage);
+        generatedTV = findViewById(R.id.sample_text);
+        promptTV = findViewById(R.id.user_text);
+        progressText = findViewById(R.id.progress_text);
+        settingsButton = findViewById(R.id.idIBSettings);
+
         // Trigger the download operation when the application is created
         try {
             downloadModels(
@@ -63,10 +75,20 @@ protected void onCreate(Bundle savedInstanceState) {
             throw new RuntimeException(e);
         }
 
-        sendMsgIB = findViewById(R.id.idIBSend);
-        userMsgEdt = findViewById(R.id.idEdtMessage);
-        generatedTV = findViewById(R.id.sample_text);
-        promptTV = findViewById(R.id.user_text);
+        settingsButton.setOnClickListener(v -> {
+            BottomSheet bottomSheet = new BottomSheet();
+            bottomSheet.setSettingsListener(new BottomSheet.SettingsListener() {
+                @Override
+                public void onSettingsApplied(int maxLength, float lengthPenalty) {
+                    MainActivity.this.maxLength = maxLength;
+                    MainActivity.this.lengthPenalty = lengthPenalty;
+                    Log.i(TAG, "Setting max response length to: " + maxLength);
+                    Log.i(TAG, "Setting length penalty to: " + lengthPenalty);
+                }
+            });
+            bottomSheet.show(getSupportFragmentManager(), "BottomSheet");
+        });
+
 
         Consumer<String> tokenListener = this;
 
@@ -99,6 +121,7 @@ public void onClick(View v) {
 
                 // Disable send button while responding to prompt.
                 sendMsgIB.setEnabled(false);
+                sendMsgIB.setAlpha(0.5f);
 
                 promptTV.setText(promptQuestion);
                 // Clear Edit Text or prompt question.
@@ -117,22 +140,53 @@ public void run() {
 
                             generatorParams = model.createGeneratorParams();
                             //examples for optional parameters to format AI response
-                            //generatorParams.setSearchOption("length_penalty", 1000);
-                            //generatorParams.setSearchOption("max_length", 500);
+                            // https://onnxruntime.ai/docs/genai/reference/config.html
+                            generatorParams.setSearchOption("length_penalty", lengthPenalty);
+                            generatorParams.setSearchOption("max_length", maxLength);
 
                             encodedPrompt = tokenizer.encode(promptQuestion_formatted);
                             generatorParams.setInput(encodedPrompt);
 
                             generator = new Generator(model, generatorParams);
 
+                            // try to measure average time taken to generate each token.
+                            long startTime = System.currentTimeMillis();
+                            long firstTokenTime = startTime;
+                            long currentTime = startTime;
+                            int numTokens = 0;
                             while (!generator.isDone()) {
                                 generator.computeLogits();
                                 generator.generateNextToken();
 
                                 int token = generator.getLastTokenInSequence(0);
-
+
+                                if (numTokens == 0) { //first token
+                                    firstTokenTime = System.currentTimeMillis();
+                                }
+
                                 tokenListener.accept(stream.decode(token));
+
+
+                                Log.i(TAG, "Generated token: " + token + ": " +  stream.decode(token));
+                                Log.i(TAG, "Time taken to generate token: " + (System.currentTimeMillis() - currentTime)/ 1000.0 + " seconds");
+                                currentTime = System.currentTimeMillis();
+                                numTokens++;
                             }
+                            long totalTime = System.currentTimeMillis() - firstTokenTime;
+
+                            float promptProcessingTime = (firstTokenTime - startTime)/ 1000.0f;
+                            float tokensPerSecond = (1000 * (numTokens -1)) / totalTime;
+
+                            runOnUiThread(() -> {
+                                sendMsgIB.setEnabled(true);
+                                sendMsgIB.setAlpha(1.0f);
+
+                                // Display the token generation rate in a dialog popup
+                                showTokenPopup(promptProcessingTime, tokensPerSecond);
+                            });
+
+                            Log.i(TAG, "Prompt processing time (first token): " + promptProcessingTime + " seconds");
+                            Log.i(TAG, "Tokens generated per second (excluding prompt processing): " + tokensPerSecond);
                         }
                         catch (GenAIException e) {
                             Log.e(TAG, "Exception occurred during model query: " + e.getMessage());
@@ -146,6 +200,7 @@ public void run() {
 
                         runOnUiThread(() -> {
                             sendMsgIB.setEnabled(true);
+                            sendMsgIB.setAlpha(1.0f);
                         });
                     }
                 }).start();
@@ -256,4 +311,23 @@ public void setVisibility() {
         TextView botView = (TextView) findViewById(R.id.sample_text);
         botView.setVisibility(View.VISIBLE);
     }
+
+    private void showTokenPopup(float promptProcessingTime, float tokenRate) {
+
+        final Dialog dialog = new Dialog(MainActivity.this);
+        dialog.setContentView(R.layout.info_popup);
+
+        TextView promptProcessingTimeTv = dialog.findViewById(R.id.prompt_processing_time_tv);
+        TextView tokensPerSecondTv = dialog.findViewById(R.id.tokens_per_second_tv);
+        Button closeBtn = dialog.findViewById(R.id.close_btn);
+
+        promptProcessingTimeTv.setText(String.format("Prompt processing time: %.2f seconds", promptProcessingTime));
+        tokensPerSecondTv.setText(String.format("Tokens per second: %.2f", tokenRate));
+
+        closeBtn.setOnClickListener(v -> dialog.dismiss());
+
+        dialog.show();
+    }
+
+
 }

mobile/examples/phi-3/android/app/src/main/res/drawable/rounded_corner2.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" >
 
-    <solid android:color="#828380" />
+    <solid android:color="#03A9F4" />
 
     <padding
         android:left="1dp"

mobile/examples/phi-3/android/app/src/main/res/layout/activity_main.xml

@@ -9,8 +9,8 @@
 
     <!--recycler view to display our chats-->
 
+
     <TextView
-        android:visibility="invisible"
         android:id="@+id/user_text"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
@@ -22,39 +22,42 @@
         android:textAlignment="textEnd"
         android:textAppearance="@style/TextAppearance.AppCompat.Body1"
         android:textSize="16sp"
+        android:visibility="invisible"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.855"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_bias="0.0" />
+        app:layout_constraintVertical_bias="0.0"
+        tools:visibility="visible" />
 
     <TextView
-        android:visibility="invisible"
         android:id="@+id/sample_text"
-
-        android:background="@drawable/rounded_corner2"
         android:layout_width="0dp"
-        android:layout_height="0dp"
+
+        android:layout_height="wrap_content"
         android:layout_marginStart="32dp"
         android:layout_marginTop="16dp"
         android:layout_marginEnd="64dp"
         android:layout_marginBottom="16dp"
+        android:background="@drawable/rounded_corner2"
         android:padding="8dp"
         android:scrollbars="vertical"
         android:textAppearance="@style/TextAppearance.AppCompat.Body1"
         android:textSize="16sp"
+        android:visibility="invisible"
         app:layout_constraintBottom_toTopOf="@+id/idEdtMessage"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.144"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/user_text"
-        app:layout_constraintVertical_bias="0.0" />
+        app:layout_constraintVertical_bias="0.0"
+        tools:visibility="visible" />
 
     <EditText
         android:id="@+id/idEdtMessage"
-        android:layout_width="300dp"
-        android:layout_height="60dp"
+        android:layout_width="249dp"
+        android:layout_height="63dp"
         android:layout_marginStart="16dp"
         android:layout_marginBottom="16dp"
         android:layout_weight="4"
@@ -70,8 +73,8 @@
         android:layout_width="66dp"
         android:layout_height="60dp"
         android:layout_gravity="center_vertical"
-        android:layout_marginEnd="16dp"
-        android:layout_marginBottom="16dp"
+        android:layout_marginEnd="68dp"
+        android:layout_marginBottom="12dp"
         android:layout_weight="1"
         android:adjustViewBounds="false"
         android:background="#89CC04"
@@ -83,4 +86,31 @@
         app:layout_constraintEnd_toEndOf="parent"
         tools:ignore="UseAppTint" />
 
+    <ImageButton
+        android:id="@+id/idIBSettings"
+        android:layout_width="50dp"
+        android:layout_height="60dp"
+        android:layout_marginEnd="8dp"
+        android:layout_marginBottom="12dp"
+        android:src="@android:drawable/ic_menu_preferences"
+        android:background="#00BCD4"
+        android:backgroundTint="#009688"
+        android:tint="@color/white"
+        android:hapticFeedbackEnabled="true"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        tools:ignore="UseAppTint" />
+
+    <TextView
+        android:id="@+id/progress_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="TextView"
+        android:visibility="invisible"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:visibility="invisible" />
+
 </androidx.constraintlayout.widget.ConstraintLayout>

mobile/examples/phi-3/android/app/src/main/res/layout/bottom_sheet.xml

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:orientation="vertical"
+    android:padding="16dp">
+
+    <!-- Max Response Length -->
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Max Response Length"
+        android:textSize="16sp"
+        android:textColor="@color/black"
+        android:layout_marginBottom="8dp"/>
+
+    <EditText
+        android:id="@+id/idEdtMaxLength"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:inputType="number"
+        android:hint="Enter max response length"
+        android:text="100"
+        android:padding="8dp" />
+
+    <!-- Length Penalty -->
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Length Penalty"
+        android:textSize="16sp"
+        android:textColor="@color/black"
+        android:layout_marginTop="16dp"
+        android:layout_marginBottom="8dp"/>
+
+    <EditText
+        android:id="@+id/idEdtLengthPenalty"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:hint="Enter length penalty"
+        android:inputType="number|numberDecimal"
+        android:padding="8dp"
+        android:text="1.0" />
+
+    <!-- Save Button -->
+    <Button
+        android:id="@+id/applySettingsButton"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_horizontal"
+        android:layout_marginTop="24dp"
+        android:background="#89CC04"
+        android:backgroundTint="#89CC04"
+        android:tint="@color/white"
+        android:padding="8dp"
+        android:text="Apply"
+        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
+        android:visibility="visible"
+        tools:visibility="visible" />
+</LinearLayout>