fix: use correct API endpoints in UI development mode (vana-com#7)

scripts/build-ui.sh

@@ -5,9 +5,8 @@ set -e
 # Step 1: Build Next.js App
 echo "Building Next.js app..."
 cd selfie-ui
-yarn install
-# NODE_ENV=production yarn install --production --frozen-lockfile
-yarn run build
+yarn install --frozen-lockfile
+NODE_ENV=production yarn run build
 
 # Step 2: Move the out/ directory to FastAPI static file serving directory
 echo "Moving built files to FastAPI app..."

selfie-ui/.env.development

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_BASE_URL=http://localhost:8181

selfie-ui/.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_BASE_URL=""

selfie-ui/src/app/components/Chat.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from "react";
 import dynamic from "next/dynamic";
 import { RequestDetails } from "deep-chat/dist/types/interceptors";
-
+import { apiBaseUrl } from "../config";
 
 const DeepChat = dynamic(
   () => import('deep-chat-react').then((mod) => ({ default: mod.DeepChat })),
@@ -102,7 +102,7 @@ export const Chat = ({
     ]}
     stream={true}
     request={{
-      url: '/v1/chat/completions',
+      url: `${apiBaseUrl}/v1/chat/completions`,
       method: 'POST',
       headers: {
         'Authorization': 'bearer ignored',

selfie-ui/src/app/config.ts

@@ -0,0 +1 @@
+export const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || '';

selfie-ui/src/app/page.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import CodeSnippet from "./components/CodeSnippet";
 import { Chat } from "./components/Chat";
 import { DocumentTable } from "./components/DocumentTable";
 import { DataSourceTable } from "./components/DataSourceTable";
 import { DataSource, Documents, DocumentStats } from "./types";
+import { apiBaseUrl } from "./config";
 
 const SelfieManager = () => {
   const [dataSources, setDataSources] = useState<DataSource[]>([]);
@@ -61,14 +62,9 @@ const SelfieManager = () => {
     }
   }, [bio]);
 
-
-  useEffect(() => {
-    fetchDataSources();
-  }, []);
-
-  const fetchDataSources = async () => {
+  const fetchDataSources = useCallback(async () => {
     try {
-      const response = await fetch('/v1/data-sources');
+      const response = await fetch(`${apiBaseUrl}/v1/data-sources`);
       const data = await response.json();
       setDataSources(data);
       data.forEach((dataSource: any) => fetchDocuments(dataSource.id));
@@ -77,11 +73,15 @@ const SelfieManager = () => {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    fetchDataSources();
+  }, [fetchDataSources]);
 
   const fetchDocuments = async (sourceId: string) => {
     try {
-      const response = await fetch(`/v1/documents?source_id=${sourceId}`);
+      const response = await fetch(`${apiBaseUrl}/v1/documents?source_id=${sourceId}`);
       const docs = await response.json();
       setDocuments(prevDocs => ({ ...prevDocs, [sourceId]: docs }));
     } catch (error) {
@@ -106,13 +106,12 @@ const SelfieManager = () => {
   }, [documents, dataSources, selectedDocuments]);
 
   const handleScan = async (sourceId: string) => {
-    await fetch(`/v1/data-sources/${sourceId}/scan`, { method: 'POST' });
+    await fetch(`${apiBaseUrl}/v1/data-sources/${sourceId}/scan`, { method: 'POST' });
     await fetchDocuments(sourceId);
   };
 
   const handleIndex = async (sourceId: string) => {
-    // await fetch(`http://localhost:8181/v1/data-sources/${sourceId}/index`, { method: 'POST' });
-    await fetch(`/v1/data-sources/${sourceId}/index`, { method: 'POST' });
+    await fetch(`${apiBaseUrl}/v1/data-sources/${sourceId}/index`, { method: 'POST' });
   };
 
   const toggleDocumentSelection = (docId: string) => {
@@ -143,7 +142,7 @@ const SelfieManager = () => {
 
   const handleAddDataSource = async (dataSourceName: string, selectedDirectory: string) => {
     try {
-      const response = await fetch('/v1/data-sources', {
+      const response = await fetch(`${apiBaseUrl}/v1/data-sources`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -187,7 +186,7 @@ const SelfieManager = () => {
     console.log(`${deleteInstead ? 'Unindexing' : 'Indexing'} documents:`, documentIds);
 
     try {
-      const response = await fetch(`/v1/documents/${ deleteInstead ? 'unindex' : 'index'}`, {
+      const response = await fetch(`${apiBaseUrl}/v1/documents/${ deleteInstead ? 'unindex' : 'index'}`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -217,7 +216,7 @@ const SelfieManager = () => {
 
   const handleDeleteDataSource = async (dataSourceId: string) => {
     try {
-      const response = await fetch(`/v1/data-sources/${dataSourceId}`, {
+      const response = await fetch(`${apiBaseUrl}/v1/data-sources/${dataSourceId}`, {
         method: 'DELETE'
       });
 

selfie/config.py

@@ -18,9 +18,8 @@ class AppConfig(BaseModel):
     database_storage_root: str = Field(default=os.path.join(os.path.dirname(os.path.realpath(__file__)), "../data/database"), description="Root directory for database storage")
     embeddings_storage_root: str = Field(default=os.path.join(os.path.dirname(os.path.realpath(__file__)), "../data/embeddings"), description="Root directory for embeddings storage")
     db_name: str = Field(default='selfie.db', description="Database name")
-    # Newer versions of llama.cpp do not seem compatible with mistral-7b-instruct-v0.2 without explicitly setting chat_format="mistral-instruct"
-    # local_model: str = Field(default='TheBloke/Mistral-7B-Instruct-v0.2-GGUF/mistral-7b-instruct-v0.2.Q4_K_M.gguf', description="Local model")
-    local_model: str = Field(default='TheBloke/CapybaraHermes-2.5-Mistral-7B-GGUF/capybarahermes-2.5-mistral-7b.Q4_K_M.gguf', description="Local model")
+    # local_model: str = Field(default='TheBloke/Mixtral-8x7B-Instruct-v0.1-GGUF/mixtral-8x7b-instruct-v0.1.Q4_K_M.gguf', description="Local model")
+    local_model: str = Field(default='TheBloke/Mistral-7B-Instruct-v0.2-GGUF/mistral-7b-instruct-v0.2.Q4_K_M.gguf', description="Local model")
     local_gpu_model: str = Field(default='TheBloke/Mistral-7B-OpenOrca-GPTQ', description="Local GPU model")
     local_functionary_model: str = Field(default="meetkai/functionary-7b-v2-GGUF/functionary-7b-v2.q4_0.gguf", description="Local functionary model")
     hosted_model: str = Field(default="openai/gpt-3.5-turbo", description="Hosted model")

selfie/text_generation/generation.py

@@ -49,6 +49,8 @@ async def completion(request: CompletionRequest | ChatCompletionRequest) -> Self
             method="llama.cpp",
             n_ctx=8192,
             n_gpu_layers=-1 if config.gpu else 0,
+            # Special-case models whose embedded prompt templates do not work well
+            **({ 'chat_format': "mistrallite"} if "mistral" in model or "mixtral" in model else {})
         ).generator.llm
 
         completion_fn = (llm.create_chat_completion if chat_mode else llm.create_completion)

selfie/text_generation/retrieval_augmentation.py

@@ -20,7 +20,7 @@ async def augment(request: CompletionRequest | ChatCompletionRequest, completion
         while i >= 0 and len(context) < 512 and len(context.split("\n")) < 15:
             message = request.messages[i]
             if message.role != "system":
-                context = f"{message.content}\n{context}"
+                context = f"{message.role}: {message.content}\n{context}"
             i -= 1
     else:
         context = request.prompt