kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-15 02:50:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Finetune ui improvements (#2053)

Browse Source 
* WIP finetune ui improvements

* lint

* update order details page finetuning ui

* data upload, confirmation, and order placed finetune ui update

* update finetune layout

* remove unneeded imports

* uncomment url

* confirmation and data upload component ui updates

* finetun main container layout fix
This commit is contained in:
Sean Hatfield 2024-08-12 11:49:53 -07:00 committed by GitHub
parent 2797298507
commit 26959563e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 541 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
frontend/src/pages/FineTuning/Steps/Confirmation/index.jsx
View File

@ -1,9 +1,11 @@
import FineTuning from "@/models/experimental/fineTuning"; import FineTuning from "@/models/experimental/fineTuning";
import { dollarFormat } from "@/utils/numbers"; import { dollarFormat } from "@/utils/numbers";
import showToast from "@/utils/toast"; import showToast from "@/utils/toast";
import { CheckCircle } from "@phosphor-icons/react"; import { Check } from "@phosphor-icons/react";
import { useState } from "react"; import { useState, useEffect } from "react";
import FineTuningSteps from "../index"; import FineTuningSteps from "../index";
import CTAButton from "@/components/lib/CTAButton";
import Workspace from "@/models/workspace";
/** /**
* @param {{settings: import("../index").OrderSettings}} param0 * @param {{settings: import("../index").OrderSettings}} param0
@ -11,6 +13,18 @@ import FineTuningSteps from "../index";
*/ */
export default function Confirmation({ settings, setSettings, setStep }) { export default function Confirmation({ settings, setSettings, setStep }) {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [workspaces, setWorkspaces] = useState([]);
useEffect(() => {
Workspace.all()
.then((fetchedWorkspaces) => {
setWorkspaces(fetchedWorkspaces);
})
.catch(() => {
showToast("Failed to fetch workspaces", "error");
});
}, []);
async function handleCheckout() { async function handleCheckout() {
setLoading(true); setLoading(true);
const data = await FineTuning.createOrder({ const data = await FineTuning.createOrder({
@ -40,107 +54,124 @@ export default function Confirmation({ settings, setSettings, setStep }) {
setStep(FineTuningSteps.confirmation.next()); setStep(FineTuningSteps.confirmation.next());
} }
const getWorkspaceName = (slug) => {
const workspace = workspaces.find((ws) => ws.slug === slug);
return workspace ? workspace.name : slug;
};
return ( return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10"> <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
<div className="bg-[#303237] text-white rounded-xl flex-1 p-4 flex flex-col justify-between"> <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
<div className="w-full flex flex-col gap-y-4"> <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
<h2 className="text-xl text-white font-semibold">Confirm & Submit</h2> <h2 className="text-base text-white font-semibold">
<p> Confirm & Submit
</h2>
<p className="text-white/80 text-sm">
Below are your fine-tuning order details. If you have any questions Below are your fine-tuning order details. If you have any questions
before or after ordering your fine-tune you can{" "} before or after ordering your fine-tune you can checkout the{" "}
<a <a
href="https://docs.useanything.com/fine-tuning/overview" href="https://docs.useanything.com/fine-tuning/overview"
target="_blank" target="_blank"
className="underline" rel="noreferrer"
className="underline text-sky-400"
> >
checkout the fine-tuning FAQ fine-tuning FAQ
</a>{" "} </a>{" "}
or email{" "} or email{" "}
<a className="underline" href="mailto:team@mintplexlabs.com"> <a
className="underline text-sky-400"
href="mailto:team@mintplexlabs.com"
>
team@mintplexlabs.com team@mintplexlabs.com
</a> </a>
. .
</p> </p>
<div className="p-2 bg-zinc-800 text-white font-mono flex flex-col gap-y-2 h-full rounded-lg"> <div className="p-4 bg-zinc-900 text-white flex flex-col gap-y-2 rounded-lg mt-4">
<div className="flex items-center gap-x-1 text-sm"> <div className="flex flex-col gap-y-3 text-sm">
<p className="">Contact e-mail:</p> <div className="flex items-start gap-x-1">
<p className="font-thin">{settings.email}</p> <p className="w-1/3">Contact e-mail:</p>
<p className="text-white/80 w-2/3">{settings.email}</p>
</div> </div>
<div className="flex items-center gap-x-1 text-sm"> <div className="flex items-start gap-x-1">
<p className="">Base LLM:</p> <p className="w-1/3">Base LLM:</p>
<p className="font-thin">{settings.baseModel}</p> <p className="text-white/80 w-2/3">{settings.baseModel}</p>
</div> </div>
<div className="flex items-center gap-x-1 text-sm"> <div className="flex items-start gap-x-1">
<p className="">Output model name:</p> <p className="w-1/3">Output model name:</p>
<p className="font-thin">"{settings.modelName}"</p> <p className="text-white/80 w-2/3">"{settings.modelName}"</p>
</div> </div>
<div className="flex flex-col gap-y-1 text-sm"> <div className="flex items-start gap-x-1">
<div className="flex items-center gap-x-1"> <p className="w-1/3">Training on workspaces:</p>
<p className="">Training on workspaces:</p> <div className="text-white/80 w-2/3 flex flex-wrap gap-1">
{settings.trainingData.slugs.map((slug, i) => { {settings.trainingData.slugs.map((slug, i) => (
return ( <span
<p key={slug} className="font-thin"> key={slug}
"{slug}" className={`rounded-full bg-white/10 px-2 py-0.5 h-[20px] text-xs font-medium text-white shadow-sm`}
{i !== settings.trainingData.slugs.length - 1 ? "," : ""} >
{getWorkspaceName(slug)}
</span>
))}
</div>
</div>
<div className="flex items-start gap-x-1">
<p className="w-1/3">Training data:</p>
<p className="text-white/80 w-2/3">
{settings.trainingData.feedback === true
? "Training on positive-feedback chats only"
: "Training on all chats"}
</p> </p>
);
})}
</div> </div>
{settings.trainingData.feedback === true ? (
<p className="underline">
training on <b>positive-feedback chats only</b>.
</p>
) : (
<p className="underline">
training on <b>all chats</b>.
</p>
)}
</div> </div>
<br /> <div className="mt-4">
<div className="flex items-center gap-x-1 text-sm"> <ul className="flex flex-col gap-y-1 text-sm">
<CheckCircle className="text-green-300" /> <li className="flex items-center gap-x-2">
<p className="font-thin">Agreed to Terms and Conditions</p> <Check className="text-white" size={12} weight="bold" />
</div> <p className="text-white/80">
<div className="flex items-center gap-x-1 text-sm"> Agreed to Terms and Conditions
<CheckCircle className="text-green-300" /> </p>
<p className="font-thin">Understand privacy & data handling</p> </li>
</div> <li className="flex items-center gap-x-2">
<div className="flex items-center gap-x-1 text-sm"> <Check className="text-white" size={12} weight="bold" />
<CheckCircle className="text-green-300" /> <p className="text-white/80">
<p className="font-thin">Agreed to Fulfillment terms</p> Understand privacy & data handling
</p>
</li>
<li className="flex items-center gap-x-2">
<Check className="text-white" size={12} weight="bold" />
<p className="text-white/80">Agreed to Fulfillment terms</p>
</li>
</ul>
</div> </div>
<div> <div className="mt-4 border-white/40 pt-2">
<div className="flex items-center gap-x-1 text-lg border-t-[2px] border-white/40 pt-2 mb-0"> <div className="flex items-center gap-x-1 text-lg mb-0">
<p className="">Total one-time cost:</p> <p className="">Total one-time cost:</p>
<p className="font-thin"> <p className="text-white/80">
{dollarFormat(settings.tuningInfo.pricing.usd)} {dollarFormat(settings.tuningInfo.pricing.usd)}
<sup>*</sup> <sup>*</sup>
</p> </p>
</div> </div>
<p className="m-0 p-0 text-xs text-white/60 font-mono"> <p className="m-0 p-0 text-xs text-white/60">
<sup>*</sup> price does not include any coupons, incentives, or <sup>*</sup> price does not include any coupons, incentives, or
discounts you can apply at checkout. discounts you can apply at checkout.
</p> </p>
</div> </div>
</div> </div>
<p> <p className="text-xs text-white/80 mt-4">
Once you proceed to checkout, if you do not complete this purchase Once you proceed to checkout, if you do not complete this purchase
your data will be deleted from our servers within 1 hour of your data will be deleted from our servers within 1 hour of
abandonment of the creation of the checkout in accordance to our abandonment of the creation of the checkout in accordance to our
privacy and data handling policy. privacy and data handling policy.
</p> </p>
</div> <CTAButton
<button
disabled={loading} disabled={loading}
onClick={handleCheckout} onClick={handleCheckout}
type="button" className="text-dark-text w-full mt-[18px] h-[34px] hover:bg-accent"
className="mt-8 w-full py-2 text-center text-black bg-white hover:bg-white/80 border-none rounded-lg"
> >
{loading ? <>Generating order...</> : <>Start Training &rarr;</>} {loading ? "Generating order..." : "Start Training →"}
</button> </CTAButton>
</div>
</div> </div>
</div> </div>
); );

131
frontend/src/pages/FineTuning/Steps/DataUpload/index.jsx
View File

@ -1,8 +1,14 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import FineTuning from "@/models/experimental/fineTuning"; import FineTuning from "@/models/experimental/fineTuning";
import Workspace from "@/models/workspace"; import Workspace from "@/models/workspace";
import { CheckCircle, Warning, X } from "@phosphor-icons/react"; import {
CheckCircle,
Warning,
X,
MagnifyingGlass,
} from "@phosphor-icons/react";
import FineTuningSteps from ".."; import FineTuningSteps from "..";
import CTAButton from "@/components/lib/CTAButton";
export default function DataUpload({ setSettings, setStep }) { export default function DataUpload({ setSettings, setStep }) {
const [workspaces, setWorkspaces] = useState([]); const [workspaces, setWorkspaces] = useState([]);
@ -41,34 +47,29 @@ export default function DataUpload({ setSettings, setStep }) {
return ( return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10"> <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
<div className="bg-[#303237] text-white rounded-xl flex-1 p-4"> <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
<form <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
onSubmit={handleSubmit} <h2 className="text-base text-white font-semibold">
className="flex flex-col justify-between h-full" Select your training dataset
>
<div className="w-full flex flex-col gap-y-4">
<h2 className="text-xl text-white font-semibold">
Select your training dataset.
</h2> </h2>
<p> <p className="text-white/80 text-sm">
This is the data your model will be trained and tuned on. This is This is the data your model will be trained and tuned on. This is a
a critical step and you should always train on the exact critical step and you should always train on the exact information
information you want the model to inherit. By default, AnythingLLM you want the model to inherit. By default, AnythingLLM will use all
will use all chats, but you can filter chats by workspace and even chats, but you can filter chats by workspace and even limit training
limit training to chats which users have left a positive feedback to chats which users have left a positive feedback indication on
indication on (thumbs up). (thumbs up).
</p> </p>
<div className="flex flex-col pr-10"> <form onSubmit={handleSubmit} className="flex flex-col gap-y-6 mt-4">
<div className="flex flex-col gap-y-1 mb-4"> <div className="flex flex-col">
<label className="text-white text-sm font-bold"> <label className="text-white text-sm font-semibold block mb-3">
Only use positive responses Only use positive responses
</label> </label>
<p className="text-xs font-normal text-white/80"> <p className="text-xs font-normal text-white/80 mb-2">
Enabling this toggle will filter your dataset to only use Enabling this toggle will filter your dataset to only use
"positive" responses that were marked during chatting. "positive" responses that were marked during chatting.
</p> </p>
</div>
<label className="relative inline-flex cursor-pointer items-center w-fit"> <label className="relative inline-flex cursor-pointer items-center w-fit">
<input <input
type="checkbox" type="checkbox"
@ -84,36 +85,35 @@ export default function DataUpload({ setSettings, setStep }) {
</label> </label>
</div> </div>
<div className="flex flex-col pr-10"> <div className="flex flex-col">
<div className="flex flex-col gap-y-1 mb-4"> <label className="text-white text-sm font-semibold block mb-3">
<label className="text-white text-sm font-bold">
Selected Workspaces Selected Workspaces
</label> </label>
<p className="text-xs font-normal text-white/80"> <p className="text-xs font-normal text-white/80 mb-2">
You training data will be limited to these workspaces. Your training data will be limited to these workspaces.
</p> </p>
</div>
<WorkspaceSelector <WorkspaceSelector
workspaces={workspaces} workspaces={workspaces}
selectedWorkspaces={dataFilters.workspaces} selectedWorkspaces={dataFilters.workspaces}
setDataFilters={setDataFilters} setDataFilters={setDataFilters}
/> />
</div> </div>
<DatasetSummary <DatasetSummary
workspaces={dataFilters.workspaces} workspaces={dataFilters.workspaces}
feedback={dataFilters.feedback} feedback={dataFilters.feedback}
/> />
</div>
<button <CTAButton
type="submit" type="submit"
className="mt-20 w-full py-2 text-center text-white hover:bg-primary-button border-none rounded-lg" className="text-dark-text w-full mt-[18px] h-[34px] hover:bg-accent"
> >
Proceed to Confirmation &rarr; Proceed to Confirmation &rarr;
</button> </CTAButton>
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }
@ -155,33 +155,9 @@ function WorkspaceSelector({
} }
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col gap-y-2">
<div className="w-full h-fit"> <div className="min-w-[150px] max-w-[300px] h-[32px] p-[10px] rounded-lg flex items-center bg-dark-highlight mt-1">
<div className="w-full relative z-1"> <MagnifyingGlass size={16} className="text-white" />
<div className="p-1 flex border border-white/40 bg-zinc-800 rounded">
<div className="flex flex-auto flex-wrap">
{selectedWorkspaces.map((workspace) => {
return (
<div
key={workspace.slug}
className="flex gap-x-1 justify-center items-center m-1 font-medium py-1 px-2 bg-zinc-800 rounded-full text-white/40 bg-white/10 border border-white/40 "
>
<div className="text-xs font-normal text-white leading-none max-w-full flex-initial">
{workspace.name}
</div>
<div className="flex flex-auto flex-row-reverse">
<button
onClick={() => handleRemoveWorkspace(workspace)}
type="button"
className="hover:text-red-500"
>
<X size={14} weight="bold" />
</button>
</div>
</div>
);
})}
<div className="flex-1">
<input <input
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
@ -192,9 +168,31 @@ function WorkspaceSelector({
}, 500) }, 500)
} }
placeholder="Enter a workspace name" placeholder="Enter a workspace name"
className="w-[200px] bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-white" className="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-white text-xs placeholder:`text-white/50`"
/> />
</div> </div>
<div className="flex flex-col items-center -ml-2">
<div className="w-full h-fit">
<div className="w-full relative z-1">
<div className="p-2 flex rounded-lg">
<div className="flex flex-wrap gap-2 w-full">
{selectedWorkspaces.map((workspace) => {
return (
<div
key={workspace.slug}
className="flex items-center justify-between rounded-full h-[20px] bg-white/10 px-2 py-1 text-xs font-medium text-white shadow-sm"
>
<span className="truncate mr-1">{workspace.name}</span>
<button
onClick={() => handleRemoveWorkspace(workspace)}
type="button"
className="hover:text-red-500 flex-shrink-0"
>
<X size={10} weight="bold" />
</button>
</div>
);
})}
</div> </div>
</div> </div>
</div> </div>
@ -211,6 +209,7 @@ function WorkspaceSelector({
)} )}
</div> </div>
</div> </div>
</div>
); );
} }
@ -221,7 +220,7 @@ function WorkspaceSuggestions({
}) { }) {
if (availableWorkspaces.length === 0) { if (availableWorkspaces.length === 0) {
return ( return (
<div className="w-full mt-[2px] bg-zinc-800 border border-white/40 top-[45px] h-40 rounded-lg p-2 text-sm"> <div className="w-full mt-[2px] bg-zinc-900 top-[45px] h-40 rounded-lg p-2 text-sm">
<p className="text-center text-white/40"> <p className="text-center text-white/40">
no workspaces available to select. no workspaces available to select.
</p> </p>
@ -239,7 +238,7 @@ function WorkspaceSuggestions({
: availableWorkspaces; : availableWorkspaces;
return ( return (
<div className="w-full mt-[2px] bg-zinc-800 border border-white/40 top-[45px] h-40 rounded-lg p-2 text-sm flex flex-col gap-y-1 justify-start overflow-y-scroll"> <div className="w-full mt-[2px] bg-zinc-900 top-[45px] h-40 rounded-lg p-2 text-sm flex flex-col gap-y-1 justify-start overflow-y-scroll">
{filteredWorkspace.map((workspace) => { {filteredWorkspace.map((workspace) => {
return ( return (
<button <button
@ -271,19 +270,19 @@ function DatasetSummary({ workspaces = [], feedback = null }) {
}, [workspaces, feedback]); }, [workspaces, feedback]);
return ( return (
<div className="bg-zinc-800 text-white/80 p-2 rounded-lg font-mono"> <div className="bg-zinc-900 text-white/80 p-4 rounded-lg text-sm">
<p>Training dataset size: {stats.count ?? "Unknown"}</p> <p>Training dataset size: {stats.count ?? "Unknown"}</p>
{stats.count < stats.recommendedMin ? ( {stats.count < stats.recommendedMin ? (
<div className="flex items-center gap-x-1 text-red-500 text-sm p-1 rounded-lg bg-red-500/20 w-fit my-2"> <div className="flex items-center gap-x-1 text-red-500 text-sm p-2 rounded-lg bg-red-500/20 w-fit my-2">
<Warning /> <Warning size={14} />
<p> <p>
Your dataset is below the recommended minimum of{" "} Your dataset is below the recommended minimum of{" "}
{stats.recommendedMin}! You may see no impact from a fine-tune. {stats.recommendedMin}! You may see no impact from a fine-tune.
</p> </p>
</div> </div>
) : ( ) : (
<div className="flex items-center gap-x-1 text-green-500 text-sm p-1 rounded-lg bg-green-500/20 w-fit my-2"> <div className="flex items-center gap-x-1 text-green-500 text-sm p-2 rounded-lg bg-green-500/20 w-fit my-2">
<CheckCircle /> <CheckCircle size={14} />
<p> <p>
Your dataset is large enough that you should see good results from a Your dataset is large enough that you should see good results from a
fine-tune. fine-tune.

84
frontend/src/pages/FineTuning/Steps/FulfillmentPolicy/index.jsx
View File

@ -1,3 +1,4 @@
import CTAButton from "@/components/lib/CTAButton";
import FineTuningSteps from ".."; import FineTuningSteps from "..";
export default function Fulfillment({ setSettings, setStep }) { export default function Fulfillment({ setSettings, setStep }) {
@ -10,34 +11,29 @@ export default function Fulfillment({ setSettings, setStep }) {
return ( return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10"> <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
<div className="bg-[#303237] text-white rounded-xl flex-1 p-4"> <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
<div className="w-full flex flex-col gap-y-4"> <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
<h2 className="text-xl text-white font-semibold"> <h2 className="text-base text-white font-semibold">
Fulfillment Policy Fulfillment Policy
</h2> </h2>
<p> <p className="text-white/80 text-sm">
Fulfillment of a fine-tune model is straight-forward. We do not host Fulfillment of a fine-tune model is straight-forward. We do not host
your model. We provide you a download link to run the model in a your model. We provide you a download link to run the model in a
standard format where ever you run local LLMs standard format where ever you run local LLMs
</p> </p>
<div className="flex flex-col gap-y-2 text-white/75 text-sm border p-2 border-white rounded-lg font-mono h-[60vh] overflow-y-scroll"> <div className="flex flex-col gap-y-2 text-white/80 text-xs font-semibold rounded-lg p-4 h-[60vh] overflow-y-auto bg-dark-text mt-2">
<h1 class="text-white/80 text-lg font-semibold"> <div className="text-xs text-white">
Fulfillment Terms <h1>Fulfillment Terms</h1>
</h1> <p>Last updated: July 15, 2024</p>
<p> </div>
<strong>Last updated: July 15, 2024</strong> <p className="text-white/80">
</p>
<p>
These fulfillment terms outline the agreement between Mintplex These fulfillment terms outline the agreement between Mintplex
Labs Inc. (“Company,” “we,” “us,” or “our”) and the customer Labs Inc. ("Company," "we," "us," or "our") and the customer
regarding the creation and delivery of fine-tuned models. regarding the creation and delivery of fine-tuned models.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">Delivery of Model</h2>
Delivery of Model <p className="text-white/80">
</h2>
<p>
Upon completion of a fine-tuning job, we will deliver a download Upon completion of a fine-tuning job, we will deliver a download
link to a .gguf model file suitable for LLM text inferencing. The link to a .gguf model file suitable for LLM text inferencing. The
customer acknowledges that this exchange is strictly transactional customer acknowledges that this exchange is strictly transactional
@ -45,17 +41,15 @@ export default function Fulfillment({ setSettings, setStep }) {
is considered concluded and will be ineligible for a refund. is considered concluded and will be ineligible for a refund.
</p> </p>
<h2 class="text-white/80 text-base font-semibold">Support</h2> <h2 className="text-white mt-4">Support</h2>
<p> <p className="text-white/80">
Please note that the delivery of the model does not include any Please note that the delivery of the model does not include any
dedicated support. Customers are encouraged to refer to available dedicated support. Customers are encouraged to refer to available
documentation and resources for guidance on using the model. documentation and resources for guidance on using the model.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">Requesting Download Links</h2>
Requesting Download Links <p className="text-white/80">
</h2>
<p>
Customers may request refreshed download links from Customers may request refreshed download links from
my.mintplexlabs.com as long as the model is retained in our cloud my.mintplexlabs.com as long as the model is retained in our cloud
storage. We will retain a model in our storage for a maximum of 3 storage. We will retain a model in our storage for a maximum of 3
@ -63,10 +57,8 @@ export default function Fulfillment({ setSettings, setStep }) {
links are valid for 24 hours. links are valid for 24 hours.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">Cancellation and Refunds</h2>
Cancellation and Refunds <p className="text-white/80">
</h2>
<p>
Mintplex Labs Inc. reserves the right to cancel any fine-tuning Mintplex Labs Inc. reserves the right to cancel any fine-tuning
job at our discretion. In the event of a cancellation, a refund job at our discretion. In the event of a cancellation, a refund
may be issued. Additionally, we reserve the right to deny a may be issued. Additionally, we reserve the right to deny a
@ -74,22 +66,22 @@ export default function Fulfillment({ setSettings, setStep }) {
cause or notice to the Customer. cause or notice to the Customer.
</p> </p>
<h2 class="text-white/80 text-base font-semibold">No Guarantees</h2> <h2 className="text-white mt-4">No Guarantees</h2>
<p> <p className="text-white/80">
Mintplex Labs Inc. makes <strong>NO GUARANTEES</strong> regarding Mintplex Labs Inc. makes <strong>NO GUARANTEES</strong> regarding
the resulting model's output, functionality, speed, or the resulting model's output, functionality, speed, or
compatibility with your tools, infrastructure and devices. Refund compatibility with your tools, infrastructure and devices. Refund
requests of this nature are not eligible for refunds. requests of this nature are not eligible for refunds.
</p> </p>
<p> <p className="text-white/80">
Models are delivered and accepted in "As-Is" condition. All Models are delivered and accepted in "As-Is" condition. All
delivered model and output files are deemed final and delivered model and output files are deemed final and
non-refundable for any reason after training is complete and a non-refundable for any reason after training is complete and a
model has been generated. model has been generated.
</p> </p>
<h2 class="text-white/80 text-base font-semibold">Payment Terms</h2> <h2 className="text-white mt-4">Payment Terms</h2>
<p> <p className="text-white/80">
All payments are required prior to the commencement of the All payments are required prior to the commencement of the
fine-tuning process. Customers are responsible for ensuring that fine-tuning process. Customers are responsible for ensuring that
valid payment information is provided. Checkout sessions not valid payment information is provided. Checkout sessions not
@ -97,32 +89,36 @@ export default function Fulfillment({ setSettings, setStep }) {
abandoned and will be deleted from our system. abandoned and will be deleted from our system.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">
Denial of Service for Payment Reasons Denial of Service for Payment Reasons
</h2> </h2>
<p> <p className="text-white/80">
Mintplex Labs Inc. reserves the right to deny service to any Mintplex Labs Inc. reserves the right to deny service to any
customer with an outstanding balance or invalid payment customer with an outstanding balance or invalid payment
information. If any discrepancies arise regarding payment or information. If any discrepancies arise regarding payment or
usage, we may suspend services until the matter is resolved. usage, we may suspend services until the matter is resolved.
</p> </p>
<h2 class="text-white/80 text-base font-semibold">Contact</h2> <h2 className="text-white mt-4">Contact</h2>
<p> <p className="text-white/80">
For any questions related to payment or fulfillment of services, For any questions related to payment or fulfillment of services,
please contact us at{" "} please contact us at{" "}
<a href="mailto:team@mintplexlabs.com">team@mintplexlabs.com</a>. <a
href="mailto:team@mintplexlabs.com"
className="text-blue-400 hover:underline"
>
team@mintplexlabs.com
</a>
.
</p> </p>
</div> </div>
</div> <CTAButton
className="text-dark-text w-full mt-[18px] h-[34px] hover:bg-accent"
<button
onClick={handleAccept} onClick={handleAccept}
type="button"
className="mt-8 w-full py-2 text-center text-white hover:bg-primary-button border-none rounded-lg"
> >
Agree and continue &rarr; Agree and continue &rarr;
</button> </CTAButton>
</div>
</div> </div>
</div> </div>
); );

73
frontend/src/pages/FineTuning/Steps/Introduction/index.jsx
View File

@ -1,5 +1,6 @@
import { CheckCircle, XCircle } from "@phosphor-icons/react"; import { Check, X } from "@phosphor-icons/react";
import FineTuningSteps from ".."; import FineTuningSteps from "..";
import CTAButton from "@/components/lib/CTAButton";
export default function Introduction({ setSettings, setStep }) { export default function Introduction({ setSettings, setStep }) {
const handleAccept = () => { const handleAccept = () => {
@ -11,12 +12,12 @@ export default function Introduction({ setSettings, setStep }) {
return ( return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10"> <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
<div className="bg-[#303237] text-white rounded-xl flex-1 p-4"> <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
<div className="w-full flex flex-col gap-y-4"> <div className="w-full flex flex-col gap-y-2 max-w-[700px]">
<h2 className="text-xl text-white font-semibold"> <h2 className="text-base text-white font-semibold">
What is a "Fine-Tuned" model? What is a "Fine-Tuned" model?
</h2> </h2>
<div className="flex flex-col gap-y-2 text-white/80"> <div className="flex flex-col gap-y-[25px] text-white/80 text-sm">
<p> <p>
Fine-tuned models are basically "customized" Fine-tuned models are basically "customized"
Language-Learning-Models (LLMs). These can be based on popular Language-Learning-Models (LLMs). These can be based on popular
@ -36,8 +37,8 @@ export default function Introduction({ setSettings, setStep }) {
</p> </p>
</div> </div>
<div className="flex flex-col gap-y-2 text-white/80"> <div className="flex flex-col gap-y-2 text-white/80 text-sm mt-4">
<h3 className="text-lg text-white font-semibold"> <h3 className="text-base text-white font-semibold">
When should I get a fine-tuned model? When should I get a fine-tuned model?
</h3> </h3>
<p> <p>
@ -45,48 +46,49 @@ export default function Introduction({ setSettings, setStep }) {
following following
</p> </p>
<ul className="flex flex-col gap-y-1"> <ul className="flex flex-col gap-y-1">
<li className="flex items-center gap-x-1"> <li className="flex items-center gap-x-2">
<CheckCircle className="text-green-300" /> Setting the style, <Check className="text-white" size={12} weight="bold" /> Setting
tone, format, or other qualitative aspects without prompting the style, tone, format, or other qualitative aspects without
prompting
</li> </li>
<li className="flex items-center gap-x-1"> <li className="flex items-center gap-x-2">
<CheckCircle className="text-green-300" /> Improving reliability <Check className="text-white" size={12} weight="bold" />{" "}
at producing a desired output Improving reliability at producing a desired output
</li> </li>
<li className="flex items-center gap-x-1"> <li className="flex items-center gap-x-2">
<CheckCircle className="text-green-300" /> Correcting failures <Check className="text-white" size={12} weight="bold" />{" "}
to follow complex prompts, citations, or lack of background Correcting failures to follow complex prompts, citations, or
knowledge lack of background knowledge
</li> </li>
<li className="flex items-center gap-x-1"> <li className="flex items-center gap-x-2">
<CheckCircle className="text-green-300" /> You want to run this <Check className="text-white" size={12} weight="bold" /> You
model privately or offline want to run this model privately or offline
</li> </li>
</ul> </ul>
</div> </div>
<div className="flex flex-col gap-y-2 text-white/80"> <div className="flex flex-col gap-y-2 text-white/80 text-sm mt-4">
<h3 className="text-lg text-white font-semibold"> <h3 className="text-base text-white font-semibold">
What are fine-tunes bad for? What are fine-tunes bad for?
</h3> </h3>
<p> <p>
Fine-tuned models powerful, but they are not the "silver bullet" Fine-tuned models are powerful, but they are not the "silver
to any issues you have with RAG currently. Some notable bullet" to any issues you have with RAG currently. Some notable
limitations are limitations are
</p> </p>
<ul> <ul>
<li className="flex items-center gap-x-1"> <li className="flex items-center gap-x-1">
<XCircle className="text-red-300" /> You need perfect recall of <X className="text-white" size={12} weight="bold" /> You need
some piece of literature or reference document perfect recall of some piece of literature or reference document
</li> </li>
<li className="flex items-center gap-x-1"> <li className="flex items-center gap-x-1">
<XCircle className="text-red-300" /> You want your model to have <X className="text-white" size={12} weight="bold" /> You want
perfect memory or recollection your model to have perfect memory or recollection
</li> </li>
</ul> </ul>
</div> </div>
<div className="flex flex-col gap-y-2 text-white/80"> <div className="flex flex-col gap-y-2 text-white/80 text-sm">
<p> <p>
In summary, if you are getting good results with RAG currently, In summary, if you are getting good results with RAG currently,
creating a fine-tune can squeeze <b>even more performance</b> out creating a fine-tune can squeeze <b>even more performance</b> out
@ -95,15 +97,14 @@ export default function Introduction({ setSettings, setStep }) {
that is what RAG is for! Together, it is a powerful combination. that is what RAG is for! Together, it is a powerful combination.
</p> </p>
</div> </div>
</div> <CTAButton
className="text-dark-text w-full mt-[18px] h-[34px] hover:bg-accent"
<button
onClick={handleAccept} onClick={handleAccept}
type="button" text="Create fine-tune model &rarr;"
className="mt-8 w-full py-2 text-center text-white hover:bg-primary-button border-none rounded-lg"
> >
Start a fine-tune &rarr; Create a fine-tune model &rarr;
</button> </CTAButton>
</div>
</div> </div>
</div> </div>
); );

74
frontend/src/pages/FineTuning/Steps/OrderDetails/index.jsx
View File

@ -2,9 +2,11 @@ import FineTuning from "@/models/experimental/fineTuning";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import FineTuningSteps from ".."; import FineTuningSteps from "..";
import { CircleNotch } from "@phosphor-icons/react"; import { CircleNotch } from "@phosphor-icons/react";
import CTAButton from "@/components/lib/CTAButton";
export default function OrderDetails({ setSettings, setStep }) { export default function OrderDetails({ setSettings, setStep }) {
const [info, setInfo] = useState({}); const [info, setInfo] = useState({});
useEffect(() => { useEffect(() => {
FineTuning.info() FineTuning.info()
.then((res) => { .then((res) => {
@ -32,33 +34,30 @@ export default function OrderDetails({ setSettings, setStep }) {
return ( return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10"> <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
<div className="bg-[#303237] text-white rounded-xl flex-1 p-4"> <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
<form onSubmit={handleSubmit}> <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
<div className="w-full flex flex-col gap-y-4"> <h2 className="text-base text-white font-semibold">
<h2 className="text-xl text-white font-semibold">
Time to create your fine tune! Time to create your fine tune!
</h2> </h2>
<p> <p className="text-white/80 text-sm">
Creating a model is quite simple. Currently we have a limited base Creating a model is quite simple. Currently we have a limited base
model selection, however in the future we plan to expand support model selection, however in the future we plan to expand support to
to many more foundational models. many more foundational models.
</p> </p>
<form onSubmit={handleSubmit} className="flex flex-col gap-y-6 mt-4">
<div className="flex flex-col pr-10"> <div className="flex flex-col">
<div className="flex flex-col gap-y-1 mb-4"> <label className="text-white text-sm font-semibold block mb-3">
<label className="text-white text-sm font-bold">
Account e-mail Account e-mail
</label> </label>
<p className="text-xs font-normal text-white/80"> <p className="text-xs font-normal text-white/80 mb-2">
This e-mail is where you will receive all order information This e-mail is where you will receive all order information and
and updates. This e-mail <b>must be accurate</b> or else we updates. This e-mail <b>must be accurate</b> or else we won't be
won't be able to contact you with your fine-tuned model! able to contact you with your fine-tuned model!
</p> </p>
</div>
<input <input
type="email" type="email"
name="email" name="email"
className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full max-w-[200px] p-2.5"
placeholder="jdoe@example.com" placeholder="jdoe@example.com"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -66,33 +65,29 @@ export default function OrderDetails({ setSettings, setStep }) {
/> />
</div> </div>
<div className="flex flex-col pr-10"> <div className="flex flex-col">
<div className="flex flex-col gap-y-1 mb-4"> <label className="text-white text-sm font-semibold block mb-3">
<label className="text-white text-sm font-bold">
Preferred Base Model Preferred Base Model
</label> </label>
<p className="text-xs font-normal text-white/80"> <p className="text-xs font-normal text-white/80 mb-2">
This is the foundational model your fine-tune will be based This is the foundational model your fine-tune will be based on.
on. We recommend Llama 3 8B. We recommend Llama 3 8B.
</p> </p>
</div>
{info.hasOwnProperty("availableBaseModels") ? ( {info.hasOwnProperty("availableBaseModels") ? (
<select <select
name="baseModel" name="baseModel"
required={true} required={true}
className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-fit p-2.5" className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full max-w-[200px] p-2.5"
> >
<option disabled="true" selected="true" value=""> <option disabled value="">
-- select a base model -- -- select a base model --
</option> </option>
<optgroup label="Available base models"> <optgroup label="Available base models">
{(info?.availableBaseModels || []).map((model) => { {(info?.availableBaseModels || []).map((model) => (
return (
<option key={model} value={model}> <option key={model} value={model}>
{model} {model}
</option> </option>
); ))}
})}
</optgroup> </optgroup>
</select> </select>
) : ( ) : (
@ -103,36 +98,35 @@ export default function OrderDetails({ setSettings, setStep }) {
)} )}
</div> </div>
<div className="flex flex-col pr-10"> <div className="flex flex-col">
<div className="flex flex-col gap-y-1 mb-4"> <label className="text-white text-sm font-semibold block mb-3">
<label className="text-white text-sm font-bold">
Model name Model name
</label> </label>
<p className="text-xs font-normal text-white/80"> <p className="text-xs font-normal text-white/80 mb-2">
What would you like to call your model? This has no impact on What would you like to call your model? This has no impact on
its output or training and is only used for how we communicate its output or training and is only used for how we communicate
with you about the model. with you about the model.
</p> </p>
</div>
<input <input
type="text" type="text"
name="modelName" name="modelName"
className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full max-w-[200px] p-2.5"
placeholder="My really cool model!" placeholder="My really cool model!"
required={true} required={true}
autoComplete="off" autoComplete="off"
spellCheck={false} spellCheck={false}
/> />
</div> </div>
</div>
<button <CTAButton
type="submit" type="submit"
className="mt-8 w-full py-2 text-center text-white hover:bg-primary-button border-none rounded-lg" className="text-dark-text w-full mt-[18px] h-[34px] hover:bg-accent"
> >
Proceed to data selection &rarr; Proceed to data selection &rarr;
</button> </CTAButton>
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }

60
frontend/src/pages/FineTuning/Steps/OrderPlaced/index.jsx
View File

@ -1,13 +1,15 @@
import CTAButton from "@/components/lib/CTAButton";
import paths from "@/utils/paths";
export default function OrderPlaced({ settings }) { export default function OrderPlaced({ settings }) {
return ( return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10"> <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
<div className="bg-[#303237] text-white rounded-xl flex-1 p-4"> <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
<div className="w-full flex flex-col gap-y-4"> <div className="w-full flex flex-col gap-y-2 max-w-[700px]">
<h2 className="text-xl text-white font-semibold"> <h2 className="text-base text-white font-semibold">
Your order is placed! Your order is placed!
</h2> </h2>
<div className="flex flex-col gap-y-[25px] text-white/80 text-xs">
<div className="">
<p> <p>
Your fine-tune will begin once payment is complete. If the payment Your fine-tune will begin once payment is complete. If the payment
window did not automatically open - your checkout link is below. window did not automatically open - your checkout link is below.
@ -15,54 +17,66 @@ export default function OrderPlaced({ settings }) {
<a <a
href={settings.checkoutUrl} href={settings.checkoutUrl}
target="_blank" target="_blank"
className="text-xs font-mono text-white/60 underline" rel="noreferrer"
className="text-sky-400 hover:underline hover:cursor-pointer"
> >
{new URL(settings.checkoutUrl).origin} {new URL(settings.checkoutUrl).origin}
</a> </a>
<p className="text-xs font-mono text-white/80"> <p className="text-xs text-white/80">
Your fine-tune does not begin until this payment is completed. Your fine-tune does not begin until this payment is completed.
</p> </p>
</div>
<div className=""> <div className="flex flex-col gap-y-2">
<p className="font-mono text-white/80 text-sm"> <p className="text-white/80 font-medium">
Reference: {settings.jobId} Reference: <span className="font-normal">{settings.jobId}</span>
</p> </p>
<p className="text-xs font-mono text-white/80"> <p className="text-xs text-white/80">
This reference id is how we will communicate with you about your This reference id is how we will communicate with you about your
fine-tune training status. <b>Save this reference id.</b> fine-tune training status. <b>Save this reference id.</b>
</p> </p>
</div> </div>
<div className=""> <div className="flex flex-col gap-y-2">
<p className="font-mono text-white/80 text-sm"> <p className="text-white/80 font-medium">
Contact: {settings.email} Contact: <span className="font-normal">{settings.email}</span>
</p> </p>
<p className="text-xs font-mono text-white/80"> <p className="text-xs text-white/80">
Check the email above for order confirmation, status updates, and Check the email above for order confirmation, status updates,
more. Mintplex Labs will only contact you about your order via and more. Mintplex Labs will only contact you about your order
email. via email.
</p> </p>
</div> </div>
<div className="font-mono text-white/80 text-sm flex items-center gap-x-2"> <div className="flex flex-col items-left gap-x-4 text-xs">
<a <a
href="https://docs.useanything.com/fine-tuning/overview" href="https://docs.useanything.com/fine-tuning/overview"
target="_blank" target="_blank"
className="underline" rel="noreferrer"
className="text-sky-400 hover:underline hover:cursor-pointer"
> >
Documentation Documentation
</a> </a>
<a href="mailto:team@mintplexlabs.com" className="underline"> <a
href="mailto:team@mintplexlabs.com"
className="text-sky-400 hover:underline hover:cursor-pointer"
>
Contact support Contact support
</a> </a>
</div> </div>
<p className="text-xs font-mono text-white/80"> <p className="text-xs text-white/80">
You can close this window or navigate away once you see the You can close this window or navigate away once you see the
confirmation email in your inbox. confirmation email in your inbox.
</p> </p>
</div> </div>
<CTAButton
className="text-dark-text w-full mt-[18px] h-[34px] hover:bg-accent"
onClick={() => (window.location.href = paths.home())}
>
Finish
</CTAButton>
</div>
</div> </div>
</div> </div>
); );

142
frontend/src/pages/FineTuning/Steps/Privacy/index.jsx
View File

@ -1,3 +1,4 @@
import CTAButton from "@/components/lib/CTAButton";
import FineTuningSteps from ".."; import FineTuningSteps from "..";
export default function PrivacyHandling({ setSettings, setStep }) { export default function PrivacyHandling({ setSettings, setStep }) {
@ -10,12 +11,12 @@ export default function PrivacyHandling({ setSettings, setStep }) {
return ( return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10"> <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
<div className="bg-[#303237] text-white rounded-xl flex-1 p-4"> <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
<div className="w-full flex flex-col gap-y-4"> <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
<h2 className="text-xl text-white font-semibold"> <h2 className="text-base text-white font-semibold">
Data Handling Policy & Privacy Data Handling Policy & Privacy
</h2> </h2>
<p> <p className="text-white/80 text-sm">
Please accept the terms and conditions to continue with creation and Please accept the terms and conditions to continue with creation and
ordering of a fine-tune model. We take the handling of your data ordering of a fine-tune model. We take the handling of your data
very seriously and will only use your uploaded data for training the very seriously and will only use your uploaded data for training the
@ -23,18 +24,14 @@ export default function PrivacyHandling({ setSettings, setStep }) {
completed, or canceled your information is automatically and completed, or canceled your information is automatically and
permanently deleted. permanently deleted.
</p> </p>
<div className="flex flex-col gap-y-2 text-white/75 text-sm border p-2 border-white rounded-lg font-mono h-[60vh] overflow-y-scroll"> <div className="flex flex-col gap-y-2 text-white/75 text-xs font-semibold rounded-lg p-4 h-[60vh] overflow-y-auto bg-dark-text mt-2">
<h1 class="text-white/80 text-lg font-semibold">Privacy Policy</h1> <div className="text-xs">
<h1 className="text-white/80">Privacy Policy</h1>
<p> <p>Mintplex Labs Inc.</p>
<strong>Mintplex Labs Inc.</strong>
</p>
<p>Effective Date: July 15, 2024</p> <p>Effective Date: July 15, 2024</p>
</div>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">1. Introduction</h2>
1. Introduction <p className="text-white/80">
</h2>
<p>
Welcome to Mintplex Labs Inc. ("we", "our", "us"). We are Welcome to Mintplex Labs Inc. ("we", "our", "us"). We are
committed to protecting your privacy and ensuring the security of committed to protecting your privacy and ensuring the security of
your personal information. This Privacy Policy describes how we your personal information. This Privacy Policy describes how we
@ -42,45 +39,41 @@ export default function PrivacyHandling({ setSettings, setStep }) {
services. services.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">2. Information We Collect</h2>
2. Information We Collect <p className="text-white/80">
</h2>
<p>
When you place an order with us for tuning and large language When you place an order with us for tuning and large language
model (LLM) fulfillment, we collect certain personal information model (LLM) fulfillment, we collect certain personal information
from you, including but not limited to: from you, including but not limited to:
</p> </p>
<ul> <ul className="list-disc pl-5 text-white/80">
<li>Email address</li> <li>Email address</li>
<li>Payment information</li> <li>Payment information</li>
<li>Uploaded training data</li> <li>Uploaded training data</li>
</ul> </ul>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">3. Use of Information</h2>
3. Use of Information <p className="text-white/80">
</h2> We use the information we collect for the following purposes:
<p>We use the information we collect for the following purposes:</p> </p>
<ul> <ul className="list-disc pl-5 text-white/80">
<li>To process and fulfill your order</li> <li>To process and fulfill your order</li>
<li>To communicate with you regarding your order</li> <li>To communicate with you regarding your order</li>
<li>To improve our services</li> <li>To improve our services</li>
</ul> </ul>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">4. Data Retention and Deletion</h2>
4. Data Retention and Deletion <p className="text-white/80">
</h2>
<p>
Uploaded training data is only retained for the duration of the Uploaded training data is only retained for the duration of the
model training. Upon training completion, failure, or order model training. Upon training completion, failure, or order
cancellation, the user data is permanently deleted from our cancellation, the user data is permanently deleted from our
storage. storage.
</p> </p>
<p> <p className="text-white/80">
If you partially complete the order flow and do not finalize your If you partially complete the order flow and do not finalize your
order, any details and information associated with your order will order, any details and information associated with your order will
be deleted 1 hour from abandonment. be deleted 1 hour from abandonment.
</p> </p>
<p> <p className="text-white/80">
After you confirm receipt of your resulting model files, you can After you confirm receipt of your resulting model files, you can
request us to delete your model from our storage at any time. request us to delete your model from our storage at any time.
Additionally, we may proactively reach out to you to confirm that Additionally, we may proactively reach out to you to confirm that
@ -90,10 +83,8 @@ export default function PrivacyHandling({ setSettings, setStep }) {
storage. storage.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">5. Data Storage and Security</h2>
5. Data Storage and Security <p className="text-white/80">
</h2>
<p>
Our cloud storage provider is AWS. We have implement standard Our cloud storage provider is AWS. We have implement standard
encryption and protection policies to ensure the security of your encryption and protection policies to ensure the security of your
data. The storage solution has no public access, and all requests data. The storage solution has no public access, and all requests
@ -104,43 +95,41 @@ export default function PrivacyHandling({ setSettings, setStep }) {
e-mail you used during checkout. e-mail you used during checkout.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">6. Payment Processing</h2>
6. Payment Processing <p className="text-white/80">
</h2>
<p>
We use Stripe as our payment processor. Your email may be shared We use Stripe as our payment processor. Your email may be shared
with Stripe for customer service and payment management purposes. with Stripe for customer service and payment management purposes.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">7. Data Sharing</h2>
7. Data Sharing <p className="text-white/80">
</h2>
<p>
We do not sell or share your personal information with third We do not sell or share your personal information with third
parties except as necessary to provide our services, comply with parties except as necessary to provide our services, comply with
legal obligations, or protect our rights. legal obligations, or protect our rights.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">8. Your Rights</h2>
8. Your Rights <p className="text-white/80">
</h2>
<p>
You have the right to access, correct, or delete your personal You have the right to access, correct, or delete your personal
information. If you wish to exercise these rights, please contact information. If you wish to exercise these rights, please contact
us at{" "} us at{" "}
<a href="mailto:team@mintplexlabs.com">team@mintplexlabs.com</a>. <a
href="mailto:team@mintplexlabs.com"
className="text-blue-400 hover:underline"
>
team@mintplexlabs.com
</a>
.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">9. California Privacy Rights</h2>
9. California Privacy Rights <p className="text-white/80">
</h2>
<p>
Under the California Consumer Privacy Act as amended by the Under the California Consumer Privacy Act as amended by the
California Privacy Rights Act (the “CCPA”), California residents California Privacy Rights Act (the "CCPA"), California residents
have additional rights beyond what is set out in this privacy have additional rights beyond what is set out in this privacy
notice: notice:
</p> </p>
<ul> <ul className="list-disc pl-5 text-white/80">
<li> <li>
<strong>Right to Know:</strong> You have the right to request <strong>Right to Know:</strong> You have the right to request
information about the categories and specific pieces of personal information about the categories and specific pieces of personal
@ -170,63 +159,70 @@ export default function PrivacyHandling({ setSettings, setStep }) {
your CCPA rights. your CCPA rights.
</li> </li>
</ul> </ul>
<p> <p className="text-white/80">
<strong>Submitting a Request:</strong> <strong>Submitting a Request:</strong>
<br /> <br />
You may submit a request to know, delete, or correct your personal You may submit a request to know, delete, or correct your personal
information by contacting us at{" "} information by contacting us at{" "}
<a href="mailto:team@mintplexlabs.com">team@mintplexlabs.com</a>. <a
We will confirm your identity before processing your request and href="mailto:team@mintplexlabs.com"
className="text-blue-400 hover:underline"
>
team@mintplexlabs.com
</a>
. We will confirm your identity before processing your request and
respond within 45 days. If more time is needed, we will inform you respond within 45 days. If more time is needed, we will inform you
of the reason and extension period in writing. You may make a of the reason and extension period in writing. You may make a
request for your information twice every 12 months. If you are request for your information twice every 12 months. If you are
making an erasure request, please include details of the making an erasure request, please include details of the
information you would like erased. information you would like erased.
</p> </p>
<p> <p className="text-white/80">
Please note that if you request that we remove your information, Please note that if you request that we remove your information,
we may retain some of the information for specific reasons, such we may retain some of the information for specific reasons, such
as to resolve disputes, troubleshoot problems, and as required by as to resolve disputes, troubleshoot problems, and as required by
law. Some information may not be completely removed from our law. Some information may not be completely removed from our
databases due to technical constraints and regular backups. databases due to technical constraints and regular backups.
</p> </p>
<p> <p className="text-white/80">
We will not discriminate against you for exercising any of your We will not discriminate against you for exercising any of your
CCPA rights. CCPA rights.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">10. Contact Us</h2>
10. Contact Us <p className="text-white/80">
</h2>
<p>
If you have any questions or concerns about this Privacy Policy, If you have any questions or concerns about this Privacy Policy,
please contact us at{" "} please contact us at{" "}
<a href="mailto:team@mintplexlabs.com">team@mintplexlabs.com</a>. <a
href="mailto:team@mintplexlabs.com"
className="text-blue-400 hover:underline"
>
team@mintplexlabs.com
</a>
.
</p> </p>
<h2 class="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">
11. Changes to This Privacy Policy 11. Changes to This Privacy Policy
</h2> </h2>
<p> <p className="text-white/80">
We may update this Privacy Policy from time to time. We will We may update this Privacy Policy from time to time. We will
notify you of any changes by posting the new Privacy Policy on our notify you of any changes by posting the new Privacy Policy on our
website. You are advised to review this Privacy Policy website. You are advised to review this Privacy Policy
periodically for any changes. periodically for any changes.
</p> </p>
<p> <p className="text-white/80">
By using our services, you agree to the terms of this Privacy By using our services, you agree to the terms of this Privacy
Policy. Policy.
</p> </p>
</div> </div>
</div> <CTAButton
className="text-dark-text w-full mt-[18px] h-[34px] hover:bg-accent"
<button
onClick={handleAccept} onClick={handleAccept}
type="button"
className="mt-8 w-full py-2 text-center text-white hover:bg-primary-button border-none rounded-lg"
> >
Agree and continue &rarr; Agree and continue &rarr;
</button> </CTAButton>
</div>
</div> </div>
</div> </div>
); );

115
frontend/src/pages/FineTuning/Steps/TermsAndConditions/index.jsx
View File

@ -1,3 +1,4 @@
import CTAButton from "@/components/lib/CTAButton";
import FineTuningSteps from ".."; import FineTuningSteps from "..";
export default function TermsAndConditions({ setSettings, setStep }) { export default function TermsAndConditions({ setSettings, setStep }) {
@ -10,24 +11,21 @@ export default function TermsAndConditions({ setSettings, setStep }) {
return ( return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10"> <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
<div className="bg-[#303237] text-white rounded-xl flex-1 p-4"> <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
<div className="w-full flex flex-col gap-y-4"> <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
<h2 className="text-xl text-white font-semibold"> <h2 className="text-base text-white font-semibold">
Terms and Conditions Terms and Conditions
</h2> </h2>
<p> <p className="text-white/80 text-sm">
Please accept the terms and conditions to continue with creation and Please accept the terms and conditions to continue with creation and
ordering of a fine-tune model. ordering of a fine-tune model.
</p> </p>
<div className="flex flex-col gap-y-2 text-white/75 text-sm border p-2 border-white rounded-lg font-mono h-[60vh] overflow-y-scroll"> <div className="flex flex-col gap-y-2 text-white/80 text-xs font-semibold rounded-lg p-4 h-[60vh] overflow-y-auto bg-dark-text mt-2">
<h1 className="text-white/80 text-lg font-semibold"> <div className="text-xs text-white">
Mintplex Labs Inc. Fine-Tuning Terms of Service <h1>Mintplex Labs Inc. Fine-Tuning Terms of Service</h1>
</h1> <p>Last Updated: July 15, 2024</p>
<p> </div>
<strong>Last Updated:</strong> July 15, 2024 <p className="text-white/80">
</p>
<p>
This Agreement is between Mintplex Labs Inc. ("Company") and the This Agreement is between Mintplex Labs Inc. ("Company") and the
customer ("Customer") accessing or using the services provided by customer ("Customer") accessing or using the services provided by
the Company. By signing up, accessing, or using the services, the Company. By signing up, accessing, or using the services,
@ -35,20 +33,16 @@ export default function TermsAndConditions({ setSettings, setStep }) {
be bound by the terms and conditions outlined below. be bound by the terms and conditions outlined below.
</p> </p>
<h2 className="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">1. Services Provided</h2>
1. Services Provided <p className="text-white/80">
</h2>
<p>
Mintplex Labs Inc. provides model fine-tuning services for Mintplex Labs Inc. provides model fine-tuning services for
customers. The deliverable for these services is a download link customers. The deliverable for these services is a download link
to the output ".GGUF" file that can be used by the Customer for to the output ".GGUF" file that can be used by the Customer for
Large-Language text inferencing. Large-Language text inferencing.
</p> </p>
<h2 className="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">2. Payment Terms</h2>
2. Payment Terms <ul className="list-disc pl-5 text-white/80">
</h2>
<ul>
<li> <li>
<strong>One-Time Payment:</strong> A one-time payment is <strong>One-Time Payment:</strong> A one-time payment is
required before the execution of the training. required before the execution of the training.
@ -64,10 +58,8 @@ export default function TermsAndConditions({ setSettings, setStep }) {
</li> </li>
</ul> </ul>
<h2 className="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">3. Order Form</h2>
3. Order Form <ul className="list-disc pl-5 text-white/80">
</h2>
<ul>
<li> <li>
<strong>Service:</strong> Model fine-tuning <strong>Service:</strong> Model fine-tuning
</li> </li>
@ -79,88 +71,81 @@ export default function TermsAndConditions({ setSettings, setStep }) {
</li> </li>
</ul> </ul>
<h2 className="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">4. Customer Responsibilities</h2>
4. Customer Responsibilities <p className="text-white/80">
</h2>
<p>
The Customer must provide all necessary data and information The Customer must provide all necessary data and information
required for model fine-tuning. required for model fine-tuning.
</p> </p>
<p> <p className="text-white/80">
The Customer must ensure timely payment as per the terms mentioned The Customer must ensure timely payment as per the terms mentioned
above. above.
</p> </p>
<p> <p className="text-white/80">
The Customer understands the data collected for tuning will be The Customer understands the data collected for tuning will be
stored to a private cloud storage location temporarily while stored to a private cloud storage location temporarily while
training is in progress. training is in progress.
</p> </p>
<p> <p className="text-white/80">
The Customer understands the data collected for tuning will be The Customer understands the data collected for tuning will be
fully deleted once the order is completed or canceled by the fully deleted once the order is completed or canceled by the
Company. Company.
</p> </p>
<p> <p className="text-white/80">
The Customer understands and has reviewed the Privacy Policy for The Customer understands and has reviewed the Privacy Policy for
Fine-Tuning by the Company. Fine-Tuning by the Company.
</p> </p>
<h2 className="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">5. Refund Policy</h2>
5. Refund Policy <p className="text-white/80">
</h2>
<p>
Refunds will be processed in the event of training failure or if Refunds will be processed in the event of training failure or if
the complete model file is not delivered to the Customer. Refunds the complete model file is not delivered to the Customer. Refunds
will be issued to the original payment method within 30 days of will be issued to the original payment method within 30 days of
the refund request. the refund request.
</p> </p>
<h2 className="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">6. Governing Law</h2>
6. Governing Law <p className="text-white/80">
</h2>
<p>
This Agreement shall be governed by and construed in accordance This Agreement shall be governed by and construed in accordance
with the laws of the State of California. with the laws of the State of California.
</p> </p>
<h2 className="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">7. Dispute Resolution</h2>
7. Dispute Resolution <p className="text-white/80">
</h2>
<p>
Any disputes arising out of or in connection with this Agreement Any disputes arising out of or in connection with this Agreement
shall be resolved in the state or federal courts located in shall be resolved in the state or federal courts located in
California. California.
</p> </p>
<h2 className="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">8. Notices</h2>
8. Notices <p className="text-white/80">
</h2>
<p>
All notices under this Agreement shall be in writing and shall be All notices under this Agreement shall be in writing and shall be
deemed given when delivered personally, sent by confirmed email, deemed given when delivered personally, sent by confirmed email,
or sent by certified or registered mail, return receipt requested, or sent by certified or registered mail, return receipt requested,
and addressed to the respective parties as follows: and addressed to the respective parties as follows:
</p> </p>
<p> <p className="text-white/80">
For Company:{" "} For Company:{" "}
<a href="mailto:team@mintplexlabs.com">team@mintplexlabs.com</a> <a
href="mailto:team@mintplexlabs.com"
className="text-blue-400 hover:underline"
>
team@mintplexlabs.com
</a>
</p>
<p className="text-white/80">
For Customer: The main email address on Customer's account
</p> </p>
<p>For Customer: The main email address on Customer's account</p>
<h2 className="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">9. Amendments</h2>
9. Amendments <p className="text-white/80">
</h2>
<p>
The Company reserves the right to amend these terms at any time by The Company reserves the right to amend these terms at any time by
providing notice to the Customer. The Customer's continued use of providing notice to the Customer. The Customer's continued use of
the services after such amendments will constitute acceptance of the services after such amendments will constitute acceptance of
the amended terms. the amended terms.
</p> </p>
<h2 className="text-white/80 text-base font-semibold"> <h2 className="text-white mt-4">10. Indemnity</h2>
10. Indemnity <p className="text-white/80">
</h2>
<p>
The Customer agrees to indemnify, defend, and hold harmless The Customer agrees to indemnify, defend, and hold harmless
Mintplex Labs Inc., its affiliates, and their respective officers, Mintplex Labs Inc., its affiliates, and their respective officers,
directors, employees, agents, and representatives from and against directors, employees, agents, and representatives from and against
@ -173,15 +158,13 @@ export default function TermsAndConditions({ setSettings, setStep }) {
person or entity. person or entity.
</p> </p>
</div> </div>
</div> <CTAButton
className="text-dark-text w-full mt-[18px] h-[34px] hover:bg-accent"
<button
onClick={handleAccept} onClick={handleAccept}
type="button"
className="mt-8 w-full py-2 text-center text-white hover:bg-primary-button border-none rounded-lg"
> >
Agree and continue &rarr; Agree and continue &rarr;
</button> </CTAButton>
</div>
</div> </div>
</div> </div>
); );

18
frontend/src/pages/FineTuning/Steps/index.jsx
View File

@ -26,7 +26,7 @@ import OrderPlaced from "./OrderPlaced";
const FineTuningSteps = { const FineTuningSteps = {
intro: { intro: {
name: "Introduction to Fine-Tuning", name: "1. Introduction to Fine-Tuning",
next: () => "privacy", next: () => "privacy",
component: ({ settings, setSettings, setStep }) => ( component: ({ settings, setSettings, setStep }) => (
<Introduction <Introduction
@ -37,7 +37,7 @@ const FineTuningSteps = {
), ),
}, },
privacy: { privacy: {
name: "How your data is handled", name: "2. How your data is handled",
next: () => "tos", next: () => "tos",
component: ({ settings, setSettings, setStep }) => ( component: ({ settings, setSettings, setStep }) => (
<PrivacyPolicy <PrivacyPolicy
@ -48,7 +48,7 @@ const FineTuningSteps = {
), ),
}, },
tos: { tos: {
name: "Terms of service", name: "3. Terms of service",
next: () => "fulfillment", next: () => "fulfillment",
component: ({ settings, setSettings, setStep }) => ( component: ({ settings, setSettings, setStep }) => (
<TermsAndConditions <TermsAndConditions
@ -59,7 +59,7 @@ const FineTuningSteps = {
), ),
}, },
fulfillment: { fulfillment: {
name: "Fulfillment terms", name: "4. Fulfillment terms",
next: () => "order-details", next: () => "order-details",
component: ({ settings, setSettings, setStep }) => ( component: ({ settings, setSettings, setStep }) => (
<Fulfillment <Fulfillment
@ -70,7 +70,7 @@ const FineTuningSteps = {
), ),
}, },
"order-details": { "order-details": {
name: "Model details & information", name: "5. Model details & information",
next: () => "data-selection", next: () => "data-selection",
component: ({ settings, setSettings, setStep }) => ( component: ({ settings, setSettings, setStep }) => (
<OrderDetails <OrderDetails
@ -81,7 +81,7 @@ const FineTuningSteps = {
), ),
}, },
"data-selection": { "data-selection": {
name: "Data selection", name: "6. Data selection",
next: () => "confirmation", next: () => "confirmation",
component: ({ settings, setSettings, setStep }) => ( component: ({ settings, setSettings, setStep }) => (
<DataUpload <DataUpload
@ -92,7 +92,7 @@ const FineTuningSteps = {
), ),
}, },
confirmation: { confirmation: {
name: "Review and Submit", name: "7. Review and Submit",
next: () => "done", next: () => "done",
component: ({ settings, setSettings, setStep }) => ( component: ({ settings, setSettings, setStep }) => (
<Confirmation <Confirmation
@ -103,7 +103,7 @@ const FineTuningSteps = {
), ),
}, },
done: { done: {
name: "Order placed", name: "8. Order placed",
next: () => "done", next: () => "done",
component: ({ settings }) => <OrderPlaced settings={settings} />, component: ({ settings }) => <OrderPlaced settings={settings} />,
}, },
@ -133,7 +133,7 @@ export function FineTuningCreationLayout({ setStep, children }) {
return ( return (
<div <div
id="fine-tune-create-order-container" id="fine-tune-create-order-container"
className="w-screen h-screen overflow-y-auto bg-sidebar flex" className="w-screen h-screen overflow-hidden bg-sidebar flex md:mt-0 mt-6"
> >
<Sidebar /> <Sidebar />
<div <div

32
frontend/src/pages/FineTuning/index.jsx
View File

@ -1,13 +1,13 @@
import React, { useState } from "react"; import React, { useState } from "react";
import FineTuningSteps, { FineTuningCreationLayout } from "./Steps"; import FineTuningSteps, { FineTuningCreationLayout } from "./Steps";
import { CheckCircle, Circle, Sparkle } from "@phosphor-icons/react"; import { Sparkle } from "@phosphor-icons/react";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
function SideBarSelection({ setStep, currentStep }) { function SideBarSelection({ setStep, currentStep }) {
const currentIndex = Object.keys(FineTuningSteps).indexOf(currentStep); const currentIndex = Object.keys(FineTuningSteps).indexOf(currentStep);
return ( return (
<div <div
className={`bg-white/5 text-white rounded-xl ${ className={`bg-white/5 text-white rounded-xl py-1 px-4 ${
isMobile ? "w-full" : "min-w-[360px] w-fit" isMobile ? "w-full" : "min-w-[360px] w-fit"
}`} }`}
> >
@ -21,28 +21,32 @@ function SideBarSelection({ setStep, currentStep }) {
<div <div
key={stepKey} key={stepKey}
className={[ className={[
"py-3 px-4 flex items-center justify-between transition-all duration-300", "py-3 flex items-center justify-between transition-all duration-300",
isSelected ? "rounded-t-xl" : "", isSelected ? "rounded-t-xl" : "",
isLast ? "" : "border-b border-white/10", isLast ? "" : "border-b border-white/10",
].join(" ")} ].join(" ")}
> >
{isDone ? ( {isDone || isSelected ? (
<button <button
onClick={() => setStep(stepKey)} onClick={() => setStep(stepKey)}
className="border-none hover:underline text-white/40 text-sm font-light" className="border-none hover:underline text-sm font-medium"
> >
{props.name} {props.name}
</button> </button>
) : ( ) : (
<div className="text-sm font-light">{props.name}</div> <div className="text-sm text-white/40 font-medium">
{props.name}
</div>
)} )}
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
{isDone ? ( {isDone ? (
<CheckCircle className={`text-green-300`} /> <div className="w-[14px] h-[14px] rounded-full border border-[#32D583] flex items-center justify-center">
<div className="w-[5.6px] h-[5.6px] rounded-full bg-[#6CE9A6]"></div>
</div>
) : ( ) : (
<Circle <div
className={`text-white-800 ${ className={`w-[14px] h-[14px] rounded-full border border-white ${
isSelected ? "animate-pulse" : "opacity-10" isSelected ? "animate-pulse" : "opacity-50"
}`} }`}
/> />
)} )}
@ -63,16 +67,20 @@ export default function FineTuningFlow() {
return ( return (
<FineTuningCreationLayout setStep={setStep}> <FineTuningCreationLayout setStep={setStep}>
{(settings, setSettings, setStep) => ( {(settings, setSettings, setStep) => (
<div className="flex-1 flex gap-x-6 p-4 mt-10"> <div className="flex-1 flex h-full">
<div className="flex flex-col gap-y-[18px]"> <div className="flex flex-col gap-y-[18px] p-4 mt-10 w-[360px] flex-shrink-0">
<div className="text-white flex items-center gap-x-2"> <div className="text-white flex items-center gap-x-2">
<Sparkle size={24} /> <Sparkle size={24} />
<p className="text-lg font-medium">Custom Fine-Tuned Model</p> <p className="text-lg font-medium">Custom Fine-Tuned Model</p>
</div> </div>
<SideBarSelection setStep={setStep} currentStep={step} /> <SideBarSelection setStep={setStep} currentStep={step} />
</div> </div>
<div className="flex-1 overflow-y-auto p-4 mt-10 pb-[74px] h-screen">
<div className=" ml-8">
{StepPage.component({ settings, setSettings, setStep })} {StepPage.component({ settings, setSettings, setStep })}
</div> </div>
</div>
</div>
)} )}
</FineTuningCreationLayout> </FineTuningCreationLayout>
); );