Merge pull request #119 from filip-michalsky/docker

Dockerized SalesGPT Chat interface

.dockerignore

@@ -0,0 +1,6 @@
+env/
+__pychace__/
+
+*.env
+*.env.*
+env.*

Dockerfile.backend

@@ -0,0 +1,21 @@
+# Use an official Python runtime as a parent image
+FROM python:3.11.8-bookworm
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the current directory contents into the container at /app
+COPY . /app
+
+RUN pip install -r requirements.txt
+
+# Make port 8000 available to the world outside this container
+EXPOSE 8000
+
+# Define environment variable
+ENV MODULE_NAME="run_api"
+ENV VARIABLE_NAME="app"
+ENV PORT="8000"
+
+# Run FastAPI server when the container launches
+CMD ["uvicorn", "run_api:app", "--host", "0.0.0.0", "--port", "8000"]

README.md

@@ -213,15 +213,83 @@ For more detailed installation steps along with the reasons for doing each pleas
 Finally, for use of SalesGPT create an `.env` file just as our `.env.example` and put your API keys there by specifying a new line just as we have done.
 
 ## Run an Example AI Sales agent
-If you used a local installation of SalesGPT skip the next two steps and directly run the run.py script: 
-
-`git clone https://github.com/filip-michalsky/SalesGPT.git`
+Navigate into the SalesGPT directory: 
 
 `cd SalesGPT`
 
+SalesGPT can be run in various ways, tailored to your preferences and setup. Below are the methods available:
+
+### 1. Using Docker
+For those who prefer containerization, Docker offers an isolated and consistent environment. Ensure Docker is installed on your system by following the [official Docker installation guide](https://docs.docker.com/get-docker/).
+
+To run SalesGPT with Docker, execute the following steps:
+
+1. **Start the Application with Docker Compose:**
+
+   Use the command below to start SalesGPT in detached mode:
+   ```
+   docker-compose up -d
+   ```
+   If you've made changes and want them to reflect, append `--build` to the command above.
+
+2. **Stopping the Application:**
+
+   To stop and remove all running containers related to SalesGPT, execute:
+   ```
+   docker-compose down
+   ```
+
+**Troubleshooting:**
+
+- **Clean Up Docker Resources:** If you encounter errors, you can clean up Docker by removing all unused containers, networks, images, and volumes with caution:
+  ```
+  docker system prune --volumes
+  ```
+- **Rebuild Without Cache:** To rebuild and start the services afresh without using cache, run:
+  ```
+  docker-compose up -d --build --no-cache
+  ```
+
+After successful setup, access SalesGPT at [localhost:3000/chat](http://localhost:3000/chat) in your browser.
+
+### 2. Direct User Interface Launch
+If Docker is not part of your workflow, you can directly launch the SalesGPT user interface. Please refer to the `README.md` file in the frontend directory for instructions on setting up the UI locally.
+
+### 3. Using the Terminal
+For terminal enthusiasts or automation scripts, run SalesGPT with the following command:
 `python run.py --verbose True --config examples/example_agent_setup.json`
 
-from your terminal.
+### 4. Running Only the Backend
+For those who wish to integrate SalesGPT's backend with their own user interface or application, running only the backend is a straightforward process. This allows you to leverage the powerful features of SalesGPT while maintaining full control over the user experience.
+
+To run only the backend of SalesGPT, follow these steps:
+1. **Start the Backend Service:**
+
+   Use the following command to start the backend service. This will initiate the server on port 8000 by default, making the API accessible:
+   ```
+   docker-compose up -d backend
+   ```
+
+   If you need to rebuild the backend image, perhaps after making changes, you can add `--build` to the command above.
+
+2. **Accessing the Backend:**
+
+   With the backend running, you can access the API endpoints at `http://localhost:8000`. Refer to the API documentation for details on available endpoints and their usage.
+
+3. **Stopping the Backend:**
+
+   To stop the backend service, execute:
+   ```
+   docker-compose stop backend
+   ```
+
+   If you wish to remove the backend container entirely, use:
+   ```
+   docker-compose down
+   ```
+
+This setup is ideal for developers looking to integrate SalesGPT's backend into custom applications or those who prefer to use a different frontend technology.
+
 
 ## Test your setup
 
@@ -236,12 +304,6 @@ All tests should pass. Warnings can be ignored.
 To delete the virtual environment you used for SalesGPT programming and your SalesGPT repository from your system navigate to the directory where you installed your virtual environment and cloned SalesGPT and run: 
 `make clean`
 
-## Deploy
-
-We have a SalesGPT deployment demo via FastAPI.
-
-Please refer to [README-api.md](https://github.com/filip-michalsky/SalesGPT/blob/main/README-api.md) for instructions!
-
 # Documentation
 
 We leverage the [`langchain`](https://github.com/hwchase17/langchain) library in this implementation, specifically [Custom Agent Configuration](https://langchain-langchain.vercel.app/docs/modules/agents/how_to/custom_agent_with_tool_retrieval) and are inspired by [BabyAGI](https://github.com/yoheinakajima/babyagi) architecture.

docker-compose.yml

@@ -0,0 +1,24 @@
+version: '3.8'
+services:
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile.frontend
+    container_name: frontend
+    env_file:
+      - .env
+    ports:
+      - "3000:3000"
+    depends_on:
+      - backend
+
+  backend:
+    build:
+      context: ./
+      dockerfile: Dockerfile.backend
+    container_name: backend
+    env_file:
+      - .env
+    ports:
+      - "8000:8000"
+    # Removed the ports section from backend as it is not allowed in build context

frontend/.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+
+env/
+__pychace__/
+
+*.env
+*.env.*
+env.*
+

frontend/Dockerfile.frontend

@@ -0,0 +1,17 @@
+# Use an official Node runtime as a parent image
+FROM node:latest
+
+# Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Copy the current directory contents into the container at /usr/src/app
+COPY . .
+
+# Install any needed packages specified in package.json
+RUN npm install
+
+# Make port 3000 available to the world outside this container
+EXPOSE 3000
+
+# Run npm run dev when the container launches
+CMD ["npm", "run", "dev"]

frontend/src/components/ui/Header.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import BotIcon from './bot-icon'; // Adjust the import path as necessary
+
+const Header = () => (
+  <header className="flex items-center justify-center h-16 bg-gray-900 text-white">
+    <BotIcon className="animate-wave h-7 w-6 mr-2" />
+    <h1 className="text-2xl font-bold">SalesGPT</h1>
+  </header>
+);
+
+export default Header;

frontend/src/pages/index.tsx

@@ -1,118 +1,21 @@
-import Image from "next/image";
-import { Inter } from "next/font/google";
-
-const inter = Inter({ subsets: ["latin"] });
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import Header from '../components/ui/Header'; // Adjust the import path as necessary
 
 export default function Home() {
-  return (
-    <main
-      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
-    >
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/pages/index.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
+  const router = useRouter();
 
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
+  useEffect(() => {
+    router.push('/chat');
+  }, [router]);
 
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Discover and deploy boilerplate example Next.js&nbsp;projects.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+  return (
+    <div>
+      <Header />
+      <div className="flex justify-center items-center h-screen">
+        <div className="spinner"></div>
+        <p>Redirecting...</p>
       </div>
-    </main>
+    </div>
   );
-}
+}