diff --git a/gui/pages/Content/Models/AddModel.js b/gui/pages/Content/Models/AddModel.js
new file mode 100644
index 000000000..206a0c468
--- /dev/null
+++ b/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(
+
+ )
+}
\ No newline at end of file
diff --git a/gui/pages/Content/Models/AddModelMarketPlace.js b/gui/pages/Content/Models/AddModelMarketPlace.js
new file mode 100644
index 000000000..1c0adafeb
--- /dev/null
+++ b/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.provider);
+ 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(
+
+
+
+
+
Add Model
+
+
+
{templateData.model_name}
+
+ By {templateData.provider} ·
+ {templateData.provider}
+
+
+ {templateData.provider === 'Hugging Face' &&
+ {templateData.provider} Model Endpoint
+
}
+
+ {templateData.provider === 'Replicate' &&
+ {templateData.provider} Version
+
}
+
+
Token Limit
+
setModelTokenLimit(+event.target.value)} />
+
+ {tokenError &&
+
+
+
The {templateData.provider} 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 {templateData.provider} dashboard.
+
+ openNewTab(-3, "Settings", "Settings", false)}>Add auth token
+ Get auth token
+
+
+
}
+
+
+
+
+ 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.
+ openNewTab(-3, "Settings", "Settings", false)}>Deploy
+
+
+
+
storeModelDetails()}>Install
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/gui/pages/Content/Models/MarketModels.js b/gui/pages/Content/Models/MarketModels.js
new file mode 100644
index 000000000..5b864febf
--- /dev/null
+++ b/gui/pages/Content/Models/MarketModels.js
@@ -0,0 +1,57 @@
+import React, {useState, useEffect} from "react";
+import styles from "@/pages/Content/Marketplace/Market.module.css";
+import Image from "next/image";
+import {loadingTextEffect, modelIcon, returnToolkitIcon} from "@/utils/utils";
+import {EventBus} from "@/utils/eventBus";
+import {fetchMarketPlaceModel} from "@/pages/api/DashboardService";
+
+export default function MarketModels(){
+ const [showMarketplace, setShowMarketplace] = useState(false);
+ const [isLoading, setIsLoading] = useState(false)
+ const [loadingText, setLoadingText] = useState("Loading Models");
+ const [modelTemplates, setModelTemplates] = useState([]);
+
+ useEffect(() => {
+ loadingTextEffect('Loading Models', setLoadingText, 500);
+ },[]);
+
+ useEffect(() => {
+ fetchMarketPlaceModel().then((response) => {
+ console.log(response.data)
+ setModelTemplates(response.data)
+ })
+ },[])
+
+ function handleTemplateClick(item) {
+ const contentType = 'model_template';
+ EventBus.emit('openTemplateDetails', {item, contentType});
+ }
+
+ return(
+
+
+ {!isLoading ?
+ {modelTemplates.length > 0 ?
{modelTemplates.map((item) => (
+
handleTemplateClick(item)}>
+
{item.model_name && item.model_name.includes('/') ? item.model_name.split('/')[1] : item.model_name}
+
+ by { item.model_name && item.model_name.includes('/') ? item.model_name.split('/')[0] : item.provider }
+ {item.provider} ·
+ {item.installs}
+
+
{item.description}
+
+ ))}
:
+ No Models found!
+
}
+
:
}
+
+
+ )
+}
\ No newline at end of file
diff --git a/gui/pages/Content/Models/ModelDetails.js b/gui/pages/Content/Models/ModelDetails.js
new file mode 100644
index 000000000..751b50568
--- /dev/null
+++ b/gui/pages/Content/Models/ModelDetails.js
@@ -0,0 +1,41 @@
+import React, {useState, useEffect} from "react";
+import Image from "next/image";
+import ModelMetrics from "./ModelMetrics";
+import ModelInfo from "./ModelInfo";
+import {fetchModel} from "@/pages/api/DashboardService";
+
+export default function ModelDetails({modelId, modelName}){
+ const [modelDetails, setModelDetails] = useState([])
+ const [selectedOption, setSelectedOption] = useState('metrics')
+
+ useEffect(() => {
+ const fetchModelDetails = async () => {
+ try {
+ const response = await fetchModel(modelId);
+ console.log(response.data)
+ setModelDetails(response.data)
+ } catch(error) {
+ console.log(`Error Fetching the Details of the Model ${modelName}`, error)
+ }
+ };
+
+ fetchModelDetails().then().catch();
+ },[])
+
+ return(
+
+
+
{ modelDetails.name ? (modelDetails.name.split('/')[1] || modelDetails.name) : ""}
+
{modelDetails.description}
+
+ setSelectedOption('metrics')}>Metrics
+ setSelectedOption('details')}>Details
+
+
+ {selectedOption === 'metrics' &&
}
+ {selectedOption === 'details' &&
}
+
+ )
+}
\ No newline at end of file
diff --git a/gui/pages/Content/Models/ModelForm.js b/gui/pages/Content/Models/ModelForm.js
new file mode 100644
index 000000000..cf9eb430e
--- /dev/null
+++ b/gui/pages/Content/Models/ModelForm.js
@@ -0,0 +1,163 @@
+import React, {useEffect, useRef, useState} from "react";
+import {removeTab, openNewTab, createInternalId} from "@/utils/utils";
+import Image from "next/image";
+import {fetchApiKey, storeModel, verifyEndPoint} from "@/pages/api/DashboardService";
+import {BeatLoader, ClipLoader} from "react-spinners";
+import {ToastContainer, toast} from 'react-toastify';
+
+export default function ModelForm(internalId){
+ const models = ['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 [tokenError, setTokenError] = useState(false);
+ const [lockAddition, setLockAddition] = useState(true);
+ const [isLoading, setIsLoading] = useState(false)
+ const modelRef = useRef(null);
+
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (modelRef.current && !modelRef.current.contains(event.target)) {
+ setModelDropdown(false)
+ }
+ }
+ },[]);
+
+ useEffect(() => {
+ const fetchMyAPI = async () => {
+ const error = await checkModelProvider(selectedModel)
+ if(selectedModel !== 'Select a Model' && !error)
+ setLockAddition(false)
+ else
+ setLockAddition(true)
+ }
+
+ fetchMyAPI();
+ },[selectedModel])
+
+ const handleModelSelect = async (index) => {
+ setSelectedModel(models[index])
+ setModelDropdown(false);
+ }
+
+ const checkModelProvider = async (model_provider) => {
+ const response = await fetchApiKey(model_provider);
+ if(selectedModel !== 'Select a Model'){
+ if(response && response.data && response.data[0].api_key === '') {
+ setTokenError(true)
+ return true
+ }
+ else {
+ setTokenError(false)
+ return false
+ }
+ }
+ }
+
+ const handleAddModel = () =>{
+ setIsLoading(true)
+ fetchApiKey(selectedModel).then((response) =>{
+ if(response.data.length > 0)
+ {
+ const modelProviderId = response.data[0].id
+ verifyEndPoint(response.data[0].api_key, modelEndpoint, selectedModel).then((response) =>{
+ console.log(response)
+ if(response.data.success)
+ storeModelDetails(modelProviderId)
+ else{
+ toast.error("The Endpoint is not Valid",{autoClose: 1800});
+ setIsLoading(false);
+ }
+ }).catch((error) => {
+ console.log("Error Message:: " + error)
+ })
+ }
+ })
+ }
+
+ const storeModelDetails = (modelProviderId) => {
+ storeModel(modelName,modelDescription, modelEndpoint, modelProviderId, modelTokenLimit, "Custom", 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(
+