Merge pull request #5 from silvanmelchior/new-deployment

New deployment

VERSION

@@ -1 +1 @@
-1.0.0
+2.0.0b1

docker/Dockerfile

@@ -1,23 +1,30 @@
 ARG INTERPRETER_IMAGE
-FROM $INTERPRETER_IMAGE
-SHELL ["/bin/bash", "-c"]
-
-RUN apt update && apt install -y nodejs npm
+FROM node:18-alpine
 
 WORKDIR /opt/app
 
-COPY interpreter interpreter
-RUN python3 -m venv venv_backend && \
-    source venv_backend/bin/activate && \
-    pip3 install ./interpreter
-
 COPY ui ui
+COPY VERSION VERSION
+
 RUN cd ui && \
     npm install && \
-    npm run build && \
-    cd ..
+    npm run build
+
+FROM $INTERPRETER_IMAGE
+SHELL ["/bin/bash", "-c"]
+
+WORKDIR /opt/app
+COPY --from=0 /opt/app/ui/out /opt/app/ui
+
+RUN apt update && apt install -y nginx
+
+COPY services services
+RUN python3 -m venv venv_services && \
+    source venv_services/bin/activate && \
+    pip3 install ./services
+
+COPY docker/nginx.conf /etc/nginx/
 
-COPY VERSION VERSION
 COPY docker/start* .
 RUN chmod 755 start*
 CMD ["/opt/app/start.sh"]

docker/nginx.conf

