initial support for direct url llm support

components/Playground/index.tsx

@@ -37,6 +37,7 @@ const Playground = () => {
   const [isSystemInputVisible, setSystemInputVisible] = useState(false);
   const [isModelInputVisible, setModelInputVisible] = useState(false);
   const [aiProvider, setAIProvider] = useState<string>("openai");
+  const [urlOption, setUrlOption] = useState<string | any>(null);
 
   const [systemMessage, setSystemMessage] = useState(
     DEFAULT_PROMPT
@@ -48,8 +49,10 @@ const Playground = () => {
 
   const modifiedHandleSubmit = async (e: FormEvent<HTMLFormElement>, chatRequestOptions?: ChatRequestOptions) => {
     e.preventDefault();
-    // Pass the aiProvider in chatRequestOptions
-    await handleSubmit(e, { ...chatRequestOptions, aiProvider } as any);
+    await handleSubmit(e, { 
+      ...chatRequestOptions, 
+      aiProvider, 
+    } as any);
   };
 
   useEffect(() => {
@@ -68,7 +71,8 @@ const Playground = () => {
   const { append, messages, input, setInput, handleSubmit, ...rest } = useChat({
     body: {
       systemMessage: systemMessage,
-      aiProvider: aiProvider
+      aiProvider: aiProvider,
+      url: urlOption
     },
     onError: (error) => {
       console.error(error);
@@ -156,7 +160,19 @@ const Playground = () => {
                 >
                   <option value="openai">gpt-4</option>
                   <option value="meta-llama/Llama-2-70b-chat-hf">meta-llama/Llama-2-70b-chat-hf</option>
+                  <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="url-option">
+                    Model URL Option:
+                  </label>
+                  
                 </select>
+                <input 
+                  id="url-option"
+                  type="url"
+                  placeholder="Enter URL"
+                  value={urlOption}
+                  onChange={(e) => setUrlOption(e.target.value)}
+                  className="border p-2 rounded-md shadow-sm w-full bg-transparent text-gray-700 mt-2"
+                />
               </div>
             )}
 

pages/api/chat/index.ts

@@ -2,21 +2,20 @@ import { OpenAIStream, StreamingTextResponse } from "ai";
 import { Configuration, OpenAIApi } from "openai-edge";
 import { HfInference } from '@huggingface/inference';
 import { HuggingFaceStream } from 'ai';
-import { experimental_buildLlama2Prompt } from 'ai/prompts'
-
-// Configurations for OpenAI
-const openaiConfig = new Configuration({
-    apiKey: process.env.OPENAI_API_KEY,
-});
-const openai = new OpenAIApi(openaiConfig);
-
-// Create a new HuggingFace Inference instance
-const Hf = new HfInference(process.env.HUGGINGFACE_API_KEY);
+import { experimental_buildLlama2Prompt } from 'ai/prompts';
 
 export const runtime = 'edge';
 
 export default async function(req: Request) {
-    let { messages, aiProvider = 'openai', systemMessage } = await req.json();
+    let { messages, aiProvider = 'openai', systemMessage, url } = await req.json();
+
+    // Set up configurations for OpenAI
+    const openaiConfig = new Configuration({
+        apiKey: process.env.OPENAI_API_KEY,
+        baseURL: url ? url : undefined,  // Set baseURL to the provided 'url' if it exists
+    } as any);
+    const openai = new OpenAIApi(openaiConfig);
+    const Hf = new HfInference(process.env.HUGGINGFACE_API_KEY);
 
     // Prepend the system message if it's not already there
     if (messages.length === 0 || messages[0].role !== "system") {
@@ -25,14 +24,12 @@ export default async function(req: Request) {
             content: systemMessage
         }, ...messages];
     }
-
     if (aiProvider === 'openai') {
         const response = await openai.createChatCompletion({
             model: 'gpt-4',
             stream: true,
             messages
         });
-
         const stream = OpenAIStream(response);
         return new StreamingTextResponse(stream);
     } else {
@@ -41,10 +38,10 @@ export default async function(req: Request) {
             model: aiProvider,
             inputs: experimental_buildLlama2Prompt(messages),
             parameters: {
-              repetition_penalty: 1,
-              return_full_text: false
+                repetition_penalty: 1,
+                return_full_text: false
             }
-          })
+        });
 
         const stream = HuggingFaceStream(response);
         return new StreamingTextResponse(stream);