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

@@ -9,7 +9,7 @@ import {
   getOrganisationConfig,
   getLlmModels,
   updateExecution,
-  uploadFile, getAgentWorkflows
+  uploadFile, getAgentWorkflows, fetchModels
 } from "@/pages/api/DashboardService";
 import {
   formatBytes,
@@ -51,6 +51,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.",
@@ -63,8 +64,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);
 
@@ -145,16 +146,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);
@@ -314,7 +316,7 @@ export default function AgentCreate({
 
   const handleModelSelect = (index) => {
     setLocalStorageValue("agent_model_" + String(internalId), modelsArray[index], setModel);
-    if (modelsArray[index] === "google-palm-bison-001") {
+    if (modelsArray[index] === "google-palm-bison-001" || modelsArray[index] === "replicate-llama13b-v2-chat") {
       setAgentType("Fixed Task Queue")
     }
     setModelDropdown(false);
@@ -861,13 +863,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/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/Models/AddModel.js

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

gui/pages/Content/Models/AddModelMarketPlace.js

@@ -0,0 +1,103 @@
+import React, {useState, useEffect} from "react";
+import Image from "next/image";
+import {openNewTab, modelIcon} from "@/utils/utils";
+import {fetchApiKey, storeModel} from "@/pages/api/DashboardService";
+import {toast} from "react-toastify";
+
+export default function AddModelMarketPlace(template){
+    const [modelTokenLimit, setModelTokenLimit] = useState(4096);
+    const [modelVersion, setModelVersion] = useState('');
+    const [modelEndpoint, setModelEndpoint] = useState('');
+    const [tokenError, setTokenError] = useState(false);
+    const [templateData, setTemplateData] = useState(template.template);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(()=>{
+        console.log(templateData)
+        checkModelProvider().then().catch();
+    },[])
+
+    const checkModelProvider = async () => {
+        const response = await fetchApiKey(templateData.source_name);
+        if(response && response.data && response.data[0].api_key === '') {
+            setTokenError(true)
+            return true
+        }
+        else {
+            setTokenError(false)
+            return false
+        }
+    }
+
+    const storeModelDetails = () => {
+        storeModel(templateData.model_name, templateData.description, modelEndpoint, templateData.model_provider_id, modelTokenLimit, "Marketplace", modelVersion).then((response) =>{
+            setIsLoading(false)
+            if (response.data.error) {
+                toast.error(response.data.error,{autoClose: 1800});
+            } else if (response.data.success) {
+                toast.success(response.data.success,{autoClose: 1800});
+            }
+        }).catch((error) => {
+            console.log("SORRY, There was an error storing the model details" + error);
+            setIsLoading(false)
+        });
+    }
+
+    return(
+        <div id="add_model_marketplace" className="row text_12 color_gray">
+            <div className="col-3" />
+            <div className="col-6 col-6-scrollable">
+                <div className="vertical_containers">
+                    <span className="text_16 color_white">Add Model</span>
+
+                    <div className="vertical_containers tag_container mt_24">
+                        <span className="text_14 color_white">{templateData.model_name}</span>
+                        <div className="horizontal_container mt_8">
+                            <span>By {templateData.source_name}&nbsp;·&nbsp;</span>
+                            <Image width={18} height={18} src={modelIcon(templateData.source_name)} alt="logo-icon" />
+                            <span className="ml_4">{templateData.source_name}</span>
+                        </div>
+                    </div>
+                    {templateData.source_name === 'Hugging Face' && <div className="vertical_containers">
+                        <span className="mt_24">{templateData.source_name} Model Endpoint</span>
+                        <input className="input_medium mt_8" type="text" placeholder="Enter Model Endpoint URL"
+                               onChange={(event) => setModelEndpoint(event.target.value)}/>
+                    </div>}
+
+                    {templateData.source_name === 'Replicate' && <div className="vertical_containers">
+                        <span className="mt_24">{templateData.source_name} Version</span>
+                        <input className="input_medium mt_8" type="text" placeholder="Enter Model Version"
+                               onChange={(event) => setModelVersion(event.target.value)}/>
+                    </div>}
+
+                    <span className="mt_24">Token Limit</span>
+                    <input className="input_medium mt_8" type="number" placeholder="Enter the Token Limit" value={modelTokenLimit}
+                           onChange={(event) => setModelTokenLimit(+event.target.value)} />
+
+                    {tokenError && <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">The <b>{templateData.source_name}</b> auth token is not added to your settings. In order to start using the model, you need to add the auth token to your settings. You can find the auth token in the <b>{templateData.source_name}</b> dashboard. </span>
+                            <div className="horizontal_container mt_16">
+                                <button className="primary_button_small" onClick={() => openNewTab(-3, "Settings", "Settings", false)}>Add auth token</button>
+                                <button className="secondary_button_small ml_8">Get auth token</button>
+                            </div>
+                        </div>
+                    </div>}
+
+                    <div className="horizontal_container align_start info_box mt_24 gap_6">
+                        <Image width={16} height={16} src="/images/icon_info.svg" alt="error-icon" />
+                        <div className="vertical_containers">
+                            <span className="text_12 color_white lh_16">In order to get the endpoint for this model, you will need to deploy it on your Replicate dashboard. Once you have deployed your model on Hugging Face, you will be able to access the endpoint through the Hugging Face dashboard. The endpoint is a URL that you can use to send requests to your model.</span>
+                            <button className="secondary_button_small w_fit_content mt_16" onClick={() => openNewTab(-3, "Settings", "Settings", false)}>Deploy</button>
+                        </div>
+                    </div>
+
+                    <button className="primary_button w_fit_content align_self_end mt_24" disabled={tokenError}
+                            onClick={() => storeModelDetails()}>Install</button>
+                </div>
+            </div>
+            <div className="col-3" />
+        </div>
+    )
+}