Merge remote-tracking branch 'origin/dev' into authentication

2023-08-14 22:52:57 +01:00 · 2023-08-14 22:52:57 +01:00 · ab61edfbf9
commit ab61edfbf9
parent e9a94d7374 cb66255b84
17 changed files with 218 additions and 199 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1 @@
+.venv/
--- a/dev.Dockerfile
+++ b/dev.Dockerfile
@ -15,4 +15,4 @@ COPY ./ ./
 # Install dependencies
 RUN poetry config virtualenvs.create false && poetry install --no-interaction --no-ansi

-CMD ["uvicorn","--factory", "langflow.main:create_app", "--host", "0.0.0.0", "--port", "5003", "--reload", "log-level", "debug"]
+CMD ["uvicorn", "--factory", "src.backend.langflow.main:create_app", "--host", "0.0.0.0", "--port", "7860", "--reload", "--log-level", "debug"]
--- a/docker-compose.debug.yml
+++ b/docker-compose.debug.yml
@ -11,7 +11,7 @@ services:
      [
        "sh",
        "-c",
-        "pip install debugpy -t /tmp && python /tmp/debugpy --wait-for-client --listen 0.0.0.0:5678 -m uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload",
+        "pip install debugpy -t /tmp && python /tmp/debugpy --wait-for-client --listen 0.0.0.0:5678 -m uvicorn --factory src.backend.langflow.main:create_app --host 0.0.0.0 --port 7860 --reload",
      ]
    ports:
      - 7860:7860
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -9,7 +9,7 @@ services:
      - "7860:7860"
    volumes:
      - ./:/app
-    command: bash -c "uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload"
+    command: bash -c "uvicorn --factory src.backend.langflow.main:create_app --host 0.0.0.0 --port 7860 --reload"

  frontend:
    build:
--- a/docs/docs/components/embeddings.mdx
+++ b/docs/docs/components/embeddings.mdx
@ -73,3 +73,25 @@ Used to load [OpenAI’s](https://openai.com/) embedding models.
 - **request_timeout:** Used to specify the maximum amount of time, in milliseconds, to wait for a response from the OpenAI API when generating embeddings for a given text.

 - **tiktoken_model_name:** Used to count the number of tokens in documents to constrain them to be under a certain limit. By default, when set to None, this will be the same as the embedding model name.
+
+---
+
+### VertexAIEmbeddings
+
+Wrapper around [Google Vertex AI](https://cloud.google.com/vertex-ai) [Embeddings API](https://cloud.google.com/vertex-ai/docs/generative-ai/embeddings/get-text-embeddings).
+
+:::info
+Vertex AI is a cloud computing platform offered by Google Cloud Platform (GCP). It provides access, management, and development of applications and services through global data centers. To use Vertex AI PaLM, you need to have the [google-cloud-aiplatform](https://pypi.org/project/google-cloud-aiplatform/) Python package installed and credentials configured for your environment.
+:::
+
+- **credentials:** The default custom credentials (google.auth.credentials.Credentials) to use.
+- **location:** The default location to use when making API calls – defaults to `us-central1`.
+- **max_output_tokens:** Token limit determines the maximum amount of text output from one prompt – defaults to `128`.
+- **model_name:** The name of the Vertex AI large language model – defaults to `text-bison`.
+- **project:** The default GCP project to use when making Vertex API calls.
+- **request_parallelism:** The amount of parallelism allowed for requests issued to VertexAI models – defaults to `5`.
+- **temperature:** Tunes the degree of randomness in text generations. Should be a non-negative value – defaults to `0`.
+- **top_k:** How the model selects tokens for output, the next token is selected from – defaults to `40`.
+- **top_p:** Tokens are selected from most probable to least until the sum of their – defaults to `0.95`.
+- **tuned_model_name:** The name of a tuned model. If provided, model_name is ignored.
+- **verbose:** This parameter is used to control the level of detail in the output of the chain. When set to True, it will print out some internal states of the chain while it is being run, which can help debug and understand the chain's behavior. If set to False, it will suppress the verbose output – defaults to `False`.
--- a/docs/docs/components/llms.mdx
+++ b/docs/docs/components/llms.mdx
@ -185,6 +185,28 @@ Wrapper around [Google Vertex AI](https://cloud.google.com/vertex-ai) large lang
 Vertex AI is a cloud computing platform offered by Google Cloud Platform (GCP). It provides access, management, and development of applications and services through global data centers. To use Vertex AI PaLM, you need to have the [google-cloud-aiplatform](https://pypi.org/project/google-cloud-aiplatform/) Python package installed and credentials configured for your environment.
 :::

+- **credentials:** The default custom credentials (google.auth.credentials.Credentials) to use.
+- **location:** The default location to use when making API calls – defaults to `us-central1`.
+- **max_output_tokens:** Token limit determines the maximum amount of text output from one prompt – defaults to `128`.
+- **model_name:** The name of the Vertex AI large language model – defaults to `text-bison`.
+- **project:** The default GCP project to use when making Vertex API calls.
+- **request_parallelism:** The amount of parallelism allowed for requests issued to VertexAI models – defaults to `5`.
+- **temperature:** Tunes the degree of randomness in text generations. Should be a non-negative value – defaults to `0`.
+- **top_k:** How the model selects tokens for output, the next token is selected from – defaults to `40`.
+- **top_p:** Tokens are selected from most probable to least until the sum of their – defaults to `0.95`.
+- **tuned_model_name:** The name of a tuned model. If provided, model_name is ignored.
+- **verbose:** This parameter is used to control the level of detail in the output of the chain. When set to True, it will print out some internal states of the chain while it is being run, which can help debug and understand the chain's behavior. If set to False, it will suppress the verbose output – defaults to `False`.
+
+---
+
+### ChatVertexAI
+
+Wrapper around [Google Vertex AI](https://cloud.google.com/vertex-ai) large language models.
+
+:::info
+Vertex AI is a cloud computing platform offered by Google Cloud Platform (GCP). It provides access, management, and development of applications and services through global data centers. To use Vertex AI PaLM, you need to have the [google-cloud-aiplatform](https://pypi.org/project/google-cloud-aiplatform/) Python package installed and credentials configured for your environment.
+:::
+
 - **credentials:** The default custom credentials (google.auth.credentials.Credentials) to use.
 - **location:** The default location to use when making API calls – defaults to `us-central1`.
 - **max_output_tokens:** Token limit determines the maximum amount of text output from one prompt – defaults to `128`.
--- a/pyproject.toml
+++ b/pyproject.toml
@ -45,7 +45,7 @@ unstructured = "^0.7.0"
 pypdf = "^3.11.0"
 lxml = "^4.9.2"
 pysrt = "^1.1.2"
-fake-useragent = "^1.1.3"
+fake-useragent = "^1.2.1"
 docstring-parser = "^0.15"
 psycopg2-binary = "^2.9.6"
 pyarrow = "^12.0.0"
--- a/src/backend/Dockerfile
+++ b/src/backend/Dockerfile
@ -11,4 +11,4 @@ RUN rm *.whl

 EXPOSE 80

-CMD [ "uvicorn", "--host", "0.0.0.0", "--port", "80", "langflow.backend.app:app" ]
+CMD [ "uvicorn", "--host", "0.0.0.0", "--port", "7860", "--factory", "langflow.main:create_app" ]
--- a/src/backend/langflow/config.yaml
+++ b/src/backend/langflow/config.yaml
@ -104,6 +104,8 @@ embeddings:
    documentation: "https://python.langchain.com/docs/modules/data_connection/text_embedding/integrations/sentence_transformers"
  CohereEmbeddings:
    documentation: "https://python.langchain.com/docs/modules/data_connection/text_embedding/integrations/cohere"
+  VertexAIEmbeddings:
+    documentation: "https://python.langchain.com/docs/modules/data_connection/text_embedding/integrations/google_vertex_ai_palm"
 llms:
  OpenAI:
    documentation: "https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai"
@ -127,8 +129,8 @@ llms:
  # There's a bug in this component deactivating until we get it sorted: _language_models.py", line 804, in send_message
  #     is_blocked=safety_attributes.get("blocked", False),
  # AttributeError: 'list' object has no attribute 'get'
-  # ChatVertexAI:
-  #   documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/integrations/google_vertex_ai_palm"
+  ChatVertexAI:
+    documentation: "https://python.langchain.com/docs/modules/model_io/models/chat/integrations/google_vertex_ai_palm"
  ###
 memories:
  # https://github.com/supabase-community/supabase-py/issues/482
--- a/src/backend/langflow/interface/initialize/loading.py
+++ b/src/backend/langflow/interface/initialize/loading.py
@ -88,7 +88,7 @@ def instantiate_based_on_type(class_object, base_type, node_type, params):
    elif base_type == "toolkits":
        return instantiate_toolkit(node_type, class_object, params)
    elif base_type == "embeddings":
-        return instantiate_embedding(class_object, params)
+        return instantiate_embedding(node_type, class_object, params)
    elif base_type == "vectorstores":
        return instantiate_vectorstore(class_object, params)
    elif base_type == "documentloaders":
@ -147,7 +147,7 @@ def instantiate_llm(node_type, class_object, params: Dict):
    # This is a workaround so JinaChat works until streaming is implemented
    # if "openai_api_base" in params and "jina" in params["openai_api_base"]:
    # False if condition is True
-    if node_type == "VertexAI":
+    if "VertexAI" in node_type:
        return initialize_vertexai(class_object=class_object, params=params)
    # max_tokens sometimes is a string and should be an int
    if "max_tokens" in params:
@ -261,9 +261,13 @@ def instantiate_toolkit(node_type, class_object: Type[BaseToolkit], params: Dict
    return loaded_toolkit


-def instantiate_embedding(class_object, params: Dict):
+def instantiate_embedding(node_type, class_object, params: Dict):
    params.pop("model", None)
    params.pop("headers", None)
+
+    if "VertexAI" in node_type:
+        return initialize_vertexai(class_object=class_object, params=params)
+
    try:
        return class_object(**params)
    except ValidationError:
--- a/src/backend/langflow/template/frontend_node/embeddings.py
+++ b/src/backend/langflow/template/frontend_node/embeddings.py
@ -5,6 +5,47 @@ from langflow.template.frontend_node.base import FrontendNode


 class EmbeddingFrontendNode(FrontendNode):
+    def add_extra_fields(self) -> None:
+        if "VertexAI" in self.template.type_name:
+            # Add credentials field which should of type file.
+            self.template.add_field(
+                TemplateField(
+                    field_type="file",
+                    required=False,
+                    show=True,
+                    name="credentials",
+                    value="",
+                    suffixes=[".json"],
+                    file_types=["json"],
+                )
+            )
+
+    @staticmethod
+    def format_vertex_field(field: TemplateField, name: str):
+        if "VertexAI" in name:
+            advanced_fields = [
+                "verbose",
+                "top_p",
+                "top_k",
+                "max_output_tokens",
+            ]
+            if field.name in advanced_fields:
+                field.advanced = True
+            show_fields = [
+                "verbose",
+                "project",
+                "location",
+                "credentials",
+                "max_output_tokens",
+                "model_name",
+                "temperature",
+                "top_p",
+                "top_k",
+            ]
+
+            if field.name in show_fields:
+                field.show = True
+
    @staticmethod
    def format_jina_fields(field: TemplateField):
        if "jina" in field.name:
@ -41,10 +82,36 @@ class EmbeddingFrontendNode(FrontendNode):
    @staticmethod
    def format_field(field: TemplateField, name: Optional[str] = None) -> None:
        FrontendNode.format_field(field, name)
+        if name and "vertex" in name.lower():
+            EmbeddingFrontendNode.format_vertex_field(field, name)
        field.advanced = not field.required
        field.show = True
        if field.name == "headers":
            field.show = False
+        if field.name == "model_kwargs":
+            field.field_type = "code"
+            field.advanced = True
+            field.show = True
+        elif field.name in [
+            "model_name",
+            "temperature",
+            "model_file",
+            "model_type",
+            "deployment_name",
+            "credentials",
+        ]:
+            field.advanced = False
+            field.show = True
+        if field.name == "credentials":
+            field.field_type = "file"
+        if name == "VertexAI" and field.name not in [
+            "callbacks",
+            "client",
+            "stop",
+            "tags",
+            "cache",
+        ]:
+            field.show = True

        # Format Jina fields
        EmbeddingFrontendNode.format_jina_fields(field)
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@ -508,84 +508,3 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
  "/api/v1/custom_component",
  "/api/v1/validate/prompt",
 ];
-
-export const tabsCode = [];
-
-export function tabsArray(codes: string[], method: number) {
-  if (!method) return;
-  if (method === 0) {
-    return [
-      {
-        name: "cURL",
-        mode: "bash",
-        image: "https://curl.se/logo/curl-symbol-transparent.png",
-        language: "sh",
-        code: codes[0],
-      },
-      {
-        name: "Python API",
-        mode: "python",
-        image:
-          "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
-        language: "py",
-        code: codes[1],
-      },
-      {
-        name: "Python Code",
-        mode: "python",
-        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-        language: "py",
-        code: codes[2],
-      },
-      {
-        name: "Chat Widget HTML",
-        description:
-          "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
-        mode: "html",
-        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-        language: "py",
-        code: codes[3],
-      },
-    ];
-  }
-  return [
-    {
-      name: "cURL",
-      mode: "bash",
-      image: "https://curl.se/logo/curl-symbol-transparent.png",
-      language: "sh",
-      code: codes[0],
-    },
-    {
-      name: "Python API",
-      mode: "python",
-      image:
-        "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
-      language: "py",
-      code: codes[1],
-    },
-    {
-      name: "Python Code",
-      mode: "python",
-      language: "py",
-      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-      code: codes[2],
-    },
-    {
-      name: "Chat Widget HTML",
-      description:
-        "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
-      mode: "html",
-      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-      language: "py",
-      code: codes[3],
-    },
-    {
-      name: "Tweaks",
-      mode: "python",
-      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-      language: "py",
-      code: codes[4],
-    },
-  ];
-}
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@ -22,6 +22,7 @@ import {
  getPythonApiCode,
  getPythonCode,
  getWidgetCode,
+  tabsArray,
 } from "../../utils/utils";
 import BaseModal from "../baseModal";

@ -48,39 +49,8 @@ const ApiModal = forwardRef(
    const pythonCode = getPythonCode(flow, tweak.current, tabsState);
    const widgetCode = getWidgetCode(flow, tabsState);
    const tweaksCode = buildTweaks(flow);
-    const [tabs, setTabs] = useState([
-      {
-        name: "cURL",
-        mode: "bash",
-        image: "https://curl.se/logo/curl-symbol-transparent.png",
-        language: "sh",
-        code: curl_code,
-      },
-      {
-        name: "Python API",
-        mode: "python",
-        image:
-          "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
-        language: "py",
-        code: pythonApiCode,
-      },
-      {
-        name: "Python Code",
-        mode: "python",
-        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-        language: "py",
-        code: pythonCode,
-      },
-      {
-        name: "Chat Widget HTML",
-        description:
-          "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://docs.langflow.org/guidelines/widget'>documentation</a>.",
-        mode: "html",
-        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-        language: "py",
-        code: widgetCode,
-      },
-    ]);
+    const codesArray = [curl_code, pythonApiCode, pythonCode, widgetCode, pythonCode];
+    const [tabs, setTabs] = useState(tabsArray(codesArray, 0));

    function startState() {
      tweak.current = [];
@ -101,80 +71,9 @@ const ApiModal = forwardRef(

      if (Object.keys(tweaksCode).length > 0) {
        setActiveTab("0");
-        setTabs([
-          {
-            name: "cURL",
-            mode: "bash",
-            image: "https://curl.se/logo/curl-symbol-transparent.png",
-            language: "sh",
-            code: curl_code,
-          },
-          {
-            name: "Python API",
-            mode: "python",
-            image:
-              "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
-            language: "py",
-            code: pythonApiCode,
-          },
-          {
-            name: "Python Code",
-            mode: "python",
-            language: "py",
-            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-            code: pythonCode,
-          },
-          {
-            name: "Chat Widget HTML",
-            description:
-              "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://docs.langflow.org/guidelines/widget'>documentation</a>.",
-            mode: "html",
-            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-            language: "py",
-            code: widgetCode,
-          },
-          {
-            name: "Tweaks",
-            mode: "python",
-            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-            language: "py",
-            code: pythonCode,
-          },
-        ]);
+        setTabs(tabsArray(codesArray, 1));
      } else {
-        setTabs([
-          {
-            name: "cURL",
-            mode: "bash",
-            image: "https://curl.se/logo/curl-symbol-transparent.png",
-            language: "sh",
-            code: curl_code,
-          },
-          {
-            name: "Python API",
-            mode: "python",
-            image:
-              "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
-            language: "py",
-            code: pythonApiCode,
-          },
-          {
-            name: "Python Code",
-            mode: "python",
-            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-            language: "py",
-            code: pythonCode,
-          },
-          {
-            name: "Chat Widget HTML",
-            description:
-              "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://docs.langflow.org/guidelines/widget'>documentation</a>.",
-            mode: "html",
-            image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-            language: "py",
-            code: widgetCode,
-          },
-        ]);
+        setTabs(tabsArray(codesArray, 1));
      }
    }, [flow["data"]["nodes"], open]);

--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@ -160,7 +160,7 @@ export default function FormModal({
  }

  function getWebSocketUrl(chatId, isDevelopment = false) {
-    const isSecureProtocol = window.location.protocol === "https:";
+    const isSecureProtocol = window.location.protocol === "https:" || window.location.port === "443";
    const webSocketProtocol = isSecureProtocol ? "wss" : "ws";
    const host = isDevelopment ? "localhost:7860" : window.location.host;
    const chatEndpoint = `/api/v1/chat/${chatId}`;
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@ -205,6 +205,7 @@ export const nodeIconsLucide = {
  SupabaseVectorStore: SupabaseIcon,
  VertexAI: VertexAIIcon,
  ChatVertexAI: VertexAIIcon,
+  VertexAIEmbeddings: VertexAIIcon,
  agents: Rocket,
  WikipediaAPIWrapper: SvgWikipedia,
  chains: Link,
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@ -410,3 +410,82 @@ chat_input_field: Input key that you want the chat to send the user message with
  }host_url="http://localhost:7860"
 ></langflow-chat>`;
 }
+
+export function tabsArray(codes: string[], method: number) {
+  if (!method) return;
+  if (method === 0) {
+    return [
+      {
+        name: "cURL",
+        mode: "bash",
+        image: "https://curl.se/logo/curl-symbol-transparent.png",
+        language: "sh",
+        code: codes[0],
+      },
+      {
+        name: "Python API",
+        mode: "python",
+        image:
+          "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+        language: "py",
+        code: codes[1],
+      },
+      {
+        name: "Python Code",
+        mode: "python",
+        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+        language: "py",
+        code: codes[2],
+      },
+      {
+        name: "Chat Widget HTML",
+        description:
+          "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
+        mode: "html",
+        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+        language: "py",
+        code: codes[3],
+      },
+    ];
+  }
+  return [
+    {
+      name: "cURL",
+      mode: "bash",
+      image: "https://curl.se/logo/curl-symbol-transparent.png",
+      language: "sh",
+      code: codes[0],
+    },
+    {
+      name: "Python API",
+      mode: "python",
+      image:
+        "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+      language: "py",
+      code: codes[1],
+    },
+    {
+      name: "Python Code",
+      mode: "python",
+      language: "py",
+      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+      code: codes[2],
+    },
+    {
+      name: "Chat Widget HTML",
+      description:
+        "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
+      mode: "html",
+      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+      language: "py",
+      code: codes[3],
+    },
+    {
+      name: "Tweaks",
+      mode: "python",
+      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+      language: "py",
+      code: codes[4],
+    },
+  ];
+}
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@ -6,6 +6,9 @@ const apiRoutes = ["^/api/v1/", "/health"];
 // Use environment variable to determine the target.
 const target = process.env.VITE_PROXY_TARGET || "http://127.0.0.1:7860";

+// Use environment variable to determine the UI server port 
+const port = process.env.VITE_PORT || 3000;
+
 const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
  proxyObj[route] = {
    target: target,
@ -22,7 +25,7 @@ export default defineConfig(() => {
    },
    plugins: [react(), svgr()],
    server: {
-      port: 3000,
+      port: port,
      proxy: {
        ...proxyTargets,
      },