@@ -0,0 +1,41 @@
+user www-data;
+worker_processes auto;
+pid /run/nginx.pid;
+include /etc/nginx/modules-enabled/*.conf;
+
+events {
+    worker_connections 768;
+}
+
+http {
+    sendfile on;
+    tcp_nopush on;
+    types_hash_max_size 2048;
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    server {
+        listen 80;
+        listen [::]:80;
+
+        root /opt/app/ui;
+        index index.html index.htm index.nginx-debian.html;
+
+        location /api/llm {
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_pass http://localhost:8081;
+        }
+
+        location /api/interpreter {
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_pass http://localhost:8080;
+        }
+
+        location / {
+            try_files $uri $uri/ =404;
+        }
+    }
+
+}

docker/start.sh

@@ -1,4 +1,6 @@
 #!/bin/bash
 
 /opt/app/start_interpreter.sh &
-/opt/app/start_ui.sh
+/opt/app/start_llm.sh &
+
+nginx -g "daemon off;"

docker/start_interpreter.sh

@@ -1,11 +1,11 @@
 #!/bin/bash
 
 cd /opt/app
-. venv_backend/bin/activate
-cd interpreter
+. venv_services/bin/activate
+cd services
 
 mkdir -p /mnt/data
 export WORKING_DIRECTORY=/mnt/data
 export IPYTHON_PATH=/opt/app/venv_interpreter/bin/ipython
 
-uvicorn main:app --host 0.0.0.0 --port 3031
+uvicorn main_interpreter:app --host 0.0.0.0 --port 8080

docker/start_llm.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+cd /opt/app
+. venv_services/bin/activate
+cd services
+
+uvicorn main_llm:app --host 0.0.0.0 --port 8081

services/main_interpreter.py

@@ -25,7 +25,7 @@ def get_interpreter() -> IPythonInterpreter:
     return interpreter
 
 
-@app.websocket("/run")
+@app.websocket("/api/interpreter/run")
 async def run(websocket: WebSocket):
     ws_exceptions = WebSocketDisconnect, ConnectionClosedError
 

services/main_llm.py

@@ -19,7 +19,7 @@ class Request(BaseModel):
     history: list[Message]
 
 
-@app.websocket("/chat")
+@app.websocket("/api/llm/chat")
 async def chat(websocket: WebSocket):
     ws_exceptions = WebSocketDisconnect, ConnectionClosedError
 

ui/app/page.tsx

@@ -3,24 +3,6 @@ import SessionManager from "@/app/session/session_manager";
 import path from "path";
 import * as fs from "fs";
 
-export const dynamic = "force-dynamic";
-
-function getInterpreterUrl() {
-  const interpreterUrl = process.env.INTERPRETER_URL;
-  if (interpreterUrl === undefined) {
-    throw new Error("INTERPRETER_URL is undefined");
-  }
-  return interpreterUrl;
-}
-
-function getLlmUrl() {
-  const llmUrl = process.env.LLM_URL;
-  if (llmUrl === undefined) {
-    throw new Error("LLM_URL is undefined");
-  }
-  return llmUrl;
-}
-
 function getVersion(): Promise<string> {
   const versionDir = path.dirname(
     path.dirname(path.dirname(path.dirname(__dirname))),
@@ -38,11 +20,5 @@ function getVersion(): Promise<string> {
 }
 
 export default async function Home() {
-  return (
-    <SessionManager
-      interpreterUrl={getInterpreterUrl()}
-      llmUrl={getLlmUrl()}
-      version={await getVersion()}
-    />
-  );
+  return <SessionManager version={await getVersion()} />;
 }

ui/app/session/chat/brand.tsx

@@ -1,11 +1,8 @@
-import Image from "next/image";
-import iconColor from "./icon_color.png";
-
 export default function Brand() {
   return (
     <div className="flex h-full flex-col items-center justify-center">
       <div className="w-48">
-        <Image src={iconColor} alt="Brand" priority />
+        <img src="/icon_color.png" alt="Brand" />
       </div>
       <div className="text-2xl text-blue-200 mt-4">Incognito Pilot</div>
       <div className="text-lg text-blue-200 mt-1">

ui/app/session/chat/chat_history.tsx

@@ -1,7 +1,5 @@
 import { Message } from "@/app/session/communication/message";
 import { TbUser } from "react-icons/tb";
-import Image from "next/image";
-import robotIcon from "../../icon.png";
 import React from "react";
 
 export default function ChatHistory({ history }: { history: Message[] }) {
@@ -25,7 +23,7 @@ export default function ChatHistory({ history }: { history: Message[] }) {
           <div key={idx} className="flex mt-4">
             {msg.role === "model" ? (
               <div className="mr-4 mt-2 min-w-[36px]">
-                <Image src={robotIcon} alt="robot" width={36} priority />
+                <img src="./icon.png" alt="robot" width={36} />
               </div>
             ) : (
               <div className="flex-1 min-w-[20px]" />

ui/app/session/chat/chat_input.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 import { BiSend } from "react-icons/bi";
-import thinkingImg from "./thinking.gif";
-import Image from "next/image";
 
 export default function ChatInput({
   innerRef,
@@ -61,7 +59,7 @@ export default function ChatInput({
       </div>
       {llmAnimation && (
         <div className="absolute left-4 top-[-48px] z-10">
-          <Image src={thinkingImg} alt="thinking" priority width={57} />
+          <img src="/thinking.gif" alt="thinking" width={57} />
         </div>
       )}
     </div>

ui/app/session/communication/chat_round.tsx

@@ -20,8 +20,16 @@ export class ChatRound {
     private readonly interpreter: Interpreter,
     private readonly setState: (state: ChatRoundState) => void,
     private readonly setCodeResult: (result: string) => void,
-    llmUrl: string,
   ) {
+    let llmUrl = process.env.NEXT_PUBLIC_LLM_URL ?? "";
+    if (llmUrl === "") {
+      try {
+        llmUrl = location.host;
+      } catch (e) {
+        llmUrl = "localhost";
+      }
+    }
+    llmUrl += "/api/llm";
     this.llm = new LLM(llmUrl);
   }
 

ui/app/session/communication/interpreter.tsx

@@ -1,7 +1,18 @@
 export default class Interpreter {
   private ws: WebSocket | null = null;
+  private readonly interpreterUrl: string;
 
-  constructor(private readonly interpreterUrl: string) {}
+  constructor() {
+    this.interpreterUrl = process.env.NEXT_PUBLIC_INTERPRETER_URL ?? "";
+    if (this.interpreterUrl === "") {
+      try {
+        this.interpreterUrl = location.host;
+      } catch (e) {
+        this.interpreterUrl = "localhost";
+      }
+    }
+    this.interpreterUrl += "/api/interpreter";
+  }
 
   private connect(): Promise<void> {
     return new Promise((resolve, reject) => {

ui/app/session/session.tsx

@@ -13,13 +13,9 @@ import { Header } from "@/app/session/chat/header";
 import Brand from "@/app/session/chat/brand";
 
 export default function Session({
-  interpreterUrl,
-  llmUrl,
   refreshSession,
   version,
 }: {
-  interpreterUrl: string;
-  llmUrl: string;
   refreshSession: () => void;
   version: string;
 }) {
@@ -36,7 +32,7 @@ export default function Session({
   const chatInputRef = React.useRef<HTMLTextAreaElement | null>(null);
   const interpreterRef = React.useRef<Interpreter | null>(null);
   if (interpreterRef.current === null) {
-    interpreterRef.current = new Interpreter(interpreterUrl);
+    interpreterRef.current = new Interpreter();
   }
 
   const code = history.findLast((msg) => msg.code !== undefined)?.code ?? null;
@@ -60,7 +56,6 @@ export default function Session({
       interpreterRef.current!,
       setChatRoundState,
       setCodeResult,
-      llmUrl,
     );
     chatRound
       .run(message)

ui/app/session/session_manager.tsx

@@ -3,23 +3,13 @@
 import React from "react";
 import Session from "@/app/session/session";
 
-export default function SessionManager({
-  interpreterUrl,
-  llmUrl,
-  version,
-}: {
-  interpreterUrl: string;
-  llmUrl: string;
-  version: string;
-}) {
+export default function SessionManager({ version }: { version: string }) {
   const [sessionCnt, setSessionCnt] = React.useState(0);
   const refreshSession = () => setSessionCnt(sessionCnt + 1);
   return (
     <Session
       key={sessionCnt}
       refreshSession={refreshSession}
-      interpreterUrl={interpreterUrl}
-      llmUrl={llmUrl}
       version={version}
     />
   );

ui/next.config.js

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  output: "export",
+};
 
 module.exports = nextConfig;

ui/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start -p 3030",
+    "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {