Spaces:
Sleeping
Sleeping
File size: 6,653 Bytes
c40c75a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 |
import React from "react";
import { Modal, Form, InputNumber, message } from "antd";
import { TextInput } from "@tremor/react";
import { Button as Button2 } from "antd";
import { modelUpdateCall } from "../networking";
interface EditModelModalProps {
visible: boolean;
onCancel: () => void;
model: any;
onSubmit: (data: FormData) => void;
}
export const handleEditModelSubmit = async (formValues: Record<string, any>, accessToken: string | null, setEditModalVisible: (visible: boolean) => void, setSelectedModel: (model: any) => void) => {
// Call API to update team with teamId and values
console.log("handleEditSubmit:", formValues);
if (accessToken == null) {
return;
}
let newLiteLLMParams: Record<string, any> = {};
let model_info_model_id = null;
if (formValues.input_cost_per_token) {
// Convert from per 1M tokens to per token
formValues.input_cost_per_token = Number(formValues.input_cost_per_token) / 1_000_000;
}
if (formValues.output_cost_per_token) {
// Convert from per 1M tokens to per token
formValues.output_cost_per_token = Number(formValues.output_cost_per_token) / 1_000_000;
}
for (const [key, value] of Object.entries(formValues)) {
if (key !== "model_id") {
// Empty string means user wants to null the value
newLiteLLMParams[key] = value === "" ? null : value;
} else {
model_info_model_id = value === "" ? null : value;
}
}
let payload: {
litellm_params: Record<string, any> | undefined;
model_info: { id: any } | undefined;
} = {
litellm_params: Object.keys(newLiteLLMParams).length > 0 ? newLiteLLMParams : undefined,
model_info: model_info_model_id !== undefined ? {
id: model_info_model_id,
} : undefined,
};
console.log("handleEditSubmit payload:", payload);
try {
let newModelValue = await modelUpdateCall(accessToken, payload);
message.success(
"Model updated successfully, restart server to see updates"
);
setEditModalVisible(false);
setSelectedModel(null);
} catch (error) {
console.log(`Error occurred`);
}
};
const EditModelModal: React.FC<EditModelModalProps> = ({
visible,
onCancel,
model,
onSubmit,
}) => {
const [form] = Form.useForm();
let litellm_params_to_edit: Record<string, any> = {};
let model_name = "";
let model_id = "";
if (model) {
litellm_params_to_edit = {
...model.litellm_params,
input_cost_per_token: model.litellm_params?.input_cost_per_token ? (model.litellm_params.input_cost_per_token * 1_000_000) : undefined,
output_cost_per_token: model.litellm_params?.output_cost_per_token ? (model.litellm_params.output_cost_per_token * 1_000_000) : undefined,
};
model_name = model.model_name;
let model_info = model.model_info;
if (model_info) {
model_id = model_info.id;
console.log(`model_id: ${model_id}`);
litellm_params_to_edit.model_id = model_id;
}
}
const handleOk = () => {
form
.validateFields()
.then((values) => {
const submissionValues = {
...values,
input_cost_per_token: values.input_cost_per_token ? Number(values.input_cost_per_token) / 1_000_000 : undefined,
output_cost_per_token: values.output_cost_per_token ? Number(values.output_cost_per_token) / 1_000_000 : undefined,
};
onSubmit(submissionValues);
form.resetFields();
})
.catch((error) => {
console.error("Validation failed:", error);
});
};
return (
<Modal
title={"Edit '" + model_name + "' LiteLLM Params"}
visible={visible}
width={800}
footer={null}
onOk={handleOk}
onCancel={onCancel}
>
<Form
form={form}
onFinish={onSubmit}
initialValues={litellm_params_to_edit}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
labelAlign="left"
>
<>
<Form.Item
label="Input Cost (per 1M tokens)"
name="input_cost_per_token"
tooltip="float (optional) - Input cost per 1 million tokens"
>
<TextInput />
</Form.Item>
<Form.Item
label="Output Cost (per 1M tokens)"
name="output_cost_per_token"
tooltip="float (optional) - Output cost per 1 million tokens"
>
<TextInput />
</Form.Item>
<Form.Item className="mt-8" label="api_base" name="api_base">
<TextInput />
</Form.Item>
<Form.Item className="mt-8" label="api_key" name="api_key">
<TextInput />
</Form.Item>
<Form.Item className="mt-8" label="custom_llm_provider" name="custom_llm_provider">
<TextInput />
</Form.Item>
<Form.Item className="mt-8" label="model" name="model">
<TextInput />
</Form.Item>
<Form.Item
label="organization"
name="organization"
tooltip="OpenAI Organization ID"
>
<TextInput />
</Form.Item>
<Form.Item
label="tpm"
name="tpm"
tooltip="int (optional) - Tokens limit for this deployment: in tokens per minute (tpm). Find this information on your model/providers website"
>
<InputNumber min={0} step={1} />
</Form.Item>
<Form.Item
label="rpm"
name="rpm"
tooltip="int (optional) - Rate limit for this deployment: in requests per minute (rpm). Find this information on your model/providers website"
>
<InputNumber min={0} step={1} />
</Form.Item>
<Form.Item label="max_retries" name="max_retries">
<InputNumber min={0} step={1} />
</Form.Item>
<Form.Item
label="timeout"
name="timeout"
tooltip="int (optional) - Timeout in seconds for LLM requests (Defaults to 600 seconds)"
>
<InputNumber min={0} step={1} />
</Form.Item>
<Form.Item
label="stream_timeout"
name="stream_timeout"
tooltip="int (optional) - Timeout for stream requests (seconds)"
>
<InputNumber min={0} step={1} />
</Form.Item>
<Form.Item label="model_id" name="model_id" hidden={true}></Form.Item>
</>
<div style={{ textAlign: "right", marginTop: "10px" }}>
<Button2 htmlType="submit">Save</Button2>
</div>
</Form>
</Modal>
);
};
export default EditModelModal; |