try to fix

xorbitsai · Dec 5, 2023 · 1eed0b2 · 1eed0b2
1 parent f37861d
commit 1eed0b2
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 15 deletions.
diff --git a/xinference/web/ui/src/components/fetcher.js b/xinference/web/ui/src/components/fetcher.js
@@ -0,0 +1,16 @@
+// Some users use https proxies for backend service such as nginx.
+// So if the url has a https prefix, add a special header to avoid `Mixed Content` issue.
+function updateOptions(url, options) {
+  const update = { ...options };
+  if (url.startsWith("https://")) {
+    update.headers = {
+      ...update.headers,
+      "Content-Security-Policy": "upgrade-insecure-requests",
+    };
+  }
+  return update;
+}
+
+export default function fetcher(url, options) {
+  return fetch(url, updateOptions(url, options));
+}
diff --git a/xinference/web/ui/src/scenes/launch_model/embeddingCard.js b/xinference/web/ui/src/scenes/launch_model/embeddingCard.js
@@ -4,6 +4,7 @@ import { ApiContext } from "../../components/apiContext";
 import { Box, Chip } from "@mui/material";
 import { CircularProgress } from "@mui/material";
 import { UndoOutlined, RocketLaunchOutlined } from "@mui/icons-material";
+import fetcher from "../../components/fetcher";
 
 const CARD_HEIGHT = 270;
 const CARD_WIDTH = 270;
@@ -34,7 +35,7 @@ const EmbeddingCard = ({ url, modelData }) => {
     };
 
     // First fetch request to initiate the model
