Merge branch 'main' of github.com:TransformerOptimus/SuperAGI into ad…

…d_entrypoint
TransformerOptimus · Nov 27, 2023 · 28dc19a · 28dc19a
2 parents 8430e9a + 5a7772d
commit 28dc19a
Show file tree

Hide file tree

Showing 26 changed files with 392 additions and 106 deletions.
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -43,7 +43,7 @@ services:
       - redis_data:/data
 
   super__postgres:
-    image: "docker.io/library/postgres:latest"
+    image: "docker.io/library/postgres:15"
     environment:
       - POSTGRES_USER=superagi
       - POSTGRES_PASSWORD=password

diff --git a/gui/pages/Content/APM/ApmDashboard.js b/gui/pages/Content/APM/ApmDashboard.js
@@ -76,7 +76,7 @@ export default function ApmDashboard() {
     const fetchData = async () => {
       try {
         const [metricsResponse, agentsResponse, activeRunsResponse, toolsUsageResponse] = await Promise.all([getMetrics(), getAllAgents(), getActiveRuns(), getToolsUsage()]);
-        const models = ['gpt-4', 'gpt-3.5-turbo', 'gpt-3.5-turbo-16k', 'gpt-4-32k', 'google-palm-bison-001'];
+        const models = ['gpt-4', 'gpt-3.5-turbo', 'gpt-3.5-turbo-16k', 'gpt-4-32k', 'google-palm-bison-001', 'replicate-llama13b-v2-chat'];
 
         assignDefaultDataPerModel(metricsResponse.data.agent_details.model_metrics, models);
         assignDefaultDataPerModel(metricsResponse.data.tokens_details.model_metrics, models);

diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
@@ -530,7 +530,7 @@ export default function AgentCreate({
               const name = response.data.name;
               const executionId = response.data.execution_id;
               fetchAgents();
-              getUserClick('Agent Created Successfully', {})
+              getUserClick('Agent Created Successfully', {'templateName': template?.id ? template.name : ''})
               getUserClick('Agent Run created successfully', {})
               uploadResources(agentId, name, executionId)
             })

diff --git a/gui/pages/Content/Models/AddModel.js b/gui/pages/Content/Models/AddModel.js
@@ -1,14 +1,14 @@
 import React, {useEffect, useState} from "react";
 import ModelForm from "./ModelForm";
 
-export default function AddModel({internalId, getModels, sendModelData}){
+export default function AddModel({internalId, getModels, sendModelData, env}){
 
     return(
         <div id="add_model">
             <div className="row">
                 <div className="col-3" />
                 <div className="col-6 col-6-scrollable">
-                    <ModelForm internalId={internalId} getModels={getModels} sendModelData={sendModelData}/>
+                    <ModelForm internalId={internalId} getModels={getModels} sendModelData={sendModelData} env={env}/>
                 </div>
                 <div className="col-3" />
             </div>

diff --git a/gui/pages/Content/Models/ModelForm.js b/gui/pages/Content/Models/ModelForm.js
@@ -1,22 +1,25 @@
 import React, {useEffect, useRef, useState} from "react";
 import {removeTab, openNewTab, createInternalId, getUserClick} from "@/utils/utils";
 import Image from "next/image";
-import {fetchApiKey, storeModel, verifyEndPoint} from "@/pages/api/DashboardService";
+import {fetchApiKey, storeModel, testModel, verifyEndPoint} from "@/pages/api/DashboardService";
 import {BeatLoader, ClipLoader} from "react-spinners";
 import {ToastContainer, toast} from 'react-toastify';
 
-export default function ModelForm({internalId, getModels, sendModelData}){
-    const models = ['OpenAI', 'Replicate', 'Hugging Face', 'Google Palm'];
+export default function ModelForm({internalId, getModels, sendModelData, env}){
+    const models = env === 'DEV' ? ['OpenAI', 'Replicate', 'Hugging Face', 'Google Palm', 'Local LLM'] : ['OpenAI', 'Replicate', 'Hugging Face', 'Google Palm'];
     const [selectedModel, setSelectedModel] = useState('Select a Model');
     const [modelName, setModelName] = useState('');
     const [modelDescription, setModelDescription] = useState('');
     const [modelTokenLimit, setModelTokenLimit] = useState(4096);
     const [modelEndpoint, setModelEndpoint] = useState('');
     const [modelDropdown, setModelDropdown] = useState(false);
     const [modelVersion, setModelVersion] = useState('');
+    const [modelContextLength, setContextLength] = useState(4096);
     const [tokenError, setTokenError] = useState(false);
     const [lockAddition, setLockAddition] = useState(true);
     const [isLoading, setIsLoading] = useState(false)
+    const [modelStatus, setModelStatus] = useState(null);
+    const [createClickable, setCreateClickable] = useState(true);
     const modelRef = useRef(null);
 
     useEffect(() => {
@@ -79,13 +82,31 @@ export default function ModelForm({internalId, getModels, sendModelData}){
         })
     }
 
+    const handleModelStatus = async () => {
+        try {
+            setCreateClickable(false);
+            const response = await testModel();
+            if(response.status === 200) {
+                setModelStatus(true);
+                setCreateClickable(true);
+            } else {
+                setModelStatus(false);
+                setCreateClickable(true);
+            }
+        } catch(error) {
+            console.log("Error Message:: " + error);
+            setModelStatus(false);
+            setCreateClickable(true);
+        }
+    }
+
     const handleModelSuccess = (model) => {
         model.contentType = 'Model'
         sendModelData(model)
     }
 
     const storeModelDetails = (modelProviderId) => {
-        storeModel(modelName,modelDescription, modelEndpoint, modelProviderId, modelTokenLimit, "Custom", modelVersion).then((response) =>{
+        storeModel(modelName,modelDescription, modelEndpoint, modelProviderId, modelTokenLimit, "Custom", modelVersion, modelContextLength).then((response) =>{
             setIsLoading(false)
             let data = response.data
             if (data.error) {
@@ -122,7 +143,7 @@ export default function ModelForm({internalId, getModels, sendModelData}){
                 <div>
                     {modelDropdown && <div className="custom_select_options w_100" ref={modelRef}>
                         {models.map((model, index) => (
-                            <div key={index} className="custom_select_option" onClick={() => handleModelSelect(index)} style={{padding: '12px 14px', maxWidth: '100%'}}>
+                            <div key={index} className="custom_select_option" onClick={() => {setModelStatus(null); handleModelSelect(index)}} style={{padding: '12px 14px', maxWidth: '100%'}}>
                                 {model}
                             </div>))}
                     </div>}
@@ -153,18 +174,42 @@ export default function ModelForm({internalId, getModels, sendModelData}){
                        onChange={(event) => setModelVersion(event.target.value)}/>
             </div>}
 
+            {(selectedModel === 'Local LLM') && <div className="mt_24">
+                <span>Model Context Length</span>
+                <input className="input_medium mt_8" type="number" placeholder="Enter Model Context Length" value={modelContextLength}
+                       onChange={(event) => setContextLength(event.target.value)}/>
+            </div>}
+
             <div className="mt_24">
                 <span>Token Limit</span>
                 <input className="input_medium mt_8" type="number" placeholder="Enter Model Token Limit" value={modelTokenLimit}
                        onChange={(event) => setModelTokenLimit(parseInt(event.target.value, 10))}/>
             </div>
 
-            <div className="horizontal_container justify_end mt_24">
-                <button className="secondary_button mr_7"
-                        onClick={() => removeTab(-5, "new model", "Add_Model", internalId)}>Cancel</button>
-                <button className='primary_button' onClick={handleAddModel} disabled={lockAddition || isLoading}>
-                    {isLoading ? <><span>Adding Model &nbsp;</span><ClipLoader size={16} color={"#000000"} /></> : 'Add Model'}
-                </button>
+            {selectedModel === 'Local LLM' && modelStatus===false && <div className="horizontal_container align_start error_box mt_24 gap_6">
+                <Image width={16} height={16} src="/images/icon_error.svg" alt="error-icon" />
+                <div className="vertical_containers">
+                    <span className="text_12 color_white lh_16">Test model failed</span>
+                </div>
+            </div>}
+
+            {selectedModel === 'Local LLM' && modelStatus===true && <div className="horizontal_container align_start success_box mt_24 gap_6">
+                <Image width={16} height={16} src="/images/icon_info.svg"/>
+                <div className="vertical_containers">
+                    <span className="text_12 color_white lh_16">Test model successful</span>
+                </div>
+            </div>}
+
+            <div className="horizontal_container justify_space_between w_100 mt_24">
+                {selectedModel==='Local LLM' && <button className="secondary_button flex_none" disabled={!createClickable} 
+                onClick={() => {handleModelStatus();}}>{createClickable ? 'Test Model' : 'Testing model...'}</button>}
+                <div className="horizontal_container justify_end">
+                    <button className="secondary_button mr_7"
+                            onClick={() => removeTab(-5, "new model", "Add_Model", internalId)}>Cancel</button>
+                    <button className='primary_button' onClick={handleAddModel} disabled={lockAddition || isLoading || (selectedModel==='Local LLM' && !modelStatus)}>
+                        {isLoading ? <><span>Adding Model &nbsp;</span><ClipLoader size={16} color={"#000000"} /></> : 'Add Model'}
+                    </button>
+                </div>
             </div>
             <ToastContainer className="text_16"/>
         </div>

diff --git a/gui/pages/Dashboard/Content.js b/gui/pages/Dashboard/Content.js
@@ -470,7 +470,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
                                      organisationId={organisationId} sendKnowledgeData={addTab}
                                      sendAgentData={addTab} selectedProjectId={selectedProjectId} editAgentId={tab.id}
                                      fetchAgents={getAgentList} toolkits={toolkits} template={null} edit={true} agents={agents}/>}
-                    {tab.contentType === 'Add_Model' && <AddModel internalId={tab.internalId} getModels={getModels} sendModelData={addTab}/>}
+                    {tab.contentType === 'Add_Model' && <AddModel internalId={tab.internalId} getModels={getModels} sendModelData={addTab} env={env}/>}
                     {tab.contentType === 'Model' && <ModelDetails modelId={tab.id} modelName={tab.name} />}
                   </div>}
                 </div>

diff --git a/gui/pages/Dashboard/TopBar.js b/gui/pages/Dashboard/TopBar.js
@@ -24,6 +24,7 @@ export default function TopBar({selectedProject, userName, env}) {
     // localStorage.removeItem('accessToken');
     Cookies.set('accessToken', '', { expires: new Date(0),domain: '.superagi.com', path: '/'});
     Cookies.set('Source', 'app.superagi', {domain: '.superagi.com', path: '/'});
+    Cookies.set('mixpanel_initialized', 'false', {domain: '.superagi.com', path: '/'});
     refreshUrl();
     router.reload();
   };

diff --git a/gui/pages/_app.css b/gui/pages/_app.css
@@ -231,18 +231,6 @@ input[type="range"]::-moz-range-track {
     z-index: 10;
 }
 
-.dropdown_container_models {
-    flex-direction: column;
-    align-items: flex-start;
-    border-radius: 8px;
-    background: #2E293F;
-    box-shadow: -2px 2px 24px rgba(0, 0, 0, 0.4);
-    position: absolute;
-    width: fit-content;
-    height: fit-content;
-    padding: 8px;
-}
-
 .dropdown_container {
     width: 150px;
     height: auto;
@@ -783,7 +771,6 @@ p {
 .mt_74{margin-top: 74px;}
 .mt_80{margin-top: 80px;}
 .mt_90{margin-top: 90px;}
-.mt_130{margin-top: 130px;}
 
 .mb_1{margin-bottom: 1px;}
 .mb_2{margin-bottom: 2px;}
@@ -991,22 +978,6 @@ p {
     line-height: normal;
 }
 
-.text_20 {
-    color: #FFF;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-}
-
-.text_20 {
-    color: #FFF;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-}
-
 .text_20_bold{
     color: #FFF;
     font-size: 20px;
@@ -1107,7 +1078,6 @@ p {
 .w_73{width: 73%}
 .w_97{width: 97%}
 .w_100{width: 100%}
-.w_99vw{width: 99vw}
 .w_inherit{width: inherit}
 .w_fit_content{width:fit-content}
 .w_inherit{width: inherit}
@@ -1125,11 +1095,11 @@ p {
 .h_80vh{height: 80vh}
 .h_calc92{height: calc(100vh - 92px)}
 .h_calc_add40{height: calc(80vh + 40px)}
-.h_calc_sub_60{height: calc(92.5vh - 60px)}
 
 .mxh_78vh{max-height: 78vh}
 
 .flex_dir_col{flex-direction: column}
+.flex_none{flex: none}
 
 .justify_center{justify-content: center}
 .justify_end{justify-content: flex-end}
@@ -1138,8 +1108,6 @@ p {
 
 .display_flex{display: inline-flex}
 .display_flex_container{display: flex}
-.display_none{display: none}
-.display_block{display: block}
 
 .align_center{align-items: center}
 .align_start{align-items: flex-start}
@@ -1178,8 +1146,6 @@ p {
 
 .bt_white{border-top: 1px solid rgba(255, 255, 255, 0.08);}
 
-.bt_white{border-top: 1px solid rgba(255, 255, 255, 0.08);}
-
 .color_white{color:#FFFFFF}
 .color_gray{color:#888888}
 
@@ -1188,7 +1154,7 @@ p {
 .lh_18{line-height: 18px;}
 .lh_24{line-height: 24px;}
 
-.padding_0{padding: 0}
+.padding_0{padding: 0;}
 .padding_5{padding: 5px;}
 .padding_6{padding: 6px;}
 .padding_8{padding: 8px;}
@@ -1505,7 +1471,6 @@ tr{
 .bg_none{background: none;}
 .bg_primary{background: #2E293F;}
 .bg_secondary{background: #272335;}
-.bg_none{background: none}
 
 .container {
     height: 100%;
@@ -1871,6 +1836,13 @@ tr{
     padding: 12px;
 }
 
+.success_box{
+    border-radius: 8px;
+    padding: 12px;
+    border-left: 4px solid rgba(255, 255, 255, 0.60);
+    background: rgba(255, 255, 255, 0.08);
+}
+
 .horizontal_line {
     margin: 16px 0 16px -16px;
     border: 1px solid #ffffff20;
@@ -1922,26 +1894,4 @@ tr{
 .tooltip-class {
     background-color: green;
     border-radius: 6px;
-}
-
-.text_dropdown {
-    color: #FFFFFF;
-    font-family: Plus Jakarta Sans, sans-serif;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-}
-
-.text_dropdown_18 {
-    font-size: 18px;
-}
-
-.vertical_divider {
-    background: transparent;
-    /*border-color: rgba(255, 255, 255, 0.08);*/
-    border: 1.2px solid rgba(255, 255, 255, 0.08);;
-    height: 20px;
-    width: 0;
-}
-
-
+}
diff --git a/gui/pages/_app.js b/gui/pages/_app.js
@@ -61,6 +61,7 @@ export default function App() {
       });
   }
 
+
   const installFromMarketplace = () => {
     const toolkitName = localStorage.getItem('toolkit_to_install') || null;
     const agentTemplateId = localStorage.getItem('agent_to_install') || null;
@@ -110,10 +111,11 @@ export default function App() {
       .then((response) => {
         const env = response.data.env;
         setEnv(env);
-
+        const mixpanelInitialized = Cookies.get('mixpanel_initialized') === 'true'
         if (typeof window !== 'undefined') {
-          if(response.data.env === 'PROD' && mixpanelId())
-            mixpanel.init(mixpanelId(), { debug: false, track_pageview: true, persistence: 'localStorage' });
+          if(response.data.env === 'PROD' && mixpanelId()) {
+            mixpanel.init(mixpanelId(), {debug: false, track_pageview: !mixpanelInitialized, persistence: 'localStorage'});
+          }
           localStorage.setItem('applicationEnvironment', env);
         }
 
@@ -122,7 +124,7 @@ export default function App() {
           const queryParams = router.asPath.split('?')[1];
           const parsedParams = querystring.parse(queryParams);
           let access_token = parsedParams.access_token || null;
-          let first_login = parsedParams.first_time_login || false
+          let first_login = parsedParams.first_time_login || ''
 
           const utmParams = getUTMParametersFromURL();
           if (utmParams) {
@@ -136,7 +138,7 @@ export default function App() {
 
           if (typeof window !== 'undefined' && access_token) {
             // localStorage.setItem('accessToken', access_token);
-            Cookies.set('accessToken', access_token, { domain: '.superagi.com', path: '/' });
+            Cookies.set('accessToken', access_token, {domain: '.superagi.com', path: '/'});
             refreshUrl();
           }
           validateAccessToken()
@@ -145,15 +147,19 @@ export default function App() {
               sendGAEvent(response.data.email, 'Signed Up Successfully', {'utm_source': signupSource || '', 'utm_medium': signupMedium || '', 'campaign': singupCampaign || ''})
               if(mixpanelId())
                 mixpanel.identify(response.data.email)
-              if(first_login)
+              if(first_login === 'True') {
                 getUserClick('New Sign Up', {})
-              else
-                getUserClick('User Logged In', {})
+              }
+              else {
+                if (first_login === 'False')
+                  getUserClick('User Logged In', {})
+              }
 
               if(signupSource) {
                 handleSignUpSource(signupSource)
               }
               fetchOrganisation(response.data.id);
+              Cookies.set('mixpanel_initialized', 'true', {domain: '.superagi.com', path: '/'});
             })
             .catch((error) => {
               console.error('Error validating access token:', error);