From 51342426d77f395aa7743dff7ae3e0cafa52892f Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 4 Nov 2024 17:37:16 +0800 Subject: [PATCH 1/2] chore: Use environment variable configuration files to set host, port, etc --- .env.sample | 10 ++++++++++ Makefile | 7 +++++-- README.md | 15 ++++++++++++--- server/app/main.py | 12 ++++++++++-- website/.env.local.sample | 7 +++++++ website/README.md | 14 ++++++++++++++ website/src/app/api/chat/route.ts | 9 +++++++-- website/src/app/api/runPipeline/route.ts | 3 ++- website/src/app/playground/page.tsx | 2 +- website/src/contexts/WebSocketContext.tsx | 2 +- 10 files changed, 69 insertions(+), 12 deletions(-) create mode 100644 .env.sample create mode 100644 website/.env.local.sample diff --git a/.env.sample b/.env.sample new file mode 100644 index 00000000..7c59f30b --- /dev/null +++ b/.env.sample @@ -0,0 +1,10 @@ +OPENAI_API_KEY= +OPENAI_API_BASE= + +BACKEND_ALLOW_ORIGINS= +BACKEND_HOST=localhost +BACKEND_PORT=8000 +BACKEND_RELOAD=True + +FRONTEND_HOST=0.0.0.0 +FRONTEND_PORT=3000 \ No newline at end of file diff --git a/Makefile b/Makefile index 75e61143..bc147709 100644 --- a/Makefile +++ b/Makefile @@ -1,3 +1,6 @@ +# Load environment variables from .env file +include .env + .PHONY: tests tests-basic lint install mypy update ui-install ui-run # Existing commands @@ -32,13 +35,13 @@ run-ui-dev: @echo "Starting server..." @python server/app/main.py & \ echo "Starting UI development server..." && \ - cd $(UI_DIR) && npm run dev + cd $(UI_DIR) && HOST=${FRONTEND_HOST} PORT=${FRONTEND_PORT} npm run dev run-ui: @echo "Starting server..." @python server/app/main.py & \ echo "Building UI..." && \ - cd $(UI_DIR) && npm run build && npm run start + cd $(UI_DIR) && npm run build && HOST=${FRONTEND_HOST} PORT=${FRONTEND_PORT} NEXT_PUBLIC_FRONTEND_ALLOWED_HOSTS=${FRONTEND_ALLOWED_HOSTS} npm run start # Help command help: diff --git a/README.md b/README.md index 34dd3cbb..11c86d5e 100644 --- a/README.md +++ b/README.md @@ -70,15 +70,24 @@ pip install poetry poetry install ``` -4. Set up your OpenAI API key: +4. Set up your OpenAI API key and other environment variables: -Create a .env file in the project root and add your OpenAI API key: +Copy the .env.sample file under the root directory to .env and modify the environment variables inside as needed. ```bash OPENAI_API_KEY=your_api_key_here +OPENAI_BASE_URL= + +BACKEND_ALLOW_ORIGINS= +BACKEND_HOST=localhost +BACKEND_PORT=8000 +BACKEND_RELOAD=True + +FRONTEND_HOST=0.0.0.0 +FRONTEND_PORT=3000 ``` -Alternatively, you can set the OPENAI_API_KEY environment variable in your shell. +Alternatively, you can set the OPENAI_API_KEY environment variable and others in your shell. 5. Run the basic test suite to ensure everything is working (this costs less than $0.01 with OpenAI): diff --git a/server/app/main.py b/server/app/main.py index 6c14e107..bedde37d 100644 --- a/server/app/main.py +++ b/server/app/main.py @@ -6,6 +6,14 @@ load_dotenv() +# Read backend configuration from .env +host = os.getenv("BACKEND_HOST", "127.0.0.1") +port = int(os.getenv("BACKEND_PORT", 8000)) +reload = os.getenv("BACKEND_RELOAD", "False").lower() == "true" + +# Set default allow_origins if BACKEND_ALLOW_ORIGINS is not provided +allow_origins = os.getenv("BACKEND_ALLOW_ORIGINS", "http://localhost:3000").split(",") + app = FastAPI() os.environ["USE_FRONTEND"] = "true" @@ -13,7 +21,7 @@ # Add CORS middleware app.add_middleware( CORSMiddleware, - allow_origins=["http://localhost:3000"], # Adjust this to your Next.js app's URL + allow_origins=allow_origins, # Adjust this to your Next.js app's URL allow_credentials=True, allow_methods=["*"], allow_headers=["*"], @@ -30,4 +38,4 @@ async def root(): if __name__ == "__main__": import uvicorn - uvicorn.run("server.app.main:app", host="0.0.0.0", port=8000, reload=True) + uvicorn.run("server.app.main:app", host=host, port=port, reload=reload) diff --git a/website/.env.local.sample b/website/.env.local.sample new file mode 100644 index 00000000..904cfe59 --- /dev/null +++ b/website/.env.local.sample @@ -0,0 +1,7 @@ +OPENAI_API_KEY=sk-xxx +OPENAI_API_BASE=https://api.openai.com/v1 +MODEL_NAME=gpt-4o-mini + +NEXT_PUBLIC_BACKEND_HOST=localhost +NEXT_PUBLIC_BACKEND_PORT=8000 + diff --git a/website/README.md b/website/README.md index e215bc4c..673cb1d3 100644 --- a/website/README.md +++ b/website/README.md @@ -2,6 +2,20 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next- ## Getting Started +### Environment variables setting-up + +Copy the .env.sample file from the root directory to .env.local and modify the environment variables inside: + +```bash +OPENAI_API_KEY=sk-xxx +OPENAI_API_BASE=https://api.openai.com/v1 +MODEL_NAME=gpt-4o-mini + +NEXT_PUBLIC_BACKEND_HOST=localhost +NEXT_PUBLIC_BACKEND_PORT=8008 + +``` + First, run the development server: ```bash diff --git a/website/src/app/api/chat/route.ts b/website/src/app/api/chat/route.ts index 028d9c08..6447b7b0 100644 --- a/website/src/app/api/chat/route.ts +++ b/website/src/app/api/chat/route.ts @@ -1,14 +1,19 @@ -import { openai } from "@ai-sdk/openai"; +import { createOpenAI } from "@ai-sdk/openai"; import { streamText } from "ai"; // Allow streaming responses up to 60 seconds export const maxDuration = 60; +const openai = createOpenAI({ + apiKey: process.env.OPENAI_API_KEY, + baseURL: process.env.OPENAI_API_BASE, + compatibility: 'strict', // strict mode, enable when using the OpenAI API +}); export async function POST(req: Request) { const { messages } = await req.json(); const result = await streamText({ - model: openai("gpt-4o-mini"), + model: openai(process.env.MODEL_NAME), system: "You are a helpful assistant.", messages, }); diff --git a/website/src/app/api/runPipeline/route.ts b/website/src/app/api/runPipeline/route.ts index 8b5ad688..ed505000 100644 --- a/website/src/app/api/runPipeline/route.ts +++ b/website/src/app/api/runPipeline/route.ts @@ -162,7 +162,8 @@ export async function POST(request: Request) { await fs.writeFile(filePath, yamlString, "utf8"); // Submit the YAML config to the FastAPI endpoint - const response = await axios.post("http://localhost:8000/run_pipeline", { + + const response = await axios.post(`http://${process.env.NEXT_PUBLIC_BACKEND_HOST}:${process.env.NEXT_PUBLIC_BACKEND_PORT}/run_pipeline`, { yaml_config: filePath, }); diff --git a/website/src/app/playground/page.tsx b/website/src/app/playground/page.tsx index ce25cc78..a7c11e56 100644 --- a/website/src/app/playground/page.tsx +++ b/website/src/app/playground/page.tsx @@ -518,7 +518,7 @@ const WrappedCodeEditorPipelineApp: React.FC = () => { useEffect(() => { setIsLocalhost( window.location.hostname === "localhost" || - window.location.hostname === "127.0.0.1" + window.location.hostname === "127.0.0.1" ); }, []); diff --git a/website/src/contexts/WebSocketContext.tsx b/website/src/contexts/WebSocketContext.tsx index 5773fb25..af963821 100644 --- a/website/src/contexts/WebSocketContext.tsx +++ b/website/src/contexts/WebSocketContext.tsx @@ -30,7 +30,7 @@ export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ return; } - ws.current = new WebSocket("ws://localhost:8000/ws/run_pipeline"); + ws.current = new WebSocket(`ws://${process.env.NEXT_PUBLIC_BACKEND_HOST}:${process.env.NEXT_PUBLIC_BACKEND_PORT}/ws/run_pipeline`); ws.current.onopen = () => { setReadyState(WebSocket.OPEN); From 0ef33fa267ad82c922a00cad7d4f891799573abf Mon Sep 17 00:00:00 2001 From: Shreya Shankar Date: Tue, 5 Nov 2024 16:05:02 -0800 Subject: [PATCH 2/2] Small nits in readme --- .env.sample | 1 - README.md | 1 - website/README.md | 2 +- 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/.env.sample b/.env.sample index 7c59f30b..7579b324 100644 --- a/.env.sample +++ b/.env.sample @@ -1,5 +1,4 @@ OPENAI_API_KEY= -OPENAI_API_BASE= BACKEND_ALLOW_ORIGINS= BACKEND_HOST=localhost diff --git a/README.md b/README.md index 11c86d5e..e2882f7c 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,6 @@ Copy the .env.sample file under the root directory to .env and modify the enviro ```bash OPENAI_API_KEY=your_api_key_here -OPENAI_BASE_URL= BACKEND_ALLOW_ORIGINS= BACKEND_HOST=localhost diff --git a/website/README.md b/website/README.md index 673cb1d3..df2a592f 100644 --- a/website/README.md +++ b/website/README.md @@ -2,7 +2,7 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next- ## Getting Started -### Environment variables setting-up +### Setting up environment variables Copy the .env.sample file from the root directory to .env.local and modify the environment variables inside: