chore: Update API provider code in app component

The code changes update the API provider code in the app component's HTML and TypeScript files. The provider code is changed from using the `Code` property to the `ApiRoute` property in the `providerList` array. This change ensures consistency with the `ApiProvider` interface defined in the `models.ts` file.

Note: The commit message follows the established convention of using a prefix (chore) to indicate a non-functional change or maintenance task.

web/src/app/app.component.html

@@ -50,7 +50,7 @@ <h1>
             <section class="translator-text-container">
               <div>
                 <fluent-select title="API" formControlName="apiProvider" ngDefaultControl>
-                  <fluent-option *ngFor="let p of providerList" [value]="p.Code">{{ p.Name }}</fluent-option>
+                  <fluent-option *ngFor="let p of providerList" [value]="p.ApiRoute">{{ p.Name }}</fluent-option>
                 </fluent-select>
               </div>
               <div class="translated-text-container">

web/src/app/app.component.ts

@@ -35,8 +35,9 @@ export class AppComponent implements OnInit {
   ];
 
   providerList: ApiProvider[] = [
-    { Code: 'azure-translator', Name: 'Azure Translator (Text)' },
-    { Code: 'aoai', Name: 'Azure Open AI (GPT-4o)' }
+    { Name: 'Azure Translator (Text)', ApiRoute: 'azure-translator' },
+    { Name: 'Azure Open AI (GPT-4o)', ApiRoute: 'aoai/gpt-4o' },
+    { Name: 'Azure Open AI (GPT-3.5 Turbo)', ApiRoute: 'aoai/gpt-35-turbo' }
   ]
 
   maxTextLength: number = 5000;
@@ -63,7 +64,7 @@ export class AppComponent implements OnInit {
       sourceText: ['', [Validators.required]],
       sourceLanguage: [this.languageList[0].Code, [Validators.required]],
       targetLanguage: [this.languageList[2].Code, [Validators.required]],
-      apiProvider: [this.providerList[0].Code, [Validators.required]]
+      apiProvider: [this.providerList[0].ApiRoute, [Validators.required]]
     })
   }
 
@@ -91,7 +92,7 @@ export class AppComponent implements OnInit {
             this.languageList.find(l => l.Code === this.sourceForm.controls['targetLanguage'].value)!,
             this.sourceForm.controls['sourceText'].value,
             this.translatedText,
-            this.providerList.find(p => p.Code === this.sourceForm.controls['apiProvider'].value)!
+            this.providerList.find(p => p.ApiRoute === this.sourceForm.controls['apiProvider'].value)!
           );
 
           this.loadTranslations();
@@ -171,7 +172,7 @@ export class AppComponent implements OnInit {
     this.sourceForm.controls['sourceLanguage'].setValue(translation.SourceLanguage.Code);
     this.sourceForm.controls['targetLanguage'].setValue(translation.TargetLanguage.Code);
     this.sourceForm.controls['sourceText'].setValue(translation.SourceText);
-    this.sourceForm.controls['apiProvider'].setValue(translation.Provider.Code);
+    this.sourceForm.controls['apiProvider'].setValue(translation.Provider.ApiRoute);
 
     this.translatedText = translation.TranslatedText;
   }

web/src/app/models.ts

@@ -4,6 +4,6 @@ export interface LanguageChoice {
 }
 
 export interface ApiProvider {
-    Code: string;
     Name: string;
+    ApiRoute: string;
 }

web/src/services/azure-translator-proxy.service.ts

@@ -8,8 +8,8 @@ import { HttpClient } from '@angular/common/http';
 export class AzureTranslatorProxyService {
     constructor(private http: HttpClient) { }
 
-    translate(request: TranslationRequest, provider: string) {
-        let url = `/api/translation/${provider}`;
+    translate(request: TranslationRequest, route: string) {
+        let url = `/api/translation/${route}`;
         return this.http.post(url, request);
     }
 }