Add available models selector

README.md

@@ -40,4 +40,4 @@ Choose a subject, list your favourites, select a quantity and generate a new lis
 
 ---
 
-Built with Open AI API GPT-3.
+Built with Open AI API GPT-3 and newest GPT-3.5.

src/pages/HomePage.tsx

@@ -1,18 +1,23 @@
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import Header from '../components/Header'
 import { MAX_TOKENS, sendCompletionRequest } from '../resources/api-request'
-import { quantities, subjects } from '../utility/options'
+import { models, quantities, subjects } from '../utility/options'
 
 const HomePage: React.FC = () => {
  const [isLoading, setIsLoading] = useState(false)
  const [userAPIKey, setUserAPIKey] = useState('')
  const [errorMessage, setErrorMessage] = useState('')
  const [lengthIssueText, setLengthIssueText] = useState('')
+ const [selectedModel, setSelectedModel] = useState('')
  const [selectedSubject, setSelectedSubject] = useState('books')
  const [selectedQuantity, setSelectedQuantity] = useState('5')
  const [favourites, setFavourites] = useState('Animal Farm by George Orwell, Odissey by Homer and Hamlet by William Shakespare')
  const [finalResponse, setFinalResponse] = useState('')
 
+ useEffect(() => {
+ setSelectedModel(models[0])
+ }, [])
+
  /**
  * Checks for validity in user's entered data
  * @returns flag that indicates that entered data is valid
@@ -52,7 +57,7 @@ const HomePage: React.FC = () => {
  setErrorMessage('')
  setLengthIssueText('')
  const message = composeRequestMessage(selectedSubject, favourites, selectedQuantity)
- const completionResponse = await sendCompletionRequest(userAPIKey, message)
+ const completionResponse = await sendCompletionRequest(userAPIKey, message, selectedModel)
 
  // Error management
  if (completionResponse && completionResponse.error && completionResponse.error.response && completionResponse.error.response.status !== 200) {
@@ -95,6 +100,16 @@ const HomePage: React.FC = () => {
  onChange={(e) => setUserAPIKey(e.target.value)}
  />
  </div>
+ <div className="u-input-row">
+ <p>Choose a model to run:</p>{' '}
+ <select role="combobox" value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)}>
+ {models.map((subject, index) => (
+ <option key={index} value={subject}>
+ {subject}
+ </option>
+ ))}
+ </select>
+ </div>
  <hr />
  <div className="u-input-row">
  <p>I like</p>{' '}

src/resources/api-request.ts

@@ -12,21 +12,20 @@ export const MAX_TOKENS = 3000
 const sendCompletionURL = 'https://api.openai.com/v1/completions'
 
 const defaultCompletionParams = {
- model: 'text-davinci-003',
  temperature: 0.3,
  max_tokens: MAX_TOKENS,
  top_p: 1,
  frequency_penalty: 0,
  presence_penalty: 0
 }
 
-export const sendCompletionRequest = async (userToken: string, request: string): Promise<{ error?: any; response?: ResponseObject }> => {
+export const sendCompletionRequest = async (userToken: string, request: string, selectedModel: string): Promise<{ error?: any; response?: ResponseObject }> => {
  try {
  const headers = {
  'Content-Type': 'application/json',
  Authorization: `Bearer ${userToken}`
  }
- const params = { ...defaultCompletionParams, prompt: request, stop: '\n' }
+ const params = { ...defaultCompletionParams, prompt: request, stop: '\n', model: selectedModel }
 
  const res = await CustomAxios.post(sendCompletionURL, JSON.stringify(params), { headers }).then((response: APIResponse) => {
  return response.data.response

src/tests/pages/HomePage.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/react/dont-cleanup-after-each'
 import { cleanup, render, screen, fireEvent } from '@testing-library/react'
 import { BrowserRouter as Router } from 'react-router-dom'
 import HomePage from '../../pages/HomePage'
+import { models } from '../../utility/options'
 
 const mockAPIKey = 'api_keySample123784'
 
@@ -22,15 +23,19 @@ describe('HomePage - Page components', () => {
  cleanup()
  })
 
- it('Expect to have all starting components rendered', () => {
+ it('Expect to have all starting components rendered', async () => {
  const selectElements = screen.getAllByRole('combobox')
  const inputElements = screen.getAllByRole('textbox')
  const submitButton = screen.getByRole('button')
 
  expect(selectElements[0]).toBeInTheDocument()
+ expect(selectElements[0]).toHaveValue(models[0])
  expect(selectElements[1]).toBeInTheDocument()
+ expect(selectElements[2]).toBeInTheDocument()
+
  expect(inputElements[0]).toBeInTheDocument()
  expect(inputElements[1]).toBeInTheDocument()
+
  expect(submitButton).toBeInTheDocument()
  expect(submitButton).toBeDisabled()
  })

src/utility/options.ts

@@ -1,2 +1,3 @@
 export const subjects = ['books', 'movies', 'tv shows', 'podcasts', 'articles', 'songs']
 export const quantities = ['5', '10', '20', '50']
+export const models = ['gpt-3.5-turbo', 'text-davinci-003', 'text-davinci-002', 'text-babbage-001', 'text-ada-001', 'text-curie-001']