Staging 1107 (#26)

* Support latest OpenAI models with necessary adjustments * Update scrollbar style
AnchoringAI · Nov 8, 2023 · c3f1203 · c3f1203
1 parent 6b08fab
commit c3f1203
Show file tree

Hide file tree

Showing 16 changed files with 144 additions and 18 deletions.
diff --git a/back-end/requirements.txt b/back-end/requirements.txt
@@ -5,8 +5,8 @@ flask-sqlalchemy==3.1.1
 flask-testing==0.8.1
 flask_jwt_extended==4.5.2
 inflection==0.5.1
-langchain==0.0.314
-openai==0.27.7
+langchain==0.0.330
+openai==0.28.1
 pandas==1.3.5
 PyJWT==2.8.0 # token
 pymysql==1.0.2

diff --git a/front-end/src/components/Playground/Anthropic/AnthropicApi.js b/front-end/src/components/Playground/Anthropic/AnthropicApi.js
@@ -5,7 +5,7 @@ const BASE_URL = "/v1/task";
 
 const api = axios.create({
  baseURL: BASE_URL,
- timeout: 120000,
+ timeout: 180000,
 });
 
 api.interceptors.request.use((config) => {

diff --git a/front-end/src/components/Playground/Anthropic/AnthropicInput.js b/front-end/src/components/Playground/Anthropic/AnthropicInput.js
@@ -212,6 +212,7 @@ const AnthropicInput = forwardRef((props, ref) => {
  <>
  <div className="input-area">
  <Input.TextArea
+ className="text-area"
  ref={textAreaRef}
  placeholder="Enter your prompt"
  value={input}

diff --git a/front-end/src/components/Playground/Anthropic/AnthropicInput.less b/front-end/src/components/Playground/Anthropic/AnthropicInput.less
@@ -35,4 +35,17 @@
  transition: color 0.3s ease;
  cursor: pointer;
  size: 14px;
+}
+
+.text-area::-webkit-scrollbar {
+ width: 12px;
+}
+
+.text-area::-webkit-scrollbar-thumb {
+ background-color: #888;
+ border-radius: 6px;
+}
+
+.text-area::-webkit-scrollbar-track {
+ background-color: #f1f1f1;
 }
diff --git a/front-end/src/components/Playground/DocSearch/DocSearch.js b/front-end/src/components/Playground/DocSearch/DocSearch.js
@@ -257,6 +257,7 @@ const DocSearch = forwardRef((props, ref) => {
  <>
  <div className="input-area">
  <Input.TextArea
+ className="text-area"
  ref={textAreaRef}
  placeholder="Enter your search query"
  value={input}

diff --git a/front-end/src/components/Playground/DocSearch/DocSearch.less b/front-end/src/components/Playground/DocSearch/DocSearch.less
@@ -40,4 +40,17 @@
  display: flex;
  align-items: center;
  margin: 10px 0;
+}
+
+.text-area::-webkit-scrollbar {
+ width: 12px;
+}
+
+.text-area::-webkit-scrollbar-thumb {
+ background-color: #888;
+ border-radius: 6px;
+}
+
+.text-area::-webkit-scrollbar-track {
+ background-color: #f1f1f1;
 }
diff --git a/front-end/src/components/Playground/GoogleSearch/GoogleSearch.js b/front-end/src/components/Playground/GoogleSearch/GoogleSearch.js
@@ -197,6 +197,7 @@ const GoogleSearch = forwardRef((props, ref) => {
  <>
  <div className="input-area">
  <Input.TextArea
+ className="text-area"
  ref={textAreaRef}
  placeholder="Enter your search query"
  value={input}

diff --git a/front-end/src/components/Playground/GoogleSearch/GoogleSearch.less b/front-end/src/components/Playground/GoogleSearch/GoogleSearch.less
@@ -35,4 +35,17 @@
  transition: color 0.3s ease;
  cursor: pointer;
  size: 14px;
-}
+}
+
+.text-area::-webkit-scrollbar {
+ width: 12px;
+}
+
+.text-area::-webkit-scrollbar-thumb {
+ background-color: #888;
+ border-radius: 6px;
+}
+
+.text-area::-webkit-scrollbar-track {
+ background-color: #f1f1f1;
+}
diff --git a/front-end/src/components/Playground/OpenAI/OpenAIApi.js b/front-end/src/components/Playground/OpenAI/OpenAIApi.js
@@ -5,7 +5,7 @@ const BASE_URL = "/v1/task";
 
 const api = axios.create({
  baseURL: BASE_URL,
- timeout: 120000,
+ timeout: 180000,
 });
 
 api.interceptors.request.use((config) => {

diff --git a/front-end/src/components/Playground/OpenAI/OpenAIInput.js b/front-end/src/components/Playground/OpenAI/OpenAIInput.js
@@ -222,6 +222,7 @@ const OpenAIInput = forwardRef((props, ref) => {
  <>
  <div className="input-area">
  <Input.TextArea
+ className="text-area"
  ref={textAreaRef}
  placeholder="Enter your prompt"
  value={input}

diff --git a/front-end/src/components/Playground/OpenAI/OpenAIInput.less b/front-end/src/components/Playground/OpenAI/OpenAIInput.less
@@ -35,4 +35,17 @@
  transition: color 0.3s ease;
  cursor: pointer;
  size: 14px;
+}
+
+.text-area::-webkit-scrollbar {
+ width: 12px;
+}
+
+.text-area::-webkit-scrollbar-thumb {
+ background-color: #888;
+ border-radius: 6px;
+}
+
+.text-area::-webkit-scrollbar-track {
+ background-color: #f1f1f1;
 }
diff --git a/front-end/src/components/Playground/OpenAI/OpenAIModelSettings.js b/front-end/src/components/Playground/OpenAI/OpenAIModelSettings.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Drawer, Form, Slider, Select, Tooltip } from "antd";
 import "./OpenAIModelSettings.less";
 
@@ -20,6 +20,25 @@ const OpenAIModelSettings = ({
  presencePenalty,
  setPresencePenalty,
 }) => {
+ const [sliderMax, setSliderMax] = useState(2048);
+
+ useEffect(() => {
+ // Define the max tokens and slider max for each model
+ const modelSliderMax = {
+ "gpt-3.5-turbo-16k": 16385,
+ "gpt-4": 8192,
+ "gpt-4-1106-preview": 128000,
+ };
+
+ // Set max tokens and slider max when model name changes
+ if (modelSliderMax[modelName]) {
+ setMaxTokens(
+ Math.min(maxTokens, modelSliderMax[modelName])
+ );
+ setSliderMax(modelSliderMax[modelName]);
+ }
+ }, [modelName, setMaxTokens]);
+
  const handleModelNameChange = (value) => {
  setModelName(value);
  };
@@ -32,16 +51,25 @@ const OpenAIModelSettings = ({
  open={open}
  bodyStyle={{ paddingBottom: 80 }}
  >
- <Form layout="vertical" hideRequiredMark>
+ <Form layout="vertical">
  <Form.Item label={"Model Name"}>
  <Select defaultValue={modelName} onChange={handleModelNameChange}>
- <Option value="gpt-3.5-turbo">{"gpt-3.5-turbo"}</Option>
- <Option value="gpt-4">{"gpt-4"}</Option>
+ <Option value="gpt-3.5-turbo-16k">
+ {"GPT-3.5 Trubo (gpt-3.5-turbo-16k)"}
+ </Option>
+ <Option value="gpt-4">{"GPT-4 (gpt-4)"}</Option>
+ <Option value="gpt-4-1106-preview">
+ {"GPT-4 Turbo (gpt-4-1106-preview)"}
+ </Option>
  </Select>
  </Form.Item>
  <Form.Item
  label={
- <Tooltip title={"Controls the randomness of the model's responses. Higher values (closer to 1) mean more random output."}>
+ <Tooltip
+ title={
+ "Controls the randomness of the model's responses. Higher values (closer to 1) mean more random output."
+ }
+ >
  <div className="labelContainer">
  <span>{"Temperature"}</span>
  <span>{temperature}</span>
@@ -59,7 +87,11 @@ const OpenAIModelSettings = ({
  </Form.Item>
  <Form.Item
  label={
- <Tooltip title={"The maximum length of the output in tokens. A higher value means a longer output."}>
+ <Tooltip
+ title={
+ "The maximum length of the output in tokens. A higher value means a longer output."
+ }
+ >
  <div className="labelContainer">
  <span>{"Maximum Tokens"}</span>
  <span>{maxTokens}</span>
@@ -68,15 +100,19 @@ const OpenAIModelSettings = ({
  }
  >
  <Slider
- defaultValue={maxTokens}
+ value={maxTokens}
  min={1}
- max={2048}
+ max={sliderMax}
  onChange={setMaxTokens}
  />
  </Form.Item>
  <Form.Item
  label={
- <Tooltip title={"Controls the diversity of the model's responses via nucleus sampling. Higher values (closer to 1) mean less diverse output."}>
+ <Tooltip
+ title={
+ "Controls the diversity of the model's responses via nucleus sampling. Higher values (closer to 1) mean less diverse output."
+ }
+ >
  <div className="labelContainer">
  <span>{"Top P"}</span>
  <span>{topP}</span>
@@ -94,7 +130,11 @@ const OpenAIModelSettings = ({
  </Form.Item>
  <Form.Item
  label={
- <Tooltip title={"The penalty for using new tokens in the output. Higher values discourage the model from using new tokens."}>
+ <Tooltip
+ title={
+ "The penalty for using new tokens in the output. Higher values discourage the model from using new tokens."
+ }
+ >
  <div className="labelContainer">
  <span>{"Frequency Penalty"}</span>
  <span>{frequencyPenalty}</span>
@@ -112,7 +152,11 @@ const OpenAIModelSettings = ({
  </Form.Item>
  <Form.Item
  label={
- <Tooltip title={"The penalty for using tokens that were not in the input. Higher values discourage the model from introducing new concepts."}>
+ <Tooltip
+ title={
+ "The penalty for using tokens that were not in the input. Higher values discourage the model from introducing new concepts."
+ }
+ >
  <div className="labelContainer">
  <span>{"Presence Penalty"}</span>
  <span>{presencePenalty}</span>

diff --git a/front-end/src/components/Playground/Output/Output.js b/front-end/src/components/Playground/Output/Output.js
@@ -165,7 +165,7 @@ const Output = forwardRef(
  <div className="input-area">
  <Input.TextArea
  ref={textAreaRef}
- className="input-field"
+ className="text-area"
  placeholder="Enter your text"
  value={input}
  onChange={handleInputChange}

diff --git a/front-end/src/components/Playground/Output/Output.less b/front-end/src/components/Playground/Output/Output.less
@@ -34,4 +34,17 @@
  transition: color 0.3s ease;
  cursor: pointer;
  size: 14px;
+}
+
+.text-area::-webkit-scrollbar {
+ width: 12px;
+}
+
+.text-area::-webkit-scrollbar-thumb {
+ background-color: #888;
+ border-radius: 6px;
+}
+
+.text-area::-webkit-scrollbar-track {
+ background-color: #f1f1f1;
 }
diff --git a/front-end/src/components/Playground/TextInput/TextInput.js b/front-end/src/components/Playground/TextInput/TextInput.js
@@ -55,7 +55,7 @@ const TextInput = forwardRef(
  return (
  <div className="text-input-container">
  <Input.TextArea
- className="input-field"
+ className="text-area"
  placeholder="Enter your text"
  value={userInput}
  onChange={handleInputChange}

diff --git a/front-end/src/components/Playground/TextInput/TextInput.less b/front-end/src/components/Playground/TextInput/TextInput.less
@@ -1,4 +1,17 @@
 .text-input-container {
  width: 100%;
  margin-bottom: 10px;
+}
+
+.text-area::-webkit-scrollbar {
+ width: 12px;
+}
+
+.text-area::-webkit-scrollbar-thumb {
+ background-color: #888;
+ border-radius: 6px;
+}
+
+.text-area::-webkit-scrollbar-track {
+ background-color: #f1f1f1;
 }