-    fetch(url + "/v1/models", {
+    fetcher(url + "/v1/models", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

diff --git a/xinference/web/ui/src/scenes/launch_model/launchEmbedding.js b/xinference/web/ui/src/scenes/launch_model/launchEmbedding.js
@@ -2,6 +2,7 @@ import React, { useContext, useState, useEffect } from "react";
 import EmbeddingCard from "./embeddingCard";
 import { Box, TextField, FormControl } from "@mui/material";
 import { ApiContext } from "../../components/apiContext";
+import fetcher from "../../components/fetcher";
 
 const LaunchEmbedding = () => {
   let endPoint = useContext(ApiContext).endPoint;
@@ -33,7 +34,7 @@ const LaunchEmbedding = () => {
     try {
       setIsCallingApi(true);
 
-      const response = await fetch(
+      const response = await fetcher(
         `${endPoint}/v1/model_registrations/embedding`,
         {
           method: "GET",
@@ -43,7 +44,7 @@ const LaunchEmbedding = () => {
       const registrations = await response.json();
       const newRegistrationData = await Promise.all(
         registrations.map(async (registration) => {
-          const desc = await fetch(
+          const desc = await fetcher(
             `${endPoint}/v1/model_registrations/embedding/${registration.model_name}`,
             {
               method: "GET",

diff --git a/xinference/web/ui/src/scenes/launch_model/launchLLM.js b/xinference/web/ui/src/scenes/launch_model/launchLLM.js
@@ -12,6 +12,7 @@ import {
   Tab,
 } from "@mui/material";
 import { ApiContext } from "../../components/apiContext";
+import fetcher from "../../components/fetcher";
 
 const LaunchLLM = () => {
   let endPoint = useContext(ApiContext).endPoint;
@@ -66,7 +67,7 @@ const LaunchLLM = () => {
     try {
       setIsCallingApi(true);
 
-      const response = await fetch(
+      const response = await fetcher(
         `${endPoint}/v1/model_registrations/LLM?detailed=true`,
         {
           method: "GET",

diff --git a/xinference/web/ui/src/scenes/launch_model/launchRerank.js b/xinference/web/ui/src/scenes/launch_model/launchRerank.js
@@ -2,6 +2,7 @@ import React, { useContext, useState, useEffect } from "react";
 import RerankCard from "./rerankCard";
 import { Box, TextField, FormControl } from "@mui/material";
 import { ApiContext } from "../../components/apiContext";
+import fetcher from "../../components/fetcher";
 
 const LaunchRerank = () => {
   let endPoint = useContext(ApiContext).endPoint;
@@ -30,7 +31,7 @@ const LaunchRerank = () => {
     try {
       setIsCallingApi(true);
 
-      const response = await fetch(
+      const response = await fetcher(
         `${endPoint}/v1/model_registrations/rerank`,
         {
           method: "GET",
@@ -40,7 +41,7 @@ const LaunchRerank = () => {
       const registrations = await response.json();
       const newRegistrationData = await Promise.all(
         registrations.map(async (registration) => {
-          const desc = await fetch(
+          const desc = await fetcher(
             `${endPoint}/v1/model_registrations/rerank/${registration.model_name}`,
             {
               method: "GET",

diff --git a/xinference/web/ui/src/scenes/launch_model/modelCard.js b/xinference/web/ui/src/scenes/launch_model/modelCard.js
@@ -17,6 +17,7 @@ import {
   UndoOutlined,
   RocketLaunchOutlined,
 } from "@mui/icons-material";
+import fetcher from "../../components/fetcher";
 
 const CARD_HEIGHT = 350;
 const CARD_WIDTH = 270;
@@ -104,7 +105,7 @@ const ModelCard = ({ url, modelData }) => {
     };
 
     // First fetch request to initiate the model
-    fetch(url + "/v1/models", {
+    fetcher(url + "/v1/models", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

diff --git a/xinference/web/ui/src/scenes/launch_model/rerankCard.js b/xinference/web/ui/src/scenes/launch_model/rerankCard.js
@@ -4,6 +4,7 @@ import { ApiContext } from "../../components/apiContext";
 import { Box, Chip } from "@mui/material";
 import { CircularProgress } from "@mui/material";
 import { UndoOutlined, RocketLaunchOutlined } from "@mui/icons-material";
+import fetcher from "../../components/fetcher";
 
 const CARD_HEIGHT = 270;
 const CARD_WIDTH = 270;
@@ -32,7 +33,7 @@ const RerankCard = ({ url, modelData }) => {
     };
 
     // First fetch request to initiate the model
-    fetch(url + "/v1/models", {
+    fetcher(url + "/v1/models", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

diff --git a/xinference/web/ui/src/scenes/register_model/index.js b/xinference/web/ui/src/scenes/register_model/index.js
@@ -13,6 +13,7 @@ import {
 } from "@mui/material";
 import { useMode } from "../../theme";
 import Title from "../../components/Title";
+import fetcher from "../../components/fetcher";
 
 const SUPPORTED_LANGUAGES_DICT = { en: "English", zh: "Chinese" };
 const SUPPORTED_FEATURES = ["Generate", "Chat"];
@@ -73,7 +74,7 @@ const RegisterModel = () => {
 
   useEffect( () => {
     const getBuiltInPromptStyles = async () => {
-      const response = await fetch(endPoint + "/v1/models/prompts", {
+      const response = await fetcher(endPoint + "/v1/models/prompts", {
           method: "GET",
           headers: {
               "Content-Type": "application/json",
@@ -156,7 +157,7 @@ const RegisterModel = () => {
     }
 
     try {
-      const response = await fetch(endPoint + "/v1/model_registrations/LLM", {
+      const response = await fetcher(endPoint + "/v1/model_registrations/LLM", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",

diff --git a/xinference/web/ui/src/scenes/running_models/index.js b/xinference/web/ui/src/scenes/running_models/index.js
@@ -6,6 +6,7 @@ import {DataGrid} from "@mui/x-data-grid";
 import Title from "../../components/Title";
 import OpenInBrowserOutlinedIcon from "@mui/icons-material/OpenInBrowserOutlined";
 import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import fetcher from "../../components/fetcher";
 
 const RunningModels = () => {
   const [tabValue, setTabValue] = React.useState("1");
@@ -37,7 +38,7 @@ const RunningModels = () => {
       ]);
     } else {
       setIsUpdatingModel(true);
-      fetch(`${endPoint}/v1/models/`, {
+      fetcher(`${endPoint}/v1/models/`, {
         method: "GET",
       })
         .then((response) => response.json())
@@ -155,14 +156,14 @@ const RunningModels = () => {
 
                 setIsCallingApi(true);
 
-                fetch(openUrl, {
+                fetcher(openUrl, {
                   method: "HEAD",
                 })
                   .then((response) => {
                     if (response.status === 404) {
                       // If web UI doesn't exist (404 Not Found)
                       console.log("UI does not exist, creating new...");
-                      return fetch(gradioUrl, {
+                      return fetcher(gradioUrl, {
                         method: "POST",
                         headers: {
                           "Content-Type": "application/json",
@@ -232,7 +233,7 @@ const RunningModels = () => {
                   return;
                 }
                 setIsCallingApi(true);
-                fetch(closeUrl, {
+                fetcher(closeUrl, {
                   method: "DELETE",
                 })
                   .then((response) => {
@@ -329,7 +330,7 @@ const RunningModels = () => {
                   return;
                 }
                 setIsCallingApi(true);
-                fetch(closeUrl, {
+                fetcher(closeUrl, {
                   method: "DELETE",
                 })
                   .then((response) => {