Models superagi

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.

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);

gui/pages/Content/Agents/AgentCreate.js

@@ -10,7 +10,7 @@ import {
   getLlmModels,
   updateExecution,
   uploadFile,
-  getAgentDetails, addAgentRun,
+  getAgentDetails, addAgentRun, fetchModels,
   getAgentWorkflows
 } from "@/pages/api/DashboardService";
 import {
@@ -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([]);
 
   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', 'gpt-4-32k', 'google-palm-bison-001', 'replicate-llama13b-v2-chat']
+  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);
   };
@@ -941,13 +943,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={() => openNewTab(-4, "Marketplace", "Marketplace", false)} 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>

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'}}>

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>
   );

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 {

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}

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">

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">

gui/pages/Content/Models/AddModel.js

@@ -0,0 +1,16 @@
+import React, {useEffect, useState} from "react";
+import ModelForm from "./ModelForm";
+
+export default function AddModel(internalId){
+    return(
+        <div id="add_model">
+            <div className="row">
+                <div className="col-3" />
+                <div className="col-6 col-6-scrollable">
+                    <ModelForm internalId={internalId}/>
+                </div>
+                <div className="col-3" />
+            </div>
+        </div>
+    )
+}