Staging 1105 (#25)

* Increase default max tokens for LLMs API calls * Update YouTube Transcript input format to variable
AnchoringAI · Nov 5, 2023 · 6b08fab · 6b08fab
1 parent 18744b5
commit 6b08fab
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 67 deletions.
diff --git a/front-end/src/components/Playground/Anthropic/AnthropicInput.js b/front-end/src/components/Playground/Anthropic/AnthropicInput.js
@@ -23,7 +23,7 @@ const AnthropicInput = forwardRef((props, ref) => {
  const [open, setOpen] = useState(false);
  const [modelName, setModelName] = useState("claude-2");
  const [temperature, setTemperature] = useState(0.1);
- const [maxTokens, setMaxTokens] = useState(1000);
+ const [maxTokens, setMaxTokens] = useState(2000);
  const [topP, setTopP] = useState(0.8);
  const [input, setInput] = useState("");
  const [apiResponse, setApiResponse] = useState("");
@@ -53,7 +53,7 @@ const AnthropicInput = forwardRef((props, ref) => {
  const parameters = item.parameters;
  setModelName(parameters.modelName || "gpt-3.5-turbo");
  setTemperature(parameters.temperature || 0.1);
- setMaxTokens(parameters.maxTokens || 300);
+ setMaxTokens(parameters.maxTokens || 2000);
  setTopP(parameters.topP || 0.8);
  setInput(item.input || "");
  break;

diff --git a/front-end/src/components/Playground/Anthropic/AnthropicModelSettings.js b/front-end/src/components/Playground/Anthropic/AnthropicModelSettings.js
@@ -66,7 +66,7 @@ const AnthropicModelSettings = ({
  <Slider
  defaultValue={maxTokens}
  min={1}
- max={2048}
+ max={4000}
  onChange={setMaxTokens}
  />
  </Form.Item>

diff --git a/front-end/src/components/Playground/OpenAI/OpenAIInput.js b/front-end/src/components/Playground/OpenAI/OpenAIInput.js
@@ -23,7 +23,7 @@ const OpenAIInput = forwardRef((props, ref) => {
  const [open, setOpen] = useState(false);
  const [modelName, setModelName] = useState("gpt-3.5-turbo");
  const [temperature, setTemperature] = useState(0.1);
- const [maxTokens, setMaxTokens] = useState(300);
+ const [maxTokens, setMaxTokens] = useState(1024);
  const [topP, setTopP] = useState(0.8);
  const [frequencyPenalty, setFrequencyPenalty] = useState(0);
  const [presencePenalty, setPresencePenalty] = useState(0);
@@ -55,7 +55,7 @@ const OpenAIInput = forwardRef((props, ref) => {
  const parameters = item.parameters;
  setModelName(parameters.modelName || "gpt-3.5-turbo");
  setTemperature(parameters.temperature || 0.1);
- setMaxTokens(parameters.maxTokens || 300);
+ setMaxTokens(parameters.maxTokens || 1024);
  setTopP(parameters.topP || 0.8);
  setFrequencyPenalty(parameters.frequencyPenalty || 0);
  setPresencePenalty(parameters.presencePenalty || 0);

diff --git a/front-end/src/components/Playground/YouTubeTranscript/YouTubeTranscript.js b/front-end/src/components/Playground/YouTubeTranscript/YouTubeTranscript.js
@@ -17,6 +17,7 @@ import "./YouTubeTranscript.less";
 
 const YouTubeTranscript = forwardRef((props, ref) => {
  // State hooks
+ const [userInput, setUserInput] = useState("");
  const [input, setInput] = useState("");
  const [apiResponse, setApiResponse] = useState("");
  const [isLoading, setIsLoading] = useState(false);
@@ -38,6 +39,16 @@ const YouTubeTranscript = forwardRef((props, ref) => {
  const dropdownEnabled = previousComponents.length > 0;
 
  // Effect hooks
+ useEffect(() => {
+ setInput(`{${props.title} Content}`);
+ props.onUpdateInput(`{${props.title} Content}`);
+ }, [props.title]);
+
+ useEffect(() => {
+ props.onUpdateOutput(userInput);
+ props.onUpdateUserInput(userInput);
+ }, [userInput]);
+
  useEffect(() => {
  if (loadedApplicationData && loadedApplicationData.chain) {
  for (const item of loadedApplicationData.chain) {
@@ -49,31 +60,30 @@ const YouTubeTranscript = forwardRef((props, ref) => {
  }
  }, [loadedApplicationData, props.id]);
 
- useEffect(() => {
- props.onUpdateInput(input);
- }, [input]);
-
  // Imperative handle
  useImperativeHandle(ref, () => ({
  async run() {
  return await handleRunClick();
  },
- getInput() {
- return input;
- },
  setInput(newInput) {
  setInput(newInput);
  },
+ setUserInput(newInput) {
+ setUserInput(newInput);
+ },
+ getInput() {
+ return input;
+ },
  }));
 
  // Function definitions
- const handleInputChange = (e) => setInput(e.target.value);
+ const handleInputChange = (e) => setUserInput(e.target.value);
  const handleRunClick = async () => {
  setIsLoading(true);
  setError(null);
  setApiResponse(null);
 
- let processedInput = input;
+ let processedInput = userInput;
 
  previousComponents.forEach((component, i) => {
  if (component.type === "batch-input" && Array.isArray(component.output)) {
@@ -123,54 +133,6 @@ const YouTubeTranscript = forwardRef((props, ref) => {
  });
  };
 
- const items = previousComponents
- .map((component, index) => {
- if (component === null || component === undefined) return null;
- if (component.type === "batch-input" && Array.isArray(component.output)) {
- return component.output.map((outputItem) => {
- const columnName = outputItem.Field;
- return {
- label: `${columnName}`,
- key: `${columnName}`,
- onClick: () => {
- const { selectionStart, selectionEnd } =
- textAreaRef.current.resizableTextArea.textArea;
- const toInsert = `{${columnName}}`;
- setInput(
- (prevInput) =>
- prevInput.substring(0, selectionStart) +
- toInsert +
- prevInput.substring(selectionEnd)
- );
- },
- };
- });
- } else {
- const label = component.title || `Action-${index + 1} Output`;
- return {
- label: label,
- key: index.toString(),
- onClick: () => {
- const { selectionStart, selectionEnd } =
- textAreaRef.current.resizableTextArea.textArea;
- const toInsert = `{${label}}`;
- setInput(
- (prevInput) =>
- prevInput.substring(0, selectionStart) +
- toInsert +
- prevInput.substring(selectionEnd)
- );
- },
- };
- }
- })
- .flat()
- .filter(Boolean);
-
- const menuProps = {
- items,
- };
-
  return (
  <div className="transcript-input">
  {props.isEditMode && (
@@ -181,7 +143,7 @@ const YouTubeTranscript = forwardRef((props, ref) => {
  ref={textAreaRef}
  addonBefore="Video Link"
  placeholder="URL of the YouTube video"
- value={input}
+ value={userInput}
  onChange={handleInputChange}
  />
  </div>

diff --git a/front-end/src/pages/Application/ApplicationPage.js b/front-end/src/pages/Application/ApplicationPage.js
@@ -235,6 +235,7 @@ const ApplicationPage = () => {
  if (matchingVariable) {
  switch (matchingVariable.type) {
  case "text-input":
+ case "youtube-transcript":
  ref.setUserInput(matchingVariable.userInput);
  break;
  case "batch-input":
@@ -288,7 +289,7 @@ const ApplicationPage = () => {
  fileId = component.fileId;
  }
 
- if (component.type === "text-input" && component.input) {
+ if ((component.type === "text-input" || component.type === "youtube-transcript") && component.input) {
  let inputKey = component.input.replace(/[{}]/g, "");
  inputVariables[inputKey] = component.userInput;
  }
@@ -328,7 +329,7 @@ const ApplicationPage = () => {
  for (const component of components) {
  let variableComponent;
 
- if (component.type === "text-input") {
+ if (component.type === "text-input" || component.type === "youtube-transcript") {
  variableComponent = {
  id: component.id,
  type: component.type,

diff --git a/front-end/src/pages/Playground/PlaygroundPage.js b/front-end/src/pages/Playground/PlaygroundPage.js
@@ -462,6 +462,7 @@ const PlaygroundPage = () => {
  if (matchingVariable) {
  switch (matchingVariable.type) {
  case "text-input":
+ case "youtube-transcript":
  ref.setUserInput(matchingVariable.userInput);
  break;
  case "batch-input":
@@ -602,7 +603,7 @@ const PlaygroundPage = () => {
  fileId = component.fileId;
  }
 
- if (component.type === "text-input" && component.input) {
+ if ((component.type === "text-input" || component.type === "youtube-transcript") && component.input) {
  let inputKey = component.input.replace(/[{}]/g, "");
  inputVariables[inputKey] = component.userInput;
  }
@@ -642,7 +643,7 @@ const PlaygroundPage = () => {
  for (const component of components) {
  let variableComponent;
 
- if (component.type === "text-input") {
+ if (component.type === "text-input" || component.type === "youtube-transcript") {
  variableComponent = {
  id: component.id,
  type: component.type,