Added Test Connection button for whisper provider

bazarr/app/ui.py

@@ -164,7 +164,7 @@ def configured():
 @ui_bp.route('/test/<protocol>/<path:url>', methods=['GET'])
 def proxy(protocol, url):
     if protocol.lower() not in ['http', 'https']:
-        return dict(status=False, error='Unsupported protocol')
+        return dict(status=False, error='Unsupported protocol', code=0)
     url = f'{protocol}://{unquote(url)}'
     params = request.args
     try:
@@ -175,14 +175,14 @@ def proxy(protocol, url):
         if result.status_code == 200:
             try:
                 version = result.json()['version']
-                return dict(status=True, version=version)
+                return dict(status=True, version=version, code=result.status_code)
             except Exception:
-                return dict(status=False, error='Error Occurred. Check your settings.')
+                return dict(status=False, error='Error Occurred. Check your settings.', code=result.status_code)
         elif result.status_code == 401:
-            return dict(status=False, error='Access Denied. Check API key.')
+            return dict(status=False, error='Access Denied. Check API key.', code=result.status_code)
         elif result.status_code == 404:
-            return dict(status=False, error='Cannot get version. Maybe unsupported legacy API call?')
+            return dict(status=False, error='Cannot get version. Maybe unsupported legacy API call?', code=result.status_code)
         elif 300 <= result.status_code <= 399:
-            return dict(status=False, error='Wrong URL Base.')
+            return dict(status=False, error='Wrong URL Base.', code=result.status_code)
         else:
-            return dict(status=False, error=result.raise_for_status())
+            return dict(status=False, error=result.raise_for_status(), code=result.status_code)

frontend/src/apis/raw/utils.ts

@@ -4,10 +4,12 @@ type UrlTestResponse =
   | {
       status: true;
       version: string;
+      code: number;
     }
   | {
       status: false;
       error: string;
+      code: number;
     };
 
 class RequestUtils {
@@ -31,6 +33,18 @@ class RequestUtils {
       return result.data;
     }
   }
+
+  async providerUrlTest(protocol: string, url: string, params?: LooseObject) {
+    const result = await client.axios.get<UrlTestResponse>(
+      `../test/${protocol}/${url}status`,
+      { params },
+    );
+    const { data } = result;
+    if (data.status && data.version) {
+      return data;
+    }
+    return result.data;
+  }
 }
 
 const requestUtils = new RequestUtils();

frontend/src/pages/Settings/Providers/components.tsx

@@ -27,6 +27,7 @@ import {
   Selector as GlobalSelector,
   Message,
   Password,
+  ProviderTestButton,
   Text,
 } from "../components";
 import {
@@ -255,6 +256,11 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
             ></GlobalSelector>,
           );
           return;
+        case "testbutton":
+          elements.push(
+            <ProviderTestButton category={key}></ProviderTestButton>,
+          );
+          return;
         case "chips":
           elements.push(
             <Chips
@@ -278,6 +284,7 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
         <Stack>
           <Stack spacing="xs">
             <Selector
+              data-autofocus
               searchable
               placeholder="Click to Select a Provider"
               itemComponent={SelectItem}

frontend/src/pages/Settings/Providers/list.ts

@@ -15,6 +15,7 @@ type AvailableInput =
   | Input<string, "password">
   | Input<boolean, "switch">
   | Input<string, "select">
+  | Input<string, "testbutton">
   | Input<ReactText[], "chips">;
 
 export interface ProviderInfo {
@@ -502,6 +503,11 @@ export const ProviderList: Readonly<ProviderInfo[]> = [
         name: "Logging level",
         options: logLevelOptions,
       },
+      {
+        type: "testbutton",
+        key: "whisperai",
+        name: "Test Connection button",
+      },
     ],
   },
   { key: "wizdom", description: "Wizdom.xyz Subtitles Provider" },

frontend/src/pages/Settings/components/index.tsx

@@ -1,6 +1,6 @@
 import api from "@/apis/raw";
 import { Button } from "@mantine/core";
-import { FunctionComponent, useCallback, useState } from "react";
+import { FunctionComponent, useCallback, useEffect, useState } from "react";
 import { useSettingValue } from "../utilities/hooks";
 
 export const URLTestButton: FunctionComponent<{
@@ -62,6 +62,57 @@ export const URLTestButton: FunctionComponent<{
   );
 };
 
+export const ProviderTestButton: FunctionComponent<{
+  category: string;
+}> = ({ category }) => {
+  const testConnection = "Test Connection";
+  const [title, setTitle] = useState(testConnection);
+  const [color, setVar] = useState("primary");
+
+  const testUrl = useSettingValue<string>(`settings-${category}-endpoint`);
+
+  const click = useCallback(() => {
+    if (testUrl !== null) {
+      const urlWithoutProtocol = new URL(testUrl).host;
+      const request = {
+        protocol: "http",
+        url: urlWithoutProtocol,
+      };
+      if (!request.url.endsWith("/")) {
+        request.url += "/";
+      }
+
+      api.utils
+        .providerUrlTest(request.protocol, request.url)
+        .then((result) => {
+          if (result.status) {
+            setTitle(`${result.version}`);
+            setVar("success");
+          } else {
+            setVar("danger");
+            if (result.code === 404) {
+              setTitle(
+                "Connected but no version found (possibly whisper-asr?)",
+              );
+            } else {
+              setTitle(result.error);
+            }
+          }
+        });
+    }
+  }, [testUrl]);
+
+  useEffect(() => {
+    setTitle(testConnection);
+  }, [testUrl]);
+
+  return (
+    <Button onClick={click} color={color} title={title}>
+      {title}
+    </Button>
+  );
+};
+
 export * from "./Card";
 export * from "./Layout";
 export { default as Layout } from "./Layout";