Add option to use local LLM model

Related to vincanger#13

Add support for switching between OpenAI and local LLM models.

* **Backend Changes**
  - Add `localModel` field to `User` model in `schema.prisma`.
  - Update migration file to include `localModel` field in the `User` table.
  - Modify `generateCoverLetter` function in `src/server/actions.ts` to check if `localModel` is set and use it instead of OpenAI's model.

* **Frontend Changes**
  - Add a dropdown in `src/client/MainPage.tsx` to allow users to select between OpenAI and local models.
  - Add a section in `src/client/ProfilePage.tsx` to display and update the `localModel` field for the user.

migrations/20231004142809_subscription_status/migration.sql

@@ -1,2 +1,3 @@
 -- AlterTable
 ALTER TABLE "User" ADD COLUMN     "subscriptionStatus" TEXT;
+ALTER TABLE "User" ADD COLUMN     "localModel" TEXT;

schema.prisma

@@ -14,6 +14,7 @@ model User {
   hasPaid              Boolean       @default(false)
   isUsingLn            Boolean       @default(false)
   gptModel             String        @default("gpt-4o-mini")
+  localModel           String?       // New field to store the local model path
   datePaid             DateTime?
   stripeId             String?
   checkoutSessionId    String?

src/client/MainPage.tsx

@@ -35,6 +35,7 @@ import {
   Radio,
   Tooltip,
   useDisclosure,
+  Select,
 } from '@chakra-ui/react';
 import BorderBox from './components/BorderBox';
 import { LeaveATip, LoginToBegin } from './components/AlertDialog';
@@ -525,6 +526,13 @@ function MainPage() {
                   </VStack>
                 </FormControl>
               )}
+              <FormControl>
+                <FormLabel htmlFor='modelType'>Select Model Type</FormLabel>
+                <Select id='modelType' {...register('modelType')}>
+                  <option value='openai'>OpenAI</option>
+                  <option value='local'>Local</option>
+                </Select>
+              </FormControl>
               <VStack
                 border={'sm'}
                 bg='bg-contrast-xs'
@@ -645,4 +653,4 @@ function MainPage() {
   );
 }
 
-export default MainPage;
+export default MainPage;

src/client/ProfilePage.tsx

@@ -4,13 +4,14 @@ import { logout } from 'wasp/client/auth';
 import { stripePayment, stripeGpt4Payment, useQuery, getUserInfo } from 'wasp/client/operations';
 
 import BorderBox from './components/BorderBox';
-import { Box, Heading, Text, Button, Code, Spinner, VStack, HStack, Link } from '@chakra-ui/react';
+import { Box, Heading, Text, Button, Code, Spinner, VStack, HStack, Link, FormControl, FormLabel, Input } from '@chakra-ui/react';
 import { useState } from 'react';
 import { IoWarningOutline } from 'react-icons/io5';
 
 export default function ProfilePage({ user }: { user: User }) {
   const [isLoading, setIsLoading] = useState(false);
   const [isGpt4loading, setIsGpt4Loading] = useState(false);
+  const [localModel, setLocalModel] = useState(user.localModel || '');
 
   const { data: userInfo } = useQuery(getUserInfo, { id: user.id });
 
@@ -41,6 +42,11 @@ export default function ProfilePage({ user }: { user: User }) {
     setIsGpt4Loading(false);
   }
 
+  async function handleLocalModelChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setLocalModel(event.target.value);
+    // Add logic to update the localModel field in the backend
+  }
+
   return (
     <BorderBox>
       {!!userInfo ? (
@@ -160,6 +166,16 @@ export default function ProfilePage({ user }: { user: User }) {
               </VStack>
             </VStack>
           )}
+          <FormControl>
+            <FormLabel htmlFor='localModel'>Local Model Path</FormLabel>
+            <Input
+              id='localModel'
+              type='text'
+              value={localModel}
+              onChange={handleLocalModelChange}
+              placeholder='Enter local model path'
+            />
+          </FormControl>
           <Button alignSelf='flex-end' size='sm' onClick={() => logout()}>
             Logout
           </Button>

src/server/actions.ts

@@ -146,16 +146,30 @@ export const generateCoverLetter: GenerateCoverLetter<CoverLetterPayload, CoverL
       });
     }
 
-    const response = await fetch('https://api.openai.com/v1/chat/completions', {
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.OPENAI_API_KEY!}`,
-      },
-      method: 'POST',
-      body: JSON.stringify(payload),
-    });
+    if (context.user.localModel) {
+      // Use local model
+      const response = await fetch(context.user.localModel, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
 
-    json = (await response.json()) as OpenAIResponse;
+      json = (await response.json()) as OpenAIResponse;
+    } else {
+      // Use OpenAI model
+      const response = await fetch('https://api.openai.com/v1/chat/completions', {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${process.env.OPENAI_API_KEY!}`,
+        },
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
+
+      json = (await response.json()) as OpenAIResponse;
+    }
 
     if (json?.error) throw new HttpError(500, json?.error?.message || 'Something went wrong');