Release11 (#1144)

Merged Dev -> Main Released v11 - Models Marketplace - SuperAGI APIs - Support for Weaviate DB - Tool Memory LTM - Google Analytics as External Tool - JSON support for Tool Configuration - Bug Fixes and Minor Enhancements.
TransformerOptimus · Aug 29, 2023 · 7118e79 · 7118e79
1 parent 83d65b2
commit 7118e79
Show file tree

Hide file tree

Showing 113 changed files with 3,634 additions and 471 deletions.
diff --git a/config_template.yaml b/config_template.yaml
@@ -4,6 +4,8 @@ PINECONE_ENVIRONMENT: YOUR_PINECONE_ENVIRONMENT
 
 OPENAI_API_KEY: YOUR_OPEN_API_KEY
 PALM_API_KEY: YOUR_PALM_API_KEY
+REPLICATE_API_TOKEN: YOUR_REPLICATE_API_TOKEN
+HUGGING_API_TOKEN: YOUR_HUGGING_FACE_API_TOKEN
 
 # For locally hosted LLMs comment out the next line and uncomment the one after
 # to configure a local llm point your browser to 127.0.0.1:7860 and click on the model tab in text generation web ui.

diff --git a/gui/pages/Content/APM/ApmDashboard.js b/gui/pages/Content/APM/ApmDashboard.js
@@ -75,7 +75,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
@@ -10,8 +10,8 @@ import {
  getLlmModels,
  updateExecution,
  uploadFile,
- getAgentDetails, addAgentRun,
- getAgentWorkflows
+ getAgentDetails, addAgentRun, fetchModels,
+ getAgentWorkflows, validateOrAddModels
 } from "@/pages/api/DashboardService";
 import {
  formatBytes,
@@ -56,6 +56,7 @@ export default function AgentCreate({
  const [searchValue, setSearchValue] = useState('');
  const [showButton, setShowButton] = useState(false);
  const [showPlaceholder, setShowPlaceholder] = useState(true);
+ const [modelsArray, setModelsArray] = useState(['gpt-4', 'gpt-3.5-turbo', 'gpt-3.5-turbo-16k']);
 
  const constraintsArray = [
  "If you are unsure how you previously did something or want to recall past events, thinking about similar events will help you remember.",
@@ -68,8 +69,8 @@ export default function AgentCreate({
  const [goals, setGoals] = useState(['Describe the agent goals here']);
  const [instructions, setInstructions] = useState(['']);
 
- const [modelsArray, setModelsArray] = useState([]);
- const [model, setModel] = useState('');
+ const models = ['gpt-4', 'gpt-3.5-turbo', 'gpt-3.5-turbo-16k']
+ const [model, setModel] = useState(models[1]);
  const modelRef = useRef(null);
  const [modelDropdown, setModelDropdown] = useState(false);
 
@@ -150,16 +151,17 @@ export default function AgentCreate({
  }, [toolNames]);
 
  useEffect(() => {
- getLlmModels()
+ fetchModels()
  .then((response) => {
- const models = response.data || [];
+ const models = response.data.map(model => model.name) || [];
  const selected_model = localStorage.getItem("agent_model_" + String(internalId)) || '';
  setModelsArray(models);
  if (models.length > 0 && !selected_model) {
  setLocalStorageValue("agent_model_" + String(internalId), models[0], setModel);
  } else {
  setModel(selected_model);
  }
+ console.log(response)
  })
  .catch((error) => {
  console.error('Error fetching models:', error);
@@ -350,8 +352,8 @@ export default function AgentCreate({
 
  const handleModelSelect = (index) => {
  setLocalStorageValue("agent_model_" + String(internalId), modelsArray[index], setModel);
- if (modelsArray[index] === "google-palm-bison-001") {
- setAgentWorkflow("Fixed Task Queue")
+ if (modelsArray[index] === "google-palm-bison-001" || modelsArray[index] === "replicate-llama13b-v2-chat") {
+ setAgentType("Fixed Task Queue")
  }
  setModelDropdown(false);
  };
@@ -492,7 +494,7 @@ export default function AgentCreate({
  return true;
  }
 
- const handleAddAgent = () => {
+ const handleAddAgent = async () => {
  if (!validateAgentData(true)) {
  return;
  }
@@ -869,6 +871,11 @@ export default function AgentCreate({
  return false;
  }
 
+ const openModelMarket = () => {
+ openNewTab(-4, "Marketplace", "Marketplace", false);
+ localStorage.setItem('marketplace_tab', 'market_models');
+ }
+
  return (<>
  <div className="row" style={{overflowY: 'scroll', height: 'calc(100vh - 92px)'}}>
  <div className="col-3"></div>
@@ -941,13 +948,28 @@ export default function AgentCreate({
  alt="expand-icon"/>
  </div>
  <div>
- {modelDropdown && <div className="custom_select_options" ref={modelRef} style={{width: '100%'}}>
- {modelsArray?.map((model, index) => (
- <div key={index} className="custom_select_option" onClick={() => handleModelSelect(index)}
- style={{padding: '12px 14px', maxWidth: '100%'}}>
- {model}
- </div>))}
- </div>}
+ {modelDropdown && (
+ <div className="custom_select_options" ref={modelRef} style={{width: '100%', maxHeight: '300px'}}>
+ <div className="model_options">
+ {modelsArray?.map((model, index) => (
+ <div key={index} className="custom_select_option" onClick={() => handleModelSelect(index)}
+ style={{padding: '12px 14px', maxWidth: '100%'}}>
+ {model}
+ </div>
+ ))}
+ </div>
+ <div className="vertical_containers sticky_option">
+ <div onClick={() => openModelMarket()} className="custom_select_option horizontal_container mxw_100 padding_12_14 gap_6 bt_white">
+ <Image width={16} height={16} src="/images/marketplace_logo.png" alt="marketplace_logo" />
+ <span>Browse models from marketplace</span>
+ </div>
+ <div onClick={() => openNewTab(-5, "new model", "Add_Model", false)} className="custom_select_option horizontal_container mxw_100 padding_12_14 gap_6 bt_white">
+ <Image width={16} height={16} src="/images/plus.png" alt="plus_image" />
+ <span>Add new custom model</span>
+ </div>
+ </div>
+ </div>
+ )}
  </div>
  </div>
  </div>

diff --git a/gui/pages/Content/Agents/AgentTemplatesList.js b/gui/pages/Content/Agents/AgentTemplatesList.js
@@ -74,17 +74,17 @@ export default function AgentTemplatesList({
  </div>
  <div className={styles.rowContainer}
  style={{maxHeight: '78vh', overflowY: 'auto', marginTop: '10px', marginLeft: '3px'}}>
- {agentTemplates.length > 0 ? <div className={styles.resources}>
+ {agentTemplates.length > 0 ? <div className="marketplaceGrid3">
  {agentTemplates.map((item) => (
- <div className={styles.market_tool} key={item.id} style={{cursor: 'pointer', height: '85px'}}
+ <div className="market_containers cursor_pointer" key={item.id} style={{cursor: 'pointer', height: '85px'}}
  onClick={() => handleTemplateClick(item)}>
  <div style={{display: 'inline', overflow: 'auto'}}>
  <div>{item.name}</div>
  <div className={styles.tool_description}>{item.description}</div>
  </div>
  </div>
  ))}
- <div className={styles.market_tool} style={{cursor: 'pointer', height: '85px', background: '#413C4F'}}
+ <div className="market_containers cursor_pointer" style={{cursor: 'pointer', height: '85px', background: '#413C4F'}}
  onClick={openMarketplace}>
  <div style={{display: 'inline', overflow: 'auto'}}>
  <div style={{display: 'flex', justifyContent: 'space-between', gap: '0.3vw'}}>

diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js
@@ -290,7 +290,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
  // }
 
  function saveAgentTemplate() {
- saveAgentAsTemplate(selectedRun?.id)
+ saveAgentAsTemplate(agentId, selectedRun?.id ? selectedRun?.id : -1)
  .then((response) => {
  toast.success("Agent saved as template successfully", {autoClose: 1800});
  })

diff --git a/gui/pages/Content/Marketplace/Market.js b/gui/pages/Content/Marketplace/Market.js
@@ -4,7 +4,9 @@ import styles from './Market.module.css';
 import MarketKnowledge from './MarketKnowledge';
 import MarketAgent from './MarketAgent';
 import MarketTools from './MarketTools';
+import MarketModels from '../Models/MarketModels';
 import ToolkitTemplate from './ToolkitTemplate';
+import ModelTemplate from "../Models/ModelTemplate";
 import {EventBus} from "@/utils/eventBus";
 import AgentTemplate from "./AgentTemplate";
 import KnowledgeTemplate from "./KnowledgeTemplate";
@@ -64,48 +66,36 @@ export default function Market({env}) {
  <div style={{width: '100%', display: 'flex', flexDirection: 'column'}}>
  <div className={styles.detail_top}>
  <div style={{display: 'flex', overflowX: 'scroll', marginLeft: '8px'}}>
- <div>
- <button onClick={() => switchTab('market_tools')} className={styles.tab_button}
- style={activeTab === 'market_tools' ? {
- background: '#454254',
- paddingRight: '15px'
- } : {background: 'transparent', paddingRight: '15px'}}>
- <Image style={{marginTop: '-1px'}} width={14} height={14} src="/images/tools_light.svg"
- alt="tools-icon"/>&nbsp;Tools
- </button>
- </div>
- <div>
- <button onClick={() => switchTab('market_knowledge')} className={styles.tab_button}
- style={activeTab === 'market_knowledge' ? {
- background: '#454254',
- paddingRight: '15px'
- } : {background: 'transparent', paddingRight: '15px'}}>
- <Image style={{marginTop: '-1px'}} width={14} height={14} src="/images/knowledge.svg"
- alt="knowledge-icon"/>&nbsp;Knowledge
- </button>
- </div>
- <div>
- <button onClick={() => switchTab('market_agents')} className={styles.tab_button}
- style={activeTab === 'market_agents' ? {
- background: '#454254',
- paddingRight: '15px'
- } : {background: 'transparent', paddingRight: '15px'}}>
- <Image style={{marginTop: '-1px'}} width={14} height={14} src="/images/agents_light.svg"
- alt="agent-template-icon"/>&nbsp;Agent Templates
- </button>
- </div>
+ <button onClick={() => switchTab('market_tools')} className={activeTab === 'market_tools' ? 'tab_button_selected' : 'tab_button'}>
+ <Image width={14} height={14} src="/images/tools_light.svg" alt="tools-icon"/>
+ <span>Tools</span>
+ </button>
+ <button onClick={() => switchTab('market_knowledge')} className={activeTab === 'market_knowledge' ? 'tab_button_selected' : 'tab_button'}>
+ <Image width={14} height={14} src="/images/knowledge.svg" alt="knowledge-icon"/>
+ <span>Knowledge</span>
+ </button>
+ <button onClick={() => switchTab('market_agents')} className={activeTab === 'market_agents' ? 'tab_button_selected' : 'tab_button'}>
+ <Image width={14} height={14} src="/images/agents_light.svg" alt="agent-template-icon"/>
+ <span>Agent Templates</span>
+ </button>
+ <button onClick={() => switchTab('market_models')} className={activeTab === 'market_models' ? 'tab_button_selected' : 'tab_button'}>
+ <Image width={14} height={14} src="/images/models.svg" alt="model-template-icon"/>
+ <span>Models</span>
+ </button>
  </div>
  </div>
  <div>
  {activeTab === 'market_tools' && <MarketTools/>}
  {activeTab === 'market_knowledge' && <MarketKnowledge/>}
  {activeTab === 'market_agents' && <MarketAgent/>}
+ {activeTab === 'market_models' && <MarketModels/>}
  </div>
  </div>
  </div> : <div style={{padding: '0 3px'}}>
  {detailType === 'agent_template' && <AgentTemplate env={env} template={templateData}/>}
  {detailType === 'knowledge_template' && <KnowledgeTemplate env={env} template={templateData}/>}
  {detailType === 'tool_template' && <ToolkitTemplate env={env} template={templateData}/>}
+ {detailType === 'model_template' && <ModelTemplate env={env} template={templateData} />}
  </div>}
  </div>
  );

diff --git a/gui/pages/Content/Marketplace/Market.module.css b/gui/pages/Content/Marketplace/Market.module.css
@@ -290,7 +290,7 @@
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
- gap: 0.3vw;
+ gap: 6px;
 }
 
 .agent_resources {

diff --git a/gui/pages/Content/Marketplace/MarketAgent.js b/gui/pages/Content/Marketplace/MarketAgent.js
@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from "react";
 import Image from "next/image";
-import styles from './Market.module.css';
 import {fetchAgentTemplateList} from "@/pages/api/DashboardService";
 import {EventBus} from "@/utils/eventBus";
 import {loadingTextEffect} from "@/utils/utils";
@@ -48,8 +47,8 @@ export default function MarketAgent() {
  <div className={showMarketplace ? 'ml_8' : 'ml_3'}>
  <div className="w_100 overflowY_auto mxh_78vh">
  {!isLoading ? <div>
- {agentTemplates.length > 0 ? <div className={styles.resources}>{agentTemplates.map((item, index) => (
- <div className="market_tool cursor_pointer" key={item.id} onClick={() => handleTemplateClick(item)}>
+ {agentTemplates.length > 0 ? <div className="marketplaceGrid3">{agentTemplates.map((item, index) => (
+ <div className="market_containers cursor_pointer" key={item.id} onClick={() => handleTemplateClick(item)}>
  <div className="vertical_containers overflow_auto">
  <div>{item.name}</div>
  <div className="color_gray lh_16">by SuperAgi&nbsp;<Image width={14} height={14}

diff --git a/gui/pages/Content/Marketplace/MarketKnowledge.js b/gui/pages/Content/Marketplace/MarketKnowledge.js
@@ -49,8 +49,8 @@ export default function MarketKnowledge() {
  <div className={showMarketplace ? 'ml_8' : 'ml_3'}>
  <div className="w_100 overflowY_auto mxh_78vh">
  {!isLoading ? <div>
- {knowledgeTemplates.length > 0 ? <div className={styles.resources}>{knowledgeTemplates.map((item, index) => (
- <div className={styles.market_tool} key={item.id} style={{cursor: 'pointer', display: 'block'}}
+ {knowledgeTemplates.length > 0 ? <div className="marketplaceGrid3">{knowledgeTemplates.map((item, index) => (
+ <div className="market_containers cursor_pointer" key={item.id} style={{cursor: 'pointer', display: 'block'}}
  onClick={() => handleTemplateClick(item)}>
  <div style={{display: 'inline', overflow: 'auto'}}>
  <div className="horizontal_space_between">

diff --git a/gui/pages/Content/Marketplace/MarketTools.js b/gui/pages/Content/Marketplace/MarketTools.js
@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from "react";
 import Image from "next/image";
-import styles from './Market.module.css';
 import {fetchToolTemplateList} from "@/pages/api/DashboardService";
 import {EventBus} from "@/utils/eventBus";
 import {loadingTextEffect, excludedToolkits, returnToolkitIcon} from "@/utils/utils";
@@ -50,8 +49,8 @@ export default function MarketTools() {
  <div className={showMarketplace ? 'ml_8' : 'ml_3'}>
  <div className="w_100 overflowY_auto mxh_78vh">
  {!isLoading ? <div>
- {toolTemplates.length > 0 ? <div className={styles.resources}>{toolTemplates.map((item) => (
- <div className="market_tool cursor_pointer" key={item.id} onClick={() => handleTemplateClick(item)}>
+ {toolTemplates.length > 0 ? <div className="marketplaceGrid3">{toolTemplates.map((item) => (
+ <div className="market_containers cursor_pointer" key={item.id} onClick={() => handleTemplateClick(item)}>
  <div className="horizontal_container overflow_auto">
  <Image className="tool_icon" width={40} height={40} src={returnToolkitIcon(item.name)} alt="tool-icon"/>
  <div className="ml_12 mb_8">

diff --git a/gui/pages/Content/Models/AddModel.js b/gui/pages/Content/Models/AddModel.js
@@ -0,0 +1,17 @@
+import React, {useEffect, useState} from "react";
+import ModelForm from "./ModelForm";
+
+export default function AddModel({internalId, getModels, sendModelData}){
+
+ 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}/>
+ </div>
+ <div className="col-3" />
+ </div>
+ </div>
+ )
+}