feat: add ollama url in app

mediar-ai · Aug 6, 2024 · eb993b5 · eb993b5
1 parent 6f89a1a
commit eb993b5
Show file tree

Hide file tree

Showing 9 changed files with 10,200 additions and 13 deletions.
diff --git a/examples/apps/screenpipe-app-tauri/app/page.tsx b/examples/apps/screenpipe-app-tauri/app/page.tsx
@@ -51,12 +51,13 @@ export default function Home() {
         <ChatList
           apiKey={settings.openaiApiKey}
           useOllama={settings.useOllama}
+          ollamaUrl={settings.ollamaUrl}
         />
       ) : (
         <div className="flex flex-col items-center justify-center h-[calc(60vh-200px)]">
           <Card className="w-[350px]">
             <CardHeader>
-              <CardTitle>Welcome to Screenpipe</CardTitle>
+              <CardTitle>Welcome to Screenpipe playground</CardTitle>
               <CardDescription>
                 Make sure to run screenpipe CLI first (check status above).
                 Also, please, set your AI provider settings to ask questions

diff --git a/examples/apps/screenpipe-app-tauri/bun.lockb b/examples/apps/screenpipe-app-tauri/bun.lockb
diff --git a/examples/apps/screenpipe-app-tauri/components/chat-list-openai-v2.tsx b/examples/apps/screenpipe-app-tauri/components/chat-list-openai-v2.tsx
@@ -7,7 +7,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { ChatMessage } from "./chat-message-v2";
 import { Message, generateText, nanoid, streamText, tool } from "ai";
 import { createOpenAI, openai } from "@ai-sdk/openai";
-import { ollama } from "ollama-ai-provider-fix"; // ! HACK TEMPORARY
+import { createOllama, ollama } from "ollama-ai-provider"; // ! HACK TEMPORARY
 
 import { IconOpenAI } from "./ui/icons";
 import { spinner } from "./spinner";
@@ -113,9 +113,11 @@ async function generateTextWithRetry(
 export function ChatList({
   apiKey,
   useOllama,
+  ollamaUrl,
 }: {
   apiKey: string;
   useOllama: boolean;
+  ollamaUrl: string;
 }) {
   const [messages, setMessages] = useState<Message[]>([]);
   const [inputMessage, setInputMessage] = useState("");
@@ -136,8 +138,11 @@ export function ChatList({
     setInputMessage("");
 
     try {
+      const baseUrl = ollamaUrl.includes("/api")
+        ? ollamaUrl
+        : ollamaUrl + "/api";
       const provider = useOllama
-        ? ollama
+        ? createOllama({ baseURL: baseUrl })
         : createOpenAI({
             apiKey: apiKey,
           });
@@ -147,18 +152,18 @@ export function ChatList({
       // Test Ollama connection
       if (useOllama) {
         try {
-          await fetch("http://localhost:11434/api/tags");
+          await fetch(`${ollamaUrl}/api/tags`);
         } catch (error) {
           console.log("error", error);
-          throw new Error("Cannot reach local Ollama instance");
+          throw new Error("Cannot reach local Ollama instance at " + ollamaUrl);
         }
       }
 
       // console.log("provider", provider);
       console.log("model", model);
 
       const text = await generateTextWithRetry({
-        model: useOllama ? ollama(model) : provider(model),
+        model: provider(model),
         tools: {
           query_screenpipe: {
             description:
@@ -243,7 +248,7 @@ export function ChatList({
 
       const { textStream } = useOllama
         ? await streamText({
-            model: ollama(model),
+            model: provider(model),
             prompt: JSON.stringify([
               {
                 role: "user",

diff --git a/examples/apps/screenpipe-app-tauri/components/settings.tsx b/examples/apps/screenpipe-app-tauri/components/settings.tsx
@@ -23,8 +23,6 @@ import { Badge } from "@/components/ui/badge";
 import { MemoizedReactMarkdown } from "./markdown";
 import { Separator } from "@/components/ui/separator";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { invoke } from "@tauri-apps/api/core";
-import { spinner } from "./spinner";
 import { platform } from "@tauri-apps/plugin-os";
 
 export function Settings({ className }: { className?: string }) {
@@ -44,6 +42,11 @@ export function Settings({ className }: { className?: string }) {
     updateSettings({ ...localSettings, useOllama: checked });
   };
 
+  const handleOllamaUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLocalSettings({ ...localSettings, ollamaUrl: e.target.value });
+    updateSettings({ ...localSettings, ollamaUrl: e.target.value });
+  };
+
   React.useEffect(() => {
     setLocalSettings(settings);
     setCurrentPlatform(platform());
@@ -150,6 +153,31 @@ export function Settings({ className }: { className?: string }) {
                     </TooltipContent>
                   </Tooltip>
                 </TooltipProvider>
+                {localSettings.useOllama && (
+                  <div className="w-full max-w-md mt-2">
+                    <div className="flex-col gap-2 mb-4">
+                      <div className="flex items-center gap-4 mb-4">
+                        <Label
+                          htmlFor="ollamaUrl"
+                          className="min-w-[80px] text-right"
+                        >
+                          Ollama URL
+                        </Label>
+                        <Input
+                          id="ollamaUrl"
+                          value={localSettings.ollamaUrl}
+                          onChange={handleOllamaUrlChange}
+                          className="flex-grow"
+                          placeholder="Enter Ollama URL (e.g., http://localhost:11434)"
+                        />
+                      </div>
+                      {/* add small text to indicate only port 11434 is supported for security reasons */}
+                      <p className="mt-1 text-sm text-muted-foreground text-center">
+                        For now only port 11434 is supported for security reasons.
+                      </p>
+                    </div>
+                  </div>
+                )}
                 <div className="text-sm text-muted-foreground mt-1">
                   <MemoizedReactMarkdown
                     components={{

diff --git a/examples/apps/screenpipe-app-tauri/lib/hooks/use-settings.tsx b/examples/apps/screenpipe-app-tauri/lib/hooks/use-settings.tsx
@@ -6,6 +6,7 @@ import { join } from "@tauri-apps/api/path";
 interface Settings {
   openaiApiKey: string;
   useOllama: boolean;
+  ollamaUrl: string;
   isLoading: boolean;
   useCloudAudio: boolean;
   useCloudOcr: boolean;
@@ -17,6 +18,7 @@ export function useSettings() {
   const [settings, setSettings] = useState<Settings>({
     openaiApiKey: "",
     useOllama: false,
+    ollamaUrl: "http://localhost:11434",
     isLoading: true,
     useCloudAudio: false,
     useCloudOcr: false,
@@ -37,13 +39,16 @@ export function useSettings() {
           ((await store!.get("useCloudAudio")) as boolean) ?? false;
         const savedUseCloudOcr =
           ((await store!.get("useCloudOcr")) as boolean) ?? false;
-
+        const savedOllamaUrl =
+          ((await store!.get("ollamaUrl")) as string) ||
+          "http://localhost:11434";
         setSettings({
           openaiApiKey: savedKey,
           useOllama: savedUseOllama,
           isLoading: false,
           useCloudAudio: savedUseCloudAudio,
           useCloudOcr: savedUseCloudOcr,
+          ollamaUrl: savedOllamaUrl,
         });
       } catch (error) {
         console.error("Failed to load settings:", error);
@@ -64,6 +69,7 @@ export function useSettings() {
       await store!.set("useOllama", updatedSettings.useOllama);
       await store!.set("useCloudAudio", updatedSettings.useCloudAudio);
       await store!.set("useCloudOcr", updatedSettings.useCloudOcr);
+      await store!.set("ollamaUrl", updatedSettings.ollamaUrl);
       await store!.save();
       setSettings(updatedSettings);
     } catch (error) {