Feature Request: .WithOtlpExporter() can pass in otel http endpoint for client-side browser apps

### Is there an existing issue for this?

- [x] I have searched the existing issues

### Is your feature request related to a problem? Please describe the problem.

As an AppHost launching a browser app with both OTEL gRPC and http collector endpoints running, I'd like to inject the OTEL http endpoint into some apps and the gRPC endpoint into others.

Assume the following in AppHost's lauchSettings.json:

```json
"https": {
// ... snip ...
"environmentVariables": {
// ... snip ...
"DOTNET_DASHBOARD_OTLP_ENDPOINT_URL": "https://localhost:21096",
"DOTNET_DASHBOARD_OTLP_HTTP_ENDPOINT_URL": "https://localhost:21097",
// ... snip ...
}
}
```

And assume the following in AppHost's Program.cs:

```c#
var browserApp = builder.AddNpmApp("react", "../react-app", "dev")
.WithReference(apiService)
.WithHttpEndpoint(env: "PORT" /*, isProxied: true*/);
```

The problem:

1. Both the gRPC endpoint and the http endpoint are running.
2. `.WithReference()` doesn't know which to inject.
3. It guesses gRPC ... which in this case is the wrong answer.

### Describe the solution you'd like

Add an optional argument to WithReference specifying the protocol:

```c#
.WithReference(apiService, protocol: OpenTelemetryProtocol.Http);
```

### Additional context

The work-around is to disable the gRPC endpoint in AppHost's launchSettings.json ... which makes all the other apps have to use http too.