New Frontend (TransformerOptimus#124)

.gitignore

@@ -5,4 +5,8 @@ config.yaml
 __pycache__
 superagi/models/__pycache__
 superagi/controllers/__pycache__
+gui/node_modules
+gui/.next
+.DS_Store
+.DS_Store?
 venv

README.MD

@@ -1,7 +1,7 @@
 <p align=center>
 <a href="https://superagi.co"><img src=https://superagi.co/wp-content/uploads/2023/05/SuperAGI_icon.png></a>
 
-° [![Join our Discord Server](https://img.shields.io/badge/Discord-SuperAGI-blueviolet?logo=discord&logoColor=white)](https://discord.gg/dXbRe5BHJC) °  [![Follow us on Twitter](https://img.shields.io/twitter/follow/_superAGI?label=_superAGI&style=social)](https://twitter.com/_superAGI) ° [![Join the discussion on Reddit](https://img.shields.io/reddit/subreddit-subscribers/Super_AGI?label=%2Fr/Super_AGI&style=social)](https://www.reddit.com/r/Super_AGI) 
+° [![Join our Discord Server](https://img.shields.io/badge/Discord-SuperAGI-blueviolet?logo=discord&logoColor=white)](https://discord.gg/dXbRe5BHJC) °  [![Follow us on Twitter](https://img.shields.io/twitter/follow/_superAGI?label=_superAGI&style=social)](https://twitter.com/_superAGI) ° [![Join the discussion on Reddit](https://img.shields.io/reddit/subreddit-subscribers/Super_AGI?label=%2Fr/Super_AGI&style=social)](https://www.reddit.com/r/Super_AGI)
 </p>
 
 ### *Infrastructure for building useful Autonomous Agents*
@@ -10,10 +10,10 @@
 # 💡 Features
 
 ### 🚀 **Provision, Spawn & Deploy Autonomous AI Agents**
-Seamless provision and run agents 
+Seamless provision and run agents
 
 ### 🛠️ **Extend Agent Capabilities with Tools**
-Give capabilities to your agents by selecting tools from growing library or build your own custom tool 
+Give capabilities to your agents by selecting tools from growing library or build your own custom tool
 
 ### 🔄 **Run Concurrent Agents Seamlessly**
 Run agents concurrently
@@ -79,21 +79,21 @@ Read and store files generated by agents, facilitating data management and analy
 
 Before starting with the project, it is highly recommended to create a virtual environment in Python. This isolates the packages required for the project from other packages installed on your system, avoiding potential compatibility issues.
 
-  To create a virtual environment, follow the steps below for your respective operating system:
+To create a virtual environment, follow the steps below for your respective operating system:
 
-  - For Linux and Mac:
-    1. Open a terminal window.
-    2. Install the `virtualenv` package, if not already installed, by running: `pip install virtualenv` or `pip3 install virtualenv`.
-    3. Navigate to your project directory using `cd` command.
-    4. Create a virtual environment by running: `virtualenv venv` (you can replace "venv" with your desired virtual environment name).
-    5. Activate the virtual environment by running: `source venv/bin/activate`.
+- For Linux and Mac:
+  1. Open a terminal window.
+  2. Install the `virtualenv` package, if not already installed, by running: `pip install virtualenv` or `pip3 install virtualenv`.
+  3. Navigate to your project directory using `cd` command.
+  4. Create a virtual environment by running: `virtualenv venv` (you can replace "venv" with your desired virtual environment name).
+  5. Activate the virtual environment by running: `source venv/bin/activate`.
 
-  - For Windows:
-    1. Open a command prompt window.
-    2. Install the `virtualenv` package, if not already installed, by running: `pip install virtualenv`.
-    3. Navigate to your project directory using `cd` command.
-    4. Create a virtual environment by running: `virtualenv venv` (you can replace "venv" with your desired virtual environment name).
-    5. Activate the virtual environment by running: `venv\Scripts\activate`.
+- For Windows:
+  1. Open a command prompt window.
+  2. Install the `virtualenv` package, if not already installed, by running: `pip install virtualenv`.
+  3. Navigate to your project directory using `cd` command.
+  4. Create a virtual environment by running: `virtualenv venv` (you can replace "venv" with your desired virtual environment name).
+  5. Activate the virtual environment by running: `venv\Scripts\activate`.
 
 # 🛠 Configuration
 
@@ -115,9 +115,9 @@ Before starting with the project, it is highly recommended to create a virtual e
 Simply run the start script in your terminal. This will install any necessary Python packages and launch SuperAGI
 
 * On Linux/MacOS:
-`source run.sh`
+  `source run.sh`
 * On Windows:
-`.\run.bat`
+  `.\run.bat`
 > If this gives errors, make sure you have a compatible Python version installed (preferrably python 3.10).
 
 # ⚠️ Under Development!

gui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

gui/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

gui/app/DashboardService.js

@@ -0,0 +1,55 @@
+import axios from 'axios';
+const API_BASE_URL = 'http://192.168.94.48:8001'; //for testing
+// const API_BASE_URL = 'http://localhost:8001';
+
+export const getOrganization = () => {
+  return axios.get(`${API_BASE_URL}/organisations/get/1`);
+};
+
+export const addUser = (userData) => {
+  return axios.post(`${API_BASE_URL}/users/add`, userData);
+};
+
+export const getProject = (organisationId) => {
+  return axios.get(`${API_BASE_URL}/projects/get/organisation/${organisationId}`);
+};
+
+export const getAgents = (projectId) => {
+  return axios.get(`${API_BASE_URL}/agents/get/project/${projectId}`);
+};
+
+export const getAgent = (agentId) => {
+  return axios.get(`${API_BASE_URL}/agents/get/${agentId}`);
+};
+
+export const getTools = () => {
+  return axios.get(`${API_BASE_URL}/tools/get`);
+};
+
+export const getAgentDetails = (agentId) => {
+  return axios.get(`${API_BASE_URL}/agents/get/details/${agentId}`);
+};
+
+export const getAgentExecutions = (agentId) => {
+  return axios.get(`${API_BASE_URL}/agentexecutions/get/agent/${agentId}`);
+};
+
+export const getExecutionFeeds = (executionId) => {
+  return axios.get(`${API_BASE_URL}/agentexecutionfeeds/get/execution/${executionId}`);
+};
+
+export const createAgent = (agentData) => {
+  return axios.post(`${API_BASE_URL}/agents/create`, agentData);
+};
+
+export const updateAgents = (agentData) => {
+  return axios.put(`${API_BASE_URL}/agentconfigs/update/`, agentData);
+};
+
+export const updateExecution = (executionId, executionData) => {
+  return axios.put(`${API_BASE_URL}/agentexecutions/update/${executionId}`, executionData);
+};
+
+export const addExecution = (executionData) => {
+  return axios.post(`${API_BASE_URL}/agentexecutions/add`, executionData);
+};

gui/app/globals.css

@@ -0,0 +1,107 @@
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

gui/app/layout.js

@@ -0,0 +1,14 @@
+import './globals.css'
+
+export const metadata = {
+  title: 'Super AGI',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

gui/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

gui/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig